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

<template>
    <div class="base-container">
        <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
        <div class="content">
            <div class="content-left">
                <div class="btn" @click="goBack">
                    <img src="@/assets/images/common/back-icon.png" alt="" />
                    返回
                </div>
                <chart-box class="left-cont" v-if="workList && workList.length" :name="workList[0].farmWorkName" color="yellow">
                    <div class="box">
                        <div class="box-item">
                            <div class="box-title">
                                专家处方
                                <!-- <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon> -->
                            </div>
                            <component v-if="workList && workList.length" :is="components[currentComponent]" :prescriptioData="workList[0]" />
                        </div>
                        <!-- <div class="button">确认下发</div> -->
                        <div class="box-item" v-if="workList && workList.length">
                            <div class="box-title">
                                农资报价
                                <!-- <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon> -->
                            </div>
                            <!-- <custom-table type="0" :tableHeader="tableHeader" :tableData="tableData" hideText></custom-table> -->
                            <service-box
                                :boxId="workList[0].farmWorkLibId"
                                        :progress="workList[0].orderStatus"
                                        :prescriptionList="workList[0].prescriptionList"
                                        :users="workList[0].users"
                                        :serviceData="workList[0]"
                                        :executeDate="workList[0].executeDate">
                            </service-box>
                        </div>
                    </div>
                </chart-box>
            </div>
            <div class="content-right">
                <div class="map-header">
                    <div class="title">
                        <img src="@/assets/images/common/area-icon.png" alt="" />
                        执行农事区域
                    </div>
                </div>
                <div ref="mapRef" class="map">
                    <!-- <div class="map-bg map-btn">查看巡园照片</div> -->
                    <div class="map-bg map-legend">
                        <div class="item">
                            <img src="@/assets/images/map/status/status-zc.png" alt="" />
                            正常
                        </div>
                        <div class="item">
                            <img src="@/assets/images/map/status/status-szyc.png" alt="" />
                            生长异常
                        </div>
                        <div class="item">
                            <img src="@/assets/images/map/status/status-bh.png" alt="" />
                            病害异常
                        </div>
                        <div class="item">
                            <img src="@/assets/images/map/status/status-ch.png" alt="" />
                            虫害异常
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import fnHeader from "@/components/fnHeader.vue";
import customTable from "./components/table.vue";
import prescriptionBox from './components/prescriptionBox'
import serviceBox from './components/serviceBox'
import FarmMap from "@/views/addFarm/farmMap";
import chartBox from "@/components/chartBox.vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const components = {
    prescriptionBox,
};
const currentComponent = ref("prescriptionBox");

let store = useStore();
let farmMap = new FarmMap();

const router = useRouter();
const route = useRoute();
const mapRef = ref(null);
const workList = ref({})

const getList = () => {
    VE_API.farm.fetchFarmWorkList({ farmId, libId, id }).then(({data}) => {
    // data[0].orderStatus = data[0].orderStatus + 1
        workList.value = data

        let itemData = data && data.length && data[0]
        farmMap.initData(itemData.farmId, itemData.regionId)
        farmMap.getBlueRegion({gardenId:  itemData.farmId, regionId: itemData.regionId}, (e) => {
            farmMap.setBlueRegion(itemData.executeBlueZones)
        });
    })
}


let farmId = route.query.farmId
let libId = route.query.libId
let id = route.query.id
onMounted(() => {
    farmMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
    getList();
});


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

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

    .content {
        width: 100%;
        height: calc(100% - 74px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px;
        .content-left {
            width: 473px;
            height: 100%;
            box-sizing: border-box;
            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(255, 255, 255, 0.78);
                border-radius: 4px;
                padding: 9px;
                margin-bottom: 13px;
                width: 104px;
                cursor: pointer;
                img {
                    width: 14px;
                    margin-right: 5px;
                }
            }
            .left-cont {
                width: 100%;
                height: calc(100% - 48px - 4px);
                .icon-arrow{
                    cursor: pointer;
                }
                .box {
                    width: 100%;
                    height: 100%;
                    padding: 16px 12px;
                    box-sizing: border-box;
                    overflow-y: auto;
                    .box-item {
                        background: rgba(255, 255, 255, 0.04);
                        border: 1px solid #444444;
                        border-radius: 8px;
                        padding: 16px 12px;
                        box-sizing: border-box;
                        width: 100%;
                        .box-title {
                            font-size: 20px;
                            border-bottom: 1px solid #333333;
                            padding: 0 0 12px 13px;
                            margin-bottom: 12px;
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            &::before {
                                content: "";
                                position: absolute;
                                left: 0;
                                top: 6px;
                                width: 3px;
                                height: 16px;
                                background: #fff;
                                border-radius: 11px;
                            }
                        }

                    }
                    .box-item + .box-item {
                        margin-top: 12px;
                    }
                }
                .button {
                    font-size: 16px;
                    padding: 10px;
                    background: #ffd489;
                    border-radius: 4px;
                    color: #000;
                    margin: 16px 0;
                    cursor: pointer;
                    text-align: center;
                }
            }
        }
        .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;
            .map-header {
                display: flex;
                justify-content: space-between;
                .title {
                    font-size: 22px;
                    display: flex;
                    align-items: flex-end;
                    font-family: "PangMenZhengDao";
                    margin-bottom: 16px;
                    img {
                        margin-right: 8px;
                    }
                }
            }
            .map {
                width: 100%;
                clip-path: inset(0px round 4px);
                height: calc(100% - 31px - 16px);
                position: relative;
                .map-bg {
                    position: absolute;
                    z-index: 2;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 18px;
                    padding: 7px 16px;
                    right: 20px;
                }
                .map-btn {
                    top: 19px;
                    cursor: pointer;
                }
                .map-legend {
                    bottom: 21px;
                    .item {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        img {
                            width: 16px;
                            margin-right: 6px;
                        }
                    }
                    .item + .item {
                        padding-top: 10px;
                    }
                }
            }
        }
    }
}
</style>