综合展示图层管理添加3dTilset,资料馆下下调整，综合展示分析功能优化

Surpriseplus

2023-02-23 1496203eb8194c26ff9350e4673927565df41705

 src/components/MapView/mapMenuPop.vue

@@ -1,6 +1,11 @@
<template>
  <div class="menuPop">
    <div class="leftBox">
      <div class="leftDown" v-if="$store.state.download">
        <div @click="getDownloadDep">
          <el-link icon="el-icon-download"> </el-link>
        </div>
      </div>
      <ul>
        <li
          v-for="(item, index) in option"
@@ -12,24 +17,11 @@
      </ul>
    </div>
    <div class="rightBox">
      <div class="rightTitle">
        <span>管道</span>
        <el-link @click="closeMenuBox" :underline="false" class="boxClose"
          ><i class="el-icon-close"></i>
        </el-link>
        <el-link
          :underline="false"
          v-show="$store.state.download"
          @click="dialogVisible = true"
          class="boxClose"
          ><i class="el-icon-download"></i>
        </el-link>
      </div>
      <div class="tableBox">
        <el-table
          :data="tableData"
          ref="dialogPayChannel"
          height="230px"
          height="300px"
          style="width: 100%"
        >
          <el-table-column
@@ -42,7 +34,7 @@
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
                size="mini"
                size="small"
                @click="spaceLocation(scope.$index, scope.row)"
              ></el-button>
            </template>
@@ -62,7 +54,7 @@
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount"
@@ -104,13 +96,69 @@
            class="primary"
            size="small"
            @click="download('codeForm')"
            >{{ $t('common.confirm') }}</el-button
            >{{ $t("common.confirm") }}</el-button
          >
          <el-button type="info" size="small" @click="closeDown('codeForm')">{{
            $t('common.cancel')
            $t("common.cancel")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="数据申请"
      :visible.sync="dialogInsertVisible"
      width="30%"
      top="35vh"
      :modal="false"
      :before-close="handleInsertClose"
    >
      <div style="width: 100%; max-height: 450px; overflow-y: auto">
        <el-form ref="form" :model="ruleForm" label-width="100px">
          <el-form-item label="审核单位">
            <div>
              <ul>
                <li v-for="item in ruleForm.depid">
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </el-form-item>
          <el-form-item label="表名">
            <div>
              <ul>
                <li v-for="item in ruleForm.tabs">
                  {{ item.tabDesc }}
                </li>
              </ul>
            </div>
          </el-form-item>
          <el-form-item label="条件">
            <el-input
              :title="ruleForm.wkt"
              v-model="ruleForm.wkt"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="ruleForm.descr"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="primary" size="small" @click="getInsertDown">{{
              $t("common.confirm")
            }}</el-button>
            <el-button type="info" size="small" @click="closeInsertDown">{{
              $t("common.cancel")
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <iframe
      id="Iframe1"
@@ -128,17 +176,22 @@
  dataQuerySelectWktById,
  sign_getPublicKey,
  dataLib_selectDownloadFile,
  dataQuery_selectDbOverflowDep,
  apply_insertApply,
  decr,
} from '../../api/api.js';
import { getToken } from '@/utils/auth';
import $ from 'jquery';
  encr,
  dataLib_selectDepsByIds,
} from "../../api/api.js";
import { getToken } from "@/utils/auth";
import $ from "jquery";
import { View } from "ol";
export default {
  data() {
    var repasswordValidator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.codeForm.password) {
        callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
@@ -147,26 +200,44 @@
      var passwordreg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
      if (!passwordreg.test(value)) {
        callback(new Error('密码必须由数字、字母、特殊字符组合,请输入13-20位'));
        callback(new Error("密码必须由数字、字母、特殊字符组合,请输入13-20位"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        depname: [],
        tabs: [],
        pwd: null,
        repwd: null,
        wkt: null,
        descr: null,
      },
      dialogVisible: false,
      dialogInsertVisible: false,
      insertFlag: null,
      codeForm: {
        password: '',
        repassword: '',
        password: "",
        repassword: "",
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: passwordValidator, trigger: 'blur' },
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: passwordValidator, trigger: "blur" },
        ],
        repassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repasswordValidator, trigger: 'blur' },
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: repasswordValidator, trigger: "blur" },
        ],
      },
      insertOption: {
        ids: [],
        pwd: null,
        tabs: [],
        entity: [],
        wkt: null,
        descr: null,
      },
      listPage: {
        pageSize: 10,
@@ -190,9 +261,75 @@
      domainsLayer: [],
      optionx: [],
      imagePoint: null,
      Layerprimit: null,
    };
  },
  methods: {
    getInsertDown() {
      this.dialogInsertVisible = false;
      this.dialogVisible = true;
    },
    handleInsertClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.closeInsertDown();
        })
        .catch((_) => {});
    },
    closeInsertDown() {
      this.ruleForm = {
        depname: [],
        tabs: [],
        pwd: null,
        repwd: null,
        wkt: null,
        descr: null,
      };
      this.dialogInsertVisible = false;
    },
    async getDownloadDep() {
      var std = [];
      for (var i in this.option) {
        std.push(this.option[i].entity);
      }
      var obj = {
        entities: std,
        wkt: this.listdata.wkt,
      };
      const data = await dataQuery_selectDbOverflowDep(JSON.stringify(obj));
      if (data.code != 200) {
        this.$message.error("数据请求失败");
        return;
      }

      if (data.result.length == 0 || data.result == null) {
        this.insertFlag = 1;
        this.dialogVisible = true;
      } else {
        this.insertFlag = 2;
        var std = [];
        this.insertOption.ids = data.result;
        var val = "";
        for (var i in data.result) {
          if (val == "") {
            val += "codes=" + data.result[i];
          } else {
            val += "&codes=" + data.result[i];
          }

          std.push({
            name: data.result[i],
          });
        }
        const data1 = await dataLib_selectDepsByIds(val);

        this.ruleForm.depid = data1.result;
        this.ruleForm.depname = std;
        this.ruleForm.wkt = decr(this.listdata.wkt);
        this.ruleForm.tabs = this.option;
        this.dialogInsertVisible = true;
      }
    },
    async signGetPublicKey() {
      const res = await sign_getPublicKey();
      if (res && res.code == 200) {
@@ -200,32 +337,60 @@
        encrypt.setPublicKey(res.result);
      }
    },
    download() {
      if (this.codeForm.password == '') return;
      var obj = {
        pwd: encrypt.encrypt(this.codeForm.password),
        entities: [],
        wkt: this.listdata.wkt,
      };
      for (var i in this.option) {
        obj.entities.push(this.option[i].entity);
    async download() {
      if (this.codeForm.password == "") return;
      if (this.insertFlag == 1) {
        var obj = {
          pwd: encrypt.encrypt(this.codeForm.password),
          entities: [],
          wkt: this.listdata.wkt,
        };
        for (var i in this.option) {
          obj.entities.push(this.option[i].entity);
        }
        var token = getToken();
        var that = this;
        $.ajax(BASE_URL + "/dataLib/downloadDbReq?token=" + token, {
          type: "post",
          data: JSON.stringify(obj),
          async: true,
          cache: false,
          processData: false,
          contentType: false,
          success: (res) => {
            if (res.code != 200) {
              return;
            }
            this.selectDownloadFile(res.result, obj.pwd);
          },
        });
      } else if (this.insertFlag == 2) {
        var std = [];
        var std1 = [];
        for (var i in this.option) {
          std.push(this.option[i].tabDesc);
          std1.push(this.option[i].entity);
        }
        var obj = {
          depcodes: this.insertOption.ids,
          pwd: encr(this.codeForm.password),
          tabs: std,
          entities: std1,
          wkt: this.listdata.wkt,
          descr: this.ruleForm.descr,
        };
        const data1 = await apply_insertApply(JSON.stringify(obj));
        if (data1.code != 200) {
          this.$message.error("数据申请失败");
          return;
        }
        this.$message({
          message: "数据申请成功",
          type: "success",
        });

        this.closeDown();
      }
      var token = getToken();
      var that = this;
      $.ajax(BASE_URL + '/dataLib/downloadDbReq?token=' + token, {
        type: 'post',
        data: JSON.stringify(obj),
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (res) => {
          if (res.code != 200) {
            return;
          }
          this.selectDownloadFile(res.result, obj.pwd);
        },
      });
    },
    async selectDownloadFile(rsid, rspwd) {
      var downObj = {
@@ -234,23 +399,23 @@
      };
      const data = await dataLib_selectDownloadFile(downObj);
      if (data.code != 200) {
        this.$message.error('下载请求失败');
        this.$message.error("下载请求失败");
        return;
      }
      this.closeDown();
      var token = getToken();
      var url =
        BASE_URL +
        '/dataLib/downloadFile?token=' +
        "/dataLib/downloadFile?token=" +
        token +
        '&guid=' +
        "&guid=" +
        rsid +
        '&pwd=' +
        "&pwd=" +
        encodeURIComponent(rspwd);
      $('#Iframe1').attr('src', url).click();
      $("#Iframe1").attr("src", url).click();
    },
    handleCloseDown() {
      this.$confirm('确认关闭？')
      this.$confirm("确认关闭？")
        .then((_) => {
          this.closeDown();
        })
@@ -258,8 +423,9 @@
    },
    closeDown() {
      this.dialogVisible = false;
      this.codeForm.password = '';
      this.codeForm.repassword = '';
      this.codeForm.password = "";
      this.codeForm.repassword = "";
      this.closeInsertDown();
    },
    startTableMssage() {
      this.listdata.pageIndex = 1;
@@ -267,12 +433,33 @@
      this.listdata.name = null;
      this.option = [];
    },
    clearQuerInfo() {
      if (this.$store.state.queryInfo.length != 0) {
        for (var i in this.$store.state.queryInfo) {
          sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
        }
        this.$store.state.queryInfo = [];
        if (this.$store.state.primitLayer != null) {
          sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
          sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
          this.$store.state.primitLayer = null;
        }
      }
    },
    setTableAll() {
      this.clearQuerInfo();
      this.signGetPublicKey();
      this.startTableMssage();
      this.listdata.wkt = this.$store.state.mapMenuShpFile;
      this.querylayer = this.$store.state.mapSpaceQueryLayer;
      this.option = this.$store.state.mapSpaceQueryLayer;
      //  = this.$store.state.mapSpaceQueryLayer;
      var arr = this.$store.state.mapSpaceQueryLayer;
      var obj = {};
      arr = arr.reduce(function (item, next) {
        obj[next.label] ? "" : (obj[next.label] = true && item.push(next));
        return item;
      }, []);
      this.option = arr;
      this.listdata.name = this.option[0].entity;

      this.getTableDateHidder();
@@ -280,11 +467,11 @@
    async getTableDateHidder() {
      const data = await inquiry_selectFields({ name: this.listdata.name });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      const data1 = await inquiry_selectDomains({ name: this.listdata.name });
      if (data1.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      this.optionx = [];
      this.attributeData = [];
@@ -316,7 +503,7 @@
      };
      const data = await dataQuerySelectWktById(param);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }

      var val1 = decr(data.result);
@@ -331,19 +518,53 @@
    },
    setMapLoaction(res) {
      var coord = res.coordinates;
      if (res.type == 'Point') {
        this.imagePoint = sgworld.Creator.CreateLabel(
          { X: coord[0], Y: coord[1], Altitude: 2000 },
          '',
          SmartEarthRootUrl + 'Workers/image/mark.png',
          {
            disableDepthTestDistance: Infinity,
            scale: 0.8,
      if (this.Layerprimit != null) {
        window.Viewer.scene.primitives.remove(this.Layerprimit);
        this.Layerprimit = null;
      }
      if (res.type == "Point") {
        Viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(coord[0], coord[1], 2000),
          orientation: {
            heading: Cesium.Math.toRadians(0), // 水平偏角，默认正北 0
            pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下
            roll: 0, // 旋转角
          },
        });
      } else if (res.type == "MultiPolygon") {
        var val = res.coordinates[0][0];
        var std = [];

        for (var i in val) {
          std.push({ x: val[i][0], y: val[i][1], z: 1000 });
        }
        this.$store.state.primitLayer = sgworld.Creator.createPolygon(
          std,
          {
            fillColor: "#ffff00",
            outlineColor: "#fff",
            outlineWidth: 2,
          },
          1,
          0,
          '巡检点'
          "面"
        );
        sgworld.Navigate.flyToObj(this.imagePoint.item);
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
      } else if (res.type == "MultiLineString") {
        var line = res.coordinates[0];
        var std = [];

        for (var i in line) {
          std.push({ x: line[i][0], y: line[i][1], z: 1000 });
        }
        this.$store.state.primitLayer = sgworld.Creator.createPolyline(
          std,
          "#ffff00",
          1,
          0,
          "线"
        );
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
      }
    },
    setTableChange(res) {
@@ -366,7 +587,7 @@

      const data = await dataQuery_selectByPage(this.listdata);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }

      var val_Data = data.result;
@@ -384,7 +605,100 @@
      this.pageCount = data.count;
      this.tableData = data.result;
      this.$refs.dialogPayChannel.doLayout();
      this.showAllImage(data.result);
    },
    async showAllImage(res) {
      for (var i in res) {
        var param = {
          gid: res[i].gid,
          name: this.listdata.name,
        };
        const data = await dataQuerySelectWktById(param);
        if (data.code != 200) {
          this.$message.error("列表调用失败");
        }
        var val1 = decr(data.result);
        if (val1) {
          var wkt = this.$wkt.parse(val1);
          // this.getprimitiLayer(wkt);
          this.primitivesAddLayer(wkt);
        }
      }
    },
    getprimitiLayer(res) {
      switch (res.type) {
        case "Point":
          this.$store.state.primitLayer = window.Viewer.scene.primitives.add(
            new Cesium.BillboardCollection()
          );
          break;
      }
    },
    primitivesAddLayer(res) {
      switch (res.type) {
        case "Point":
          var val = Cesium.Cartesian3.fromDegrees(
            res.coordinates[0],
            res.coordinates[1]
          );
          var point = Viewer.entities.add({
            position: val,
            billboard: {
              // 图像地址，URI或Canvas的属性
              image: SmartEarthRootUrl + "Workers/image/mark.png",
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              // 大小是否以米为单位
              sizeInMeters: false,
              // 相对于坐标的垂直位置
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              // 相对于坐标的水平位置
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
              scale: 1.0,
              // 是否显示
              show: true,
            },
          });
          point.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
          this.$store.state.queryInfo.push(point);
          break;
        case "LineString":
        case "MultiLineString":
          var line = res.coordinates[0];
          var std = [];
          for (var i in line) {
            std.push(line[i][0], line[i][1]);
          }
          var polyline = Viewer.entities.add({
            polyline: {
              positions: Cesium.Cartesian3.fromDegreesArray(std),
              width: 5,
              material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
              clampToGround: true,
            },
          });
          this.$store.state.queryInfo.push(polyline);
          break;
        case "MultiPolygon":
          var val = res.coordinates[0][0];
          var std = [];
          for (var i in val) {
            std.push(val[i][0], val[i][1]);
          }
          var entity = Viewer.entities.add({
            polygon: {
              hierarchy: Cesium.Cartesian3.fromDegreesArray(std),
              //height : 100000,
              material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
              outline: true,
              outlineColor: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
            },
          });
          this.$store.state.queryInfo.push(entity);
          break;
      }
    },

    closeMenuBox() {
      if (this.imagePoint != null) {
        sgworld.Creator.DeleteObject(this.imagePoint);
@@ -399,8 +713,8 @@
    this.setTableAll();
  },
  mounted() {
    this.$bus.$on('changeMapMenuTop', (res) => {
      if (res == 'true') {
    this.$bus.$on("changeMapMenuTop", (res) => {
      if (res == "true") {
        this.setTableAll();
      }
    });
@@ -424,7 +738,6 @@
    float: left;
    border-right: 1px solid gray;
    li {
      color: white;
      line-height: 20px;
      border-bottom: 1px solid gray;
      padding: 5px;
@@ -434,6 +747,12 @@
      color: #409eff;
      background: rgba(128, 128, 128, 0.2);
    }
    .leftDown {
      width: 94%;
      padding: 3%;
      display: flex;
      justify-content: flex-end;
    }
  }

  .rightBox {
@@ -442,7 +761,7 @@
    float: left;
    .rightTitle {
      padding: 5px;
      color: white;

      width: 100%;
    }
    .tableBox {
@@ -452,107 +771,17 @@
      margin-left: 50px;
      /*不可点击的*/
    }
    .pagination_box {
      position: absolute;
      bottom: 10px;
      /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;
      }
      /deep/.btn-next i {
        color: white;
      }
      /deep/.btn-prev i {
        color: white;
      }
    }

    .boxClose {
      float: right;
      margin-right: 20px;
      color: white;
    }
  }
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // 表头背景色
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 5px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
}

li {
  line-height: 20px;
  border-bottom: 1px solid gray;
  padding: 5px;
}
</style>
<style lang="less"></style>
<style scoped lang="less"></style>