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" theCurrentTime />
            <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>
                    <div class="Icon" @click="reset">
                        <Icon name="fa fa-refresh" />
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <!-- 地图 -->
        <Map
            v-if="VITE_FLAG"
            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" @GridDiagram="GridDiagram" />
                <mapR ref="mapRRef" class="mapR" @changeHeat="changeHeat" />
            </div>
            <!-- 市级 -->
            <!-- <div v-show="control == 4"> -->
            <div v-show="control == 2">
                <cityMapL ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
                <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'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'

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,
    areaName: dictData.state.area[0]?.name,
    isUpToGrid: 0
})

const height = mainHeight(10)
// 获取区域名称
const changeValue = (e: any) => {
    VITE_FLAG ? 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
    form.value.areaName = e.data.name
    options.value[0].name = e.data.areaName

    control.value = e.data.level

    info()
}
// 热力图开关
const changeHeat = (e: boolean) => {
    console.log('🚀 ~ changeHeat ~ e:', e)

    mapRef.value.changeHeat(e)
    if (e) {
        mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.409267680647425)
    }
}
//点击监测点详情
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, key?: any) => {
    VITE_FLAG ? mapRef.value.addMarkers({ ...row, type: 1 }, key) : ''
}
const LngLat = [
    {
        name: '唐山',
        LngLat: [118.335849137, 39.7513593355],
        zoom: 8
    },
    {
        name: '张家口',
        LngLat: [115.032504679, 40.8951549951],
        zoom: 7
    },
    {
        name: '秦皇岛',
        LngLat: [119.185113833, 40.1179119754],
        zoom: 8.3
    },
    {
        name: '承德',
        LngLat: [117.548498365, 41.3775890632],
        zoom: 7.3
    },
    {
        name: '廊坊',
        LngLat: [116.628004129, 39.0589378611],
        zoom: 8
    },
    {
        name: '超高压',
        LngLat: [116.84428600000001, 40.57707185292256],
        zoom: 6.709267680647425
    },
    {
        name: '风光储',
        LngLat: [116.84428600000001, 40.57707185292256],
        zoom: 6.709267680647425
    }
]
//区域统计展示切换
const GridDiagram = (k?: number, num?: number) => {
    VITE_FLAG ? mapRef.value.radiusPop(k) : ''
    if (num == 3) {
        // form.value.areaName
        let value = LngLat.filter(item => item.name == form.value.areaName)[0]

        if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
    } else {
        VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425) : ''
    }
}
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.type = datePickerRef.value.interval

    VITE_FLAG ? mapRef.value.grids(form.value) : ''
    VITE_FLAG ? 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)
    }
}
// 重置
const reset = () => {
    form.value = {
        name: '',
        orgNo: dictData.state.area[0].id,
        areaName: dictData.state.area[0]?.name,
        isUpToGrid: 0
    }
    changeValue({ data: dictData.state.area[0] })
}
onMounted(() => {
    nextTick(() => {
        // datePickerRef.value.setTheDate(1)
        changeValue({ data: dictData.state.area[0] })
    })
})
</script>

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

    z-index: 1;

    .el-select {
        min-width: 100px;

        .el-select__wrapper {
            height: 46px !important;
            border-radius: 8px;
        }
    }

    .Icon {
        height: 46px;
        width: 46px;
        background-color: #fff;
        border-radius: 8px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;

        .fa-refresh {
            color: var(--el-color-primary) !important;
        }
    }

    .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>