fix: 对接新增农事，编辑农事

src/api/modules/area.js

@@ -0,0 +1,13 @@
+const config = require("../config")
+
+module.exports = {
+    list: {
+        url: config.base_url + "region/list",
+        type: "post",
+    }
+    ,
+    save: {
+        url: config.base_url + "region/save",
+        type: "post",
+    }
+}

src/api/modules/farm.js

@@ -77,4 +77,12 @@ module.exports = {
         url: config.base_dev_url + "farm/farmIndexReport?key="+config.mini_key,
         type: "get",
     },
+    saveFarmWork: {
+        url: config.base_dev_url + "z_farm_work_order/save?key="+config.mini_key,
+        type: "post",
+    },
+    deleteFarmWork: {
+        url: config.base_dev_url + "z_farm_work_order/delete?key="+config.mini_key,
+        type: "get",
+    },
 }

src/api/modules/sub_area.js

@@ -0,0 +1,12 @@
+const config = require("../config")
+
+module.exports = {
+    list: {
+        url: config.base_url + "lz_sub_area/list/{organId}",
+        type: "get",
+    },
+    treeList: {
+        url: config.base_url + "lz_sample/list",
+        type: "get",
+    }
+}

src/components/navigation.vue

@@ -37,6 +37,7 @@ const router = useRouter();
 
 const areaId = ref("");
 const options = ref([]);
+eventBus.off('garden:organId', gardenOrganId)
 eventBus.on('garden:organId',gardenOrganId)
 
 const organId = ref(null)

src/views/addFarm/components/steps.vue

@@ -20,7 +20,7 @@ const props = defineProps({
         required: true,
     },
 });
-const list = ["选择农事类型", "编辑处方"];
+const list = ["选择农事类型", "新增处方"];
 </script>
 
 <style lang="scss" scoped>

src/views/addFarm/farmMap.js

@@ -5,36 +5,335 @@ 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 { Point } from 'ol/geom';
 import Feature from "ol/Feature";
+import VectorLayer from "ol/layer/Vector.js";
 import WKT from "ol/format/WKT";
+import { Cluster, Vector as VectorSource } from "ol/source";
+import { newAreaFeature, newAreaPoint, newPolymerFeature, newPoint } from "@/utils/map.js";
+import { GARDEN_STATUS_ENUM as STATUS_ENUM } from "@/api/enum.js"
+import { getArea } from 'ol/sphere.js';
+import * as proj from "ol/proj";
+import { register } from "ol/proj/proj4";
+import proj4 from "proj4"
+import eventBus from "@/api/eventBus";
+proj4.defs("EPSG:38572", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
+register(proj4);
 
 /**
  * @description 智能巡园地图层对象
  */
 class FarmMap {
-  constructor() {
-    let that = this;
-    let vectorStyle = new KMap.VectorStyle();
-    this.vectorStyle = vectorStyle;
-  }
-
-  initMap(location, target) {
-    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);
-  }
-
-  // 重新渲染地图
-  updateMap() {
-    setTimeout(() => {
-      this.kmap.map.updateSize()
-    }, 1000);
-  }
-
-  fit(geomOrExtent, padding) {
-    this.kmap.fit(geomOrExtent, padding);
-  }
+    constructor() {
+        let that = this;
+        let vectorStyle = new KMap.VectorStyle();
+        this.vectorStyle = vectorStyle;
+
+        this.clusterSource = new Cluster({
+            distance: 15,
+            minDistance: 60,
+        });
+
+        this.treeClusterLayer = new KMap.VectorLayer("tree-cluster", 999, {
+            minZoom: 15,
+            source: this.clusterSource,
+            style: (f) => this.getStyle(f)
+        })
+
+        this.areaLayer = new KMap.VectorLayer("areaLayer", 999, { style: (f) => that.vectorStyle.getPolygonStyle("#00000010", "#000000", 3) })
+        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer", 1000, {
+            style: (f) => {
+                return that.vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("strokeColor"), 2)
+            }
+        })
+        that.areaVal = 0
+
+        this.treeCacheStyle = {}
+        this.treeStyle = (f) => {
+            let key = f.get("imgSrc");
+            if (that.treeCacheStyle[key]) {
+                return that.treeCacheStyle[key]
+            }
+            let style = new Style({
+                image: new Icon({
+                    src: f.get("imgSrc"),
+                    scale: 1,
+                    anchor: [0.5, 1],
+                })
+            });
+            that.treeCacheStyle[key] = style
+            return style
+        }
+        this.treeLayer = new KMap.VectorLayer("statusPointLayer", 999, { style: that.treeStyle })
+
+
+
+        this.blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99, {
+            minZoom: 1,
+            maxZoom: 22,
+            style: function (f) {
+                const selected = f.get('selected');
+                if (selected) {
+                    return that.vectorStyle.getPolygonStyle("rgba(23, 99, 110, 0.43)", "rgba(37, 227, 255, 0.7)", 2)
+                }
+                return that.vectorStyle.getPolygonStyle("rgba(0, 0, 0, 0.5)", "rgba(255, 255, 255, 0.2)", 1)
+            }
+        });
+    }
+
+    initMap(location, target) {
+        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.areaLayer.layer)
+        this.kmap.addLayer(this.subAreaLayer.layer)
+        this.kmap.addLayer(this.treeLayer.layer)
+        this.kmap.addLayer(this.blueRegionLayer.layer)
+        this.kmap.addLayer(this.treeClusterLayer.layer)
+
+        this.addMapSingerClick()
+    }
+
+    initData(farmId, regionId) {
+        let that = this
+        VE_API.image.pointByRegionId({ farmId, regionId }).then(({ data }) => {
+            let features = []
+            for (let item of data) {
+                item.iconName = 'defalut'
+                that.getIcon(item)
+                let point = newPoint(item);
+                features.push(point)
+            }
+
+            if (this.treeClusterLayer &&  this.treeClusterLayer.layer.getSource()) {
+                // this.treeClusterLayer.layer.getSource().getSource().clear()
+            }
+            const source = new VectorSource({
+                features: features,
+            });
+            that.clusterSource.setSource(source)
+        })
+    }
+    //多点的过滤方法
+    manyFeatureFilter(features) {
+        let res = features[0]
+        if (features.length == 1) {
+            return res
+        }
+        for (let item of features) {
+            res = res.get('status') > item.get('status') ? res : item
+        }
+        return res;
+    }
+    //得到点样式
+    getStyle(feature) {
+        feature = this.manyFeatureFilter(feature.get('features'))
+        return this.getIconStyle(feature)
+    }
+    getIconStyle(feature) {
+        let style = new Style({
+            image: new Icon({
+                src: feature.get('icon'),
+                // src: require(`@/assets/images/map/${feature.get('iconName')}-icon.png`),
+                scale: feature.get('scale'),
+            })
+        });
+        return style
+    }
+    getIcon(item) {
+        // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
+        let imgSrc = require('@/assets/images/map/status/status-zc.png')
+        let scale = 0.8
+        if (item.status == 1) {
+            imgSrc = require('@/assets/images/map/status/status-szyc.png')
+        }
+        if (item.status == 2) {
+            imgSrc = require('@/assets/images/map/status/status-bh.png')
+        }
+        if (item.status == 3) {
+            imgSrc = require('@/assets/images/map/status/status-ch.png')
+        }
+        item["icon"] = imgSrc
+        item["scale"] = scale
+    }
+
+    // 重新渲染地图
+    updateMap() {
+        setTimeout(() => {
+            this.kmap.map.updateSize()
+        }, 1000);
+    }
+
+    fit(geomOrExtent, padding) {
+        this.kmap.fit(geomOrExtent, padding);
+    }
+    addMapSingerClick() {
+        let that = this
+        this.kmap.on("singleclick", (evt) => {
+            that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+                if (layer instanceof VectorLayer && layer.get("name") === "blueRegionLayer") {
+                    feature.set('selected', feature.get("selected") ? false : true);
+
+                    let geom = feature.getGeometry().clone()
+                    geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
+                    let areaItem = getArea(geom)
+                    areaItem = (areaItem + areaItem / 2) / 1000;
+                    if (feature.get('selected') === true) {
+                        that.areaVal += areaItem
+                    } else {
+                        that.areaVal -= areaItem
+                    }
+                    eventBus.emit("editNsMap:areaVal", that.areaVal)
+                }
+            })
+        })
+    }
+
+
+    // 状态图例
+    handleStatusIcon(obj) {
+        let key = this.afterDayNum == 3 ? "ycStatus" : this.afterDayNum == 5 ? "ycStatus5d" : "ycStatus7d"
+        let hasStatus = false
+        let imgSrc = null
+        if (obj[key] == 3) {
+            hasStatus = true
+            imgSrc = require('@/assets/status/status_bcyc.png')
+            return { hasStatus, imgSrc }
+        }
+        if (obj[key] == 2) {
+            hasStatus = true
+            imgSrc = require('@/assets/status/status_szyc.png')
+            return { hasStatus, imgSrc }
+        }
+        // if (obj[key] == 1) {
+        //     hasStatus = true
+        //     imgSrc = require('@/assets/status/status_dfh.png')
+        //     return { hasStatus, imgSrc }
+        // }
+        // if (obj[key] == 0) {
+        //     hasStatus = true
+        //     imgSrc = require('@/assets/status/status_xfdw.png')
+        //     return { hasStatus, imgSrc }
+        // }
+        return { hasStatus, imgSrc }
+    }
+
+    // 区级颜色
+    handleStatusColor(key) {
+        let fillColor = '#ffffff00'
+        let strokeColor = '#ffffff'
+        switch (key) {
+            case STATUS_ENUM.DONE:
+                fillColor = 'rgba(95,255,197,0)'
+                strokeColor = '#ffffff'
+                break;
+            case STATUS_ENUM.ABNORMAL_GROWTH:
+                fillColor = 'rgba(255,189,5,0.2)'
+                strokeColor = '#FFE44E'
+                break;
+            case STATUS_ENUM.ABNORMAL_Pest:
+                fillColor = 'rgba(51,11,3,0.52)'
+                strokeColor = '#F55A5A'
+                break;
+            case STATUS_ENUM.PENDING_REVIEW:
+                fillColor = 'rgba(3,40,51,0.2)'
+                strokeColor = '#032833'
+                break;
+            case STATUS_ENUM.REVIEWED:
+                fillColor = 'rgba(95,255,197,0.1)'
+                strokeColor = '#5FFFC5'
+                break;
+            default:
+                break;
+        }
+        return { fillColor, strokeColor }
+    }
+
+    initArea(data, callback) {
+        let that = this
+        this.areaLayer.refresh()
+        for (let item of data) {
+            that.areaLayer.addFeature(newAreaFeature(item))
+            that.areaPointLayer.addFeature(newAreaPoint(item))
+        }
+        callback && callback()
+    }
+
+    initSubArea(organId, callback) {
+        let that = this
+        this.subAreaLayer.refresh()
+        VE_API.sub_area.list({ organId }).then(({ data, code }) => {
+            for (let item of data) {
+                item.fillColor = that.handleStatusColor(item.status).fillColor
+                item.strokeColor = that.handleStatusColor(item.status).strokeColor
+                that.subAreaLayer.addFeature(newPolymerFeature(item))
+            }
+            callback && callback()
+        })
+    }
+
+    toggleLegend(val) {
+        // this.treeLayer.layer.setVisible(val)
+        this.treeClusterLayer.layer.setVisible(val)
+    }
+
+
+    getBlueRegion({ gardenId, regionId }, callback) {
+        this.blueRegionLayer.source && this.blueRegionLayer.source.clear()
+        VE_API.farm.blueRegionList({ farmId: gardenId, regionId }).then(({ data, code }) => {
+            for (let item of data) {
+                item.wkt = item.geom
+                item.id = item.blueZoneCode
+                let feature = newAreaFeature(item);
+                this.blueRegionLayer.addFeature(feature)
+            }
+            this.kmap.fit(this.blueRegionLayer.source.getExtent(), [0, 0, 0, 0])
+            callback && callback(data.length)
+        })
+    }
+
+    setBlueRegion(data) {
+        this.blueRegionLayer.source.getFeatures().forEach(feature => {
+            // 检查 feature 的属性中是否有 selected 属性且为 true
+            data.map(item => {
+                if (item.id === feature.get('id')) {
+                    feature.set('selected', true)
+                }
+            })
+        });
+    }
+
+    toggleAllArea(val) {
+        let that = this
+        that.areaVal = 0
+        this.blueRegionLayer.source.getFeatures().forEach(feature => {
+            feature.set('selected', val)
+            if (val === true) {
+                let geom = feature.getGeometry().clone()
+                geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
+                let areaItem = getArea(geom)
+                areaItem = (areaItem + areaItem / 2) / 1000;
+                that.areaVal += areaItem
+            }
+            eventBus.emit("editNsMap:areaVal", that.areaVal)
+        });
+
+    }
+    getSelectedBlueRegion() {
+        // 用于存储 selected 为 true 的 feature 的 id
+        const selectedFeatureIds = [];
+        // 遍历所有 features
+        this.blueRegionLayer.source.getFeatures().forEach(feature => {
+            // 检查 feature 的属性中是否有 selected 属性且为 true
+            if (feature.get('selected') === true) {
+                // 获取 feature 的 id
+                const id = feature.get('id');
+                // 将 id 添加到数组中
+                selectedFeatureIds.push({ id });
+            }
+        });
+        return selectedFeatureIds;
+    }
 }
 
 export default FarmMap;

src/views/addFarm/index.vue

@@ -7,9 +7,9 @@
                     <img src="@/assets/images/common/back-icon.png" alt="" />
                     返回
                 </div>
-                <chart-box class="left-cont" name="编辑农事" color="yellow">
+                <chart-box class="left-cont" :name="isAdd ? '新增农事' : '编辑农事'" color="yellow">
                     <template #title-right>
-                        <steps :active="active"></steps>
+                        <steps v-if="isAdd" :active="active"></steps>
                     </template>
                     <div class="box">
                         <div class="box-item" v-if="active === 0">
@@ -27,7 +27,7 @@
                                     v-for="(item, index) in checkData"
                                     :key="index"
                                 >
-                                    {{ item.label }}
+                                    {{ item.name }}
                                     <el-icon size="25" color="#FFD489" v-show="item.active"
                                         ><CircleCheckFilled
                                     /></el-icon>
@@ -39,71 +39,91 @@
                             <el-form class="box-form" ref="formRef" :model="dynamicValidateForm" :rules="rules">
                                 <div class="box-item">
                                     <div class="box-title">基本信息</div>
-                                        <el-form-item label="农事名称" prop="name">
-                                            <el-input v-model="dynamicValidateForm.name" />
-                                        </el-form-item>
-                                        <el-form-item label="触发条件" prop="conditionRate">
-                                            <el-input v-model="dynamicValidateForm.conditionRate" />
-                                        </el-form-item>
-                                        <el-form-item label="执行时间" prop="executeDate">
-                                            <el-date-picker
-                                                class="item-input"
+                                    <el-form-item label="农事名称" prop="name">
+                                        <el-input v-model="dynamicValidateForm.name" />
+                                    </el-form-item>
+                                    <el-form-item label="触发条件" prop="conditionRate">
+                                        <el-input v-model="dynamicValidateForm.conditionRate" />
+                                    </el-form-item>
+                                    <el-form-item label="执行时间" prop="executeDate">
+                                        <el-date-picker
+                                            class="item-input"
+                                            style="width: 100%"
+                                            value-format="YYYY-MM-DD"
+                                            v-model="dynamicValidateForm.executeDate"
+                                            type="date"
+                                            :clearable="false"
+                                            placeholder="选择日期"
+                                        />
+                                    </el-form-item>
+                                </div>
+                                <div class="usage-mode box-form">
+                                    <el-form-item label="执行分区" prop="regionId">
+                                        <div class="mode-select">
+                                            <el-select
+                                                v-model="dynamicValidateForm.regionId"
+                                                placeholder="请选择"
                                                 style="width: 100%"
-                                                value-format="YYYY-MM-DD"
-                                                v-model="dynamicValidateForm.executeDate"
-                                                type="date"
-                                                :clearable="false"
-                                                placeholder="选择日期"
-                                            />
-                                        </el-form-item>
+                                                
+                                                @change="changeRegion"
+                                            >
+                                            <el-option v-for="(area, index) in areaList" :key="index" :label="area.name" :value="area.id">
+                                            </el-option>
+                                            </el-select>
+                                        </div>
+                                    </el-form-item>
+                                    <el-form-item label="服务亩数" prop="regionId">
+                                        <div class="mode-select">
+                                            {{ area }}
+                                        </div>
+                                    </el-form-item>
                                 </div>
                                 <div class="usage-mode box-form">
                                     <el-form-item label="施用方式" prop="usageMode">
                                         <div class="mode-select">
-                                        <el-select
-                                            v-model="dynamicValidateForm.usageMode"
-                                            placeholder="请选择"
-                                             prop="usageMode"
-                                            style="width: 100%"
-                                        >
-                                            <el-option
-                                                v-for="(usage, uId) in allUsageModeList"
-                                                :key="uId"
-                                                :label="usage"
-                                                :value="usage"
-                                            />
-                                        </el-select>
-                                    </div>
-                                        </el-form-item>
-                                    <!-- <div class="usage-title">施用方式</div>
-                                    <div class="mode-select">
-                                        <el-select
-                                            v-model="dynamicValidateForm.usageMode"
-                                            placeholder="请选择"
-                                             prop="usageMode"
-                                            style="width: 100%"
-                                        >
-                                            <el-option
-                                                v-for="(usage, uId) in allUsageModeList"
-                                                :key="uId"
-                                                :label="usage"
-                                                :value="usage"
-                                            />
-                                        </el-select>
-                                    </div> -->
+                                            <el-select
+                                                v-model="dynamicValidateForm.usageMode"
+                                                placeholder="请选择"
+                                                prop="usageMode"
+                                                style="width: 100%"
+                                            >
+                                                <el-option
+                                                    v-for="(usage, uId) in allUsageModeList"
+                                                    :key="uId"
+                                                    :label="usage"
+                                                    :value="usage"
+                                                />
+                                            </el-select>
+                                        </div>
+                                    </el-form-item>
                                 </div>
                             </el-form>
-                            <div class="box-item" v-for="(item, index) in dynamicValidateForm.prescriptionList" :key="index">
+                            <div
+                                class="box-item"
+                                v-for="(item, index) in dynamicValidateForm.prescriptionList"
+                                :key="index"
+                            >
                                 <div class="box-title border-none">
-                                    {{ item.label }}处方
+                                    {{ item.name }}处方
                                     <div class="add-text" @click="handleAdd(index)">
                                         <el-icon class="icon"><Plus /></el-icon>
                                         添加药物
                                     </div>
                                 </div>
-                                <div class="box-item-children" v-for="(ele,idx) in item.pesticideFertilizerList" :key="idx + 'id'">
+                                <div
+                                    class="box-item-children"
+                                    v-for="(ele, idx) in item.pesticideFertilizerList"
+                                    :key="idx + 'id'"
+                                >
                                     <div class="index">{{ idx < 10 ? "0" + (idx + 1) : idx + 1 }}</div>
-                                    <custom-table @updateTableData="updateTableData" :pIndex="index" :cIndex="idx" :key="index+'-' + idx" :pesticideFertilizerList="ele" :hasFly="dynamicValidateForm.usageMode === '叶面施'"></custom-table>
+                                    <custom-table
+                                        @updateTableData="updateTableData"
+                                        :pIndex="index"
+                                        :cIndex="idx"
+                                        :key="index + '-' + idx"
+                                        :pesticideFertilizerList="ele"
+                                        :hasFly="dynamicValidateForm.usageMode === '叶面施'"
+                                    ></custom-table>
                                     <div class="box-textarea">
                                         <el-input
                                             class="textarea"
@@ -114,8 +134,8 @@
                                         />
                                     </div>
                                     <div class="btn-group">
-                                        <div class="delete" @click="handleDelete(index,idx)">删除</div>
-                                        <div @click="resetItem(index,idx)">重置</div>
+                                        <div class="delete" @click="handleDelete(index, idx)">删除</div>
+                                        <div @click="resetItem(index, idx)">重置</div>
                                     </div>
                                 </div>
                             </div>
@@ -140,30 +160,30 @@
                         <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 class="check-btn"><el-checkbox v-model="checkedArea" @change="handleArea" label="全选" size="large" /></div>
                 </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 class="legend-item legend-title">
+                            <el-checkbox v-model="showMapLegend" @change="handleLegend" label="状态图例" size="large" />
                         </div>
                         <div class="item">
-                            <img src="@/assets/images/map/status/chyc.png" alt="" />
-                            虫害异常
+                            <img src="@/assets/images/map/status/status-zc.png" alt="" />
+                            正常
                         </div>
                         <div class="item">
-                            <img src="@/assets/images/map/status/szyc.png" alt="" />
+                            <img src="@/assets/images/map/status/status-szyc.png" alt="" />
                             生长异常
                         </div>
+                        <div class="item">
+                            <img src="@/assets/images/map/status/status-bh.png" alt="" />
+                            病害异常
+                        </div>
+                        <div class="item">
+                            <img src="@/assets/images/map/status/status-ch.png" alt="" />
+                            虫害异常
+                        </div>
                     </div>
                 </div>
             </div>
@@ -188,20 +208,10 @@ let farmMap = new FarmMap();
 
 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 checkData = ref([
-    { value: "0", label: "生长异常", active: true, children: [{index: 1}] },
-    { value: "1", label: "病害异常", active: false, children: [{index: 1}] },
-    { value: "2", label: "虫害异常", active: false, children: [{index: 1}] },
+    { value: 1, name: "生长异常", active: true, children: [{ index: 1 }] },
+    { value: 3, name: "病虫异常", active: false, children: [{ index: 1 }] },
+    { value: 2, name: "营养农事", active: false, children: [{ index: 1 }] },
 ]);
 const handleItem = (item, index) => {
     checkData.value[index].active = !checkData.value[index].active;
@@ -217,13 +227,88 @@ const handleItem = (item, index) => {
 const router = useRouter();
 const route = useRoute();
 const mapRef = ref();
+const farmId = sessionStorage.getItem("farmId");
+
+// 所选蓝色分区的面积
+const area = ref(null);
+const getArea = (val) => {
+    area.value = val.toFixed(2) + "亩";
+};
+// 是否为新增
+const isAdd = ref(true);
+
+const libId = route.query?.libId
 onMounted(() => {
-    getList();
+    dynamicValidateForm.regionId = Number(sessionStorage.getItem("regionId"));
     farmMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+    isAdd.value = route.query?.isAdd;
+    if (!isAdd.value) {
+        active.value = 1
+        getList()
+    }
+    getAreaList();
+
+    // farmMap.initData(farmId, dynamicValidateForm.regionId)
 });
+eventBus.off("editNsMap:areaVal", getArea)
+eventBus.on("editNsMap:areaVal", getArea)
+
+// 农场分区列表
+const areaList = ref([]);
+const orderIdVal = ref("");
+const workItemData = ref({});
+const getAreaList = (callback) => {
+    VE_API.area.list({ farmId }).then(({ data, code }) => {
+        areaList.value = data;
+        // if (isAdd.value) {
+        //     regionId.value = data && data.length && data[0].id
+        // } else {
+        //     regionId.value = workItemData.value.regionId
+        // }
+        changeRegion(dynamicValidateForm.regionId);
+        callback && callback();
+    });
+};
+
+function getList() {
+    VE_API.farm.fetchFarmWorkList({ farmId, libId }).then(({data}) => {
+        workItemData.value = data[0]
+        Object.assign(dynamicValidateForm, workItemData.value)
+        dynamicValidateForm.name = workItemData.value.farmWorkName
+        dynamicValidateForm.conditionRate = workItemData.value.condition
+        console.log('workItemData.value', dynamicValidateForm);
+    })
+}
+
+
+const farmObj = ref();
+const serviceRegion = ref("");
+const getFarmObj = () => {
+    VE_API.farm.fetchFarmDetail({ id: farmId }).then(({ data }) => {
+        farmObj.value = data;
+        if (serviceRegion.value === "") {
+            serviceRegion.value = data.district + data.address + data.name;
+        }
+    });
+};
+
+// 切换分区
+const checkedArea = ref(false);
+const changeRegion = (e) => {
+    area.value = 0;
+    checkedArea.value = false;
+    farmMap.initData(farmId, dynamicValidateForm.regionId)
+    farmMap.getBlueRegion({ gardenId: farmId, regionId: e });
+};
+
+const handleArea = (e) => {
+    farmMap.toggleAllArea(e)
+}
 
-const getList = () => {
-    console.log("000");
+// 地图图例
+const showMapLegend = ref(true);
+const handleLegend = (e) => {
+    farmMap.toggleLegend(e);
 };
 
 const goBack = () => {
@@ -236,44 +321,79 @@ const handleOk = () => {
         formRef.value.validate((valid) => {
             if (valid) {
                 console.log("123", dynamicValidateForm);
+                submitForm();
                 // const res = tableData.value.getItem
                 // console.log('res', res);
             }
-        })
+        });
     } else {
         active.value = 1;
         const arr = checkData.value.filter((item) => item.active);
         // boxList.value = deepClone(arr);
 
-        dynamicValidateForm.prescriptionList = arr.map(item => ({
-            name: item.label,
-            label: item.label,
+        dynamicValidateForm.prescriptionList = arr.map((item) => ({
+            name: item.name,
             active: item.active,
             pesticideFertilizerList: [
-                    {
-                        key: 1,
-                        typeName: "",
-                        muUsage: "",
-                        muUsage2: "",
-                        ratio: "",
-                        ratio2: "",
-                        remark: "",
-                    },
-                ]
-            }))
+                {
+                    key: 1,
+                    typeName: "",
+                    muUsage: "",
+                    muUsage2: "",
+                    ratio: "",
+                    ratio2: "",
+                    remark: "",
+                },
+            ],
+        }));
     }
 };
-
+async function submitForm() {
+    const executeBlueZones = farmMap.getSelectedBlueRegion();
+    if (!executeBlueZones || !executeBlueZones.length) {
+        ElMessage({
+            message: "请选择执行区域",
+            type: "warning",
+        });
+        return false;
+    }
+    let data = {
+        ...dynamicValidateForm,
+        executeBlueZones,
+        remark: textarea.value,
+        farmId,
+    };
+    console.log('dddd', data);
+    let res = null;
+    if (isAdd.value) {
+        data.farmWorkType = 1;
+        // data.name = name.value;
+        // data.condition = condition.value;
+        // 新增农事
+        res = await VE_API.farm.saveFarmWork(data);
+    } else {
+        data = {...data, orderId: orderIdVal.value, orderStatus: 1,}
+        res = await VE_API.farm.confirm(data);
+    }
+    if (res?.code == 0) {
+        ElMessage({
+            message: "保存成功",
+            type: "success",
+        });
+        router.go(-1);
+    }
+}
 
 // 表单
 const formRef = ref();
 
-const allUsageModeList = (["叶面施", "根部施"])
-const dynamicValidateForm = reactive({
+const allUsageModeList = ["叶面施", "根部施"];
+let dynamicValidateForm = reactive({
     name: "",
     conditionRate: "",
     executeDate: "",
     usageMode: "",
+    regionId: "",
     prescriptionList: [
         {
             name: "",
@@ -321,12 +441,20 @@ const rules = {
             trigger: "change",
         },
     ],
-}
+    regionId: [
+        {
+            required: true,
+            message: "请选择执行区域",
+            trigger: "change",
+        },
+    ],
+};
 const textarea = ref("");
 
-//添加
+// 添加
 const handleAdd = (index) => {
-    dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.push({ index: 1, 
+    dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.push({
+        index: 1,
         name: "",
         pesticideFertilizerList: [
             {
@@ -338,17 +466,18 @@ const handleAdd = (index) => {
                 ratio2: "",
                 remark: "",
             },
-        ]
-    } );
+        ],
+    });
 };
-//删除
-const handleDelete = (index,childIndex) => {
+
+// 删除
+const handleDelete = (index, childIndex) => {
     // if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
     dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.splice(childIndex, 1);
 };
 
 // 重置
-function resetItem(index,childIndex) {
+function resetItem(index, childIndex) {
     dynamicValidateForm.prescriptionList[index].pesticideFertilizerList[childIndex] = {
         key: 1,
         pesticideFertilizerId: "",
@@ -358,15 +487,14 @@ function resetItem(index,childIndex) {
         ratio: "",
         ratio2: "",
         remark: "",
-    }
+    };
 }
 
 function updateTableData(pIndex, cIndex, tableData) {
     dynamicValidateForm.prescriptionList[pIndex].pesticideFertilizerList[cIndex] = {
-        ...tableData
-    }
+        ...tableData,
+    };
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -418,7 +546,7 @@ function updateTableData(pIndex, cIndex, tableData) {
                         background: rgba(255, 255, 255, 0.04);
                         border: 1px solid #444444;
                         border-radius: 8px;
-                        padding: 16px 12px;
+                        padding: 16px 12px 8px 12px;
                         box-sizing: border-box;
                         width: 100%;
                         .box-title {
@@ -485,7 +613,6 @@ function updateTableData(pIndex, cIndex, tableData) {
                             }
                         }
 
-
                         .box-item-children {
                             border: 1px solid #444444;
                             border-radius: 8px;
@@ -528,7 +655,7 @@ function updateTableData(pIndex, cIndex, tableData) {
                                 }
                             }
                         }
-                        .box-item-children + .box-item-children{
+                        .box-item-children + .box-item-children {
                             margin-top: 12px;
                         }
                         .textarea {
@@ -547,8 +674,7 @@ function updateTableData(pIndex, cIndex, tableData) {
                     }
                 }
 
-                
-                        // 编辑处方
+                // 编辑处方
                 .box-form {
                     ::v-deep {
                         .el-form-item {
@@ -567,13 +693,12 @@ function updateTableData(pIndex, cIndex, tableData) {
                         }
                     }
                 }
-                
-                        
+
                 .usage-mode {
-                    display: flex;
-                    align-items: center;
+                    // display: flex;
+                    // align-items: center;
                     color: #9f9f9f;
-                    padding: 16px 21px 20px 12px;
+                    padding: 16px 21px 0px 12px;
                     border: 1px solid #363636;
                     background: rgba(255, 255, 255, 0.04);
                     border-radius: 8px;
@@ -643,6 +768,15 @@ function updateTableData(pIndex, cIndex, tableData) {
                         margin-right: 8px;
                     }
                 }
+                .check-btn {
+                    ::v-deep {
+                        .el-checkbox {
+                            color: #fff;
+                            font-size: 20px;
+
+                        }
+                    }
+                }
             }
             .map {
                 width: 100%;
@@ -663,17 +797,20 @@ function updateTableData(pIndex, cIndex, tableData) {
                 }
                 .map-legend {
                     bottom: 21px;
-                    display: flex;
-                    align-items: center;
                     .item {
                         display: flex;
                         align-items: center;
+                        font-size: 14px;
                         img {
-                            margin-right: 5px;
+                            width: 16px;
+                            margin-right: 6px;
                         }
                     }
+                .legend-title {
+                    border-bottom: 1px solid rgba(102, 102, 102, 0.35);
+                }
                     .item + .item {
-                        margin-left: 20px;
+                        padding-top: 10px
                     }
                 }
             }

src/views/home/album/index.vue

@@ -65,17 +65,6 @@
                                             :chartData="indicatorChartData"
                                         ></indicatorChart>
                                     </div>
-                                    <div v-show="farmId == 766" class="time-img">
-                                        <photo-provider :photo-closable="true">
-                                            <photo-consumer
-                                                class="time-item"
-                                                :src="require('@/assets/img/gallery/time.png')"
-                                            >
-                                            <img src="@/assets/img/gallery/time.png" style="width: 100%" />
-                                            </photo-consumer>
-                                        </photo-provider>
-                                        <!-- <img src="@/assets/img/gallery/time.png" /> -->
-                                    </div>
                                 </div>
                             </div>
                             <div class="card-wrap" :class="{ noCarousel: (card.execute !== 0 && card.execute !== 2), 'done': (card.execute === 4 || card.execute === 5) }">
@@ -275,7 +264,7 @@ import AlbumCarousel7d from "./album_compoents/albumCarousel7d";
 const miniUserId = 81881;
 
 const addWork = () =>{
-    router.push('/add_farm')
+    router.push({path: '/add_farm', query: {isAdd: true}})
 }
 
 const route = useRoute();
@@ -327,7 +316,8 @@ const toExpert = (expertName) =>{
 }
 
 
-eventBus.on('garden:organId',getListData)
+eventBus.off('garden:organId', getListData)
+eventBus.on('garden:organId', getListData)
 
 const areaIdVal = ref(null)
 eventBus.on('area:id', ({areaId,farmId}) => {
@@ -338,7 +328,10 @@ eventBus.on('area:id', ({areaId,farmId}) => {
 onMounted(() => {
     // farmId.value = 88388;
 
-
+    farmId.value = sessionStorage.getItem("farmId")
+    getFarmDetail(farmId.value);
+    getFarmWorkList(farmId.value);
+    getFarmLog()
     // window.addEventListener("scroll", debouncedHandleScroll);
 
     window.addEventListener("scroll", debouncedHandleScroll);
@@ -468,8 +461,10 @@ const showDetail = (card) => {
     if (card.orderStatus === 5 || card.orderStatus === 4) {
         // 农事成效
         router.push({ path: "/ns_recrod_effect", query: { data: JSON.stringify(card) } });
-    } else if (card.orderStatus || card.orderStatus === 0) {
-        router.push({ path: "/work_detail", query: { data: JSON.stringify(card), recordId: null } });
+    } else if (card.orderStatus === 0) {
+        router.push({ path: "/add_farm", query: { farmId: card.farmId, libId: card.farmWorkId, } });
+    } else if (card.orderStatus) {
+        router.push({ path: "/work_detail", query: { farmId: card.farmId, libId: card.farmWorkId, } });
     }
 };
 

src/views/home/index.vue

@@ -274,6 +274,7 @@ const indicatorChartData = ref({})
 const blueZone = ref('ws0y1meyhxp4')
 
 const getFarmLog = () =>{
+  console.log('getfarmlog')
   const params = {
     id: null,
     farmId: 766,
@@ -412,39 +413,13 @@ if(arr[2]==e){
 
 const showPoint = ref(true)
 const showType = ref("point")
-//地图点击事件
-eventBus.on('click:point',(e)=>{
-  // showType.value = "point"
-  // if(btnIndex.value===1){
-  //   btnName.value=e.name
-  //   if(e.value===1){
-  //     showPoint.value = true
-  //     samplePointLayer.updatePointStatus(true)
-  //   }else{
-  //     showPoint.value = false
-  //   }
-  // }
-})
 
-//地图点击区域事件
-eventBus.on('click:area',(e)=>{
-  // showType.value = "area"
-  // if(btnIndex.value===0){
-  //   btnName.value=e.name
-  //   if(e.value===1){
-  //     showPoint.value = true
-  //   }else{
-  //     showPoint.value = false
-  //   }
-  //   regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
-  // }
-})
 
 eventBus.on('click:updateArea',(e)=>{
   blueZone.value = e.value
   btnName.value=e.name
   regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
-  getFarmLog()
+  //getFarmLog()
 })
 
 const currentComponent = ref("homePage");

src/views/home/map/samplePointLayer.js

@@ -167,7 +167,7 @@ class SamplePointLayer {
 
   getIcon(item){
     // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
-    let imgSrc = require('@/assets/images/map/status/status-bh.png')
+    let imgSrc = require('@/assets/images/map/status/status-zc.png')
     let scale = 0.8
     if(item.status == 1){
       imgSrc = require('@/assets/images/map/status/status-szyc.png')

src/views/workDetail/components/boxClass.scss

@@ -166,7 +166,7 @@
             display: flex;
             align-items: center;
             font-size: 15px;
-            margin-bottom: 5px;
+            margin-bottom: 12px;
             .info-name {
                 color: #727272;
                 flex: none;

src/views/workDetail/components/prescriptionBox.vue

@@ -1,12 +1,13 @@
 <template>
     <!-- 专家处方 -->
-    <div class="work-item" :class="{ dark: prescriptioData?.progress === 0 && ROLETYPE != '3' }">
+    <!-- <div class="work-item" :class="{ dark: prescriptioData?.orderStatus === 0 && ROLETYPE != '3' }"> -->
+    <div class="work-item">
         <div class="work-info">
-            <img
-                v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'"
+            <!-- <img
+                v-if="prescriptioData?.orderStatus === 0 && ROLETYPE == '3'"
                 class="todo-img"
                 src="@/assets/img/gallery/todo.png"
-            />
+            /> -->
             <div class="prescription-box">
                 <div class="step-box">
                     <step-box
@@ -27,13 +28,13 @@
                         <div class="info-name">服务区域：</div>
                         <div class="info-value">{{ infoItem.serviceRegion }}</div>
                     </div>
-                    <div v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'">
+                    <div v-if="prescriptioData?.orderStatus === 0 && ROLETYPE == '3'">
                         <div class="info-item">
                             <div class="info-name">触发条件：</div>
                             <div class="info-value">
-                                {{ infoItem.farmWorkLibName }}
+                                {{ infoItem.condition }}
                                 <div class="select-value">
-                                    <el-select v-model="infoItem.usageMode" placeholder="请选择" style="width: 80px">
+                                    <el-select v-model="infoItem.condition" placeholder="请选择" style="width: 80px">
                                         <el-option v-for="num in 9" :key="num" :value="20 + (num - 1) * 5 + '%'">
                                             {{ 20 + (num - 1) * 5 }}%
                                         </el-option>
@@ -68,11 +69,9 @@
                     </div>
                 </div>
                 <div class="desc">
-                    您果园周边 3公里 出现虫害。根据气象模型推算，您的果园出现 卷叶蛾 风险达到90％。手机拍照上传
-                    果园照片，自动预测物候期可以确定.
-                    <!-- {{ prescriptioData?.expertPrescription }} -->
+                    {{ prescriptioData.expertPrescription || prescriptioData.weatherWarningMsg }}
                 </div>
-                <!-- v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'" -->
+                <!-- v-if="prescriptioData?.orderStatus === 0 && ROLETYPE == '3'" -->
                 <div class="prescription-item">
                     <div class="recipe-box">
                         <div class="recipe-title">
@@ -225,18 +224,19 @@
                     </div>
                     <custom-table type="0" :tableHeader="tableHeader" :tableData="tableData"></custom-table>
                 </div> -->
-                <div class="prescription-item" v-if="prescriptioData?.progress === 0">
+                <div class="prescription-item" v-if="prescriptioData?.orderStatus === 0">
                     <div class="sub-title">
                         <div class="sub-line"></div>
                         <div class="sub-name">指标动态</div>
                         <div class="sub-line"></div>
                     </div>
                     <div class="prescription-chart">
-                        <chart :key="1" type="feature" :chartJson="prescriptioData.indexJson"></chart>
+                        <!-- <chart :key="1" type="feature" :indexName="infoItem.indexName" :chartJson="prescriptioData.indexJson"></chart> -->
                     </div>
                 </div>
-                <div class="prescription-item" v-if="prescriptioData?.progress === 0 && ROLETYPE == '3'">
-                    <el-button class="one-btn" type="primary" @click="submitForm(formRef)">确认下发</el-button>
+                <div class="prescription-item" v-if="prescriptioData?.orderStatus === 0 && ROLETYPE == '3'">
+                    <el-button class="btn" type="danger" plain @click="remove()">删除</el-button>
+                    <el-button class="btn" type="primary" @click="submitForm(formRef)">确认下发</el-button>
                 </div>
             </div>
         </div>
@@ -244,13 +244,15 @@
 </template>
 
 <script setup>
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } 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 stepBox from "@/components/common/stepBox.vue";
 import customTable from "./table.vue";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
 
 const props = defineProps({
     prescriptioData: {
@@ -310,7 +312,8 @@ const tableData = ref([
 const infoItem = ref({});
 
 const store = useStore();
-const ROLETYPE = store.state.app.curRole;
+const ROLETYPE = '3';
+// const ROLETYPE = store.state.app.curRole;
 
 // 农事类型--区分表格显示字段等
 const workType = ref(false);
@@ -332,30 +335,40 @@ VE_API.order.pesticideFertilizers().then(({ data }) => {
 });
 
 onMounted(() => {
-    dynamicValidateForm.domains = props.prescriptioData?.pesticideFertilizers.map((item) => ({ ...item }));
-    // submit()
-    console.log("dynamicValidateForm.domains", dynamicValidateForm.domains);
+    dynamicValidateForm.usageMode = props.prescriptioData.usageMode;
+    dynamicValidateForm.prescriptionList = props.prescriptioData.prescriptionList.map((item) => ({ ...item }));
+    // submit()    // submit()
+    console.log("dynamicValidateForm.domains",props.prescriptioData);
     infoItem.value = props.prescriptioData;
 });
 
 // 表单
 const formRef = ref();
 const dynamicValidateForm = reactive({
-    domains: [
+    name: "",
+    conditionRate: "",
+    executeDate: "",
+    usageMode: "",
+    prescriptionList: [
         {
-            key: 1,
-            typeName: "",
-            muUsage: "",
-            muUsage2: "",
-            ratio: "",
-            ratio2: "",
-            remark: "",
+            name: "",
+            pesticideFertilizerList: [
+                {
+                    key: 1,
+                    typeName: "",
+                    muUsage: "",
+                    muUsage2: "",
+                    ratio: "",
+                    ratio2: "",
+                    remark: "",
+                },
+            ],
         },
     ],
 });
 
-const addDomain = () => {
-    dynamicValidateForm.domains.unshift({
+const addDomain = (parentIndex) => {
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.unshift({
         key: Date.now(),
         muUsage: "",
         muUsage2: "",
@@ -363,21 +376,25 @@ const addDomain = () => {
         ratio2: "",
         remark: "",
     });
-    console.log("121323.domains", dynamicValidateForm.domains);
 };
 
-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 removeDomain = (parentIndex, item) => {
+    const index = dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.indexOf(item);
+    if (index !== -1) {
+        dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.splice(index, 1);
+    }
 };
 
-const resetItemForm = (index) => {
-    dynamicValidateForm.domains[index] = { typeName: "", muUsage: "", muUsage2: "", ratio: "", ratio2: "", remark: "" };
+const resetItemForm = (parentIndex, index) => {
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
+        typeName: "",
+        muUsage: "",
+        muUsage2: "",
+        ratio: "",
+        ratio2: "",
+        remark: "",
+    };
 };
-
 /**
  * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
  * @param index
@@ -451,6 +468,27 @@ const handleTableData = (item) => {
         },
     ];
 };
+
+const remove = () => {
+    ElMessageBox.confirm("是否要删除这个农事?", "警告", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning",
+    }).then(() => {
+        VE_API.farm.deleteFarmWork({ libId: infoItem.value.farmWorkLibId }).then(({ code }) => {
+            if (code === 0) {
+                ElMessage({
+                    type: "success",
+                    message: "删除成功！",
+                });
+                setTimeout(() => {
+                    // router.go(-1);
+                    router.replace("/expert_album?reload=true");
+                }, 500);
+            }
+        });
+    });
+};
 </script>
 
 <style lang="scss" scoped>

src/views/workDetail/index.vue

@@ -7,12 +7,12 @@
                     <img src="@/assets/images/common/back-icon.png" alt="" />
                     返回
                 </div>
-                <chart-box class="left-cont" name="秋捎防虫" color="yellow">
+                <chart-box class="left-cont" v-if="workList && workList.length" :name="workList[0].farmWorkName" color="yellow">
                     <div class="box">
                         <div class="box-item">
                             <div class="box-title">
                                 专家处方
-                                <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon>
+                                <!-- <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon> -->
                             </div>
                             <component v-if="workList && workList.length" :is="components[currentComponent]" :prescriptioData="workList[0]" />
                         </div>
@@ -135,17 +135,13 @@ const handleCheck = (e) => {
 const router = useRouter();
 const route = useRoute();
 const mapRef = ref(null);
-const workList = ref([])
+const workList = ref({})
 
 const getList = () => {
-  VE_API.order.fetchWorkList().then(({data}) => {
-    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
-    }
-  })
+    VE_API.farm.fetchFarmWorkList({ farmId, libId }).then(({data}) => {
+    // data[0].orderStatus = data[0].orderStatus + 1
+        workList.value = data
+    })
 }
 
 const getBlueList = () =>{
@@ -159,7 +155,7 @@ const getBlueList = () =>{
             level: null,
         },
     ];
-    VE_API.farm.blueRegionList({ farmId: 766 }).then(({ data, code }) => {
+    VE_API.farm.blueRegionList({ farmId }).then(({ data, code }) => {
         for (let item of data) {
             executeBlueZones.map((zone) => {
                 if (zone.id === item.blueZoneCode) {
@@ -173,6 +169,8 @@ const getBlueList = () =>{
     });
 }
 
+let farmId = route.query.farmId
+let libId = route.query.libId
 onMounted(() => {
     getList();
     getBlueList()

src/views/workDetail/prescriptionBox.vue

@@ -0,0 +1,817 @@
+<template>
+    <!-- 专家处方 -->
+    <div class="work-item" :class="{ dark: 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="progress === 0 && ROLETYPE == '3'" class="todo-img" src="@/assets/img/gallery/todo.png" />
+            <img v-if="progress !== 0" class="done-img" src="@/assets/img/gallery/done.png" />
+            <div class="card-item-title"><span class="dotted"></span>专家处方</div>
+            <div class="prescription-box">
+                <div class="step-box">
+                    <step-box :orderStatus="infoItem.orderStatus" v-if="infoItem.orderStatus || 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-value">{{ infoItem.orderId }}</div>
+                    </div>
+                    <div class="info-item">
+                        <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-value">{{ infoItem.serviceRegion }}</div>
+                    </div>
+                    <div v-if="progress === 0 && ROLETYPE == '3'">
+                        <div class="info-item">
+                            <div class="info-name">触发条件</div>
+                            <div class="info-value">
+                                {{ infoItem.condition }}
+                                <div class="select-value">
+                                    <el-select v-model="infoItem.condition" placeholder="请选择" style="width: 80px">
+                                        <el-option v-for="num in 9" :key="num" :value="20 + (num - 1) * 5 + '%'">
+                                            {{ 20 + (num - 1) * 5 }}%
+                                        </el-option>
+                                    </el-select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="info-item time-picker">
+                            <div class="info-name">执行时间</div>
+                            <div class="info-value">
+                                <el-date-picker
+                                    style="width: 150px"
+                                    value-format="YYYY-MM-DD"
+                                    v-model="infoItem.executeDate"
+                                    type="date"
+                                    :clearable="false"
+                                    class="date-info"
+                                    placeholder="选择日期"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <div class="info-item">
+                            <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-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 || prescriptioData.weatherWarningMsg }}
+                </div>
+                <div class="prescription-item" v-if="progress === 0 && ROLETYPE == '3' && dynamicValidateForm.prescriptionList && dynamicValidateForm.prescriptionList.length && dynamicValidateForm.prescriptionList[0].pesticideFertilizerList.length">
+                    <div class="usageMode-wrap">
+                        <div class="box-item">
+                            <div class="form-l">施用方式</div>
+                            <div class="form-r">
+                                <el-select
+                                    v-model="dynamicValidateForm.usageMode"
+                                    placeholder="请选择"
+                                    style="width: 152px"
+                                >
+                                    <el-option
+                                        v-for="(usage, uId) in allUsageModeList"
+                                        :key="uId"
+                                        :label="usage"
+                                        :value="usage"
+                                    />
+                                </el-select>
+                            </div>
+                        </div>
+                    </div>
+                    <el-form ref="formRef" style="max-width: 600px" :model="dynamicValidateForm" class="demo-dynamic">
+                        <div
+                            v-for="(prescriptionItem, prescriptionI) in dynamicValidateForm.prescriptionList"
+                            :key="prescriptionI"
+                        >
+                            <div class="recipe-box">
+                                <div class="recipe-title">
+                                    <div class="recipe-name">{{ prescriptionItem.name }}处方</div>
+                                    <div class="recipe-btn" @click="addDomain(prescriptionI)">
+                                        <el-icon><Plus /></el-icon>新增药物
+                                    </div>
+                                </div>
+                                <div class="recipe-item">
+                                    <div class="recipe-form">
+                                        <el-form-item
+                                            v-for="(domain, index) in prescriptionItem.pesticideFertilizerList"
+                                            :key="domain.key"
+                                            :prop="'domains.' + index + '.value'"
+                                        >
+                                            <div class="form-box">
+                                                <div class="form-index">{{ formatIndex(index) }}</div>
+                                                <div class="box-item" v-if="domain.typeName">
+                                                    <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">
+                                                    <div class="form-l">肥药名称</div>
+                                                    <div class="form-r">
+                                                        <el-select
+                                                            @change="
+                                                                handlePesticideFertilizerChange(prescriptionI, index)
+                                                            "
+                                                            v-model="domain.pesticideFertilizerId"
+                                                            placeholder="请选择"
+                                                            style="width: 140px"
+                                                        >
+                                                            <el-option
+                                                                v-for="item in pesticideFertilizersOptions"
+                                                                :key="item.id"
+                                                                :label="item.defaultName"
+                                                                :value="item.id"
+                                                            />
+                                                        </el-select>
+                                                    </div>
+                                                </div>
+                                                <div class="form-title">人工方式</div>
+                                                <div class="box-item sub-item">
+                                                    <div class="form-l has-sub">
+                                                        <div class="main-name">肥药配比</div>
+                                                        <div class="sub-name">(药剂:兑水量)</div>
+                                                    </div>
+                                                    <div class="form-r input-box text-center">
+                                                        <el-input
+                                                            v-model="domain.ratio"
+                                                            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">
+                                                    <div class="form-l has-sub">
+                                                        <div class="main-name">单亩用量</div>
+                                                        <div class="sub-name">(亩数:药剂)</div>
+                                                    </div>
+                                                    <div class="form-r input-box text-center">
+                                                        <el-input
+                                                            v-model="domain.muUsage"
+                                                            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 v-if="dynamicValidateForm.usageMode === '叶面施'">
+                                                    <div class="form-title">无人机方式</div>
+                                                    <div class="box-item sub-item">
+                                                        <div class="form-l has-sub">
+                                                            <div class="main-name">肥药配比</div>
+                                                            <div class="sub-name">(药剂:兑水量)</div>
+                                                        </div>
+                                                        <div class="form-r input-box text-center">
+                                                            <el-input
+                                                                v-model="domain.muUsage2"
+                                                                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 has-sub">
+                                                            <div class="main-name">单亩用量</div>
+                                                            <div class="sub-name">(亩数:药剂)</div>
+                                                        </div>
+                                                        <div class="form-r input-box text-center">
+                                                            <el-input
+                                                                v-model="domain.ratio2"
+                                                                style="width: 140px"
+                                                                placeholder="请输入"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="input-box">
+                                                    <el-input
+                                                        v-model="domain.remark"
+                                                        style="width: 100%"
+                                                        placeholder="备注：用药注意事项"
+                                                    />
+                                                </div>
+                                                <div class="action-btn">
+                                                    <el-button
+                                                        class="btn delete-btn"
+                                                        @click.prevent="removeDomain(prescriptionI, domain)"
+                                                    >
+                                                        删除
+                                                    </el-button>
+                                                    <el-button
+                                                        type="primary"
+                                                        class="btn"
+                                                        @click.prevent="resetItemForm(prescriptionI, index)"
+                                                    >
+                                                        重置
+                                                    </el-button>
+                                                </div>
+                                            </div>
+                                        </el-form-item>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </el-form>
+                </div>
+                <div class="prescription-item" v-else v-show="prescriptioData.prescriptionList && prescriptioData.prescriptionList.length && prescriptioData.prescriptionList[0].pesticideFertilizerList.length">
+                    <div class="sub-title">
+                        <div class="sub-name">药物处方</div>
+                    </div>
+                    <div class="use-mode">施用方式：<span>{{ prescriptioData.usageMode }}</span></div>
+                    <div v-if="workType">
+                        <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-table-wrap"
+                                v-for="(prescriptionItem, prescriptionI) in prescriptioData.prescriptionList"
+                                :key="prescriptionI"
+                            >
+                                <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>
+                                        <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 }}</div>
+                                                <div class="sub-line title-5">{{ subP.muUsage }}</div>
+                                            </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 : "---" }}</div>
+                                                <div class="sub-line title-5">{{ subP.muUsage2 ? subP.muUsage2 : "---" }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
+                                </div>
+                                <!-- <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="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>
+                    <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="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 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
+                            :executeBlueZones="infoItem?.executeBlueZones"
+                            :farmId="infoItem.farmId"
+                            :regionId="infoItem.regionId"
+                        ></execute-blue-region>
+                    </div>
+                </div>
+                <div class="prescription-item" v-if="progress === 0">
+                    <div class="sub-title">
+                        <div class="sub-line"></div>
+                        <div class="sub-name">指标动态</div>
+                        <div class="sub-line"></div>
+                    </div>
+                    <div class="prescription-chart">
+                        <chart
+                            :key="1"
+                            type="feature"
+                            :indexName="infoItem.indexName"
+                            :chartJson="prescriptioData.indexJson"
+                        ></chart>
+                    </div>
+                </div>
+                <div class="prescription-item action-btn" v-if="progress === 0 && ROLETYPE == '3'">
+                    <el-button class="btn" type="danger" plain @click="remove()">删除</el-button>
+                    <el-button class="btn" type="primary" @click="submitForm(formRef)">确认下发</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import eventBus from "@/api/eventBus";
+import chart from "./chart.vue";
+import { onActivated, onMounted, reactive, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useStore } from "vuex";
+import ExecuteBlueRegion from "./executeBlueRegion";
+import stepBox from "@/components/common/stepBox.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const props = defineProps({
+    progress: {
+        type: Number,
+        required: true,
+    },
+    prescriptioData: {
+        type: Object,
+    },
+});
+
+const infoItem = ref({});
+
+const store = useStore();
+const ROLETYPE = store.state.app.curRole;
+
+// 农事类型--区分表格显示字段等
+const workType = ref(true);
+
+let pesticideFertilizersOptions = ref([
+    {
+        id: "null",
+        name: "芸苔素内酯 15000倍",
+        typeName: "30",
+        defaultRatio: null,
+        defaultDroneRatio: null,
+        unit: 0,
+        defaultName: "调节",
+    },
+]);
+VE_API.order.pesticideFertilizers().then(({ data }) => {
+    pesticideFertilizersOptions.value = data;
+});
+
+onMounted(() => {
+    dynamicValidateForm.usageMode = props.prescriptioData.usageMode;
+    dynamicValidateForm.prescriptionList = props.prescriptioData.prescriptionList.map((item) => ({ ...item }));
+    // submit()
+    infoItem.value = props.prescriptioData;
+});
+
+// 表单
+const formRef = ref();
+const dynamicValidateForm = reactive({
+    name: "",
+    conditionRate: "",
+    executeDate: "",
+    usageMode: "",
+    prescriptionList: [
+        {
+            name: "",
+            pesticideFertilizerList: [
+                {
+                    key: 1,
+                    typeName: "",
+                    muUsage: "",
+                    muUsage2: "",
+                    ratio: "",
+                    ratio2: "",
+                    remark: "",
+                },
+            ],
+        },
+    ],
+});
+
+const addDomain = (parentIndex) => {
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.unshift({
+        key: Date.now(),
+        muUsage: "",
+        muUsage2: "",
+        ratio: "",
+        ratio2: "",
+        remark: "",
+    });
+};
+
+const removeDomain = (parentIndex, item) => {
+    const index = dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.indexOf(item);
+    if (index !== -1) {
+        dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.splice(index, 1);
+    }
+};
+
+const resetItemForm = (parentIndex, index) => {
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
+        typeName: "",
+        muUsage: "",
+        muUsage2: "",
+        ratio: "",
+        ratio2: "",
+        remark: "",
+    };
+};
+
+const allUsageMode = ref(null);
+const allUsageModeList = ["叶面施", "根部施"];
+
+/**
+ * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
+ * @param index
+ */
+const handlePesticideFertilizerChange = (parentIndex, index) => {
+    let obj = pesticideFertilizersOptions.value.filter(
+        (item) =>
+            dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index].pesticideFertilizerId ===
+            item.id
+    )[0];
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
+        ...dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index],
+        typeName: obj.typeName,
+        unit: obj.unit,
+        defaultRatio: obj.defaultRatio,
+        usageModeList: obj.usageModeList,
+        ratio: obj.defaultRatio,
+        defaultName: obj.defaultName,
+        pesticideFertilizerName: obj.name,
+        pesticideFertilizerCode: obj.pesticideFertilizerCode,
+    };
+};
+
+const submitForm = (formEl) => {
+    if (!formEl) return;
+    formEl.validate((valid) => {
+        if (valid) {
+            submit();
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
+
+const submit = () => {
+    // const executeBlueZones = newFarmMap.getSelectedBlueRegion();
+    // if (!executeBlueZones || !executeBlueZones.length) {
+    //     ElMessage({
+    //         message: "请选择执行区域",
+    //         type: "warning",
+    //     });
+    //     return false
+    // }
+    // 检查药物所有项是否都包含特定的字段
+    const hasRequiredFields = dynamicValidateForm.prescriptionList.every((item) => {
+        return item.pesticideFertilizerList.every((domain) => {
+            const hasPesticideFertilizerCode = "pesticideFertilizerCode" in domain;
+            const hasMuUsage = "muUsage" in domain;
+            const hasRatio = "ratio" in domain;
+
+            const isMuUsageValid = domain.muUsage !== "";
+            const isRatioValid = domain.ratio ? true : false;
+
+            return hasPesticideFertilizerCode && hasMuUsage && hasRatio && isMuUsageValid && isRatioValid;
+        });
+    });
+    if (!hasRequiredFields) {
+        ElMessage({
+            message: "请完善药物信息",
+            type: "warning",
+        });
+        return false;
+    }
+    const data = {
+        ...infoItem.value,
+        ...dynamicValidateForm,
+        // prescription: flattenedDomains,
+        orderStatus: 1,
+        // weatherWarningMsg: warningMsg.value,
+        // allUsageMode: allUsageMode.value,
+    };
+    VE_API.order.confirm(data).then(({ code }) => {
+        if (code === 0) {
+            ElMessage({
+                message: "下发处方成功",
+                type: "success",
+            });
+            setTimeout(() => {
+                eventBus.emit("discover:submitForm");
+                // window.location.reload();
+            }, 500);
+        }
+    });
+};
+
+const formatIndex = (index) => {
+    return String(index + 1).padStart(2, "0");
+};
+
+const handleTableData = (item) => {
+    return [
+        {
+            typeName: item.typeName,
+            defaultName: item.defaultName,
+            executeStyle: 1,
+            ratio: item.ratio || item.defaultRatio,
+            usageMode: item.usageMode,
+            muUsage: item.muUsage,
+            unit: item.unit,
+        },
+        {
+            typeName: item.typeName,
+            defaultName: item.defaultName,
+            executeStyle: 2,
+            ratio: item.ratio2,
+            usageMode: "---",
+            muUsage: item.muUsage2,
+            unit: item.unit,
+        },
+    ];
+};
+
+const remove = () => {
+    ElMessageBox.confirm("是否要删除这个农事?", "警告", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning",
+    }).then(() => {
+        VE_API.farm.deleteFarmWork({ libId: infoItem.value.farmWorkLibId }).then(({ code }) => {
+            if (code === 0) {
+                ElMessage({
+                    type: "success",
+                    message: "删除成功！",
+                });
+                setTimeout(() => {
+                    // router.go(-1);
+                    router.replace("/expert_album?reload=true");
+                }, 500);
+            }
+        });
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./boxClass.scss";
+.recipe-box {
+    .recipe-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .recipe-name {
+            color: #000000;
+            font-size: 14px;
+        }
+        .recipe-btn {
+            font-size: 12px;
+            color: #2199f8;
+        }
+    }
+}
+.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;
+        padding: 8px 10px 10px 10px;
+    }
+    .result-index {
+        position: absolute;
+        left: -1px;
+        top: -1px;
+        padding: 0 8px;
+        background: #2199f8;
+        color: #fff;
+        font-size: 12px;
+        border-radius: 4px 0 4px 0;
+    }
+    .result-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 8px;
+        .title-item {
+            display: flex;
+            align-items: center;
+            .name {
+                color: rgba(33, 153, 248, 0.85);
+            }
+            .value {
+                color: rgba(0, 0, 0, 0.4);
+            }
+        }
+        .title-item + .title-item {
+            padding-left: 16px;
+        }
+    }
+}
+.use-mode {
+    color: rgba(0, 0, 0, 0.4);
+    padding: 2px 0 8px 0;
+    span {
+        color: #2199f8;
+    }
+}
+.new-wrap {
+    border-radius: 5px;
+    text-align: center;
+    border: 1px solid rgba(33, 153, 248, 0.5);
+    .new-title {
+        background: #e0f2ff;
+        border-radius: 5px 5px 0 0;
+        border-bottom: 1px solid rgba(33, 153, 248, 0.5);
+        display: flex;
+        color: rgba(33, 153, 248, 0.85);
+        // 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 {
+                display: flex;
+                align-items: center;
+                border: 1px solid rgba(33, 153, 248, 0.5);
+                background: #fff;
+                border-radius: 5px;
+                color: rgba(0, 0, 0, 0.4);
+                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(33, 153, 248, 0.5);
+                    }
+                    .line-3 {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .sub-line {
+                        padding: 10px 0;
+                    }
+                    .line-4 {
+                        display: flex;
+                        align-items: center;
+                        border-top: 1px solid rgba(33, 153, 248, 0.5);
+                    }
+                    .execute-line {
+                        border-right: 1px solid rgba(33, 153, 248, 0.5);
+                    }
+                }
+
+            }
+            .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;
+        }
+    }
+}
+</style>