feiniao-farm-h5/src/views/old_mini/agri_work/servicesIndex.vue

<template>
    <div class="completed-work">
        <custom-header name="农事详情"></custom-header>
        <div class="work-content" :class="{ hasBottom: curRole == 0 }">
            <div class="step-wrap">
                <farm-steps :currentStep="0" />
            </div>
            <div class="content-status">
                <div class="status-l" v-if="status === 0">
                    <div class="stauts-text">待完成</div>
                    <div class="stauts-sub-text">距离预计执行时间还差 <span class="time-text">3</span> 天</div>
                </div>
                <div class="status-l" v-if="status === 1">
                    <div class="stauts-text">
                        <el-icon color="#2199F8" size="16" class="status-icon"><Select /></el-icon>
                        该农事已完成
                    </div>
                </div>
            </div>

            <div class="work-wrap">
                <div class="box-wrap farm-info">
                    <div class="info-title">
                        <div class="sub-title">药肥费用</div>
                        <div class="info-more">1582<span class="unit-text">元</span></div>
                    </div>
                    <div class="info-content">
                        <price-table>
                            <template #bottomContent>
                                <div class="price-bottom">
                                    <div class="info-title">
                                        <div class="sub-title">服务费用</div>
                                        <div class="info-more">1582<span class="unit-text">元</span></div>
                                    </div>
                                    <div class="price-info">
                                        <div class="info-l">执行方式<span class="main-text">无人机</span></div>
                                        <div class="info-c">亩单价<span class="main-text">500元/亩</span></div>
                                        <div class="info-r">亩数<span class="main-text">10亩</span></div>
                                    </div>
                                    <div class="price-total">报价合计：<span class="main-val">1258</span>元</div>
                                    <div class="bottom-btn">
                                        <div class="btn second" @click="toPage">编辑报价</div>
                                        <div class="btn primary">确定报价</div>
                                    </div>
                                </div>
                            </template>
                        </price-table>
                    </div>
                </div>

                <div class="box-wrap work-map">
                    <div class="map-content">
                        <div class="map-dom" ref="areaRef"></div>
                    </div>
                    <div class="info-content">
                        <div class="title-wrap">
                            <div class="title-l">
                                <div class="item-title">未命名农场</div>
                                <div class="setting-text">设为特别关注</div>
                            </div>
                            <div class="title-r">最近服务过</div>
                        </div>
                        <div class="item-desc">
                            <div class="desc-info">
                                <div class="desc-info-item">
                                    <span>农场品种：</span>
                                    <span class="value">荔枝-桂味</span>
                                </div>
                                <div class="desc-info-item">
                                    <span>农场面积：</span>
                                    <span class="value">500亩</span>
                                </div>
                            </div>
                            <div class="desc-info copy-info">
                                <div class="address van-ellipsis">
                                    <span>农场位置：</span>
                                    <span class="value">广东省广州市从化区市从化区从广东省广州市从化区市从化区从</span>
                                </div>
                                <span class="copy-text">点击复制</span>
                            </div>
                        </div>
                    </div>
                </div>

                <info-text></info-text>

                <prescription-table> </prescription-table>
            </div>

            <div class="fixed-btn" v-if="curRole == 0">{{ status === 0 ? "确认完成" : "立即复核" }}</div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { onMounted, ref } from "vue";
import NewFarmMap from "./newFarmMap";
import { useStore } from "vuex";
import infoText from "./components/infoText.vue";
import prescriptionTable from "./components/prescriptionTable.vue";
import priceTable from "./components/priceTable.vue";
import farmSteps from "@/components/farmSteps.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const store = useStore();

// 角色
// const curRole = store.state.app.curRole
const curRole = 1;

// 0：执行， 1： 复核
const status = ref(0);

// 地图
const areaRef = ref(null);
let newFarmMap = new NewFarmMap();
onMounted(() => {
    const point = store.state.home.miniUserLocationPoint;
    newFarmMap.initMap(point, areaRef.value, false);
    newFarmMap.setMapPoint([113.6142086995688, 23.585836479509055])

    getAreaList(() => {
        console.log("areaList.value", areaList.value);
        newFarmMap.initArea(areaList.value);
    });
});

// 农场分区列表
const areaList = ref([]);
const regionId = ref(null);
const getAreaList = (callback) => {
    const data = [
        {
            farmCode: "LBY",
            farmId: "766",
            id: 2,
            isGenerateReport: 1,
            name: "",
            pointCount: 131,
            pointWkt: "POINT (113.6142086995688 23.585836479509055)",
            regionCode: "LBY-MR-2",
            wkt: "MULTIPOLYGON (((113.61348988377155 23.58617369800422, 113.61395837633405 23.58622555407246, 113.61414076654707 23.58622555407246, 113.61436964832843 23.5862774101407, 113.61478628474084 23.586468741036786, 113.61491681896747 23.58652417337007, 113.61512424307672 23.586449071517652, 113.61491503077356 23.585742756367924, 113.61479880177082 23.585596129050916, 113.61473800497858 23.585451289764112, 113.61438931780664 23.585286780835393, 113.61410858003889 23.585299297865365, 113.61385645239149 23.585249229909184, 113.61378135053907 23.585288569029306, 113.61357571446003 23.585283204611276, 113.61347200232355 23.585342213209604, 113.61338080721704 23.585506721974614, 113.61335934954492 23.585665866485304, 113.61342193444922 23.58616296916816, 113.61348988377155 23.58617369800422)))",
        },
    ];
    areaList.value = data;
    regionId.value = (data && data.length && data[0].id) || "";
    changeRegion(regionId.value);
    callback && callback();
    // VE_API.region.list({ farmId: gardenId.value }).then(({ data, code }) => {
    // });
};

// 切换分区
const gardenId = ref(null);
const changeRegion = (e) => {
    newFarmMap.getBlueRegion({ gardenId: gardenId.value, regionId: e }, () => {
        // newFarmMap.setBlueRegion([{id: "ws0y1me7h94u"}, {id: "ws0y1me545tg"}])
        // serveArea.value = "3.72亩"
    });
};

function toPage() {
    router.push("/price_detail")
}
</script>

<style lang="scss" scoped>
.completed-work {
    height: 100vh;
    position: relative;
    overflow: auto;
    font-size: 14px;
    background: #f2f3f5;
    .work-content {
        height: calc(100% - 40px);
        overflow: auto;
        box-sizing: border-box;
        &.hasBottom {
            padding-bottom: 60px;
        }
        .work-wrap {
            position: relative;
            z-index: 3;
            padding: 0 12px;
            top: -16px;
        }
        .fixed-btn {
            position: absolute;
            z-index: 10;
            bottom: 26px;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 60px;
            height: 42px;
            line-height: 42px;
            background: linear-gradient(180deg, #70bffe, #2199f8);
            border-radius: 20px;
            color: #fff;
            font-size: 16px;
        }
        .card-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            display: flex;
            align-items: center;

            .type-tag {
                margin-left: 5px;
                font-size: 12px;
                color: #000000;
                padding: 0 10px;
                background: rgba(119, 119, 119, 0.1);
                border-radius: 20px;
                font-weight: normal;
                height: 26px;
                line-height: 26px;
            }
        }
        .box-wrap {
            background: #fff;
            padding: 10px;
            border-radius: 8px;
        }

        .step-wrap {
            padding: 18px 0;
        }
        .content-status {
            position: relative;
            padding: 26px 12px 20px 12px;
            color: #fff;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &::after {
                content: "";
                z-index: -1;
                position: absolute;
                left: 0;
                top: 0;
                height: 144px;
                background: #2199f8;
                width: 100%;
            }
            .status-l {
                .stauts-text {
                    font-size: 22px;
                    display: flex;
                    align-items: center;
                    .status-icon {
                        width: 24px;
                        height: 24px;
                        background: #ffffff;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                }
                .stauts-sub-text {
                    color: rgba(255, 255, 255, 0.51);
                    font-size: 14px;
                }
                .time-text {
                    color: #ffff;
                }
            }
            .status-r {
                height: 32px;
                line-height: 32px;
                padding: 0 16px;
                color: #2199f8;
                font-size: 16px;
                background: #fff;
                border-radius: 20px;
            }
        }

        .info-content {
            padding-top: 8px;
            position: relative;
            .price-bottom {
                padding-top: 8px;
                .price-info {
                    padding: 8px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: rgba(0, 0, 0, 0.2);
                    .main-text {
                        padding-left: 6px;
                        color: rgba(0, 0, 0, 0.8);
                    }
                    .info-c {
                        flex: 1;
                        text-align: center;
                    }
                }
                .price-total {
                    height: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid rgba(33, 153, 248, 0.5);
                    background: rgba(33, 153, 248, 0.1);
                    color: #000000;
                    border-radius: 4px;
                    .main-val {
                        font-size: 20px;
                        font-weight: bold;
                        color: #2199f8;
                        padding-right: 2px;
                    }
                }
                .bottom-btn {
                    padding-top: 16px;
                    display: flex;
                    align-items: center;
                    .btn {
                        flex: 1;
                        border-radius: 20px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        box-sizing: border-box;
                        &.second {
                            border: 1px solid #999999;
                            color: #666666;
                        }
                        &.primary {
                            background: #2199f8;
                            color: #fff;
                        }
                    }
                    .btn + .btn {
                        margin-left: 12px;
                    }
                }
            }
        }
        .farm-info {
            color: rgba(0, 0, 0, 0.6);
            font-size: 14px;
            margin-top: 14px;
            .info-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #000;
                .sub-title {
                    font-size: 14px;
                    font-weight: bold;
                }
                .info-more {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    font-weight: bold;
                    .unit-text {
                        font-size: 12px;
                    }
                }
            }
        }
        .farm-photo {
            margin-top: 10px;
            .photo-list {
                display: flex;
                align-items: center;
                width: 100%;
                overflow: auto;
                padding-bottom: 10px;
                .photo-item {
                    width: 92px;
                    height: 92px;
                    border-radius: 8px;
                    object-fit: cover;
                }
                .img-item + .img-item {
                    margin-left: 12px;
                }
            }
            .list-text {
                text-align: center;
                color: rgba(0, 0, 0, 0.5);
                padding-top: 2px;
            }
        }

        .farm-data {
            margin-top: 10px;
            .data-content {
                margin-top: 8px;
                border-top: 1px solid #f5f5f5;
                padding: 8px 0;
            }
        }

        .form-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #767676;
            height: 24px;
            .item-name {
                width: 80px;
                color: rgba(0, 0, 0, 0.2);
            }
        }
        .form-item + .form-item {
            padding-top: 2px;
        }

        .farm-table {
            .table-item {
                padding: 10px 0 12px 0;
            }
        }

        .work-map {
            margin-top: 10px;
            padding: 0 10px 10px;
            .map-content {
                padding-top: 8px;
                .map-dom {
                    height: 166px;
                    width: 100%;
                    clip-path: inset(0px round 8px);
                }
            }
            .info-content {
                .title-wrap {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .title-l {
                        display: flex;
                        align-items: center;
                        .setting-text {
                            padding-left: 11px;
                            font-size: 12px;
                            color: #2199f8;
                        }
                    }
                    
                    .item-title {
                        font-size: 16px;
                        font-weight: 500;
                        margin: 2px 0 5px 0;
                    }
                    .title-r {
                        color: rgba(255, 131, 29, 0.36);
                        font-size: 12px;
                    }
                }

                .item-desc {
                    font-size: 13px;
                    color: #bbbbbb;
                    line-height: 18px;
                    .desc-info {
                        display: flex;
                        .desc-info-item {
                            flex: 1;
                            .value {
                                color: #666666;
                            }
                        }
                    }
                    .copy-info {
                        margin-top: 4px;
                        .address {
                            max-width: 80%;
                            .value {
                                color: #666666;
                            }
                        }
                        .copy-text {
                            margin-left: 8px;
                            color: #2199f8;
                        }
                    }
                    .report-text {
                        margin-top: 10px;
                        color: #ff953d;
                        font-size: 12px;
                        height: 32px;
                        line-height: 32px;
                        border-radius: 5px;
                        display: flex;
                        align-items: center;
                        padding-left: 11px;
                        background: linear-gradient(90deg, rgba(255, 149, 61, 0.1), rgba(255, 149, 61, 0));
                        .done-icon {
                            background: #ff953d;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            margin-right: 5px;
                        }
                        .right-icon {
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>