管道基础大数据平台系统开发-【前端】-新系統界面
584911253@qq.com
2023-03-14 b41b6bcda8d085b0c9b0f3d176e76fbed97557a8
拾取分析功能开发
已添加1个文件
已修改7个文件
319 ■■■■■ 文件已修改
src/api/api.js 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/lang/en.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/lang/zh.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/MapView/mapPickUpPop.vue 223 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/store/index.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Synthesis/LeftMenu.vue 57 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Tools/LayerTree.vue 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Tools/queryinfo.vue 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/api.js
@@ -1059,6 +1059,11 @@
  return request.post('/comprehensive/updateModel', params);
}
//综合展示=>拾取
export function selectByBuffer(params) {
  return request.get('/inquiry/selectByBuffer', { params: params });
}
src/assets/lang/en.js
@@ -510,6 +510,7 @@
    polygonquery: 'Polygon Query',
    attributequery: 'Attribute Query',
    rangequery: 'Spatial query',
    pickup: 'Pick up',
    gpsrtk: 'GPS-RTK',
    placenamelocation: 'Placename Location',
    distancemeasure: 'Distance Measure',
src/assets/lang/zh.js
@@ -512,6 +512,7 @@
    polygonquery: '多边形查询',
    attributequery: '属性查询',
    rangequery: '空间查询',
    pickup: '拾取',
    gpsrtk: '坐标定位',
    placenamelocation: '地名定位',
    distancemeasure: '距离测量',
src/components/MapView/mapPickUpPop.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,223 @@
<template>
  <div class="menuPop">
    <div class="leftBox">
      <ul>
        <li
          v-for="(item, index) in option"
          @click="setTableChange(item)"
          class="leftBoxLi"
        >
          {{ item.cnName }}
        </li>
      </ul>
    </div>
    <div class="rightBox">
      <div class="tableBox">
        <el-table
          :data="tableData"
          ref="dialogPayChannel"
          height="100%"
          style="width: 100%"
          border
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            v-for="(item, index) in attributeData"
            :key="index"
            :label="item.alias"
            :prop="item.field"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {
  dataQuery_selectByPage,
  inquiry_selectDomains,
  inquiry_selectFields,
  dataQuerySelectWktById,
  sign_getPublicKey,
  dataLib_selectDownloadFile,
  dataQuery_selectDbOverflowDep,
  apply_insertApply,
  decr,
  encr,
  dataLib_selectDepsByIds, selectByBuffer
} from '../../api/api.js'
import { getToken } from "@/utils/auth"
import $ from "jquery"
import { View } from "ol"
export default {
  data() {
    return {
      option:null,
      tableData: [],
      attributeData:[],
      queryForm:{
        pageIndex:1,
        pageSize:10,
      },
      pageCount:0,
      pickupInfo:null,
      optionx:[],
      wkt:null,
    }
  },
  methods: {
    async getTableDateHidder() {
      let name = this.pickupInfo.url.replaceAll("LF:","");
      name = name.replaceAll("_","");
      const data = await inquiry_selectFields({ name: name })
      if (data.code != 200) {
        this.$message.error("列表调用失败")
      }
      const data1 = await inquiry_selectDomains({ name: name })
      if (data1.code != 200) {
        this.$message.error("列表调用失败")
      }
      this.optionx = []
      this.attributeData = []
      var valadata = data.result
      var laydomain = data1.result
      for (var i in valadata) {
        if (valadata[i].showtype == 1) {
          if (
            valadata[i].domainNa != null &&
            valadata[i].domainNa != undefined
          ) {
            for (var j in laydomain) {
              if (laydomain[j].domName == valadata[i].domainNa) {
                valadata[i].domainNa = laydomain[j].codeDesc
              }
            }
          }
          this.optionx.push(valadata[i])
          this.attributeData.push(valadata[i])
        }
      }
      this.getTableData()
    },
    setTableChange(res) {
      this.pickupInfo = res;
      this.getTableDateHidder()
    },
    async getTableData() {
      this.tableData = []
      let name = this.pickupInfo.url.replaceAll("LF:","");
      name = name.replaceAll("_","");
      let info = this.$store.state.pickUpPointInfo;
      let params = {
        buffer:10,
        limit:20,
        name:name,
        wkt:`POINT (${info.lon} ${info.lat})`,
      }
      const data = await selectByBuffer(params)
      if (data.code != 200) {
        this.$message.error("列表调用失败")
      }
      var val_Data = data.result
      for (var i in val_Data) {
        var valste = val_Data[i]
        for (var j in this.optionx) {
          if (
            this.optionx[j].domainNa != null &&
            this.optionx[j].domainNa != undefined
          ) {
            valste[this.optionx[j].field] = this.optionx[j].domainNa
          }
        }
      }
      this.pageCount = data.count
      this.tableData = data.result
    },
  },
  mounted() {
    this.option = JSON.parse(sessionStorage.getItem("checkedLayers"));
    this.pickupInfo = this.option.length > 0 ? this.option[0] : {};
    this.getTableDateHidder();
    this.$bus.$on("treeChanged", changed => {
      if (changed){
        this.option = JSON.parse(sessionStorage.getItem("checkedLayers"));
      }
    })
  },
}
</script>
<style scoped lang="less">
.menuPop {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid gray;
  float: left;
  .leftBox {
    width: 20%;
    height: 100%;
    overflow: auto;
    float: left;
    border-right: 1px solid gray;
    li {
      line-height: 20px;
      border-bottom: 1px solid gray;
      padding: 5px;
      background: rgba(255, 255, 255, 0.2);
    }
    li:hover {
      color: #409eff;
      background: rgba(128, 128, 128, 0.2);
    }
    .leftDown {
      width: 94%;
      padding: 3%;
      display: flex;
      justify-content: flex-end;
    }
  }
  .rightBox {
    width: calc(80% - 1px);
    height: 100%;
    float: left;
    .rightTitle {
      padding: 5px;
      width: 100%;
    }
    .tableBox {
      position: relative;
      height: 89%;
    }
    .rightPage {
      margin-left: 50px;
      /*不可点击的*/
    }
    .boxClose {
      float: right;
      margin-right: 20px;
    }
  }
}
li {
  line-height: 20px;
  border-bottom: 1px solid gray;
  padding: 5px;
}
</style>
src/store/index.js
@@ -40,6 +40,7 @@
    propertiesFlag: null,
    propertiesName: null,
    propertiesInfo: null,
    pickUpPointInfo: null,
    //主题切换
    theme: variables.theme,
src/views/Synthesis/LeftMenu.vue
@@ -251,8 +251,8 @@
  comprehensive_deletes,
  comprehensive_selectModelByPageAndCount,
  comprehensive_insertModel,
  comprehensive_updateModel
} from "../../api/api.js";
  comprehensive_updateModel, selectByBuffer
} from '../../api/api.js'
import {
  OverviewMap,
  defaults as defaultControls,
@@ -471,6 +471,12 @@
            name: "空间查询",
            css: "twoMenu_imge52",
          },
          {
            id: "e3",
            label: "synthesis.pickup",
            name: "拾取",
            css: "twoMenu_imge52",
          },
        ],
        [
          {
@@ -669,6 +675,7 @@
      }],
      modelClip:false,
      clippingPlanes:null,
      showPickUp:false,
    };
  },
  methods: {
@@ -1384,12 +1391,30 @@
    setIquery(res) {
      switch (res) {
        case "e2":
          Viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          this.$store.state.mapMenuBoolean = !this.$store.state.mapMenuBoolean;
          this.$store.state.mapMenuBoxFlag = "1";
          break;
        case "e1":
          Viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          this.$store.state.mapMenuBoolean = !this.$store.state.mapMenuBoolean;
          this.$store.state.mapMenuBoxFlag = "2";
          break;
          //拾取功能
        case "e3":
          this.$store.state.mapMenuBoolean = false;
          this.showPickUp = !this.showPickUp;
          if (this.showPickUp){
            let that = this;
            Viewer.screenSpaceEventHandler.setInputAction(function (event) {
              let p = sgworld.Navigate.getMouseDegrees(event);
              console.log(p);
              that.getPickUpData(p);
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          }else {
            this.$refs.queryinfo.closeAll();
            Viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          }
          break;
      }
    },
@@ -2395,6 +2420,34 @@
    handleAttatchChange(val) {
      this.attacgSelection = val;
    },
    //拾取数据获取
    async getPickUpData(info){
      let checkedLayers = JSON.parse(sessionStorage.getItem("checkedLayers"));
      let showPop = false;
      for (const item of checkedLayers) {
        let name = item.url.replaceAll("LF:","");
        name = name.replaceAll("_","");
        let params = {
          buffer:10,
          limit:20,
          name:name,
          wkt:`POINT (${info.lon} ${info.lat})`,
        }
        const res = await selectByBuffer(params);
        if (res.result && res.result.length > 0){
          this.$store.state.mapPopBoxFlag = "4";
          this.$store.state.pickUpPointInfo = info;
          this.$refs &&
          this.$refs.queryinfo &&
          this.$refs.queryinfo.open("拾取分析", null,);
          showPop = true;
          break;
        }
      }
      if (!showPop){
        this.$message.warning("暂无数据!");
      }
    }
  },
  mounted() {
    this.measureData = new Map();
src/views/Tools/LayerTree.vue
@@ -546,6 +546,23 @@
            img_layer.show = checked;
          }
        }
        //存储选中图层
        let checkedLayers = JSON.parse(sessionStorage.getItem("checkedLayers"));
        if (checked && data.url){
          checkedLayers.push(data);
        }
        else {
          for (let i = 0; i < checkedLayers.length; i++) {
            let item = checkedLayers[i];
            if (item.enName == data.enName){
              checkedLayers.splice(i,1);
            }
          }
        }
        sessionStorage.setItem("checkedLayers",JSON.stringify(checkedLayers));
        setTimeout(() => {
          this.$bus.$emit("treeChanged", true);
        }, 500)
      } else if (data.serveType == "WFS") {
        if (window.Viewer.dataSources._dataSources.length == 0) {
          this.setAddLayers(data);
@@ -722,6 +739,7 @@
      var std = data.result;
      var that = this;
      var checkKey = [];
      let checkedLayers = [];
      var val = std.filter((str) => {
        if (str.type == 1) {
          return str;
@@ -730,11 +748,16 @@
          if (str.isShow == 1) {
            checkKey.push(str.id);
            that.setAddLayers(str);
            if (str.serveType == "WMS" && str.url){
              checkedLayers.push(str);
            }
          }
          return str;
        }
      });
      //存储选中图层
      sessionStorage.setItem("checkedLayers",JSON.stringify(checkedLayers));
      var res = this.setTreeData(val);
      for (var i in res) {
src/views/Tools/queryinfo.vue
@@ -12,10 +12,10 @@
    >
      <div>
        <div style="width:940px;height:400px;">
          <map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
          <map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
          <pipe-line-analy v-if="$store.state.mapPopBoxFlag == '3'" />
          <map-pick-up-pop v-if="$store.state.mapPopBoxFlag == '4'" />
        </div>
      </div>
    </Popup>
@@ -26,6 +26,7 @@
import Popup from './Popup.vue';
import mapMenuPop from '../../components/MapView/mapMenuPop.vue';
import mapSpacePop from '../../components/MapView/mapSpacePop.vue';
import mapPickUpPop from '../../components/MapView/mapPickUpPop';
import pipeLineAnaly from './pipeLineAnaly.vue'
export default {
  name: 'queryinfo',
@@ -34,7 +35,8 @@
    Popup,
    mapMenuPop,
    mapSpacePop,
    pipeLineAnaly
    pipeLineAnaly,
    mapPickUpPop
  },
  data() {
    return {
@@ -116,4 +118,4 @@
};
</script>