From 9c803f20cc05395bac2d3386accfe230210c07dc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 19 十二月 2022 20:58:31 +0800
Subject: [PATCH] 1
---
src/views/Thematic/index.vue | 1122 +++++++++++++++++++++++++++-------------------------------
1 files changed, 528 insertions(+), 594 deletions(-)
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index d17429a..47d3181 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,415 +1,388 @@
<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
- >
-
- <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-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"
+ <div class="left_menu" :class="{ left_main_show: !leftMenuOpen }">
+ <div class="tree-container">
+ <el-tree
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ :props="defaultProps"
+ ref="tree"
+ @check-change="handleCheckChange"
>
- </el-pagination>
+ </el-tree>
</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 class="changeBaseLayer">
+ <div @click="changeMenulayer" class="CenDiv">
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
</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>
+ </div>
+ </div>
+ <div class="center_content">
+ <div id="MapView" class="MapView">
+ <div class="leftEchart" v-show="openEcharts">
+ <echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
+ <echart12 v-if="typeIndex == '1'" class="echart1"></echart12>
+ <echart13 v-if="typeIndex == '1'" class="echart1"></echart13>
+ <echart21 v-if="typeIndex == '2'" class="echart1"></echart21>
+ <echart22 v-if="typeIndex == '2'" class="echart1"></echart22>
+ <echart23 v-if="typeIndex == '2'" class="echart1"></echart23>
+ <echart31 v-if="typeIndex == '3'" class="echart1"></echart31>
+ <echart32 v-if="typeIndex == '3'" class="echart1"></echart32>
+ <echart33 v-if="typeIndex == '3'" class="echart1"></echart33>
+ <echart44 v-if="typeIndex == '4'" class="echart1"></echart44>
+ <echart45 v-if="typeIndex == '4'" class="echart1"></echart45>
+ <echart46 v-if="typeIndex == '4'" class="echart1"></echart46>
+ </div>
+ <div class="rightEchart" v-show="openEcharts">
+ >
+ <echart14 v-if="typeIndex == '1'" class="echart1"></echart14>
+ <echart15 v-if="typeIndex == '1'" class="echart1"></echart15>
+ <echart16 v-if="typeIndex == '1'" class="echart1"></echart16>
+ <echart24 v-if="typeIndex == '2'" class="echart1"></echart24>
+ <echart25 v-if="typeIndex == '2'" class="echart1"></echart25>
+ <echart26 v-if="typeIndex == '2'" class="echart1"></echart26>
+ <echart34 v-if="typeIndex == '3'" class="echart1"></echart34>
+ <echart35 v-if="typeIndex == '3'" class="echart1"></echart35>
+ <echart36 v-if="typeIndex == '3'" class="echart1"></echart36>
+ <echart41 v-if="typeIndex == '4'" class="echart1"></echart41>
+ <echart42 v-if="typeIndex == '4'" class="echart1"></echart42>
+ <echart43 v-if="typeIndex == '4'" class="echart1"></echart43>
+ </div>
+ <div class="left_content">
+ <div v-show="leftMenuOpen" @click="showLeftMenu">
+ <i style="color: white" class="el-icon-caret-left"></i>
+ </div>
+ <div v-show="!leftMenuOpen" @click="showLeftMenu">
+ <i style="color: white" class="el-icon-caret-right"></i>
+ </div>
+ </div>
+ <div class="right_content">
+ <div v-show="!rightMenuOpen" @click="showRightMenu">
+ <i style="color: white" class="el-icon-caret-left"></i>
+ </div>
+ <div v-show="rightMenuOpen" @click="showRightMenu">
+ <i style="color: white" class="el-icon-caret-right"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right_menu" :class="{ right_main_show: !rightMenuOpen }">
+ <div class="content_right">
+ <ul>
+ <li
+ @click="changeRightList(item)"
+ v-for="item in rightList"
+ :class="item.id == changeSelectli ? 'changeliStyle' : ''"
+ >
+ {{ item.name }}
+ </li>
+ </ul>
+ </div>
+ <div class="bottom_right">
+ <div
+ v-for="item in rightMenu"
+ class="right_item"
+ :class="{ changeStyle: changeSelectStyle == item.id }"
+ @click="changeRightMenu(item)"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
-import mapView from '@/components/mapviewTwo';
+import mapsdk from '../../components/mapsdk.vue';
+import { right_menu, right_list, image_layer } from './index.js';
+import echart11 from '../../components/echart11.vue';
+import echart12 from '../../components/echart12.vue';
+import echart13 from '../../components/echart13.vue';
+import echart14 from '../../components/echart14.vue';
+import echart15 from '../../components/echart15.vue';
+import echart16 from '../../components/echart16.vue';
+import echart21 from '../../components/echart21.vue';
+import echart22 from '../../components/echart22.vue';
+import echart23 from '../../components/echart23.vue';
+import echart24 from '../../components/echart24.vue';
+import echart25 from '../../components/echart25.vue';
+import echart26 from '../../components/echart26.vue';
+import echart31 from '../../components/echart31.vue';
+import echart32 from '../../components/echart32.vue';
+import echart33 from '../../components/echart33.vue';
+import echart34 from '../../components/echart34.vue';
+import echart35 from '../../components/echart35.vue';
+import echart36 from '../../components/echart36.vue';
+import echart41 from '../../components/echart41.vue';
+import echart42 from '../../components/echart42.vue';
+import echart43 from '../../components/echart43.vue';
+import echart44 from '../../components/echart44.vue';
+import echart45 from '../../components/echart45.vue';
+import echart46 from '../../components/echart46.vue';
+import axios from 'axios';
export default {
components: {
- mapView,
+ mapsdk,
+ echart11,
+ echart12,
+ echart13,
+ echart14,
+ echart15,
+ echart16,
+ echart21,
+ echart22,
+ echart23,
+ echart24,
+ echart25,
+ echart26,
+ echart31,
+ echart32,
+ echart33,
+ echart34,
+ echart35,
+ echart36,
+ echart41,
+ echart43,
+ echart42,
+ echart44,
+ echart45,
+ echart46,
},
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: '',
+ typeIndex: null,
+ leftMenuOpen: false,
+ rightMenuOpen: false,
+ changeSelectStyle: null,
+ changeSelectli: null,
+ rightMenu: [],
+ rightList: [],
+ treeData: [],
+ centerFlag: false,
+ isActive: true,
+ isMenuLayer: false,
+ openEcharts: false,
+ defaultProps: {
+ children: 'children',
+ label: 'label',
+ },
};
},
mounted() {
- this.count = this.middleList.length;
- this.listcount = this.middleList.length;
+ this.treeData = image_layer;
+ this.rightList = right_list[0];
+ this.rightMenu = right_menu;
+ this.changeSelectli = this.rightList[0].id;
+ this.changeSelectStyle = this.rightMenu[0].id;
+ this.initMapView();
+ this.addImageLayer();
},
- 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]);
- }
- }
- },
+ created() {},
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;
+ changeRightList(res) {
+ this.changeSelectli = res.id;
+ if (res.layer != null) {
+ var layer = res.layer;
+ this.$refs.tree.setCheckedKeys(layer);
}
- },
- changetime(res) {
- if (this.timeindex != res) {
- this.timeindex = res;
+ if (res.index != null) {
+ this.openEcharts = true;
+ this.typeIndex = res.index;
+ } else {
+ this.openEcharts = false;
+ this.typeIndex = null;
}
- },
- showThematic(res) {
- this.typeIndex = res.index;
+ var vid = res.id;
- this.dialogVisible = true;
+ if (vid.indexOf('b') != -1) {
+ var url = geoserverWFS + '%27' + res.name + '%27';
+ axios.get(url).then((res) => {
+ if (res.status == 200) {
+ var point = res.data.features[0].geometry.coordinates;
+ //瀹氫綅
+ MapViewer.camera.flyTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(
+ point[0],
+ point[1],
+ 8000
+ ),
+ });
+ }
+ });
+ } else if (vid.indexOf('a') != -1) {
+ //瀹氫綅
+ MapViewer.camera.flyTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
+ });
+ } else if (vid.indexOf('c') != -1) {
+ var url = geoserverWFSLine + '%27' + res.name + '%27';
+ axios.get(url).then((res) => {
+ if (res.status == 200) {
+ if (res.data.features.length == 0) return;
+ var std = [];
+ for (var i in res.data.features) {
+ var featurLayer = res.data.features[i];
+ var path = featurLayer.geometry.coordinates[0];
+ for (var j in path) {
+ std.push(path[j][0], path[j][1], 50);
+ }
+ }
+ this.showPathLine(std);
+ }
+ });
+ }
+ },
+ showPathLine(res) {
+ sgworld.Creator.getFlyData(res, (data) => {
+ data.showPoint = false;
+ data.showLine = true;
+ data.mode = 1;
+ // 寮圭獥鏁版嵁
+ window.PathAnimationData = {
+ flyData: data,
+ };
+ window.PathAnimationData.winIndex = layer.open({
+ type: 2,
+ title: '璺緞鍔ㄧ敾',
+ shade: false,
+ area: ['352px', '690px'],
+ offset: 'r',
+ skin: 'other-class',
+ content: SmartEarthRootUrl + 'Workers/path/Path.html',
+ end: function () {
+ PathAnimationData.fly && PathAnimationData.fly.exit();
+ },
+ });
+ });
+ },
+ showLeftMenu() {
+ this.leftMenuOpen = !this.leftMenuOpen;
+ var a = 0;
+ var layer = setInterval(() => {
+ a++;
+ this.$bus.$emit('resizeEchart', true);
+ if (a == 20) {
+ clearInterval(layer);
+ this.$bus.$emit('resizeEchart', true);
+ }
+ }, 100);
+ },
+ showRightMenu() {
+ this.rightMenuOpen = !this.rightMenuOpen;
+ var a = 0;
+ var layer = setInterval(() => {
+ a++;
+ this.$bus.$emit('resizeEchart', true);
+ if (a == 20) {
+ clearInterval(layer);
+ this.$bus.$emit('resizeEchart', true);
+ }
+ }, 100);
+ },
+ changeRightMenu(res) {
+ this.rightList = right_list[parseInt(res.id) - 1];
+ this.changeSelectStyle = res.id;
+ },
+ initMapView() {
+ window.sgworld = new SmartEarth.SGWorld('MapView', {
+ licenseServer: window.sceneConfig.licenseServer,
+ });
+
+ window.MapViewer = window.sgworld._Viewer;
+
+ //瀹氫綅
+ sgworld.Navigate.jumpTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
+ });
+
+ MapViewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+
+ MapViewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+ MapViewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtAnnoLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ })
+ );
+ //鏄剧ずfps
+ MapViewer.scene.debugShowFramesPerSecond = false;
+ //瀵艰埅鎺т欢
+ window.sgworld.navControl('nav', false);
+ //姣斾緥灏�
+ window.sgworld.navControl('scale', false);
+ },
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ MapViewer.imageryLayers.get(2).show = true;
+ MapViewer.imageryLayers.get(1).show = false;
+ } else {
+ MapViewer.imageryLayers.get(2).show = false;
+ MapViewer.imageryLayers.get(1).show = true;
+ }
+ },
+ addImageLayer() {
+ var val_layer = this.treeData[0].children;
+ var std = [];
+ for (var i = 0; i < val_layer.length; i++) {
+ let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ url: geoServerURl,
+ layers: val_layer[i].resource,
+ parameters: {
+ transparent: true,
+ format: 'image/png',
+ },
+ });
+ layerWMS.name = val_layer[i].label;
+ window.MapViewer.imageryLayers.addImageryProvider(layerWMS);
+ std.push(val_layer[i].id);
+ }
+ this.$refs.tree.setCheckedKeys(std);
+ },
+ handleCheckChange(data, checked, indeterminate) {
+ if (data.children != null) return;
+ for (var i = 0; i < window.MapViewer.imageryLayers._layers.length; i++) {
+ var val_id =
+ window.MapViewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
+ const img_layer = window.MapViewer.imageryLayers._layers[i];
+ img_layer.show = checked;
+ }
+ }
},
},
};
@@ -419,227 +392,188 @@
.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;
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ .left_menu {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: #133a5f;
+ .tree-container {
+ margin: 10px;
}
- .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;
+ .changeBaseLayer {
+ width: 100%;
+ height: 80px;
+ margin-top: calc(190% - 10px);
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ .CenDiv {
+ height: 40px;
+ width: 60px;
+ margin: 2%;
+ border-radius: 5px;
+ }
+ .CenDiv:hover {
+ border: 1px solid #409eff;
+ }
+ .active {
+ height: 40px;
+ width: 60px;
+ background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+ .menuLayer {
+ height: 40px;
+ width: 60px;
+ background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
}
}
- .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 {
+ .center_content {
+ flex: 1;
+ height: 100%;
+ .MapView {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ float: left;
+ position: relative;
+ .leftEchart {
+ z-index: 60;
+ position: absolute;
+ height: 100%;
+ width: 20%;
+ margin-left: 1.5%;
display: flex;
+ flex-direction: column;
justify-content: space-between;
}
- }
- .themic_middle_card {
- border: transparent;
- }
- /deep/.el-card {
- background: #454545;
- border: 1px solid #454545;
+ .rightEchart {
+ z-index: 60;
+ position: absolute;
+ height: 100%;
+ width: 20%;
+ right: 0;
+ opacity: 0.5;
+ margin-right: 1.5%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .right_content {
+ width: 10px;
+ height: 100%;
+ z-index: 60;
+ display: flex;
+ align-items: center;
+ right: 0;
+ position: absolute;
+ padding: 0px 5px;
+ }
+ .left_content {
+ width: 10px;
+ height: 100%;
+ z-index: 60;
+ left: 0;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ padding: 0px 5px;
+ }
}
}
- .pagination_box {
- /deep/.el-input__inner {
- background-color: transparent !important;
- border: 1px solid;
- color: white;
+ .item_menu {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ .left_main_show {
+ width: 0;
+ }
+ .right_menu {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: #133a5f;
+
+ .content_right {
+ width: calc(100% -20px);
+ height: 95%;
+ li {
+ border-bottom: 1px solid white;
+ padding: 10px 10px;
+ color: white;
+ }
+ li:hover {
+ color: #409eff;
+ }
+ .changeliStyle {
+ color: #409eff;
+ }
}
- /deep/.el-pagination__total {
- color: white;
+
+ .bottom_right {
+ width: 100%;
+ height: 5%;
+ display: flex;
+ position: relative;
+ .right_item {
+ align-items: center;
+ display: flex;
+ height: calc(100% - 2px);
+ flex-grow: 1;
+ justify-content: center;
+ font-size: 16px;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ color: white;
+ border-bottom: 1px solid white;
+ border-top: 1px solid white;
+ border-left: 1px solid 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;
+ .changeStyle {
+ background: #409eff;
}
}
- /deep/.el-form-item__content {
- line-height: 70px;
+
+ .right_main_show {
+ width: 0;
}
- /deep/ .el-input__inner {
- border: 1px solid white;
- color: white;
+ .echart1 {
+ width: 88%;
+ height: 27%;
+ border: 3px solid rgba(204, 204, 204, 0.76);
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.4);
}
- /deep/.el-form-item__label {
- color: white;
- line-height: 70px;
+
+ /deep/ .el-tree {
+ padding-top: 15px;
+ padding-left: 10px;
+ // 涓嶅彲鍏ㄩ�夋牱寮�
+ .el-tree-node {
+ .is-leaf + .el-checkbox .el-checkbox__inner {
+ display: inline-block;
+ }
+ .el-checkbox .el-checkbox__inner {
+ display: none;
+ }
+ }
}
- /deep/ .el-form--inline .el-form-item {
- margin-right: 32px;
- }
- /deep/.el-input__inner {
- background-color: transparent !important ;
- color: #fff;
- border: 1px solid white !important;
- }
-}
-
-// .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
-
-// .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;
-// }
-</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;
-}
-
-.themaic_dialog .el-dialog__body {
- background: transparent !important;
- height: 98vh;
- padding: 0;
- margin: 0;
- font-size: 20px;
-}
-.el-card {
- background: #303030;
- border: 0px;
}
</style>
--
Gitblit v1.9.3