| | |
| | | <template> |
| | | <div class="themaic"> |
| | | <div class="left_menu" :class="{ left_main_show: !leftMenuOpen }"> |
| | | <div |
| | | class="left_menu" |
| | | :class="{ left_main_show: !leftMenuOpen }" |
| | | > |
| | | <div class="tree-container"> |
| | | <el-tree |
| | | :data="treeData" |
| | |
| | | default-expand-all |
| | | :props="defaultProps" |
| | | ref="tree" |
| | | class="el-tree" |
| | | @check-change="handleCheckChange" |
| | | > |
| | | <span |
| | | class="custom-tree-node" |
| | | slot-scope="{ node, data }" |
| | | > |
| | | <svg-icon |
| | | v-if="!data.children" |
| | | icon-class="file" |
| | | class="svgIcon" |
| | | /> |
| | | <svg-icon |
| | | v-else-if="node.expanded" |
| | | icon-class="floder_open" |
| | | class="svgIcon" |
| | | /> |
| | | <svg-icon |
| | | v-else |
| | | icon-class="floder_close" |
| | | class="svgIcon" |
| | | /> |
| | | <span |
| | | class='fontSize14' |
| | | :title='node.label || "-"' |
| | | >{{node.label}}</span> |
| | | </span> |
| | | </el-tree> |
| | | </div> |
| | | |
| | | <div class="changeBaseLayer"> |
| | | <div @click="changeMenulayer" class="CenDiv"> |
| | | <div |
| | | @click="changeMenulayer" |
| | | class="CenDiv" |
| | | > |
| | | <div |
| | | id="cenBg" |
| | | v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" |
| | | ></div> |
| | | </div> |
| | | </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 |
| | | id="MapView" |
| | | class="MapView" |
| | | > |
| | | <div class="TopHeader"> |
| | | <div |
| | | @click="setTopReturn" |
| | | class="TopReturn" |
| | | ></div> |
| | | </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 class="leftEchart"> |
| | | <div class="showEcharts"> |
| | | <div |
| | | v-if="typeIndex == '1'" |
| | | class="echart1" |
| | | > |
| | | <echart11></echart11> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '1'" |
| | | class="echart1" |
| | | > |
| | | <echart12></echart12> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '1'" |
| | | class="echart1" |
| | | > |
| | | <echart13></echart13> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '2'" |
| | | class="echart1" |
| | | > |
| | | <echart21></echart21> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '2'" |
| | | class="echart1" |
| | | > |
| | | <echart22></echart22> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '2'" |
| | | class="echart1" |
| | | > |
| | | <echart23></echart23> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '3'" |
| | | class="echart1" |
| | | > |
| | | <echart31></echart31> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '3'" |
| | | class="echart1" |
| | | > |
| | | <echart32></echart32> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '3'" |
| | | class="echart1" |
| | | > |
| | | <echart33></echart33> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '4'" |
| | | class="echart1" |
| | | > |
| | | <echart44></echart44> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '4'" |
| | | class="echart1" |
| | | > |
| | | <echart45></echart45> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '4'" |
| | | class="echart1" |
| | | > |
| | | <echart46></echart46> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="rightEchart"> |
| | | <div class="showEcharts"> |
| | | <div |
| | | v-if="typeIndex == '1'" |
| | | class="echart1" |
| | | > |
| | | <echart14></echart14> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '1'" |
| | | class="echart1" |
| | | > |
| | | <echart15></echart15> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '1'" |
| | | class="echart1" |
| | | > |
| | | <echart16></echart16> |
| | | </div> |
| | | |
| | | <div |
| | | v-if="typeIndex == '2'" |
| | | class="echart1" |
| | | > |
| | | <echart24></echart24> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '2'" |
| | | class="echart1" |
| | | > |
| | | <echart25></echart25> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '2'" |
| | | class="echart1" |
| | | > |
| | | <echart26></echart26> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '3'" |
| | | class="echart1" |
| | | > |
| | | <echart34></echart34> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '3'" |
| | | class="echart1" |
| | | > |
| | | <echart35></echart35> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '3'" |
| | | class="echart1" |
| | | > |
| | | <echart36></echart36> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '4'" |
| | | class="echart1" |
| | | > |
| | | <echart41></echart41> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '4'" |
| | | class="echart1" |
| | | > |
| | | <echart42></echart42> |
| | | </div> |
| | | <div |
| | | v-if="typeIndex == '4'" |
| | | class="echart1" |
| | | > |
| | | <echart43></echart43> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="left_content"> |
| | | <div v-show="leftMenuOpen" @click="showLeftMenu"> |
| | | <i style="color: skyblue" class="el-icon-caret-left"></i> |
| | | <div |
| | | @click="showLeftMenu" |
| | | v-show=" !leftMenuOpen" |
| | | > |
| | | <div class="LeftMenu"></div> |
| | | </div> |
| | | <div v-show="!leftMenuOpen" @click="showLeftMenu"> |
| | | <i style="color: skyblue" class="el-icon-caret-right"></i> |
| | | <div |
| | | @click="showLeftMenu" |
| | | v-show=" leftMenuOpen" |
| | | > |
| | | <div class="LeftMenu1"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="right_content"> |
| | | <div v-show="!rightMenuOpen" @click="showRightMenu"> |
| | | <i style="color: skyblue" class="el-icon-caret-left"></i> |
| | | <div |
| | | @click="showRightMenu" |
| | | v-show="!rightMenuOpen " |
| | | > |
| | | <div class="RightMenu"></div> |
| | | </div> |
| | | <div v-show="rightMenuOpen" @click="showRightMenu"> |
| | | <i style="color: skyblue" class="el-icon-caret-right"></i> |
| | | <div |
| | | @click="showRightMenu" |
| | | v-show="rightMenuOpen " |
| | | > |
| | | <div class="RightMenu1"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="right_menu" :class="{ right_main_show: !rightMenuOpen }"> |
| | | <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' : ''" |
| | | <div class="contentLi"> |
| | | <ul> |
| | | <li |
| | | @click="changeRightList(item)" |
| | | v-for="item in rightList" |
| | | :class="item.id == changeSelectli ? 'changeliStyle' : ''" |
| | | > |
| | | {{ item.name }} |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div class="contentBottom"> |
| | | <div |
| | | v-for="item in rightMenu" |
| | | class="right_item" |
| | | :class="{ changeStyle: changeSelectStyle == item.id }" |
| | | @click="changeRightMenu(item)" |
| | | > |
| | | {{ 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> |
| | | window.sgworld = null; |
| | | var Viewer = null; |
| | | |
| | | import mapsdk from '../../components/mapsdk.vue'; |
| | | import { right_menu, right_list, image_layer } from './index.js'; |
| | | import echart11 from '../../components/echart11.vue'; |
| | |
| | | this.initMapView(); |
| | | this.addImageLayer(); |
| | | }, |
| | | created() {}, |
| | | created() { }, |
| | | methods: { |
| | | setTopReturn() { |
| | | this.$router.push('/Synthesis'); |
| | | }, |
| | | changeRightList(res) { |
| | | this.changeSelectli = res.id; |
| | | if (res.layer != null) { |
| | |
| | | if (res.status == 200) { |
| | | var point = res.data.features[0].geometry.coordinates; |
| | | //定位 |
| | | MapViewer.camera.flyTo({ |
| | | Viewer.camera.flyTo({ |
| | | //跳转视角 |
| | | destination: new Cesium.Cartesian3.fromDegrees( |
| | | point[0], |
| | |
| | | }); |
| | | } else if (vid.indexOf('a') != -1) { |
| | | //定位 |
| | | MapViewer.camera.flyTo({ |
| | | Viewer.camera.flyTo({ |
| | | //跳转视角 |
| | | destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000), |
| | | }); |
| | |
| | | std.push(path[j][0], path[j][1], 50); |
| | | } |
| | | } |
| | | |
| | | this.showPathLine(std); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | showPathLine(res) { |
| | | sgworld.Creator.getFlyData(res, (data) => { |
| | | |
| | | window.sgworld.Creator.getFlyData(res, (data) => { |
| | | data.showPoint = false; |
| | | data.showLine = true; |
| | | data.mode = 1; |
| | |
| | | var layer = setInterval(() => { |
| | | a++; |
| | | this.$bus.$emit('resizeEchart', true); |
| | | if (a == 20) { |
| | | if (a == 30) { |
| | | clearInterval(layer); |
| | | this.$bus.$emit('resizeEchart', true); |
| | | } |
| | |
| | | this.changeSelectStyle = res.id; |
| | | }, |
| | | initMapView() { |
| | | window.sgworld = new SmartEarth.SGWorld('MapView', { |
| | | sgworld = new SmartEarth.SGWorld('MapView', { |
| | | licenseServer: window.sceneConfig.licenseServer, |
| | | }); |
| | | |
| | | window.MapViewer = window.sgworld._Viewer; |
| | | Viewer = sgworld._Viewer; |
| | | Viewer.imageryLayers._layers[0].show = false; |
| | | //定位 |
| | | sgworld.Navigate.jumpTo({ |
| | |
| | | } |
| | | |
| | | //显示fps |
| | | MapViewer.scene.debugShowFramesPerSecond = false; |
| | | Viewer.scene.debugShowFramesPerSecond = false; |
| | | //导航控件 |
| | | window.sgworld.navControl('nav', false); |
| | | sgworld.navControl('nav', false); |
| | | //比例尺 |
| | | window.sgworld.navControl('scale', false); |
| | | sgworld.navControl('scale', false); |
| | | |
| | | MapViewer.terrainProvider = new Cesium.CesiumTerrainProvider({ |
| | | url:demLayer |
| | | Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ |
| | | url: demLayer |
| | | }); |
| | | |
| | | |
| | |
| | | }, |
| | | setLayerVisible() { |
| | | if (this.isActive == true) { |
| | | MapViewer.imageryLayers._layers[1].show = true; |
| | | MapViewer.imageryLayers._layers[2].show = false; |
| | | MapViewer.imageryLayers._layers[3].show = false; |
| | | Viewer.imageryLayers._layers[1].show = true; |
| | | Viewer.imageryLayers._layers[2].show = false; |
| | | Viewer.imageryLayers._layers[3].show = false; |
| | | } else { |
| | | MapViewer.imageryLayers._layers[1].show = false; |
| | | MapViewer.imageryLayers._layers[2].show = true; |
| | | MapViewer.imageryLayers._layers[3].show = true; |
| | | Viewer.imageryLayers._layers[1].show = false; |
| | | Viewer.imageryLayers._layers[2].show = true; |
| | | Viewer.imageryLayers._layers[3].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); |
| | | if (val_layer[i].id != 13 && val_layer[i].id != 14) { |
| | | let layerWMS = new Cesium.WebMapServiceImageryProvider({ |
| | | url: geoServerURl, |
| | | layers: val_layer[i].resource, |
| | | parameters: { |
| | | transparent: true, |
| | | format: 'image/png', |
| | | }, |
| | | }); |
| | | layerWMS.name = val_layer[i].label; |
| | | Viewer.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 std = []; |
| | | for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) { |
| | | var val_id = |
| | | window.MapViewer.imageryLayers._layers[i].imageryProvider.name; |
| | | Viewer.imageryLayers._layers[i].imageryProvider.name; |
| | | if (val_id == data.label) { |
| | | const img_layer = window.MapViewer.imageryLayers._layers[i]; |
| | | std.push(data.label) |
| | | const img_layer = Viewer.imageryLayers._layers[i]; |
| | | img_layer.show = checked; |
| | | } |
| | | } |
| | | if (std.length == 0 && checked == true) { |
| | | this.setAddImageLayer(data); |
| | | } |
| | | }, |
| | | setAddImageLayer(res) { |
| | | let layerWMS = new Cesium.WebMapServiceImageryProvider({ |
| | | url: geoServerURl, |
| | | layers:res.resource, |
| | | parameters: { |
| | | transparent: true, |
| | | format: 'image/png', |
| | | }, |
| | | }); |
| | | layerWMS.name = res.label; |
| | | Viewer.imageryLayers.addImageryProvider(layerWMS); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | background: #303030; |
| | | position: relative; |
| | | position: absolute; |
| | | display: flex; |
| | | overflow: hidden; |
| | | .left_menu { |
| | |
| | | width: 300px; |
| | | height: 100%; |
| | | transition: width 2s; |
| | | background: #133a5f; |
| | | background: url("../../assets/img/themic/左框.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | .tree-container { |
| | | margin: 10px; |
| | | height: 90%; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | overflow: hidden; |
| | | } |
| | | .CenDiv { |
| | | height: 40px; |
| | | width: 60px; |
| | | |
| | | margin-right: 7%; |
| | | border-radius: 5px; |
| | | bottom: 3%; |
| | | } |
| | | |
| | | // .CenDiv:hover { |
| | | |
| | | // } |
| | | .active { |
| | | height: 40px; |
| | | width: 60px; |
| | | background: url("../../assets/img/themic/默认的影像.png") no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | } |
| | | .menuLayer { |
| | | height: 40px; |
| | | width: 60px; |
| | | background: url("../../assets/img/themic/默认的底图.png") no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | } |
| | | } |
| | | .center_content { |
| | |
| | | height: 100%; |
| | | overflow: hidden; |
| | | margin: 0; |
| | | padding: 0; |
| | | float: left; |
| | | position: relative; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | .TopHeader { |
| | | width: 100%; |
| | | height: 106px; |
| | | margin-top: -21px; |
| | | position: absolute; |
| | | background: url("../../assets/img/themic/bj.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | z-index: 40; |
| | | .TopReturn { |
| | | width: 142px; |
| | | height: 40px; |
| | | top: 37%; |
| | | left: 2.2%; |
| | | background: url("../../assets/img/themic/返回.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | z-index: 60; |
| | | } |
| | | } |
| | | .leftEchart { |
| | | z-index: 60; |
| | | position: absolute; |
| | | bottom: 2px; |
| | | height: calc(100% - 77px); |
| | | width: 24%; |
| | | left: 10px; |
| | | position: absolute; |
| | | right: 10px; |
| | | } |
| | | .showEcharts { |
| | | width: 100%; |
| | | height: 100%; |
| | | width: 20%; |
| | | margin-left: 1.5%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | |
| | | .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; |
| | | height: calc(100% - 77px); |
| | | width: 24%; |
| | | right: 10px; |
| | | bottom: 2px; |
| | | position: absolute; |
| | | right: 10px; |
| | | } |
| | | .rightEchartShow { |
| | | margin-right: 20px; |
| | | } |
| | | .right_content { |
| | | width: 10px; |
| | | width: 20px; |
| | | height: 100%; |
| | | z-index: 60; |
| | | right: 10px; |
| | | position: absolute; |
| | | display: flex; |
| | | align-items: center; |
| | | right: 0; |
| | | position: absolute; |
| | | padding: 0px 5px; |
| | | } |
| | | |
| | | .left_content { |
| | | width: 10px; |
| | | width: 20px; |
| | | height: 100%; |
| | | z-index: 60; |
| | | left: 0; |
| | | left: 10px; |
| | | position: absolute; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0px 5px; |
| | | } |
| | | .LeftMenu { |
| | | width: 20px; |
| | | height: 100px; |
| | | background: url("../../assets/img/themic/life.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | float: right; |
| | | } |
| | | .LeftMenu1 { |
| | | width: 20px; |
| | | height: 100px; |
| | | background: url("../../assets/img/themic/left1.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | float: right; |
| | | } |
| | | .RightMenu { |
| | | width: 20px; |
| | | height: 100px; |
| | | background: url("../../assets/img/themic/right.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | float: right; |
| | | } |
| | | .RightMenu1 { |
| | | width: 20px; |
| | | height: 100px; |
| | | background: url("../../assets/img/themic/right1.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | float: right; |
| | | } |
| | | } |
| | | } |
| | |
| | | width: 300px; |
| | | height: 100%; |
| | | transition: width 2s; |
| | | background: #133a5f; |
| | | |
| | | background: url("../../assets/img/themic/右框.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | .content_right { |
| | | width: calc(100% -20px); |
| | | height: 95%; |
| | | width: calc(100% - 40px); |
| | | height: calc(100% - 60px); |
| | | margin-top: 30px; |
| | | margin-left: 20px; |
| | | .contentLi { |
| | | width: 100%; |
| | | height: 95%; |
| | | overflow-y: auto; |
| | | } |
| | | .contentBottom { |
| | | width: 100%; |
| | | height: 5%; |
| | | margin-top: 5%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .right_item { |
| | | align-items: center; |
| | | display: flex; |
| | | height: calc(100% - 2px); |
| | | flex-grow: 1; |
| | | justify-content: center; |
| | | font-size: 14px; |
| | | font-family: Source Han Sans SC; |
| | | font-weight: 400; |
| | | color: white; |
| | | background: url("../../assets/img/themic/默认的按钮背景.png") |
| | | no-repeat center; |
| | | background-size: 100% 100%; |
| | | } |
| | | .changeStyle { |
| | | background: url("../../assets/img/themic/选中的按钮背景.png") |
| | | no-repeat center; |
| | | background-size: 100% 100%; |
| | | } |
| | | } |
| | | li { |
| | | border-bottom: 1px solid white; |
| | | padding: 10px 10px; |
| | | color: white; |
| | | background: url("../../assets/img/themic/listBJ.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | } |
| | | li:hover { |
| | | color: #409eff; |
| | |
| | | color: #409eff; |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | .changeStyle { |
| | | background: #409eff; |
| | | } |
| | | } |
| | | |
| | | .right_main_show { |
| | | width: 0; |
| | | } |
| | | .echart1 { |
| | | width: 88%; |
| | | height: 27%; |
| | | border: 3px solid rgba(204, 204, 204, 0.76); |
| | | border-radius: 10px; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | width: 100%; |
| | | height: 33%; |
| | | background: url("../../assets/img/themic/xxk.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | /* 去除旋转动画 */ |
| | | .el-tree /deep/ .el-tree-node__expand-icon.expanded { |
| | | -webkit-transform: rotate(0deg); |
| | | transform: rotate(0deg); |
| | | } |
| | | |
| | | /* 有子节点 且未展开 */ |
| | | .el-tree /deep/ .el-icon-caret-right:before { |
| | | background: url("../../assets/img/themic/圆角矩形 3 拷贝 3.png") no-repeat 0 |
| | | 3px; |
| | | content: ""; |
| | | content: ""; |
| | | display: block; |
| | | width: 16px; |
| | | height: 16px; |
| | | font-size: 16px; |
| | | background-size: 16px; |
| | | } |
| | | |
| | | /* //有子节点 且已展开 */ |
| | | /deep/ |
| | | .el-tree |
| | | .el-tree-node__expand-icon.expanded.el-icon-caret-right:before { |
| | | background: url("../../assets/img/themic/圆角矩形 3 拷贝 4.png") no-repeat 0 |
| | | 3px; |
| | | content: ""; |
| | | display: block; |
| | | width: 16px; |
| | | height: 16px; |
| | | font-size: 16px; |
| | | background-size: 16px; |
| | | } |
| | | |
| | | /* 没有子节点 */ |
| | | /deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before { |
| | | background: url("../../assets/img/themic/圆角矩形 3 拷贝 3.png") no-repeat 0 |
| | | 3px; |
| | | content: ""; |
| | | display: block; |
| | | width: 16px; |
| | | height: 16px; |
| | | font-size: 16px; |
| | | background-size: 16px; |
| | | } |
| | | |
| | | /deep/ .el-tree { |