修改管线统计功能

src/views/currentSystem/authorityManagement/dictManagement/index.vue

@@ -178,6 +178,7 @@ export default {
       dialogTitle:"新增字典",
       dialogVisible:false,
       formData:{
+        key:'',
         ulevel:1,
         creater:'admin',
         createTime:'',
@@ -243,6 +244,7 @@ export default {
       if(!this.formData.key || !this.formData.codeRemark){
         return null;
       }
+      
       if(this.dialogTitle == "新增字典"){
         addDictionary(this.formData).then(res => {
           if (res.code == 1) {
@@ -316,6 +318,7 @@ export default {
     },
 
     handleAdded(){
+      this.formData.key = '';
       this.formData.createTime = this.getTime();
       this.formData.creater='admin';
       this.formData.discription = '';

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

@@ -127,19 +127,31 @@
       color: #fff;
       font-size: 20px;
       border-radius: 50%;
-      font-size: bor;
       margin: 5px;
     }
   }
   input {
     height: 30px !important;
   }
+  .optBtn {
+    .btnQuery {
+      height: 2rem;
+      line-height: 2rem;
+      width: 3.4rem;
+      text-align: center;
+      background: #2d74e7;
+      color: #fff;
+      border-radius: 0.14rem;
+      margin-right: 0.5rem;
+      float: right;
+    }
+  }
 }
 
 /deep/.col-statistics {
-  padding: 0 2px;
+  padding: 0 0.2rem;
   input {
-    height: 30px !important;
+    height: 2rem !important;
   }
   .el-input {
     .el-input__suffix {

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

@@ -7,6 +7,7 @@
                :statisticCondition='staCondition'
                :returnFunction='returnFunction'
                :statisticType='statisticType'
+               :miniMap="miniMap"
               ></MiniMap>
               <div class="queryTools">
                 <el-popover 
@@ -15,7 +16,7 @@
                   trigger="click">
                   <div class="selectQueryType">
                     <el-radio v-model="selectType" label="1" style="margin:4px 0;width:100%;">全部</el-radio>
-                    <el-radio v-model="selectType" label="2" style="margin:4px 0;width:100%;">地图范围</el-radio>
+                    <!-- <el-radio v-model="selectType" label="2" style="margin:4px 0;width:100%;">地图范围</el-radio> -->
                     <el-radio v-model="selectType" label="3" style="margin:4px 0;width:100%;">地图联动</el-radio>
                     <el-radio v-model="selectType" label="4" style="margin:4px 0;width:100%;">选择范围</el-radio>
                     <el-radio v-model="selectType" label="5" style="margin:4px 0;width:100%;">绘制范围</el-radio>
@@ -23,7 +24,7 @@
                   <el-button slot="reference">统计范围选择</el-button>
                 </el-popover>
 
-                <el-popover 
+                <!-- <el-popover 
                   class="popover-select"
                   placement="bottom"
                   width="540"
@@ -52,20 +53,30 @@
                         <div 
                           class="add" 
                           style="width: 26px;height: 26px;text-align: center;line-height: 26px;float: left;background: blue;
-                          color: #fff;font-size: 20px;border-radius: 50%;font-size: bor;margin: 2px;cursor: pointer;"
+                          color: #fff;font-size: 20px;border-radius: 50%;margin: 2px;cursor: pointer;"
                           @click="addCondition(index)"
                         >＋</div>
                         <div 
                         class="delete"
                         style="width: 26px;height: 26px;text-align: center;line-height: 26px;float: left;background: red;
-                          color: #fff;font-size: 20px;border-radius: 50%;font-size: bor;margin: 2px;cursor: pointer;"
+                          color: #fff;font-size: 20px;border-radius: 50%;margin: 2px;cursor: pointer;"
                           @click="delCondition(index)"
                         >×</div>
                       </el-col>
-                     </el-row>
+                    </el-row>
+                    <el-row>
+                      <el-col :span="24" class="optBtn">
+                        <div class="btnQuery" 
+                          @click="conditionQuery" 
+                          style="height: 2rem;line-height: 2rem;width: 3.4rem;text-align: center;
+                            background: #2d74e7;color: #fff;border-radius: 0.14rem;
+                            margin-right: 0.5rem;float: right;cursor: pointer;">查询
+                        </div>
+                      </el-col>
+                    </el-row>
                   </div>
                   <el-button slot="reference">统计条件</el-button>
-                </el-popover>
+                </el-popover> -->
               </div>
            </div>
            <div class="bottomContainer">
@@ -106,15 +117,15 @@
                               </el-option>
                             </el-select>
                             <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 class="diamStatistic echartSta" ref="lineDiamStatistic"></div>
                             </div>
                           </div>
                         </el-tab-pane>
                         <el-tab-pane class="pane-statistic" name='point' label="点图层">
                           <div class="pointLayerSta statistic">
-                            <el-select v-model="pipeLineType" class="layer-select" placeholder="请选择">
+                            <el-select v-model="pipePointType" class="layer-select" placeholder="请选择">
                               <el-option v-for="item in pipePointTypes"
                               :key="item.value"
                               :label="item.label"

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

@@ -2,7 +2,8 @@
 import MiniMap from '../../../../MapView/miniMap/index';
 import { GeoJSON } from "ol/format";
 import Feature from 'ol/Feature';
-import { Point, LineString, Polygon}from 'ol/geom';
+import { Point, LineString, Polygon } from 'ol/geom';
+import { getLength, getDistance } from 'ol/sphere';
 import elementResizeDetectorMaker from "element-resize-detector"
 
 import echarts from 'echarts'
@@ -12,6 +13,7 @@ export default {
   },
   data() {
     return {
+      miniMap:null,
       datasetNames: [], //查询数据集
       pipeLineTypes: [],
       pipePointTypes:[],
@@ -21,8 +23,9 @@ export default {
         { value: "4", label: '电力管线' },
         { value: "5", label: '通信管线' },
         { value: "6", label: '综合管线' }],
-      pipeLineType: "请选择",
-      selectType: '1',  //选择绘制类型
+      pipeLineType: "",
+      pipePointType: "",
+      selectType: '1',  //选择绘制类型(统计范围类型)
       staCondition: [],
       optionFields:[{value: 'buildingNo',label: '楼盘编号'},
         {value: 'buildingNum',label: '幢号'},
@@ -42,30 +45,38 @@ export default {
         { value: 'or', label: '或者'}
       ],
       statisticData: [],
-      activeName:'line'
+      activeName: 'line',
+      material:[],   //材质
+      adjunct: [],   //附属物
+      buryType: [],  //埋设方式
+      diameter: [],  //管径
+      subType:[]  //特征
     }
   },
   created() {
-    console.log('创建管线统计分析');
+    let { material, adjunct, buryType, diameter, subType } = this.$store.state.permission.sysDics;
+    this.material = material; //材质
+    this.adjunct = adjunct; //附属物
+    this.buryType = buryType; //埋设方式
+    this.diameter = diameter; //管径
+    this.subType = subType; //特征
   },
   watch: {
     staCondition(newValue, oldValue) {
       console.log("改变", newValue, oldValue);
       this.statisticCondition = newValue;
     },
+    pipeLineType(newValue, oldValue) {
+      this.lineClassifyStatistic();
+    },
+
+    pipePointType(newValue, oldValue) { 
+      this.pointClassifyStatistic();
+    },
   },
   mounted() {
     this.statisticMode = '';
     this.staCondition.push({ id: 0, fieldName: '', symbol: '', value: '', connect: '' });
-    //获取数据
-
-    //管线数据
-
-    this.$nextTick(() => {
-      //this.loadOverviewEchart();
-      this.classifyStatistic();
-      this.pointClassifyStatistic();
-    });
   },
 
   destroyed() { 
@@ -115,6 +126,8 @@ export default {
           item.type == 'point' ? this.pipePointTypes.push({ value: index + 1 + '', label: item.label }) :
           '';
       });
+      if (this.pipeLineTypes.length > 0) this.pipeLineType = this.pipeLineTypes[0].value; //默认选择第一条
+      if (this.pipePointTypes.length > 0) this.pipePointType = this.pipePointTypes[0].value;
     },
 
     /**
@@ -137,9 +150,18 @@ export default {
       if (data.statisticCount <= data.times) {
         console.log('返回数据', this.statisticData);
         this.getOverviewData(this.statisticData);
+        this.lineClassifyStatistic();
+        this.pointClassifyStatistic();
       }
     },
     
+    /**
+     * 条件查询
+    */
+    conditionQuery() { 
+      console.log('条件查询');
+    },
+    
     /**
      * 获取总览统计数据
      */
@@ -231,31 +253,151 @@ export default {
       }  
     },
 
-    //分类统计
-    classifyStatistic() {
-      let dataName = []
+    /**
+     * 分类统计
+    */
+    lineClassifyStatistic() {
+      //线类型
+      let lineType = this.pipeLineTypes.find(pipeLineType => pipeLineType.value == this.pipeLineType);
+      if (this.statisticData.length > 0 && lineType) { 
+        let staData = this.statisticData.find(statisticData => statisticData.dataSetInfo.label == lineType.label);
+        this.statisticDiameter(staData);
+        this.statisticMaterial(staData);
+        this.statisticCharact(staData);
+      }
+    },
+    
+    /**
+     * 按照管径统计
+    */
+    statisticDiameter(data) {
+      let text = '按管径统计';
+      if (this.diameter.length < 1) { 
+        this.diameter = [{ value: "200-400" }, { value: "400-600" }, { value: "600-800" }, { value: "800-1000" }];
+      }
+      let dataName = ['200-400', '400-600', '600-800','800-1000']
+      let dataValue = [820, 932, 901,1200];
+      let option = this.getClassifyoption(text,dataName,dataValue);
+      echarts.init(this.$refs.lineTypeStatistic).setOption(option);
+    },
+
+    /**
+     * 按照材料统计
+    */
+    statisticMaterial(datas) {
+      let text = '按材料统计';
+      let dataName = [];
       let dataValue = [];
-      let text = '';
-      let option = null;
-      setTimeout(() => {
-        dataName = ['200-400', '400-600', '600-800','800-1000']
-        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);
+      if (this.material.length > 0) { 
+        this.material.forEach(item => {
+          dataName.push(item.value);
+        });
+        dataName.forEach(item => {
+          if (datas) {
+            if (datas.result.featureCount == 0) {
+              dataValue.push(0);
+            }
+            else {
+              let fea = datas.result.features.features.filter(
+                feature => { 
+                  if (item != '其它')
+                    return feature.properties.hasOwnProperty('MATERIAL') ? feature.properties.MATERIAL == item : false;
+                  else 
+                    return feature.properties.hasOwnProperty('MATERIAL') ? feature.properties.MATERIAL == '' : false;
+                }
+              )
+              if (fea && fea.length > 0) {
+                let length = this.getFeaturesLength(fea);
+                dataValue.push(length);
+              } else if (fea.length == 0) {
+                dataValue.push(0);
+              }
+            }
+          }
+          else { 
+            dataValue.push(0);
+          }
+        });  
+      }
+
+      //dataName = ['筋混凝土管', '石棉水泥管', '玻璃钢管', '塑料管', '水球墨铸铁管', '钢管']
+      //dataValue = [1234, 932, 456, 671, 234, 981];
+      let option = this.getClassifyoption(text,dataName,dataValue);
+      echarts.init(this.$refs.lineMaterialStatistic).setOption(option);
+    },
+
+    /**
+     * 按照埋设方式统计
+    */
+     statisticCharact(datas) {
+      //this.buryType
+      let text = '按埋设方式统计';
+      let dataName = [];
+      let dataValue = [];
+      if (this.buryType.length > 0) { 
+        this.buryType.forEach(item => {
+          dataName.push(item.value);
+        });
+        dataName.forEach(item => {
+          if (datas) {
+            if (datas.result.featureCount == 0) {
+              dataValue.push(0);
+            }
+            else {
+              let fea = datas.result.features.features.filter(
+                feature =>
+                { 
+                  if (item != '其它')
+                    return feature.properties.hasOwnProperty('BURYTYPE') ? feature.properties.BURYTYPE == item : false;
+                  else 
+                    return feature.properties.hasOwnProperty('BURYTYPE') ? feature.properties.BURYTYPE == '' : false;
+                }
+              )
+              if (fea && fea.length > 0) {
+                let length = this.getFeaturesLength(fea);
+                dataValue.push(length);
+              } else if (fea.length == 0) {
+                dataValue.push(0);
+              }
+            }
+          }
+          else { 
+            dataValue.push(0);
+          }
+        });  
+      }
+      //dataName = ['白色硅胶管', '灰色软管', '黑色塑料管', '灰色塑料管']
+      //dataValue = [890, 932, 1231, 2341];
+      let option = this.getClassifyoption(text,dataName,dataValue);
+      echarts.init(this.$refs.lineDiamStatistic).setOption(option);
+    },
+    
+    /**
+     * 计算长度
+    */
+    getFeaturesLength(features) {
+      //let proj = this.miniMap.getView().getProjection();
+      let length = 0;
+      if (features) {
+        if (features.length == 0) return 0;
+        features.forEach(fea => { 
+          //let len = getLength(new GeoJSON().readGeometry(fea.geometry), { "projection": proj, "radius": 6378137 }).toFixed(2);
+          let feature = new Feature({
+            geometry: new GeoJSON().readGeometry(fea.geometry)
+          });
+          if (feature.getGeometry() instanceof LineString) { 
+            length = length + feature.getGeometry().getLength();
+          }
+        })
+      }
+      else { 
+        return 0;
+      }
+      return (length * 1000).toFixed(2);
     },
     
+
+    
     /**
      * 总览显示-管点统计
      * @dataName 数组，统计类型名称
@@ -271,6 +413,9 @@ export default {
             fontSize:'2.8rem'
           }
         },
+        tooltip: {
+          trigger: 'axis'
+        },
         xAxis: {
           type: 'category',
           data: dataName //['排水管线', '供水管线', '燃气管线', '电力管线', '通信管线', '综合管线']
@@ -322,15 +467,17 @@ export default {
             fontSize: '3.2rem',
           }
         },
-        
+        tooltip: {
+          trigger: 'axis'
+        },
         xAxis: {
           type: 'category',
           //boundaryGap: false,
           //坐标轴文字倾斜
-          axisLabel: {  
-            interval:0,  
-            rotate:40  
-          } ,
+          // axisLabel: {  
+          //   interval:0,  
+          //   rotate:40  
+          // } ,
           data: dataName
         },
         // 工具
@@ -370,44 +517,124 @@ export default {
       };
     },
 
+
+
     //分类统计
     pointClassifyStatistic() {
-      let dataName = []
+      let pointType = this.pipePointTypes.find(pipeLineType => pipeLineType.value == this.pipePointType);
+      if (this.statisticData.length > 0 && pointType) { 
+        let staData = this.statisticData.find(statisticData => statisticData.dataSetInfo.label == pointType.label);
+        this.pointDiamStatistic(staData);
+        this.pointMaterialStatistic(staData);
+        this.pointTypeStatistic();
+      }
+    },
+
+    /**
+     * 管点特征统计
+    */
+    pointDiamStatistic(datas) { 
+      let dataName = [];
       let dataValue = [];
-      let text = '';
-      let option = null;
-      dataName = ['弯管', '直管', '三通管']
-      dataValue = [820, 932, 901];
-      text = '按特征统计';
-      option = this.getClassifyoption(text,dataName,dataValue);
+      let text = '按特征统计';
+      if (this.subType.length > 0) { 
+        this.subType.forEach(item => {
+          dataName.push(item.value);
+        });
+        dataName.forEach(item => {
+          if (datas) {
+            if (datas.result.featureCount == 0) {
+              dataValue.push(0);
+            }
+            else {
+              let fea = datas.result.features.features.filter(
+                feature =>
+                { 
+                  return feature.properties.hasOwnProperty('SUBTYPE') ? feature.properties.SUBTYPE == item : false;
+                }
+              )
+              if (fea) 
+                dataValue.push(fea.length)
+              else
+                dataValue.push(0);
+            }
+          }
+          else { 
+            dataValue.push(0);
+          }
+        });  
+      }
+      //dataName = ['弯管', '直管', '三通管']
+      //dataValue = [820, 932, 901];
+      let 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)
       });
+    },
+
+    /**
+     * 附属物统计
+    */
+    pointMaterialStatistic(datas) {
+      let dataName = [];
+      let dataValue = [];
+      let text = '按附属物统计';
+      if (this.adjunct.length > 0) { 
+        this.adjunct.forEach(item => {
+          dataName.push(item.value);
+        });
+        dataName.forEach(item => {
+          if (datas) {
+            if (datas.result.featureCount == 0) {
+              dataValue.push(0);
+            }
+            else {
+              let fea = datas.result.features.features.filter(
+                feature =>
+                { 
+                  return feature.properties.hasOwnProperty('ADJUNCT') ? feature.properties.ADJUNCT == item : false;
+                }
+              )
+              if (fea) 
+                dataValue.push(fea.length)
+              else
+                dataValue.push(0);
+            }
+          }
+          else { 
+            dataValue.push(0);
+          }
+        });  
+      }
+      //dataName = ['筋混凝土管', '石棉水泥管', '玻璃钢管', '塑料管', '水球墨铸铁管', '钢管']
+      //dataValue = [1234, 932, 456, 671, 234, 981];  
+      let option = this.getClassifyoption(text,dataName,dataValue);
+      let pointMaterial = echarts.init(this.$refs.pointMaterialStatistic);
+      pointMaterial.setOption(option);
 
       elementResizeDetectorMaker().listenTo(this.$refs.pointMaterialStatistic, () => {
         this.$nextTick(pointMaterial.resize)
       });
-
+    },
+    
+    /***/
+    pointTypeStatistic(datas) {
+      let dataName = [];
+      let dataValue = [];
+      let text = '';
+      let option = null;
+      dataName = ['白色硅胶管', '灰色软管', '黑色塑料管', '灰色塑料管']
+      dataValue = [890, 932, 1231, 2341];
+      text = '按类型统计';
+      option = this.getClassifyoption(text,dataName,dataValue);
+      let ePointType = echarts.init(this.$refs.pointTypeStatistic);
+      ePointType.setOption(option)
       elementResizeDetectorMaker().listenTo(this.$refs.pointTypeStatistic, () => {
-        this.$nextTick(pointType.resize)
+        this.$nextTick(ePointType.resize)
       });
-
-    }
+    },
     
   }
 }