feiniao-farm-h5/src/views/old_mini/plan/index.vue

<template>
    <div class="plan-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <div class="plan-title">
            <div class="tabs">
                <div class="tab" :class="{ active: activeTab === 'left' }" @click="setActiveTab('left')">专家处方</div>
                <div class="tab" :class="{ active: activeTab === 'right' }" @click="setActiveTab('right')">
                    我的处方
                    <span class="badge-dot">2</span>
                </div>
                <div class="slider" :style="sliderStyle"></div>
            </div>
        </div>
        <div class="plan-content" v-if="activeTab === 'left'">
            <div class="filter-wrap">
                <div class="filter-item type-cascader">
                    <el-cascader v-model="typeVal" :options="typeOptions"></el-cascader>
                </div>
                <div class="filter-item">
                    <el-select v-model="proviceVal" style="width: 76px">
                        <el-option
                            v-for="item in proviceOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="filter-item">
                    <el-select v-model="expertVal" placeholder="推荐专家" style="width: 86px">
                        <el-option
                            v-for="item in expertOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="filter-item">
                    <el-select v-model="filterVal" placeholder="筛选" style="width: 68px">
                        <el-option
                            v-for="item in filterOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <div class="expert-prescription">
                <div class="plan-menu">
                    <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
                        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
                            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
                                <template #title>
                                    <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
                                    <span class="menu-text">{{ menu.title }}</span>
                                </template>
                                <el-menu-item
                                    v-for="item in menu.children"
                                    :key="item.id"
                                    :index="`${menu.id}-${item.id}`"
                                >
                                    <el-anchor-link :href="item.href" :title="item.title" />
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-anchor>
                </div>
                <div class="expert-content" ref="containerRef">
                    <div v-for="(section, index) in contentData" :key="index" class="content-section">
                        <div class="section-id" :id="section.targetId"></div>
                        <record-item :record-item-data="section">
                            <template #title>
                                <div class="box-title">
                                    <div class="title-l">
                                        {{ section.title }}
                                        <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
                                    </div>
                                    <div class="title-btn" @click="addToMyPlan">
                                        <el-icon color="#fff" size="14"><Plus /></el-icon>
                                    </div>
                                </div>
                            </template>
                        </record-item>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="fixed-bottom">
                <div class="bottom-l">
                    <div class="l-btn">
                        <el-icon color="#666666" class="btn-icon" size="16"><Download /></el-icon>
                        下载处方
                    </div>
                    <div class="l-btn">
                        <el-icon color="#666666" class="btn-icon" size="16"><ChatDotRound /></el-icon>
                        咨询专家
                    </div>
                </div>
                <div class="bottom-r">全部添加</div>
            </div>
        </div>
        <div class="plan-content my-recipe" v-if="activeTab === 'right'">
            <div class="filter-wrap">
                <div class="plan-box">
                    <div
                        class="plan-item"
                        v-for="(item, index) in planList"
                        :key="index"
                        @click="handlePlanClick(index)"
                        :class="{ active: activePlanIndex === index }"
                        >
                        {{ item.name }}
                    </div>
                </div>
                <div class="plan-add" @click="newPlan">新增方案</div>
            </div>
            <div class="expert-prescription">
                <div class="plan-menu">
                    <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
                        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
                            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
                                <template #title>
                                    <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
                                    <span class="menu-text">{{ menu.title }}</span>
                                </template>
                                <el-menu-item
                                    v-for="item in menu.children"
                                    :key="item.id"
                                    :index="`${menu.id}-${item.id}`"
                                >
                                    <el-anchor-link :href="item.href" :title="item.title" />
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-anchor>
                </div>
                <div class="expert-content" ref="containerRef">
                    <div v-for="(section, index) in contentData" :key="index" class="content-section">
                        <div class="section-id" :id="section.targetId"></div>
                        <record-item :record-item-data="section">
                            <template #title>
                                <div class="box-title">
                                    <div class="title-l">
                                        {{ section.title }}
                                        <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
                                    </div>
                                    <div class="title-r">
                                        <div class="btn-item del-btn">
                                            <el-icon color="#fff" size="14"><Delete /></el-icon>
                                        </div>
                                        <div class="btn-item edit-btn">
                                            <el-icon color="#fff" size="14"><Edit /></el-icon>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </record-item>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="fixed-bottom">
                <div class="bottom-l">
                    <div class="l-btn">
                        <img class="btn-icon calculator-icon" src="@/assets/img/home/calculator.png" alt="">
                        投入产出计算器
                    </div>
                </div>
                <div class="bottom-r">新增农事</div>
            </div>
        </div>
    </div>
    <add-group ref="addGroupRef" />
</template>

<script setup>
import { computed, ref } from "vue";
import recordItem from "@/components/recordItem.vue";
import addGroup from "./components/addGroup.vue";
import { useStore } from "vuex";
const store = useStore();

const tabBarHeight = computed(() => store.state.home.tabBarHeight);

const containerRef = ref(null);
const handleClick = (e) => {
    e.preventDefault();
};
const activeTab = ref("left");
// const tabBarHeight = computed(() => store.state.home.tabBarHeight);
const sliderStyle = computed(() => {
    // 根据当前激活的选项卡计算滑动条位置
    const position = activeTab.value === "left" ? "25%" : "75%";
    return {
        left: `calc(${position} - 12px)`, // 减去滑动条宽度的一半以实现居中
    };
});
function setActiveTab(tab) {
    activeTab.value = tab;
}
const typeVal = ref([1, 3]);

const typeOptions = ref([
    {
        value: 1,
        label: "荔枝",
        children: [
            {
                value: 2,
                label: "井岗红糯",
            },
            {
                value: 3,
                label: "桂味",
            },
            {
                value: 4,
                label: "妃子笑",
            },
            {
                value: 5,
                label: "黑叶",
            },
        ],
    },
    {
        value: 6,
        label: "龙眼",
        children: [
            {
                value: 7,
                label: "龙眼1",
            },
            {
                value: 8,
                label: "龙眼2",
            },
            {
                value: 9,
                label: "龙眼3",
            },
            {
                value: 10,
                label: "龙眼4",
            },
        ],
    },
    {
        value: 11,
        label: "枇杷",
        children: [
            {
                value: 12,
                label: "枇杷1",
            },
            {
                value: 13,
                label: "枇杷2",
            },
            {
                value: 14,
                label: "枇杷3",
            },
            {
                value: 15,
                label: "枇杷4",
            },
        ],
    },
]);

const proviceVal = ref("广东");
const proviceOptions = ref([
    {
        value: "广东",
        label: "广东省",
    },
    {
        value: "广西",
        label: "广西省",
    },
    {
        value: "福建",
        label: "福建省",
    },
    {
        value: "海南",
        label: "海南省",
    },
]);

const expertVal = ref("");
const expertOptions = ref([
    {
        value: "1",
        label: "韦帮稳",
    },
    {
        value: "2",
        label: "冼继东",
    },
    {
        value: "3",
        label: "专家3",
    },
    {
        value: "4",
        label: "专家4",
    },
]);

const filterVal = ref("");
const filterOptions = ref([
    {
        value: "1",
        label: "最新",
    },
    {
        value: "3",
        label: "好评",
    },
]);

// 菜单
const defaultActive = ref("1-1");

const menuData = [
    {
        id: 1,
        title: "秋梢期",
        children: [
            { id: 1, title: "巡园农事", href: "#part1" },
            { id: 2, title: "梢期防虫", href: "#part2" },
            { id: 3, title: "梢期营养", href: "#part3" },
        ],
    },
    {
        id: 2,
        title: "开花期",
        children: [
            { id: 1, title: "巡园农事", href: "#part4" },
            { id: 2, title: "摇花吹花", href: "#part5" },
            { id: 3, title: "花期防治", href: "#part6" },
        ],
    },
];

const contentData = ref([
    {
        targetId: "part1",
        title: "巡园农事",
        parentTitle: "秋梢期",
        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，虫害风险控制优异，未发现虫害风险",
        expert: 91356,
        orderStatus: 4,
        activeStatus: 0,
        regionId: 2,
        speciesId: "1",
        speciesName: "荔枝",
        farmWorkId: "699343457474318336",
        farmWorkLibId: "699343457474318336",
        farmWorkLibName: "梢期防虫",
        farmWorkName: "梢期防虫",
        expertIcon:
            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
        expertName: "韦帮稳",
        icon: 4,
        beforeExecuteDate: "2025-08-01",
        executeDate: "2025-08-15",
        code: "BZ-BC-04-SQFC-20",
        expertPrescription: "",
        condition: "单树嫩叶率大于20.0%",
        defaultFarmWork: 0,
        farmWorkType: 3,
        farmWorkTypeName: "病虫",
        usageMode: "叶面施",
        serviceMain: "广州泽秾丰农资有限公司",
        updateDate6: null,
        confirmPicture: [],
        executeMain: "广州泽秾丰农资有限公司",
        storeShortName: "泽秾丰",
        serviceRegion: "广州市从化区荔枝博览园",
        attention: "当前为秋梢期，建议巡园，重点关注叶片、嫩梢等部位",
    },
    {
        targetId: "part2",
        title: "梢期防虫",
        parentTitle: "秋梢期",
        consequenceText: "如果不做本次农事，会导致您的产量、质量下降30%，管理得分降低10分",
        id: "274654",
        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，土壤肥力增加",
        farmName: "荔枝博览园",
        farmPoint: "POINT(113.61702297075017 23.584863449735067)",
        orderId: "745923632567422976",
        area: 2.719998598098755,
        expert: 91356,
        orderStatus: 4,
        activeStatus: 0,
        farmId: 766,
        regionId: 2,
        speciesId: "1",
        speciesName: "荔枝",
        agriculturalId: 24,
        farmWorkId: "699343457444958208",
        farmWorkLibId: "699343457444958208",
        farmWorkLibName: "梢期营养",
        farmWorkName: "梢期营养",
        expertIcon:
            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
        expertName: "韦帮稳",
        expertUserIcon: "",
        expertUserName: "韦帮稳",
        icon: 4,
        indexChart: [],
        indexName: "",
        beforeExecuteDate: "2025-05-26",
        checkDate: null,
        executeDate: "2025-08-01",
        indexJson: "",
        code: "BZ-YY-04-SQYY-20",
        expertPrescription: "",
        condition: "园区叶芽率大于20.0%",
        solarName: "",
        reCheck: null,
        executeBlueZones: [
            {
                id: "ws0y1m6x7cjz",
                level: null,
            },
            {
                id: "ws0y1md9v3ht",
                level: null,
            },
            {
                id: "ws0y1mdspbk7",
                level: null,
            },
            {
                id: "ws0y1mdvvdsz",
                level: null,
            },
            {
                id: "ws0y1me545tg",
                level: null,
            },
        ],
        menu: 1,
        isEdit: 0,
        isMaster: null,
        num: null,
        purpose: "",
        selfExec: null,
        defaultFarmWork: 0,
        farmWorkType: 2,
        farmWorkTypeName: "营养",
        type: 1,
        execute: 4,
        updateDate0: "2025-08-20",
        updateDate1: null,
        updateDate2: null,
        updateDate3: null,
        updateDate4: null,
        updateDate5: null,
        usageMode: "根部施",
        serviceMain: "广州泽秾丰农资有限公司",
        updateDate6: null,
        confirmPicture: [],
        executeMain: "广州泽秾丰农资有限公司",
        storeShortName: "泽秾丰",
        weatherWarningMsg: "",
        executeEvidence: [],
        userEvaluation: null,
        reviewDate: null,
        reviewDate2: null,
        reviewImage: [],
        reviewImage2: [],
        serviceRegion: "广州市从化区荔枝博览园",
        users: [
            {
                id: null,
                orderId: null,
                serviceType: null,
                userType: null,
                userId: 81881,
                joinStatus: null,
                icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png",
                userName: "飞鸟种植助手",
                area: "",
                point: "",
                farmName: "",
                selected: null,
            },
        ],
        cost: null,
        prescriptionList: [
            {
                name: "营养",
                pesticideFertilizerList: [
                    {
                        defaultDroneRatio: null,
                        defaultName: "尿素",
                        defaultRatio: 0,
                        id: null,
                        muPrice: null,
                        muUsage: 15000.0,
                        muUsage2: 15000.0,
                        ratio: 0,
                        ratio2: 0,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施、根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1001",
                        pesticideFertilizerId: "1",
                        pesticideFertilizerName: "尿素",
                        brand: "山东联盟",
                        typeName: "营养",
                        price: 132,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "15-15-15复合肥",
                        defaultRatio: 0,
                        id: null,
                        muPrice: null,
                        muUsage: 45000.0,
                        muUsage2: 45000.0,
                        ratio: 0,
                        ratio2: 0,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1002",
                        pesticideFertilizerId: "2",
                        pesticideFertilizerName: "15-15-15复合肥",
                        brand: "金正大",
                        typeName: "营养",
                        price: 220,
                        unit: "g",
                        executeStyle: null,
                    },
                ],
            },
        ],
        conditionList: [
            {
                index: "1-2-001-02-02-02-01-0008",
                name: "园区叶芽率",
                type: 1,
                value: "0.2",
            },
        ],
    },
    {
        targetId: "part3",
        title: "梢期营养",
        consequenceText: "如果不做本次农事，会导致您的产量、质量下降5%，管理得分降低2分",
        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，转色速度非常稳定，转色率超过80%",
        farmName: "荔枝博览园",
        farmPoint: "POINT(113.61702297075017 23.584863449735067)",
        orderId: "745923697054846976",
        area: 2.719998598098755,
        expert: 91356,
        orderStatus: 4,
        activeStatus: 0,
        farmId: 766,
        regionId: 2,
        speciesId: "1",
        speciesName: "荔枝",
        agriculturalId: 24,
        farmWorkId: "699343457482706947",
        farmWorkLibId: "699343457482706947",
        farmWorkLibName: "转色营养",
        farmWorkName: "转色营养",
        expertIcon:
            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
        expertName: "韦帮稳",
        expertUserIcon: "",
        expertUserName: "韦帮稳",
        icon: 0,
        indexChart: [],
        indexName: "",
        beforeExecuteDate: "2025-05-26",
        checkDate: null,
        executeDate: "2025-05-26",
        indexJson: "",
        code: "BZ-YY-06-ZSYY-100",
        expertPrescription: "",
        condition: "园区转色率大于20.0%",
        solarName: "",
        reCheck: null,
        executeBlueZones: [
            {
                id: "ws0y1m6x7cjz",
                level: null,
            },
            {
                id: "ws0y1md9v3ht",
                level: null,
            },
            {
                id: "ws0y1mdspbk7",
                level: null,
            },
            {
                id: "ws0y1mdvvdsz",
                level: null,
            },
            {
                id: "ws0y1me545tg",
                level: null,
            },
        ],
        menu: 1,
        isEdit: 0,
        isMaster: null,
        num: null,
        purpose: "",
        selfExec: null,
        defaultFarmWork: 0,
        farmWorkType: 2,
        farmWorkTypeName: "营养",
        type: 1,
        execute: 4,
        updateDate0: "2025-08-20",
        updateDate1: null,
        updateDate2: null,
        updateDate3: null,
        updateDate4: null,
        updateDate5: null,
        usageMode: "根部施",
        serviceMain: "广州泽秾丰农资有限公司",
        updateDate6: null,
        confirmPicture: [],
        executeMain: "广州泽秾丰农资有限公司",
        storeShortName: "泽秾丰",
        weatherWarningMsg: "",
        executeEvidence: [],
        userEvaluation: null,
        reviewDate: null,
        reviewDate2: null,
        reviewImage: [],
        reviewImage2: [],
        serviceRegion: "广州市从化区荔枝博览园",
        users: [
            {
                id: null,
                orderId: null,
                serviceType: null,
                userType: null,
                userId: 81881,
                joinStatus: null,
                icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png",
                userName: "飞鸟种植助手",
                area: "",
                point: "",
                farmName: "",
                selected: null,
            },
        ],
        cost: null,
        prescriptionList: [
            {
                name: "营养",
                pesticideFertilizerList: [
                    {
                        defaultDroneRatio: null,
                        defaultName: "矿源黄腐酸钾",
                        defaultRatio: 2000,
                        id: null,
                        muPrice: null,
                        muUsage: 4.0,
                        muUsage2: 4.0,
                        ratio: 2000,
                        ratio2: 200,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施、根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1166",
                        pesticideFertilizerId: "166",
                        pesticideFertilizerName: "矿源黄腐酸钾",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 15000,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "有机质水溶肥",
                        defaultRatio: 5000,
                        id: null,
                        muPrice: null,
                        muUsage: 10.0,
                        muUsage2: 10.0,
                        ratio: 5000,
                        ratio2: 500,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1167",
                        pesticideFertilizerId: "167",
                        pesticideFertilizerName: "有机质水溶肥",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 10000,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "磷酸二氢钾",
                        defaultRatio: 5000,
                        id: null,
                        muPrice: null,
                        muUsage: 10.0,
                        muUsage2: 10.0,
                        ratio: 5000,
                        ratio2: 500,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施、根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1168",
                        pesticideFertilizerId: "168",
                        pesticideFertilizerName: "磷酸二氢钾",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 12000,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "高钾复合肥",
                        defaultRatio: 5000,
                        id: null,
                        muPrice: null,
                        muUsage: 10.0,
                        muUsage2: 10.0,
                        ratio: 5000,
                        ratio2: 500,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1169",
                        pesticideFertilizerId: "169",
                        pesticideFertilizerName: "高钾复合肥",
                        brand: "未知",
                        typeName: "营养",
                        price: 245,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "红牛硫酸钾",
                        defaultRatio: 5000,
                        id: null,
                        muPrice: null,
                        muUsage: 10.0,
                        muUsage2: 10.0,
                        ratio: 5000,
                        ratio2: 500,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1170",
                        pesticideFertilizerId: "170",
                        pesticideFertilizerName: "红牛硫酸钾",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 230,
                        unit: "g",
                        executeStyle: null,
                    },
                ],
            },
        ],
        conditionList: [
            {
                index: "1-2-016-02-02-02-01-0008",
                name: "园区转色率",
                type: 1,
                value: "0.2",
            },
        ],
    },
    {
        targetId: "part4",
        title: "巡园农事",
        parentTitle: "开花期",
        consequenceText: "如果不做本次农事，会导致您的产量、质量下降20%，管理得分降低8分",
        id: "274672",
        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，病虫害基数得到大幅下降，未发现病虫害风险",
        farmName: "荔枝博览园",
        farmPoint: "POINT(113.61702297075017 23.584863449735067)",
        orderId: "745923690209742848",
        area: 2.719998598098755,
        expert: 91356,
        orderStatus: 4,
        activeStatus: 0,
        farmId: 766,
        regionId: 2,
        speciesId: "1",
        speciesName: "荔枝",
        agriculturalId: 24,
        farmWorkId: "699343457478512646",
        farmWorkLibId: "699343457478512646",
        farmWorkLibName: "果期防治II",
        farmWorkName: "果期防治II",
        expertIcon:
            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
        expertName: "韦帮稳",
        expertUserIcon: "",
        expertUserName: "韦帮稳",
        icon: 1,
        indexChart: [],
        indexName: "",
        beforeExecuteDate: "2025-05-06",
        checkDate: null,
        executeDate: "2025-05-12",
        indexJson: "",
        code: "BZ-BC-06-GQFZ2-100",
        expertPrescription: "",
        condition: "园区膨果率大于20.0%",
        solarName: "",
        reCheck: null,
        executeBlueZones: [
            {
                id: "ws0y1m6x7cjz",
                level: null,
            },
            {
                id: "ws0y1md9v3ht",
                level: null,
            },
            {
                id: "ws0y1mdspbk7",
                level: null,
            },
            {
                id: "ws0y1mdvvdsz",
                level: null,
            },
            {
                id: "ws0y1me545tg",
                level: null,
            },
        ],
        menu: 1,
        isEdit: 0,
        isMaster: null,
        num: null,
        purpose: "",
        selfExec: null,
        defaultFarmWork: 0,
        farmWorkType: 3,
        farmWorkTypeName: "病虫",
        type: 1,
        execute: 4,
        updateDate0: "2025-08-20",
        updateDate1: null,
        updateDate2: null,
        updateDate3: null,
        updateDate4: null,
        updateDate5: null,
        usageMode: "叶面施",
        serviceMain: "广州泽秾丰农资有限公司",
        updateDate6: null,
        confirmPicture: [],
        executeMain: "广州泽秾丰农资有限公司",
        storeShortName: "泽秾丰",
        weatherWarningMsg: "",
        executeEvidence: [],
        userEvaluation: null,
        reviewDate: null,
        reviewDate2: null,
        reviewImage: [],
        reviewImage2: [],
        serviceRegion: "广州市从化区荔枝博览园",
        users: [
            {
                id: null,
                orderId: null,
                serviceType: null,
                userType: null,
                userId: 81881,
                joinStatus: null,
                icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png",
                userName: "飞鸟种植助手",
                area: "",
                point: "",
                farmName: "",
                selected: null,
            },
        ],
        cost: null,
        prescriptionList: [
            {
                name: "病虫",
                pesticideFertilizerList: [
                    {
                        defaultDroneRatio: null,
                        defaultName: "威远.绿凯",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 150.0,
                        muUsage2: 150.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1147",
                        pesticideFertilizerId: "147",
                        pesticideFertilizerName: "威远.绿凯",
                        brand: "利民控股绿凯",
                        typeName: "病虫",
                        price: 90,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "微量元素益元液",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 300.0,
                        muUsage2: 300.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1174",
                        pesticideFertilizerId: "174",
                        pesticideFertilizerName: "微量元素益元液",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 60,
                        unit: "ml",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "中量元素益元液",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 300.0,
                        muUsage2: 300.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1175",
                        pesticideFertilizerId: "175",
                        pesticideFertilizerName: "中量元素益元液",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 30,
                        unit: "ml",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "济南中科翠剑",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 150.0,
                        muUsage2: 150.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1149",
                        pesticideFertilizerId: "149",
                        pesticideFertilizerName: "吡唑醚菌酯",
                        brand: "济南中科翠剑",
                        typeName: "病虫",
                        price: 60,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "佳果天成",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 300.0,
                        muUsage2: 300.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1171",
                        pesticideFertilizerId: "171",
                        pesticideFertilizerName: "佳果天成",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 120,
                        unit: "ml",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "高效氟氯氰菊酯",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 150.0,
                        muUsage2: 150.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1155",
                        pesticideFertilizerId: "155",
                        pesticideFertilizerName: "高效氟氯氰菊酯",
                        brand: "广东立威.立功",
                        typeName: "病虫",
                        price: 50,
                        unit: "ml",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "联苯噻虫嗪",
                        defaultRatio: 150000,
                        id: null,
                        muPrice: null,
                        muUsage: 150.0,
                        muUsage2: 150.0,
                        ratio: 150000,
                        ratio2: 15000,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1156",
                        pesticideFertilizerId: "156",
                        pesticideFertilizerName: "联苯噻虫嗪",
                        brand: "青岛金正飞灵",
                        typeName: "病虫",
                        price: 60,
                        unit: "ml",
                        executeStyle: null,
                    },
                ],
            },
        ],
        conditionList: [
            {
                index: "1-2-014-02-02-02-01-0008",
                name: "园区膨果率",
                type: 1,
                value: "0.2",
            },
        ],
    },
    {
        id: "part5",
        title: "摇花吹花",
        parentTitle: "开花期",
        consequenceText: "如果不做本次农事，会导致您的产量、质量下降15%，管理得分降低5分",
        id: "274671",
        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，膨果速度非常稳定，膨果率超过80%",
        farmName: "荔枝博览园",
        farmPoint: "POINT(113.61702297075017 23.584863449735067)",
        orderId: "745923686854299648",
        area: 2.719998598098755,
        expert: 91356,
        orderStatus: 4,
        activeStatus: 0,
        farmId: 766,
        regionId: 2,
        speciesId: "1",
        speciesName: "荔枝",
        agriculturalId: 24,
        farmWorkId: "699343457482706944",
        farmWorkLibId: "699343457482706944",
        farmWorkLibName: "膨果营养",
        farmWorkName: "膨果营养",
        expertIcon:
            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
        expertName: "韦帮稳",
        expertUserIcon: "",
        expertUserName: "韦帮稳",
        icon: 2,
        indexChart: [],
        indexName: "",
        beforeExecuteDate: "2025-05-01",
        checkDate: null,
        executeDate: "2025-05-06",
        indexJson: "",
        code: "BZ-YY-06-PGYY-100",
        expertPrescription: "",
        condition: "园区膨果率大于10.0%",
        solarName: "",
        reCheck: null,
        executeBlueZones: [
            {
                id: "ws0y1m6x7cjz",
                level: null,
            },
            {
                id: "ws0y1md9v3ht",
                level: null,
            },
            {
                id: "ws0y1mdspbk7",
                level: null,
            },
            {
                id: "ws0y1mdvvdsz",
                level: null,
            },
            {
                id: "ws0y1me545tg",
                level: null,
            },
        ],
        menu: 1,
        isEdit: 0,
        isMaster: null,
        num: null,
        purpose: "",
        selfExec: null,
        defaultFarmWork: 0,
        farmWorkType: 2,
        farmWorkTypeName: "营养",
        type: 1,
        execute: 4,
        updateDate0: "2025-08-20",
        updateDate1: null,
        updateDate2: null,
        updateDate3: null,
        updateDate4: null,
        updateDate5: null,
        usageMode: "根部施",
        serviceMain: "广州泽秾丰农资有限公司",
        updateDate6: null,
        confirmPicture: [],
        executeMain: "广州泽秾丰农资有限公司",
        storeShortName: "泽秾丰",
        weatherWarningMsg: "",
        executeEvidence: [],
        userEvaluation: null,
        reviewDate: null,
        reviewDate2: null,
        reviewImage: [],
        reviewImage2: [],
        serviceRegion: "广州市从化区荔枝博览园",
        users: [
            {
                id: null,
                orderId: null,
                serviceType: null,
                userType: null,
                userId: 81881,
                joinStatus: null,
                icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png",
                userName: "飞鸟种植助手",
                area: "",
                point: "",
                farmName: "",
                selected: null,
            },
        ],
        cost: null,
        prescriptionList: [
            {
                name: "营养",
                pesticideFertilizerList: [
                    {
                        defaultDroneRatio: null,
                        defaultName: "硝酸铵钙",
                        defaultRatio: 0,
                        id: null,
                        muPrice: null,
                        muUsage: 15000.0,
                        muUsage2: 15000.0,
                        ratio: 0,
                        ratio2: 0,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1162",
                        pesticideFertilizerId: "162",
                        pesticideFertilizerName: "硝酸铵钙",
                        brand: "未知",
                        typeName: "营养",
                        price: 2000,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "氯化钾",
                        defaultRatio: 0,
                        id: null,
                        muPrice: null,
                        muUsage: 15000.0,
                        muUsage2: 15000.0,
                        ratio: 0,
                        ratio2: 0,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1163",
                        pesticideFertilizerId: "163",
                        pesticideFertilizerName: "氯化钾",
                        brand: "未知",
                        typeName: "营养",
                        price: 4500,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "高氮水溶肥",
                        defaultRatio: 5000,
                        id: null,
                        muPrice: null,
                        muUsage: 10.0,
                        muUsage2: 10.0,
                        ratio: 5000,
                        ratio2: 500,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施"],
                        orderId: null,
                        pesticideFertilizerCode: "1165",
                        pesticideFertilizerId: "165",
                        pesticideFertilizerName: "高氮水溶肥",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 8500,
                        unit: "g",
                        executeStyle: null,
                    },
                    {
                        defaultDroneRatio: null,
                        defaultName: "矿源黄腐酸钾",
                        defaultRatio: 2000,
                        id: null,
                        muPrice: null,
                        muUsage: 4.0,
                        muUsage2: 4.0,
                        ratio: 2000,
                        ratio2: 200,
                        remark: "",
                        usageMode: "",
                        usageModeList: ["叶面施、根部施"],
                        orderId: null,
                        pesticideFertilizerCode: "1166",
                        pesticideFertilizerId: "166",
                        pesticideFertilizerName: "矿源黄腐酸钾",
                        brand: "广州大炎",
                        typeName: "营养",
                        price: 15000,
                        unit: "g",
                        executeStyle: null,
                    },
                ],
            },
        ],
        conditionList: [
            {
                index: "1-2-014-02-02-02-01-0008",
                name: "园区膨果率",
                type: 1,
                value: "0.1",
            },
        ],
    },
]);

const planList = ref([{name: "方案1",}, {name: "方案2"}]);
const activePlanIndex = ref(0);
const handlePlanClick = (index) => {
    activePlanIndex.value = index;
};


const addGroupRef = ref(null);
// 新增方案
function newPlan() {
    addGroupRef.value.openClientPopup()
}

// 将专家处方添加到我的处方
function addToMyPlan() {
    addGroupRef.value.openClientPopup("edit")
}
</script>

<style lang="scss" scoped>
.plan-page {
    position: relative;
    height: calc(100vh - 50px);
    .plan-title {
        width: 158px;
        margin: 0 auto;
        padding: 6px 0;
        .tabs {
            display: flex;
            position: relative;
            height: 36px;
            line-height: 36px;
            .tab {
                flex: 1;
                text-align: center;
                cursor: pointer;
                color: rgba(0, 0, 0, 0.5);
                z-index: 2;
                transition: color 0.3s ease;
                position: relative;
                &.active {
                    color: #000000;
                    font-weight: bold;
                }
                .badge-dot {
                    position: absolute;
                    top: 0;
                    right: -6px;
                    width: 16px;
                    height: 16px;
                    background-color: #ff0000;
                    border-radius: 50%;
                    font-size: 12px;
                    line-height: 16px;
                    color: #fff;
                }
            }
            .slider {
                position: absolute;
                height: 4px;
                width: 24px;
                background: #2199f8;
                border-radius: 16px;
                bottom: 0;
                left: calc(25% - 12px); /* 初始位置在第一个选项卡中间 */
                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            }
        }

        .content {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            min-height: 200px;
        }

        .content-section {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .content-section.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
    .plan-content {
        background: #f5f7fb;
        .filter-wrap {
            padding: 10px 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .type-cascader {
                flex: 1;
                text-align: center;
                ::v-deep {
                    .el-input__inner {
                        width: 80px;
                    }
                }
            }
            .filter-item {
                width: fit-content;
                ::v-deep {
                    .el-input__wrapper {
                        background: none;
                        box-shadow: none;
                    }
                    .el-input__inner {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                    .el-select__wrapper {
                        background: none;
                        box-shadow: none;
                        gap: 2px;
                        padding: 4px 2px;
                        justify-content: center;
                    }
                    .el-select__selection {
                        flex: none;
                        width: fit-content;
                    }
                    .el-select__placeholder {
                        color: rgba(0, 0, 0, 0.5);
                        position: static;
                        transform: none;
                        width: fit-content;
                    }
                }
            }
        }
    }
    .fixed-bottom {
        position: absolute;
        bottom: 12px;
        left: 12px;
        width: calc(100% - 24px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 12px;
        background: linear-gradient(180deg, #f0f8ff 6px, #FFFFFF 20px);
        border-radius: 14px;
        box-sizing: border-box;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
        .bottom-l {
            display: flex;
            align-items: center;
            .l-btn {
                border: 1px solid rgba(153, 153, 153, 0.5);
                border-radius: 30px;
                padding: 0 8px 0 12px;
                height: 32px;
                line-height: 32px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666666;
                .btn-icon {
                    padding-right: 3px;
                }
                .calculator-icon {
                    width: 12px;
                }
            }
            .l-btn + .l-btn {
                margin-left: 10px;
            }
        }
        .bottom-r {
            height: 32px;
            line-height: 32px;
            background: #2199F8;
            border-radius: 20px;
            color: #fff;
            padding: 0 12px;
        }
    }
    .expert-prescription {
        display: flex;
        width: 100%;
        height: calc(100vh - 52px - 48px - 50px);
        .plan-menu {
            width: 100px;
            height: 100%;
            padding: 10px 0;
            box-sizing: border-box;
            background: #fff;
            border-radius: 0 10px 10px 0;
            .menu-icon {
                width: 13px;
            }
            .menu-text {
                padding: 0 4px;
            }
            ::v-deep {
                .el-anchor {
                    height: 100%;
                    background: none;
                }
                .el-anchor__marker {
                    display: none;
                }
                .el-menu {
                    background: none;
                    border: none;
                    .el-sub-menu__title {
                        background: none;
                        padding: 0 2px;
                        justify-content: center;
                    }
                    .el-sub-menu__title {
                        height: 32px;
                    }
                    .el-sub-menu .el-sub-menu__icon-arrow {
                        position: static;
                        padding-top: 6px;
                    }
                    .el-sub-menu {
                        margin-bottom: 16px;
                        &.is-opened {
                            .el-sub-menu__icon-arrow {
                                padding-bottom: 6px;
                                padding-top: 0;
                            }
                        }
                        .el-menu-item {
                            height: 32px;
                            line-height: 32px;
                            margin: 4px 8px;
                            padding: 0 2px;
                            justify-content: center;
                            background: none;
                        }
                        .el-menu-item.is-active {
                            background: none;
                            color: #fff;
                        }
                        .el-anchor__item {
                            width: 100%;
                            text-align: center;
                        }
                        .el-anchor__link {
                            color: #666666;
                        }
                        .el-anchor__link.is-active {
                            background: linear-gradient(180deg, #70bffe, #2199f8);
                            border-radius: 20px;
                            color: #fff;
                        }
                    }
                }
                .el-anchor__list {
                    padding-left: 0;
                }
            }
        }
        .expert-content {
            width: calc(100% - 100px);
            height: 100%;
            overflow: auto;
            padding-bottom: 80px;
            box-sizing: border-box;
            .content-section {
                position: relative;
                .section-id {
                    position: absolute;
                    // top: -6px;
                    top: 0;
                    width: 100%;
                    height: 1px;
                }
            }
            .box-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 8px;
                border-bottom: 1px solid #f5f5f5;
                margin-bottom: 8px;
                .title-l {
                    font-size: 16px;
                    font-weight: 600;
                    color: #000;
                    .parent-text {
                        margin-left: 5px;
                        font-size: 12px;
                        font-weight: normal;
                        padding: 4px 6px;
                        border-radius: 14px;
                        background: rgba(119, 119, 119, 0.1);
                    }
                }
                .title-btn {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: #2199f8;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }

    .my-recipe {
        .filter-wrap {
            .plan-box {
                display: flex;
                overflow: auto;
                white-space: nowrap;
                align-items: center;
                padding-left: 12px;
                .plan-item {
                    color: #000000;
                    background: #F1F1F1;
                    padding: 0 12px;
                    height: 32px;
                    line-height: 32px;
                    border-radius: 20px;
                    &.active {
                        background: rgba(33, 153, 248, 0.2);
                        color: #2199F8;
                    }
                }
                .plan-item + .plan-item {
                    margin-left: 10px;
                }
            }
            .plan-add {
                width: 80px;
                height: 30px;
                border: 1px solid #2199F8;
                border-radius: 20px;
                flex: none;
                line-height: 32px;
                text-align: center;
                margin: 0 12px;
                color: #2199F8;
                font-size: 14px;
            }
        }
        .title-r {
            display: flex;
            align-items: center;
            .btn-item {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #2199F8;
                &.del-btn {
                    margin-right: 5px;
                    background: #FF953D;
                }
            }
        }
    }
}
</style>