feat：添加专家处方确定农事页面

src/api/modules/regionalInformation.js

@@ -1,29 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-02-07 13:40:50
- * @LastEditTime: 2021-12-02 15:59:52
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \vue3-element-admin\src\api\modules\system.js
- */
-// const Mock = require("mockjs"); //引入
-const config = require("../config")
-
-module.exports = {
-    aPictureGarden: {
-        url: config.base_url + "a_picture/garden/legend/{gardenId}",
-        type: "get",
-    },
-    aPictureTree: {
-        url: config.base_url + "a_picture/tree/legend/{gardenId}",
-        type: "get",
-    },
-    aPictureTreeList: {
-        url: config.base_url + "a_picture/treeList",
-        type: "get",
-    },
-    aPictureGrid: {
-        url: config.base_url + "a_picture/garden/grid_pic/{gardenId}/{key}",
-        type: "get",
-    }
-};

src/api/modules/sample.js

@@ -0,0 +1,12 @@
+	
+//采样点接口
+const config = require("../config")
+
+
+
+module.exports = {
+    list: {
+        url: config.base_url + "lz_sample/list",
+        type: "post",
+    },
+}

src/router/mainRoutes.js

@@ -36,7 +36,7 @@ export default [
         name: "AddFarm",
         component: () => import("@/views/addFarm/index.vue"),
     },
-    // 农事
+    // 农事 待执行页面
     {
         path: "/work_detail",
         name: "WorkDetail",

src/views/addFarm/components/table.vue

@@ -136,10 +136,3 @@ const list = ref([
     }
 }
 </style>
-<style lang="scss">
-.v-dropdown-menu {
-    .active {
-        color: #409eff;
-    }
-}
-</style>

src/views/workDetail/areaMap.js

@@ -3,6 +3,7 @@ import config from "@/api/config.js";
 import * as KMap from "@/utils/ol-map/KMap";
 import Stroke from "ol/style/Stroke";
 import * as util from "@/common/ol_common.js";
+import { newAreaFeature } from "@/common/util";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import {Point } from 'ol/geom';
@@ -20,9 +21,27 @@ class AreaMap {
   }
 
   initMap(location, target) {
+    let vectorStyle = new KMap.VectorStyle();
+    // 位置图标
+    this.blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99999, {
+        minZoom: 1,
+        maxZoom: 22,
+    });
     let level = 16;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
     this.kmap = new KMap.Map( target, level, coordinate[0], coordinate[1], null, 1, 22 ,"vec", true, true);
+    this.kmap.addLayer(this.blueRegionLayer.layer);
+    let xyz = config.base_img_url + "map/lby/{z}/{x}/{y}.png";
+    this.kmap.addXYZLayer(xyz, { minZoom: 8, maxZoom: 22 }, 2);
+  }
+
+  setData(item){
+    let feature = newAreaFeature(item);
+    this.blueRegionLayer.addFeature(feature);
+  }
+
+  fit(){
+    this.kmap.fit(this.blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
   }
 
   // 重新渲染地图
@@ -32,9 +51,9 @@ class AreaMap {
     }, 1000);
   }
 
-  fit(geomOrExtent, padding) {
-    this.kmap.fit(geomOrExtent, padding);
-  }
+  // fit(geomOrExtent, padding) {
+  //   this.kmap.fit(geomOrExtent, padding);
+  // }
 }
 
 export default AreaMap;

src/views/workDetail/completed.vue

@@ -8,7 +8,7 @@
                     返回
                 </div>
                 <div class="tabs-group">
-                    <div class="tabs-item" v-for="item in 5" :key="item">农事名称0{{item}}</div>
+                    <div class="tabs-item" :class="{active:active===index}" @click="handleActive(index)" v-for="(item,index) in 5" :key="item">农事名称0{{item}}</div>
                 </div>
             </div>
             <div class="content-body">
@@ -379,6 +379,10 @@ const workItem = {
         },
     ],
 };
+const active = ref(0)
+const handleActive = (index) =>{
+    active.value = index
+}
 
 const router = useRouter();
 const route = useRoute();
@@ -478,9 +482,16 @@ const handleOk = () => {};
             display: flex;
             font-size: 18px;
             color: #cecece;
-            border-bottom: 1px solid #444444;
+            border-bottom: 2px solid #444444;
             .tabs-item{
                 padding: 0 14px 14px 14px;
+                margin-bottom: -2px;
+                border-bottom: 2px solid transparent;
+                cursor: pointer;
+                &.active{
+                    color: #FFD489;
+                    border-bottom-color: #FFD489;
+                }
                 
             }
             .tabs-item + .tabs-item{

src/views/workDetail/components/boxClass.scss

@@ -96,7 +96,6 @@
             }
         }
         .prescription-result {
-            // border: 0.5px solid rgba(218, 218, 218, 0.57);
             border: none;
             .result-index {
                 background: #DDDDDD;
@@ -120,40 +119,6 @@
             }
         }
     }
-    .work-line {
-        position: absolute;
-        left: 0;
-        top: 20px;
-        height: 100%;
-        .line-box {
-            position: relative;
-            height: 100%;
-            &::after {
-                content: "";
-                position: absolute;
-                top: 4.5px;
-                left: 5px;
-                width: 1px;
-                height: calc(100% + 20px);
-                background: #2199f8;
-            }
-        }
-        .line-dotted {
-            width: 10px;
-            height: 10px;
-            background: rgba(33, 153, 248, 0.2);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .dotted-inset {
-                width: 7px;
-                height: 7px;
-                background: #2199f8;
-                border-radius: 50%;
-            }
-        }
-    }
 
     .card-item-title {
         display: inline-flex;
@@ -175,12 +140,8 @@
         }
     }
     .work-info {
-        margin-left: 22px;
-        background: #232323;
-        border: 1px solid rgba(33, 153, 248, 0.57);
-        border-radius: 5px;
-        padding: 12px 0 12px 10px;
         position: relative;
+        color: #fff;
         .step-box {
             position: absolute;
             right: 10px;
@@ -204,13 +165,13 @@
         .info-item {
             display: flex;
             align-items: center;
+            font-size: 15px;
+            margin-bottom: 5px;
             .info-name {
-                color: rgba(0, 0, 0, 0.2);
+                color: #727272;
                 flex: none;
             }
             .info-value {
-                color: rgba(0, 0, 0, 0.4);
-                padding-left: 12px;
                 display: flex;
                 align-items: center;
                 &.primary-color {
@@ -250,7 +211,6 @@
             }
         }
         .info-item + .info-item {
-            // margin-top: 2px;
             &.time-picker {
                 margin-top: 6px;
             }
@@ -262,9 +222,9 @@
             .desc {
                 margin-top: 12px;
                 border-radius: 4px;
-                color: #999999;
+                color: #727272;
                 padding: 10px;
-                background: #fff;
+                background: rgba(255, 212, 137, 0.06);
                 span {
                     color: #2199f8;
                 }
@@ -324,12 +284,12 @@
                         }
                     }
                 }
-                .prescription-map {
-                    border: none;
-                }
                 .sub-name {
-                    color: #2199f8;
-                    font-size: 14px;
+                    font-size: 15px;
+                    margin-bottom: 5px;
+                    span{
+                        color: #727272;
+                    }
                 }
                 .edit-select {
                     ::v-deep {

src/views/workDetail/components/executeBlueRegion.vue

@@ -1,103 +0,0 @@
-<template>
-    <div class="bottom-map" ref="areaRef"></div>
-</template>
-
-<script setup>
-import Layer from "ol/layer/Vector";
-import config from "@/api/config.js";
-import { newAreaFeature } from "@/common/util";
-import * as KMap from "@/utils/ol-map/KMap";
-import Stroke from "ol/style/Stroke";
-import * as util from "@/common/ol_common.js";
-import Style from "ol/style/Style";
-import Icon from "ol/style/Icon";
-import { Point } from "ol/geom";
-import Feature from "ol/Feature";
-import WKT from "ol/format/WKT";
-import { onMounted, ref } from "vue";
-
-const props = defineProps({
-    executeBlueZones: {
-        type: String,
-        required: true,
-    },
-    executeBlueZones: {}
-});
-
-const areaRef = ref(null);
-
-const initMap = () => {
-    let executeBlueZones = props.executeBlueZones
-    let vectorStyle = new KMap.VectorStyle();
-    // 位置图标
-    let blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99999, {
-        minZoom: 1,
-        maxZoom: 22,
-    });
-    let level = 16;
-    let coordinate = util.wktCastGeom("POINT(113.6142086995688 23.585836479509055)").getFirstCoordinate();
-    let kmap = new KMap.Map(areaRef.value, level, coordinate[0], coordinate[1], null, 1, 22, "img", false, false);
-    kmap.addLayer(blueRegionLayer.layer);
-    let xyz = config.base_img_url + "map/lby/{z}/{x}/{y}.png";
-    kmap.addXYZLayer(xyz, { minZoom: 8, maxZoom: 22 }, 2);
-    // let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
-    // kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
-
-    
-    VE_API.farm.blueRegionList({ farmId: 766 }).then(({ data, code }) => {
-        console.log("dat22222a", executeBlueZones);
-        for (let item of data) {
-          executeBlueZones.map((zone) => {
-                if (zone.id === item.blueZoneCode) {
-                    item.wkt = item.geom;
-                    item.id = item.blueZoneCode;
-                    let feature = newAreaFeature(item);
-                    blueRegionLayer.addFeature(feature);
-                }
-            });
-        }
-        kmap.fit(blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
-        kmap.addLayer(blueRegionLayer.layer);
-    });
-
-    // VE_API.temp.tempBlueRegionList().then(({ data, code }) => {
-    //     console.log("ddd", data);
-    //     for (let item of data) {
-    //         let feature = newAreaFeature(item);
-    //         let blueRegionLevel = executeBlueRegion.find((executeBlueRegionItem) => {
-    //             return executeBlueRegionItem.id === parseInt(item.id);
-    //         });
-    //         let fillColor = "";
-    //         let strokeColor = "#2199F8";
-    //         if (blueRegionLevel && blueRegionLevel.level == 1) {
-    //             fillColor = strokeColor + "40";
-    //             strokeColor += "40";
-    //         } else if (blueRegionLevel && blueRegionLevel.level == 2) {
-    //             fillColor = strokeColor + "90";
-    //             strokeColor += "90";
-    //         } else {
-    //             fillColor = "rgba(111,110,110,0.50)";
-    //             strokeColor = "rgba(111,110,110,0.50)";
-    //         }
-    //         feature.setStyle(vectorStyle.getPolygonStyle(fillColor, strokeColor, 1));
-    //         blueRegionLayer.addFeature(feature);
-    //     }
-    //     kmap.fit(blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
-    // });
-};
-
-const getBlueRegion = (executeBlueZones) => {
-};
-
-onMounted(() => {
-    initMap();
-});
-</script>
-
-<style scoped>
-.bottom-map {
-    width: 100%;
-    height: 150px;
-    border-radius: 8px;
-}
-</style>

src/views/workDetail/components/prescriptionBox.vue

@@ -1,40 +1,36 @@
 <template>
     <!-- 专家处方 -->
     <div class="work-item" :class="{ dark: prescriptioData?.progress === 0 && ROLETYPE != '3' }">
-        <div class="work-line">
-            <div class="line-box">
-                <div class="line-dotted">
-                    <div class="dotted-inset"></div>
-                </div>
-            </div>
-        </div>
         <div class="work-info">
-            <img v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'" class="todo-img" src="@/assets/img/gallery/todo.png" />
-            <img v-if="prescriptioData?.progress !== 0" class="done-img" src="@/assets/img/gallery/done.png" />
-            <div class="card-item-title"><span class="dotted"></span>专家处方</div>
+            <img
+                v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'"
+                class="todo-img"
+                src="@/assets/img/gallery/todo.png"
+            />
             <div class="prescription-box">
                 <div class="step-box">
-                    <step-box :card="infoItem" :isDone="infoItem.status === 0 && (infoItem.reCheck === 1 || infoItem.execute === 4)" v-if="infoItem.orderStatus || infoItem.status === 0 || infoItem.orderStatus === 0"></step-box>
+                    <step-box
+                        :card="infoItem"
+                        :isDone="infoItem.status === 0 && (infoItem.reCheck === 1 || infoItem.execute === 4)"
+                        v-if="infoItem.orderStatus || infoItem.status === 0 || infoItem.orderStatus === 0"
+                    ></step-box>
                 </div>
-                <!-- <div class="blur-bg">
-                        <div class="lock-btn">解锁智能处方</div>
-                    </div> -->
                 <div class="work-info-conetnt">
                     <div class="info-item">
-                        <div class="info-name">农事编号</div>
+                        <div class="info-name">农事编号：</div>
                         <div class="info-value">{{ infoItem.orderId }}</div>
                     </div>
                     <div class="info-item">
-                        <div class="info-name">服务亩数</div>
+                        <div class="info-name">服务亩数：</div>
                         <div class="info-value">{{ infoItem.area }}亩</div>
                     </div>
                     <div class="info-item">
-                        <div class="info-name">服务区域</div>
+                        <div class="info-name">服务区域：</div>
                         <div class="info-value">{{ infoItem.serviceRegion }}</div>
                     </div>
                     <div v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'">
                         <div class="info-item">
-                            <div class="info-name">触发条件</div>
+                            <div class="info-name">触发条件：</div>
                             <div class="info-value">
                                 {{ infoItem.farmWorkLibName }}
                                 <div class="select-value">
@@ -47,7 +43,7 @@
                             </div>
                         </div>
                         <div class="info-item time-picker">
-                            <div class="info-name">执行时间</div>
+                            <div class="info-name">执行时间：</div>
                             <div class="info-value">
                                 <el-date-picker
                                     style="width: 150px"
@@ -63,31 +59,30 @@
                     </div>
                     <div v-else>
                         <div class="info-item">
-                            <div class="info-name">触发条件</div>
+                            <div class="info-name">触发条件：</div>
                             <div class="info-value">{{ infoItem.farmWorkLibName }}</div>
                         </div>
                         <div class="info-item">
-                            <div class="info-name">执行时间</div>
+                            <div class="info-name">执行时间：</div>
                             <div class="info-value">{{ infoItem.executeDate }}</div>
                         </div>
                     </div>
-                    <!-- <div class="info-item">
-                        <li class="info-name">执行时间</li>
-                        <div class="info-value primary-color">2025.01.12</div>
-                    </div> -->
                 </div>
                 <div class="desc">
-                    {{ prescriptioData?.expertPrescription }}
+                    您果园周边 3公里 出现虫害。根据气象模型推算，您的果园出现 卷叶蛾 风险达到90％。手机拍照上传
+                    果园照片，自动预测物候期可以确定.
+                    <!-- {{ prescriptioData?.expertPrescription }} -->
                 </div>
                 <div class="prescription-item" v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'">
                     <div class="recipe-box">
                         <div class="recipe-title">
-                            <div class="recipe-name">编辑处方</div>
+                            <div class="recipe-name">药物处方</div>
                             <div class="recipe-btn" @click="addDomain">
-                                <el-icon><Plus /></el-icon>新增药物
+                                <el-icon class="icon"><Plus /></el-icon>新增药物
                             </div>
                         </div>
-                        <div class="recipe-item">
+                        <custom-table type="0" @handleDelete="removeDomain" isEdit :tableHeader="tableHeader" :tableData="dynamicValidateForm.domains"></custom-table>
+                        <!-- <div class="recipe-item">
                             <div class="recipe-form">
                                 <el-form
                                     ref="formRef"
@@ -106,13 +101,6 @@
                                                 <div class="form-l">使用功效</div>
                                                 <div class="form-r r-text">
                                                     {{ domain.typeName }}
-                                                    <!-- <el-select
-                                                        v-model="domain.typeName"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                        >
-                                                            <el-option :label="domain.typeName" :value="domain.typeName" />
-                                                    </el-select> -->
                                                 </div>
                                             </div>
                                             <div class="box-item">
@@ -145,14 +133,6 @@
                                                         style="width: 140px"
                                                         placeholder="请输入"
                                                     />
-                                                    <!-- <el-select
-                                                        v-model="domain.value3"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                        >
-                                                            <el-option label="1ml:5000ml" value="1" />
-                                                            <el-option label="1ml:10000ml" value="3" />
-                                                    </el-select> -->
                                                 </div>
                                             </div>
                                             <div class="box-item sub-item">
@@ -183,14 +163,6 @@
                                                         style="width: 140px"
                                                         placeholder="请输入"
                                                     />
-                                                    <!-- <el-select
-                                                        v-model="domain.value5"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                        >
-                                                            <el-option label="1:5000ml" value="1" />
-                                                            <el-option label="1:10000ml" value="3" />
-                                                    </el-select> -->
                                                 </div>
                                             </div>
                                             <div class="form-title">无人机方式</div>
@@ -205,30 +177,8 @@
                                                         style="width: 140px"
                                                         placeholder="请输入"
                                                     />
-                                                    <!-- <el-select
-                                                        v-model="domain.value6"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                        >
-                                                            <el-option label="1ml:5000ml" value="1" />
-                                                            <el-option label="1ml:10000ml" value="3" />
-                                                    </el-select> -->
                                                 </div>
                                             </div>
-                                            <!-- <div class="box-item sub-item">
-                                                <div class="form-l">施用方式
-                                                </div>
-                                                <div class="form-r">
-                                                    <el-select
-                                                        v-model="domain.value7"
-                                                        placeholder="请选择"
-                                                        style="width: 140px"
-                                                        >
-                                                            <el-option label="根部肥" value="1" />
-                                                            <el-option label="叶面肥" value="3" />
-                                                    </el-select>
-                                                </div>
-                                            </div> -->
                                             <div class="box-item sub-item">
                                                 <div class="form-l has-sub">
                                                     <div class="main-name">单亩用量</div>
@@ -265,101 +215,15 @@
                                     </el-form-item>
                                 </el-form>
                             </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="prescription-item" v-else>
-                    <div class="sub-title">
-                        <div class="sub-name">药物处方</div>
-                    </div>
-                    <div v-if="workType">
-                        <div
-                            class="item-table has-sub-title has-wrap-table"
-                            v-for="(item, index) in prescriptioData.pesticideFertilizers"
-                            :key="index"
-                        >
-                            <div class="prescription-result" :class="{ 'has-wrap': workType }">
-                                <div class="result-index">0{{ index + 1 }}</div>
-                                <div class="result-title">
-                                    <div class="title-item">
-                                        <div class="name">功效：</div>
-                                        <div class="value">{{ item.typeName }}</div>
-                                    </div>
-                                    <div class="title-item">
-                                        <div class="name">名称：</div>
-                                        <div class="value">{{ item.defaultName }}</div>
-                                    </div>
-                                </div>
-                                <div>
-                                    <el-table
-                                        :data="handleTableData(item)"
-                                        style="width: 100%"
-                                        :header-cell-style="{ background: '#F5F5F5' }"
-                                    >
-                                        <el-table-column label="" width="50">
-                                            <template #default="scope">
-                                                <div class="table-l-title">
-                                                    {{ scope.row.executeStyle == 1 ? "人工" : "无人机" }}
-                                                </div>
-                                            </template>
-                                        </el-table-column>
-                                        <el-table-column label="配比" width="56">
-                                            <template #default="scope">
-                                                {{ scope.row.ratio ? scope.row.ratio + scope.row.unit : "---" }}
-                                            </template>
-                                        </el-table-column>
-                                        <el-table-column prop="usageMode" label="施用方式" width="56" />
-                                        <el-table-column prop="muUsage" label="单亩用量">
-                                            <template #default="scope">
-                                                {{ scope.row.muUsage ? scope.row.muUsage + scope.row.unit : "---" }}
-                                            </template>
-                                        </el-table-column>
-                                    </el-table>
-                                </div>
-                                <div class="remark-text">备注：{{ item.remark }}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div v-else class="item-table has-sub-title no-wrap-table">
-                        <div class="prescription-result">
-                            <el-table
-                                :data="prescriptioData.pesticideFertilizers"
-                                style="width: 100%"
-                                :header-cell-style="{ background: '#F5F5F5' }"
-                            >
-                                <el-table-column prop="typeName" label="功效" width="42" />
-                                <el-table-column prop="defaultName" label="名称"/>
-                                <el-table-column label="配比" width="52">
-                                    <template #default="scope">
-                                        {{ scope.row.ratio ? scope.row.ratio + scope.row.unit : "---" }}
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="usageMode" label="施用方式" width="42" />
-                                <el-table-column prop="muUsage" label="单亩用量" width="42">
-                                    <template #default="scope">
-                                        {{ scope.row.muUsage ? scope.row.muUsage + scope.row.unit : "---" }}
-                                    </template>
-                                </el-table-column>
-                                <el-table-column label="执行方式" width="40">
-                                    <template #default="scope">
-                                        <div class="table-l-title">
-                                            {{ scope.row.executeStyle == 1 ? "人工" : "人工" }}
-                                        </div>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
                 <div class="prescription-item">
                     <div class="sub-title">
-                        <div class="sub-line"></div>
-                        <div class="sub-name">执行农事区域</div>
-                        <div class="sub-line"></div>
-                    </div>
-                    <div class="prescription-chart prescription-map" v-if="infoItem?.executeBlueZones">
-                        <execute-blue-region :executeBlueRegion="prescriptioData?.executeBlueRegion" :executeBlueZones="infoItem.executeBlueZones"></execute-blue-region>
+                        <div class="sub-name">药物处方</div>
+                        <div class="sub-name"><span>施用方式：</span>根部施</div>
                     </div>
+                    <custom-table type="0" :tableHeader="tableHeader" :tableData="tableData"></custom-table>
                 </div>
                 <div class="prescription-item" v-if="prescriptioData?.progress === 0">
                     <div class="sub-title">
@@ -380,12 +244,13 @@
 </template>
 
 <script setup>
+import { ElMessage } from "element-plus";
 import eventBus from "@/api/eventBus";
 import chart from "./chart.vue";
 import { onActivated, onMounted, reactive, ref } from "vue";
 import { useStore } from "vuex";
-import ExecuteBlueRegion from "./executeBlueRegion";
 import stepBox from "@/components/common/stepBox.vue";
+import customTable from "./table.vue";
 
 const props = defineProps({
     prescriptioData: {
@@ -393,6 +258,55 @@ const props = defineProps({
     },
 });
 
+const tableHeader = [
+    {
+        name: "使用功效",
+        props: "typeName",
+    },
+    {
+        name: "肥药名称",
+        props: "defaultName",
+    },
+    {
+        name: "执行方式",
+        props: "usageMode1",
+    },
+    {
+        name: "药肥配比",
+        props: "usageMode",
+    },
+    {
+        name: "单亩用量",
+        props: "muUsage",
+    },
+];
+
+const tableData = ref([
+    {
+        brand: "",
+        defaultDroneRatio: null,
+        defaultName: "灌水",
+        defaultRatio: null,
+        executeStyle: null,
+        id: "686142764512972800",
+        muPrice: null,
+        muUsage: 222,
+        muUsage2: null,
+        orderId: "686142764492001280",
+        pesticideFertilizerCode: "",
+        pesticideFertilizerId: "15",
+        pesticideFertilizerName: "灌水",
+        price: null,
+        ratio: 11,
+        ratio2: null,
+        remark: "",
+        typeName: "调节",
+        unit: "kg",
+        usageMode: "",
+        list: [],
+    },
+]);
+
 const infoItem = ref({});
 
 const store = useStore();
@@ -414,12 +328,13 @@ let pesticideFertilizersOptions = ref([
 ]);
 VE_API.order.pesticideFertilizers().then(({ data }) => {
     pesticideFertilizersOptions.value = data;
+    tableData.value[0].list = data;
 });
 
 onMounted(() => {
-    console.log(" props.prescriptioData", props.prescriptioData);
     dynamicValidateForm.domains = props.prescriptioData?.pesticideFertilizers.map((item) => ({ ...item }));
     // submit()
+    console.log("dynamicValidateForm.domains", dynamicValidateForm.domains);
     infoItem.value = props.prescriptioData;
 });
 
@@ -448,13 +363,15 @@ const addDomain = () => {
         ratio2: "",
         remark: "",
     });
+    console.log("121323.domains", dynamicValidateForm.domains);
 };
 
-const removeDomain = (item) => {
-    const index = dynamicValidateForm.domains.indexOf(item);
-    if (index !== -1) {
+const removeDomain = (index) => {
+    // const index = dynamicValidateForm.domains.indexOf(item);
+    // if (index !== -1) {
+        if(dynamicValidateForm.domains.length===1) return ElMessage.warning('至少保留一个处方!')
         dynamicValidateForm.domains.splice(index, 1);
-    }
+    // }
 };
 
 const resetItemForm = (index) => {
@@ -543,21 +460,36 @@ const handleTableData = (item) => {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        position: relative;
+        &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 3px;
+            width: 3px;
+            height: 15px;
+            background: #fff;
+            border-radius: 11px;
+        }
         .recipe-name {
-            color: #000000;
-            font-size: 14px;
+            color: #fff;
+            font-size: 15px;
         }
         .recipe-btn {
-            font-size: 12px;
-            color: #2199f8;
+            color: #FFD489;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            .icon{
+                margin-right: 3px;
+            }
         }
     }
 }
 .prescription-result {
     position: relative;
-    // border: 0.5px solid rgba(33, 153, 248, 0.5);
-    // border-radius: 4px;
-    // padding: 8px 10px 10px 10px;
     &.has-wrap {
         border: 0.5px solid rgba(33, 153, 248, 0.5);
         border-radius: 4px;

src/views/workDetail/components/table.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="table">
+        <div class="th">
+            <div
+                class="td width"
+                :class="{ special: item.name.length === 3 || item.name.length > 4 }"
+                v-for="item in tableHeader"
+                :key="item.props"
+            >
+                {{ item.name }}
+            </div>
+        </div>
+        <div class="tr-wrap" v-for="(item, index) in tableData" :key="index">
+            <div v-if="type==0" class="tr" :class="{ 'special-tr': hideText }">
+                <div class="td" v-for="(ele, idx) in tableHeader" :key="idx + 'id'">
+                    <el-icon @click="handleDelete(index)" v-show="idx===0&&isEdit" class="delete-icon" color="#FF2323"><RemoveFilled /></el-icon>
+                    <span v-if="!isEdit">{{ item[ele.props] }}</span>
+                    <template v-else>
+                        <span v-if="ele.name==='执行方式'">人工</span>
+                        <el-select v-else class="select" v-model="item[ele.props]">
+                            <el-option v-for="optionItem in item.list" :key="optionItem.name" :label="optionItem.name" :value="optionItem.name" />
+                        </el-select>
+                    </template>
+                </div>
+            </div>
+            <div v-else class="tr collapse" :class="{ 'special-tr': hideText }">
+                <div class="td" :class="{'collapse-td':ele.name==='执行方式'}" v-for="(ele, idx) in tableHeader" :key="idx + 'id'">
+                    <el-icon @click="handleDelete(index)" v-show="idx===0&&isEdit" class="delete-icon" color="#FF2323"><RemoveFilled /></el-icon>
+                    <div v-if="!isEdit" :class="{'special-td':idx>1}">
+                        <div>{{ item[ele.props]||'测试数据' }}</div>
+                        <div class="txt" v-show="idx>1">1111</div>
+                    </div>
+                    <template v-else>
+                        <div :class="{'special-td':idx>1}">
+                            <template v-if="ele.name==='执行方式'">
+                                <div>人工</div>
+                                <div class="txt" v-show="idx>1">无人机</div>
+                            </template>
+                            <template v-else>
+                                <el-select :class="['select',{'ml':idx>1}]" v-model="item[ele.props]">
+                                    <el-option v-for="optionItem in item.list" :key="optionItem.name" :label="optionItem.name" :value="optionItem.name" />
+                                </el-select>
+                                <el-select v-show="idx>1" :class="['select','txt',{'ml':idx>1}]" v-model="item[ele.props]">
+                                    <el-option v-for="optionItem in item.list" :key="optionItem.name" :label="optionItem.name" :value="optionItem.name" />
+                                </el-select>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="box-textarea" v-if="!hideText">
+                <el-input
+                    :disabled="!isEdit"
+                    class="textarea"
+                    v-model="textarea"
+                    :rows="1"
+                    type="textarea"
+                    placeholder="这是是用药注意事项的备注，省略1000字"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+    tableData: {
+        type: Array,
+        defalut: [],
+         required:true
+    },
+    tableHeader: {
+        type: Array,
+        defalut: [],
+        required:true
+    },
+    hideText: {
+        type: Boolean,
+        defalut: true,
+    },
+    isEdit: {
+        type: Boolean,
+        defalut: true,
+    },
+    type: {
+        type: [String,Number],
+        defalut:0,
+        required:true
+    },
+});
+
+const emit = defineEmits(['handleDelete'])
+const handleDelete = (index) =>{
+    emit('handleDelete',index)
+}
+
+const textarea = ref("");
+const list = ref([
+    {
+        name: "营养",
+    },
+    {
+        name: "Action 2",
+    },
+    {
+        name: "Action 3",
+    },
+]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+    border: 1px solid #444444;
+    border-radius: 5px;
+    .th,
+    .tr {
+        display: flex;
+        align-items: center;
+        color: #727272;
+        height: 46px;
+        font-size: 14px;
+        justify-content: space-around;
+        .td {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            width: 25%;
+            height: 100%;
+            color: #cecece;
+        }
+    }
+    .collapse{
+        height: 80px;
+        border: 1px solid #444444;
+        margin: 12px 8px;
+        border-radius: 6px;
+        .collapse-td{
+            border-left: 1px solid #444444;
+            border-right: 1px solid #444444;
+        }
+    }
+    .special-td{
+        width: 100%;
+        height: 100%;
+        div{
+            width: 100%;
+            height: 50%;
+            line-height: 40px;
+        }
+        .txt{
+            border-top: 1px solid #444444;
+        }
+    }
+
+    .th {
+        background: rgba(255, 255, 255, 0.04);
+        .width {
+            width: 40px;
+        }
+        .special {
+            width: 60px;
+        }
+    }
+    .special-tr {
+        .td {
+            width: auto;
+        }
+    }
+
+    .delete-icon{
+        margin-right: 4px;
+        cursor: pointer;
+    }
+
+    .tr-wrap + .tr-wrap {
+        border-top: 1px solid #444444;
+    }
+}
+.select {
+    width: 50px !important;
+    &.ml{
+        padding: 0 15px;
+    }
+    ::v-deep {
+        .el-select__wrapper {
+            background: transparent;
+            padding: 0;
+            box-shadow: none;
+        }
+        .el-select__placeholder,
+        .el-select__caret {
+            color: #ffd489;
+        }
+    }
+}
+.box-textarea {
+    border-radius: 4px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    margin: 0 8px 10px 8px;
+    .textarea {
+        ::v-deep {
+            .el-textarea__inner {
+                background: transparent;
+                box-shadow: none;
+                color: #fff;
+                padding: 0;
+            }
+        }
+    }
+}
+</style>

src/views/workDetail/index.vue

@@ -1,14 +1,64 @@
 <template>
     <div class="base-container">
-        <fnHeader :hideSwitch="true" :hideShadow="true"></fnHeader>
+        <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
         <div class="content">
-            <div class="left">
-                <div @click="goBack">返回</div>
-                <component v-if="workList && workList.length" :is="components[currentComponent]" :prescriptioData="workList[0]" />
+            <div class="content-left">
+                <div class="btn" @click="goBack">
+                    <img src="@/assets/images/common/back-icon.png" alt="" />
+                    返回
+                </div>
+                <chart-box class="left-cont" name="秋捎防虫" color="yellow">
+                    <div class="box">
+                        <div class="box-item">
+                            <div class="box-title">
+                                专家处方
+                                <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon>
+                            </div>
+                            <component v-if="workList && workList.length" :is="components[currentComponent]" :prescriptioData="workList[0]" />
+                        </div>
+                        <!-- <div class="button">确认下发</div> -->
+                        <div class="box-item">
+                            <div class="box-title">
+                                农资报价
+                                <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon>
+                            </div>
+                            <custom-table type="0" :tableHeader="tableHeader" :tableData="tableData" hideText></custom-table>
+                        </div>
+                    </div>
+                </chart-box>
             </div>
-            <div class="right">
-                <div class="excute-title">执行农事区域</div>
-                <div ref="mapRef" class="bottom-map"></div>
+            <div class="content-right">
+                <div class="map-header">
+                    <div class="title">
+                        <img src="@/assets/images/common/area-icon.png" alt="" />
+                        执行农事区域
+                    </div>
+                    <el-checkbox-group v-model="checkValue" @change="handleCheck">
+                        <el-checkbox
+                            v-for="item in checkList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-checkbox-group>
+                </div>
+                <div ref="mapRef" class="map">
+                    <div class="map-bg map-btn">查看巡园照片</div>
+                    <div class="map-bg map-legend">
+                        <div class="item">
+                            <img src="@/assets/images/map/status/bhyc.png" alt="" />
+                            病害异常
+                        </div>
+                        <div class="item">
+                            <img src="@/assets/images/map/status/chyc.png" alt="" />
+                            虫害异常
+                        </div>
+                        <div class="item">
+                            <img src="@/assets/images/map/status/szyc.png" alt="" />
+                            生长异常
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -16,47 +66,122 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
 import fnHeader from "@/components/fnHeader.vue";
-import AreaMap from "./areaMap";
+import customTable from "./components/table.vue";
 import prescriptionBox from './components/prescriptionBox'
+import AreaMap from "./areaMap";
+import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
-let store = useStore();
+
 const components = {
     prescriptionBox,
 };
+const currentComponent = ref("prescriptionBox");
+
+const tableHeader = [
+    {
+        name:"功效",
+        props:"typeName"
+    },
+    {
+        name:"品牌",
+        props:"defaultName"
+    },
+    {
+        name:"执行方式",
+        props:"usageMode1"
+    },
+    {
+        name:"肥药配比(ml)",
+        props:"usageMode"
+    },
+    {
+        name:"单亩用量",
+        props:"muUsage"
+    },
+     {
+        name:"亩单价",
+        props:"muUsage"
+    }
+]
+
+const tableData = [
+    {
+        typeName:"营养",
+        defaultName:"国光",
+        usageMode1:"人工",
+        usageMode:"1:5000",
+        muUsage:"500元"
+    }
+]
+
+let store = useStore();
 let areaMap = new AreaMap();
 
+const active = ref(0);
+
+const checkList = ref([
+    { value: "0", label: "生长异常" },
+    { value: "1", label: "病害异常" },
+    { value: "2", label: "虫害异常" },
+]);
+const checkValue = ref(["0"]);
+const handleCheck = (e) => {
+    console.log("e", e);
+};
+
 const router = useRouter();
 const route = useRoute();
-const mapRef = ref();
-onMounted(() => {
-    getList()
-    areaMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
-    
-});
-
+const mapRef = ref(null);
 const workList = ref([])
+
 const getList = () => {
   VE_API.order.fetchWorkList().then(({data}) => {
-    // data[0].orderStatus = data[0].orderStatus + 1
-    // && (ROLETYPE.value == '0' || ROLETYPE.value == '3')
     if (route.query.data && JSON.parse(route.query.data)?.farmWorkId) {
       data = data.find(item => item.farmWorkLibId === JSON.parse(route.query.data)?.farmWorkId)
       workList.value = [data]
     } else {
       workList.value = data
     }
-    console.log('dtafds,', data)
   })
 }
 
+const getBlueList = () =>{
+    const executeBlueZones = [
+        {
+            id: "ws0y1mexxhxg",
+            level: null,
+        },
+        {
+            id: "ws0y1mey8wtx",
+            level: null,
+        },
+    ];
+    VE_API.farm.blueRegionList({ farmId: 766 }).then(({ data, code }) => {
+        for (let item of data) {
+            executeBlueZones.map((zone) => {
+                if (zone.id === item.blueZoneCode) {
+                    item.wkt = item.geom;
+                    item.id = item.blueZoneCode;
+                    areaMap.setData(item)
+                }
+            });
+        }
+        areaMap.fit()
+    });
+}
 
-const currentComponent = ref("prescriptionBox");
+onMounted(() => {
+    getList();
+    getBlueList()
+    areaMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+});
 
 const goBack = () => {
-    router.go(-1)
-}
+    router.go(-1);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -71,22 +196,139 @@ const goBack = () => {
 
     .content {
         width: 100%;
-        height: calc(100% - 74px - 48px);
+        height: calc(100% - 74px);
         display: flex;
         justify-content: space-between;
         box-sizing: border-box;
-        .left {
-            width: 512px;
+        padding: 20px;
+        .content-left {
+            width: 473px;
             height: 100%;
-            padding-top: 10px;
             box-sizing: border-box;
+            .btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid rgba(255, 255, 255, 0.78);
+                border-radius: 4px;
+                padding: 9px;
+                margin-bottom: 13px;
+                width: 104px;
+                cursor: pointer;
+                img {
+                    width: 14px;
+                    margin-right: 5px;
+                }
+            }
+            .left-cont {
+                width: 100%;
+                height: calc(100% - 48px - 4px);
+                .icon-arrow{
+                    cursor: pointer;
+                }
+                .box {
+                    width: 100%;
+                    height: 100%;
+                    padding: 16px 12px;
+                    box-sizing: border-box;
+                    overflow-y: auto;
+                    .box-item {
+                        background: rgba(255, 255, 255, 0.04);
+                        border: 1px solid #444444;
+                        border-radius: 8px;
+                        padding: 16px 12px;
+                        box-sizing: border-box;
+                        width: 100%;
+                        .box-title {
+                            font-size: 20px;
+                            border-bottom: 1px solid #333333;
+                            padding: 0 0 12px 13px;
+                            margin-bottom: 12px;
+                            position: relative;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            &::before {
+                                content: "";
+                                position: absolute;
+                                left: 0;
+                                top: 6px;
+                                width: 3px;
+                                height: 16px;
+                                background: #fff;
+                                border-radius: 11px;
+                            }
+                        }
+                        
+                    }
+                }
+                .button {
+                    font-size: 16px;
+                    padding: 10px;
+                    background: #ffd489;
+                    border-radius: 4px;
+                    color: #000;
+                    margin: 16px 0;
+                    cursor: pointer;
+                    text-align: center;
+                }
+            }
         }
-        .right {
-            width: calc(100% - 512px);
+        .content-right {
+            width: calc(100% - 473px - 18px);
+            margin-left: 18px;
             height: 100%;
-            .bottom-map {
+            background: #191919;
+            border: 0.6px solid #444444;
+            padding: 20px;
+            box-sizing: border-box;
+            border-radius: 8px;
+            .map-header {
+                display: flex;
+                justify-content: space-between;
+                .title {
+                    font-size: 22px;
+                    display: flex;
+                    align-items: flex-end;
+                    font-family: "PangMenZhengDao";
+                    margin-bottom: 16px;
+                    img {
+                        margin-right: 8px;
+                    }
+                }
+            }
+            .map {
                 width: 100%;
-                height: 100%;
+                clip-path: inset(0px round 4px);
+                height: calc(100% - 31px - 16px);
+                position: relative;
+                .map-bg {
+                    position: absolute;
+                    z-index: 2;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 18px;
+                    padding: 7px 16px;
+                    right: 20px;
+                }
+                .map-btn {
+                    top: 19px;
+                    cursor: pointer;
+                }
+                .map-legend {
+                    bottom: 21px;
+                    display: flex;
+                    align-items: center;
+                    .item {
+                        display: flex;
+                        align-items: center;
+                        img {
+                            margin-right: 5px;
+                        }
+                    }
+                    .item + .item {
+                        margin-left: 20px;
+                    }
+                }
             }
         }
     }