foster-pc-vue/src/views/workDetail/completed.vue

<template>
    <div class="base-container">
        <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
        <div class="content">
            <div class="content-header">
                <div class="btn" @click="goBack">
                    <img src="@/assets/images/common/back-icon.png" alt="" />
                    返回
                </div>
                <div class="tabs-group">
                    <div class="tabs-item" v-for="item in 5" :key="item">农事名称0{{item}}</div>
                </div>
            </div>
            <div class="content-body">
                <div class="content-left">
                    <chart-box class="left-cont" name="农事成效" color="yellow">
                        <div class="box">
                            <div class="box-item">
                                <div class="box-title">基本信息</div>
                                <div class="info-box">
                                    <div class="info-l">
                                        <img class="farm-img" src="@/assets/img/gallery/farm-img.png" alt="" />
                                    </div>
                                    <div class="info-r">
                                        <div class="farm-name">荔博园</div>
                                        <div class="info-item">
                                            <div class="info-name">农事名称：</div>
                                            <div class="info-value">
                                                {{ workItem.farmWorkName }} ({{ workItem.executeDate }})
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="info-name">农事目的：</div>
                                            <div class="info-value">{{ workItem.purpose }}</div>
                                        </div>
                                        <div class="info-item">
                                            <div class="info-name">肥药处方：</div>
                                            <div class="info-value">
                                                <div class="rescription">
                                                    <span
                                                        v-for="(
                                                            fertilizer, fertilizerI
                                                        ) in workItem.pesticideFertilizerList"
                                                        :key="fertilizerI"
                                                    >
                                                        {{ fertilizer.ratio ? fertilizer.ratio + "倍" : "" }}
                                                        {{ fertilizer.name }}
                                                        <span
                                                            v-if="
                                                                fertilizerI !==
                                                                workItem.pesticideFertilizerList.length - 1
                                                            "
                                                        >
                                                            +
                                                        </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-item">
                                <div class="box-title">主体信息</div>
                                <div class="subject-box">
                                    <div class="subject-item">
                                        <img class="subject-img" src="@/assets/img/gallery/capital.png" alt="" />
                                        <div class="subject-tag">
                                            大禹农资
                                            <el-icon class="right-icon" size="14"><ArrowRightBold /></el-icon>
                                        </div>
                                    </div>
                                    <div class="subject-item">
                                        <img class="subject-img" src="@/assets/img/gallery/capital.png" alt="" />
                                        <div class="subject-tag">
                                            北极农服
                                            <el-icon class="right-icon" size="14"><ArrowRightBold /></el-icon>
                                        </div>
                                    </div>
                                    <div class="subject-item">
                                        <img class="subject-img" src="@/assets/img/gallery/capital.png" alt="" />
                                        <div class="subject-tag">
                                            韦帮稳
                                            <el-icon class="right-icon" size="14"><ArrowRightBold /></el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-item">
                                <div class="box-title">复核成效</div>
                                <div class="result-text">
                                    通过精准农业技术的应用，作物产量实现了两位数的增长，<span>病虫害</span>的发生率大幅下降，<span>土壤肥力</span>的提升通过精准农业技术的应用，<span>作物产量</span>实现了两位数的增长，<span>病虫害</span>的发生率大幅下降，<span>土壤肥力</span>的提升
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="button defalut-btn">联系专家</div>
                            <div class="button" @click="handleOk">加入标准体系</div>
                        </div>
                    </chart-box>
                </div>
                <div class="content-right">
                    <div class="box-item box-none">
                        <div class="box-title border-none">复核图片</div>
                        <div class="img-list">
                            <div class="img-item">
                                <!-- 图片列表 -->
                                <AlbumCarousel
                                    temp="执行前"
                                    :key="1"
                                    :farmId="766"
                                    :sampleId="110725"
                                    :lock="false"
                                    :farmWork="{ beforeExecuteDate: '2025-02-20', executeDate: '2025-02-25' }"
                                ></AlbumCarousel>
                            </div>
                            <div class="img-item">
                                <AlbumCarousel
                                    temp="执行前"
                                    :key="2"
                                    :farmId="766"
                                    :sampleId="110725"
                                    :lock="false"
                                    :farmWork="{ beforeExecuteDate: '2025-02-15', executeDate: '2025-02-20' }"
                                ></AlbumCarousel>
                            </div>
                            <div class="img-item">
                                <AlbumCarousel
                                    temp="执行后"
                                    :key="3"
                                    :farmId="766"
                                    :sampleId="110725"
                                    :lock="false"
                                    :farmWork="{ beforeExecuteDate: '2025-02-10', executeDate: '2025-02-15' }"
                                ></AlbumCarousel>
                            </div>
                        </div>
                    </div>
                    <div class="box-item box-none">
                        <div class="box-title border-none">用户评价</div>
                        <div class="box-evaluate">
                            <div class="comment" v-for="item in 3" :key="item">
                                <div class="user-info">
                                    <el-avatar
                                        class="avatar"
                                        :size="40"
                                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                    />
                                    <div class="user-name">翰有月</div>
                                </div>
                                <div class="rate">
                                    <div class="rate-item">
                                        <span class="name">农资</span>
                                        <el-rate v-model="value" size="small" />
                                    </div>
                                    <div class="rate-item">
                                        <span class="name">农服</span>
                                        <el-rate v-model="value" size="small" />
                                    </div>
                                    <div class="rate-item">
                                        <span class="name">专家</span>
                                        <el-rate v-model="value" size="small" />
                                    </div>
                                </div>
                                <el-text class="text" line-clamp="2" size="16px">
                                    这里是用户的评级内容，有点长，省略100个字。这里是用户的评级内容，有点长，省略100个字。这里是用户的评级内容，有点长，省略100个字。这里是用户的评级内容，有点长，省略100个字。
                                </el-text>
                                <span class="date">2025.1.20</span>
                            </div>
                        </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 AlbumCarousel from "@/views/home/album/album_compoents/albumCarousel";
import chartBox from "@/components/chartBox.vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
let store = useStore();

const workItem = {
    id: "214936",
    serviceRegion: "广州市从化区荔枝博览园",
    orderId: "685852811698638848",
    area: 593,
    expert: 81653,
    orderStatus: 0,
    farmId: 766,
    regionId: null,
    speciesId: "1",
    speciesName: "荔枝",
    agriculturalId: 1,
    farmWorkId: "15",
    farmWorkLibId: "15",
    farmWorkLibName: "膨果营养",
    farmWorkName: "膨果营养",
    expertIcon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/75e8fb25a1418291e648d35acf1ca41.png",
    expertName: "韦老师",
    icon: 1,
    indexChart: [
        {
            date: "5/1",
            name: "",
            value: 3,
        },
        {
            date: "5/5",
            name: "",
            value: 4,
        },
        {
            date: "5/11",
            name: "",
            value: 14,
        },
        {
            date: "5/15",
            name: "",
            value: 24,
        },
    ],
    indexName: "",
    beforeExecuteDate: null,
    executeDate: "2025-05-05",
    indexJson:
        '[{"date":"5/1","value":3.0},{"date":"5/5","value":4.0},{"date":"5/11","value":14.0},{"date":"5/15","value":24.0}]',
    code: "GF-PG",
    expertPrescription: "",
    condition: "单树膨果率5%",
    solarName: "5月上旬",
    reCheck: 0,
    executeBlueZones: [],
    menu: 1,
    num: null,
    purpose: "施足营养，促进膨果转色",
    farmWorkType: 2,
    farmWorkTypeName: "营养",
    type: 1,
    execute: 3,
    updateDate0: null,
    updateDate1: null,
    updateDate2: null,
    updateDate3: null,
    updateDate4: null,
    updateDate5: null,
    serviceMain: "大荔农业",
    executeMain: "大荔农业",
    weatherWarningMsg: "荔枝普遍处于花穗期，近期温度较过去一周快速下降，有花穗生长停滞风险\r\n",
    userEvaluation: null,
    users: [
        {
            id: null,
            orderId: null,
            serviceType: null,
            userType: 1,
            userId: 81669,
            joinStatus: null,
            icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/23.png",
            userName: "用户81669",
            area: "",
            point: "POINT(113.52575791849408 23.830400966597722)",
            farmName: "农场1011",
            selected: 0,
        },
        {
            id: null,
            orderId: null,
            serviceType: null,
            userType: 1,
            userId: 81653,
            joinStatus: null,
            icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/75e8fb25a1418291e648d35acf1ca41.png",
            userName: "韦老师",
            area: "5.51",
            point: "POINT(113.68851269297058 23.786884947916857)",
            farmName: "farm_01",
            selected: 0,
        },
        {
            id: null,
            orderId: null,
            serviceType: 1,
            userType: 2,
            userId: 81881,
            joinStatus: null,
            icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/lz_logo.png",
            userName: "飞鸟种植助手",
            area: "",
            point: "POINT(113.30139794715421 23.511158355652277)",
            farmName: "农场11-523",
            selected: 0,
        },
        {
            id: null,
            orderId: null,
            serviceType: null,
            userType: 1,
            userId: 81663,
            joinStatus: null,
            icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/8.png",
            userName: "用户81663",
            area: "6.35",
            point: "POINT(114.37672046161343 23.45379334952031)",
            farmName: "农场11",
            selected: 0,
        },
    ],
    prescriptionList: [
        {
            name: "营养",
            pesticideFertilizerList: [
                {
                    defaultDroneRatio: null,
                    defaultName: "高钾复合肥",
                    defaultRatio: null,
                    id: null,
                    muPrice: null,
                    muUsage: null,
                    muUsage2: null,
                    ratio: null,
                    ratio2: null,
                    remark: "",
                    usageMode: "根部施",
                    usageModeList: [],
                    orderId: null,
                    pesticideFertilizerCode: "",
                    pesticideFertilizerId: "35",
                    pesticideFertilizerName: "高钾复合肥",
                    brand: "",
                    typeName: "",
                    price: null,
                    unit: "",
                    executeStyle: null,
                },
            ],
            usageMode: "根部施",
        },
    ],
    pesticideFertilizerList: [
        {
            id: null,
            name: "高钾复合肥 1kg/棵",
            pesticideFertilizerCode: "35",
            ratio: null,
            count: null,
            typeName: "营养",
        },
    ],
    pesticideFertilizers: [
        {
            defaultDroneRatio: null,
            defaultName: "高钾复合肥",
            defaultRatio: null,
            id: "685852812344561664",
            muPrice: null,
            muUsage: null,
            muUsage2: null,
            ratio: null,
            ratio2: null,
            remark: "",
            usageMode: "根部施",
            usageModeList: ["根部施"],
            orderId: "685852811698638848",
            pesticideFertilizerCode: "",
            pesticideFertilizerId: "35",
            pesticideFertilizerName: "高钾复合肥 1kg/棵",
            brand: "",
            typeName: "营养",
            price: null,
            unit: "kg",
            executeStyle: null,
        },
    ],
};

const router = useRouter();
const route = useRoute();
const value = ref(4);
onMounted(() => {
    getList();
});

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

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

//确定/下发农事
const handleOk = () => {};
</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);
        padding: 20px;
        box-sizing: border-box;
        .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-none {
                border: none;
                background: none;
                padding: 0;
            }
            .box-title {
                font-size: 20px;
                border-bottom: 1px solid #333333;
                padding: 0 0 12px 13px;
                margin-bottom: 20px;
                position: relative;
                display: flex;
                justify-content: space-between;
                &.border-none {
                    padding-bottom: 0;
                    border: none;
                }
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 6px;
                    width: 3px;
                    height: 16px;
                    background: #fff;
                    border-radius: 11px;
                }
            }
        }
        .box-item + .box-item {
            margin-top: 16px;
        }
    }
    .content-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.78);
            border-radius: 4px;
            padding: 9px;
            width: 104px;
            margin-right: 48px;
            cursor: pointer;
            img {
                width: 14px;
                margin-right: 5px;
            }
        }
        .tabs-group{
            width: calc(100% - 104px - 48px);
            display: flex;
            font-size: 18px;
            color: #cecece;
            border-bottom: 1px solid #444444;
            .tabs-item{
                padding: 0 14px 14px 14px;
                
            }
            .tabs-item + .tabs-item{
                margin-left: 20px;
            }
        }
    }
    .content-body {
        width: 100%;
        height: calc(100% - 40px - 24px);
        display: flex;
        justify-content: space-between;

        .content-left {
            width: 473px;
            height: 100%;
            box-sizing: border-box;
            .box {
                width: 100%;
                height: calc(100% - 58px);
                padding: 16px 12px;
                box-sizing: border-box;
                overflow-y: auto;
            }

            .left-cont {
                width: 100%;
                height: 100%;

                .info-box {
                    display: flex;
                    border-radius: 5px;
                    align-items: center;
                    .info-l {
                        .farm-img {
                            width: 100px;
                            width: 100px;
                            border-radius: 8px;
                            object-fit: scale-down;
                        }
                    }
                    .info-r {
                        padding-left: 12px;
                    }
                    .farm-name {
                        font-size: 18px;
                        color: #fff;
                        padding-bottom: 4px;
                    }
                    .info-item {
                        display: flex;
                        font-size: 15px;
                        .info-name {
                            color: #727272;
                            flex: none;
                        }
                        .info-value {
                            color: #cecece;
                        }
                    }
                    .info-item + .info-item {
                        margin-top: 4px;
                    }
                }
                .subject-box {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    .subject-item {
                        border-radius: 8px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 33%;
                        .subject-img {
                            width: 67px;
                            height: 67px;
                            object-fit: cover;
                            border-radius: 50%;
                            border: 2px solid #fff;
                        }
                        .subject-tag {
                            font-size: 14px;
                            padding: 2px 8px 3px 8px;
                            background: #ffd489;
                            color: #000;
                            border-radius: 24px;
                            display: flex;
                            align-items: center;
                            margin-top: -5px;
                        }
                    }
                    .subject-item + .subject-item {
                        margin-left: 8px;
                    }
                }
                .result-text {
                    font-size: 15px;
                    line-height: 22px;
                    span {
                        color: #ffd489;
                    }
                }
            }
        }
        .content-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;
            .img-list {
                display: flex;
                justify-content: space-between;
                .img-item {
                    width: 32.5%;
                    .carousel-container {
                        border-radius: 10px;
                    }
                }
                .img-item + .img-item {
                    margin-left: 12px;
                }
            }
            .box-evaluate {
                display: flex;

                .comment {
                    flex: 1;
                    padding: 20px 10px;
                    box-sizing: border-box;
                    border-radius: 5px;
                    background: rgba(255, 255, 255, 0.05);
                    .user-info {
                        display: flex;
                        align-items: center;
                        .user-name {
                            font-weight: 500;
                            margin-left: 8px;
                        }
                    }
                    .rate {
                        display: flex;
                        justify-content: space-between;
                        ::v-deep {
                            .el-rate {
                                --el-rate-icon-margin: 3px;
                            }
                        }
                        .rate-item {
                            display: flex;
                            align-items: center;
                            border-radius: 4px;
                            padding: 4px 2px;
                            font-size: 12px;
                            .name {
                                margin-right: 2px;
                                color: #666666;
                            }
                        }
                    }
                    .text {
                        color: #fff;
                    }
                    .date {
                        color: #727272;
                    }
                }
                .comment + .comment {
                    margin-left: 12px;
                }
            }
        }
        .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;
            }
            .defalut-btn {
                color: #ffd489;
                font-size: 14px;
                padding: 8px 20px;
                background: none;
                border: 1px solid #ffd489;
            }
        }
    }
}
</style>