1

Surpriseplus

2022-12-19 9c803f20cc05395bac2d3386accfe230210c07dc

 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>