|
|
@@ -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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
wangsisi
