管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-01-16 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf
src/views/Thematic/index.vue
@@ -1,6 +1,9 @@
<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"
@@ -9,89 +12,270 @@
          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>
@@ -99,6 +283,9 @@
</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';
@@ -183,8 +370,11 @@
    this.initMapView();
    this.addImageLayer();
  },
  created() {},
  created() { },
  methods: {
    setTopReturn() {
      this.$router.push('/Synthesis');
    },
    changeRightList(res) {
      this.changeSelectli = res.id;
      if (res.layer != null) {
@@ -206,7 +396,7 @@
          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],
@@ -218,7 +408,7 @@
        });
      } else if (vid.indexOf('a') != -1) {
        //定位
        MapViewer.camera.flyTo({
        Viewer.camera.flyTo({
          //跳转视角
          destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
        });
@@ -235,13 +425,15 @@
                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;
@@ -283,7 +475,7 @@
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
        if (a == 30) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
@@ -294,11 +486,11 @@
      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({
@@ -321,14 +513,14 @@
      }
      //显示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
      });
@@ -340,44 +532,63 @@
    },
    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>
@@ -387,7 +598,7 @@
  width: 100%;
  height: 100%;
  background: #303030;
  position: relative;
  position: absolute;
  display: flex;
  overflow: hidden;
  .left_menu {
@@ -395,43 +606,47 @@
    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 {
@@ -442,15 +657,42 @@
      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;
@@ -458,34 +700,66 @@
      .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;
      }
    }
  }
@@ -502,15 +776,49 @@
    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;
@@ -519,41 +827,61 @@
        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 {