foster-pc-vue/src/views/addFarm/index.vue

<template>
    <div class="base-container">
        <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
        <div class="content">
            <div class="left">
                <div class="btn" @click="goBack">
                    <img src="@/assets/images/common/back-icon.png" alt="" />
                    返回
                </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: item.active }"
                                    v-for="(item, index) in checkData"
                                    :key="index"
                                >
                                    {{ item.label }}
                                    <el-icon size="25" color="#FFD489" v-show="item.active"
                                        ><CircleCheckFilled
                                    /></el-icon>
                                    <div v-show="!item.active" 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">
                                    {{ item.label }}处方
                                    <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.children" :key="idx + 'id'">
                                    <div class="index">{{ idx < 10 ? "0" + (idx + 1) : idx + 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,idx)">删除</div>
                                        <div>重置</div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-item">
                                <el-input
                                    class="textarea"
                                    v-model="textarea"
                                    type="textarea"
                                    placeholder="用药注意事项备注"
                                />
                            </div>
                        </template>
                    </div>
                    <div class="footer">
                        <div class="button" @click="handleOk">{{ active === 0 ? "确定" : "下发农事" }}</div>
                    </div>
                </chart-box>
            </div>
            <div class="right">
                <div class="map-header">
                    <div class="title">
                        <img src="@/assets/images/common/area-icon.png" alt="" />
                        执行农事区域
                    </div>
                    <el-checkbox-group v-model="checkValue" @change="handleCheck">
                        <el-checkbox
                            v-for="item in checkList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-checkbox-group>
                </div>
                <div ref="mapRef" class="map">
                    <div class="map-bg map-btn">查看巡园照片</div>
                    <div class="map-bg map-legend">
                        <div class="item">
                            <img src="@/assets/images/map/status/bhyc.png" alt="" />
                            病害异常
                        </div>
                        <div class="item">
                            <img src="@/assets/images/map/status/chyc.png" alt="" />
                            虫害异常
                        </div>
                        <div class="item">
                            <img src="@/assets/images/map/status/szyc.png" alt="" />
                            生长异常
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<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 { deepClone } from "@/common/commonFun";
import chartBox from "@/components/chartBox.vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
let store = useStore();
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}] },
]);
const handleItem = (item, index) => {
    checkData.value[index].active = !checkData.value[index].active;
    // const curIndex = checkValue.value.indexOf(item.value)
    // if(curIndex===-1){
    //     checkValue.value.push(item.value)
    // }else{
    //     checkValue.value.splice(curIndex,1)
    //     checkList.value[index].active = false
    // }
};

const router = useRouter();
const route = useRoute();
const mapRef = ref();
onMounted(() => {
    getList();
    farmMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
});

const getList = () => {
    console.log("000");
};

const goBack = () => {
    router.go(-1);
};

//确定/下发农事
const handleOk = () => {
    if (active.value) {
        console.log("123");
    } else {
        active.value = 1;
        const arr = checkData.value.filter((item) => item.active);
        boxList.value = deepClone(arr);
    }
};

const form = ref({
    name: "梢期防虫",
    mudi: "防治荔枝病虫害",
    tiaojian: "单树花带叶率 40％",
});
const textarea = ref("");

const boxList = ref([]);
//添加
const handleAdd = (index) => {
    boxList.value[index].children.push({ index: 1 });
};
//删除
const handleDelete = (index,childIndex) => {
    if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
    boxList.value[index].children.splice(childIndex, 1);
};
</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100vh;
    color: #fff;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    background: #000;

    .content {
        width: 100%;
        height: calc(100% - 74px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px;
        .left {
            width: 473px;
            height: 100%;
            box-sizing: border-box;
            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(255, 255, 255, 0.78);
                border-radius: 4px;
                padding: 9px;
                margin-bottom: 13px;
                width: 104px;
                cursor: pointer;
                img {
                    width: 14px;
                    margin-right: 5px;
                }
            }
            .left-cont {
                width: 100%;
                height: calc(100% - 48px - 4px);
                .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-item-children {
                            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;
                                }
                            }
                        }
                        .box-item-children + .box-item-children{
                            margin-top: 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 - 18px);
            margin-left: 18px;
            height: 100%;
            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%;
                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;
                    }
                }
            }
        }
    }
}
</style>