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 | 495 ++++++++++++++----------------------------------------
1 files changed, 129 insertions(+), 366 deletions(-)
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 3a2e5cb..eddd7a6 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,393 +1,156 @@
<template>
<div class="themaic">
- <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
- >
+ <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-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-pagination
- layout="prev, pager, next, jumper"
- :total="pagesize"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </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 @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: '',
- listcount: 7,
- 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() {},
- 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;
- this.dialogVisible = true;
+ mounted () {
- // var url = "http://localhost/" + res.pop;
- // window.open(
- // url,
- // "newwindow",
- // "height=750, width=1400, top=150,left=400 "
- // );
+ },
+ 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>
+<style lang="less" scoped>
.themaic {
- width: 100%;
height: 100%;
- position: relative;
- cursor: pointer;
- overflow: hidden;
-}
-
-.themaic .el-divider--horizontal {
- margin: 10px 0 !important;
-}
-
-.themaic .th_title {
- font-size: 22px;
- font-family: Microsoft YaHei;
- font-weight: bold;
- color: #3b4d6e;
-}
-
-.radiusSearch .el-input__wrapper {
- border-radius: 50px;
-}
-
-.themaic .active {
- color: #409eff;
-}
-
-.themaic .themic_middle_card {
- border: transparent;
-}
-
-.themaic .themic_middle_card .el-card__body {
- padding: 0px;
-}
-
-.themaic .midedle_div {
- width: 23.5%;
- height: 250px;
- float: left;
- margin-right: 1%;
- margin-bottom: 1%;
- position: relative;
-}
-
-.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;
+ display: flex;
+}
+
+.title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 86px;
+ width: 100%;
+ z-index: 999;
+}
+
+.mapleft {
+ position: absolute;
+ top: 90px;
+ left: 0px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
+
+.mapright {
+ position: absolute;
+ top: 90px;
+ right: -20px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
+
+.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;
+ height: 30px;
+ line-height: 30px;
+ background: url(~@/assets/img/Screen/asideTitleBg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
}
-
-/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
- color: #fff;
-} */
</style>
--
Gitblit v1.9.3