管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2024-02-05 fb98e10c76d7e6c2d01f3a9f8c1b727f905cbdca
src/views/Tools/LayerTree.vue
@@ -2,108 +2,50 @@
  <div class="lalala tree-container">
    <el-form ref="form">
      <el-form-item>
        <el-select
          v-model="$store.state.pigCode"
          clearable
          filterable
          style="width :100%"
          @change="prjChanged"
          placeholder="请选择项目"
        >
          <el-option
            v-for="item in menus"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
        <el-select v-model="$store.state.pigCode" clearable filterable style="width :100%" @change="prjChanged"
          placeholder="请选择项目">
          <el-option v-for="item in menus" :key="item.code" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          class="search"
        >
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search">
        </el-input>
      </el-form-item>
    </el-form>
    <el-tree
      ref="tree"
      :data="treeData"
      node-key="id"
      show-checkbox
      :props="defaultProps"
      @node-click="handleLeftclick"
      @node-contextmenu="rightClick"
      @check="handleCheckChange"
      :default-checked-keys="handleTreeCheck"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      draggable
    >
      <span
        class="slot-t-node"
        slot-scope="{ node, data }"
      >
    <el-tree ref="tree" :data="treeData" node-key="id" show-checkbox :props="defaultProps" @node-click="handleLeftclick"
      @node-contextmenu="rightClick" @check="handleCheckChange" :default-checked-keys="handleTreeCheck"
      :expand-on-click-node="false" :filter-node-method="filterNode">
      <span class="slot-t-node" slot-scope="{ node, data }">
        <span v-show="!data.isEdit">
          <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
              node.label
            }}</span>
            node.label
          }}</span>
        </span>
        <span v-show="data.isEdit">
          <el-input
            class="slot-t-input"
            size="mini"
            autofocus
            v-model="data.label"
            :ref="'slotTreeInput' + data.id"
            @blur.stop="nodeBlur(node, data)"
            @keydown.native.enter="nodeBlur(node, data)"
          ></el-input>
          <el-input class="slot-t-input" size="mini" autofocus v-model="data.label" :ref="'slotTreeInput' + data.id"
            @blur.stop="nodeBlur(node, data)" @keydown.native.enter="nodeBlur(node, data)"></el-input>
        </span>
      </span>
    </el-tree>
    <el-card
      class="box-card"
      ref="card"
      :style="{ ...rightClickMenuStyle }"
      v-show="menuVisible"
    >
      <div
        class="edit"
        @click="showLayerAttribute()"
        v-if="showProp && !shwoHistogram"
      >
    <el-card class="box-card" ref="card" :style="{ ...rightClickMenuStyle }" v-show="menuVisible">
      <div class="edit" @click="showLayerAttribute()" v-if="showProp && !shwoHistogram">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;属性
      </div>
      <div
        class="edit"
        @click="positioning()"
        v-if="showLocal"
      >
      <div class="edit" @click="positioning()" v-if="showLocal">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;定位
      </div>
      <div
        class="edit"
        @click="pellucidity()"
        v-if="showOpacity"
      >
      <div class="edit" @click="pellucidity()" v-if="showOpacity">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;透明度
      </div>
      <div
        class="edit"
        @click="histogram()"
        v-show="shwoHistogram"
      >
      <div class="edit" @click="histogram()" v-show="shwoHistogram">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;钻孔柱状图
      </div>
      <div
        class="edit"
        v-show="shwoTileDown"
        @click="tileDownload()"
      >
      <div class="edit" v-show="shwoTileDown" @click="tileDownload()">
        <i class="el-icon-download"></i>&nbsp;&nbsp;瓦片下载
      </div>
      <div class="edit" v-show="shwoAnnex" @click="annexDownload()">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;附件
      </div>
    </el-card>
  </div>
@@ -129,6 +71,7 @@
      showOpacity: false, // 不透明度
      shwoTileDown: false, // 瓦片下载
      menuVisible: false, // 菜单
      shwoAnnex: false,//附件
      levelArray: [ // 高程数组
        0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
        250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
@@ -279,8 +222,16 @@
      this.showOpacity = ["Tileset", "3DML"].indexOf(object.serveType) > -1; // 不透明度
      this.shwoTileDown = ["TMS", "DOM"].indexOf(object.serveType) > -1 && object.pubid; // 瓦片下载
      this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 菜单
      this.shwoAnnex = ['DEM', 'TMS'].indexOf(object.serveType) > -1;//附件
      this.$refs.card.$el.style.left = event.pageX + 20 + "px";
      var left = window.innerWidth - 140;
      var pageLeft = event.pageX + 20
      if(pageLeft>left){
        pageLeft = left - 25
      }
      this.$refs.card.$el.style.left =pageLeft+ "px";
      this.$refs.card.$el.style.top = event.pageY + "px";
    },
    // 属性显示
@@ -295,6 +246,7 @@
    // 定位
    async positioning() {
      this.rmListener();
      if (["Tileset", "3DML"].indexOf(this.currentData.serveType) > -1) {
        for (let i in Viewer.scene.primitives._primitives) {
          if (Viewer.scene.primitives._primitives[i].id == this.currentData.cnName) {
@@ -311,14 +263,25 @@
          let wkt = this.$wkt.parse(data.result.geom);
          let height = this.getHeight(wkt.coordinates[2]);
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height), // 2000
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], sceneConfig.extureHeight), // 2000
          });
        }
        return;
      }
      if ("Mpt" == this.currentData.serveType) {
        viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 中国
        if (this.currentData.json) {
          var json = JSON.parse(this.currentData.json);
          if (json.west) {
            Viewer.camera.flyTo({
              destination: Cesium.Rectangle.fromDegrees(json.west, json.south, json.east, json.north)
            })
          }
        } else {
          Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 中国
        }
      }
    },
    // 钻孔柱状图
@@ -343,9 +306,14 @@
    // 获取高度
    getHeight(level) {
      if (level > -1 && level < 23) return this.levelArray[level];
      return this.levelArray[this.levelArray.length - 1];
      var res = 7
      return this.levelArray[res];
    },
    //附件下载
    annexDownload() {
      this.$bus.$emit('annexDownload', this.currentData)
    },
    // 瓦片下载
    tileDownload() {
      this.rmListener();
@@ -403,7 +371,7 @@
        }
      }
      if (obj.TMS.length) this.setChangeDEM(obj.DEM, checked);
      if (obj.DEM.length) this.setChangeDEM(obj.DEM, checked);
      if (obj.TMS.length) this.setChangeTMS(obj.TMS, checked);
      if (obj.Mpt.length) this.setChangeMpt(obj.Mpt, checked);
      if (obj.Tileset.length) this.setChangeTileset(obj.Tileset, checked);
@@ -542,6 +510,7 @@
    },
    // 添加TMS图层
    addTMSLayers(layers) {
      for (let i in layers) {
        let res = layers[i];
        res.url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : res.url;
@@ -556,8 +525,14 @@
          maximumLevel: 22,
          enablePickFeatures: false
        }), 1);
        layer.id = res.id;
        layer.name = res.cnName;
        if (is_production) {
          Viewer.imageryLayers.raiseToTop(layer);//将图层上移一层
          Viewer.imageryLayers.lower(layer);//将图层上移一层
        }
      }
    },
    // 切换Mpt
@@ -585,12 +560,18 @@
      for (let i in layers) {
        let res = layers[i];
        if (res.url.indexOf("{host}") > -1) res.url = res.url.replace("{host}", iisHost);
        let urls = res.url.split(';')
        let layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", {
        let urls = res.url.split(';');
        var ops = {
          url: urls[0],
          layers: urls[1]
        }, "0", undefined, true, "");
        };
        if (res && res.json) {
          var rs = JSON.parse(res.json);
          ops.rectangle = Cesium.Rectangle.fromDegrees(rs.west, rs.south, rs.east, rs.north);
        }
        let layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", ops, "0", undefined, true, "");
        this.mptLayer.push(layer);
      }
    },
@@ -684,6 +665,10 @@
      let layer = Viewer.imageryLayers.addImageryProvider(provider, 1);
      layer.name = res.cnName;
      if (is_production) {
        Viewer.imageryLayers.raiseToTop(layer);//将图层上移一层
        Viewer.imageryLayers.lower(layer);//将图层上移一层
      }
      // if (data.result.geom) {
      //   let wkt = this.$wkt.parse(data.result.geom);
      //   Viewer.camera.flyTo({
@@ -876,7 +861,7 @@
</script>
<style scoped lang="less">
/* 点击节点时的选中颜色 */
.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content {
.tree-container /deep/.el-tree-node.is-current>.el-tree-node__content {
  color: #409eff !important;
}
@@ -908,19 +893,19 @@
  padding-left: 16px;
}
.tree-container /deep/ .el-tree > .el-tree-node:before {
.tree-container /deep/ .el-tree>.el-tree-node:before {
  border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
.tree-container /deep/ .el-tree>.el-tree-node:after {
  border-top: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:before {
.tree-container /deep/ .el-tree>.el-tree-node:before {
  border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
.tree-container /deep/ .el-tree>.el-tree-node:after {
  border-top: none;
}
@@ -983,11 +968,7 @@
  z-index: 8;
}
.tree-container
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content::before {
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
  border-left: 0px dashed #ccc;
  height: 100%;
  top: 0;
@@ -1007,7 +988,7 @@
}
.tree-container /deep/ .el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
  .is-leaf+.el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
@@ -1016,11 +997,7 @@
  }
}
.tree-container
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content::after {
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after {
  border-top: 0px dashed #ccc;
}
@@ -1038,7 +1015,7 @@
/deep/.el-card__body {
  padding: 10px !important;
  > div {
  >div {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;