admin-sjzx/src/views/pqs/qualityInspeection/panorama/index.vue

<template>
    <div class="panorama" :style="height">
        <div class="mapBox" v-show="lineInfo">
            <DatePicker ref="datePickerRef" style="display: none" />
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <Area
                        ref="areaRef"
                        :show-all-levels="false"
                        v-model="form.orgNo"
                        style="width: 100px"
                        @changeValue="changeValue"
                    />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button icon="el-icon-Refresh" @click="reset"></el-button>
                </el-form-item> -->
            </el-form>
        </div>

        <!-- 地图 -->
        <!-- <Map ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop" @show="infoShow" /> -->
        <div v-show="lineInfo">
            <!-- 省级 -->
            <div v-show="control == 1">
                <mapL ref="mapLRef" class="mapL" @LookMap="LookMap" />
                <mapR ref="mapRRef" class="mapR" />
            </div>
            <!-- 市级 -->
            <!-- <div v-show="control == 4"> -->
            <div v-show="control == 2">
                <cityMapL ref="cityMapLRef" class="mapL" />
                <cityMapR ref="cityMapRRef" class="mapR" />
            </div>
        </div>

        <Info v-if="!lineInfo" ref="InfoRef" @back="lineInfo = true" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue'
import Area from '@/components/form/area/index.vue'
// import Map from './components/map.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { Search, Refresh } from '@element-plus/icons-vue'
import mapL from './components/mapL.vue'
import mapR from './components/mapR.vue'
import cityMapL from './components/cityMapL.vue'
import cityMapR from './components/cityMapR.vue'

import Info from './components/line/info.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { map } from 'xe-utils'
const dictData = useDictData()
defineOptions({
    name: 'panorama'
})
const datePickerRef = ref()
const areaRef = ref()
const lineInfo = ref(true)
const mapRef = ref()
const mapLRef = ref()
const InfoRef = ref()
const mapRRef = ref()
const cityMapLRef = ref()
const cityMapRRef = ref()
// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
const options: any = ref([
    {
        name: dictData.state.area[0].name,
        id: 0
    },
    {
        name: '上送国网',
        id: 1
    }
])
const control = ref(1)
const form: any = ref({
    name: '',
    orgNo: dictData.state.area[0].id,
    isUpToGrid: 0
})

const height = mainHeight(10)
// 获取区域名称
const changeValue = (e: any) => {
    // mapRef.value.locatePositions(e)
    form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
    options.value[0].name = e.data.areaName

    control.value = e.data.level

    info()
}
//点击监测点详情
const drop = (id: string) => {
    lineInfo.value = false
    nextTick(() => {
        InfoRef.value.open(id)
    })
}
// 关闭左右数据展示
const infoShow = (e: boolean) => {
    mapLRef.value.show = e
    mapRRef.value.show = e
    cityMapLRef.value.show = e
    cityMapRRef.value.show = e
}
// 地图控制图层
const LookMap = (row: any) => {
    // mapRef.value.addMarkers({ ...row, type: 1 })
}
const info = () => {
    form.value.startTime = datePickerRef.value.timeValue[0]
    form.value.searchBeginTime = datePickerRef.value.timeValue[0]
    form.value.endTime = datePickerRef.value.timeValue[1]
    form.value.searchEndTime = datePickerRef.value.timeValue[1]
    // form.value.startTime = `2023-01-01`
    // form.value.searchBeginTime = `2023-01-01`
    // form.value.endTime = `2024-07-30`
    // form.value.searchEndTime = `2024-07-30`
    form.value.type = datePickerRef.value.interval
    // mapRef.value.addMarkers()
    if (control.value == 1) {
        mapLRef.value.info(form.value)
        mapRRef.value.info(form.value)
    } else {
        cityMapRRef.value.info(form.value)
        cityMapLRef.value.info(form.value)
    }
}
onMounted(() => {
    // info()
    changeValue({ data: dictData.state.area[0] })
    // aaa()
})
</script>

<style lang="scss" scoped>
:deep(.mapBox) {
    position: absolute;
    top: 10px;
    left: calc(50% + 95px);

    z-index: 1;
    .el-select {
        min-width: 100px;

        .el-select__wrapper {
            height: 46px;
            border-radius: 8px;
        }
    }
    .el-input__wrapper {
        height: 46px;
        border-radius: 8px;
    }
    .el-form-item {
        margin-right: 15px;
    }
}
.mapL {
    position: absolute;
    top: 10px;
    // z-index: 1;
    left: 10px;
}
.mapR {
    position: absolute;
    top: 10px;
    // z-index: 1;
    right: 10px;
}

.panorama {
    margin: 10px 0 0 0;
    position: relative;
}
.el-button:focus {
    color: var(--color);
    background-color: #fff;
}
.el-button:hover {
    color: var(--el-color-white);
    border-color: var(--el-button-hover-bg-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
}
</style>