feat:添加新增农事页面

src/components/chartBox.vue

@@ -59,7 +59,7 @@ const handleShrink = () =>{
     align-items: center;
     justify-content: space-between;
     border-bottom: 0.6px solid rgb(255, 255, 255, 0.4);
-    padding: 0 12px;
+    padding-right: 12px;
     box-sizing: border-box;
     .name {
       display: flex;
@@ -101,13 +101,22 @@ const handleShrink = () =>{
   }
 
   &.yellow{
-    border: 1px solid #555555;
+    border: 0.6px solid #444444;
     border-radius: 8px;
+    background: #191919;
     .chart-title{
+      height: 59px;
       .name{
         color: #FFD489;
+        span{
+          font-size: 22px;
+        }
       }
     }
+    .chart-content{
+      padding: 0;
+      height: calc(100% - 59px);
+    }
   }
 }
 

src/views/addFarm/components/steps.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="steps">
+        <div
+            class="step-item"
+            :class="{ step: index !== 0, active: index === active, complete: index < active }"
+            v-for="(item, index) in list"
+            :key="index"
+        >
+            <el-icon v-show="index < active" class="icon"><CircleCheck /></el-icon>
+            {{ item }}
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    active: {
+        type: Number,
+        defalut: 0,
+        required: true,
+    },
+});
+const list = ["选择农事类型", "编辑处方"];
+</script>
+
+<style lang="scss" scoped>
+.steps {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    .step-item {
+        flex: 1;
+        color: #1D1D1D;
+        padding: 8px;
+        font-size: 12px;
+        width: 109px;
+        box-sizing: border-box;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: url("@/assets/images/components/steps-bg.png") no-repeat center center / 100% 100%;
+        .icon{
+            font-weight: bold;
+            font-size: 14px;
+            margin-right: 4px;
+        }
+        &.step {
+            color: #727272;
+            background: url("@/assets/images/components/step-item.png") no-repeat center center / 100% 100%;
+            &.active {
+                color: #1D1D1D;
+                background: url("@/assets/images/components/step-item-act.png") no-repeat center center / 100% 100%;
+            }
+        }
+        &.complete {
+            color: #FFD489;
+            background: url("@/assets/images/components/step-item-ok.png") no-repeat center center / 100% 100%;
+        }
+    }
+}
+</style>

src/views/addFarm/components/table.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="table">
+        <div class="header">
+            <div class="header-item">
+                <span>使用功效：</span>
+                <el-select class="select" v-model="value">
+                    <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                </el-select>
+            </div>
+            <div class="header-item">
+                <span>肥药名称：</span>
+                <el-select class="select" v-model="value">
+                    <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                </el-select>
+            </div>
+        </div>
+        <div class="body">
+            <div class="th">
+                <div class="td"></div>
+                <div class="td">配比<span>(药剂：兑水量)</span></div>
+                <div class="td">施用方式</div>
+                <div class="td">单亩用量</div>
+            </div>
+            <div class="tr">
+                <div class="td">人工</div>
+                <div class="td">
+                    <el-select class="select" v-model="value">
+                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                    </el-select>
+                </div>
+                <div class="td">
+                    <el-select class="select" v-model="value">
+                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                    </el-select>
+                </div>
+                <div class="td">
+                    <el-select class="select" v-model="value">
+                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                    </el-select>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="td">无人机</div>
+                <div class="td">
+                    <el-select class="select" v-model="value">
+                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                    </el-select>
+                </div>
+                <div class="td">
+                    <el-select class="select" v-model="value">
+                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                    </el-select>
+                </div>
+                <div class="td">
+                    <el-select class="select" v-model="value">
+                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
+                    </el-select>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("营养");
+const list = ref([
+    {
+        name: "营养",
+    },
+    {
+        name: "Action 2",
+    },
+    {
+        name: "Action 3",
+    },
+]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+    .header {
+        display: flex;
+        justify-content: center;
+        .header-item {
+            display: flex;
+            align-items: center;
+            color: #727272;
+        }
+        .header-item + .header-item {
+            margin-left: 36px;
+        }
+    }
+    .body {
+        border: 1px solid #444444;
+        border-radius: 5px;
+        .th{
+            border-bottom: 1px solid #444444;
+        }
+        .th,.tr{
+            display: flex;
+            align-items: center;
+            color: #727272;
+            height: 46px;
+            font-size: 16px;
+            .td{
+                text-align: center;
+                flex: 1;
+                span{
+                    font-size: 11px;
+                    display: inline-block;
+                }
+            }
+            .td + .td{
+                border-left: 1px solid #444444;
+            }
+        }
+        .tr + .tr{
+            border-top: 1px solid #444444;
+        }
+    }
+    .select {
+        width: 50px;
+        ::v-deep {
+            .el-select__wrapper {
+                background: transparent;
+                padding: 0;
+                box-shadow: none;
+            }
+            .el-select__placeholder,
+            .el-select__caret {
+                color: #ffd489;
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.v-dropdown-menu {
+    .active {
+        color: #409eff;
+    }
+}
+</style>

src/views/addFarm/index.vue

@@ -1,23 +1,114 @@
 <template>
     <div class="base-container">
-        <fnHeader :hideSwitch="true" :hideShadow="true"></fnHeader>
+        <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
         <div class="content">
             <div class="left">
                 <div class="btn" @click="goBack">
-                    <el-icon><ArrowLeftBold /></el-icon>
+                    <img src="@/assets/images/common/back-icon.png" alt="">
                     返回
                 </div>
-                <div class="left-cont">
-                    <chart-box name="气象预警" arrow="left" color="yellow">
-                        <template #title-right>
-                            <div class="button">123</div>
+                <chart-box class="left-cont" name="编辑农事" color="yellow">
+                    <template #title-right>
+                        <steps :active="active"></steps>
+                    </template>
+                    <div class="box">
+                        <div class="box-item" v-if="active===0">
+                            <div class="box-title">
+                                <div>选择农事类型
+                                    <span>(可多选)</span>
+                                </div>
+                            </div>
+                            <div class="list">
+                                <div class="list-item" @click="handleItem(item,index)" :class="{active:checkValue.indexOf(item)!==-1}" v-for="(item,index) in checkList" :key="index">
+                                    {{item}}
+                                    <el-icon size="25" color="#FFD489" v-show="checkValue.indexOf(item)!==-1"><CircleCheckFilled /></el-icon>
+                                    <div v-show="checkValue.indexOf(item)===-1" class="round"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <template v-else>
+                            <div class="box-item">
+                                <div class="box-title">基本信息</div>
+                                <el-form class="box-form" :model="form">
+                                    <el-form-item label="农事名称">
+                                        <el-input v-model="form.name" />
+                                    </el-form-item>
+                                    <el-form-item label="农事目的">
+                                        <el-input v-model="form.mudi" />
+                                    </el-form-item>
+                                    <el-form-item label="触发条件">
+                                        <el-input v-model="form.tiaojian" />
+                                    </el-form-item>
+                                </el-form>
+                            </div>
+                            <div class="box-item" v-for="(item,index) in boxList" :key="index">
+                                <div class="box-title border-none">
+                                    生长异常处方
+                                    <div class="add-text" @click="handleAdd">
+                                        <el-icon class="icon"><Plus /></el-icon>
+                                        添加药物
+                                    </div>
+                                </div>
+                                <div class="box-body">
+                                    <div class="index">{{index<10?'0'+(index + 1):index + 1}}</div>
+                                    <custom-table></custom-table>
+                                    <div class="box-textarea">
+                                        <el-input
+                                            class="textarea"
+                                            v-model="textarea"
+                                            :rows="1"
+                                            type="textarea"
+                                            placeholder="用药注意事项备注"
+                                        />
+                                    </div>
+                                    <div class="btn-group">
+                                        <div class="delete" @click="handleDelete(index)">删除</div>
+                                        <div>重置</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-item">
+                                <el-input
+                                    class="textarea"
+                                    v-model="textarea"
+                                    type="textarea"
+                                    placeholder="用药注意事项备注"
+                                />
+                            </div>
                         </template>
-                    </chart-box>
-                </div>
+                    </div>
+                    <div class="footer">
+                        <div class="button" @click="handleOk">{{active===0?'确定':'下发农事'}}</div>
+                    </div>
+                </chart-box>
             </div>
             <div class="right">
-                <div class="excute-title">执行农事区域</div>
-                <div ref="mapRef" class="bottom-map"></div>
+                <div class="map-header">
+                    <div class="title">
+                        <img src="@/assets/images/common/area-icon.png" alt="">
+                        执行农事区域
+                    </div>
+                    <el-checkbox-group v-model="checkValue" @change="handleCheck">
+                        <el-checkbox v-for="item in checkList" :key="item" :label="item" />
+                    </el-checkbox-group>
+                </div>
+                <div ref="mapRef" class="map">
+                    <div class="map-bg map-btn">查看巡园照片</div>
+                    <div class="map-bg map-legend">
+                        <div class="item">
+                            <img src="@/assets/images/map/status/bhyc.png" alt="">
+                            病害异常
+                        </div>
+                        <div class="item">
+                            <img src="@/assets/images/map/status/chyc.png" alt="">
+                            虫害异常
+                        </div>
+                        <div class="item">
+                            <img src="@/assets/images/map/status/szyc.png" alt="">
+                            生长异常
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -25,7 +116,10 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { ElMessage } from 'element-plus'
 import fnHeader from "@/components/fnHeader.vue";
+import steps from "./components/steps.vue";
+import customTable from "./components/table.vue";
 import FarmMap from "./farmMap";
 import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
@@ -33,6 +127,23 @@ import { useStore } from "vuex";
 let store = useStore();
 let farmMap = new FarmMap();
 
+const active = ref(0)
+
+const checkList = ['生长异常', '病害异常', '虫害异常']
+const checkValue = ref(['生长异常'])
+const handleCheck = (e) =>{
+    console.log('e',e);
+}
+
+const handleItem = (item,index) =>{
+    const curIndex = checkValue.value.indexOf(item)
+    if(curIndex===-1){
+        checkValue.value.push(item)
+    }else{
+        checkValue.value.splice(curIndex,1)
+    }
+}
+
 const router = useRouter();
 const route = useRoute();
 const mapRef = ref();
@@ -41,26 +152,41 @@ onMounted(() => {
     farmMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
 });
 
-const workList = ref([]);
 const getList = () => {
-    VE_API.order.fetchWorkList().then(({ data }) => {
-        // data[0].orderStatus = data[0].orderStatus + 1
-        // && (ROLETYPE.value == '0' || ROLETYPE.value == '3')
-        if (route.query.data && JSON.parse(route.query.data)?.farmWorkId) {
-            data = data.find((item) => item.farmWorkLibId === JSON.parse(route.query.data)?.farmWorkId);
-            workList.value = [data];
-        } else {
-            workList.value = data;
-        }
-        console.log("dtafds,", data);
-    });
+   console.log('000');
 };
 
-const currentComponent = ref("prescriptionBox");
-
 const goBack = () => {
     router.go(-1);
 };
+
+const handleOk = () =>{
+    if(active.value){
+        console.log('123');
+    }else{
+        active.value = 1
+    }
+}
+
+const form = ref({
+    name:'梢期防虫',
+    mudi:'防治荔枝病虫害',
+    tiaojian:'单树花带叶率 40％'
+})
+const textarea = ref('')
+
+const boxList = ref([
+    {
+        index:1
+    }
+])
+const handleAdd = () =>{
+    boxList.value.push({index:1})
+}
+const handleDelete = (index) =>{
+    if(boxList.value.length===1) return ElMessage.warning('最少保留一个处方')
+    boxList.value.splice(index,1)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -75,35 +201,259 @@ const goBack = () => {
 
     .content {
         width: 100%;
-        height: calc(100% - 74px - 48px);
+        height: calc(100% - 74px);
         display: flex;
         justify-content: space-between;
         box-sizing: border-box;
+        padding: 20px;
         .left {
             width: 473px;
             height: 100%;
-            padding-top: 10px;
             box-sizing: border-box;
             .btn {
                 display: flex;
                 align-items: center;
+                justify-content: center;
                 border: 1px solid rgba(255, 255, 255, 0.78);
                 border-radius: 4px;
-                padding: 13px;
+                padding: 9px;
                 margin-bottom: 13px;
+                width: 104px;
+                cursor: pointer;
+                img{
+                    width: 14px;
+                    margin-right: 5px;
+                }
             }
             .left-cont {
-                // border-radius: 8px;
-                // border: 1px solid #555555;
-                // box-sizing: border-box;
+                width: 100%;
+                height: calc(100% - 48px - 4px);
+                .box{
+                    width: 100%;
+                    height: calc(100% - 58px);
+                    padding: 16px 12px;
+                    box-sizing: border-box;
+                    overflow-y: auto;
+                    .box-item{
+                        background: rgba(255, 255, 255, 0.04);
+                        border: 1px solid #444444;
+                        border-radius: 8px;
+                        padding: 16px 12px;
+                        box-sizing: border-box;
+                        width: 100%;
+                        .box-title{
+                            font-size: 20px;
+                            border-bottom: 1px solid #333333;
+                            padding: 0 0 12px 13px;
+                            margin-bottom: 21px;
+                            position: relative;
+                            display: flex;
+                            justify-content: space-between;
+                            &.border-none{
+                                border: none;
+                                padding-bottom: 0;
+                            }
+                            &::before{
+                                content: '';
+                                position: absolute;
+                                left: 0;
+                                top: 6px;
+                                width: 3px;
+                                height: 16px;
+                                background: #fff;
+                                border-radius: 11px;
+                            }
+                            span{
+                                font-size: 14px;
+                                color: #9F9F9F;
+                            }
+                            .add-text{
+                              font-size: 16px;
+                              color: #FFD489;  
+                              display: flex;
+                              align-items: center;
+                              cursor: pointer;
+                              .icon{
+                                margin-right: 3px;
+                              }
+                            }
+                        }
+                        .list{
+                            .list-item{
+                                background: rgba(255, 255, 255, 0.05);
+                                border-radius: 8px;
+                                font-size: 18px;
+                                padding: 16px;
+                                display: flex;
+                                align-items: center;
+                                justify-content: space-between;
+                                border: 1px solid transparent;
+                                cursor: pointer;
+                                &.active{
+                                    border-color: #FFD489;
+                                    background: rgba(255, 212, 137, 0.05);
+                                }
+                                .round{
+                                    border: 1px solid #cecece;
+                                    border-radius: 50%;
+                                    width: 20px;
+                                    height: 20px;
+                                }
+                            }
+                            .list-item + .list-item{
+                                margin-top: 16px;
+                            }
+                        }
+
+                        // 编辑处方
+                        .box-form{
+                            ::v-deep{
+                                .el-form-item__label{
+                                    color: #9F9F9F;
+                                }
+                                .el-input__wrapper{
+                                    background: transparent;
+                                    box-shadow: 0 0 0 1px #9F9F9F;
+                                    .el-input__inner{
+                                        color: #fff;
+                                    }
+                                }
+                            }
+                        }
+
+                        .box-body{
+                            border: 1px solid #444444;
+                            border-radius: 8px;
+                            padding: 9px;
+                            box-sizing: border-box;
+                            position: relative;
+                            .index{
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                background: #FFD489;
+                                border-radius: 4px 0 4px 0;
+                                font-size: 12px;
+                                color: #1d1d1d;
+                                padding: 0 7px;
+                            }
+                            .box-textarea{
+                                border-radius: 4px;
+                                padding: 10px;
+                                background: rgba(255, 255, 255, 0.05);
+                                margin: 16px 0 20px 0;
+                            }
+                            .btn-group{
+                                display: flex;
+                                div{
+                                    background: rgba(255, 212, 137,0.05);
+                                    border-radius: 4px;
+                                    border: 1px solid #FFD489;
+                                    padding: 6px;
+                                    flex: 1;
+                                    color: #FFD489;
+                                    text-align: center;
+                                    cursor: pointer;
+                                }
+                                .delete{
+                                    background: rgba(249, 152, 81,0.05);
+                                    border: 1px solid #F99851;
+                                    color: #F99851;
+                                    margin-right: 12px;
+                                }   
+                            }
+                        }
+                        .textarea{
+                            ::v-deep{
+                                .el-textarea__inner{
+                                    background: transparent;
+                                    box-shadow: none;
+                                    color: #fff;
+                                    padding: 0;
+                                }
+                            }
+                        }
+                    }
+                    .box-item + .box-item{
+                        margin-top: 16px;
+                    }
+                }
+                .footer{
+                    width: 100%;
+                    height: 58px;
+                    border-top: 0.5px solid #555555;
+                    background: rgba(255, 255, 255, 0.04);
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: center;
+
+                    .button{
+                        font-size: 16px;
+                        padding: 8px 58px;
+                        background: #FFD489;
+                        border-radius: 4px;
+                        color: #000;
+                        margin-right: 12px;
+                        cursor: pointer;
+                    }
+                }
             }
         }
         .right {
-            width: calc(100% - 473px);
+            width: calc(100% - 473px - 18px);
+            margin-left: 18px;
             height: 100%;
-            .bottom-map {
+            background: #191919;
+            border: 0.6px solid #444444;
+            padding: 20px;
+            box-sizing: border-box;
+            border-radius: 8px;
+            .map-header{
+                display: flex;
+                justify-content: space-between;
+                .title{
+                    font-size: 22px;
+                    display: flex;
+                    align-items: flex-end;
+                    font-family: "PangMenZhengDao";
+                    margin-bottom: 16px;
+                    img{
+                        margin-right: 8px;
+                    }
+                }
+            }
+            .map {
                 width: 100%;
-                height: 100%;
+                clip-path: inset(0px round 4px);
+                height: calc(100% - 31px - 16px);
+                position: relative;
+                .map-bg{
+                    position: absolute;
+                    z-index: 2;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 18px;
+                    padding: 7px 16px;
+                    right: 20px;
+                }
+                .map-btn{
+                    top: 19px;
+                    cursor: pointer;
+                }
+                .map-legend{
+                    bottom: 21px;
+                    display: flex;
+                    align-items: center;
+                    .item{
+                        display: flex;
+                        align-items: center;
+                        img{
+                            margin-right: 5px;
+                        }
+                    }
+                    .item + .item{
+                        margin-left: 20px;
+                    }
+                }
             }
         }
     }