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

<template>
    <div class="default-main" :style="height">
        <div class="box" >
            <DatePicker ref="datePickerRef" style="display: none" />
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="form.name" placeholder="请输入设备名称" :suffix-icon="Search">
                        <template #prefix>
                            <img style="width: 30px" src="@/assets//img/GJDW.png" alt="" />
                        </template>
                    </el-input>
                </el-form-item>
                <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 /> -->

        <!-- 省级 -->
        <div v-show="control == 1">
            <mapL ref="mapLRef" class="mapL" />
            <mapR ref="mapRRef" class="mapR" />
        </div>
        <!-- 市级 -->
        <div v-show="control == 2">
            <cityMapL ref="cityMapLRef" class="mapL" />
            <cityMapB ref="cityMapBRef" class="mapB" />
            <cityMapR ref="cityMapRRef" class="mapR" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, 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 cityMapL from './components/cityMapL.vue'
import cityMapR from './components/cityMapR.vue'
import cityMapB from './components/cityMapB.vue'
import mapR from './components/mapR.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
const dictData = useDictData()
defineOptions({
    name: '/panorama'
})
const datePickerRef = ref()
const areaRef = ref()
const mapLRef = ref()
const mapRRef = ref()
const cityMapLRef = ref()
const cityMapRRef = ref()
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) => {
    options.value[0].name = e.label
    if (e.level == 1) {
        control.value = 1
    } else {
        control.value = 2
    }
    info()
}

const reset = () => {
    form.value = {
        name: '',
        orgNo: dictData.state.area[0].id,
        isUpToGrid: 0
    }
    control.value = 1
    info()
}
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
    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()
})
</script>

<style lang="scss" scoped>
:deep(.box) {
    position: absolute;
    top: 10px;
    left: 30%;
    z-index: 1;
    .el-select {
        min-width: 100px;
    }
    .el-form-item {
        margin-right: 15px;
    }
}
.mapL {
    position: absolute;
    top: 10px;
    left: 10px;
}
.mapR {
    position: absolute;
    top: 10px;
    right: 10px;
}
.mapB {
    position: absolute;
    bottom: 0px;
    left: 25%;
}
.default-main {
    margin: 10px 0 0 0;
}
.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>