修改DMA分区

src/views/components/olMap/index.vue

@@ -35,17 +35,13 @@ import { fromLonLat, toLonLat } from "ol/proj";
 import Feature from "ol/Feature";
 import { Point } from "ol/geom";
 import { createRegularPolygon, createBox } from "ol/interaction/Draw";
-
 // 地图配置
 import { mapConfig } from "@/views/components/olMap/mapConfig";
 // 插件
 import elementResizeDetectorMaker from "element-resize-detector";
-
 import measureTool from "@/views/components/measureTool/index.vue";
 import layerControl from "@/views/components/layerControl/widget.vue";
-
 import monitorPopup from "@/views/shiYuan/monitoringCenter/monitorPopup/index.vue";
-
 // api
 import { queryScadaData } from "@/api/shiYuan/scada";
 export default {
@@ -243,17 +239,12 @@ export default {
           this.$refs.mapPopup.close();
           return;
         }
-        console.log("选择", evt.selected[0]);
         let selectFeature = evt.selected[0];
-        let coordinate = selectFeature.getGeometry().getCoordinates();
+        //let coordinate = selectFeature.getGeometry().getCoordinates();
         this.$refs.mapPopup.setPosition(selectFeature);
-        // console.log('组件',monitorPopup,typeof monitorPopup);
       });
     },
-    /**
-     * 增加选择图层
-     */
-    selectAddLayer(layer) {},
+
     /**
      * 移除选择图层
      */
@@ -261,9 +252,9 @@ export default {
     /**
      * 获取监测数据最新时间数据，并判断是否过期
      */
-    getLatestData(dataList) {
+    getLatestData(dataList) { //sortNumber
       let newList = dataList.sort((a, b) => {
-        return Date.parse(b.scada ? b.scada.scadaTime : b.createTime) - Date.parse(a.scada ? a.scada.scadaTime : a.createTime);
+        return parseInt(a.sortNumber) - parseInt(b.sortNumber);
       });
       let latest = newList.length > 0 ? newList[0] : null;
       let timePoor = this.$moment().diff(
@@ -285,11 +276,10 @@ export default {
           let features = [];
           list.forEach((item) => {
             let latestData = this.getLatestData(item.allocations);
-            
             let feature = new Feature({
               geometry: new Point([item.longitude, item.latitude]),
             });
-            let text = `${latestData.data.scada ? (latestData.data.scada.value || "--") : "--"} ${
+            let text = `${latestData.data.scada ? ( parseFloat(latestData.data.scada.value).toFixed(2) || "--") : "--"} ${
               latestData.data.unit
             }`;
             feature.setProperties(item);

src/views/shiYuan/common/MonitorCurve/index.vue

@@ -1,14 +1,31 @@
 <template>
   <div>
     <!-- 通用组件：历史曲线 -->
-    <el-dialog v-dialogDrag title="历史监测信息" :visible.sync="dialogVisible" :modal="false" :append-to-body="true" width="1200px">
+    <el-dialog
+      v-dialogDrag
+      title="历史监测信息"
+      :visible.sync="dialogVisible"
+      :modal="false"
+      :append-to-body="true"
+      width="1200px"
+    >
       <div class="top">
         <el-form ref="form" :model="form" label-width="auto" size="small">
           <el-row :gutter="24">
             <el-col :span="6">
               <el-form-item label="监测站点">
-                <el-select v-model="form.siteId" filterable placeholder="选择站点" style="width:100%">
-                  <el-option v-for="(item,index) in siteOption" :key="index" :label="item.name" :value="item.id">
+                <el-select
+                  v-model="form.siteId"
+                  filterable
+                  placeholder="选择站点"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="(item, index) in siteOption"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -16,40 +33,89 @@
 
             <el-col :span="6">
               <el-form-item label="数据日期范围">
-                <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy/MM/dd" style="width:250px" :clearable="true">
+                <el-date-picker
+                  v-model="form.date"
+                  type="daterange"
+                  align="right"
+                  unlink-panels
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :picker-options="pickerOptions"
+                  value-format="yyyy-MM-dd"
+                  format="yyyy/MM/dd"
+                  style="width: 250px"
+                  :clearable="true"
+                >
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="指标" label-width="120px">
-                <el-radio-group v-model="form.displayCode" size="small" @change="indicatorChange">
-                  <el-radio-button v-for="(item,index) in indicators" :key="index" :label="item.code">{{item.displayName}}</el-radio-button>
+                <el-radio-group
+                  v-model="form.displayCode"
+                  size="small"
+                  @change="indicatorChange"
+                >
+                  <el-radio-button
+                    v-for="(item, index) in indicators"
+                    :key="index"
+                    :label="item.code"
+                    >{{ item.displayName }}</el-radio-button
+                  >
                 </el-radio-group>
               </el-form-item>
             </el-col>
 
-            <el-col :span="7" style="position: relative;">
+            <el-col :span="7" style="position: relative">
               <el-checkbox v-model="checked" class="db-check-box"></el-checkbox>
               <el-form-item label="站点对比" label-width="100px">
-                <el-select v-model="form.siteId2" :disabled="!checked" filterable multiple collapse-tags placeholder="选择站点" style="width:100%">
-                  <el-option v-for="(item,index) in siteOption" :key="index" :label="item.name" :value="item.id">
+                <el-select
+                  v-model="form.siteId2"
+                  :disabled="!checked"
+                  filterable
+                  multiple
+                  collapse-tags
+                  placeholder="选择站点"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="(item, index) in siteOption"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="同比开始时间">
-                <el-date-picker v-model="form.date2" :disabled="!checked" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+                <el-date-picker
+                  v-model="form.date2"
+                  :disabled="!checked"
+                  type="date"
+                  placeholder="选择日期"
+                  style="width: 100%"
+                ></el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="2">
               <el-form-item label-width="0">
-                <el-button type="primary" size="small" style="width:85px" @click="query()">查询</el-button>
+                <el-button
+                  type="primary"
+                  size="small"
+                  style="width: 85px"
+                  @click="query()"
+                  >查询</el-button
+                >
               </el-form-item>
             </el-col>
             <el-col :span="2">
               <el-form-item label-width="0">
-                <el-button type="primary" size="small" style="width:85px">导出</el-button>
+                <el-button type="primary" size="small" style="width: 85px"
+                  >导出</el-button
+                >
               </el-form-item>
             </el-col>
           </el-row>
@@ -63,23 +129,45 @@
         </el-radio-group>
       </div>
       <!-- 标签页 -->
-      <el-tabs v-model="activeName" style="height:550px">
+      <el-tabs v-model="activeName" style="height: 550px">
         <el-tab-pane label="图表" name="first">
           <div class="chart-div">
             <div class="chart-title" v-cloak>反向流量</div>
             <div ref="chart" class="chartBox"></div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="列表" name="second" style="height:100%">
-          <el-table :data="tableData" stripe height="100%" style="width:100%" :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
+        <el-tab-pane label="列表" name="second" style="height: 100%">
+          <el-table
+            :data="tableData"
+            stripe
+            height="100%"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#e0eafb',
+              color: 'rgb(50,59,65)',
+              height: '39px',
+              textAlign: 'center',
+              fontWeight: '600',
+            }"
+          >
             <template slot="empty">
               <img src="@/assets/icon/null.png" alt="" />
             </template>
             <el-table-column prop="date" label="序号" width="50" align="center">
-              <template slot-scope="scope">{{scope.$index+1}}</template>
+              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
             </el-table-column>
-            <el-table-column prop="collectionDates" label="采集时间" align="center"></el-table-column>
-            <el-table-column v-for="(item,index) in targetData" :key="index" :prop="item.targetCode+'s'" :label="item.targetName" align="center">
+            <el-table-column
+              prop="collectionDates"
+              label="采集时间"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              v-for="(item, index) in targetData"
+              :key="index"
+              :prop="item.targetCode + 's'"
+              :label="item.targetName"
+              align="center"
+            >
             </el-table-column>
           </el-table>
         </el-tab-pane>
@@ -107,7 +195,7 @@ export default {
               const start = new Date();
               const end = new Date();
               picker.$emit("pick", [start, end]);
-            }
+            },
           },
           {
             text: "昨天",
@@ -117,7 +205,7 @@ export default {
               start.setTime(start.getTime() - 3600 * 1000 * 24);
               end.setTime(end.getTime() - 3600 * 1000 * 24);
               picker.$emit("pick", [start, end]);
-            }
+            },
           },
           {
             text: "最近一周",
@@ -126,7 +214,7 @@ export default {
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
               picker.$emit("pick", [start, end]);
-            }
+            },
           },
           {
             text: "最近半个月",
@@ -135,7 +223,7 @@ export default {
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
               picker.$emit("pick", [start, end]);
-            }
+            },
           },
           {
             text: "最近一个月",
@@ -144,9 +232,9 @@ export default {
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
               picker.$emit("pick", [start, end]);
-            }
-          }
-        ]
+            },
+          },
+        ],
       },
       indicators: [],
       areaColor: [
@@ -157,7 +245,7 @@ export default {
         ["rgba(255, 0, 135)", "rgba(135, 0, 157)"],
         ["rgba(255, 191, 0)", "rgba(224, 62, 76)"],
         ["rgba(0, 221, 255)", "rgba(77, 119, 255)"],
-        ["rgba(0, 221, 255)", "rgba(77, 119, 255)"]
+        ["rgba(0, 221, 255)", "rgba(77, 119, 255)"],
       ], // 曲线图表颜色
       dialogVisible: false,
       siteOption: [],
@@ -165,7 +253,7 @@ export default {
         date: [
           //   this.$moment().format("YYYY-MM-DD 00:00:00"),
           //   this.$moment().format("YYYY-MM-DD 23:59:59")
-        ]
+        ],
       },
       checked: false,
       radio: 1,
@@ -174,7 +262,7 @@ export default {
       targetData: [], // 图表类型
       tableData: [], // 列表数据
       dialogDragWidth: "520px",
-      timeType: 1
+      timeType: 1,
     };
   },
   mounted() {},
@@ -184,7 +272,7 @@ export default {
       // else
       //   this.form['date'] = [this.$moment().format('YYYY-MM-DD 00:00:00'), this.$moment().format('YYYY-MM-DD 23:59:59')]
       this.query();
-    }
+    },
   },
   methods: {
     show(siteId = null) {
@@ -199,23 +287,25 @@ export default {
      * 获取站点
      */
     getSites(siteId) {
-      console.log("siteId", siteId);
-      queryScadaData().then(res => {
+      queryScadaData().then((res) => {
         if (res.code && res.code == 1) {
           this.siteOption = res.result;
           console.log("th", this.siteOption);
           if (this.siteOption.length > 0) {
             this.$set(this.form, "siteId", siteId);
-            let siteSelect = this.siteOption.find(item => {
+            let siteSelect = this.siteOption.find((item) => {
               return item.id == siteId;
             });
-            this.indicators = siteSelect.allocations.map(item => {
+
+            const allocations = siteSelect.allocations.sort((a, b) => {
+              return parseInt(a.sortNumber) - parseInt(b.sortNumber);
+            });
+            this.indicators = allocations.map((item) => {
               return {
                 displayName: item.displayName,
-                code: item.scada.code
+                code: item.scada.code,
               };
             });
-            console.log("---ooo>", this.indicators);
             this.$set(this.form, "displayCode", this.indicators[0].code);
             this.getCurve();
           }
@@ -236,28 +326,24 @@ export default {
         code: this.form.displayCode,
         deviceIds: this.form.siteId,
         size: 10000,
-        current: 1
+        current: 1,
       };
-      getScadaInfo(params).then(res => {
+      getScadaInfo(params).then((res) => {
         console.log("曲线数据：：", res);
         if (res.code == 1) {
           let mainSiteData = res.result.records;
           let newList = mainSiteData.sort((a, b) => {
             return Date.parse(b.scadaTime) - Date.parse(a.scadaTime);
           });
-          let yData = newList.map(item => {
+          let yData = newList.map((item) => {
             return Number(item.value);
           });
-          let xData = newList.map(item => {
+          let xData = newList.map((item) => {
             return item.scadaTime;
           });
           if (this.checked) {
-            let params2 = {
-                
-            }
-            getScadaInfo(params2).then(res=>{
-
-            })
+            let params2 = {};
+            getScadaInfo(params2).then((res) => {});
           } else {
             let series = this.getSeries([yData]);
             this.loadChart(xData, series);
@@ -273,7 +359,7 @@ export default {
       let params = {
         siteId: this.form.siteId,
         beginTime: timeInterval.startTime,
-        endTime: timeInterval.endTime
+        endTime: timeInterval.endTime,
       };
       if (this.form.siteId2 && this.form.siteId2.length > 0)
         params["comprasionSiteIds"] = this.form.siteId2.join(",");
@@ -320,11 +406,11 @@ export default {
           this.timeType = 7;
           this.form.date = [
             res.result.map.X1[0],
-            res.result.map.X1[res.result.map.X1.length - 1]
+            res.result.map.X1[res.result.map.X1.length - 1],
           ];
         }
         // 主站点
-        let mainData = res.result.list.find(item => {
+        let mainData = res.result.list.find((item) => {
           return item.type == "X1";
         });
         this.targetData = mainData.targetVos;
@@ -354,12 +440,12 @@ export default {
           const targetItem = targetVos[index2];
           let targetData = {
             list: listItem[targetItem.targetCode + "s"],
-            type: listItem.type
+            type: listItem.type,
           };
           if (!obj.hasOwnProperty(targetItem.targetCode)) {
             obj[targetItem.targetCode] = {
               target: targetItem,
-              data: [targetData]
+              data: [targetData],
             };
           } else {
             obj[targetItem.targetCode].data.push(targetData);
@@ -373,15 +459,15 @@ export default {
      */
     getHistoryCurve(params) {
       if (this.radio == 1) {
-        getCurve(params).then(res => {
+        getCurve(params).then((res) => {
           this.dealCurveData(params, res);
         });
       } else if (this.radio == 2) {
-        getHourCurve(params).then(res => {
+        getHourCurve(params).then((res) => {
           this.dealCurveData(params, res);
         });
       } else if (this.radio == 3) {
-        getDayCurve(params).then(res => {
+        getDayCurve(params).then((res) => {
           this.dealCurveData(params, res);
         });
       }
@@ -449,7 +535,7 @@ export default {
       }
       return {
         startTime: startTime,
-        endTime: endTime
+        endTime: endTime,
       };
     },
     /**
@@ -461,23 +547,23 @@ export default {
     },
     getSeries(seriesList) {
       let list = [];
-      seriesList.forEach(item => {
+      seriesList.forEach((item) => {
         list.push({
           //   xAxisIndex: 0,
           type: "line",
           smooth: true,
           lineStyle: {
-            width: 2
+            width: 2,
           },
           showSymbol: false,
           label: {
             show: true,
-            position: "top"
+            position: "top",
           },
           emphasis: {
-            focus: "series"
+            focus: "series",
           },
-          data: item
+          data: item,
         });
       });
       return list;
@@ -494,16 +580,16 @@ export default {
           axisPointer: {
             type: "cross",
             label: {
-              backgroundColor: "#6a7985"
-            }
-          }
+              backgroundColor: "#6a7985",
+            },
+          },
         },
         grid: {
           top: "6%",
           left: "3%",
           right: "4%",
           bottom: "2%",
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           //   {
@@ -521,18 +607,18 @@ export default {
             boundaryGap: false,
             data: xAxisList,
             axisLabel: {
-              formatter: dateTime => {
+              formatter: (dateTime) => {
                 return this.formatAxisLabel(dateTime);
-              }
-            }
-          }
+              },
+            },
+          },
         ],
         yAxis: [
           {
-            type: "value"
-          }
+            type: "value",
+          },
         ],
-        series: seriesList
+        series: seriesList,
       };
       myChart.clear();
       option && myChart.setOption(option);
@@ -579,10 +665,10 @@ export default {
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
       return [
         this.$moment(start).format("YYYY-MM-DD 00:00:00"),
-        this.$moment(end).format("YYYY-MM-DD 23:59:59")
+        this.$moment(end).format("YYYY-MM-DD 23:59:59"),
       ];
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/shiYuan/monitoringCenter/monitorPopup/index.vue

@@ -1,16 +1,20 @@
 <template>
   <div ref="map_popup" class="custom-popup">
     <div class="title">
-      <h4>{{titleName||''}}</h4>
+      <h4>{{ titleName || "" }}</h4>
       <!-- <span class="title-info">夜间最小流量超标：<span style="color:#f40">3.62</span></span> -->
       <i class="popup-close el-icon-close" title="关闭" @click="close()"></i>
     </div>
     <div class="popup-body">
       <el-form ref="form" :model="form" label-width="auto">
         <el-row :gutter="24">
-          <el-col v-for="(value, key) in info" :key="key" :span="key=='更新时间'?18:8">
+          <el-col
+            v-for="(value, key) in info"
+            :key="key"
+            :span="key == '更新时间' ? 18 : 8"
+          >
             <el-form-item :label="key">
-              <span>{{value}}</span>
+              <span>{{ value }}</span>
             </el-form-item>
           </el-col>
         </el-row>
@@ -37,7 +41,7 @@ import { getScadaInfo } from "@/api/shiYuan/scada";
 export default {
   props: ["parent"],
   components: {
-    monitorCurve
+    monitorCurve,
   },
   data() {
     return {
@@ -45,9 +49,15 @@ export default {
       info: {},
       popup: null,
       form: {},
-      currentFeature: null
+      currentFeature: null,
+      yesterday:null,
+      today:null
     };
   },
+  created() {
+    this.getTime();
+  },
+
   mounted() {
     if (this.popup) this.parent.map.removeOverlay(this.popup);
     this.popup = new Overlay({
@@ -56,7 +66,7 @@ export default {
       autoPan: true,
       positioning: "bottom-center",
       stopEvent: true,
-      autoPanAnimation: { duration: 250 }
+      autoPanAnimation: { duration: 250 },
     });
     this.parent.map.addOverlay(this.popup);
   },
@@ -71,7 +81,7 @@ export default {
       this.popup.setPosition(coordinate);
       this.$nextTick(() => {
         this.showInfo(feature.getProperties());
-        this.getScadaInfo(feature.get("id"));
+        this.getScadaInfo(feature.values_);
         this.$forceUpdate();
       });
     },
@@ -87,7 +97,7 @@ export default {
      */
     showInfo(properties) {
       this.titleName = properties.name;
-      properties.allocations.forEach(item => {
+      properties.allocations.forEach((item) => {
         this.info[item.displayName] = item.scada?.value || "";
       });
       if (properties.status) this.info["通讯状态"] = properties.status;
@@ -112,32 +122,32 @@ export default {
       }
       const option = {
         tooltip: {
-          trigger: "axis"
+          trigger: "axis",
         },
         legend: {
           data: ["今日", "昨日", "夜间最小流量参考值"],
-          right: 10
+          right: 10,
         },
         grid: {
           left: "3%",
           right: "4%",
           bottom: "3%",
           top: "15%",
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: xData
+          data: xData,
         },
         yAxis: {
           type: "value",
           axisLine: {
-            show: false
+            show: false,
           },
           axisTick: {
-            show: false //刻度线
-          }
+            show: false, //刻度线
+          },
         },
         series: [
           {
@@ -153,10 +163,10 @@ export default {
                 color: "#0cbe69",
                 lineStyle: {
                   color: "#0cbe69",
-                  width: 3
-                }
-              }
-            }
+                  width: 3,
+                },
+              },
+            },
           },
           {
             name: "昨日",
@@ -171,11 +181,11 @@ export default {
                 color: "#f5bf58",
                 lineStyle: {
                   color: "#f5bf58",
-                  width: 3
-                }
-              }
-            }
-          }
+                  width: 3,
+                },
+              },
+            },
+          },
           //   {
           //     name: "夜间最小流量参考值",
           //     type: "line",
@@ -194,7 +204,7 @@ export default {
           //       }
           //     }
           //   }
-        ]
+        ],
       };
 
       option && myChart.setOption(option);
@@ -211,27 +221,36 @@ export default {
     /**
      * 获取监测曲线数据
      */
-    getScadaInfo(id) {
+    getScadaInfo(att) {
+      let allocations = att.hasOwnProperty('allocations') ? att.allocations : null
+      if(!allocations) return;
+      console.log('参数结果',allocations)
+      const newList = allocations.sort((a, b) => {
+        return parseInt(a.sortNumber) - parseInt(b.sortNumber);
+      })
+      const first = newList.length > 0 ? newList[0] : null
+      if(first == null) return;
       let params = {
-        deviceIds: id,
-        current: 1,
+        code: first.variableCode,
+        deviceIds: first.deviceId,
+        start: this.yesterday + " 00:00:00",
+        end: this.today + " 23:59:59",
         size: 10000,
-        statisticsType: 0,
-        start: "2022-05-09 00:00:00",
-        end: "2022-05-10 23:59:59"
+        current: 1
       };
-      getScadaInfo(params).then(res => {
+      getScadaInfo(params).then((res) => {
+        console.log('显示查询结果',res)
         let yesterdayData = [];
         let todayData = [];
         let sortData = this.getDataSort(res.result.records);
         for (let index = 0; index < 24; index++) {
-          let yhData = sortData.find(item => {
+          let yhData = sortData.find((item) => {
             const h = this.$moment(item.scadaTime).format("YYYY-MM-DD H");
             return (
               this.$moment(params.start).format("YYYY-MM-DD " + index + "") == h
             );
           });
-          let thData = sortData.find(item => {
+          let thData = sortData.find((item) => {
             const h = this.$moment(item.scadaTime).format("YYYY-MM-DD H");
             return (
               this.$moment(params.end).format("YYYY-MM-DD " + index + "") == h
@@ -245,8 +264,32 @@ export default {
         }
         this.loadChart(todayData, yesterdayData);
       });
-    }
-  }
+    },
+
+    getTime() {
+      const toDate = new Date();
+      toDate.setTime(toDate.getTime() - 24 * 3600 * 1000);
+      this.yesterday = 
+        toDate.getFullYear() +
+        "-" +
+        (toDate.getMonth() + 1 < 10
+          ? "0" + (toDate.getMonth() + 1)
+          : toDate.getMonth() + 1) +
+        "-" +
+        (toDate.getDate() < 10 ? "0" + toDate.getDate() : toDate.getDate());
+      
+      const nDate = new Date();
+      nDate.setTime(nDate.getTime() - 24 * 3600 * 1000);
+      this.today = 
+        nDate.getFullYear() +
+        "-" +
+        (nDate.getMonth() + 1 < 10
+          ? "0" + (nDate.getMonth() + 1)
+          : nDate.getMonth() + 1) +
+        "-" +
+        (nDate.getDate() < 10 ? "0" + nDate.getDate() : nDate.getDate());
+    },
+  },
 };
 </script>
 

src/views/shiYuan/monitoringCenter/partitionManage/components/dmaSettingDialog/index.vue

@@ -902,6 +902,7 @@ export default {
             if (++doneNum == 2) this.loading = false;
           };
           var doneNum = 0;
+          //查询分区详细信息
           request({
             url: "/gis/area/getDetailById?id=" + row.id,
             method: "get",

src/views/shiYuan/monitoringCenter/scadaMonitor/widget.vue

@@ -1,63 +1,189 @@
 <template>
-  <div class="scada-monitor" style="padding:0;">
+  <div class="scada-monitor" style="padding: 0">
     <div class="head-title">条件搜索</div>
     <div>
       <el-row>
-        <el-select v-model="deviceType" size="small" clearable placeholder="请选择设备类型" style="float: left;width:100%;">
-          <el-option v-for="item in deviceTypes" :key="item.ccode" :label="item.cname" :value="item.ccode" />
+        <el-select
+          v-model="deviceType"
+          size="small"
+          clearable
+          placeholder="请选择设备类型"
+          style="float: left; width: 100%"
+        >
+          <el-option
+            v-for="item in deviceTypes"
+            :key="item.ccode"
+            :label="item.cname"
+            :value="item.ccode"
+          />
         </el-select>
 
-        <el-input v-model="querySiteName" class="helpInput" style="float: left; width:calc(100% - 46px);margin: 6px 0;" clearable size="small" placeholder="请输入设备名称">
+        <el-input
+          v-model="querySiteName"
+          class="helpInput"
+          style="float: left; width: calc(100% - 46px); margin: 6px 0"
+          clearable
+          size="small"
+          placeholder="请输入设备名称"
+        >
           <template slot-scope="{ item }">
             <i class="el-icon-location" />
             <span class="name">{{ item.value }}</span>
           </template>
         </el-input>
-        <el-button style="float: left; height: 32px; margin-top: 6px; border-radius: 0px 4px 4px 0px;" type="primary" icon="el-icon-search" size="small" plain @click="querySite" />
+        <el-button
+          style="
+            float: left;
+            height: 32px;
+            margin-top: 6px;
+            border-radius: 0px 4px 4px 0px;
+          "
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          plain
+          @click="querySite"
+        />
       </el-row>
     </div>
-    <div class="head-title">监测列表</div>
-    <el-table :data="siteDataTable" v-loading="tableLoading" height="calc(100% - 140px)" :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600,color:'#333333'}" stripe style="width: 100%">
-        <el-table-column label="序号" align="center">
-          <template slot-scope="scope">
-            {{scope.$index+1}}
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="设备名称" align="center" show-overflow-tooltip />
-        <el-table-column fixed="right" label="操作" width="120" align="center">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" @click="goto(scope.row)">查看</el-button>
-            <el-button type="text" size="small">趋势图</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    <el-dialog :title="siteTitle" :visible.sync="siteVisible" width="1400px" top="calc(50vh - 350px)">
+    <div class="head-title">监测列表
+      <span>
+        <el-checkbox-group v-model="checked"  @change="change" style="display: inherit;">
+          <el-checkbox :key="1" :label="1" style="margin-right: 4px;">正常({{ statistic.normal }}个)</el-checkbox>
+          <el-checkbox :key="2" :label="2" style="margin-right: 4px;">报警({{ statistic.police }}个)</el-checkbox>
+          <el-checkbox :key="3" :label="3" style="margin-right: 4px;">离线({{ statistic.offLine }}个)</el-checkbox>
+        </el-checkbox-group>
+      </span>
+    </div>
+    <el-table
+      :data="siteDataTable"
+      v-loading="tableLoading"
+      height="calc(100% - 140px)"
+      :header-cell-style="{
+        backgroundColor: '#eaf1fd',
+        height: '39px',
+        textAlign: 'center',
+        fontWeight: 600,
+        color: '#333333',
+      }"
+      stripe
+      style="width: 100%"
+    >
+      <el-table-column label="序号" align="center">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备名称"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column fixed="right" label="操作" width="120" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="goto(scope.row, true)">
+            <img
+              v-if="scope.row.status == '0'"
+              src="./images/999999.png"
+              alt="查看"
+            />
+            <img
+              v-else-if="scope.row.status == '2'"
+              src="./images/F65252.png"
+              alt="查看"
+            />
+            <img v-else src="./images/2D74E7.png" alt="查看" />
+          </el-button>
+          <el-button type="text" size="small" @click="goto(scope.row, false)">
+            <img src="./images/line.png" alt="趋势图" />
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      :title="siteTitle"
+      :visible.sync="siteVisible"
+      width="1400px"
+      top="calc(50vh - 350px)"
+    >
       <el-row>
         <span class="title2">指标</span>
-        <el-select ref="siteSelect" v-model="siteType" style="display: inline-block; margin-left: 3px; margin-right: 5px; width: 150px" size="small" placeholder="请选择">
-          <el-option v-for="item in sites" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select
+          ref="siteSelect"
+          v-model="siteType"
+          style="
+            display: inline-block;
+            margin-left: 3px;
+            margin-right: 5px;
+            width: 150px;
+          "
+          size="small"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in sites"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
         <span class="title2">时间</span>
-        <el-date-picker v-model="timss" size="small" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
-        <el-button size="small" type="primary" @click="showResult">查询</el-button>
+        <el-date-picker
+          v-model="timss"
+          size="small"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        />
+        <el-button size="small" type="primary" @click="showResult"
+          >查询</el-button
+        >
         <el-checkbox v-model="dontShow">去除特殊值(-9999)</el-checkbox>
       </el-row>
-      <div v-loading="loading" style="width:100%;height: 500px;margin-top:8px;display:flex;">
-        <div style="width:25%;height: 100%;">
-          <el-table v-loading="tableLoading" :data="siteHistoryDataTable" border height="calc(100% - 43px)" style="width: 100%">
+      <div
+        v-loading="loading"
+        style="width: 100%; height: 500px; margin-top: 8px; display: flex"
+      >
+        <div style="width: 25%; height: 100%">
+          <el-table
+            v-loading="tableLoading"
+            :data="siteHistoryDataTable"
+            border
+            height="calc(100% - 43px)"
+            style="width: 100%"
+          >
             <el-table-column prop="scadaTime" label="时间" />
             <el-table-column prop="value" label="测量值" />
           </el-table>
           <el-row style="margin-top: 8px">
             <el-col :span="18">
-              <el-pagination ref="pagination2" small background layout="total, sizes, prev, next" :page-sizes="[10, 20, 50, 100, 1000]" :total="total2" @current-change="pagRefersh" @size-change="pagRefersh" />
+              <el-pagination
+                ref="pagination2"
+                small
+                background
+                layout="total, sizes, prev, next"
+                :page-sizes="[10, 20, 50, 100, 1000]"
+                :total="total2"
+                @current-change="pagRefersh"
+                @size-change="pagRefersh"
+              />
             </el-col>
             <el-col :span="6">
-              <span ref="pageLength2" style="font-size: 13px;" class="el-pagination__total">1/1 页</span>
+              <span
+                ref="pageLength2"
+                style="font-size: 13px"
+                class="el-pagination__total"
+                >1/1 页</span
+              >
             </el-col>
           </el-row>
         </div>
-        <div ref="chart" style="width:75%;height: 100%;"></div>
+        <div ref="chart" style="width: 75%; height: 100%"></div>
       </div>
     </el-dialog>
   </div>
@@ -69,10 +195,8 @@ import tfLegend from "@/views/zhpt/common/Legend";
 import TableItem from "@/components/Table";
 import request from "@/utils/request";
 import Echarts from "echarts";
-import { TF_craft } from "./createSiteCraft";
-import { craftConfig } from "./craftConfig";
 import { getSysCommonCode } from "@/api/dataCenter";
-import {queryScadaData} from '@/api/shiYuan/scada'
+import { queryScadaData } from "@/api/shiYuan/scada";
 export default {
   name: "ScadaMonitor",
   components: { TableItem, tfLegend, Echarts },
@@ -101,13 +225,19 @@ export default {
       dontShow: true,
       resData: [],
       deviceTypes: [],
-      deviceType: ""
+      deviceType: "",
+      checked: [1, 2, 3],
+      statistic:{
+        normal:0,
+        police:0,
+        offLine:0
+      }
     };
   },
   computed: {
     sidePanelOn() {
       return this.$store.state.map.P_editableTabsValue;
-    }
+    },
   },
   watch: {
     sidePanelOn(newTab, oldTab) {
@@ -133,41 +263,30 @@ export default {
         }
         if (this.timeOut) window.clearTimeout(this.timeOut);
       }
-    }
+    },
   },
   created() {
-    getSysCommonCode({ pCid: "53400" }).then(res => {
+    getSysCommonCode({ pCid: "53400" }).then((res) => {
       this.deviceTypes = res.result[0].codeList;
     });
-    // queryWaterWorks({}).then(res => {
-    //   if (res.code !== 1) {
-    //     this.$message.error('获取水厂信息出错!')
-    //     return
-    //   }
-    //   this.waterList = res.result.records
-    // })
   },
   mounted() {
-    // var view = (this.mapView = this.data.mapView);
-    // this.floatDiv = view.TF_floatPanel;
-    // this.divs = [];
-    // this.ids = [];
-    // this.siteIndex = {};
-    // view.map.add((this.layer = new view.TF_graphicsLayer()));
     this.querySite();
   },
   destroyed() {
     this.clearSiteDiv();
-    // var view = this.mapView;
-    // view.map.remove(this.layer);
   },
   methods: {
+    change(value){
+      let s = this.checked
+      debugger
+    },
     addWatch() {
       var view = this.mapView;
       var divs = this.divs;
       if (this.watch) return;
       var ceil = Math.ceil;
-      var change = e => {
+      var change = (e) => {
         var { xmin, xmax, ymin, ymax } = e;
         var center = e.center;
         var cx = center.x;
@@ -193,37 +312,33 @@ export default {
       change(view.extent);
     },
     querySite() {
-      // var pages = this.$refs.pagination;
-      // const data = { name: this.querySiteName };
       this.tableLoading = true;
-      // if (this.deviceType != "")
-        // Object.assign(data, { deviceType: this.deviceType });
-      queryScadaData().then(res => {
-        var sites = [];
-        // pages.internalCurrentPage = 1;
-        if (res.code == 1) {
-          res = res.result.filter(item => {
+      let param = {};
+      if (this.deviceType != "")
+        Object.assign(param, { deviceType: this.deviceType });
+      if (this.querySiteName != "")
+        Object.assign(param, { name: this.querySiteName });
+      queryScadaData(param).then((res) => {
+        if (res.code == 1 && res.result != null) {
+          res = res.result.filter((item) => {
             return item.allocations;
           });
-          // this.resData = res; // 保存所有站点数据,用于分页时调用
           this.siteDataTable = res; // 保存所有站点数据,用于分页时调用
-          // this.total = res.length;
-          // for (var i = 0, ii = res.length; i < ii; i++) {
-          //   var site = res[i];
-          //   sites.push({
-          //     id: site.id,
-          //     site: site.name,
-          //     x: site.longitude,
-          //     y: site.latitude,
-          //     isCraft: false
-          //   }); // site.iscraft == '1' })
-          // }
+          this.statisticStatus();
+        } else {
+          this.siteDataTable = [];
         }
-        // this.siteData = sites;
-        // this.listRefersh(res);
         this.tableLoading = false;
       });
     },
+
+    /**
+     * 统计状态数据
+     */
+    statisticStatus() {
+      //this.siteDataTable
+    },
+
     listRefersh(res) {
       this.clearSiteDiv();
       var pages = this.$refs.pagination;
@@ -256,7 +371,7 @@ export default {
         ymin: Infinity,
         xmax: -Infinity,
         ymax: -Infinity,
-        spatialReference: sp
+        spatialReference: sp,
       };
 
       for (var i = 0, ii = sites.length; i < ii; i++) {
@@ -282,8 +397,8 @@ export default {
               height: "40px",
               yoffset: "7px",
               xoffset: "6px",
-              type: "picture-marker"
-            }
+              type: "picture-marker",
+            },
           })
         );
         index[id] = { div, children: [] };
@@ -298,24 +413,17 @@ export default {
           view.center = {
             x: extent.xmin,
             y: extent.ymin,
-            spatialReference: sp
+            spatialReference: sp,
           };
         } else {
           view.extent = extent;
-          window.requestAnimationFrame(_ => view.zoom--);
+          window.requestAnimationFrame((_) => view.zoom--);
         }
       }
       layer.addMany(feas);
       this.addWatch();
-      window.requestAnimationFrame(_ => {
-        // request({ url: '/gis/scadaAbout/selectIndex?ids=' + ids.join(','), method: 'get' }).then(res => {
-        // if (res.code == 1) {
+      window.requestAnimationFrame((_) => {
         this.addAttribute(res);
-        // } else {
-        //   this.$message.error('获取测站指标失败！' + res.message)
-        //   console.log(res)
-        // }
-        // })
       });
     },
     clearSiteDiv() {
@@ -343,7 +451,7 @@ export default {
               var di = index[dr.id];
               var div = document.createElement("div");
               div.setAttribute("data", t);
-              div.onclick = function(e) {
+              div.onclick = function (e) {
                 this.getSiteHistroty(e);
               }.bind(this);
               div.innerHTML =
@@ -360,10 +468,10 @@ export default {
           }
         }
       }
-      window.requestAnimationFrame(_ => this.loadRealTimeSiteValue());
+      window.requestAnimationFrame((_) => this.loadRealTimeSiteValue());
 
       function compare(key) {
-        return function(value1, value2) {
+        return function (value1, value2) {
           var val1 = value1[key];
           var val2 = value2[key];
           return val1 - val2;
@@ -377,10 +485,10 @@ export default {
       request({
         url: "/tofly-scada/scada/app/data",
         method: "post",
-        data: data
-      }).then(res => {
+        data: data,
+      }).then((res) => {
         if (res.code == 1) {
-          res = res.result.filter(item => {
+          res = res.result.filter((item) => {
             return item.allocations;
           });
           setValue(res);
@@ -389,7 +497,7 @@ export default {
           console.log(res);
         }
       });
-      var setValue = res => {
+      var setValue = (res) => {
         var index = this.siteIndex;
         for (var item in res) {
           if (!index.hasOwnProperty(res[item].id)) continue;
@@ -410,23 +518,14 @@ export default {
           }
         }
         this.timeOut = window.setTimeout(
-          _ => this.loadRealTimeSiteValue(),
+          (_) => this.loadRealTimeSiteValue(),
           1000 * 60 * 1
         );
       };
     },
-    goto(row) {
-      if (row.x) {
-        var mapView = this.mapView;
-        mapView.center = {
-          x: row.x,
-          y: row.y,
-          spatialReference: mapView.spatialReference
-        };
-        mapView.zoom = 5;
-      } else {
-        this.$message("此测站无坐标信息");
-      }
+
+    goto(row, type) {
+      this.$emit("selectChange", row, type);
     },
     getSiteHistroty(e) {
       var div = e.currentTarget;
@@ -443,18 +542,18 @@ export default {
         [date1.getFullYear(), date1.getMonth() + 1, date1.getDate()].join("-") +
           " 00:00:00",
         [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-") +
-          " 00:00:00"
+          " 00:00:00",
       ];
       request({
         url: "/tofly-scada/scada/app/data",
         method: "post",
-        data: { deviceId: stid }
-      }).then(res => {
+        data: { deviceId: stid },
+      }).then((res) => {
         if (res.code == 1) {
           res = res.result[0];
           this.selectSite = res;
           var index = (this.selectZBXIndex = {});
-          this.sites = res.allocations.map(e => {
+          this.sites = res.allocations.map((e) => {
             index[e.variableCode] = [e.displayName, e.unit];
             return { value: e.variableCode, label: e.displayName };
           });
@@ -481,16 +580,10 @@ export default {
             this.timss[1] +
             "&size=" +
             10000,
-          // '&statisticsType=' + 0,
-          method: "get"
-        }).then(res => {
+          method: "get",
+        }).then((res) => {
           if (res.code == 1) {
             res = res.result.records;
-            // this.sites = res.map(e => {
-            //   index[e.id] = [e.itnm, e.unit]
-            //   return { value: e.id, label: e.itnm }
-            // })
-            // this.siteType = zbx || this.sites[0].value
             this.chart = Echarts.init(this.$refs.chart);
             idDone();
           } else {
@@ -505,6 +598,7 @@ export default {
         if (++done == 1) this.showResult();
       };
     },
+
     getAllData() {
       var stid = this.selectSite.id;
       var datt = this.selectZBXIndex[this.siteType];
@@ -521,8 +615,8 @@ export default {
           "&size=" +
           10000,
         // '&statisticsType=' + 1,
-        method: "get"
-      }).then(res => {
+        method: "get",
+      }).then((res) => {
         var chart = this.chart;
         chart.clear();
         if (res.code == 1) {
@@ -543,30 +637,17 @@ export default {
             var x = res[i].scadaTime.split(" ")[0];
             dataX.push(x);
             dataY.push(v);
-            // if (v < min) min = v
-            // if (v > max) max = v
-            // if (x < Xmin) Xmin = x
-            // if (x > Xmax) Xmax = x
           }
-          // if (ii <= 1) symbol = Xmin = Xmax = max = min = undefined
-          // else d = max - min, [max, min] = [max + d * 0.2, min - d * 0.2].map(e => parseFloat(e).toFixed(2))
           var [type, unit] = datt;
 
           chart.setOption({
             title: {
               text: type,
               left: "center",
-              subtext: times[0] + "至" + times[1]
+              subtext: times[0] + "至" + times[1],
             },
             color: "rgb(45, 116, 231)",
             grid: { left: "50px", right: "50px", bottom: "80px" },
-            // dataZoom: [{ minSpan: 1, type: 'slider', labelFormatter: (i) => {
-            //   var date = new Date(i)
-            //   var time = [date.getHours(), date.getMinutes()]
-            //   if (time[0] < 10) time[0] = '0' + time[0]
-            //   if (time[1] < 10) time[1] = '0' + time[1]
-            //   return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-') + '\n' + time.join(':')
-            // } }],
             toolbox: { feature: { saveAsImage: {} } },
             tooltip: {
               trigger: "axis",
@@ -581,7 +662,7 @@ export default {
                   " " +
                   unit
                 );
-              }
+              },
             },
             xAxis: [
               {
@@ -589,15 +670,15 @@ export default {
                 type: "category",
                 data: dataX,
                 axisTick: {
-                  show: false
+                  show: false,
                 },
                 axisLine: {
-                  show: false
-                }
-              }
+                  show: false,
+                },
+              },
             ],
             yAxis: [{ name: unit, type: "value" }],
-            series: [{ type: "line", symbol, smooth: true, data: dataY }]
+            series: [{ type: "line", symbol, smooth: true, data: dataY }],
           });
         } else {
           this.$message.error("获取指标历史失败！" + res.message);
@@ -606,6 +687,7 @@ export default {
         this.loading = false;
       });
     },
+
     showResult() {
       if (!this.timss) return this.$message.error("请选择时间范围");
       this.loading = true;
@@ -613,10 +695,11 @@ export default {
       this.getAllData();
       this.siteHistiryQuery = [
         this.selectZBXIndex[this.siteType][0],
-        this.timss
+        this.timss,
       ];
       this.pagRefersh();
     },
+
     pagRefersh() {
       this.tableLoading = true;
       var pages = this.$refs.pagination2;
@@ -635,8 +718,8 @@ export default {
           pages.internalCurrentPage +
           "&size=" +
           pages.internalPageSize,
-        method: "get"
-      }).then(res => {
+        method: "get",
+      }).then((res) => {
         if (res.code == 1) {
           res = res.result;
           this.siteHistoryDataTable = res.records;
@@ -653,30 +736,12 @@ export default {
         this.tableLoading = false;
       });
     },
-    watchCraft(row) {
-      var config = craftConfig[row.id];
-      if (config) {
-        this.craftVisible = true;
-        var image = new Image();
-        var modulesFiles = require.context("./images", true, /\.png$/);
-        image.src = modulesFiles("./" + config.craftImage);
-        image.onload = () => {
-          var craft = TF_craft({
-            div: this.$refs.craft,
-            image: image,
-            config: config.config,
-            id: row.id
-          });
-          this.craftRealTime(row.id, craft.index);
-          craft.divs.map(e => (e.onclick = this.getSiteHistroty));
-        };
-      } else this.$message.error("工艺图未配置");
-    },
+
     craftRealTime(id, index) {
       request({
         url: "/gis/customDisplay/getSiteInfos?stids=" + id,
-        method: "post"
-      }).then(res => {
+        method: "post",
+      }).then((res) => {
         if (res.code == 1 && (res = res.result[id])) {
           for (var item in res) {
             if (!index.hasOwnProperty(item)) continue;
@@ -693,12 +758,12 @@ export default {
     },
     craftClose() {
       if (this.craftTimeOut) window.clearTimeout(this.craftTimeOut);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
-.scada-monitor{
+.scada-monitor {
   height: 100%;
 }
 .head-title {

src/views/zhpt/index.vue

@@ -1,17 +1,43 @@
 <template>
-  <div id="viewDiv" v-loading="false" :element-loading-text="loadText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
-    <tf-dialog :show.sync="panels.tfDialog.Show" :hide.sync="panels.tfDialog.Hide" :set-size.sync="panels.tfDialog.setSize" />
+  <div
+    id="viewDiv"
+    v-loading="false"
+    :element-loading-text="loadText"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+  >
+    <tf-dialog
+      :show.sync="panels.tfDialog.Show"
+      :hide.sync="panels.tfDialog.Hide"
+      :set-size.sync="panels.tfDialog.setSize"
+    />
     <el-container style="height: 100%; width: 100%">
-      <el-container :style="{ height: 'calc(100% - ' + footer_height + ')', width: '100%' }">
+      <el-container
+        :style="{ height: 'calc(100% - ' + footer_height + ')', width: '100%' }"
+      >
         <el-main>
           <div id="mapView" class="mapView">
-            <ol-map ref="olMap" legend layerCcontrol measure OverviewMap mapSelect></ol-map>
+            <ol-map
+              ref="olMap"
+              legend
+              layerCcontrol
+              measure
+              OverviewMap
+              mapSelect
+            ></ol-map>
             <div class="online-monitor-btn">
               <el-dropdown placement="bottom" trigger="click">
-                <span class="el-dropdown-link">在线监测<i class="el-icon-arrow-down el-icon--right"></i></span>
+                <span class="el-dropdown-link"
+                  >在线监测<i class="el-icon-arrow-down el-icon--right"></i
+                ></span>
                 <el-dropdown-menu slot="dropdown">
-                  <div class="dropdown-container" style="width: 350px;height: 700px;padding:10px">
-                    <online-monitor></online-monitor>
+                  <div
+                    class="dropdown-container"
+                    style="width: 400px; height: 700px; padding: 10px"
+                  >
+                    <online-monitor
+                      @selectChange="selectChange"
+                    ></online-monitor>
                   </div>
                 </el-dropdown-menu>
               </el-dropdown>
@@ -19,19 +45,50 @@
           </div>
           <div v-show="labelShow" id="mapLabel">
             <span id="mapView_title">地图图例</span>
-            <span id="mapView_close" ref="legend_close" title="收缩" @click="legendClick">▼</span>
+            <span
+              id="mapView_close"
+              ref="legend_close"
+              title="收缩"
+              @click="legendClick"
+              >▼</span
+            >
             <div id="mapView_legend" ref="legend" style="height: 350px" />
           </div>
           <float-panels :panels="FloatPanels" :data="panels" />
           <div id="map-index-floatPanels" ref="floatPanels" />
         </el-main>
         <el-aside :style="{ width: side_width, height: '100%' }">
-          <side-panels :panels="Panels" :data="panels" :side-width.sync="side_width" :panel-visible.sync="sidepanel_visible" @handelClose="handelClose" />
+          <side-panels
+            :panels="Panels"
+            :data="panels"
+            :side-width.sync="side_width"
+            :panel-visible.sync="sidepanel_visible"
+            @handelClose="handelClose"
+          />
         </el-aside>
       </el-container>
-      <el-footer :style="{ height: footer_height, width: '100%', padding: '0px' }">
-        <half-panels :panels="HalfPanels" :data="panels" :footer-height.sync="footer_height" :default-height.sync="halfpanel_defaultHeight" :panel-visible.sync="halfpanel_visible" :fullpanel-visible.sync="fullpanel_visible" :style="{ display: fullpanel_visible ? 'none' : 'block' }" @handelClose="handelClose()" />
-        <full-panels :panels="FullPanels" :data="panels" :footer-height.sync="footer_height" :panel-visible.sync="fullpanel_visible" :halfpanel-visible.sync="halfpanel_visible" :style="{ display: !fullpanel_visible ? 'none' : 'block' }" @handelClose="handelClose()" />
+      <el-footer
+        :style="{ height: footer_height, width: '100%', padding: '0px' }"
+      >
+        <half-panels
+          :panels="HalfPanels"
+          :data="panels"
+          :footer-height.sync="footer_height"
+          :default-height.sync="halfpanel_defaultHeight"
+          :panel-visible.sync="halfpanel_visible"
+          :fullpanel-visible.sync="fullpanel_visible"
+          :style="{ display: fullpanel_visible ? 'none' : 'block' }"
+          @handelClose="handelClose()"
+        />
+        <full-panels
+          :panels="FullPanels"
+          :data="panels"
+          :footer-height.sync="footer_height"
+          :panel-visible.sync="fullpanel_visible"
+          :halfpanel-visible.sync="halfpanel_visible"
+          :style="{ display: !fullpanel_visible ? 'none' : 'block' }"
+          @handelClose="handelClose()"
+        />
       </el-footer>
     </el-container>
   </div>
@@ -42,12 +99,12 @@ import {
   HalfPanels,
   FullPanels,
   FloatPanels,
-  SidePanels
+  SidePanels,
 } from "@/layout/components/index";
 import tfDialog from "./common/Dialog";
 
 import olMap from "@/views/components/olMap/index.vue";
-import onlineMonitor from "@/views/shiYuan/monitoringCenter/scadaMonitor/widget.vue"
+import onlineMonitor from "@/views/shiYuan/monitoringCenter/scadaMonitor/widget.vue";
 export default {
   components: {
     HalfPanels,
@@ -56,7 +113,7 @@ export default {
     SidePanels,
     tfDialog,
     olMap,
-    onlineMonitor
+    onlineMonitor,
   },
   props: { params: Object },
   data() {
@@ -81,72 +138,107 @@ export default {
         that: this,
         // 当前激活的模块
         activeModel: null,
-        tfDialog: { Show: null, Hide: null, setSize: null }
-      }
+        tfDialog: { Show: null, Hide: null, setSize: null },
+      },
     };
   },
   computed: {
-    Panels: function() {
+    Panels: function () {
       return this.$store.state.map.panels;
     },
-    FullPanels: function() {
+    FullPanels: function () {
       return this.$store.state.map.fullPanels;
     },
-    HalfPanels: function() {
+    HalfPanels: function () {
       return this.$store.state.map.halfPanels;
     },
-    FloatPanels: function() {
+    FloatPanels: function () {
       return this.$store.state.map.floatPanels;
     },
-    jumpText: function() {
+    jumpText: function () {
       return this.$store.state.jumpText;
-    }
+    },
   },
   watch: {
-    FullPanels: function() {
+    FullPanels: function () {
       this.show = true;
     },
-    '$store.state.jumpText':{
-        immediate: true,
-        handler(n, o) {
-        if (!n) return
-        n = n.split(',')
-        this.$store.dispatch('map/changeMethod', { pathId: n[0], widgetid: n[1], label: n[2], param: { select: true }})
-      }
+    "$store.state.jumpText": {
+      immediate: true,
+      handler(n, o) {
+        if (!n) return;
+        n = n.split(",");
+        this.$store.dispatch("map/changeMethod", {
+          pathId: n[0],
+          widgetid: n[1],
+          label: n[2],
+          param: { select: true },
+        });
+      },
     },
     jumpText(n, o) {
-      console.log("参数信息")
-      if (!n) return
-      n = n.split(',')
-      this.$store.dispatch('map/changeMethod', { pathId: n[0], widgetid: n[1], label: n[2], param: { select: true }})
-    }
+      console.log("参数信息");
+      if (!n) return;
+      n = n.split(",");
+      this.$store.dispatch("map/changeMethod", {
+        pathId: n[0],
+        widgetid: n[1],
+        label: n[2],
+        param: { select: true },
+      });
+    },
   },
-  created: function() {
+  created: function () {
     console.log("=====", this.Comps);
   },
-  mounted: function() {
-    // loadCss(esriConfig.baseCssUrl); // 本地css资源
-    // this.initConfig(); // 加载配置 ==> 加载地图
-  },
+  mounted: function () {},
   methods: {
     handelClose() {
       this.show = false;
     },
 
-    legendClick: function() {
+    legendClick: function () {
       this.legendHide = !this.legendHide;
       var whichP = [
         ["收缩", 350, "▼"],
-        ["展开", 0, "▲"]
+        ["展开", 0, "▲"],
       ][this.legendHide ? 0 : 1];
       this.$refs.legend_close.title = whichP[0];
       this.$refs.legend.style.height = whichP[1] + "px";
       this.$refs.legend_close.innerHTML = whichP[2];
     },
-    closeAny: function() {
+    closeAny: function () {
       this.$refs.any.style.display = "none";
-    }
-  }
+    },
+
+    selectChange(row, type) {
+      const map = this.$refs.olMap.map;
+      const layers = map.getLayers().getArray();
+      let feature = null;
+      for (let i = 0; i < layers.length; i++) {
+        const layer = layers[i];
+        const id = layer.get("id");
+        if (id && id == "mlayer") {
+          layer
+            .getSource()
+            .getFeatures()
+            .forEach((fea) => {
+              if (row.name == fea.values_.name) {
+                feature = fea;
+              }
+            });
+        }
+      }
+      if (feature) {
+        let view = map.getView();
+        // 设置地图中心，将地图移动到中心点’
+        view.setCenter([row.longitude, row.latitude]);
+        view.setZoom(20);
+        map.render();
+        if (!type) this.$refs.olMap.$refs.mapPopup.setPosition(feature);
+      }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -172,8 +264,8 @@ export default {
       box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25);
       border-radius: 2px;
       cursor: pointer;
-      .el-dropdown-link{
-        color: #2D74E7;
+      .el-dropdown-link {
+        color: #2d74e7;
       }
     }
   }