修改实时监控

src/views/components/olMap/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="mapDiv" id="ol-map-container" class="ol-cust-map">
     <div class="map-tool-bar">
-      <div v-if="legend" class="tool-bar-item iconfont icontuli">图例</div>
+      <div v-if="legend" class="tool-bar-item iconfont icontuli" @click="showMapLabel">图例</div>
       <div v-if="layerCcontrol" class="tool-bar-item iconfont iconbwzl1">
         <layer-control v-if="map" :parent="this"></layer-control>
       </div>
@@ -70,7 +70,7 @@ export default {
     mapSelect: {
       type: Boolean,
       default: false,
-    },
+    }
   },
   data() {
     return {
@@ -244,7 +244,10 @@ export default {
         this.$refs.mapPopup.setPosition(selectFeature);
       });
     },
-
+    
+    showMapLabel() {
+      this.$emit('setLabelShow')
+    },
     /**
      * 移除选择图层
      */
@@ -275,8 +278,12 @@ export default {
           let list = res.result;
           let features = [];
           list.forEach((item) => {
-            //let latestData = this.getLatestData(item.allocations);
-            let latestData = item.indexInfoVoList.length > 0 ? item.indexInfoVoList[0] : null
+            //let latestData = this.getLatestData(item.allocations);\
+            let indexInfoVoList = item.indexInfoVoList ? item.indexInfoVoList.sort((a,b)=>{
+              return parseInt(a.sortNumber) - parseInt(b.sortNumber)
+            }) : []
+             
+            let latestData = indexInfoVoList.length > 0 ? indexInfoVoList[0] : null
 
             let feature = new Feature({
               geometry: new Point([parseFloat(item.x), parseFloat(item.y)]),

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

@@ -14,7 +14,7 @@
         <el-form ref="form" :model="form" label-width="auto" size="small">
           <el-row :gutter="24">
             <el-col :span="6">
-              <el-form-item label="监测站点">
+              <el-form-item label="设备名称" label-width="110px">
                 <el-select
                   v-model="form.siteId"
                   filterable
@@ -33,8 +33,8 @@
               </el-form-item>
             </el-col>
 
-            <el-col :span="6">
-              <el-form-item label="数据日期范围">
+            <el-col :span="8">
+              <el-form-item label="数据日期范围" label-width="110px">
                 <el-date-picker
                   v-model="form.date"
                   type="daterange"
@@ -46,14 +46,35 @@
                   :picker-options="pickerOptions"
                   value-format="yyyy-MM-dd"
                   format="yyyy/MM/dd"
-                  style="width: 250px"
-                  :clearable="true"
+                  style="width: 100%"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
+            <el-col :span="6" style="display: inline-flex">
+              <el-checkbox
+                v-model="checkedTime"
+                style="padding: 8px 0"
+              ></el-checkbox>
+              <el-form-item label="时间段" label-width="60px">
+                <el-time-picker
+                  is-range
+                  :disabled="!checkedTime"
+                  format="HH:mm:ss"
+                  value-format="HH:mm:ss"
+                  v-model="form.time"
+                  range-separator="至"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  placeholder="选择时间范围"
+                >
+                </el-time-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
             <el-col :span="12">
-              <el-form-item label="指标" label-width="120px">
+              <el-form-item label="指标" label-width="110px">
                 <el-radio-group
                   v-model="form.displayCode"
                   size="small"
@@ -68,21 +89,22 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
-
-            <el-col :span="7" style="position: relative">
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="6" style="position: relative">
               <el-checkbox v-model="checked" class="db-check-box"></el-checkbox>
-              <el-form-item label="站点对比" label-width="100px">
+              <el-form-item label="设备对比" label-width="110px">
                 <el-select
                   v-model="form.siteId2"
                   :disabled="!checked"
                   filterable
                   multiple
                   collapse-tags
-                  placeholder="选择站点"
+                  placeholder="选择设备"
                   style="width: 100%"
                 >
                   <el-option
-                    v-for="(item, index) in siteOption"
+                    v-for="(item, index) in contrastSiteOption"
                     :key="index"
                     :label="item.siteName"
                     :value="item.siteId"
@@ -92,8 +114,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="同比开始时间">
+              <el-form-item label="同比开始时间" label-width="110px">
                 <el-date-picker
+                  value-format="yyyy-MM-dd"
+                  format="yyyy-MM-dd"
                   v-model="form.date2"
                   :disabled="!checked"
                   type="date"
@@ -102,22 +126,12 @@
                 ></el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="2">
+            <el-col :span="6">
               <el-form-item label-width="0">
-                <el-button
-                  type="primary"
-                  size="small"
-                  style="width: 85px"
-                  @click="query()"
+                <el-button type="primary" size="small" @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">导出</el-button>
               </el-form-item>
             </el-col>
           </el-row>
@@ -134,7 +148,7 @@
       <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 class="chart-title" v-cloak>{{ echartTitle }}</div>
             <div ref="chart" class="chartBox"></div>
           </div>
         </el-tab-pane>
@@ -155,23 +169,58 @@
             <template slot="empty">
               <img src="@/assets/icon/null.png" alt="" />
             </template>
-            <el-table-column prop="date" label="序号" width="50" align="center">
+            <el-table-column
+              prop="date"
+              label="序号"
+              width="50px"
+              align="center"
+            >
               <template slot-scope="scope">{{ scope.$index + 1 }}</template>
             </el-table-column>
+
             <el-table-column
-              prop="collectionDates"
-              label="采集时间"
+              prop="name"
+              label="设备名称"
               align="center"
             ></el-table-column>
             <el-table-column
+              prop="displayName"
+              label="指标名称"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="scadaTime"
+              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-column> -->
+            <el-table-column
+              prop="value"
+              label="采集值"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="unit"
+              label="单位"
+              align="center"
+            ></el-table-column>
           </el-table>
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="pagination.current"
+            :page-sizes="[20, 60, 100, 200]"
+            :page-size="pagination.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pagination.total"
+          ></el-pagination>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
@@ -238,6 +287,7 @@ export default {
           },
         ],
       },
+      pagination:{current:1,size:40,total:0},
       indicators: [],
       areaColor: [
         ["rgba(126, 215, 243)", "rgba(250, 253, 254)"],
@@ -251,11 +301,14 @@ export default {
       ], // 曲线图表颜色
       dialogVisible: false,
       siteOption: [],
+      contrastSiteOption: [], //对比
       form: {
         date: [
           //   this.$moment().format("YYYY-MM-DD 00:00:00"),
           //   this.$moment().format("YYYY-MM-DD 23:59:59")
         ],
+        time: ["00:00:00", "23:59:59"],
+        date2: "",
       },
       checked: false,
       radio: 1,
@@ -265,13 +318,12 @@ export default {
       tableData: [], // 列表数据
       dialogDragWidth: "520px",
       timeType: 1,
+      checkedTime: false,
+      echartTitle: "",
     };
   },
-  created() {
-  },
-  mounted() {
-
-  },
+  created() {},
+  mounted() {},
   watch: {
     radio(val, oldVal) {
       // if (val == 3) this.form['date'] = this.getSevenDate()
@@ -282,17 +334,24 @@ export default {
   },
   methods: {
     initDate() {
-      let start =new Date(new Date() - 24*60*60*1000);
+      let start = new Date(new Date() - 24 * 60 * 60 * 1000);
       const end = new Date();
-      const sYear = start.getFullYear()
-      const sMonth = (start.getMonth() + 1) > 9 ? start.getMonth() + 1 : '0' + (start.getMonth() + 1)
-      const sDay = start.getDate() > 9 ? start.getDate() : '0' + start.getDate()
-      let sTime = sYear + '-' + sMonth + '-' + sDay + ''
-      const eYear = end.getFullYear()
-      const eMonth = (end.getMonth() + 1) > 9 ? end.getMonth() + 1 : '0' + (end.getMonth() + 1)
-      const eDay = end.getDate() > 9 ? end.getDate() : '0' + end.getDate()
-      let eTime = eYear + '-' + eMonth + '-' + eDay + ''
-      return [sTime,eTime]
+      const sYear = start.getFullYear();
+      const sMonth =
+        start.getMonth() + 1 > 9
+          ? start.getMonth() + 1
+          : "0" + (start.getMonth() + 1);
+      const sDay =
+        start.getDate() > 9 ? start.getDate() : "0" + start.getDate();
+      let sTime = sYear + "-" + sMonth + "-" + sDay + "";
+      const eYear = end.getFullYear();
+      const eMonth =
+        end.getMonth() + 1 > 9
+          ? end.getMonth() + 1
+          : "0" + (end.getMonth() + 1);
+      const eDay = end.getDate() > 9 ? end.getDate() : "0" + end.getDate();
+      let eTime = eYear + "-" + eMonth + "-" + eDay + "";
+      return [sTime, eTime];
     },
 
     show(siteId = null) {
@@ -303,6 +362,7 @@ export default {
       //   this.getHistoryCurve({ siteId: siteId })
       // }
     },
+
     /**
      * 获取站点
      */
@@ -312,6 +372,9 @@ export default {
           this.siteOption = res.result;
           if (this.siteOption.length > 0) {
             this.$set(this.form, "siteId", siteId);
+            this.contrastSiteOption = this.siteOption.filter(
+              (item) => item.siteId != siteId
+            );
             let siteSelect = this.siteOption.find((item) => {
               return item.siteId == siteId;
             });
@@ -324,6 +387,7 @@ export default {
                 code: item.indexCode,
               };
             });
+            this.echartTitle = this.indicators[0].displayName;
             this.$set(this.form, "displayCode", this.indicators[0].code);
             this.getCurve();
           }
@@ -333,25 +397,25 @@ export default {
     /**
      * 指标选择事件
      */
-    indicatorChange() {
+    indicatorChange(code) {
+      const index = this.indicators.find((item) => item.code == code);
+      this.echartTitle = index.displayName;
       this.getCurve();
     },
+    handleCurrentChange(val){
+      this.pagination.current = val
+      //"pagination.current"
+    },
+    handleSizeChange(val){
+      this.pagination.size = val
+    },
     /**
      * 曲线
      */
     getCurve() {
-      let date = this.initDate()
-      if(this.form.date.length == 0) this.form.date = date
-      let params = {
-        code: this.form.displayCode,
-        deviceIds: this.form.siteId,
-        start:(this.form.date.length == 0 ? date[0]:this.form.date[0]) + ' 00:00:00',
-        end:(this.form.date.length == 0 ? date[1]:this.form.date[1]) + ' 23:59:59',
-        size: 10000,
-        current: 1,
-      };
+      let params = this.getQueryParams(false);
+      if (!params) return;
       getScadaInfo(params).then((res) => {
-        console.log("曲线数据：：", res);
         if (res.code == 1) {
           let mainSiteData = res.result.records;
           let newList = mainSiteData.sort((a, b) => {
@@ -372,6 +436,72 @@ export default {
           }
         }
       });
+      this.paginationTableQuery()
+    },
+    
+    /**
+     * 分页查询
+    */
+    paginationTableQuery(){
+      let param = this.getQueryParams(true);
+      if (!param) return;
+      getScadaInfo(param).then((res) => {
+        if (res.code == 1) {
+          this.tableData = res.result.records;
+          this.pagination.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 获取查询参数
+     * @type 是否查询表数据 true是，false否
+     */
+    getQueryParams(type) {
+      let date = this.initDate();
+      if (this.form.date.length == 0) this.form.date = date;
+      let params = {
+        code: this.form.displayCode,
+        deviceIds: this.form.siteId,
+        start:
+          (this.form.date.length == 0 ? date[0] : this.form.date[0]) +
+          " 00:00:00",
+        end:
+          (this.form.date.length == 0 ? date[1] : this.form.date[1]) +
+          " 23:59:59",
+        isStatisticsScada: type, //是否查询表数据 true是，false否
+        size: 10000,
+        current: 1,
+      };
+
+      if (this.checkedTime) {
+        if (!this.form.time) {
+          this.$message.warning("请选择时间段");
+          return null;
+        }
+        Object.assign(params, {
+          sameStart: this.form.time[0],
+          sameEnd: this.form.time[1],
+        });
+      }
+
+      if (this.checked) {
+        if (!this.form.siteId2 || this.form.siteId2.length < 1) {
+          this.$message.warning("请选择对比设备");
+          return null;
+        }
+        if (!this.form.date2) {
+          this.$message.warning("请选择同比开始时间");
+          return null;
+        }
+        Object.assign(params, {
+          isSiteCompared: true,
+          startTime: this.form.date2,
+        });
+        const siteId = this.form.siteId2.toString();
+        params.deviceIds += "," + siteId;
+      }
+      return params;
     },
     /**
      * 请求参数
@@ -419,7 +549,6 @@ export default {
           this.tableData = [];
           return;
         }
-        // const tableData = res.result.list[0]
         // 显示最新时间
         if (
           !params.hasOwnProperty("beginTime") &&
@@ -498,6 +627,7 @@ export default {
      * 获取查询时间
      */
     getQueryTime() {
+      debugger;
       // 当前时间
       const CURRENT_TIME = this.$moment().format("YYYY-MM-DD HH:mm:ss");
       let endTime = "";
@@ -566,7 +696,7 @@ export default {
     query() {
       //let params = this.readyParams();
       //this.getHistoryCurve(params);
-      this.getCurve()
+      this.getCurve();
     },
     getSeries(seriesList) {
       let list = [];

src/views/shiYuan/configManage/deviceManage/widget.vue

@@ -2,39 +2,126 @@
   <div id="wxReport" class="wxReport">
     <div class="filteroption">
       <span class="flexTitle">设备名称：</span>
-      <el-input v-model="queryParams.name" size="small" placeholder="输入设备档案名称查询" style="float:left;width: 180px;margin-right: 10px;" />
+      <el-input
+        v-model="queryParams.name"
+        size="small"
+        placeholder="输入设备档案名称查询"
+        style="float: left; width: 180px; margin-right: 10px"
+      />
       <span class="flexTitle">设备类型：</span>
-      <el-select v-model="queryParams.deviceType" size="small" clearable placeholder="请选择设备类型" style="float:left;">
-        <el-option v-for="item in deviceTypes" :key="item.ccode" :label="item.cname" :value="item.ccode" />
+      <el-select
+        v-model="queryParams.deviceType"
+        size="small"
+        clearable
+        placeholder="请选择设备类型"
+        style="float: left"
+      >
+        <el-option
+          v-for="item in deviceTypes"
+          :key="item.ccode"
+          :label="item.cname"
+          :value="item.ccode"
+        />
       </el-select>
-      <el-button class="search" style="margin-left: 5px" type="primary" size="small" @click="buildReportQuery()">查询</el-button>
-      <el-button class="search" style="margin-left: 10px" type="success" size="small" @click="reportClick()">新增</el-button>
-      <el-button class="search" style="margin-left: 10px" type="warning" size="small" :disabled="multipleSelection.length!==1" @click="editClick()">修改</el-button>
-      <el-button class="search" style="margin-left: 10px" type="danger" size="small" :disabled="multipleSelection.length==0" @click="deleteClick()">删除</el-button>
+      <el-button
+        class="search"
+        style="margin-left: 5px"
+        type="primary"
+        size="small"
+        @click="buildReportQuery()"
+        >查询</el-button
+      >
+      <el-button
+        class="search"
+        style="margin-left: 10px"
+        type="success"
+        size="small"
+        @click="reportClick()"
+        >新增</el-button
+      >
+      <el-button
+        class="search"
+        style="margin-left: 10px"
+        type="warning"
+        size="small"
+        :disabled="multipleSelection.length !== 1"
+        @click="editClick()"
+        >修改</el-button
+      >
+      <el-button
+        class="search"
+        style="margin-left: 10px"
+        type="danger"
+        size="small"
+        :disabled="multipleSelection.length == 0"
+        @click="deleteClick()"
+        >删除</el-button
+      >
     </div>
     <div class="tableheight">
-      <table-item :table-data="buildsiteData" :column="column" :for-id="true" :pagination="true" :pagesize="pageInfo.size" :currentpage="pageInfo.current" :border="true" :multiple="true" :total="pageInfo.tableTotal" :fixed="true" :isdelete="false" :is-select="false" :stripe="true" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange" @handleSizeChange="handleSizeChange" @rowClick="rowBuildData" @rowDblclick="showBuild" @detail="showBuild" />
+      <table-item
+        :table-data="buildsiteData"
+        :column="column"
+        :for-id="true"
+        :pagination="true"
+        :pagesize="pageInfo.size"
+        :currentpage="pageInfo.current"
+        :border="true"
+        :multiple="true"
+        :total="pageInfo.tableTotal"
+        :fixed="true"
+        :isdelete="false"
+        :is-select="false"
+        :stripe="true"
+        @handleCurrentChange="handleCurrentChange"
+        @handleSelectionChange="handleSelectionChange"
+        @handleSizeChange="handleSizeChange"
+        @rowClick="rowBuildData"
+        @rowDblclick="showBuild"
+        @detail="showBuild"
+      />
     </div>
 
-    <el-dialog :visible.sync="reportDialog" title="新增设备档案" width="1000px" destroy-on-close>
-      <WaterDetail ref="addWaterDetail" :report-form="reportForm" :is-look="false" />
+    <el-dialog
+      :visible.sync="reportDialog"
+      title="新增设备档案"
+      width="1000px"
+      destroy-on-close
+    >
+      <WaterDetail
+        ref="addWaterDetail"
+        v-if="reportDialog"
+        :report-form="reportForm"
+        :is-look="false"
+      />
       <template slot="footer">
         <el-button size="small" @click="cancelReport()">取消</el-button>
-        <el-button type="primary" size="small" @click="confirmBuildReport()">确定</el-button>
+        <el-button type="primary" size="small" @click="confirmBuildReport()"
+          >确定</el-button
+        >
       </template>
     </el-dialog>
     <el-dialog :visible.sync="dialogDetail" title="详情查看" width="1000px">
       <WaterDetail :report-form="detailData" :is-look="true" />
       <template slot="footer">
-        <el-button size="small" @click="dialogDetail=false">取消</el-button>
-        <el-button type="primary" size="small" @click="dialogDetail=false">确定</el-button>
+        <el-button size="small" @click="dialogDetail = false">取消</el-button>
+        <el-button type="primary" size="small" @click="dialogDetail = false"
+          >确定</el-button
+        >
       </template>
     </el-dialog>
-    <el-dialog :visible.sync="editDialog" destroy-on-close title="修改信息" width="1000px">
-      <WaterDetail :report-form="editData" :is-look="false" />
+    <el-dialog
+      :visible.sync="editDialog"
+      destroy-on-close
+      title="修改信息"
+      width="1000px"
+    >
+      <WaterDetail v-if="editDialog" :report-form="editData" :is-look="false" />
       <template slot="footer">
         <el-button size="small" @click="cancelEdit">取消</el-button>
-        <el-button type="primary" size="small" @click="editItem">确定</el-button>
+        <el-button type="primary" size="small" @click="editItem"
+          >确定</el-button
+        >
       </template>
     </el-dialog>
   </div>
@@ -62,7 +149,7 @@ import {
   addDevice,
   editDevice,
   deleteDevice,
-  queryDevice
+  queryDevice,
 } from "@/api/shiYuan/scada";
 
 export default {
@@ -78,57 +165,57 @@ export default {
           label: "设备名称",
           prop: "name",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "设备类型",
           prop: "deviceTypeName",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "设备编号",
           prop: "code",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "制造厂家",
           prop: "manufacturer",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "制造日期",
           prop: "makeDate",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "负责人",
           prop: "leaderName",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "状态",
           prop: "statusName",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "类型",
           prop: "typeName",
           align: "center",
-          sortable: true
+          sortable: true,
         },
         {
           label: "操作",
           slotScoped: "action",
           align: "center",
           width: "100",
-          acts: [{ emitWay: "detail", operation: "详细", color: "blue" }]
-        }
+          acts: [{ emitWay: "detail", operation: "详细", color: "blue" }],
+        },
       ],
       buildAry: {}, // 详情组件参数
       queryParams: {
@@ -136,7 +223,7 @@ export default {
         name: undefined, //
         deviceType: "",
         code: undefined, // 工地地址
-        leader: undefined // 工地状态
+        leader: undefined, // 工地状态
       },
       buildsiteData: [], // table表格数据
       flag: false, // 控制上报页面是否可点击地图获得经纬度
@@ -163,7 +250,7 @@ export default {
         waterName: undefined,
         viewJson: undefined,
         bore: "",
-        pressureDeviceId: null
+        pressureDeviceId: null,
       },
       dialogDetail: false, // 控制详情页面的显示
       // 详情数据
@@ -171,13 +258,13 @@ export default {
       editData: null,
       deviceType: "",
       deviceTypes: [], // 管网设备类型
-      vectorLayer: null
+      vectorLayer: null,
     };
   },
   computed: {
     sidePanelOn() {
       return this.$store.state.map.halfP_editableTabsValue;
-    }
+    },
   },
   watch: {
     reportDialog(newVal, oldVal) {
@@ -207,10 +294,10 @@ export default {
           this.click = undefined;
         }
       }
-    }
+    },
   },
   created() {
-    getSysCommonCode({ pCid: "53400" }).then(res => {
+    getSysCommonCode({ pCid: "53400" }).then((res) => {
       this.deviceTypes = res.result[0].codeList;
     });
   },
@@ -233,9 +320,9 @@ export default {
         source: new VectorSource(),
         style: new Style({
           image: new Icon({
-            src: require("@/assets/shiyuan/point1.png")
-          })
-        })
+            src: require("@/assets/shiyuan/point1.png"),
+          }),
+        }),
       });
       map.addLayer(this.vectorLayer);
     },
@@ -244,7 +331,7 @@ export default {
      */
     drawPoint(lonLat) {
       let feature = new Feature({
-        geometry: new Point(lonLat)
+        geometry: new Point(lonLat),
       });
       this.vectorLayer.getSource().addFeature(feature);
     },
@@ -254,13 +341,13 @@ export default {
     toPoint(lon, lat) {
       const map = this.data.that.$refs.olMap.map;
       let feature = new Feature({
-        geometry: new Point([lon, lat])
+        geometry: new Point([lon, lat]),
       });
       feature.setStyle(
         new Style({
           image: new Icon({
-            src: require("@/assets/shiyuan/point.png")
-          })
+            src: require("@/assets/shiyuan/point.png"),
+          }),
         })
       );
       this.vectorLayer.getSource().clear();
@@ -269,7 +356,7 @@ export default {
         map.getView().animate({
           center: feature.getGeometry().getCoordinates(),
           zoom: 17,
-          duration: 800
+          duration: 800,
         });
       }, 200);
     },
@@ -329,13 +416,13 @@ export default {
     },
     cancelEdit() {
       this.editDialog = false;
-      this.getData();
+      deugger;
     },
     deleteClick() {
       this.$confirm("此操作将删除所选记录, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
         .then(() => {
           this.deleteItem();
@@ -343,7 +430,7 @@ export default {
         .catch(() => {
           this.$message({
             type: "info",
-            message: "已取消删除"
+            message: "已取消删除",
           });
         });
     },
@@ -358,7 +445,7 @@ export default {
       // if (this.deviceType != '') Object.assign(query, { deviceType: this.deviceType })
       console.log("query参数：" + JSON.stringify(that.pageInfo));
       that.buildsiteData = [];
-      queryDevice(query).then(res => {
+      queryDevice(query).then((res) => {
         if (res.code !== 1) {
           that.$message.error("获取水厂信息出错!");
           return;
@@ -377,7 +464,7 @@ export default {
       this.$message.info("请点击地图获取坐标");
       this.flag = true;
       if (this.flag) {
-        this.click = map.on("click", e => {
+        this.click = map.on("click", (e) => {
           let lonLat = e.coordinate;
           this.reportForm.longitude = Number(lonLat[0].toFixed(6)); // 经度
           this.reportForm.latitude = Number(lonLat[1].toFixed(6)); // 纬度
@@ -404,7 +491,7 @@ export default {
       if (this.reportForm.deviceType != 3) {
         this.reportForm.pressureDeviceId = null;
       }
-      addDevice(this.reportForm).then(res => {
+      addDevice(this.reportForm).then((res) => {
         if (res.code == 1) {
           that.$message.success("新增成功");
           this.$refs.addWaterDetail.clearGra();
@@ -431,7 +518,7 @@ export default {
       if (this.editData.deviceType != 3) {
         this.editData.pressureDeviceId = null;
       }
-      editDevice(this.editData).then(res => {
+      editDevice(this.editData).then((res) => {
         if (res.code == 1) {
           that.$message.success("修改成功");
           that.editDialog = false;
@@ -444,10 +531,10 @@ export default {
       });
     },
     deleteItem() {
-      var ids = this.multipleSelection.map(item => {
+      var ids = this.multipleSelection.map((item) => {
         return item.id;
       });
-      deleteDevice({ ids: ids.join() }).then(res => {
+      deleteDevice({ ids: ids.join() }).then((res) => {
         if (res.code == 1) {
           this.$message.success("删除成功");
           this.buildReportQuery();
@@ -458,11 +545,26 @@ export default {
         }
       });
     },
+    /**
+     * 移除feature
+     */
+    removeFeature() {
+      let that = this;
+      if (this.vectorLayer) {
+        that.vectorLayer
+          .getSource()
+          .getFeatures()
+          .forEach((feature) => {
+            that.vectorLayer.getSource().removeFeature(feature);
+          });
+      }
+    },
     /**
      * @description 取消上报
      */
     cancelReport() {
-      this.$refs.addWaterDetail.clearGra();
+      //this.$refs.addWaterDetail.clearGra();
+      this.removeFeature()
       this.reportDialog = false; // 关闭上报弹窗
       this.clearPageInfo();
     },
@@ -489,8 +591,8 @@ export default {
       this.detailData = data;
       this.dialogDetail = true;
       // })
-    }
-  }
+    },
+  },
 };
 </script>
 

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

@@ -127,7 +127,7 @@ export default {
           trigger: "axis",
         },
         legend: {
-          data: ["今日", "昨日", "夜间最小流量参考值"],
+          data: ["昨日", "前日", "夜间最小流量参考值"],
           right: 10,
         },
         grid: {
@@ -233,7 +233,6 @@ export default {
       })
       const first = sortList.length > 0 ? sortList[0] : null;
       if (first == null) return;
-      console.log('sortList',sortList,first)
       let params = {
         code: first.indexCode,
         indexType: first.indexType,

src/views/zhpt/index.vue

@@ -24,6 +24,7 @@
               measure
               OverviewMap
               mapSelect
+              @setLabelShow="setLabelShow"
             ></ol-map>
             <div class="online-monitor-btn">
               <el-dropdown placement="bottom" trigger="click">
@@ -52,7 +53,16 @@
               @click="legendClick"
               >▼</span
             >
-            <div id="mapView_legend" ref="legend" style="height: 350px" />
+            <div id="mapView_legend" ref="legend" style="height: 150px" >
+              <div style="display: inline-flex;line-height: 26px;">
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAC5JREFUOI1jYaAyYBk1cNTAQWNg/v//VDFtIiMjjVw4kZGRugZSEYwaOGogGQAA4p4D5C+FvMsAAAAASUVORK5CYII=" alt="">
+                <span>管线</span>
+              </div>
+              <div style="display: inline-flex;line-height: 26px;">
+                <img src="./images/point1.png" style="object-fit:cover;" alt="">
+                <span>设备</span>
+              </div>
+            </div>
           </div>
           <float-panels :panels="FloatPanels" :data="panels" />
           <div id="map-index-floatPanels" ref="floatPanels" />
@@ -197,6 +207,10 @@ export default {
       this.show = false;
     },
 
+    setLabelShow(){
+      this.labelShow = !this.labelShow
+    },
+
     legendClick: function () {
       this.legendHide = !this.legendHide;
       var whichP = [
@@ -299,10 +313,10 @@ export default {
       padding: 2px;
       img {
         width: 18px;
-        height: 18px;
+        height: 26px;
       }
       span {
-        padding-left: 3px;
+        padding-left: 10px;
         font-size: 12px;
       }
     }