1

Surpriseplus

2023-01-17 7823dc2ae6c9dffc9a9d710e8208694e09859164

 src/views/Thematic/index.vue

@@ -1,416 +1,611 @@
<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"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">{{ $t('themaic.name') }}</div>
        </el-col>
        <el-col :span="4" :offset="14">
          <el-input
            size="small"
            :placeholder="$t('common.pleaseInput')"
            suffix-icon="el-icon-search"
            v-model="input3"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="5">
          <label style="margin-right: 10px"
            >{{ $t('themaic.maptltle') }}:</label
          >
          <el-select
            v-model="selvalue"
            class="m-2"
            placeholder="Select"
            style="width: 150px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbytime') }}:</label
            >

            <i
              @click="changetime(1)"
              :class="{ active: timeindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changetime(2)"
              :class="{ active: timeindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbyviews') }}:</label
            >

            <i
              @click="changeChecked(1)"
              :class="{ active: checkindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changeChecked(2)"
              :class="{ active: checkindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="10"> </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            {{ $t('themaic.find') }}
            <label style="magin: 0% 15px">{{ listcount }}</label>
            {{ $t('themaic.record') }}
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-card shadow="never" class="themic_middle_card">
        <div
          @click="showThematic(item)"
          v-for="(item, i) in middleList"
          class="midedle_div"
          :key="i"
        >
          <el-card class="middle_card">
            <!-- <div>



           </div>

            <table>
              <tr>
                <td>
                  <div class="t1">{{ item.name }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div
                    class="middle_image"
                    :style="{
                      background: 'url(' + item.url + ') no-repeat center',
                      'background-size': '100% 100%',
                    }"
                  ></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div style="position: absolute; bottom: 2%; right: 4%">
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-card>
      -->
    <el-dialog
      class="themaic_dialog"
      :modal-append-to-body="true"
      :append-to-body="true"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="99%"
      :before-close="handleClose"
    <div
      class="left_menu"
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <map-View
        v-if="dialogVisible"
        @close="close"
        :typeIndex="typeIndex"
      ></map-View>
    </el-dialog>
      <div class="tree-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          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
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
      </div>

    </div>

    <div class="center_content">

      <div
        id="MapView"
        class="MapView"
      >
        <div class="TopHeader">
          <div
            @click="setTopReturn"
            class="TopReturn"
          ></div>
        </div>
        <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
            @click="showLeftMenu"
            v-show=" !leftMenuOpen"
          >
            <div class="LeftMenu"></div>
          </div>
          <div
            @click="showLeftMenu"
            v-show=" leftMenuOpen"
          >
            <div class="LeftMenu1"></div>
          </div>
        </div>

        <div class="right_content">
          <div
            @click="showRightMenu"
            v-show="!rightMenuOpen "
          >
            <div class="RightMenu"></div>
          </div>
          <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="content_right">
        <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 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mapView from '@/components/mapviewTwo';
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';
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: false,
      isMenuLayer: true,
      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((_) => {});
    setTopReturn() {
      this.$router.push('/Synthesis');
    },
    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;
            //定位
            Viewer.camera.flyTo({
              //跳转视角
              destination: new Cesium.Cartesian3.fromDegrees(
                point[0],
                point[1],
                8000
              ),
            });
          }
        });
      } else if (vid.indexOf('a') != -1) {
        //定位
        Viewer.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);
                std.push(path[j])
              }
            }

            var str = this.removeRepeat1(std);
            var val = [];
            for (var i in str) {
              val.push(str[i][0], str[i][1], 50);
            }
            this.showPathLine(val)
          }
        });
      }
    },
    removeRepeat1(arr) {
      const obj = {};
      return arr.filter(item => {
        if (!obj[item.toString()]) {
          obj[item.toString()] = item.toString();
          return item;
        }
      });
    },

    showPathLine(res) {

      window.sgworld.Creator.getFlyData(res, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        data.height = 2000;

        // 弹窗数据
        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 == 30) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    changeRightMenu(res) {
      this.rightList = right_list[parseInt(res.id) - 1];
      this.changeSelectStyle = res.id;
    },
    initMapView() {
      sgworld = new SmartEarth.SGWorld('MapView', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      Viewer = sgworld._Viewer;
      Viewer.imageryLayers._layers[0].show = false;
      //定位
      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(
          116.3911,
          39.9115,
          100000
        ),
      });
      for (var i in gaoDeBaseUrl) {
        sgworld.Creator.createUrlTemplateImageryProvider(
          gaoDeBaseUrl[i].label,
          gaoDeBaseUrl[i].url,
          '0',
          undefined,
          true,
          ''
        );
      }

      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false;
      //导航控件
      sgworld.navControl('nav', false);
      //比例尺
      sgworld.navControl('scale', false);

      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer
      });


    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers._layers[1].show = true;
        Viewer.imageryLayers._layers[2].show = false;
        Viewer.imageryLayers._layers[3].show = false;
      } else {
        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++) {
        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;
      var std = [];
      for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
        var val_id =
          Viewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == data.label) {
          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>
@@ -419,227 +614,305 @@
.themaic {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #303030;
  position: absolute;
  display: flex;
  overflow: hidden;
  .left_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/左框.png") no-repeat center;
    background-size: 100% 100%;

  .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;
    .tree-container {
      margin: 10px;
      height: 90%;
      overflow-y: auto;
    }
    .changeBaseLayer {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
    }
    .CenDiv {
      height: 40px;
      width: 60px;

      margin-right: 7%;
      border-radius: 5px;
      bottom: 3%;
    }

    .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;
    // .CenDiv:hover {

      height: 100%;
      width: auto;
    }
    // }
    .active {
      color: #409eff;
      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;
    }
  }
  .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;
  .center_content {
    flex: 1;
    height: 100%;
    .MapView {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 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;
        }
      }
      .middle_image {
        height: 220px;
        width: 415px;
      .leftEchart {
        z-index: 60;
        position: absolute;
        bottom: 2px;
        height: calc(100% - 77px);
        width: 24%;
        left: 10px;
        position: absolute;
        right: 10px;
      }
      .t2 {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .midddle_title {
      .showEcharts {
        width: 100%;
        height: 100%;
        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: calc(100% - 77px);
        width: 24%;
        right: 10px;
        bottom: 2px;
        position: absolute;
        right: 10px;
      }
      .rightEchartShow {
        margin-right: 20px;
      }
      .right_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        right: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }

      .left_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        left: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }
      .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;
      }
    }
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
  .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: url("../../assets/img/themic/右框.png") no-repeat center;
    background-size: 100% 100%;
    .content_right {
      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 {
        padding: 10px 10px;
        color: white;
        background: url("../../assets/img/themic/listBJ.png") no-repeat center;
        background-size: 100% 100%;
      }
      li:hover {
        color: #409eff;
      }
      .changeliStyle {
        color: #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: 100%;
    height: 33%;
    background: url("../../assets/img/themic/xxk.png") no-repeat;
    background-size: 100% 100%;
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;

  /* 去除旋转动画 */
  .el-tree /deep/ .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  /deep/ .el-form--inline .el-form-item {
    margin-right: 32px;

  /* 有子节点 且未展开 */
  .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-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid white !important;

  /* //有子节点 且已展开 */
  /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;
  }
}

// .themaic .el-divider--horizontal {
//   margin: 10px 0 !important;
// }
  /* 没有子节点 */
  /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;
  }

// .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;
  /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;
      }
    }
  }
}
</style>