冀北问题修改
This commit is contained in:
guanj
@@ -1,277 +1,277 @@
|
||||
<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" />
|
||||
</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 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) : ''
|
||||
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(() => {
|
||||
// info()
|
||||
changeValue({ data: dictData.state.area[0] })
|
||||
// aaa()
|
||||
})
|
||||
</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>
|
||||
<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" />
|
||||
</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 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) : ''
|
||||
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(() => {
|
||||
// info()
|
||||
changeValue({ data: dictData.state.area[0] })
|
||||
// aaa()
|
||||
})
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user