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

<template>
    <div class="base-container">
        <fnHeader :hideSwitch="true" :hideShadow="true"></fnHeader>
        <div class="content">
            <div class="left">
                <div @click="goBack">返回</div>
                <component v-if="workList && workList.length" :is="components[currentComponent]" :prescriptioData="workList[0]" />
            </div>
            <div class="right">
                <div class="excute-title">执行农事区域</div>
                <div ref="mapRef" class="bottom-map"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import fnHeader from "@/components/fnHeader.vue";
import AreaMap from "./areaMap";
import prescriptionBox from './components/prescriptionBox'
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
let store = useStore();
const components = {
    prescriptionBox,
};
let areaMap = new AreaMap();

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

const workList = ref([])
const getList = () => {
  VE_API.order.fetchWorkList().then(({data}) => {
    // data[0].orderStatus = data[0].orderStatus + 1
    // && (ROLETYPE.value == '0' || ROLETYPE.value == '3')
    if (route.query.data && JSON.parse(route.query.data)?.farmWorkId) {
      data = data.find(item => item.farmWorkLibId === JSON.parse(route.query.data)?.farmWorkId)
      workList.value = [data]
    } else {
      workList.value = data
    }
    console.log('dtafds,', data)
  })
}


const currentComponent = ref("prescriptionBox");

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 - 48px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .left {
            width: 512px;
            height: 100%;
            padding-top: 10px;
            box-sizing: border-box;
        }
        .right {
            width: calc(100% - 512px);
            height: 100%;
            .bottom-map {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>