修改DMA分区

src/layout/components/Sidebar/SidebarItem.vue

@@ -88,7 +88,6 @@ export default {
       return path.resolve(this.basePath, routePath)
     },
     handleMap(info) {
-      debugger
       const currentRouter = this.$route.path
       const jumpRouter = '/map' // '/map/mapFun/funMap'
       if (

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

@@ -659,6 +659,17 @@ import { esriConfig, appconfig } from "staticPub/config";
 import request from "@/utils/request";
 import { getMaterialList, getAvgPress } from "@/api/DMA/zoningManage";
 import { queryDevice } from "@/api/scadaApi";
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+import { OSM, XYZ, Vector as VectorSource } from "ol/source";
+import {
+  Style,
+  Circle,
+  Icon,
+  Fill,
+  RegularShape,
+  Stroke,
+  Text,
+} from "ol/style";
 import olMap from "@/views/components/olMap/index.vue";
 import { drawTools } from "@/views/components/drawTools";
 import { queryByGeoserver } from "@/views/components/mapQueryTools/queryByGeoserver";
@@ -674,7 +685,7 @@ export default {
     viewDiv: HTMLDivElement,
     treeData: Array,
     options: Object,
-    that: Object,
+    that: Object
   },
   data() {
     return {
@@ -735,6 +746,8 @@ export default {
       drawFeature: null,
       queryByGeoserver: queryByGeoserver,
       geoservers: mapConfig.geoservers || [],
+      vectorSource: null,
+      vectorLayer: null,
     };
   },
   watch: {
@@ -806,9 +819,7 @@ export default {
       }
     },
   },
-  mounted() {
-    
-  },
+  mounted() {},
   destroyed() {},
   methods: {
     init() {
@@ -854,7 +865,194 @@ export default {
     open(type, row) {
       this.diaVisiable = true;
       this.isHavePolygon = false;
-      this.type = type
+      var sd = this.selectDMA
+      var ap = this.addPipe
+      this.type = type;
+      var cuurId = this.that.currId
+      switch (type) {
+        case 0: // 新建
+          ap.materialType = "";
+          ap.fixYear = "";
+          ap.villageType = "";
+          sd.id = "";
+          sd.isLongWayWatch = false;
+          sd.dmaCode = "";
+          sd.dmaName = "";
+          this.mineStatusLevel = cuurId.partitionLevel || 0
+          this.mineStatusValue = sd.pid = cuurId.id
+          this.mineStatusLabel = cuurId.dmaName
+          this.pidChange();
+          sd.areas = "";
+          sd.pipeLen = "";
+          sd.minDiff = 0;
+          sd.maxDiff = 100;
+          sd.refStandard = "";
+          sd.notes = "";
+          sd.userPipeLen = 0;
+          sd.avgPressure = 0;
+          sd.pointNumber = 0;
+          sd.otherWater = 0;
+          this.pipeTable = [];
+          this.areaMonitorData = [];
+          break;
+        case 1:
+        case 2:
+          this.loading = true;
+          var callback = () => {
+            if (++doneNum == 2) this.loading = false;
+          };
+          var doneNum = 0;
+          request({
+            url: "/gis/area/getDetailById?id=" + row.id,
+            method: "get",
+          }).then((res) => {
+            if (res.code == 1) {
+              var {
+                dmaregion,
+                pipeList,
+                dmaandobserList,
+                deviceArchiveManageList,
+              } = res.result;
+              var id;
+              this.dmatableList = [];
+              if (dmaregion) {
+                id = dmaregion.id;
+                if (dmaregion.geometry) {
+                  this.isHavePolygon = true;
+                  var geo = JSON.parse(dmaregion.geometry);
+                  var view = this.view;
+                  this.lineWeight = geo.symbol.outline.width;
+                  this.opacity = geo.symbol.color[3];
+                  this.lineColor = geo.symbol.outline.color;
+                  this.polygonColor =
+                    "rgb(" + geo.symbol.color.slice(0, 3).join(",") + ")";
+                  this.polygon.geometry = {
+                    type: "polygon",
+                    rings: [geo.rings],
+                    spatialReference: view.spatialReference,
+                  };
+                  this.polygon.symbol = {
+                    type: "simple-fill",
+                    color: geo.symbol.color,
+                    outline: {
+                      color: geo.symbol.outline.color,
+                      width: geo.symbol.outline.width + "px",
+                    },
+                  };
+                  view.goTo(this.polygon.geometry.extent);
+                } else {
+                  this.deleteDraw();
+                }
+                sd.id = dmaregion.id;
+                sd.dmaCode = dmaregion.dmaCode;
+                sd.dmaName = dmaregion.dmaName;
+                this.mineStatusLevel = dmaregion.partitionLevel - 1 || 0;
+                this.mineStatusValue = sd.pid = dmaregion.pid;
+                this.mineStatusLabel = dmaregion.pname;
+                sd.areas = dmaregion.areas;
+                sd.pipeLen = dmaregion.pipeLen;
+                sd.minDiff = dmaregion.minDiff || 0;
+                sd.maxDiff = dmaregion.maxDiff || 0;
+                sd.refStandard = dmaregion.refStandard;
+                sd.isLongWayWatch = dmaregion.isyc == "1";
+                sd.notes = dmaregion.notes;
+                // 2021-11-25 add by tmx
+                sd.userPipeLen = dmaregion.userPipeLen || 0;
+                sd.avgPressure = dmaregion.avgPressure || 0;
+                sd.pointNumber = dmaregion.pointNumber || 0;
+                sd.otherWater = dmaregion.otherWater || 0;
+                // ---------end----------
+                if (dmaandobserList) {
+                  dmaandobserList = dmaandobserList.filter((item) => {
+                    return (item.lgtd != null) & (item.lttd != null);
+                  });
+                  var index = {};
+                  var watchIndex = this.TF_options.watchIndex;
+                  var symbol = (text) => {
+                    return {
+                      type: "text",
+                      color: "white",
+                      haloColor: "black",
+                      haloSize: "1px",
+                      text: text || "",
+                      verticalAlignment: "bottom",
+                      font: { size: "14px", weight: "bold" },
+                    };
+                  };
+                  var ids = this.dmatableList.map((e) => {
+                    e.select = false;
+                    watchIndex[e.id].TF_outText.symbol = symbol();
+                    index[e.id] = e;
+                    return e.id;
+                  });
+
+                  if (this.type == 2) this.dmatableList = [];
+                  const items = dmaandobserList || [];
+                  this.cacheDmaTable = dmaandobserList;
+                  for (var i = 0, ii = items.length; i < ii; i++) {
+                    var dr = items[i];
+                    var text = "";
+                    if (ids.indexOf(dr.tableId) > -1) {
+                      var dw = index[dr.tableId];
+                      dw.select = true;
+                      text = dr.isout == "1" ? "出口" : "入口";
+                      dw.isout = dr.isout == "1";
+                      if (this.type == 2)
+                        this.dmatableList.push({
+                          id: dr.tableId,
+                          schName: dr.tableName,
+                          select: true,
+                          isout: dw.isout,
+                          lgtd: dw.lgtd,
+                          lttd: dw.lttd,
+                        });
+                    } else {
+                      this.dmatableList.push({
+                        id: dr.tableId,
+                        schName: dr.tableName,
+                        select: true,
+                        isout: dr.isout == "1",
+                        lgtd: dw.lgtd,
+                        lttd: dw.lttd,
+                      });
+                    }
+                    watchIndex[dr.tableId].TF_outText.symbol = symbol(text);
+                  }
+                } else this.$message.error("查询观察表失败");
+                callback();
+                // })
+              } else {
+                sd.dmaCode = "";
+                sd.dmaName = "";
+                this.mineStatusLevel = cuurId.partitionLevel || 0;
+                this.mineStatusValue = sd.pid = cuurId.id;
+                this.mineStatusLabel = cuurId.dmaName;
+                sd.areas = "";
+                sd.minDiff = 0;
+                sd.maxDiff = 100;
+                sd.refStandard = "";
+                this.deleteDraw();
+              }
+              if (pipeList) {
+                this.pipeTable = pipeList.map((e) => {
+                  return {
+                    id: e.id,
+                    villageType: Number(e.villageType),
+                    fixYear: Number(e.fixYear),
+                    pipeLen: Number(e.pipeLen),
+                    materialType: e.materialType,
+                  };
+                });
+              } else this.pipeTable = [];
+              if (deviceArchiveManageList) {
+                this.areaMonitorData = deviceArchiveManageList;
+              } else this.areaMonitorData = [];
+              this.pidChange();
+            } else this.$message.error("查询失败");
+            callback();
+          });
+          break;
+      }
     },
 
     loadMap() {
@@ -906,7 +1104,7 @@ export default {
         if (this.drawFeature) {
           this.isHavePolygon = true;
           this.queryFeaturesByPolygon();
-          this.polygon = fearure
+          this.polygon = fearure;
         }
       };
       if (olMap) {
@@ -954,26 +1152,28 @@ export default {
           this.$message.error("查询管线出错");
         }
       }
-      
+
       if (this.$refs.olmap) {
         let map = this.$refs.olmap.map;
-        let vectorLayer = null
+        let vectorLayer = null;
         const layers = map.getLayers().getArray();
         for (let index = 0; index < layers.length; index++) {
           const layer = layers[index];
           if (layer.get("type") == "layer" && layer.get("name") == "监测点") {
-            vectorLayer = layer
+            vectorLayer = layer;
           }
         }
 
-        if(vectorLayer && this.drawFeature && this.queryByGeoserver){
-          const vector = this.queryByGeoserver.getFeatureByTurf(vectorLayer,this.drawFeature)
-          if(vector && vector.features){
-            const features = vector.features
-            this.getEquipmentData(features)
+        if (vectorLayer && this.drawFeature && this.queryByGeoserver) {
+          const vector = this.queryByGeoserver.getFeatureByTurf(
+            vectorLayer,
+            this.drawFeature
+          );
+          if (vector && vector.features) {
+            const features = vector.features;
+            this.getEquipmentData(features);
           }
         }
-
       }
     },
 
@@ -1049,45 +1249,33 @@ export default {
         });
       }
     },
-    
+
     /**
      * 解析设备数据
-    */
-    getEquipmentData(features){
-      this.dmatableList = []
-      if(features){
-        features.map(fea=>{
-          const properties = fea.properties
+     */
+    getEquipmentData(features) {
+      this.dmatableList = [];
+      if (features) {
+        features.map((fea) => {
+          const properties = fea.properties;
           this.dmatableList.push({
-            schName:properties.name,    //观察表名称
-            isout:false,
-            select:true
-          })
-
-        })
+            schName: properties.name, //观察表名称
+            isout: false,
+            select: true,
+          });
+        });
       }
     },
 
-    editDraw() {
-      
-    },
+    editDraw() {},
 
-    editCancel() {
-      
-      
-    },
+    editCancel() {},
 
     editTrue(cb) {
-      var callback = cb;
       this.clearEdit();
-      this.queryContainsWatch();
-      this.getPipeLength(callback);
-      this.queryPipeByGeometry();
     },
 
-    clearEdit() {
-      
-    },
+    clearEdit() {},
 
     deleteDraw() {
       //this.clearDraw();
@@ -1098,7 +1286,7 @@ export default {
       this.isHavePolygon = false;
       this.pipeTable = []; // 清除获取到的数据
       this.areaMonitorData = [];
-      this.dmatableList = [] //清空观察表数据
+      this.dmatableList = []; //清空观察表数据
       var watchs = this.TF_options.watchs;
       for (var i = 0, ii = watchs.length; i < ii; i++) {
         watchs[i].TF_fea.symbol = {
@@ -1172,75 +1360,133 @@ export default {
       }
     },
 
-    getPipeLength(cb) {
-      
-    },
-
     /**
-     * describe 获取绘制区域内的所有管线数据 2021-11-24 add tmx
-     */
-    queryPipeByGeometry() {
-      
-    },
-
-    
-    queryContainsWatch() {
-      
-    },
-    pidChange() {
-      this.pidLoading = true;
-      var view = this.view;
-      var graphic = view.TF_Graphic;
-      var player = view.TF_DMAParent;
-      var blayer = view.TF_DMABother;
-      var sp = view.spatialReference;
-      var id = this.selectDMA.id || -1;
-      var level = this.mineStatusLevel + 1;
-      var pid = this.mineStatusValue;
-      player.removeAll();
-      blayer.removeAll();
+     * 父级ID改变
+    */
+    pidChange() {  
+      var pid = this.mineStatusValue
       request({
         url: "/gis/area/partitionById?size=300&id=" + pid,
         method: "get",
       }).then((res) => {
         if (res.code == 1) {
-          res = res.result.region.records;
-          var rowsP = undefined;
-          var rowsB = [];
-          for (var i = 0, il = res, ii = il.length; i < ii; i++) {
-            if (il[i].geometry) {
-              var di = il[i];
-              if (di.id == id) continue;
-              var geo = JSON.parse(di.geometry);
-              var gra = new graphic({
-                geometry: {
-                  type: "polygon",
-                  rings: [geo.rings],
-                  spatialReference: sp,
-                },
-                symbol: {
-                  type: "simple-fill",
-                  color: geo.symbol.color,
-                  outline: {
-                    color: geo.symbol.outline.color,
-                    width: geo.symbol.outline.width + "px",
-                  },
-                },
-              });
-              if (di.id == pid) rowsP = gra;
-              else if (level == di.partitionLevel) rowsB.push(gra);
-            }
-          }
-          if (rowsP) player.add(rowsP);
-          if (rowsB.length > 0) blayer.addMany(rowsB);
+          res = res.result.region.records
+          this.showSourceVector(res)
         } else this.$message.error("获取分区信息列表失败：" + res.message);
-        this.pidLoading = false;
       });
     },
 
+    /**
+     * 显示要素
+     */
+     showSourceVector(tableData) {
+      this.removeFeature();
+      let olMap = this.$refs.olmap;
+      let map = olMap.map
+      if (this.vectorSource == null)
+        this.vectorSource = new VectorSource({ wrapX: false });
+      if (this.vectorLayer == null) {
+        this.vectorLayer = new VectorLayer({ source: this.vectorSource });
+        map.addLayer(this.vectorLayer);
+      }
+      tableData.forEach((item, index) => {
+        const dmaName = item.hasOwnProperty("dmaName") ? item.dmaName : "";
+        const strGeo = item.hasOwnProperty("geometry") ? item.geometry : null;
+        if (strGeo) {
+          const jsonGeo = JSON.parse(strGeo);
+          const rings = jsonGeo.hasOwnProperty("rings") ? jsonGeo.rings : null;
+          if (rings == null) return;
+          if (rings.indexOf("POLYGON") != -1) {
+            let feature = new WKT().readFeature(rings);
+            const symbol = jsonGeo.hasOwnProperty("symbol")
+              ? jsonGeo.symbol
+              : null;
+            if (symbol == null) return;
+            const color = symbol.color;
+            const opacity = symbol.opacity;
+            const outline = symbol.outline; 
+            const polygonColor = color.match(/rgb\(([\d\D]*?)\)/)[1];
+            let colorArr = polygonColor.split(",");
+            let colorArray = [];
+            colorArr.map((item) => {
+              colorArray.push(parseInt(item.replace(" ", "")));
+            });
+            colorArr.push(parseFloat(opacity))
+            const feaStyle = this.getFeatureStyle(colorArr,outline.width,outline.color,dmaName)
+            //设置样式
+            feature.setStyle(feaStyle)
+            this.vectorSource.addFeature(feature);
+          }
+        }
+      });
+    },
+
+    /**
+     * 设置绘制图形样式
+     * @fillColor 图形填错颜色和透明度，如：[255, 255, 255, 0.33]
+     * @outlineWidth 图形边线宽度 如：2
+     * @outlineColor 图形边线颜色:如：#dc5246
+     * @text 显示字体
+     *
+     */
+    getFeatureStyle(fillColor, outlineWidth, outlineColor, text) {
+      return new Style({
+        fill: new Fill({
+          color: fillColor,
+        }),
+        stroke: new Stroke({
+          width: outlineWidth,
+          color: outlineColor,
+        }),
+        text: new Text({
+          font: "16px Microsoft YaHei",
+          text: text,
+          overflow: true,
+          textAlign: "center", // 对齐方式
+          textBaseline: "middle", // 文本基线
+          fill: new Fill({
+            color: "#0e84ba",
+          }),
+          offsetX: 0,
+        }),
+      });
+    },
+
+    /**
+     * 移除feature
+     */
+     removeFeature() {
+      let that = this;
+      if (this.vectorLayer) {
+        that.vectorLayer
+          .getSource()
+          .getFeatures()
+          .forEach((feature) => {
+            that.vectorLayer.getSource().removeFeature(feature);
+          });
+      }
+    },
+
+    /**
+     * 移除VectorLayer
+     */
+    removeVectorLayer() {
+      let that = this;
+      let olMap = this.$refs.olmap;
+      let map = olMap.map
+      that.vectorLayer
+        .getSource()
+        .getFeatures()
+        .forEach((feature) => {
+          that.vectorLayer.getSource().removeFeature(feature);
+        });
+      that.features = [];
+      map.removeLayer(that.vectorLayer);
+    },
+
     /**
      * 观察表类型改变
-    */
+     */
     switchChange(row) {
       this.TF_options.watchIndex[row.id].TF_outText.symbol = {
         type: "text",
@@ -1255,25 +1501,21 @@ export default {
 
     /**
      * 提交编辑
-    */
+     */
     dialogTrue() {
-      
-      var newDMA = this.selectDMA;
+      let newDMA = this.selectDMA;
       if (!newDMA["dmaName"].trim())
         return this.$message.error("请填写分区名称");
       if (!this.isHavePolygon) return this.$message.error("请绘制分区");
       this.diaTrueDisable = true;
       if (this.edit) return this.editTrue(() => this.dialogTrue());
-      var fd = new FormData();
-      var polygon = this.polygon;
-		  var jsonFeature = new GeoJSON().writeFeature(polygon);
-      let json = JSON.parse(jsonFeature)
-      
-		  var positionList = new WKT().writeFeature(polygon);
-      console.log('显示geojso',jsonFeature,json,positionList)
-
-      var d = this.polygonColor;
-      var data = {
+      let fd = new FormData();
+      let polygon = this.polygon;
+      // var jsonFeature = new GeoJSON().writeFeature(polygon);
+      // let json = JSON.parse(jsonFeature);
+      let positionList = new WKT().writeFeature(polygon);
+      let d = this.polygonColor;
+      let data = {
         pid: newDMA["pid"],
         dmaCode: newDMA["dmaCode"],
         dmaName: newDMA["dmaName"],
@@ -1283,7 +1525,7 @@ export default {
         maxDiff: newDMA["maxDiff"],
         isyc: newDMA["isLongWayWatch"] ? "1" : "0",
         notes: newDMA["notes"],
-        
+
         pointNumber: parseInt(newDMA["pointNumber"]),
         userPipeLen: parseFloat(newDMA["userPipeLen"]),
         avgPressure: parseFloat(newDMA["avgPressure"]),
@@ -1355,6 +1597,7 @@ export default {
             this.$message.success(
               (this.type == 0 ? "新建" : "修改") + "分区成功"
             );
+            this.$emit('changeDMAList');//触发changeDMAList事件  
           } else {
             this.$message.error(
               (this.type == 0 ? "新建" : "修改") + "分区失败"
@@ -1363,7 +1606,7 @@ export default {
         })
         .catch((e) => {
           this.$message.error((this.type == 0 ? "新建" : "修改") + "分区失败");
-        })
+        });
     },
     treeNodeClick(data) {
       var node = this.$refs.parentSelect.getCheckedNodes()[0];

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

@@ -10,23 +10,26 @@
             style="width: 260px"
           ></el-input>
         </el-form-item>
-        <el-form-item label="分区级别">
+        <!-- <el-form-item label="分区级别">
           <el-select v-model="form.jb" placeholder="请选择级别" size="small">
-            <!-- <el-option v-for="" :key=""></el-option> -->
+            <el-option v-for="" :key=""></el-option>
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label-width="0px">
-          <el-button type="primary" size="small">查询</el-button>
+          <el-button type="primary" size="small" @click="nodeClick">查询</el-button>
           <el-button type="primary" size="small" @click="addDMA"
             >添加</el-button
           >
-          <el-button type="primary" size="small">删除</el-button>
-          <el-button type="primary" size="small">导出</el-button>
+          <el-button type="primary" size="small" @click="deleteDMA"
+            >删除</el-button
+          >
+          <el-button size="small" type="primary" @click="setExport2Excel">导出</el-button>
         </el-form-item>
       </el-form>
     </div>
     <el-table
       :data="tableData"
+      ref="table"
       height="calc(100% - 93px)"
       :header-cell-style="{
         backgroundColor: '#dfeffe',
@@ -39,7 +42,7 @@
       style="width: 100%"
     >
       <el-table-column type="selection" align="center"></el-table-column>
-      <el-table-column label="序号" align="center">
+      <el-table-column label="序号" align="center" width="50px">
         <template slot-scope="scope">{{ scope.$index + 1 }}</template>
       </el-table-column>
       <el-table-column
@@ -97,14 +100,26 @@
     <dmaSettingDialog
       ref="dmaSettingDialog"
       :tree-data="dmaData"
+      :that="that"
+      @changeDMAList="changeDMAList"
     ></dmaSettingDialog>
   </div>
 </template>
 
 <script>
+import { IP } from '@/utils/request'
 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
 import { OSM, XYZ, Vector as VectorSource } from "ol/source";
 import { WKT } from "ol/format";
+import {
+  Style,
+  Circle,
+  Icon,
+  Fill,
+  RegularShape,
+  Stroke,
+  Text,
+} from "ol/style";
 import dmaSettingDialog from "./components/dmaSettingDialog/index";
 import {
   zoningTree,
@@ -114,7 +129,7 @@ import {
   createAndEditZoning,
   getMaterialList,
 } from "@/api/DMA/zoningManage";
-
+import request from "@/utils/request";
 export default {
   components: {
     dmaSettingDialog,
@@ -123,14 +138,18 @@ export default {
   data() {
     return {
       map: null,
+      that:null,
       form: {
         keyWords: "",
-        jb: 0,
+        //jb: 0,
       },
       order: ["", ""],
       tableData: [],
       pagination: { size: 100, current: 1, total: 0 },
       dmaData: [],
+      currId:null,
+      vectorSource: null,
+      vectorLayer: null,
     };
   },
   created() {
@@ -139,7 +158,8 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.map = this.data.that.$refs.olMap.map;
-      this.showSourceVector()
+      this.showSourceVector();
+      this.that = this
     });
   },
   methods: {
@@ -149,19 +169,21 @@ export default {
       this.$refs.dmaSettingDialog.open(0);
     },
     editDMA(row) {
-      this.$refs.dialog.open(1, row);
+      this.$refs.dmaSettingDialog.open(1, row);
     },
     showDMA(row) {
-      this.$refs.dialog.open(2, row);
+      this.$refs.dmaSettingDialog.open(2, row);
     },
     getDMAData() {
       zoningTree().then((res) => {
         if (res.code !== -1) {
-          this.dmaData = res.result;
-          this.nodeClick(this.dmaData[0]);
+          var first = (this.dmaData = res.result)[0]
+          this.nodeClick(first)
+          this.currId = { id: first.id, dmaName: first.dmaName }
         }
       });
     },
+
     nodeClick(node) {
       let param = {
         id: 0, // this.currId.id
@@ -171,33 +193,186 @@ export default {
         // 'orders[0].column': this.order[1]
       };
 
+      if (node) this.currId = { id: node.id, dmaName: node.dmaName, partitionLevel: node.partitionLevel || 0 }
+
       if (this.form.keyWords != "")
         Object.assign(param, { content: this.form.keyWords });
-      if (this.form.jb != 0)
-        Object.assign(param, { partitionLevel: this.form.jb });
+      // if (this.form.jb != 0)
+      //   Object.assign(param, { partitionLevel: this.form.jb });
       getTargetZoningList(param).then((res) => {
         if (res.code == 1) {
-          this.tableData = res.result.region.records
+          this.tableData = res.result.region.records;
+          this.showSourceVector();
         }
       });
     },
+    
+    /**
+     * 当DMA分区发生改变时
+    */
+    changeDMAList(){
+      this.nodeClick()
+    },
+
+
 
     /**
      * 显示要素
-    */
+     */
     showSourceVector() {
-      let str =
-        "POLYGON((104.59775006347658 31.455715830516098,104.60284626060488 31.45466440458226,104.6018055635071 31.452722485255478,104.59915554100037 31.451767618846176,104.59813662370877 31.452496964942203,104.59775006347658 31.455715830516098))";
-      let feature = new WKT().readFeature(str);
-      let vectorSource = new VectorSource({ wrapX: false });
-      let vectorLayer = new VectorLayer({
-        source: vectorSource
+      this.removeFeature();
+      if (this.vectorSource == null)
+        this.vectorSource = new VectorSource({ wrapX: false });
+      if (this.vectorLayer == null) {
+        this.vectorLayer = new VectorLayer({ source: this.vectorSource });
+        this.map.addLayer(this.vectorLayer);
+      }
+
+      // let str =
+      //     "POLYGON((104.59775006347658 31.455715830516098,104.60284626060488 31.45466440458226,104.6018055635071 31.452722485255478,104.59915554100037 31.451767618846176,104.59813662370877 31.452496964942203,104.59775006347658 31.455715830516098))";
+      //   let feature = new WKT().readFeature(str);
+      //   this.vectorSource.addFeature(feature);
+      this.tableData.forEach((item, index) => {
+        const dmaName = item.hasOwnProperty("dmaName") ? item.dmaName : "";
+        const strGeo = item.hasOwnProperty("geometry") ? item.geometry : null;
+        if (strGeo) {
+          const jsonGeo = JSON.parse(strGeo);
+          const rings = jsonGeo.hasOwnProperty("rings") ? jsonGeo.rings : null;
+          if (rings == null) return;
+          if (rings.indexOf("POLYGON") != -1) {
+            let feature = new WKT().readFeature(rings);
+            const symbol = jsonGeo.hasOwnProperty("symbol")
+              ? jsonGeo.symbol
+              : null;
+            if (symbol == null) return;
+            const color = symbol.color;
+            const opacity = symbol.opacity;
+            const outline = symbol.outline; //color,width
+            const polygonColor = color.match(/rgb\(([\d\D]*?)\)/)[1];
+            let colorArr = polygonColor.split(",");
+            let colorArray = [];
+            colorArr.map((item) => {
+              colorArray.push(parseInt(item.replace(" ", "")));
+            });
+            colorArr.push(parseFloat(opacity))
+            const feaStyle = this.getFeatureStyle(colorArr,outline.width,outline.color,dmaName)
+            //设置样式
+            feature.setStyle(feaStyle)
+            this.vectorSource.addFeature(feature);
+          }
+        }
+      });
+    },
+
+    /**
+     * 设置绘制图形样式
+     * @fillColor 图形填错颜色和透明度，如：[255, 255, 255, 0.33]
+     * @outlineWidth 图形边线宽度 如：2
+     * @outlineColor 图形边线颜色:如：#dc5246
+     * @text 显示字体
+     *
+     */
+    getFeatureStyle(fillColor, outlineWidth, outlineColor, text) {
+      return new Style({
+        fill: new Fill({
+          color: fillColor,
+        }),
+        stroke: new Stroke({
+          width: outlineWidth,
+          color: outlineColor,
+        }),
+        text: new Text({
+          font: "16px Microsoft YaHei",
+          text: text,
+          overflow: true,
+          textAlign: "center", // 对齐方式
+          textBaseline: "middle", // 文本基线
+          fill: new Fill({
+            color: "#0e84ba",
+          }),
+          offsetX: 0,
+        }),
       });
-      this.map.addLayer(vectorLayer);
+    },
+
+    setExport2Excel() {
+      window.open(IP + '/gis/area/partitionById?access_token=' + this.$store.state.user.token + '&templateFlag=1&id=' + this.currId.id)
+    },
+
+    deleteDMA() {
+      const ids = this.$refs.table.selection.map((e) => e.id);
+      const dmaName = this.$refs.table.selection.map((e) => e.dmaName);
+      if (ids.length == 0) {
+        this.$message.warning("请先选择需要删除的分区！");
+        return;
+      }
+      this.$confirm("此操作将永久删除分区" + dmaName + ", 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.delete(ids);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
 
-      vectorSource.addFeature(feature)
+    delete(ids) {
+      request({
+        url: "/gis/area/partition?ids=" + ids.join(","),
+        method: "delete",
+      })
+        .then((result) => {
+          if (result.code == 1) {
+            this.$message.success("删除成功！");
+            this.nodeClick();
+          } else {
+            this.$message.error("删除失败！");
+          }
+        })
+        .catch((ex) => {
+          this.$message.error("删除失败！" + ex);
+        });
+    },
+
+    /**
+     * 移除feature
+     */
+    removeFeature() {
+      let that = this;
+      if (this.vectorLayer) {
+        that.vectorLayer
+          .getSource()
+          .getFeatures()
+          .forEach((feature) => {
+            that.vectorLayer.getSource().removeFeature(feature);
+          });
+      }
+    },
+
+    /**
+     * 移除VectorLayer
+     */
+    removeVectorLayer() {
+      let that = this;
+      that.vectorLayer
+        .getSource()
+        .getFeatures()
+        .forEach((feature) => {
+          that.vectorLayer.getSource().removeFeature(feature);
+        });
+      that.features = [];
+      that.map.removeLayer(that.vectorLayer);
     },
   },
+  destroyed(){
+    this.removeVectorLayer()
+  }
 };
 </script>