解决专业分析bug，面板切换底图状态切换

README.md

@@ -6,7 +6,8 @@ npm install
 
 npm install --registry=https://registry.npm.taobao.org
 
-
+# 安装vue-json-excel
+cnpm install vue-json-excel
 
 # 安装 html2canvas
 
@@ -27,25 +28,7 @@ cnpm install node-sass@latest
 # 启动服务报错缺少 gifler-js 运行
 
 npm install gifler@0.1.0
-
-# 启动服务报错缺少 viewerjs-js 运行 (插件说明：图片预览展示)
-
-npm install viewerjs
-
-# 启动服务报错缺少 shapefile-js 运行 (插件说明：离线加载水系地图)
-
-npm install shapefile
-
-# 监听元素变化的插件
-
-npm install element-resize-detector
-
-# 启动服务报错缺少 hls.js 运行 (插件说明：安装摄像头视频播放插件)
-
-npm install hls.js --save
-
-# 启动服务缺少 plot（插件说明：军旗标注类）
-
+  
 npm install ol-plot --save
 
 # 启动服务缺少 vue-pdf（插件说明：pdf 查看）

package.json

@@ -35,6 +35,7 @@
     "viewerjs": "^1.9.0",
     "vue": "2.6.10",
     "vue-baidu-map": "^0.21.22",
+    "vue-json-excel": "^0.3.0",
     "vue-pdf": "^4.3.0",
     "vue-router": "3.0.6",
     "vue-worker": "^1.2.1",

src/layout/components/SidePanels.vue

@@ -100,6 +100,12 @@ export default {
     },
     clickTab(targetName) {
       this.data.activeModel = targetName.name
+      const data = {
+        widgetid: 'Panel',
+        id: this.data.activeModel
+      };
+      console.log('输出===88：',this.data.activeModel)
+      this.$store.dispatch('map/changePeditableTabsValue', this.data.activeModel);
     }
   }
 }

src/store/modules/map.js

@@ -36,6 +36,10 @@ const getDefaultState = () => {
 const state = getDefaultState()
 
 const mutations = {
+  // editableTabsValue
+  CHANGE_P_EDITABLETABSVALUE: (state, data) => {
+    state.P_editableTabsValue = data
+  },
   SET_FUN: (state, data) => {
     state.P_editableTabsValue = data.com
     // if (!some(state.panels, data.com)) {
@@ -44,7 +48,7 @@ const mutations = {
     // state.panels = state.panels.slice()
     let panel = state.panels.findIndex(item => item.com === data.com);
     let changePanel = null;
-    if(panel !== -1) { // 有这个元素 调整位置到第一个
+    if (panel !== -1) { // 有这个元素 调整位置到第一个
       changePanel = state.panels[panel];
       state.panels.splice(panel, 1);
       state.panels.unshift(changePanel);
@@ -109,7 +113,7 @@ const mutations = {
   CHANGE_TAB: (state, payload) => {
     let delIndex = state.panels.findIndex(index => index.com === payload);
     let changePos = state.panels[delIndex];
-    if(delIndex >= 2) {
+    if (delIndex >= 2) {
       state.panels.splice(delIndex, 1);
       state.panels.unshift(changePos);
       delIndex = null;
@@ -126,6 +130,10 @@ const mutations = {
 }
 
 const actions = {
+  // 改变当前激活panel的名称
+  changePeditableTabsValue({ commit }, val) {
+    commit('CHANGE_P_EDITABLETABSVALUE', val)
+  },
   // 切换tab
   changeTab({ commit }, val) {
     commit('CHANGE_TAB', val)

src/views/MapView/index.vue

@@ -548,11 +548,11 @@ export default {
       });
 
       // 加载三维倾斜摄影影像
-      let tileset = new Cesium.Cesium3DTileset({
-        url: 'http://117.174.10.73:8090/3dtiles/jiangmen/tileset.json'
-      })
-      this.viewer.scene.primitives.add(tileset)
-      this.viewer.zoomTo(tileset)
+      // let tileset = new Cesium.Cesium3DTileset({
+      //   url: 'http://117.174.10.73:8090/3dtiles/jiangmen/tileset.json'
+      // })
+      // this.viewer.scene.primitives.add(tileset)
+      // this.viewer.zoomTo(tileset)
     },
     /**
      * 视图联动二维地图变化

src/views/MapView/mapViewTools/measureMent3D.vue

@@ -269,7 +269,7 @@ export default {
   height: 32px;
   border-radius: 2px;
   position: absolute;
-  bottom: 215px;
+  bottom: 178px;
   right: 15px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
   .btn {

src/views/kxcSystem/pipelineSystem/facilitiesQuery/widget.vue

@@ -201,6 +201,11 @@ export default {
     },
     drawType(val, oldVal) {
       this.initDraw()
+    },
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'facilitiesQuery') this.vectorLayer.setVisible(true)
+      else this.vectorLayer.setVisible(false)
     }
   },
   methods: {

src/views/kxcSystem/pipelineSystem/specialtyAnalysis/burstAnalysis/widget.vue

@@ -74,6 +74,14 @@
           </el-table-column>
           <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip></el-table-column>
           <el-table-column prop="num" label="数量" align="center" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="操作">
+            <template slot-scope="scope">
+              <download-excel style="display: inline-block;" :data="scope.row.data" :fields="scope.row.fields" type="xls"
+                              :name="scope.row.name">
+                <el-button type="text">导出</el-button>
+              </download-excel>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -167,6 +175,16 @@ export default {
     })
     this.data.that.map.addLayer(this.vectorLayer)
   },
+  watch: {
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'burstAnalysis') { this.vectorLayer.setVisible(true) }
+      else {
+        this.vectorLayer.setVisible(false)
+        unByKey(this.mapClickEvent) // 移除地图点击事件
+      }
+    }
+  },
   destroyed() {
     this.data.that.map.removeLayer(this.vectorLayer)
     unByKey(this.mapClickEvent) // 移除地图点击事件
@@ -181,6 +199,7 @@ export default {
      */
     mapSelect() {
       // 定义地图点击事件
+      unByKey(this.mapClickEvent)
       this.mapClickEvent = this.data.that.map.on("click", e => {
         this.queryPipeData(e.coordinate)
       })
@@ -211,7 +230,7 @@ export default {
      */
     queryValveCompleted(res) {
       if (this.burstSegmentID.length == 0) {
-        alert("请选择爆管点");
+        this.$message.error('请选择爆管点！')
         this.loading = false // 关闭执行状态
         return;
       }
@@ -255,7 +274,7 @@ export default {
      */
     judgePipeSelect(coordinate) {
       if (this.burstNetWorkConfigs.length == 0) {
-        this.$message.error('未选中管道！')
+        this.$message.error('未选中给水管道或燃气管道！')
         this.loading = false // 关闭执行状态
         return
       } else if (this.burstNetWorkConfigs.length == 1) {
@@ -454,6 +473,11 @@ export default {
       let featureService = new FeatureService(url)
       featureService.getFeaturesByGeometry(geometryParam, serviceResult => {
         // console.log('设施点查询结果：', serviceResult)
+        if (serviceResult.type == "processFailed") {
+          this.$message.error(`查询受影响设施失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
+          return
+        }
         let features = serviceResult.result.features.features
         if (features.length == 0) return
         else {
@@ -461,7 +485,12 @@ export default {
             pointFeature.properties['geometry'] = pointFeature.geometry
             this.burstInfo.facilities.push(pointFeature.properties)
           });
-          this.totalResultTable.push({ name: '受影响设施', num: this.burstInfo.facilities.length + '个' })
+          this.totalResultTable.push({
+            name: '受影响设施',
+            num: this.burstInfo.facilities.length + '个',
+            data: this.burstInfo.facilities,
+            fields: this.getFields('point')
+          })
         }
         this.loading = false // 关闭执行状态
       })
@@ -471,7 +500,7 @@ export default {
     */
     processCompleted(res) {
       this.showBurstPoint() // 重新显示爆管弧段和爆管点
-      // console.log('分析最终结果', res)
+      console.log('分析最终结果', res)
       let recordsets = res.result.recordsets
       this.burstInfo.valveArray = []
       this.burstInfo.pipeArray = []
@@ -481,41 +510,68 @@ export default {
         let features = item.features.features
 
         let pipeLength = new Number()
-        if (features[0].geometry.type == 'Point') {
-          features.forEach(pointFeature => {
-            pointFeature.properties['geometry'] = pointFeature.geometry
-            this.burstInfo.valveArray.push(pointFeature.properties)
-            // 显示设施
-            this.vectorLayer.getSource().addFeature(new Feature({
-              geometry: new GeoJSON().readGeometry(pointFeature.geometry)
-            }))
-          });
-          this.totalResultTable.push({ name: '受影响阀门', num: this.burstInfo.valveArray.length + '个' })
-        } else {
-          let unionEdgePolygon = null // 最终联合成的弧段多边形
-          features.forEach((LineFeature, index) => {
-            LineFeature.properties['geometry'] = LineFeature.geometry
-            // this.queryAffectedFacilities(new GeoJSON().readGeometry(LineFeature.geometry)) // 查询受影响的设施点
-            this.burstInfo.pipeArray.push(LineFeature.properties)
-            pipeLength += parseFloat(LineFeature.properties.SmLength)
-            // 管段生成小的缓冲区，再合并为一个多边形
-            let edgeGeometry = new GeoJSON().readGeometry(LineFeature.geometry)
-            let coordinate = edgeGeometry.getCoordinates() // 弧段的坐标
-            let bufferPolygon = turf.buffer(turf.lineString(coordinate), 0.0006, { units: 'kilometers' }) // 得到弧段缓冲0.5米的多边形
-            if (index == 0) unionEdgePolygon = bufferPolygon
-            else unionEdgePolygon = turf.union(unionEdgePolygon, bufferPolygon) // 联合弧段
-            // 显示管道
-            this.vectorLayer.getSource().addFeature(new Feature({
-              geometry: edgeGeometry
-            }))
-          });
-          this.burstInfo.pipeLength = pipeLength.toFixed(1)
-          // 进行几何查询受影响设施
-          this.queryAffectedFacilities(new GeoJSON().readGeometry(unionEdgePolygon.geometry)) // 查询受影响的设施点
-          this.totalResultTable.push({ name: '受影响管线', num: this.burstInfo.pipeArray.length + '个' + '/' + this.burstInfo.pipeLength + 'm' })
-        }
+        if (features.length > 0)
+          if (features[0].geometry.type == 'Point') {
+            features.forEach(pointFeature => {
+              pointFeature.properties['geometry'] = pointFeature.geometry
+              this.burstInfo.valveArray.push(pointFeature.properties)
+              // 显示设施
+              this.vectorLayer.getSource().addFeature(new Feature({
+                geometry: new GeoJSON().readGeometry(pointFeature.geometry)
+              }))
+            });
+            this.totalResultTable.push({
+              name: '受影响阀门',
+              num: this.burstInfo.valveArray.length + '个',
+              data: this.burstInfo.valveArray,
+              fields: this.getFields('point')
+            })
+          } else {
+            let unionEdgePolygon = null // 最终联合成的弧段多边形
+            features.forEach((LineFeature, index) => {
+              LineFeature.properties['geometry'] = LineFeature.geometry
+              // this.queryAffectedFacilities(new GeoJSON().readGeometry(LineFeature.geometry)) // 查询受影响的设施点
+              this.burstInfo.pipeArray.push(LineFeature.properties)
+              pipeLength += parseFloat(LineFeature.properties.SmLength)
+              // 管段生成小的缓冲区，再合并为一个多边形
+              let edgeGeometry = new GeoJSON().readGeometry(LineFeature.geometry)
+              let coordinate = edgeGeometry.getCoordinates() // 弧段的坐标
+              let bufferPolygon = turf.buffer(turf.lineString(coordinate), 0.0006, { units: 'kilometers' }) // 得到弧段缓冲0.5米的多边形
+              if (index == 0) unionEdgePolygon = bufferPolygon
+              else unionEdgePolygon = turf.union(unionEdgePolygon, bufferPolygon) // 联合弧段
+              // 显示管道
+              this.vectorLayer.getSource().addFeature(new Feature({
+                geometry: edgeGeometry
+              }))
+            });
+            this.burstInfo.pipeLength = pipeLength.toFixed(1)
+            // 进行几何查询受影响设施
+            this.queryAffectedFacilities(new GeoJSON().readGeometry(unionEdgePolygon.geometry)) // 查询受影响的设施点
+            this.totalResultTable.push({
+              name: '受影响管线',
+              num: this.burstInfo.pipeArray.length + '个' + '/' + this.burstInfo.pipeLength + 'm',
+              data: this.burstInfo.pipeArray,
+              fields: this.getFields('line')
+            })
+          }
       });
     },
+    /**
+     * 获取字段，Excel导出时使用
+     */
+    getFields(type) {
+      let fields = {}
+      if (type == 'line')
+        this.$store.state.common.PipeLineFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      else {
+        this.$store.state.common.PipePointFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      }
+      return fields
+    },
     /**
      * 点击查看
      */

src/views/kxcSystem/pipelineSystem/specialtyAnalysis/connectivityAnalysis/widget.vue

@@ -26,7 +26,7 @@
         <div v-cloak>{{selectEdgeInfo.lonlat}}</div>
       </div>
     </div>
-     <div class="op-box">
+    <div class="op-box">
       <el-button type="primary" size="small" style="width:100%" @click="getConnectivityPipe" :loading="loading">开始分析</el-button>
     </div>
     <!-- 统计总览 -->
@@ -56,6 +56,14 @@
           </el-table-column>
           <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip></el-table-column>
           <el-table-column prop="num" label="数量" align="center" show-overflow-tooltip></el-table-column>
+          <el-table-column align="center" label="操作">
+            <template slot-scope="scope">
+              <download-excel style="display: inline-block;" :data="scope.row.data" :fields="scope.row.fields" type="xls"
+                              :name="scope.row.name">
+                <el-button type="text">导出</el-button>
+              </download-excel>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -143,6 +151,18 @@ export default {
     })
     this.data.that.map.addLayer(this.vectorLayer)
   },
+  watch: {
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'connectivityAnalysis') {
+        this.vectorLayer.setVisible(true)
+      }
+      else {
+        this.vectorLayer.setVisible(false)
+        unByKey(this.mapClickEvent) // 移除地图点击事件
+      }
+    }
+  },
   destroyed() {
     this.data.that.map.removeLayer(this.vectorLayer)
     unByKey(this.mapClickEvent)
@@ -155,6 +175,7 @@ export default {
      */
     mapSelect() {
       // 定义地图点击事件
+      unByKey(this.mapClickEvent)
       this.mapClickEvent = this.data.that.map.on("click", e => {
         this.queryPipeData(e.coordinate)
       })
@@ -341,15 +362,22 @@ export default {
       let featureService = new FeatureService(url)
       featureService.getFeaturesByGeometry(geometryParam, serviceResult => {
         // console.log('设施点查询结果：', serviceResult)
-        let features = serviceResult.result.features.features
-        if (features.length == 0) return
-        else {
-          features.forEach(pointFeature => {
-            pointFeature.properties['geometry'] = pointFeature.geometry
-            this.selectEdgeInfo.facilities.push(pointFeature.properties)
-          });
+        if (serviceResult.type == "processFailed") {
+          this.$message.error(`查询受影响设施失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
+          return
         }
-        this.totalResultTable.push({ name: '连通管点', num: this.selectEdgeInfo.facilities.length + '个' })
+        let features = serviceResult.result.features.features
+        features.forEach(pointFeature => {
+          pointFeature.properties['geometry'] = pointFeature.geometry
+          this.selectEdgeInfo.facilities.push(pointFeature.properties)
+        });
+        this.totalResultTable.push({
+          name: '连通管点',
+          num: this.selectEdgeInfo.facilities.length + '个',
+          data: this.selectEdgeInfo.facilities,
+          fields: this.getFields('point')
+        })
         this.loading = false // 关闭执行状态
       })
     },
@@ -363,6 +391,7 @@ export default {
       this.totalResultTable = []
       let features = res.result.recordsets[0].features.features
       let unionEdgePolygon = null // 最终联合成的弧段多边形
+
       features.forEach((LineFeature, index) => {
         LineFeature.properties['geometry'] = LineFeature.geometry
         this.selectEdgeInfo.pipeArray.push(LineFeature.properties)
@@ -380,7 +409,12 @@ export default {
         }))
       })
       this.selectEdgeInfo.pipeLength = pipeLength.toFixed(1)
-      this.totalResultTable.push({ name: '连通管线', num: this.selectEdgeInfo.pipeArray.length + '个' + '/' + this.selectEdgeInfo.pipeLength + 'm' })
+      this.totalResultTable.push({
+        name: '连通管线',
+        num: this.selectEdgeInfo.pipeArray.length + '个' + '/' + this.selectEdgeInfo.pipeLength + 'm',
+        data: this.selectEdgeInfo.pipeArray,
+        fields: this.getFields('line')
+      })
       // 进行几何查询受影响设施
       this.queryAffectedFacilities(new GeoJSON().readGeometry(unionEdgePolygon.geometry)) // 查询连通的设施点
     },
@@ -390,6 +424,22 @@ export default {
     processFailed() {
       alert('error')
     },
+    /**
+     * 获取字段，Excel导出时使用
+     */
+    getFields(type) {
+      let fields = {}
+      if (type == 'line')
+        this.$store.state.common.PipeLineFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      else {
+        this.$store.state.common.PipePointFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      }
+      return fields
+    },
     /**
      * 清除分析结果
      */

src/views/kxcSystem/pipelineSystem/specialtyAnalysis/crossSectionAnalysis/widget.vue

@@ -42,7 +42,11 @@
           <el-table-column prop="num" label="数量" align="center" show-overflow-tooltip></el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="text" @click="viewDetails">查看详情</el-button>
+              <el-button type="text" @click="viewDetails">查看</el-button>
+              <download-excel style="display: inline-block;" :data="scope.row.data" :fields="scope.row.fields" type="xls"
+                              :name="scope.row.name">
+                <el-button type="text">导出</el-button>
+              </download-excel>
             </template>
           </el-table-column>
         </el-table>
@@ -112,6 +116,22 @@ export default {
     })
     this.data.that.map.addLayer(this.vectorLayer)
   },
+  watch: {
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'crossSectionAnalysis') {
+        this.vectorLayer.setVisible(true)
+      }
+      else {
+        this.vectorLayer.setVisible(false)
+        if (this.draw) this.data.that.map.removeInteraction(this.draw)
+      }
+    },
+    '$store.state.common.ViewLayout': function(val, oldVal){
+      if(val=='3D视图') this.viewType = '2D视图'
+      else this.viewType = '3D视图'
+    }
+  },
   destroyed() {
     this.vectorLayer.getSource().clear()
     if (this.draw) this.data.that.map.removeInteraction(this.draw)
@@ -179,6 +199,7 @@ export default {
           }
         ]
       };
+      this.myChart.clear()
       this.myChart.setOption(option);
       this.myChart.on('globalout', e => {
         if (this.vectorLayer.getSource().getFeatureById("pipe_point"))
@@ -212,9 +233,10 @@ export default {
      * 绘制横剖面标线
      */
     drawLine() {
-      Object.assign(this.$data, this.$options.data());
+      this.data.that.map.removeInteraction(this.draw)
       this.vectorLayer.getSource().clear()
-      if (this.myChart) this.myChart.clear()
+      this.loadChart()
+      Object.assign(this.$data, this.$options.data());
 
       this.draw = new Draw({
         source: this.vectorLayer.getSource(),
@@ -270,6 +292,11 @@ export default {
       })
       featureService.getFeaturesByGeometry(geometryParam, serviceResult => {
         // console.log('查询结果', serviceResult)
+        if (serviceResult.type == "processFailed") {
+          this.$message.error(`获取相交管线失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
+          return
+        }
         if (serviceResult.result.features.features.length > 0) {
           let features = JSON.parse(JSON.stringify(serviceResult.result.features.features))
           features.forEach(fea => {
@@ -330,9 +357,9 @@ export default {
               x: parseFloat(sortRes.pipeLines[i].geometry.coordinates[1][0]),
               z: parseFloat(sortRes.pipeLines[i].END_HEIGHT) - parseFloat(sortRes.pipeLines[i].END_DEPTH)
             }
-            let iPoint = { x: parseFloat(sortRes.iPoints[i][0])}
+            let iPoint = { x: parseFloat(sortRes.iPoints[i][0]) }
 
-            const iPointHeight = this.calcIpointHeight(startPoint,endPoint,iPoint)
+            const iPointHeight = this.calcIpointHeight(startPoint, endPoint, iPoint)
             iPointHeights.push(iPointHeight.toFixed(2))
             // console.log('输出计算的高程：',this.calcIpointHeight(startPoint,endPoint,iPoint).toFixed(2))
           }
@@ -341,7 +368,9 @@ export default {
           this.loadChart(avgGroundHeights, iPointHeights, distenceArray, yMin, yMax)
           this.totalResultTable.push({
             name: '相交管线',
-            num: this.result.crossPipeType.length + '类/' + this.result.pipeArray.length + '个'
+            num: this.result.crossPipeType.length + '类/' + this.result.pipeArray.length + '个',
+            data: this.result.pipeArray,
+            fields: this.getFields('line')
           })
           this.loading = false // 关闭执行状态
         } else {
@@ -378,6 +407,22 @@ export default {
       // 利用空间直线两点式方程得到交点高程,即交点z坐标
       return (endPoint.z - startPoint.z) * (iPoint.x - startPoint.x) / (endPoint.x - startPoint.x) + startPoint.z
     },
+    /**
+     * 获取字段，Excel导出时使用
+     */
+    getFields(type) {
+      let fields = {}
+      if (type == 'line')
+        this.$store.state.common.PipeLineFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      else {
+        this.$store.state.common.PipePointFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      }
+      return fields
+    },
     /**
      * 二三维场景转换
      */

src/views/kxcSystem/pipelineSystem/specialtyAnalysis/parallelSectionAnalysis/widget.vue

@@ -38,31 +38,16 @@
           <el-table-column prop="num" label="数量" align="center" show-overflow-tooltip></el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="text" @click="viewDetails">查看详情</el-button>
+              <el-button type="text" @click="viewDetails">查看</el-button>
+              <download-excel style="display: inline-block;" :data="scope.row.data" :fields="scope.row.fields" type="xls"
+                              :name="scope.row.name">
+                <el-button type="text">导出</el-button>
+              </download-excel>
             </template>
           </el-table-column>
         </el-table>
       </div>
     </div>
-    <!-- <div class="table-chart">
-      <div class="item-head">管道(<span>{{pipeLength}}</span>m / <span>{{pipeArray.length}}</span>个)</div>
-      <div class="table-container">
-        <el-table :data="pipeArray" stripe max-height="200" :header-cell-style="{fontSize: '14px', fontWeight:'600',background:'#eaf1fd',color:'#909399'}"
-                  style="width: 100%">
-          <el-table-column label="序号" align="center" width="50">
-            <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
-          </el-table-column>
-          <el-table-column prop="SID" label="编号" align="center" show-overflow-tooltip></el-table-column>
-          <el-table-column prop="MATERIAL" label="材质" align="center" show-overflow-tooltip></el-table-column>
-          <el-table-column prop="DIAMETER" label="管径(mm)" align="center" show-overflow-tooltip></el-table-column>
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-button type="text" @click="tableRowLook(scope)">详情</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div> -->
     <!-- 管网选择 -->
     <el-dialog title="选择管道类型" :visible.sync="dialogVisible" width="30%" :show-close="false">
       <div style="margin-bottom:10px">选择的点有以下<span v-cloak>{{netWorkConfigs.length}}</span>种类型管道，请选择一种进行分析</div>
@@ -147,6 +132,22 @@ export default {
     })
     this.data.that.map.addLayer(this.vectorLayer)
   },
+  watch: {
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'parallelSectionAnalysis') {
+        this.vectorLayer.setVisible(true)
+      }
+      else {
+        this.vectorLayer.setVisible(false)
+        unByKey(this.mapClickEvent) // 移除地图点击事件
+      }
+    },
+    '$store.state.common.ViewLayout': function (val, oldVal) {
+      if (val == '3D视图') this.viewType = '2D视图'
+      else this.viewType = '3D视图'
+    }
+  },
   destroyed() {
     this.data.that.map.removeLayer(this.vectorLayer)
     unByKey(this.mapClickEvent)
@@ -214,6 +215,7 @@ export default {
           }
         ]
       };
+      this.myChart.clear()
       this.myChart.setOption(option);
       this.myChart.on('globalout', e => {
         if (this.vectorLayer.getSource().getFeatureById("pipe_point"))
@@ -253,7 +255,7 @@ export default {
       this.pipeLength = 0
       this.clickType = 0
       if (this.mapClickEvent) unByKey(this.mapClickEvent)
-      if (this.myChart) this.myChart.clear()
+      this.loadChart()
       // 定义地图点击事件
       this.mapClickEvent = this.data.that.map.on("click", e => {
         this.queryPipeData(e.coordinate)
@@ -340,6 +342,11 @@ export default {
       let geoQueryConf = this.geoQueryConf(geometry, this.selectPipeConfig)
       geoQueryConf.featureService.getFeaturesByGeometry(geoQueryConf.geometryParam, serviceResult => {
         // console.log('第二次查询结果：', serviceResult.result.features.features.length)
+        if (serviceResult.type == "processFailed") {
+          this.$message.error(`获取终点管线失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
+          return
+        }
         let features = JSON.parse(JSON.stringify(serviceResult.result.features.features))
         // 查询到第二次选择的管线
         if (features.length > 0) {
@@ -379,8 +386,9 @@ export default {
           //进行查找
           networkAnalystService.findPath(findPathParameter, serviceResult => {
             // console.log("纵剖面分析结果：", serviceResult)
-            if (serviceResult.error) {
-              this.$message.error('纵剖面分析失败，可能选择的管道不连续！');
+            if (serviceResult.type == "processFailed") {
+              this.$message.error('纵剖面分析失败，确保选择的管道是连续的！');
+              this.loading = false
               return
             }
             let proj = this.data.that.map.getView().getProjection()
@@ -431,7 +439,12 @@ export default {
             let yMin = Math.min(...nodeHeightArray) - 0.5
             let yMax = Math.max(...groundHeightArray) + 0.5
             this.loadChart(groundHeightArray, nodeHeightArray, nodeDistance, yMin, yMax)
-            this.totalResultTable.push({ name: '相连管线', num: this.pipeArray.length + '个/' + this.pipeLength + 'm' })
+            this.totalResultTable = [{
+              name: '相连管线',
+              num: this.pipeArray.length + '个/' + this.pipeLength + 'm',
+              data: this.pipeArray,
+              fields: this.getFields('line')
+            }]
             unByKey(this.mapClickEvent)
             this.clickType = 0
             this.loading = false // 关闭执行状态
@@ -441,6 +454,22 @@ export default {
         }
       })
     },
+    /**
+     * 获取字段，Excel导出时使用
+     */
+    getFields(type) {
+      let fields = {}
+      if (type == 'line')
+        this.$store.state.common.PipeLineFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      else {
+        this.$store.state.common.PipePointFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      }
+      return fields
+    },
     /**
      * 确认管道类型
      */

src/views/kxcSystem/pipelineSystem/specialtyAnalysis/soilDepthAnalysis/widget.vue

@@ -37,26 +37,6 @@
       <div class="item-head">管线分布</div>
       <div class="chart-container" id="main"></div>
     </div>
-    <!-- 表格 -->
-    <!-- <div class="table-chart">
-      <div class="item-head">管道(<span>{{0}}</span>m / <span>{{0}}</span>个)</div>
-      <div class="table-container">
-        <el-table :data="pipeArray" stripe :header-cell-style="{fontSize: '14px', fontWeight:'600',background:'#eaf1fd',color:'#909399'}"
-                  style="width: 100%" height="100%">
-          <el-table-column label="序号" align="center" width="50">
-            <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
-          </el-table-column>
-          <el-table-column prop="SID" label="编号" align="center" show-overflow-tooltip></el-table-column>
-          <el-table-column prop="MATERIAL" label="材质" align="center" show-overflow-tooltip></el-table-column>
-          <el-table-column prop="DIAMETER" label="管径(mm)" align="center" show-overflow-tooltip></el-table-column>
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-button type="text" @click="tableRowLook(scope)">详情</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div> -->
   </div>
 </template>
 
@@ -90,11 +70,22 @@ export default {
       }
     }
   },
+  mounted(){
+    this.loadChart()
+  },
+  watch: {
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val != 'soilDepthAnalysis') {
+        unByKey(this.mapClickEvent) // 移除地图点击事件
+      }
+    }
+  },
   methods: {
     // 选择管线
     selectPipe() {
       Object.assign(this.$data, this.$options.data());
-      if (this.myChart) this.myChart.clear()
+      this.loadChart()
       this.mapClickEvent = this.data.that.map.on("click", evt => {
         this.loading = true // 执行状态
         // console.log(evt.coordinate)
@@ -121,7 +112,7 @@ export default {
           color: 'black',
           textStyle: { color: '#3c4043' },
           formatter: param => {
-            console.log('param',param)
+            console.log('param', param)
             const deepth1 = param[0].data - param[1].data // 实际深度
             const deepth2 = param[0].data - param[2].data // 标准深度
             return `
@@ -176,6 +167,7 @@ export default {
           }
         ]
       };
+      this.myChart.clear()
       this.myChart.setOption(option);
       // this.myChart.on('globalout', e => {
       //   if (this.vectorLayer.getSource().getFeatureById("pipe_point"))
@@ -202,6 +194,11 @@ export default {
       // 查询
       featureService.getFeaturesByGeometry(geometryParam, serviceResult => {
         console.log(serviceResult)
+        if (serviceResult.type == "processFailed") {
+          this.$message.error(`获取管线失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
+          return
+        }
         if (serviceResult.result.features.features.length > 0) {
           let feature = serviceResult.result.features.features[0] // 获取第一个要素
           console.log("要素", feature)

src/views/kxcSystem/pipelineSystem/specialtyAnalysis/warningAnalysis/widget.vue

@@ -65,7 +65,8 @@
               </el-select>
             </el-col>
             <el-col :span="18">
-              <el-input-number size="small" v-model="queryForm.maintainNum.REPAIRNUM" controls-position="right" :min="0" style="width:100%"></el-input-number>
+              <el-input-number size="small" v-model="queryForm.maintainNum.REPAIRNUM" controls-position="right" :min="0" style="width:100%">
+              </el-input-number>
             </el-col>
           </el-row>
         </el-form-item>
@@ -116,7 +117,11 @@
           <el-table-column prop="num" label="数量" align="center" show-overflow-tooltip></el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="text" @click="viewDetails">查看详情</el-button>
+              <el-button type="text" @click="viewDetails">查看</el-button>
+              <download-excel style="display: inline-block;" :data="scope.row.data" :fields="scope.row.fields" type="xls"
+                              :name="scope.row.name">
+                <el-button type="text">导出</el-button>
+              </download-excel>
             </template>
           </el-table-column>
         </el-table>
@@ -154,7 +159,7 @@ export default {
         completionDate: {},
         changeDate: {},
         expiredDate: {},
-        maintainNum: {REPAIRNUM:0}
+        maintainNum: { REPAIRNUM: 0 }
       },
       calcOptions: [
         { label: '=', value: '=' },
@@ -174,6 +179,16 @@ export default {
         if (this.draw) this.data.that.map.removeInteraction(this.draw)
       }
       this.vectorLayer.getSource().clear()
+    },
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'warningAnalysis') {
+        this.vectorLayer.setVisible(true)
+      }
+      else {
+        this.vectorLayer.setVisible(false)
+        if (this.draw) this.data.that.map.removeInteraction(this.draw)
+      }
     }
   },
   mounted() {
@@ -281,6 +296,10 @@ export default {
       return new Promise((resolve) => {
         //向服务器发送请求，并对返回的结果进行处理
         new FeatureService(url).getFeaturesBySQL(sqlParam, serviceResult => {
+          if (serviceResult.type == "processFailed") {
+            this.$message.error(`获取唯一值失败，${serviceResult.error.errorMsg}!`);
+            return
+          }
           //获取返回的features数据
           let features = serviceResult.result.features.features
           // 拿到唯一值
@@ -316,8 +335,8 @@ export default {
       new FeatureService(url).getFeaturesByGeometry(geoQueryParam, serviceResult => {
         // console.log('输出几何查询结果：', serviceResult)
         if (serviceResult.type == "processFailed") {
-          this.$message.error('获取结果失败！')
-          this.loading = false
+          this.$message.error(`获取结果失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
           return
         }
         let features = serviceResult.result.features.features
@@ -346,8 +365,8 @@ export default {
       new FeatureService(url).getFeaturesBySQL(sqlQueryParam, serviceResult => {
         // console.log('输出属性查询结果：', serviceResult)
         if (serviceResult.type == "processFailed") {
-          this.$message.error('获取结果失败！')
-          this.loading = false
+          this.$message.error(`获取结果失败，${serviceResult.error.errorMsg}!`);
+          this.loading = false // 关闭执行状态
           return
         }
         let features = serviceResult.result.features.features
@@ -357,7 +376,12 @@ export default {
             item.properties['geometry'] = item.geometry;
             return item.properties
           })
-          this.totalResultTable = [{ name: this.selectLayer.label, num: this.features.length + '个' }]
+          this.totalResultTable = [{
+            name: this.selectLayer.label,
+            num: this.features.length + '个',
+            data: this.features,
+            fields: this.getFields(this.selectLayer.type)
+          }]
           this.loading = false
         }
       })
@@ -394,7 +418,7 @@ export default {
         }
       });
       sqlStr = sqlStr.substr(0, sqlStr.length - 5) // 去掉最后一个AND
-      console.log('查询条件：', sqlStr)
+      // console.log('查询条件：', sqlStr)
       return sqlStr
     },
     /**执行分析 */
@@ -419,6 +443,22 @@ export default {
       }
       console.log('输出///：', mapConfig.iServerUrl.pipelineDataServer.dataSource, this.selectLayer)
     },
+    /**
+     * 获取字段，Excel导出时使用
+     */
+    getFields(type) {
+      let fields = {}
+      if (type == 'line')
+        this.$store.state.common.PipeLineFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      else {
+        this.$store.state.common.PipePointFields.forEach(item => {
+          fields[item.pipelineVal] = item.pipelineKey
+        });
+      }
+      return fields
+    },
     /**清除结果 */
     clearReasult() {
       this.vectorLayer.getSource().clear()

src/views/kxcSystem/pipelineSystem/sqlQuery/widget.vue

@@ -14,14 +14,14 @@
       <el-row>
         <el-col :span="12">
           <div class="item-head">查询字段
-            <el-tooltip class="item" effect="dark" content="单击获取唯一值，双击选择字段" placement="right">
+            <el-tooltip class="item" effect="dark" content="数据集的所有字段，双击选择字段" placement="right">
               <span class="el-icon-info"></span>
             </el-tooltip>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="item-head">唯一值
-            <el-tooltip class="item" effect="dark" content="双击选择字段值" placement="right">
+            <el-tooltip class="item" effect="dark" content="双击选择字段的值" placement="right">
               <span class="el-icon-info"></span>
             </el-tooltip>
           </div>
@@ -98,7 +98,12 @@
 <script>
 import { mapConfig } from '@/views/MapView/map.config'
 import { SuperMap, FieldService, FeatureService } from '@supermap/iclient-ol';
+import { Vector as VectorSource } from 'ol/source';
+import { Vector as VectorLayer } from 'ol/layer';
+import { Style, Circle, Icon, Fill, RegularShape, Stroke, Text } from 'ol/style';
+import { GeoJSON, WFS } from 'ol/format';
 export default {
+  props: ['data'],
   data() {
     return {
       datasetOptions: [],
@@ -116,8 +121,37 @@ export default {
   },
   mounted() {
     this.initData()
+    // 初始化显示图层
+    this.vectorLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: new Style({
+        stroke: new Stroke({
+          width: 5,
+          color: '#ed1941'
+        }),
+        image: new Circle({
+          radius: 6,
+          stroke: new Stroke({
+            width: 2,
+            color: '#ed1941'
+          }),
+          fill: new Fill({
+            color: '#FFF'
+          })
+        })
+      })
+    })
+    this.data.that.map.addLayer(this.vectorLayer)
+  },
+  watch: {
+    // 监听面板是否被改变
+    '$store.state.map.P_editableTabsValue': function (val, oldVal) {
+      if (val == 'sqlQuery') this.vectorLayer.setVisible(true)
+      else this.vectorLayer.setVisible(false)
+    }
   },
   destroyed() {
+    this.data.that.map.removeLayer(this.vectorLayer)
     this.$store.dispatch('map/delHalfPanels', 'sqlQueryResult');
   },
   methods: {
@@ -132,7 +166,7 @@ export default {
      * 获取图层数据集的字段信息
      */
     getLayerFields() {
-      console.log('输出：this.targetDataset', this.targetDataset)
+      // console.log('输出：this.targetDataset', this.targetDataset)
       if (this.targetDataset.type == "line") {
         this.fields = this.$store.state.common.PipeLineFields
       } else {
@@ -183,16 +217,17 @@ export default {
         });
         //向服务器发送请求，并对返回的结果进行处理
         new FeatureService(url).getFeaturesBySQL(sqlParam, serviceResult => {
+          if (serviceResult.type == "processFailed") {
+            this.$message.error(`获取唯一值失败，${serviceResult.error.errorMsg}!`);
+            this.$nextTick(() => { this.onlyFieldloading.close() });
+            return
+          }
           //获取返回的features数据
           let features = serviceResult.result.features.features
           // 拿到唯一值
-          console.log("唯一值：", features)
-          this.fieldOnlyValue = features.map(item => {
-            return item.properties[field]
-          })
-          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
-            this.onlyFieldloading.close()
-          });
+          this.fieldOnlyValue = features.map(item => { return item.properties[field] })
+          // 以服务的方式调用的 Loading 需要异步关闭
+          this.$nextTick(() => { this.onlyFieldloading.close() });
         })
       }, 300);
     },
@@ -200,6 +235,7 @@ export default {
     selectField(field) {
       if (this.time) clearTimeout(this.time);
       this.insertInputSqlTxt(field + ' ')
+      if(this.fieldOnlyValue.length==0) this.getOnlyValue(field)
     },
     /**
      * 添加sql操作符
@@ -240,12 +276,14 @@ export default {
       });
       //向服务器发送请求，并对返回的结果进行处理
       new FeatureService(url).getFeaturesBySQL(sqlParam, serviceResult => {
-        if (!serviceResult.result.type == "processCompleted") {
-          this.$message.error("查询失败!");
+        if (serviceResult.type == "processFailed") {
+          this.$message.error(`SQL查询失败，${serviceResult.error.errorMsg}!`);
           this.queryStatus = false;
           return
         }
         if (serviceResult.result.features.features.length >= 0) {
+          this.vectorLayer.getSource().clear()
+          this.vectorLayer.getSource().addFeatures(new GeoJSON().readFeatures(serviceResult.result.features))
           let features = serviceResult.result.features.features
           this.resFeatures = features.map(item => {
             item.properties['geometry'] = item.geometry;
@@ -275,8 +313,9 @@ export default {
     },
     /**清空结果 */
     clearReault() {
-      Object.assign(this.$data, this.$options.data());
       this.$store.dispatch('map/delHalfPanels', 'sqlQueryResult');
+      this.vectorLayer.getSource().clear()
+      Object.assign(this.$data, this.$options.data());
       this.initData()
     },
     showQueryResultData() {
@@ -343,6 +382,7 @@ export default {
         padding: 0;
         margin: 0;
         li {
+          user-select: none;
           box-sizing: border-box;
           padding-left: 5px;
           width: 100%;