fix: 编辑农场坐标系转换

src/utils/WSCoordinate.js

@@ -2,25 +2,25 @@
 //	计算两点之间直线距离
 import WKT from "ol/format/WKT";
 
-export const algorithm = (point1, point2)=> {
-	let [x1, y1] = point1;
-	let [x2, y2] = point2;
-    let Lat1 = rad(x1); // 纬度
-    let Lat2 = rad(x2);
-    let a = Lat1 - Lat2;//	两点纬度之差
-    let b = rad(y1) - rad(y2); //	经度之差
-    let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
-        	+ Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)));
-        //	计算两点距离的公式
-    s = s * 6378137.0;//	弧长等于弧度乘地球半径（半径为米）
-    s = Math.round(s * 10000) / 10000;//	精确距离的数值
-    return s;
+export const algorithm = (point1, point2) => {
+  let [x1, y1] = point1;
+  let [x2, y2] = point2;
+  let Lat1 = rad(x1); // 纬度
+  let Lat2 = rad(x2);
+  let a = Lat1 - Lat2;//	两点纬度之差
+  let b = rad(y1) - rad(y2); //	经度之差
+  let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
+    + Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)));
+  //	计算两点距离的公式
+  s = s * 6378137.0;//	弧长等于弧度乘地球半径（半径为米）
+  s = Math.round(s * 10000) / 10000;//	精确距离的数值
+  return s;
 
 }
 
 //	角度转换成弧度
-const rad =(d) =>{
-    return d * Math.PI / 180.00;
+const rad = (d) => {
+  return d * Math.PI / 180.00;
 };
 
 
@@ -141,15 +141,15 @@ export function transformFromGCJToWGS(latitude, longitude) {
 
 }
 
-export function toPointWkt(location){
-  let {longitude,latitude} = location
+export function toPointWkt(location) {
+  let { longitude, latitude } = location
   return "POINT(" + longitude + " " + latitude + ")"
 }
 
-export function pointWktToLocation(wkt){
+export function pointWktToLocation(wkt) {
   let start = wkt.indexOf("(")
   let end = wkt.indexOf(")")
-  let arr = wkt.substring(start + 1,end).trim().split(" ")
+  let arr = wkt.substring(start + 1, end).trim().split(" ")
   arr[0] = parseFloat(arr[0]);
   arr[1] = parseFloat(arr[1]);
   return arr
@@ -159,33 +159,33 @@ export function pointWktToLocation(wkt){
  * 米转度
  * @returns {number}
  */
-export function meterToDegree(m){
+export function meterToDegree(m) {
   let degree = m / (2 * Math.PI * 6371004) * 360;
   return degree
 }
 
-export const pointToBox = (pointWkt)=>{
+export const pointToBox = (pointWkt) => {
   let location = pointWktToLocation(pointWkt)
 
   let d = meterToDegree(1500)
   let dd = meterToDegree(10)
   //得到左上角点
-  let leftTop = [0,0]
+  let leftTop = [0, 0]
   leftTop[0] = location[0] - d - (dd * 15)
   leftTop[1] = location[1] + d + (dd * 2)
   //得到右上角点
-  let rightTop = [0,0]
+  let rightTop = [0, 0]
   rightTop[0] = location[0] + d + (dd * 15)
   rightTop[1] = location[1] + d + (dd * 2)
   //得到左下角点
-  let leftBottom = [0,0]
+  let leftBottom = [0, 0]
   leftBottom[0] = location[0] - d - (dd * 15)
   leftBottom[1] = location[1] - d - (dd * 2)
   //得到右下角点
-  let rightBottom = [0,0]
+  let rightBottom = [0, 0]
   rightBottom[0] = location[0] + d + (dd * 15)
   rightBottom[1] = location[1] - d - (dd * 2)
-   let wkt =  `POLYGON((${leftBottom[0]} ${leftBottom[1]}, ${leftTop[0]} ${leftTop[1]}, ${rightTop[0]} ${rightTop[1]}, ${rightBottom[0]} ${rightBottom[1]}, ${leftBottom[0]} ${leftBottom[1]}))`
+  let wkt = `POLYGON((${leftBottom[0]} ${leftBottom[1]}, ${leftTop[0]} ${leftTop[1]}, ${rightTop[0]} ${rightTop[1]}, ${rightBottom[0]} ${rightBottom[1]}, ${leftBottom[0]} ${leftBottom[1]}))`
   return wkt
 }
 
@@ -213,17 +213,17 @@ export function transformLonWithXY(x, y) {
 
 
 //检查视野范围是否超过了bbox
-export function checkRegion(bbox,region){
-  if(bbox.northeast.latitude < region.northeast.latitude ){
+export function checkRegion(bbox, region) {
+  if (bbox.northeast.latitude < region.northeast.latitude) {
     return true;
   }
-  if(bbox.northeast.longitude < region.northeast.longitude ){
+  if (bbox.northeast.longitude < region.northeast.longitude) {
     return true;
   }
-  if( bbox.southwest.latitude > region.southwest.latitude  ){
+  if (bbox.southwest.latitude > region.southwest.latitude) {
     return true;
   }
-  if(bbox.southwest.longitude > region.southwest.longitude  ){
+  if (bbox.southwest.longitude > region.southwest.longitude) {
     return true;
   }
   return false

src/views/old_mini/create_farm/index.vue

@@ -35,7 +35,7 @@
                     <div class="box-content">
                         <div class="create-title">
                             <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
-                            {{ isClient ? '新增用户' : '创建农场' }}
+                            {{ isClient ? "新增用户" : "创建农场" }}
                         </div>
                         <div class="create-content">
                             <div class="create-from">
@@ -57,28 +57,43 @@
                                             <div class="draw-btn" @click="toSubPage">点击勾选地块</div>
                                         </div>
                                     </el-form-item>
-                                    <el-form-item label="农场面积" prop="area">
+                                    <el-form-item label="农场面积" prop="mianji">
                                         <div class="area-box">
                                             <el-input
                                                 placeholder="勾选地块获得农场面积"
-                                                v-model="ruleForm.area"
+                                                v-model="ruleForm.mianji"
                                                 autocomplete="off"
-                                                style="width: fit-content;"
+                                                style="width: fit-content"
                                             />
                                             <div class="unit">亩</div>
                                         </div>
                                     </el-form-item>
-                                    <el-form-item label="种植作物" prop="phenologyId">
+                                    <el-form-item label="种植作物" prop="speciesItem">
                                         <div class="select-wrap">
-                                            <el-select @change="changeSpecie" class="select-item" v-model="ruleForm.speciesItem" placeholder="作物类型">
-                                                <el-option v-for="(item, index) in specieList" :key="index" :label="item.name" :value="{value: item.id, ...item}" />
+                                            <el-select
+                                                @change="changeSpecie"
+                                                class="select-item"
+                                                v-model="ruleForm.speciesItem"
+                                                placeholder="作物类型"
+                                            >
+                                                <el-option
+                                                    v-for="(item, index) in specieList"
+                                                    :key="index"
+                                                    :label="item.name"
+                                                    :value="{ value: item.id, ...item }"
+                                                />
                                             </el-select>
                                             <el-select
                                                 v-model="ruleForm.phenologyId"
                                                 placeholder="物候期"
                                                 class="period-select select-item"
                                             >
-                                                <el-option v-for="(item, index) in phenologyList" :key="index" :label="item.name" :value="item.id" />
+                                                <el-option
+                                                    v-for="(item, index) in phenologyList"
+                                                    :key="index"
+                                                    :label="item.name"
+                                                    :value="item.id"
+                                                />
                                             </el-select>
                                         </div>
                                     </el-form-item>
@@ -93,7 +108,9 @@
                             </div>
                             <div class="create-btn">
                                 <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
-                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">{{ isClient ? '添加' : '立即创建' }}</div>
+                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">
+                                    {{ isClient ? "添加" : "立即创建" }}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -107,11 +124,13 @@
 import customHeader from "@/components/customHeader.vue";
 import IndexMap from "./map/index.js";
 import { useRoute, useRouter } from "vue-router";
-import { mapLocation } from "./map/index.js"
+import { mapLocation } from "./map/index.js";
 import { onMounted, ref, reactive, watch, onActivated } from "vue";
 import { useStore } from "vuex";
 import { convertPointToArray } from "@/utils/index";
 import { ElMessage } from "element-plus";
+import { transformFromGCJToWGS, transformFromWGSToGCJ } from "@/utils/WSCoordinate.js";
+
 const route = useRoute();
 const router = useRouter();
 const store = useStore();
@@ -119,28 +138,35 @@ const store = useStore();
 const indexMap = new IndexMap();
 const mapContainer = ref(null);
 onMounted(() => {
-    centerPoint.value = store.state.home.miniUserLocationPoint
+    centerPoint.value = store.state.home.miniUserLocationPoint;
+    const arr = convertPointToArray(centerPoint.value);
+    getLocationName(`${arr[1]},${arr[0]}`);
     indexMap.initMap(centerPoint.value, mapContainer.value);
-    const arr = convertPointToArray(centerPoint.value)
-    getLocationName(`${arr[1]},${arr[0]}`)
 
-    getSpecieList()
+    getSpecieList();
 });
 
-const polygonArr = ref(null)
+const polygonArr = ref(null);
 const isClient = ref(false);
 onActivated(() => {
     if (route.query.type) {
         isClient.value = true;
     }
+    if (route.query.isFromHome) {
+        centerPoint.value = store.state.home.miniUserLocationPoint;
+        const arr = convertPointToArray(centerPoint.value);
+        getLocationName(`${arr[1]},${arr[0]}`);
+        indexMap.setMapPosition(arr);
+    }
+    indexMap.clearLayer();
     // 绘制勾画范围
-    const polygonData = store.state.home.polygonData
+    const polygonData = store.state.home.polygonData;
     if (polygonData) {
-        indexMap.setAreaGeometry(polygonData?.geometryArr)
-        polygonArr.value = polygonData.geometryArr
-        ruleForm.area = polygonData.area
+        indexMap.setAreaGeometry(polygonData?.geometryArr);
+        polygonArr.value = polygonData.geometryArr;
+        ruleForm.mianji = polygonData.mianji;
     }
-})
+});
 
 // 搜索
 const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
@@ -181,25 +207,26 @@ const remoteMethod = async (keyword) => {
 
 const handleSearchRes = (v) => {
     const parts = v.value.split(",");
-    const coordinateArray = [parseFloat(parts[1]), parseFloat(parts[0])];
+    let { latitude, longitude } = transformFromGCJToWGS(parseFloat(parts[0]), parseFloat(parts[1]));
+    const coordinateArray = [longitude, latitude];
     indexMap.setMapPosition(coordinateArray);
-    centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`
+    centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`;
     ruleForm.address = v.item?.title || v.item?.address;
-    pointAddress.value = v.item?.province + v.item?.city + v.item?.district
+    pointAddress.value = v.item?.province + v.item?.city + v.item?.district;
 };
 
 // 表单
 const ruleFormRef = ref(null);
 const ruleForm = reactive({
     address: "",
-    area: "",
-    speciesItem: "",
+    mianji: "",
+    speciesItem: null,
     phenologyId: "",
     name: "",
 });
 const rules = reactive({
     address: [{ required: true, message: "请选择农场位置", trigger: "blur" }],
-    area: [{ required: true, message: "请勾选地块获得农场面积", trigger: "blur" }],
+    mianji: [{ required: true, message: "请勾选地块获得农场面积", trigger: "blur" }],
     speciesItem: [{ required: true, message: "请选择品类", trigger: "blur" }],
     phenologyId: [{ required: true, message: "请选择物候期", trigger: "blur" }],
     name: [{ required: true, message: "请输入您的农场名称", trigger: "blur" }],
@@ -214,13 +241,15 @@ const submitForm = (formEl) => {
                 wkt: centerPoint.value,
                 speciesId: ruleForm.speciesItem?.id,
                 containerId: ruleForm.speciesItem?.defaultContainerId,
-                // geom: polygonArr.value
-            }
+                geom: polygonArr.value,
+            };
             VE_API.farm.saveFarm(params).then((res) => {
-                console.log('code', res.code);
-                ElMessage.success("创建成功")
-                router.replace('/home?reload=true')
-            })
+                ElMessage.success("创建成功");
+                // 重置表单
+                ruleFormRef.value.resetFields();
+                store.commit("home/SET_FARM_POLYGON", null);
+                router.replace("/home?reload=true");
+            });
             console.log("submit!", params);
         } else {
             console.log("error submit!");
@@ -231,56 +260,60 @@ const submitForm = (formEl) => {
 const resetForm = (formEl) => {
     if (!formEl) return;
     formEl.resetFields();
+    store.commit("home/SET_FARM_POLYGON", null);
     router.go(-1);
 };
 
-const centerPoint = ref(null)
+const centerPoint = ref(null);
 
 function toSubPage() {
-    router.push(`/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.address}&pointAddress=${pointAddress.value}`);
+    router.push(
+        `/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.address}&pointAddress=${pointAddress.value}`
+    );
 }
 
-const pointAddress = ref(null)
+const pointAddress = ref(null);
 function getLocationName(location) {
     const params = {
-            key: MAP_KEY,
-            location,
-        };
-        VE_API.old_mini_map.location(params).then(({ result }) => {
-            // locationVal.value = result.formatted_addresses.recommend;
-            const add = result.formatted_addresses?.recommend
-                ? result.formatted_addresses.recommend
-                : result.address + "";
-            ruleForm.address = add
-            pointAddress.value = result.address
-        });
+        key: MAP_KEY,
+        location,
+    };
+    VE_API.old_mini_map.location(params).then(({ result }) => {
+        // locationVal.value = result.formatted_addresses.recommend;
+        const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
+        ruleForm.address = add;
+        pointAddress.value = result.address;
+    });
 }
 
-watch(() => mapLocation.data,(newValue, oldValue) => {
-    if (newValue) {
-        centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`
-        getLocationName(`${newValue[1]},${newValue[0]}`)
+watch(
+    () => mapLocation.data,
+    (newValue, oldValue) => {
+        if (newValue) {
+            let { latitude, longitude } = transformFromWGSToGCJ(newValue[1], newValue[0]);
+            centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`;
+            getLocationName(`${latitude},${longitude}`);
+        }
     }
-})
+);
 
-const specieList = ref([])
+const specieList = ref([]);
 
 function getSpecieList() {
-    VE_API.farm.fetchSpecieList().then(({data}) => {
-        specieList.value = data
-    })
+    VE_API.farm.fetchSpecieList().then(({ data }) => {
+        specieList.value = data;
+    });
 }
 
 function changeSpecie(v) {
-    getPhenology(v.defaultContainerId)
+    getPhenology(v.defaultContainerId);
 }
 
-const phenologyList = ref([])
+const phenologyList = ref([]);
 function getPhenology(containerId) {
-    VE_API.farm.fetchPhenologyList({containerId}).then(({data}) => {
-        console.log('getPhenology', data);
-        phenologyList.value = data
-    })
+    VE_API.farm.fetchPhenologyList({ containerId }).then(({ data }) => {
+        phenologyList.value = data;
+    });
 }
 </script>
 

src/views/old_mini/create_farm/map/editMap.js

@@ -55,7 +55,7 @@ class EditMap {
   setAreaGeometry(geometryArr) {
     let that = this
     geometryArr.map(item => {
-      that.kmap.setLayerWkt(item.featureWkt)
+      that.kmap.setLayerWkt(item)
     })
   }
 
@@ -70,7 +70,7 @@ class EditMap {
     let area = 0
     // 获取图层上的Polygon，转成geoJson用于回显
     features.forEach(item => {
-      geometryArr.push({featureWkt: new WKT().writeFeature(item)})
+      geometryArr.push(new WKT().writeFeature(item))
       let geom = item.getGeometry().clone()
       geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
       let areaItem = getArea(geom)

src/views/old_mini/create_farm/map/index.js

@@ -83,7 +83,7 @@ class IndexMap {
     this.clearLayer()
     let that = this
     geometryArr.map(item => {
-      that.kmap.setLayerWkt(item.featureWkt)
+      that.kmap.setLayerWkt(item)
     })
   }
 }

src/views/old_mini/home/index.vue

@@ -85,9 +85,7 @@ const heightChange = (height) => {
 };
 
 function toSubPage() {
-    router.push({
-        path: "/create_farm",
-    });
+    router.push("/create_farm?isFromHome=true");
 }
 
 function toFarmPhoto() {

src/views/old_mini/modify_work/completedWork.vue

@@ -77,60 +77,65 @@
                         </div>
                     </div>
                     <div class="new-wrap">
-                            <div class="new-title">
-                                <div class="title-1"><div class="table-name">使用功效</div></div>
-                                <div class="title-2"><div class="table-name">肥药名称</div></div>
-                                <div class="title-3"><div class="table-name">执行方式</div></div>
-                                <div class="title-4"><div class="table-name">亩兑水量</div></div>
-                                <div class="title-5"><div class="table-name">单亩用量</div></div>
-                            </div>
+                        <div class="new-title">
+                            <div class="title-1"><div class="table-name">使用功效</div></div>
+                            <div class="title-2"><div class="table-name">肥药名称</div></div>
+                            <div class="title-3"><div class="table-name">执行方式</div></div>
+                            <div class="title-4"><div class="table-name">亩兑水量</div></div>
+                            <div class="title-5"><div class="table-name">单亩用量</div></div>
+                        </div>
+                        <div
+                            class="new-table-wrap"
+                            v-for="(prescriptionItem, prescriptionI) in prescriptioData.prescriptionList"
+                            :key="prescriptionI"
+                        >
                             <div
-                                class="new-table-wrap"
-                                v-for="(prescriptionItem, prescriptionI) in prescriptioData.prescriptionList"
-                                :key="prescriptionI"
+                                class="new-prescription"
+                                v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList"
+                                :key="subI"
                             >
-                                <div
-                                    class="new-prescription"
-                                    v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList"
-                                    :key="subI"
-                                >
-                                    <div class="new-table">
-                                        <div class="line-l">
-                                            <div class="line-1 title-1">{{ subP.typeName }}</div>
-                                            <div class="line-2">{{ subP.defaultName }}</div>
+                                <div class="new-table">
+                                    <div class="line-l">
+                                        <div class="line-1 title-1">{{ subP.typeName }}</div>
+                                        <div class="line-2">{{ subP.defaultName }}</div>
+                                    </div>
+                                    <div
+                                        class="line-r"
+                                        :class="{ 'has-border': prescriptioData.usageMode === '叶面施' }"
+                                    >
+                                        <div class="line-3">
+                                            <div
+                                                class="sub-line title-3"
+                                                :class="{ 'execute-line': prescriptioData.usageMode === '叶面施' }"
+                                            >
+                                                人工
+                                            </div>
+                                            <div class="sub-line title-4">{{ subP.ratio }}ML</div>
+                                            <div class="sub-line title-5">{{ subP.muUsage }}{{ subP.unit }}</div>
                                         </div>
-                                        <div
-                                            class="line-r"
-                                            :class="{ 'has-border': prescriptioData.usageMode === '叶面施' }"
-                                        >
-                                            <div class="line-3">
-                                                <div
-                                                    class="sub-line title-3"
-                                                    :class="{ 'execute-line': prescriptioData.usageMode === '叶面施' }"
-                                                >
-                                                    人工
-                                                </div>
-                                                <div class="sub-line title-4">{{ subP.ratio }}ML</div>
-                                                <div class="sub-line title-5">{{ subP.muUsage }}{{ subP.unit }}</div>
+                                        <div class="line-4" v-if="prescriptioData.usageMode === '叶面施'">
+                                            <div class="sub-line title-3 execute-line">无人机</div>
+                                            <div class="sub-line title-4">
+                                                {{ subP.ratio2 ? subP.ratio2 + subP.unit : "---" }}
                                             </div>
-                                            <div class="line-4" v-if="prescriptioData.usageMode === '叶面施'">
-                                                <div class="sub-line title-3 execute-line">无人机</div>
-                                                <div class="sub-line title-4">
-                                                    {{ subP.ratio2 ? subP.ratio2 + subP.unit : "---" }}
-                                                </div>
-                                                <div class="sub-line title-5">
-                                                    {{ subP.muUsage2 ? subP.muUsage2 + subP.unit : "---" }}
-                                                </div>
+                                            <div class="sub-line title-5">
+                                                {{ subP.muUsage2 ? subP.muUsage2 + subP.unit : "---" }}
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
                                 </div>
+                                <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
                             </div>
                         </div>
+                    </div>
                 </div>
 
-                <div class="work-map"></div>
+                <div class="work-map">
+                    <div class="card-title">执行农事区域</div>
+                    <div class="map-content">
+                        <div class="map-dom" ref="areaRef"></div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -138,29 +143,40 @@
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import NewFarmMap from "./newFarmMap";
 
 // 0：执行， 1： 复核
 const status = ref(0);
 
 const prescriptioData = ref({
-    prescriptionList: [{
-        name: "营养",
-        pesticideFertilizerList: [
-            {
-                key: 1,
-                typeName: "营养",
-                defaultName: "乙烯利",
-                muUsage: "50",
-                muUsage2: "500",
-                ratio: "400",
-                ratio2: "400",
-                unit: "ml",
-                remark: "这是是用药注意事项的备注，这是是用药注意事项的备注",
-            },
-        ]
-    }],
+    prescriptionList: [
+        {
+            name: "营养",
+            pesticideFertilizerList: [
+                {
+                    key: 1,
+                    typeName: "营养",
+                    defaultName: "乙烯利",
+                    muUsage: "50",
+                    muUsage2: "500",
+                    ratio: "400",
+                    ratio2: "400",
+                    unit: "ml",
+                    remark: "这是是用药注意事项的备注，这是是用药注意事项的备注",
+                },
+            ],
+        },
+    ],
     usageMode: "叶面施",
+});
+
+// 地图
+const areaRef = ref(null);
+let newFarmMap = new NewFarmMap();
+onMounted(() => {
+    
+    // newFarmMap.initMap(point, areaRef.value);
 })
 </script>
 
@@ -298,21 +314,21 @@ const prescriptioData = ref({
                 padding: 8px 0;
             }
         }
-        
-            .form-item {
-                display: flex;
-                align-items: center;
-                font-size: 14px;
-                color: #767676;
-                height: 24px;
-                .item-name {
-                    width: 80px;
-                    color: rgba(0, 0, 0, 0.2);
-                }
-            }
-            .form-item + .form-item {
-                padding-top: 2px;
+
+        .form-item {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #767676;
+            height: 24px;
+            .item-name {
+                width: 80px;
+                color: rgba(0, 0, 0, 0.2);
             }
+        }
+        .form-item + .form-item {
+            padding-top: 2px;
+        }
 
         .farm-table {
             margin-top: 10px;
@@ -322,95 +338,95 @@ const prescriptioData = ref({
         }
 
         .new-wrap {
-    border-radius: 5px;
-    text-align: center;
-    border: 1px solid rgba(225, 225, 225, 0.5);
-    .new-title {
-        background: rgba(241, 241, 241, 0.4);
-        border-radius: 5px 5px 0 0;
-        border-bottom: 1px solid rgba(225, 225, 225, 0.5);
-        display: flex;
-        color: #767676;
-        // justify-content: space-around;
-        padding: 5px 6px;
-        font-size: 12px;
-        .table-name {
-            width: 24px;
-            font-size: 12px;
-            margin: 0 auto;
-        }
-    }
-
-    .title-1 {
-        width: 46px;
-    }
-    .title-2 {
-        flex: 1;
-    }
-    .title-3 {
-        width: 52px;
-    }
-    .title-4 {
-        width: 56px;
-    }
-    .title-5 {
-        width: 52px;
-    }
-    .new-table-wrap {
-        padding: 5px;
-        .new-prescription {
-            .new-table {
+            border-radius: 5px;
+            text-align: center;
+            border: 1px solid rgba(225, 225, 225, 0.5);
+            .new-title {
+                background: rgba(241, 241, 241, 0.4);
+                border-radius: 5px 5px 0 0;
+                border-bottom: 1px solid rgba(225, 225, 225, 0.5);
                 display: flex;
-                align-items: center;
-                border: 1px solid rgba(225, 225, 225, 0.8);
-                background: #fff;
-                border-radius: 5px;
-                color: rgba(0, 0, 0, 0.6);
-                font-size: 11px;
-                .line-l {
-                    display: flex;
-                    flex: 1;
-                    .line-2 {
-                        flex: 1;
-                        padding: 0 2px;
-                    }
+                color: #767676;
+                // justify-content: space-around;
+                padding: 5px 6px;
+                font-size: 12px;
+                .table-name {
+                    width: 24px;
+                    font-size: 12px;
+                    margin: 0 auto;
                 }
-                .line-r {
-                    &.has-border {
-                        border-left: 1px solid rgba(225, 225, 225, 0.8);
-                    }
-                    .line-3 {
-                        display: flex;
-                        align-items: center;
-                    }
-                    .sub-line {
-                        padding: 10px 0;
-                    }
-                    .line-4 {
+            }
+
+            .title-1 {
+                width: 46px;
+            }
+            .title-2 {
+                flex: 1;
+            }
+            .title-3 {
+                width: 52px;
+            }
+            .title-4 {
+                width: 56px;
+            }
+            .title-5 {
+                width: 52px;
+            }
+            .new-table-wrap {
+                padding: 5px;
+                .new-prescription {
+                    .new-table {
                         display: flex;
                         align-items: center;
-                        border-top: 1px solid rgba(225, 225, 225, 0.8);
+                        border: 1px solid rgba(225, 225, 225, 0.8);
+                        background: #fff;
+                        border-radius: 5px;
+                        color: rgba(0, 0, 0, 0.6);
+                        font-size: 11px;
+                        .line-l {
+                            display: flex;
+                            flex: 1;
+                            .line-2 {
+                                flex: 1;
+                                padding: 0 2px;
+                            }
+                        }
+                        .line-r {
+                            &.has-border {
+                                border-left: 1px solid rgba(225, 225, 225, 0.8);
+                            }
+                            .line-3 {
+                                display: flex;
+                                align-items: center;
+                            }
+                            .sub-line {
+                                padding: 10px 0;
+                            }
+                            .line-4 {
+                                display: flex;
+                                align-items: center;
+                                border-top: 1px solid rgba(225, 225, 225, 0.8);
+                            }
+                            .execute-line {
+                                border-right: 1px solid rgba(225, 225, 225, 0.8);
+                            }
+                        }
                     }
-                    .execute-line {
-                        border-right: 1px solid rgba(225, 225, 225, 0.8);
+                    .note-text {
+                        margin: 8px 0 4px 0;
+                        color: rgba(0, 0, 0, 0.4);
+                        background: #fff;
+                        padding: 6px 8px;
+                        border-radius: 5px;
+                        text-align: left;
+                        font-size: 11px;
                     }
                 }
-            }
-            .note-text {
-                margin: 8px 0 4px 0;
-                color: rgba(0, 0, 0, 0.4);
-                background: #fff;
-                padding: 6px 8px;
-                border-radius: 5px;
-                text-align: left;
-                font-size: 11px;
+                .new-prescription + .new-prescription {
+                    padding-top: 8px;
+                }
             }
         }
-        .new-prescription + .new-prescription {
-            padding-top: 8px;
-        }
-    }
-}
     }
 }
 </style>

src/views/old_mini/modify_work/index.vue

@@ -324,7 +324,6 @@ onMounted(() => {
             },
         ],
     }));
-console.log('dynamicValidateForm.prescriptionList', dynamicValidateForm.prescriptionList);
     const point = store.state.home.miniUserLocationPoint;
     newFarmMap.initMap(point, areaRef.value);
     eventBus.on("editNsMap:areaVal", getArea);