feat:修改确权页面功能

src/api/modules/authentic.js

@@ -15,7 +15,7 @@ module.exports = {
   },
   deleteData: {
     url: config.base_url + "plugin_ownership/delete",
-    type: "get",
+    type: "post",
   },
   exportData: {
     url: config.base_url + "plugin_ownership/exportList",

src/components/fnHeader.vue

@@ -2,7 +2,7 @@
   <div class="header">
     <div class="title">
       <img src="@/assets/images/common/logo.png" alt="" />
-      <span>飞鸟智慧巡园平台</span>
+      <span>飞鸟智慧确权平台</span>
       <img src="@/assets/images/common/logo-icon.png" alt="" />
     </div>
     <div class="date" v-show="showDate">

src/router/mainRoutes.js

@@ -10,7 +10,8 @@ export default [
     {
         path: "/home",
         name: "Home",
-        component: () => import("@/views/home/index.vue"),
+        // component: () => import("@/views/home/index.vue"),
+        component: () => import("@/views/authentic/index.vue"),
     },
     {
         path: "/garden-file",

src/utils/index.js

@@ -140,3 +140,40 @@ export const icons = () => {
     link.click();
     document.body.removeChild(link); //释放标签
 }
+
+// MULTIPOLYGON字符串转成二维数组
+export function parseMultiPolygon(multipolygonStr) {
+    // 去除前后的 MULTIPOLYGON 和括号
+    const polygonsStr = multipolygonStr.replace(/^MULTIPOLYGON\s*\(\((.*)\)\)$/, '$1');
+    
+    // 分割成多个多边形字符串（这里假设只有一个多边形，但代码可以处理多个）
+    const polygons = polygonsStr.split(/\)\(\(/).map(polygon => `(${polygon})`);
+    
+    const result = [];
+    polygons.forEach(polygonStr => {
+        
+        // 去除多边形的前后括号
+        let coordsStr = polygonStr.replace(/^\((.*)\)$/, '$1');
+        // 去除坐标对前后的空格（如果有的话）
+        coordsStr = coordsStr.trim();
+        // 检查坐标对是否包含括号（如果不应该包含，则去除它们）
+        if (coordsStr.startsWith('(') && coordsStr.endsWith(')')) {
+            coordsStr = coordsStr.slice(1, -1).trim();
+        }
+        
+        // 分割成坐标对字符串
+        const coords = coordsStr.trim().split(/\s*,\s*/);
+        
+        coords.forEach(coordStr => {
+            // 分割成经度和纬度，并转换成浮点数
+            const [lon, lat] = coordStr.split(/\s+/).map(parseFloat);
+            if (!isNaN(lon) && !isNaN(lat)) {
+                result.push([lon, lat]);
+            } else {
+                console.error(`Invalid coordinate: ${coordStr}`);
+            }
+        });
+    });
+ 
+    return result;
+}

src/utils/ol-map/Map.js

@@ -16,7 +16,7 @@ import XYZLayer from './XYZLayer'
 import config from "@/api/config.js";
 import {Feature} from "ol";
 import {GeoJSON, WKT} from 'ol/format'
-import { Style, Text } from 'ol/style';
+import { Style, Text,Icon } from 'ol/style';
 import { Circle, Fill, Stroke } from 'ol/style.js';
 import { LineString, Point } from 'ol/geom';
 import {getArea} from "ol/sphere"
@@ -108,6 +108,7 @@ class Map {
 		this.initInfoWindow()
 		//初始化地图基础事件
 		this.initMapBaseEvent()
+
   }
   /**
 	 * 初始化地图底图图层
@@ -136,7 +137,9 @@ class Map {
 		//创建默认线标记图层
 		vm.polyLineLayer = new VectorLayer("defaultPolylineLayer",101)
 		//创建默认面图层
-		vm.polygonLayer = new VectorLayer("defaultPolygonLayer",1000)
+		vm.polygonLayer = new VectorLayer("defaultPolygonLayer",1000,{
+			style: vm.polygonStyle
+		})
 		//创建文本标记图层
 		vm.labelLayer = new VectorLayer("defaultLabelLayer",99)
 
@@ -165,6 +168,7 @@ class Map {
 		})
 		this.draw.setActive(false)
 		this.map.addInteraction(this.draw);
+		this.draw.on("drawstart",callback)
 		this.draw.on("drawend",callback)
 	}
 	startDraw(){
@@ -179,10 +183,19 @@ class Map {
 			source: this.polygonLayer.source,
 			pixelTolerance: 10, //设置吸附像素值
 		})
+		this.modify.setActive(false)
         this.map.addInteraction(this.modify);
 		this.modify.on("modifyend",callback)
 	}
 
+	startModify(){
+		this.modify.setActive(true)
+	}
+
+	endModify(){
+		this.modify.setActive(false)
+	}
+
 	drawStyleFunc(feature) {
 		const styles = [];
 		const type = feature.getGeometry().getType();
@@ -234,49 +247,93 @@ class Map {
 		return styles;
 	}
 
+
 	polygonStyle(feature) {
 		const styles = [];
+		let fillStyle = {}
 		const coord = feature.getGeometry().getCoordinates()[0];
-		for (let i = 0; i < coord[0].length - 1; i++) {
-			if (i%2) {
-				styles.push(
-				  new Style({
-					geometry: new Point(coord[0][i]),
-					image: new Circle({
-					  radius: 4,
-					  fill: new Fill({
-						color: '#54cb82'
+		if(feature.get("icon")==="point-act"){
+			for (let i = 0; i < coord[0].length - 1; i++) {
+				if (i%2) {
+					styles.push(
+					  new Style({
+						geometry: new Point(coord[0][i]),
+						image: new Circle({
+						  radius: 6,
+						  fill: new Fill({
+							color: '#06F7A1'
+						  }),
+						  stroke: new Stroke({
+							color: '#fff',
+							width: 1
+						  }),
+						}),
 					  }),
-					  stroke: new Stroke({
-						color: '#54cb82',
-						width: 3
+					  new Style({
+						geometry: new Point(coord[0][i]),
+						text: new Text({
+							font: "11px sans-serif",
+							text: "A"+(i+1),
+							offsetX: 0,
+							offsetY: -21,
+							fill: new Fill({ color: "#161616" }), // 字体颜色
+						}),
+						image: new Icon({
+							src: require(`@/assets/images/map/text-green-bg.png`),
+							scale: 0.32,
+							displacement: [0, 60],
+						}),
 					  })
-					})
-				  })
-				);
-			} else {
-				styles.push(
-				  new Style({
-					geometry: new Point(coord[0][i]),
-					image: new Circle({
-					  radius: 6,
-					  fill: new Fill({
-						color: '#fff'
+					);
+				} else {
+					styles.push(
+					  new Style({
+						geometry: new Point(coord[0][i]),
+						image: new Circle({
+						  radius: 6,
+						  fill: new Fill({
+							color: '#fff'
+						  })
+						}),
+					  }),
+					  new Style({
+						geometry: new Point(coord[0][i]),
+						text: new Text({
+							font: "11px sans-serif",
+							text: "A"+(i+1),
+							offsetX: 0,
+							offsetY: -21,
+							fill: new Fill({ color: "#161616" }), // 字体颜色
+						}),
+						image: new Icon({
+							src: require(`@/assets/images/map/text-bg.png`),
+							scale: 0.32,
+							displacement: [0, 60],
+						}),
 					  })
-					})
-				  })
-				);
+					);
+				}
 			}
-		}
-		let fillStyle = new Style({
-			fill: new Fill({
-			  color: [1, 41, 52, 0.6]
-			}),
-			stroke: new Stroke({
-			  color: '#54cb82',
-			  width: 2
+			fillStyle = new Style({
+				fill: new Fill({
+				  color: [1, 41, 52, 0.6]
+				}),
+				stroke: new Stroke({
+				  color: '#06F7A1',
+				  width: 2
+				})
 			})
-		})
+		}else{
+			fillStyle = new Style({
+				fill: new Fill({
+				  color: [1, 41, 52, 0.3]
+				}),
+				stroke: new Stroke({
+				  color: '#fff',
+				  width: 2
+				})
+			})
+		}
 		let geom = feature.getGeometry().clone()
 		geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
         let area = getArea(geom)
@@ -290,7 +347,7 @@ class Map {
 				fill: new Fill({ color: "#fff" }), // 字体颜色
 			}),
 		})
-		styles.push(fillStyle, areaValStyle);
+		styles.push(fillStyle);
 		return styles;
 	}
 
@@ -306,9 +363,9 @@ class Map {
 		vm.polygonLayer.source.addFeatures(new GeoJSON().readFeatures(geometry))
 	}
 
-	setLayerWkt(wkt,isView) {
+	setLayerWkt(wkt,data,isView) {
 		const vm = this
-		let f = new Feature({geometry:new WKT().readGeometry(wkt)})
+		let f = new Feature({geometry:new WKT().readGeometry(wkt),...data})
 		const extent = f.getGeometry().getExtent()
 		vm.polygonLayer.source.addFeature(f)
 		if(isView){

src/views/authentic/authenticMap.js

@@ -25,6 +25,7 @@ export let mapData = reactive({
   curPointData: {},
   point: null,
   selectPointArr: [],
+  isPointHide: false,
 });
 
 /**
@@ -40,7 +41,7 @@ class AuthenticMap {
       style: (f) => {
         const style1 = new Style({
           image: new Icon({
-            src: require(`@/assets/images/common/${f.get("icon")}-icon.png`),
+            src: require(`@/assets/images/map/${f.get("icon")}-icon.png`),
             scale: 0.45,
           }),
         });
@@ -55,7 +56,7 @@ class AuthenticMap {
         });
         const style3 = new Style({
           image: new Icon({
-            src: require(`@/assets/images/common/${f.get("iconBg")}.png`),
+            src: require(`@/assets/images/map/${f.get("iconBg")}.png`),
             scale: 0.45,
             displacement: [0, 90],
           }),
@@ -68,12 +69,15 @@ class AuthenticMap {
       style: () => {
         return new Style({
           image: new Icon({
-            src: require("@/assets/images/common/location.png"),
+            src: require("@/assets/images/map/location.png"),
             scale: 0.45,
           }),
         });
       },
     });
+
+    // 存储绘制的地块特征
+    // this.drawnFeatures = [];
   }
 
   initMap(location, target) {
@@ -89,21 +93,57 @@ class AuthenticMap {
       22
     );
     this.kmap.initDraw((e) => {
-      mapData.isEdit = true;
-      mapData.point = e.feature;
+      if (e.type === "drawend") {
+        mapData.isEdit = true;
+        mapData.point = e.feature;
+        const coord = e.feature.getGeometry().getCoordinates()[0];
+        console.log('coord',coord);
+      }else{
+        const coord = e.feature.getGeometry().getCoordinates()[0];
+        console.log('coord',coord);
+      }
+      console.log("e", e);
+      console.log('111',e.feature.get('geometry'));
+      //   this.drawnFeatures.push(e.feature);
+    });
+    this.kmap.modifyDraw((e) => {
+      mapData.isEditArea = false;
+      mapData.isEditArea = true;
     });
-    this.kmap.startDraw();
     this.kmap.addLayer(this.clickPointLayer.layer);
     this.kmap.addLayer(this.locationLayer.layer);
     this.addMapSingerClick();
   }
 
+  undoLastDraw() {
+    const features = this.kmap.getLayerFeatures();
+    features.forEach((feature) => {
+      console.log("feature", feature, mapData.point);
+      const coord = feature.getGeometry().getCoordinates()[0];
+    });
+    // this.kmap.setFeatureCursor("move")
+    // const lastFeature = this.drawnFeatures.pop();
+    // if (lastFeature) {
+    //   // const features = this.kmap.getLayerFeatures();
+    //   console.log("this", this.kmap.polygonLayer.source);
+    //   this.kmap.polygonLayer.source.removeFeature(lastFeature);
+    //   // this.kmap.getLayers().getArray()[1].getSource().removeFeature(lastFeature);
+    // }
+  }
+
+  //      取消地块
+  cancelDraw() {
+    this.kmap.polygonLayer.source.removeFeature(mapData.point);
+  }
+
   //   添加点位
   addPoint(points) {
     const arrPoints = [];
     if (points && points.length > 0) {
       points.forEach((item) => {
-        arrPoints.push(newPoint({ ...item, icon: "point",iconBg: "name-bg" }, "point"));
+        arrPoints.push(
+          newPoint({ ...item, icon: "point", iconBg: "name-bg" }, "point")
+        );
       });
       this.clickPointLayer.source.addFeatures(arrPoints);
     }
@@ -120,62 +160,66 @@ class AuthenticMap {
     this.locationLayer.addFeature(point);
   }
 
-  endEdit() {
+  // 开始勾画
+  startDraw() {
+    this.kmap.startDraw();
+  }
+  //结束勾画
+  endDraw() {
     this.kmap.endDraw();
-    this.kmap.modifyDraw();
-    mapData.isEdit = false;
+    this.kmap.endModify();
   }
 
-  startDraw() {
-    this.kmap.startDraw();
+  // 开始编辑
+  startModify() {
+    this.kmap.startModify();
+    mapData.point.set("icon", "point-act");
+  }
+  //结束编辑
+  endModify() {
+    this.kmap.endModify();
+  }
+
+  // 清空单个数据
+  clearMapData(name, val) {
+    mapData[name] = val;
   }
 
   // 地图点击事件
   addMapSingerClick() {
     let that = this;
     that.kmap.on("singleclick", (evt) => {
+      let num = 0;
       that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
         // 点击的图层是否是VectorLayer
         if (
           layer instanceof VectorLayer &&
-          layer.get("name") === "clickPointLayer"
-        ) {
-          const icon = feature.get("icon") === "point" ? "point-act" : "point";
-          const iconBg = feature.get("iconBg") === "name-bg" ? "name-bg1" : "name-bg";
-          feature.set("icon", icon);
-          feature.set("iconBg", iconBg);
-          mapData.curPointData = {};
-          mapData.point = feature;
-          mapData.curPointData = feature.values_;
-          that.getSelectPointArr();
-          that.kmap.endDraw();
-          that.kmap.modifyDraw((e) => {
-            mapData.isEdit = false;
-            mapData.isEditArea = false;
-            mapData.isEditArea = true;
-          });
-        } else if (
-          layer instanceof VectorLayer &&
-          layer.get("name") === "defaultPolygonLayer"
+          (layer.get("name") === "clickPointLayer" ||
+            layer.get("name") === "defaultPolygonLayer")
         ) {
-          that.kmap.endDraw();
-          that.kmap.startDraw();
-        } else {
-          that.kmap.startDraw();
+          // 每次点击，只走一遍该方法
+          num = num + 1;
+          if (num === 1) {
+            that.getSelectPointArr(feature.get("id"));
+            that.kmap.endDraw();
+          }
         }
       });
     });
   }
 
   setPoint(name) {
-    const arr = mapData.selectPointArr.filter(item => item.values_.icon==='point-act')
-    if(arr.length>0){
-        mapData.point = arr[0]
-        mapData.point.set("icon", name);
-        mapData.point.set("iconBg", 'name-bg');
+    const arr = mapData.selectPointArr.filter(
+      (item) => item.values_.icon === "point-act"
+    );
+    if (arr.length > 0) {
+      mapData.point = arr[0];
+      mapData.point.set("icon", name);
+      mapData.isPointHide.set("icon", name);
+      mapData.point.set("iconBg", "name-bg");
     }
-    if(arr.length===1){
-        mapData.selectPointArr = [];
+    if (arr.length === 1) {
+      mapData.selectPointArr = [];
     }
   }
 
@@ -183,43 +227,70 @@ class AuthenticMap {
   setAreaGeometry(geometryArr) {
     let that = this;
     geometryArr.map((item) => {
-      that.kmap.setLayerWkt(item.featureWkt);
+      item.icon = "point";
+      item.iconHide = "false";
+      that.kmap.setLayerWkt(item.featureWkt, item);
     });
   }
 
+  // 移除点的功能
+  removePoint() {
+    // console.log('getDefaultCursor',this.kmap.getDefaultCursor());
+    // this.kmap.setDefaultCursor('text')
+    // console.log('getDefaultCursor',this.kmap.getDefaultCursor());
+    // var source = this.kmap.setDefaultCursor('move');
+    // console.log('source',this.kmap);
+    // var source = this.kmap.polygonLayer.source
+    // console.log('mapData.curPointData',mapData.curPointData);
+    // source.removeFeature(mapData.curPointData)
+    // source.removeFeature(pointFeature);
+    // this.kmap.endDraw1()
+  }
+
   //   获取所有选中点位
-  getSelectPointArr() {
+  getSelectPointArr(id) {
     const arr = [];
-    this.clickPointLayer.source.forEachFeature((f) => {
-      if (f.get("icon") === "point-act") {
-        arr.push(f);
+    this.clickPointLayer.source.forEachFeature((feature) => {
+      if (feature.get("id") === id) {
+        // 修改当前点位高亮
+        const icon = feature.get("icon") === "point" ? "point-act" : "point";
+        const iconBg =
+          feature.get("iconBg") === "name-bg" ? "name-act-bg" : "name-bg";
+        feature.set("icon", icon);
+        feature.set("iconBg", iconBg);
+        mapData.point = feature;
+        mapData.curPointData = feature.values_;
+      }
+      if (feature.get("icon") === "point-act") {
+        arr.push(feature);
+      }
+    });
+    const points = this.kmap.getLayerFeatures();
+    points.forEach((feature) => {
+      if (feature.get("id") === id) {
+        const icon = feature.get("icon") === "point" ? "point-act" : "point";
+        feature.set("icon", icon);
+        this.kmap.polygonStyle(feature);
+        mapData.isPointHide = feature;
       }
     });
     mapData.selectPointArr = arr;
   }
 
-  b() {
-    // console.log('this.kmap',this.kmap.polygonLayer)
-    // console.log('point',mapData.point);
-    // let that = this
-    // this.clickPointLayer.source.forEachFeature((f) => {
-    //     console.log('f',f);
-    //     if (f.get("id") === mapData.point.get("id")) {
-    //         that.kmap.clickPointLayer.removeFeature(f);
-    //         // that.kmap.remove(f)
-    //     //   this.kmap.getView().setCenter(extractCoordinates(new WKT().writeFeature(f)));
-    //     //   this.kmap.getView().setZoom(16);
-    //     }
-    //   })
-    this.clickPointLayer.source.clear()
-    this.kmap.polygonLayer.source.clear()
-    this.kmap.removeLayer(this.kmap.polygonLayer.layer)
-    this.kmap.removeLayer(this.clickPointLayer.layer)
-    // this.kmap.addLayer(this.kmap.polygonLayer.layer)
-  }
-  c(){
-    this.kmap.addLayer(this.kmap.polygonLayer.layer)
-    this.kmap.addLayer(this.clickPointLayer.layer)
+  hidePoint() {
+    const feature = mapData.isPointHide;
+    feature.set("iconHide", "true");
+    this.kmap.polygonStyle(feature);
+  }
+
+  clearLayer() {
+    this.clickPointLayer.source.clear();
+    this.kmap.polygonLayer.source.clear();
+  }
+
+  addLayer() {
+    this.kmap.addLayer(this.kmap.polygonLayer.layer);
+    this.kmap.addLayer(this.clickPointLayer.layer);
   }
 
   //获取地块信息
@@ -233,8 +304,7 @@ class AuthenticMap {
       let geom = item.getGeometry().clone();
       geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"));
       let areaItem = getArea(geom);
-      areaItem = (areaItem + areaItem / 2) / 1000;
-      area += areaItem;
+      area = (areaItem + areaItem / 2) / 1000;
     });
     return { geometryArr, area: area.toFixed(2) };
   }

src/views/authentic/index.vue

@@ -3,10 +3,10 @@
     <fnHeader></fnHeader>
     <div class="top-bg"></div>
     <div class="top">
-      <div class="back btn" @click="goBack">
+      <!-- <div class="back btn" @click="goBack">
         <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
         <span>返回</span>
-      </div>
+      </div> -->
       <div class="search">
         <el-select
           v-model="locationVal"
@@ -35,6 +35,10 @@
             >
           </el-option>
         </el-select>
+        <div class="add btn" @click="handleAdd">
+          <el-icon><Plus /></el-icon>
+          <span>创建</span>
+        </div>
         <div class="upload btn" @click="handleExport">
           <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
           <span>导出</span>
@@ -42,12 +46,58 @@
       </div>
     </div>
     <div class="content">
+      <el-form
+        :inline="true"
+        :model="formInlineSearch"
+        class="search-form"
+        ref="formInlineRef"
+      >
+        <el-form-item label="农场地址">
+          <el-input
+            v-model="formInlineSearch.address"
+            placeholder="请输入农场地址"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="农场名称">
+          <el-input
+            v-model="formInlineSearch.farmName"
+            placeholder="请输入农场名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="作物物种">
+          <el-input
+            v-model="formInlineSearch.speciesTypeName"
+            placeholder="请输入作物物种"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="客户姓名">
+          <el-input
+            v-model="formInlineSearch.masterName"
+            placeholder="请输入客户姓名"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="联系电话">
+          <el-input
+            v-model="formInlineSearch.masterTel"
+            placeholder="请输入联系电话"
+            clearable
+          />
+        </el-form-item>
+        <div class="button">
+          <el-button class="btn" type="primary" @click="onSearch">搜索</el-button>
+          <el-button class="btn reset" @click="onRest">重置</el-button>
+        </div>
+      </el-form>
       <div class="box">
         <div class="map-box">
           <div ref="mapRef" class="map"></div>
         </div>
         <div class="tool-group">
-          <!-- <div class="btn">
+          <!-- <div class="btn" @click="handleCancel">
             <img
               class="icon"
               src="@/assets/images/common/back-black-icon.png"
@@ -55,7 +105,7 @@
             />
             <span>撤销</span>
           </div>
-          <div class="btn">
+          <div class="btn" @click="handleDeletePoint">
             <el-icon size="15"><CloseBold /></el-icon>
             <span>删除点</span>
           </div> -->
@@ -73,23 +123,26 @@
             <div v-show="disabledForm" class="edit" @click="handleEdit">
               编辑
             </div>
+            <div class="edit" @click="handlePrint">打印</div>
           </div>
           <div class="edit-cont">
             <el-form
               :inline="true"
+              ref="ruleFormRef"
               :disabled="disabledForm"
               :model="formInline"
+              :rules="rules"
               label-position="top"
               class="form-inline"
             >
-              <el-form-item label="农场地址">
+              <el-form-item label="农场地址" prop="address">
                 <el-input
                   v-model="formInline.address"
                   placeholder="请输入农场地址"
                   clearable
                 />
               </el-form-item>
-              <el-form-item label="农场名称">
+              <el-form-item label="农场名称" prop="farmName">
                 <el-input
                   v-model="formInline.farmName"
                   placeholder="请输入农场名称"
@@ -102,21 +155,21 @@
               <el-form-item label="农场面积">
                 <el-input v-model="formInline.area" disabled clearable />
               </el-form-item>
-              <el-form-item label="作物物种">
+              <el-form-item label="作物物种" prop="speciesTypeName">
                 <el-input
                   v-model="formInline.speciesTypeName"
                   placeholder="请输入作物物种"
                   clearable
                 />
               </el-form-item>
-              <el-form-item label="客户姓名">
+              <el-form-item label="客户姓名" prop="masterName">
                 <el-input
                   v-model="formInline.masterName"
                   placeholder="请输入姓名"
                   clearable
                 />
               </el-form-item>
-              <el-form-item label="联系电话">
+              <el-form-item label="联系电话" prop="masterTel">
                 <el-input
                   v-model="formInline.masterTel"
                   placeholder="请输入联系电话"
@@ -133,9 +186,8 @@
                   :key="index"
                 >
                   <span>A{{ index + 1 }}</span>
-                  <div class="item-box">
-                    北纬{{ item.lat }}，东经{{ item.lnt }}
-                  </div>
+                  <div class="item-box">北纬{{ item[1] }}</div>
+                  <div class="item-box">东经{{ item[0] }}</div>
                 </div>
               </div>
             </div>
@@ -198,53 +250,37 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, watchEffect } from "vue";
+import { onMounted, ref, reactive, watchEffect, watch } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import AuthenticMap from "./authenticMap";
 import { mapData } from "./authenticMap";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { dateFormat } from "@/utils/date_util";
-import { exportExcel } from "@/utils/index";
+import { exportExcel, parseMultiPolygon } from "@/utils/index";
 const router = useRouter();
 
 let authenticMap = new AuthenticMap();
 const mapRef = ref();
-const location = ref("POINT (113.78049350268851 23.419886891845312)");
+const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
+const location = ref(userInfo.location);
 
 onMounted(() => {
-  getList(true);
+  authenticMap.initMap(location.value, mapRef.value);
+  getList();
 });
 
 // 获取地块列表
 const plotList = ref([]);
-const getList = (isInitMap = false,a=false) => {
-  VE_API.authentic.getList().then(({ code, data }) => {
-    if (code !== 0) return authenticMap.initMap(location.value, mapRef.value);
+const getList = () => {
+  authenticMap.clearLayer();
+  return VE_API.authentic.getList(formInlineSearch).then(({ code, data }) => {
     plotList.value = data || [];
-    if (isInitMap) {
-      authenticMap.initMap(data[0].point, mapRef.value);
-      const geom = [];
-      data.forEach((item) => {
-        geom.push({ featureWkt: item.geom });
-      });
-      authenticMap.setAreaGeometry(geom);
-    }
-    if(a){
     const geom = [];
-    console.log('data',data);
-      data.forEach((item) => {
-        geom.push({ featureWkt: item.geom });
-      });
-        authenticMap.setAreaGeometry(geom);
-        authenticMap.c()
-    }
-    // const geom = [];
-    //   data.forEach((item) => {
-    //     geom.push({ featureWkt: item.geom });
-    //   });
-    //   authenticMap.setAreaGeometry(geom);
-    //   authenticMap.c()
+    data.forEach((item) => {
+      geom.push({ featureWkt: item.geom, ...item });
+    });
+    authenticMap.setAreaGeometry(geom);
     authenticMap.addPoint(data);
   });
 };
@@ -293,7 +329,18 @@ const remoteMethod = async (keyword) => {
   }
 };
 
+const rules = {
+  address: [{ required: true, message: "请输入农场地址", trigger: "change" }],
+  farmName: [{ required: true, message: "请输入农场名称", trigger: "change" }],
+  speciesTypeName: [
+    { required: true, message: "请输入作物物种", trigger: "change" },
+  ],
+  masterName: [{ required: true, message: "请输入姓名", trigger: "change" }],
+  masterTel: [{ required: true, message: "请输入联系电话", trigger: "change" }],
+};
+const ruleFormRef = ref(null);
 const initForm = {
+  id: "",
   address: "",
   farmName: "",
   createDate: "",
@@ -308,46 +355,71 @@ const formInline = reactive({
 });
 const disabledForm = ref(false);
 
+// 筛选
+const formInlineRef = ref(null);
+const formInlineSearch = reactive({
+  ...initForm,
+});
+
+const onSearch = () => {
+    // isEdit.value = false
+    onCancel()
+};
+
+const onRest = () => {
+    Object.assign(formInlineSearch, initForm);
+    onCancel()
+};
+
 const isEdit = ref(false);
 
 // 编辑
 const handleEdit = () => {
   disabledForm.value = false;
+  authenticMap.startModify();
 };
 
 // 取消
+const isUpdata = ref(true);
 const onCancel = () => {
   isEdit.value = false;
-  authenticMap.startDraw();
-    // authenticMap.b();
-//   console.log('mapData.curPointData.id',mapData.curPointData.id);
-//   if (!mapData.curPointData.id || mapData.selectPointArr.length) return;
   authenticMap.setPoint("point");
+  authenticMap.clearMapData("isEdit", false);
+  authenticMap.endDraw();
+  if (isUpdata.value) {
+    authenticMap.cancelDraw();
+  } else {
+    getList();
+  }
 };
 
 // 保存
 const onSubmit = () => {
-  VE_API.authentic.saveData(formInline).then((res) => {
-    if (formInline.id) {
-      onCancel();
-    } else {
-      isEdit.value = false;
-      authenticMap.startDraw();
+  if (!ruleFormRef.value) return;
+  ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      VE_API.authentic.saveData(formInline).then((res) => {
+        onCancel();
+      });
     }
-    // authenticMap.b()
-    getList();
   });
 };
 
+// 打印
+const handlePrint = () =>{
+    console.log('打印');
+}
+
 // 返回
 const goBack = () => {
   router.go(-1);
 };
 
-function updateFormInline(newData) {
+function updateFormInline(newData,name) {
   Object.assign(formInline, newData);
 }
 
+// 删除地块
 const handleDelete = () => {
   if (!mapData.curPointData.id) return ElMessage("请选择地块");
   const id = mapData.selectPointArr.map((item) => item.values_.id);
@@ -357,17 +429,38 @@ const handleDelete = () => {
     type: "warning",
   })
     .then(() => {
-      VE_API.authentic
-        .deleteData({ id:id[0] })
-        .then((res) => {
-          authenticMap.b();
-          onCancel();
-          getList(false,true);
-        });
+      VE_API.authentic.deleteData(id).then((res) => {
+        onCancel();
+      });
     })
     .catch(() => {});
 };
 
+// 创建
+const handleAdd = () => {
+  isUpdata.value = true;
+  authenticMap.clearMapData("curPointData", {});
+  authenticMap.clearMapData("isEdit", false);
+  authenticMap.setPoint("point");
+  updateFormInline({ ...initForm });
+  pointList.value = [];
+  isEdit.value = false;
+  ruleFormRef.value.resetFields();
+  authenticMap.startDraw();
+  authenticMap.cancelDraw();
+};
+
+// 删除点
+const handleDeletePoint = () => {
+  authenticMap.removePoint();
+};
+
+// 撤销
+const handleCancel = () => {
+  authenticMap.undoLastDraw();
+//   authenticMap.cancelDraw()
+};
+
 // 导出
 const gridData = ref([]);
 const dialogVisible = ref(false);
@@ -427,51 +520,55 @@ const getDetailsData = (id) => {
       "YYYY-mm-dd HH:MM:SS"
     );
     updateFormInline({ ...data });
-    const { area } = authenticMap.getAreaGeometry();
-    formInline.area = area + "亩";
+    formInline.area = data.mu.toFixed(2) + "亩";
 
     //   经纬度列表
-    const arr = JSON.parse(data.points);
-    pointList.value = arr.map((item) => {
-      return {
-        lat: item[1].toString().slice(0, 6),
-        lnt: item[0].toString().slice(0, 7),
-      };
-    });
-    authenticMap.endEdit();
+    let arr = JSON.parse(data.points);
+    // 删除最后数组最后一项闭合数据
+    arr.pop();
+    pointList.value = arr;
   });
 };
 
+// 添加经纬度列表
+const updatePointList = () => {
+  const { geometryArr, area } = authenticMap.getAreaGeometry();
+  const lastItem = geometryArr[geometryArr.length - 1];
+  formInline.geom = lastItem.featureWkt;
+  formInline.area = area + "亩";
+  let result = parseMultiPolygon(lastItem.featureWkt);
+  result.pop();
+  pointList.value = result;
+};
+
 watchEffect(() => {
-  updateFormInline({ ...initForm });
-  pointList.value = [];
-  isEdit.value = false;
   if (mapData.isEdit && mapData.selectPointArr.length < 2) {
     isEdit.value = true;
     disabledForm.value = false;
-    const { geometryArr, area } = authenticMap.getAreaGeometry();
-    const lastItem = geometryArr[geometryArr.length - 1];
-    formInline.geom = lastItem.featureWkt;
-    formInline.area = area + "亩";
+    isUpdata.value = true;
     formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
-    authenticMap.endEdit();
+    updatePointList();
+    authenticMap.startModify();
   }
 
   if (mapData.isEditArea) {
-    const { geometryArr, area } = authenticMap.getAreaGeometry();
-    formInline.geom = geometryArr[0].featureWkt;
-    formInline.area = area + "亩";
+    isUpdata.value = false;
+    updatePointList();
   }
+});
 
-  if (
-    mapData.curPointData.id &&
-    !mapData.isEdit &&
-    mapData.selectPointArr.length === 1
-  ) {
-    const id = mapData.selectPointArr.map((item) => item.values_.id);
-    getDetailsData(id[0]);
+watch(
+  () => mapData.selectPointArr,
+  (newVale, oldValue) => {
+    if (mapData.selectPointArr.length === 1) {
+      const id = mapData.selectPointArr.map((item) => item.values_.id);
+      getDetailsData(id[0]);
+    } else {
+      isEdit.value = false;
+      authenticMap.endDraw();
+    }
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>
@@ -507,7 +604,8 @@ watchEffect(() => {
 
   .top {
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
+    justify-content: flex-end;
     width: 100%;
     height: 40px;
     background: #101010;
@@ -520,6 +618,12 @@ watchEffect(() => {
     }
     .search {
       display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 60%;
+      .input-with-select {
+        margin-left: 25px;
+      }
       .v-select {
         width: 300px;
         ::v-deep {
@@ -537,14 +641,51 @@ watchEffect(() => {
         background: #2199f8;
         margin-left: 25px;
       }
+      .add {
+        background: #fff;
+        color: #000;
+        margin-left: 25px;
+      }
     }
   }
+
   .content {
     width: 100%;
     height: calc(100% - 74px - 40px);
     box-sizing: border-box;
     background: #101010;
     padding: 13px 20px 20px 20px;
+    .search-form {
+      height: 40px;
+      margin: 5px 0;
+      display: flex;
+      justify-content: flex-end;
+      ::v-deep{
+        .el-form-item__label{
+            color: #fff;
+        }
+        .el-form-item__content{
+            width: 190px;
+        }
+        .el-input__wrapper{
+            background: #101010;
+            box-shadow: none;
+            border: 1px solid rgba(255, 255, 255, 0.7);
+            .el-input__inner {
+              color: #fff;
+            }
+        }
+      }
+      .button{
+        display: flex;
+        .btn{
+            width:84px;
+            &.reset{
+                margin-left: 25px;
+            }
+        }
+      }
+    }
     .box {
       border: 1px solid rgba(255, 255, 255, 0.4);
       border-radius: 8px;
@@ -552,7 +693,7 @@ watchEffect(() => {
       box-sizing: border-box;
       background: #232323;
       width: 100%;
-      height: 100%;
+      height: calc(100% - 50px);
       position: relative;
       .map-box {
         width: 100%;
@@ -644,26 +785,24 @@ watchEffect(() => {
             }
             .list-cont {
               width: 100%;
-              height: 234px;
+              height: 190px;
               border-radius: 4px;
               margin-top: 5px;
               background: rgba(68, 68, 68, 0.4);
-              display: flex;
-              flex-wrap: wrap;
-              align-content: flex-start;
-              justify-content: space-between;
               padding: 12px 16px;
               box-sizing: border-box;
               overflow-y: auto;
 
               .list-item {
-                width: 47.5%;
+                width: 100%;
                 margin-bottom: 12px;
+                display: flex;
+                align-items: center;
                 .item-box {
                   padding: 8px;
                   border: 1px solid #444444;
                   border-radius: 4px;
-                  margin-top: 5px;
+                  margin-left: 10px;
                 }
               }
             }