修改管线统计

README.md

@@ -59,6 +59,10 @@ npm install jspdf --save
 npm install @types/file-saver --save-dev
 cnpm install --save file-saver
 
+# 启动服务缺少 element-resize-detector（插件说明：全局监听）
+
+npm install --save element-resize-detector
+
 ## 发布
 
 # 预览发布环境效果

package.json

@@ -14,6 +14,7 @@
     "axios": "0.18.1",
     "core-js": "^2.6.11",
     "echarts": "^4.9.0",
+    "element-resize-detector": "^1.2.3",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.5",
     "hls.js": "^1.0.2",

src/views/MapView/miniMap/index.vue

@@ -74,6 +74,8 @@ export default {
           break;
         case '2':
           console.log('管线统计绘制类型','地图范围');
+          let feature = this.getMapExtent(this.map.getView().calculateExtent(this.map.getSize())); //获取当前地图范围
+          this.layerQuery(feature.getGeometry());
           break;
         case '3':
           console.log('管线统计绘制类型','地图联动');
@@ -99,7 +101,8 @@ export default {
     this.$nextTick(() => {
       this._initMap();
       //记录地图默认范围
-      this.defaultFeature = this.getMapExtent(this.map.getView().calculateExtent(this.map.getSize()));
+      let feature = this.getMapExtent(this.map.getView().calculateExtent(this.map.getSize()));
+       this.layerQuery(feature.getGeometry());
     });
     //this.config = miniMapConfig;
     this.config = mapConfig;
@@ -382,7 +385,7 @@ export default {
       let polygon = feature;
       let url = this.config.iServerUrl.pipelineDataServer.url;
       let dataSource = this.config.iServerUrl.pipelineDataServer.dataSource;
-       this.returnFunction({type:'clear',name:null,result:null});
+      this.returnFunction({type:'clear',name:null,result:null});
       this.config.iServerUrl.pipelineDataServer.dataSet.forEach((item,index)=>{
         let datasetName = dataSource + ':' + item;
         //创建集Bounds查询服务
@@ -399,8 +402,10 @@ export default {
           else{
             this.returnFunction({
               type:'add',
-              name:this.config.iServerUrl.pipelineDataServer.dataSetName[index],
-              result:serviceResult.result
+              dataSetInfo:this.config.iServerUrl.pipelineDataServer.dataSetInfo[index],
+              result:serviceResult.result,
+              statisticCount:this.config.iServerUrl.pipelineDataServer.dataSet.length,
+              times:index+1
             });
           }
         });

src/views/kxcSystem/pipelineSystem/statisticalAnalysis/pipeLineStatistical/css.scss

@@ -66,10 +66,12 @@
             /deep/.el-tabs__content {
               height: calc(100% - 80px) !important;
             }
-
             .statistic {
               width: 100%;
               height: 100%;
+              .layer-select {
+                margin-bottom: 10px;
+              }
             }
           }
         }
@@ -77,10 +79,10 @@
 
       .echartStatistic {
         width: 100%;
-        height: calc(100% - 40px);
+        height: calc(100% - 50px);
         .echartSta {
-          width: 360px;
-          height: 300px;
+          width: 100%;
+          height: 33.3%;
         }
       }
     }

src/views/kxcSystem/pipelineSystem/statisticalAnalysis/pipeLineStatistical/index.vue

@@ -94,8 +94,8 @@
             <div class="box-content box-edit-content">
                 <el-row>
                   <el-col :span="24">
-                      <el-tabs type="border-card" class="card-statistic">
-                        <el-tab-pane class="pane-statistic" label="线图层">
+                      <el-tabs type="border-card" class="card-statistic" v-model="activeName" @tab-click="handleClick">
+                        <el-tab-pane class="pane-statistic" name='line' label="线图层">
                           <!-- <span slot="label"><i class="el-icon-date"></i>线图层</span> -->
                           <div class="lineLayerSta statistic">
                             <el-select v-model="pipeLineType" class="layer-select" placeholder="请选择">
@@ -105,14 +105,14 @@
                               :value="item.value">
                               </el-option>
                             </el-select>
-                            <div class="echartStatistic">
+                            <div class="echartStatistic" ref="echartStatistic">
                               <div class="diamStatistic echartSta" ref="lineDiamStatistic"></div>
                               <div class="materialStatistic echartSta" ref="lineMaterialStatistic"></div>
                               <div class="typeStatistic echartSta" ref="lineTypeStatistic"></div>
                             </div>
                           </div>
                         </el-tab-pane>
-                        <el-tab-pane class="pane-statistic" label="点图层">
+                        <el-tab-pane class="pane-statistic" name='point' label="点图层">
                           <div class="pointLayerSta statistic">
                             <el-select v-model="pipeLineType" class="layer-select" placeholder="请选择">
                               <el-option v-for="item in pipePointTypes"
@@ -122,9 +122,9 @@
                               </el-option>
                             </el-select>
                             <div class="echartStatistic">
-                              <div class="diamStatistic echartSta" ref="pointDiamStatistic"></div>
-                              <div class="materialStatistic echartSta" ref="pointMaterialStatistic"></div>
-                              <div class="typeStatistic echartSta" ref="pointTypeStatistic"></div>
+                              <div class="diamStatistic echartSta" ref="pointDiamStatistic" id="pointDiamStatistic"></div>
+                              <div class="materialStatistic echartSta" ref="pointMaterialStatistic" id="pointMaterialStatistic"></div>
+                              <div class="typeStatistic echartSta" ref="pointTypeStatistic" id="pointTypeStatistic"></div>
                             </div>
                           </div>
                         </el-tab-pane>
@@ -139,7 +139,6 @@
 import template from "./template.js";
 export default template;
 </script>
-
 <style lang="scss" scoped>
 @import './css.scss';
 </style>

src/views/kxcSystem/pipelineSystem/statisticalAnalysis/pipeLineStatistical/template.js

@@ -1,5 +1,9 @@
 //地图插件
 import MiniMap from '../../../../MapView/miniMap/index';
+import { GeoJSON } from "ol/format";
+import Feature from 'ol/Feature';
+import elementResizeDetectorMaker from "element-resize-detector"
+
 import echarts from 'echarts'
 export default {
   components: {
@@ -17,7 +21,7 @@ export default {
         { value: "5", label: '通信管线' },
         { value: "6", label: '综合管线' }],
       pipeLineType: "请选择",
-      selectType: '2',  //选择绘制类型
+      selectType: '1',  //选择绘制类型
       staCondition: [],
       optionFields:[{value: 'buildingNo',label: '楼盘编号'},
         {value: 'buildingNum',label: '幢号'},
@@ -36,7 +40,8 @@ export default {
       optionConnect: [{ value: 'and', label: '并且' },
         { value: 'or', label: '或者'}
       ],
-      statisticData:[]
+      statisticData: [],
+      activeName:'line'
     }
   },
   created() {
@@ -55,26 +60,48 @@ export default {
     staCondition(newValue, oldValue) {
       console.log("改变", newValue, oldValue);
       this.statisticCondition = newValue;
-    }
+    },
   },
   mounted() {
-    this.loadEchart();
-    this.classifyStatistic();
     this.statisticMode = '';
     this.staCondition.push({ id: 0, fieldName: '', symbol: '', value: '', connect: '' });
+    //获取数据
+
+    //管线数据
+
+    this.$nextTick(() => {
+      //this.loadOverviewEchart();
+      this.classifyStatistic();
+      this.pointClassifyStatistic();
+    });
   },
+
   methods: {
+
+    /**
+     * 新增条件 
+     */
     addCondition(id) {
       this.staCondition.push({ id: id+1, fieldName: '', symbol: '', value: '', connect: '' });
     },
+
+    /**
+     * 删除条件 
+     */
     delCondition(id) {
       this.staCondition.splice(id, 1);
       if (this.staCondition.length < 1) {
         this.staCondition.push({ id: 0, fieldName: '', symbol: '', value: '', connect: '' });
       }
     },
-  
 
+    /**
+     * 鼠标切换tab事件 
+     */
+    handleClick(tab, event) {
+      console.log('1111111111', tab, tab.name, event, this.$refs.pointDiamStatistic.style.width);
+    },
+  
     /**
      * 根据地图配置获取统计类型
      * @data 数组 
@@ -104,18 +131,119 @@ export default {
         this.statisticData = [];
       }
       if (data.type == 'add') {
-        this.statisticData.push({name:data.name,result:data.result});
+        this.statisticData.push(data);
+      }
+      //最后一次时开始统计
+      if (data.statisticCount <= data.times) {
+        console.log('返回数据', this.statisticData);
+        this.getOverviewData(this.statisticData);
       }
-      console.log('返回数据', this.statisticData);
-      
     },
+    
+    /**
+     * 获取总览统计数据
+     */
+    getOverviewData(statisticData) {
+      let data = { };
+      if (statisticData && statisticData.length > 0) {
+        statisticData.forEach(item => {
+          //dataSetInfo:label: "线缆结点"name: "node"type: "point"
+          if (data.hasOwnProperty(item.dataSetInfo.type)) {
+            if (item.dataSetInfo.type == 'point') {
+              data[item.dataSetInfo.type].dataName.push(item.dataSetInfo.label);
+              data[item.dataSetInfo.type].dataValue.push(item.result.featureCount);
+            }
+            if (item.dataSetInfo.type == 'line') {
+              let dataValue = 0;
+              if (item.result.featureCount > 0) {
+                item.result.features.features.forEach(feature => {
+                  let fea = new Feature({
+                    geometry: new GeoJSON().readGeometry(feature.geometry)
+                  });
+                  let length = fea.getGeometry().getLength();
+                  //dataValue = dataValue + feature.properties.SMLENGTH;
+                  dataValue = dataValue + length;
+                });
+              }
+              else {
+                dataValue = 0
+              }
+              data[item.dataSetInfo.type].dataName.push(item.dataSetInfo.label);
+              data[item.dataSetInfo.type].dataValue.push(parseFloat(dataValue));
+            }
+          }
+          else {
+            if (item.dataSetInfo.type == 'point') {
+              data[item.dataSetInfo.type] = {
+                name: '管点',
+                dataName: [item.dataSetInfo.label],
+                dataValue: [item.result.featureCount]
+              }
+            }
 
-    loadEchart() {
-      let option = {
+            if (item.dataSetInfo.type == 'line') {
+              let dataValue = 0;
+              if (item.result.featureCount > 0) {
+                item.result.features.features.forEach(feature => {
+                  dataValue = dataValue + feature.properties.SMLENGTH;
+                });
+              }
+              else {
+                dataValue = 0
+              }
+              data[item.dataSetInfo.type] = {
+                name: '管线',
+                dataName: [item.dataSetInfo.label],
+                dataValue: [parseFloat(dataValue)]
+              }
+            }
+          }
+        });
+      }
+      this.loadOverviewEchart(data);
+    },
+    
+    loadOverviewEchart(data) {
+      console.log('-----------',data);
+      let option = null;
+      let dataName = [];
+      let dataValue = [];
+      let text = '';
+      if (data.hasOwnProperty('point')) {
+        dataName = data.point.dataName;
+        dataValue = data.point.dataValue;
+        text = '管点总个数：' + eval(dataValue.join("+")) + '个';
+        option = this.echartOption(text,dataName, dataValue);
+        echarts.init(this.$refs.pipePointOverview).setOption(option);
+      }
+      if(data.hasOwnProperty('line')) {
+        dataName = data.line.dataName;
+        dataValue = data.line.dataValue;
+        let sum = 0;
+        dataValue.forEach(item => {
+          sum = sum + parseFloat(item);
+        });
+        text = '管线长度：'+ sum.toFixed(4) + '千米';
+        option = this.echartOption(text,dataName,dataValue)
+        echarts.init(this.$refs.pipeLineOverview).setOption(option);
+      }  
+    },
+    
+    /**
+     * 总览显示-管点统计
+     * @dataName 数组，统计类型名称
+     * @dataValue 数组，统计数据
+     * 注意：1、dataName和dataValue数组长度必须保存一致
+     *      2、dataValue数字类型数组
+    */
+    echartOption(text,dataName, dataValue) {
+      return {
+        title: {
+          text: text,
+        },
         xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['排水管线', '供水管线', '燃气管线', '电力管线', '通信管线', '综合管线']
+          type: 'category',
+          data: dataName //['排水管线', '供水管线', '燃气管线', '电力管线', '通信管线', '综合管线']
         },
         // 工具
         toolbox: {  
@@ -124,9 +252,9 @@ export default {
               dataZoom: {
                   yAxisIndex: 'none'
               },
-              dataView: {readOnly: false},
-              magicType: {type: ['line', 'bar','pie']},
-              restore: {},
+              // dataView: {readOnly: false},
+              magicType: {type: ['line', 'bar']},
+              // restore: {},
               saveAsImage: {}
           }
         },
@@ -135,7 +263,7 @@ export default {
         },
         series: [{
           showBackground: true,
-            itemStyle: {
+          itemStyle: {
                 color: new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,
                     [
@@ -144,21 +272,45 @@ export default {
                         {offset: 1, color: '#188df0'}
                     ]
                 )
-            },
-            data: [820, 932, 901, 934, 1290, 1330],
-            type: 'line',
-            areaStyle: {}
+          },
+          data: dataValue, //[820, 932, 901, 934, 1290, 1330],
+          type: 'bar',
+          barWidth:'30',
+          areaStyle: {}
         }]
       };
-      echarts.init(this.$refs.pipeLineOverview).setOption(option);
-      echarts.init(this.$refs.pipePointOverview).setOption(option);
     },
+    
   
     //分类统计
     classifyStatistic() {
-      let option = {
+      let dataName = []
+      let dataValue = [];
+      let text = '';
+      let option = null;
+      setTimeout(() => {
+        dataName = ['200-400', '400-600', '600-800','800-100']
+        dataValue = [820, 932, 901,1200];
+        text = '按管径统计';
+        option = this.getClassifyoption(text,dataName,dataValue);
+        echarts.init(this.$refs.lineTypeStatistic).setOption(option);
+        dataName = ['筋混凝土管', '石棉水泥管', '玻璃钢管', '塑料管', '水球墨铸铁管', '钢管']
+        dataValue = [1234, 932, 456, 671, 234, 981];
+        text = '按材料统计';
+        option = this.getClassifyoption(text,dataName,dataValue);
+        echarts.init(this.$refs.lineMaterialStatistic).setOption(option);
+        dataName = ['白色硅胶管', '灰色软管', '黑色塑料管', '灰色塑料管']
+        dataValue = [890, 932, 1231, 2341];
+        text = '按特征统计';
+        option = this.getClassifyoption(text,dataName,dataValue);
+        echarts.init(this.$refs.lineDiamStatistic).setOption(option);
+      }, 200);
+    },
+
+    getClassifyoption(text,dataName,dataValue) {
+      return {
         title: {
-          text: '按管径统计',
+          text: text,
           subtext: '',
           left: 'left',
           textStyle: {
@@ -174,7 +326,7 @@ export default {
             interval:0,  
             rotate:40  
           } ,
-          data: ['排水管线', '供水管线', '燃气管线', '电力管线', '通信管线', '综合管线']
+          data: dataName
         },
         // 工具
         toolbox: {  
@@ -183,9 +335,9 @@ export default {
               dataZoom: {
                   yAxisIndex: 'none'
               },
-              dataView: {readOnly: false},
+              // dataView: {readOnly: false},
               magicType: {type: ['line', 'bar','pie']},
-              restore: {},
+              // restore: {},
               saveAsImage: {}
           }
         },
@@ -194,7 +346,7 @@ export default {
         },
         series: [{
           showBackground: true,
-            itemStyle: {
+          itemStyle: {
                 color: new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,
                     [
@@ -203,20 +355,52 @@ export default {
                         {offset: 1, color: '#188df0'}
                     ]
                 )
-            },
-            data: [820, 932, 901, 934, 1290, 1330],
-            type: 'line',
-            areaStyle: {}
+          },
+          data: dataValue,
+          type: 'line',
+          barWidth:'30',  
+          areaStyle: {}
         }]
       };
-      
-      echarts.init(this.$refs.lineTypeStatistic).setOption(option);
-      echarts.init(this.$refs.lineMaterialStatistic).setOption(option);
-      echarts.init(this.$refs.lineDiamStatistic).setOption(option);
+    },
+
+    //分类统计
+    pointClassifyStatistic() {
+      let dataName = []
+      let dataValue = [];
+      let text = '';
+      let option = null;
+      dataName = ['弯管', '直管', '三通管']
+      dataValue = [820, 932, 901];
+      text = '按特征统计';
+      option = this.getClassifyoption(text,dataName,dataValue);
+      let pointDiam = echarts.init(this.$refs.pointDiamStatistic);
+      pointDiam.setOption(option);
+      dataName = ['筋混凝土管', '石棉水泥管', '玻璃钢管', '塑料管', '水球墨铸铁管', '钢管']
+      dataValue = [1234, 932, 456, 671, 234, 981];
+      text = '按附属物统计';
+      option = this.getClassifyoption(text,dataName,dataValue);
+      let pointMaterial = echarts.init(this.$refs.pointMaterialStatistic);
+      pointMaterial.setOption(option);
+      dataName = ['白色硅胶管', '灰色软管', '黑色塑料管', '灰色塑料管']
+      dataValue = [890, 932, 1231, 2341];
+      text = '按类型统计';
+      option = this.getClassifyoption(text,dataName,dataValue);
+      let pointType = echarts.init(this.$refs.pointTypeStatistic);
+      pointType.setOption(option)
+
+      elementResizeDetectorMaker().listenTo(this.$refs.pointDiamStatistic, () => {
+        this.$nextTick(pointDiam.resize)
+      });
+
+      elementResizeDetectorMaker().listenTo(this.$refs.pointMaterialStatistic, () => {
+        this.$nextTick(pointMaterial.resize)
+      });
+
+      elementResizeDetectorMaker().listenTo(this.$refs.pointTypeStatistic, () => {
+        this.$nextTick(pointType.resize)
+      });
 
-      echarts.init(this.$refs.pointDiamStatistic).setOption(option);
-      echarts.init(this.$refs.pointMaterialStatistic).setOption(option);
-      echarts.init(this.$refs.pointTypeStatistic).setOption(option);
     }
   }
 }