部分修改

xzl-ui/src/views/monitor/map/customerPositionBmap.vue

@@ -55,6 +55,13 @@ export default {
     setTimeout(()=>{
       this.initMap()
     },100)
+    // var content =
+    //   '<ul class="map-customer-info">'
+    //   + '<li ><span>xx村零售户数量已有388户!计划为299户!</span></li>'
+    //   + '</ul>';
+    // this.$alert(content, '信息', {
+    //   dangerouslyUseHTMLString: true
+    // });
   },
   methods: {
     addMarker(points) {

xzl-ui/src/views/monitor/map/warn.vue

@@ -53,7 +53,7 @@ export default {
         console.log(areaInfo, noWarnClientInfo, WarnClientInfo);
 
         areaInfo.forEach(data => {
-          if (data.areaType == 1) {
+          if (data.areaType == 3) {
             let listData = JSON.parse(data.areaData);
             let list = [];
             listData.forEach(areaData => {
@@ -81,6 +81,16 @@ export default {
             let marker = new BMap.Marker(pt, options);
             t.map.addOverlay(marker);
             marker.addEventListener('click', function (e) {
+              var content =
+                '<ul class="map-customer-info">'
+                + '<li ><span>社区名称：</span>' + 'xxx社区' + '</li>'
+                + '<li ><span>人口：</span>' + 'xxxxxx' + '</li>'
+                + '<li ><span>零售户数量：</span>' + 'xxx' + '</li>'
+                + '<li ><span>可办证数量：</span>' + 'xx' + '</li>'
+                + '</ul>';
+              t.$alert(content, '社区信息', {
+                dangerouslyUseHTMLString: true
+              });
             });
           }
         });
@@ -108,6 +118,7 @@ export default {
             + '<li ><span>名称：</span>' + e.point.shortName + '</li>'
             + '<li ><span>电话：</span>' + e.point.telephone + '</li>'
             + '<li ><span>客户经理：</span>' + e.point.cnname + '</li>'
+            + '<li ><span>库存：</span>' + 666 + '</li>'
             + '</ul>';
           t.$alert(content, '零售户信息', {
             dangerouslyUseHTMLString: true

xzl-ui/src/views/monitor/map/warnRecordIndex.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      size="medium"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        align="center"
+        type="index"
+        label="序号"
+        width="100">
+      </el-table-column>
+      <el-table-column
+        prop="type"
+        label="预警指标"
+        width="550">
+      </el-table-column>
+      <el-table-column
+        prop="data"
+        label="预警阈值"
+        width="550">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="操作"
+        width="200">
+        <template slot-scope="scope">
+          <el-button
+            @click.native.prevent="viewArea(scope.$index, tableData)"
+            type="text"
+            size="small"
+            :disabled="btnEnabled"
+          >
+            查看
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+  </div>
+</template>
+<script>
+import request from '@/utils/request'
+
+export default {
+  data() {
+    return {
+      tableData: [{type: "可设置零售户数量",data:"根据规则来生成"}],
+      formVisible: false,
+      form: {
+        areaData: "",
+        areaColor: "",
+        areaName: "",
+        areaType: 3
+      },
+      map: null,
+      pointList: [],
+      btnEnabled: false,
+      multipleSelection: []
+
+    }
+  },
+  mounted() {
+    // this.initData();
+  },
+  methods: {
+
+    initData() {
+      const t = this;
+      request({
+        url: "/monitorArea/infoList?areaType=3",
+        method: "get"
+      }).then(rs => {
+        t.tableData = rs.areaInfo;
+      })
+    },
+    viewArea(index, tableData) {
+      this.form=tableData[index];
+      this.formVisible=true;
+      this.btnEnabled=true;
+      JSON.parse(tableData[index].areaData).forEach(area => {
+        var pt = new BMap.Point(area.longitude, area.latitude);
+        this.pointList.push(pt)
+      });
+      setTimeout(() => {
+        this.initMap();
+        var polygon = new BMap.Polygon(this.pointList, {fillColor: this.form.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+        this.map.addOverlay(polygon);
+      }, 100)
+    },
+    changeArea(index, tableData) {
+      this.form=tableData[index];
+      this.formVisible=true;
+      JSON.parse(tableData[index].areaData).forEach(area => {
+        var pt = new BMap.Point(area.longitude, area.latitude);
+        this.pointList.push(pt)
+      });
+      setTimeout(() => {
+        this.initMap();
+        var polygon = new BMap.Polygon(this.pointList, {fillColor: this.form.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+        this.map.addOverlay(polygon);
+      }, 100)
+    },
+    addArea() {
+      this.formVisible = true;
+      this.pointList = [];
+      setTimeout(() => {
+        this.initMap()
+      }, 100)
+    },
+    deleteArea() {
+      const ids = [];
+      this.multipleSelection.forEach(data=>{
+        ids.push(data.id);
+      })
+      const t=this;
+      request({
+        url: "/monitorArea/deleteArea",
+        method: "delete",
+        data: ids
+      }).then(rs=>{
+        t.$message({
+          message:rs.message,
+          type:rs.status
+        })
+        t.initData();
+      });
+    },
+    savePoly() {
+      let areaColor = this.form.areaColor;
+      if (!areaColor) {
+        this.$modal.msgError("表单填写不完整!");
+        return;
+      }
+      console.log(this.pointList)
+      var polygon = new BMap.Polygon(this.pointList, {fillColor: areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+      this.map.addOverlay(polygon);
+    },
+    saveArea() {
+      var listStr = [];
+      if (this.pointList.length < 3) {
+        this.$modal.msgError("至少选择三点，形成封闭区域!");
+        return
+      }
+      this.pointList.forEach(point => {
+        listStr.push({longitude: point.lng, latitude: point.lat})
+      })
+      this.form.areaData = JSON.stringify(listStr);
+      var t = this;
+      request({
+        url: "/monitorArea/saveArea",
+        method: "post",
+        data: this.form
+      }).then(rs => {
+        t.$message({
+          message:rs.message,
+          type:rs.status
+        })
+        t.formVisible=false;
+        t.initData();
+        }
+      )
+    },
+    handleClose() {
+      this.formVisible=false;
+      this.btnEnabled=false;
+      this.pointList=[];
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    }
+
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.BMap_cpyCtrl {
+  display: none;
+}
+
+.anchorBL {
+  display: none;
+}
+
+.el-table {
+  width: 100%;
+
+  .el-table__header-wrapper table, .el-table__body-wrapper table {
+    width: 100% !important;
+  }
+
+  .el-table__body, .el-table__footer, .el-table__header {
+    table-layout: auto;
+  }
+}
+</style>