From e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 09 五月 2024 11:06:43 +0800
Subject: [PATCH] 代码更新
---
src/views/Thematic/index.vue | 736 +++++++++----------------------------------------------
1 files changed, 126 insertions(+), 610 deletions(-)
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 0b27a8f..eddd7a6 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,640 +1,156 @@
<template>
<div class="themaic">
- <div class="headera-title">
- <div>
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item>
- <label class="th_title">{{ $t('themaic.name') }}</label>
- </el-form-item>
- <el-form-item>
- <el-input
- :placeholder="$t('common.pleaseInput')"
- suffix-icon="el-icon-search"
- v-model="input3"
- />
- </el-form-item>
- <el-form-item>
- <div class="title_count" style="color: white">
- {{ $t('themaic.find') }}
- <label style="magin: 0% 15px">{{ listcount }}</label>
- {{ $t('themaic.record') }}
- </div>
- </el-form-item>
- </el-form>
- </div>
- <div class="header_right">
- <el-form :inline="true" :model="form" class="demo-form-inline">
- <el-form-item :label="$t('themaic.maptltle')">
- <el-select
- v-model="selvalue"
- class="m-2"
- placeholder="Select"
- style="width: 150px"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <div class="margin-right: 32px;">
- <label style="margin-right: 10px; color: white"
- >{{ $t('themaic.sortbytime') }}:</label
- >
+ <mapsdk></mapsdk>
+ <top class="title"
+ ref="title"></top>
+ <left class="mapleft"
+ :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
+ ref="mapleft"></left>
- <i
- @click="changetime(1)"
- :class="{ active: timeindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
+ <project-tree class="project-tree"
+ v-show="ProjectreeDisplay"></project-tree>
- <i
- @click="changetime(2)"
- :class="{ active: timeindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-form-item>
- <el-form-item>
- <div>
- <label style="margin-right: 10px; color: white"
- >{{ $t('themaic.sortbyviews') }}:</label
- >
-
- <i
- @click="changeChecked(1)"
- :class="{ active: checkindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changeChecked(2)"
- :class="{ active: checkindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-form-item>
- </el-form>
- </div>
- </div>
- <div class="themaic_content">
- <div
- @click="showThematic(item)"
- v-for="(item, i) in middleList"
- class="midedle_div"
- :key="i"
- >
- <el-card class="middle_card">
- <table>
- <tr>
- <td>
- <div class="midddle_title">
- <div class="t1">{{ item.name }}</div>
- <div>
- <label class="t2">{{ item.time }}</label
- ><label class="t2">娴忚{{ item.count }}娆�</label>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>
- <div
- class="middle_image"
- :style="{
- background: 'url(' + item.url + ') no-repeat center',
- 'background-size': '100% 100%',
- }"
- ></div>
- </td>
- </tr>
- <tr>
- <td></td>
- </tr>
- </table>
- </el-card>
- </div>
- </div>
- <div style="display: flex; justify-content: center">
- <div class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="1"
- :page-sizes="[1, 2, 5, 10]"
- :page-size="10"
- layout="total, sizes, prev, pager, next, jumper"
- :total="count"
- >
- </el-pagination>
- </div>
- </div>
- <!-- <el-card style="height: 100%">
- <el-row :gutter="20">
- <el-col :span="6">
- <div class="th_title">{{ $t('themaic.name') }}</div>
- </el-col>
- <el-col :span="4" :offset="14">
- <el-input
- size="small"
- :placeholder="$t('common.pleaseInput')"
- suffix-icon="el-icon-search"
- v-model="input3"
- >
- </el-input>
- </el-col>
- </el-row>
- <el-divider />
- <el-row>
- <el-col :span="5">
- <label style="margin-right: 10px"
- >{{ $t('themaic.maptltle') }}:</label
- >
- <el-select
- v-model="selvalue"
- class="m-2"
- placeholder="Select"
- style="width: 150px"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-col>
- <el-col :span="3">
- <div style="margin-top: 5px">
- <label style="margin-right: 10px"
- >{{ $t('themaic.sortbytime') }}:</label
- >
-
- <i
- @click="changetime(1)"
- :class="{ active: timeindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changetime(2)"
- :class="{ active: timeindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-col>
- <el-col :span="3">
- <div style="margin-top: 5px">
- <label style="margin-right: 10px"
- >{{ $t('themaic.sortbyviews') }}:</label
- >
-
- <i
- @click="changeChecked(1)"
- :class="{ active: checkindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changeChecked(2)"
- :class="{ active: checkindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-col>
- <el-col :span="10"> </el-col>
- <el-col :span="3">
- <div style="margin-top: 5px">
- {{ $t('themaic.find') }}
- <label style="magin: 0% 15px">{{ listcount }}</label>
- {{ $t('themaic.record') }}
- </div>
- </el-col>
- </el-row>
- <el-divider />
- <el-card shadow="never" class="themic_middle_card">
- <div
- @click="showThematic(item)"
- v-for="(item, i) in middleList"
- class="midedle_div"
- :key="i"
- >
- <el-card class="middle_card">
- <!-- <div>
-
-
-
- </div>
-
- <table>
- <tr>
- <td>
- <div class="t1">{{ item.name }}</div>
- </td>
- </tr>
- <tr>
- <td>
- <div
- class="middle_image"
- :style="{
- background: 'url(' + item.url + ') no-repeat center',
- 'background-size': '100% 100%',
- }"
- ></div>
- </td>
- </tr>
- <tr>
- <td>
- <div style="position: absolute; bottom: 2%; right: 4%">
- <label class="t2">{{ item.time }}</label
- ><label class="t2">娴忚{{ item.count }}娆�</label>
- </div>
- </td>
- </tr>
- </table>
- </el-card>
- </div>
- </el-card>
- -->
- <el-dialog
- class="themaic_dialog"
- :modal-append-to-body="true"
- :append-to-body="true"
- :show-close="false"
- :visible.sync="dialogVisible"
- width="99%"
- :before-close="handleClose"
- >
- <map-View
- v-if="dialogVisible"
- @close="close"
- :typeIndex="typeIndex"
- ></map-View>
- </el-dialog>
+ <right class="mapright"
+ :style="{ width: rightWidth }"
+ ref="mapright"></right>
+ <bottom class="mapbottom"
+ ref="mapbottom"></bottom>
</div>
</template>
<script>
-import mapView from '@/components/mapviewTwo';
+import mapsdk from "@/components/Screen/mapsdk.vue"
+import top from "../../components/Screen/top.vue"
+import left from "@/components/Screen/left.vue"
+import right from "../../components/Screen/right.vue"
+import bottom from "../../components/Screen/bottom.vue"
+import ProjectTree from "../../components/Screen/ProjectTree.vue"
+import axios from "axios"
export default {
- components: {
- mapView,
- },
- data() {
+ components: { mapsdk,top,left,right,bottom,ProjectTree },
+ data () {
return {
- dialogVisible: false,
- input3: '',
- count: 0,
- listcount: 0,
- checkindex: 1,
- timeindex: 1,
- pagesize: 10,
- selvalue: '鍏ㄩ儴',
-
- middleList: [
- {
- index: '1',
- name: '绠￠亾鍩虹鏁版嵁涓撻鍥�',
- time: '2022-07-10',
- count: '28',
- url: require('../../assets/img/themic/a1.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj1.html',
- },
- {
- index: '2',
- name: '鐢ㄦ埛浣跨敤鎯呭喌涓撻鍥�',
- time: '2022-07-22',
- count: '6',
- url: require('../../assets/img/themic/a2.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj2.html',
- },
- {
- index: '3',
- name: '椤圭洰鍩烘湰鎯呭喌涓撻鍥�',
- time: '2022-06-25',
- count: '23',
- url: require('../../assets/img/themic/a3.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj3.html',
- },
- {
- index: '4',
- name: '椤圭洰杩涘害绠＄悊涓撻鍥�',
- time: '2022-07-17',
- count: '15',
- url: require('../../assets/img/themic/a4.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj4.html',
- },
- {
- index: '5',
- name: '鍏ㄧ悆椤圭洰鍒嗗竷涓撻鍥�',
- time: '2022-07-20',
- count: '7',
- url: require('../../assets/img/themic/a5.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj5.html',
- },
- {
- index: '6',
- name: '鍏ㄥ浗绠＄綉鍒嗗竷涓撻鍥�',
- time: '2022-07-26',
- count: '5',
- url: require('../../assets/img/themic/a6.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj5.html',
- },
- {
- index: '7',
- name: '鍏ㄥ浗椤圭洰瓒宠抗涓撻鍥�',
- time: '2022-06-30',
- count: '10',
- url: require('../../assets/img/themic/a7.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj5.html',
- },
- ],
- options: [
- {
- value: '鍏ㄩ儴',
- label: '鍏ㄩ儴',
- },
- ],
- typeIndex: '',
- };
- },
- mounted() {
- this.count = this.middleList.length;
- this.listcount = this.middleList.length;
- },
- created() {
- var val = this.$store.state.currentPerms;
- var permsEntity = this.$store.state.permsEntity;
- for (var i = 0; i < permsEntity.length; i++) {
- if (permsEntity[i].perms == val) {
- // this.showMenuChange(permsEntity[i], permsEntity);
- console.log('涓撻鍥�', permsEntity[i]);
- }
+ leftWidth: "22%",
+ rightWidth: "22%",
+ leftTree: false,
+ currTree: false,
+ ProjectreeDisplay: false,
}
},
- methods: {
- close() {
- this.$confirm('纭鍏抽棴锛�')
- .then((_) => {
- this.dialogVisible = false;
- })
- .catch((_) => {});
- },
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
- },
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`);
- },
- handleClose(done) {
- this.$confirm('纭鍏抽棴锛�')
- .then((_) => {
- done();
- })
- .catch((_) => {});
- },
- changeChecked(res) {
- if (this.checkindex != res) {
- this.checkindex = res;
- }
- },
- changetime(res) {
- if (this.timeindex != res) {
- this.timeindex = res;
- }
- },
- showThematic(res) {
- this.typeIndex = res.index;
+ mounted () {
- this.dialogVisible = true;
+ },
+ created () {
+ this.$bus.$on("changeTree",key => {
+ this.ProjectreeDisplay=key
+ })
+ },
+ methods: {
+ //淇敼宸︿晶瀹藉害
+ ChangeWidth (parm) {
+ if(parm=="left") {
+ if(this.leftWidth=="22%") {
+ this.leftWidth="8px"
+ } else {
+ this.leftWidth="22%"
+ }
+ }
+
+ if(parm=="leftView"||parm=="leftTree") {
+ this.leftWidth="22%"
+ this.rightWidth="22%"
+ }
+ // if (parm == "leftView") {
+ // this.leftTree = false
+ // }
+ // if (parm == "leftTree") {
+ // this.leftTree = true
+ // }
+
+ if(parm=="right") {
+ if(this.rightWidth=="22%") {
+ this.rightWidth="45px"
+ } else {
+ this.rightWidth="22%"
+ }
+ }
},
},
-};
+}
</script>
<style lang="less" scoped>
.themaic {
- width: 100%;
height: 100%;
- position: relative;
- cursor: pointer;
- overflow: hidden;
- background: #303030;
-
- .headera-title {
- width: calc(100% - 2px);
- height: 70px;
- display: flex;
- justify-content: space-between;
- background: #353539;
- .th_title {
- width: 81px;
- height: 20px;
- font-size: 21px;
- font-family: Source Han Sans SC;
- font-weight: 400;
- color: #009cff;
- line-height: 49px;
- margin-left: 30px;
- bottom: 24px;
- }
-
- .title_count {
- height: 18px;
- font-size: 19px;
- font-family: Source Han Sans CN;
- font-weight: 200;
- color: #ffffff;
- }
- .header_right {
- float: right;
- margin-right: 30px;
-
- height: 100%;
- width: auto;
- }
- .active {
- color: #409eff;
- }
- }
- .themaic_content {
- width: calc(100% - 54px);
- height: 80%;
- display: flex;
- flex-flow: row wrap;
-
- justify-content: flex-start;
- padding: 17px 27px 0px 27px;
-
- .midedle_div {
- width: 456px;
- height: 303px;
- margin-right: 10px;
- .t1 {
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- line-height: 35px;
- }
- .middle_image {
- height: 220px;
- width: 415px;
- }
- .t2 {
- font-size: 12px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- line-height: 35px;
- }
- .midddle_title {
- display: flex;
- justify-content: space-between;
- }
- }
- .themic_middle_card {
- border: transparent;
- }
- /deep/.el-card {
- background: #454545;
- border: 1px solid #454545;
- }
- }
- .pagination_box {
- /deep/.el-input__inner {
- background-color: transparent !important;
- border: 1px solid;
- color: white;
- }
- /deep/.el-pagination__total {
- color: white;
- }
- /deep/.el-pagination__jump {
- color: white;
- }
- /deep/.el-pager li.active {
- color: #409eff;
- }
- /deep/.el-pager li {
- color: white;
- background: transparent;
- }
- /deep/.el-pager li {
- color: white;
- }
- /deep/.btn-prev {
- background: transparent;
- }
- /deep/.btn-next {
- background: transparent;
- }
- }
- /deep/.el-form-item__content {
- line-height: 70px;
- }
- /deep/ .el-input__inner {
- border: 1px solid white;
- color: white;
- }
- /deep/.el-form-item__label {
- color: white;
- line-height: 70px;
- }
- /deep/ .el-form--inline .el-form-item {
- margin-right: 32px;
- }
+ width: 100%;
+ position: absolute;
+ display: flex;
}
-// .themaic .el-divider--horizontal {
-// margin: 10px 0 !important;
-// }
+.title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 86px;
+ width: 100%;
+ z-index: 999;
+}
-// .themaic .th_title {
-// font-size: 22px;
-// font-family: Microsoft YaHei;
-// font-weight: bold;
-// color: #3b4d6e;
-// }
+.mapleft {
+ position: absolute;
+ top: 90px;
+ left: 0px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
-// .radiusSearch .el-input__wrapper {
-// border-radius: 50px;
-// }
+.mapright {
+ position: absolute;
+ top: 90px;
+ right: -20px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
-// .themaic .active {
-// color: #409eff;
-// }
-
-// .themaic .themic_middle_card {
-// border: transparent;
-
-// }
-
-// .themaic .themic_middle_card .el-card__body {
-// padding: 0px;
-// }
-
-// .themaic
-
-// .themaic .midedle_div .middle_card {
-// width: 100%;
-// height: 100%;
-// }
-
-// .themaic .midedle_div .middle_card .el-card__body {
-// padding: 10px;
-// }
-
-// .themaic .midedle_div .t1 {
-// font-size: 16px;
-// font-family: Microsoft YaHei;
-// font-weight: bold;
-// color: #000000;
-// }
-
-// .themaic .midedle_div .t2 {
-// font-size: 13px;
-// font-family: Microsoft YaHei;
-// font-weight: 400;
-// color: #3f3f3f;
-// margin-right: 10px;
-// }
-
-// .themaic .midedle_div .middle_image {
-// width: 94%;
-// /* margin-top: 10px; */
-// height: 73%;
-// position: absolute;
-// }
+.mapbottom {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 90px;
+ width: 100%;
+ z-index: 999;
+}
+.project-tree {
+ position: absolute;
+ top: 90px;
+ right: 22%;
+ width: 15%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
</style>
-<style>
-.themaic_dialog .el-dialog {
- background: rgba(0, 0, 0, 0.8) !important;
- margin-top: 5px !important;
- margin-bottom: 5px !important;
- /* margin-top: 5px !important;
-margin-top: 5px !important; */
-}
-.themaic_dialog .el-dialog__header {
- background: transparent !important;
- padding: 0;
- margin: 0;
- color: #fff;
-}
+<style lang="less">
+.themaic {
+ .aside-title {
+ box-sizing: border-box;
+ padding-left: 30px;
+ // height: 27px;
+ // line-height: 27px;
+ // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
+ font-size: 15px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
+ // -webkit-background-clip: text;
+ color: #fff;
+ width: 100%;
-.themaic_dialog .el-dialog__body {
- background: transparent !important;
- height: 98vh;
- padding: 0;
- margin: 0;
- font-size: 20px;
-}
-.el-card {
- background: #303030;
- border: 0px;
+ height: 30px;
+ line-height: 30px;
+ background: url(~@/assets/img/Screen/asideTitleBg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
}
</style>
--
Gitblit v1.9.3