管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2024-04-01 2cbbc0e4c0357260f370c47365810608c19131c9
代码更新
已修改4个文件
163 ■■■■ 文件已修改
src/components/Screen/ProjectTree.vue 97 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Screen/mapsdk.vue 26 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/mapsdk.vue 39 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/store/index.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Screen/ProjectTree.vue
@@ -1,46 +1,16 @@
<template>
  <div
    class="project_tree"
    :class="{ left_main_show: !leftMenuOpen }"
  >
  <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
    <div class="project_tree__title">工程项目</div>
    <el-input
      style="width: 80%"
      placeholder="输入关键字进行查询"
      suffix-icon="el-icon-search"
      v-model="filterText"
      size="mini"
      :filter-node-method="filterNode"
    >
    <el-input style="width: 80%" placeholder="输入关键字进行查询" suffix-icon="el-icon-search" v-model="filterText" size="mini"
      :filter-node-method="filterNode">
    </el-input>
    <div class="tree-container">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        ref="tree"
        class="el-tree"
        @check="handleCheckChange"
        :filter-node-method="filterNode"
        @node-click="handleLeftclick"
      >
        <div
          style="display: flex"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
      <el-tree :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" class="el-tree"
        @check="handleCheckChange" :filter-node-method="filterNode" @node-click="handleLeftclick">
        <div style="display: flex" class="custom-tree-node" slot-scope="{ node, data }">
          <div style="">
            <i
              v-if="data.children && data.children.length > 0"
              style="color: yellow"
              class="el-icon-folder-opened"
            ></i>
            <i
              v-else
              style="color: skyblue"
              class="el-icon-folder-opened"
            ></i>
            <i v-if="data.children && data.children.length > 0" style="color: yellow" class="el-icon-folder-opened"></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div>
          <!-- <div style="">
            <i
@@ -50,15 +20,10 @@
            ></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div> -->
          <div
            :style="
              data.children && data.children.length > 0
                ? 'padding-left: 20px'
                : 'padding-left: 20px'
            "
            class="tree-label"
            :title="node.label || '-'"
          >
          <div :style="data.children && data.children.length > 0
    ? 'padding-left: 20px'
    : 'padding-left: 20px'
    " class="tree-label" :title="node.label || '-'">
            {{ node.label }}
          </div>
        </div>
@@ -110,7 +75,7 @@
    this.rightMenu = right_menu
    this.changeSelectli = this.rightList[0].id
    this.changeSelectStyle = this.rightMenu[0].id
    this.addImageLayer()
    this.$bus.$on("changeProjectLayer", (res) => {
      this.setShowCheckedLayer();
    })
@@ -119,6 +84,16 @@
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    obj(newVal, oldVal) {
      if (newVal) {
        this.addImageLayer()
      }
    }
  },
  computed: {
    obj() {
      return this.$store.state.showThematicFlag
    }
  },
  methods: {
    // 查询
@@ -566,6 +541,7 @@
  background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;
  background-size: 100% 100%;
  &__title {
    color: #fff;
    height: 30px;
@@ -575,17 +551,16 @@
    width: 140px;
    padding-top: 15px;
    color: #fff;
    background: linear-gradient(
      0deg,
      rgba(81, 192, 243, 0.65) 0%,
      rgba(255, 255, 255, 0.65) 86%
    );
    background: linear-gradient(0deg,
        rgba(81, 192, 243, 0.65) 0%,
        rgba(255, 255, 255, 0.65) 86%);
    -webkit-background-clip: text;
    font-size: 17.5px;
    font-family: HYLingXinJ, HYLingXinJ-regular;
    font-weight: normal;
    letter-spacing: 1.05px;
  }
  .el-input {
    width: 80%;
    padding: 5px 0 5px 30px;
@@ -595,19 +570,23 @@
    margin: 10px;
    height: 85%;
    overflow-y: auto;
    /deep/ .tree-label {
      color: #eee !important;
    }
    /deep/ .el-tree {
      color: #eee !important;
    }
  }
  .changeBaseLayer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }
  .CenDiv {
    height: 40px;
    width: 60px;
@@ -627,6 +606,7 @@
    background-size: 100% 100%;
    border-radius: 5px;
  }
  .menuLayer {
    height: 40px;
    width: 60px;
@@ -636,6 +616,7 @@
    border-radius: 5px;
  }
}
/*  滚动条样式 */
::-webkit-scrollbar {
@@ -673,20 +654,24 @@
      margin-left: -14px;
    }
    .el-tree-node__content > label.el-checkbox {
    .el-tree-node__content>label.el-checkbox {
      margin-right: -30px;
    }
    .el-tree-node__content > .el-tree-node__expand-icon {
    .el-tree-node__content>.el-tree-node__expand-icon {
      visibility: hidden;
    }
    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
    .el-tree .el-tree-node .is-leaf+.el-checkbox .el-checkbox__inner {
      display: block;
      visibility: visible;
    }
    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
      display: none;
      // visibility: hidden;
    }
    .tree-label {
      font-size: 16px;
      color: #fff;
src/components/Screen/mapsdk.vue
@@ -13,6 +13,7 @@
    return {}
  },
  mounted() {
    this.init3DMap()
    // this.$bus.$on("changeProject", name => {
    //   if (!yunxuanLayer) {
@@ -48,6 +49,7 @@
      //   "Centermapdiv",
      //   function () { }
      // )
      this.$store.state.showThematicFlag = false;
      window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
        licenseServer: window.sceneConfig.licenseServer,
@@ -55,10 +57,8 @@
      window.viewer = window.Viewer = window.sgworld._Viewer;
      if (is_production) {
        Viewer.imageryLayers.removeAll();
      }
      // Viewer.imageryLayers._layers[0].show = false
      sgworld.Navigate.jumpTo({      //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(110, 32, 50000000)
@@ -73,8 +73,8 @@
        })
      }, 1000);
      if (is_production) {
        var base_ulr = window.sceneConfig.baseUrl;
        if (base_ulr.indexOf('{host}') > -1) {
          base_ulr = base_ulr.replace("{host}", iisHost)
@@ -101,6 +101,7 @@
          })
        );
        Viewer.imageryLayers._layers[2].show = false
        this.$store.state.showThematicFlag = true;
      } else {
        Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
@@ -118,7 +119,8 @@
        //     url: gaoDeBaseUrl[2].url,
        //   })
        // )
        Viewer.imageryLayers._layers[1].show = false
        Viewer.imageryLayers._layers[1].show = false;
        this.$store.state.showThematicFlag = true;
      }
@@ -137,12 +139,13 @@
      // Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: demLayer,
      // })
      var option = {
        url: window.sceneConfig.SGUrl,
        layerName: window.sceneConfig.mptName,
        requestVertexNormals: true,
      };
      window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      //  var option = {
      //    url: window.sceneConfig.SGUrl,
      //    layerName: window.sceneConfig.mptName,
      //    requestVertexNormals: true,
      //   };
      //   window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      //改变天空颜色为黑色
      Viewer.scene.skyBox.show = false //关闭天空盒,否则会显示天空颜色
      //背景透明
@@ -158,6 +161,7 @@
  height: 100%;
  width: 100%;
}
#Centermapdiv {
  height: 100%;
  width: 100%;
src/components/mapsdk.vue
@@ -308,13 +308,15 @@
                :underline="false" @click="setSurfaceDeForm" style="margin-right: 10px">地表形变时序图</el-link>
              <el-link v-if="$store.state.propertiesName.enName == 's_surveyworksite'" type="primary" :underline="false"
                @click="getPointInfo" style="margin-right: 10px">勘察信息表</el-link>
              <el-link type="primary" :underline="false" @click="getAttatchList" style="margin-right: 10px">查看附件</el-link>
              <el-link type="primary" :underline="false" @click="getAttatchList"
                style="margin-right: 10px">查看附件</el-link>
              <i class="el-icon-close" @click="closeBufferBox(6)"></i>
            </div>
          </div>
          <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto">
            <div style="line-height: 20px" v-for="(value, key) in $store.state.propertiesInfo" :key="key">
              <span v-if="key != 'eventid'" style="font-size: 14px;font-weight: bold;margin-right: 5px">{{ key }}:</span>
              <span v-if="key != 'eventid'" style="font-size: 14px;font-weight: bold;margin-right: 5px">{{ key
                }}:</span>
              <span v-if="key != 'eventid'">{{ value }}</span>
            </div>
          </div>
@@ -963,25 +965,25 @@
        licenseServer: window.sceneConfig.licenseServer,
      });
      var url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/?callback=loadJsonp940826&f=json"
      $.ajax({
        url: url,
        timeout: 1500, // 请求超时时间
        async: true,
        type: "GET",
        success: (res) => {
          console.log("在线地址获取成功")
        },
        error: (res) => {
          console.log("在线地址获获取失败")
         this.addGaoDeMap();
        }
      })
      window.Viewer = window.sgworld._Viewer;
      if (is_production) {
        this.addGaoDeMap();
      } else {
        var url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/?callback=loadJsonp940826&f=json"
        $.ajax({
          url: url,
          timeout: 1500, // 请求超时时间
          async: true,
          type: "GET",
          success: (res) => {
            console.log("在线地址获取成功")
          },
          error: (res) => {
            console.log("在线地址获获取失败")
            this.addGaoDeMap();
          }
        })
      }
      //定位
      // sgworld.Navigate.jumpTo({
@@ -2186,5 +2188,4 @@
//   background: rgba(255, 255, 255, 0.2) !important;
//   color: white !important;
//   border: 1px solid rgba(255, 255, 255, 0.2) !important;
// }
</style>
// }</style>
src/store/index.js
@@ -85,6 +85,7 @@
      val: null
    },
    setChangeBaseMap:true,
    showThematicFlag:false,
  },
  mutations: {
    UPDATE_LISTEN_TIME(state, msg) {