blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-06-30 00:29:16 +08:00
Code Issues Projects Releases Wiki Activity

feat: 调整地图

Browse Source
This commit is contained in:
huanghao1412 2024-07-08 16:14:46 +08:00
parent 44a992059a
commit c5f5c9c491
4 changed files with 265 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -3,9 +3,9 @@ VITE_DEV_PORT = '8080'
# development path
# VITE_DEV_PATH = 'http://192.168.0.34:11887'
VITE_DEV_PATH = 'http://192.168.0.34:8022'
VITE_DEV_PATH = 'http://192.168.0.34:18077'
# VITE_DEV_PATH = 'http://192.168.0.120:3001'
VITE_DEV_TOKEN = '0e1e851b-8522-477c-9f84-d415999816d1'
VITE_DEV_TOKEN = '71705982-1d76-473c-bb81-d15776f0f6aa'
# production path
VITE_PRO_PATH = 'http://192.168.0.235:8177'

29
src/packages/components/Charts/Maps/MapBase/config.ts
View File

@ -53,15 +53,16 @@ export const option = {
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 4,
legendHoverLink: false,
legendHoverLink: true,
showEffectOn: 'render',
// rippleEffect: {
// scale: 6,
// color: '#FFFFFF',
// brushType: 'fill'
// },
rippleEffect: {
scale: 6,
// color: '#FFFFFF',
// color: '#4dca59',
brushType: 'fill',
},
tooltip: {
show: true,
show: false,
backgroundColor: 'rgba(0,0,0,.6)',
borderColor: 'rgba(147, 235, 248, .8)',
textStyle: {
@ -78,13 +79,13 @@ export const option = {
textShadowBlur: 10,
textBorderWidth: 0,
color: '#FFFFFF',
show: false
show: true
},
symbol: 'none',
// symbol: 'none',
itemStyle: {
color: '#FFFFFF',
borderColor: 'rgba(225,255,255,2)',
borderWidth: 4,
borderWidth: 0,
shadowColor: '#E1FFFF',
shadowBlur: 10
},
@ -111,7 +112,7 @@ export const option = {
}
},
label: {
show: true,
show: false,
color: '#FFFFFF',
fontSize: 12
},
@ -119,7 +120,8 @@ export const option = {
disabled: false,
label: {
color: '#FFFFFF',
fontSize: 12
fontSize: 12,
show: false,
},
itemStyle: {
areaColor: '#4196FF',
@ -178,7 +180,8 @@ export const option = {
export const customData = {
// k: 名字 v: 数值
dataMap: '{}'
dataMap: '{}',
showInterval: true,
}
export const MapDefaultConfig = { ...option }

142
src/packages/components/Charts/Maps/MapBase/config.vue
View File

@ -194,88 +194,88 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<!-- <CollapseItem name="标记" :expanded="true">-->
<!-- <SettingItemBox name="样式">-->
<!-- <SettingItem name="大小">-->
<!-- <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>-->
<!-- </SettingItem>-->
<CollapseItem name="标记" :expanded="true">
<SettingItemBox name="样式">
<SettingItem name="大小">
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
</SettingItem>
<!-- <SettingItem name="颜色">-->
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>-->
<!-- </SettingItem>-->
<!-- </SettingItemBox>-->
</SettingItemBox>
<!-- <SettingItemBox name="文本">-->
<!-- <SettingItem name="显示">-->
<!-- <n-space>-->
<!-- <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>-->
<!-- </n-space>-->
<!-- </SettingItem>-->
<!-- <SettingItem name="字体大小">-->
<!-- <n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>-->
<!-- </SettingItem>-->
<!-- <SettingItem name="字体颜色">-->
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>-->
<!-- </SettingItem>-->
<!-- </SettingItemBox>-->
<SettingItemBox name="文本">
<SettingItem name="显示">
<n-space>
<n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
</n-space>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>
</SettingItem>
<SettingItem name="字体颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
</SettingItem>
</SettingItemBox>
<!-- <SettingItemBox name="涟漪">-->
<!-- <SettingItem name="涟漪大小">-->
<!-- <n-input-number-->
<!-- v-model:value="seriesList[0].rippleEffect.scale"-->
<!-- :min="1"-->
<!-- size="small"-->
<!-- placeholder="请输入涟漪大小"-->
<!-- ></n-input-number>-->
<!-- </SettingItem>-->
<SettingItemBox name="涟漪">
<SettingItem name="涟漪大小">
<n-input-number
v-model:value="seriesList[0].rippleEffect.scale"
:min="1"
size="small"
placeholder="请输入涟漪大小"
></n-input-number>
</SettingItem>
<!-- <SettingItem name="涟漪颜色">-->
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>-->
<!-- </SettingItem>-->
<!-- <SettingItem name="涟漪的绘制方式">-->
<!-- <n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />-->
<!-- </SettingItem>-->
<!-- </SettingItemBox>-->
<!-- </CollapseItem>-->
<CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">
<SettingItemBox name="箭头">
<SettingItem name="速度">
<n-tooltip trigger="hover">
<template #trigger>
<n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
</template>
值越小速度越快
</n-tooltip>
</SettingItem>
<SettingItem name="尾迹">
<n-tooltip trigger="hover">
<template #trigger>
<n-input-number
v-model:value="seriesList[2].effect.trailLength"
size="small"
:min="0"
:max="1"
></n-input-number>
</template>
特效尾迹长度[0,1]值越大，尾迹越长重
</n-tooltip>
</SettingItem>
<SettingItem name="大小">
<n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="配置">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="seriesList[2].lineStyle.normal.color"
></n-color-picker>
</SettingItem>
<SettingItem name="宽度">
<n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
<SettingItem name="涟漪的绘制方式">
<n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
<!-- <CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">-->
<!-- <SettingItemBox name="箭头">-->
<!-- <SettingItem name="速度">-->
<!-- <n-tooltip trigger="hover">-->
<!-- <template #trigger>-->
<!-- <n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>-->
<!-- </template>-->
<!-- 值越小速度越快-->
<!-- </n-tooltip>-->
<!-- </SettingItem>-->
<!-- <SettingItem name="尾迹">-->
<!-- <n-tooltip trigger="hover">-->
<!-- <template #trigger>-->
<!-- <n-input-number-->
<!-- v-model:value="seriesList[2].effect.trailLength"-->
<!-- size="small"-->
<!-- :min="0"-->
<!-- :max="1"-->
<!-- ></n-input-number>-->
<!-- </template>-->
<!-- 特效尾迹长度[0,1]值越大，尾迹越长重-->
<!-- </n-tooltip>-->
<!-- </SettingItem>-->
<!-- <SettingItem name="大小">-->
<!-- <n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>-->
<!-- </SettingItem>-->
<!-- </SettingItemBox>-->
<!-- <SettingItemBox name="配置">-->
<!-- <SettingItem name="颜色">-->
<!-- <n-color-picker-->
<!-- size="small"-->
<!-- :modes="['hex']"-->
<!-- v-model:value="seriesList[2].lineStyle.normal.color"-->
<!-- ></n-color-picker>-->
<!-- </SettingItem>-->
<!-- <SettingItem name="宽度">-->
<!-- <n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>-->
<!-- </SettingItem>-->
<!-- </SettingItemBox>-->
<!-- </CollapseItem>-->
</template>
<script setup lang="ts">

211
src/packages/components/Charts/Maps/MapBase/index.vue
View File

@ -28,7 +28,7 @@
</template>
<script setup lang="ts">
import { PropType, reactive, watch, ref, nextTick, toRefs, computed, Ref } from 'vue'
import { PropType, reactive, watch, ref, nextTick, toRefs, computed, Ref, onMounted, onUnmounted } from 'vue'
import config, { includes } from './config'
import VChart from 'vue-echarts'
import { icon } from '@/plugins'
@ -39,11 +39,15 @@ import { CanvasRenderer } from 'echarts/renderers'
import { useChartDataFetch } from '@/hooks'
import { mergeTheme, setOption } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {isPreview, postMessageToParent} from '@/utils'
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
import mapChinaJson from './mapGeojson/china.json'
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
import { customData as customDataConfig } from './config'
import { publicInterface } from '@/api/path/business.api'
import {useOriginStore} from "@/store/modules/originStore/originStore";
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
import { debounce } from 'lodash'
const props = defineProps({
themeSetting: {
@ -85,22 +89,84 @@ const option = reactive({
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
props.chartConfig.option.series[1].tooltip.formatter = (v: any) => {
let obj = JSON.parse(customData.value.dataMap)
let value: any
if(obj && JSON.stringify(obj) !== '{}') value = obj[v.name] || '-'
else value = v.value
let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${value}</span></div>`
return str
const originStore = useOriginStore()
const systemConfig = originStore.getOriginStore.user.systemConfig
const activeAlarmData = computed(() => {
let obj:any = {levels: [], confirm_statuses: []}
if (systemConfig['active_alarm_level']) {
for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) {
obj.levels.push(i + 1)
}
}
if (systemConfig['active_alarm_confirm_status']) {
obj.confirm_statuses = [...JSON.parse(systemConfig['active_alarm_confirm_status'])]
}
return obj
})
const dataMap = computed(() => {
let obj = {}
try {
obj = JSON.parse(customData.value.dataMap)
} catch (e) {
console.log(e)
}
return obj
})
let getData = () => {
let obj = dataMap.value as any
if(JSON.stringify(obj) !== '{}') {
let ids = []
for(let k in obj) {
if(obj[k].roomId) ids.push(obj[k].roomId)
}
const param = {
ids,
...activeAlarmData.value
}
publicInterface('/dcim/dems/device', 'get_space_tree_with_status_v3', param).then((res: any) => {
if(res.data) {
colorMap.value = {}
res.data = res.data.filter((_: any) => _.node_status !== 0)
res.data.forEach((_: any) => {
colorMap.value[_.id] = '#f43b42'
})
vEchartsSetOption()
}
})
}
else {
vEchartsSetOption()
}
}
getData = debounce(getData, 200)
const vChartRef = ref<typeof VChart>()
const currentMap: Ref<any> = ref(null)
let colorMap: Ref<any> = ref({})
const updateMapFn = (data: any) => {
if(!data) return
props.chartConfig.option.series[0].data = data.features.map((it: any) => {
let obj = (dataMap.value as any)[it.properties.name] || {}
return {
name: it.properties.name,
value: it.properties.center ? it.properties.center.concat(50) : [],
itemStyle: {
color: colorMap.value[obj.roomId] || '#4dca59',
}
}
})
}
//动态获取json注册地图
const getGeojson = (regionId: string) => {
return new Promise<boolean>(resolve => {
import(`./mapGeojson/${regionId}.json`).then(data => {
currentMap.value = data.default
registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
updateMapFn(data.default)
resolve(true)
})
})
@ -122,8 +188,34 @@ const registerMapInitAsync = async () => {
}
registerMapInitAsync()
const handleClickMap = (e: any) => {
let obj = JSON.parse(customData.value.dataMap)
if(obj && JSON.stringify(obj) !== '{}') {
let path = obj[e.name].skipPath
if(path) openWeb(path)
}
}
// onMounted(() => {
// if(vChartRef.value) {
// vChartRef.value.chart.on('click', 'series.map', handleClickMap)
// }
// })
//
// onUnmounted(() => {
// if(vChartRef.value) vChartRef.value.chart.off('click', 'series.map', handleClickMap)
// })
const openWeb = (url: string) => {
postMessageToParent({
type: 'changeRouterV1',
url
})
}
// 手动触发渲染
const vEchartsSetOption = () => {
updateMapFn(currentMap.value)
option.value = props.chartConfig.option
setOption(vChartRef.value, props.chartConfig.option)
}
@ -131,8 +223,8 @@ const vEchartsSetOption = () => {
// 更新数据处理
const dataSetHandle = async (dataset: any) => {
props.chartConfig.option.series.forEach((item: any) => {
if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
else if (item.type === 'lines' && dataset.line) {
// if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
if (item.type === 'lines' && dataset.line) {
item.data = dataset.line.map((it: any) => {
return {
...it,
@ -194,30 +286,50 @@ const checkOrMap = async (newData: string) => {
vEchartsSetOption()
}
//监听 dataset 数据发生变化
watch(
() => props.chartConfig.option.dataset,
newData => {
dataSetHandle(newData)
},
{
immediate: true,
deep: false
onMounted(() => {
nextTick(() => {
getData()
})
})
watch(() => customData.value.dataMap, () => {
let obj = dataMap.value as any
props.chartConfig.option.series[1].tooltip.formatter = (v: any) => {
let value: any
if(obj && JSON.stringify(obj) !== '{}') value = obj[v.name].value || '-'
else value = !isNaN(v.value) ? v.value : '-'
let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${value}</span></div>`
return str
}
)
getData()
}, {
immediate: true
})
// //监听 dataset 数据发生变化
// watch(
// () => props.chartConfig.option.dataset,
// newData => {
// dataSetHandle(newData)
// },
// {
// immediate: true,
// deep: false
// }
// )
// 监听线的颜色
if (props.chartConfig.option.series[2] && !isPreview()) {
watch(
() => props.chartConfig.option.series[2].lineStyle.normal.color,
() => {
dataSetHandle(props.chartConfig.option.dataset)
},
{
deep: false
}
)
}
// if (props.chartConfig.option.series[2] && !isPreview()) {
// watch(
// () => props.chartConfig.option.series[2].lineStyle.normal.color,
// () => {
// dataSetHandle(props.chartConfig.option.dataset)
// },
// {
// deep: false
// }
// )
// }
//监听是否显示南海群岛
if (!isPreview()) {
@ -251,10 +363,39 @@ watch(
}
)
// 预览
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
dataSetHandle(newData)
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), () => {
if(!isPreview()) return
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
})
onMounted(() => {
getData()
if(!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => {
getData()
}, number)
})
onUnmounted(() => {
if(timer) clearInterval(timer as number)
})
// 预览
// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
// dataSetHandle(newData)
// })
</script>
<style scope lang="scss">