blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-06-30 08:39:15 +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 # development path
# VITE_DEV_PATH = 'http://192.168.0.34:11887' # 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_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 # production path
VITE_PRO_PATH = 'http://192.168.0.235:8177' 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', type: 'effectScatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
symbolSize: 4, symbolSize: 4,
legendHoverLink: false, legendHoverLink: true,
showEffectOn: 'render', showEffectOn: 'render',
// rippleEffect: { rippleEffect: {
// scale: 6, scale: 6,
// color: '#FFFFFF', // color: '#FFFFFF',
// brushType: 'fill' // color: '#4dca59',
// }, brushType: 'fill',
},
tooltip: { tooltip: {
show: true, show: false,
backgroundColor: 'rgba(0,0,0,.6)', backgroundColor: 'rgba(0,0,0,.6)',
borderColor: 'rgba(147, 235, 248, .8)', borderColor: 'rgba(147, 235, 248, .8)',
textStyle: { textStyle: {
@ -78,13 +79,13 @@ export const option = {
textShadowBlur: 10, textShadowBlur: 10,
textBorderWidth: 0, textBorderWidth: 0,
color: '#FFFFFF', color: '#FFFFFF',
show: false show: true
}, },
symbol: 'none', // symbol: 'none',
itemStyle: { itemStyle: {
color: '#FFFFFF', color: '#FFFFFF',
borderColor: 'rgba(225,255,255,2)', borderColor: 'rgba(225,255,255,2)',
borderWidth: 4, borderWidth: 0,
shadowColor: '#E1FFFF', shadowColor: '#E1FFFF',
shadowBlur: 10 shadowBlur: 10
}, },
@ -111,7 +112,7 @@ export const option = {
} }
}, },
label: { label: {
show: true, show: false,
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 12 fontSize: 12
}, },
@ -119,7 +120,8 @@ export const option = {
disabled: false, disabled: false,
label: { label: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 12 fontSize: 12,
show: false,
}, },
itemStyle: { itemStyle: {
areaColor: '#4196FF', areaColor: '#4196FF',
@ -178,7 +180,8 @@ export const option = {
export const customData = { export const customData = {
// k: 名字 v: 数值 // k: 名字 v: 数值
dataMap: '{}' dataMap: '{}',
showInterval: true,
} }
export const MapDefaultConfig = { ...option } export const MapDefaultConfig = { ...option }

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

@ -194,88 +194,88 @@
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
</CollapseItem> </CollapseItem>
<!-- <CollapseItem name="标记" :expanded="true">--> <CollapseItem name="标记" :expanded="true">
<!-- <SettingItemBox name="样式">--> <SettingItemBox name="样式">
<!-- <SettingItem name="大小">--> <SettingItem name="大小">
<!-- <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>--> <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
<!-- </SettingItem>--> </SettingItem>
<!-- <SettingItem name="颜色">--> <!-- <SettingItem name="颜色">-->
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>--> <!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>-->
<!-- </SettingItem>--> <!-- </SettingItem>-->
<!-- </SettingItemBox>--> </SettingItemBox>
<!-- <SettingItemBox name="文本">--> <SettingItemBox name="文本">
<!-- <SettingItem name="显示">--> <SettingItem name="显示">
<!-- <n-space>--> <n-space>
<!-- <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>--> <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
<!-- </n-space>--> </n-space>
<!-- </SettingItem>--> </SettingItem>
<!-- <SettingItem name="字体大小">--> <SettingItem name="字体大小">
<!-- <n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>--> <n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>
<!-- </SettingItem>--> </SettingItem>
<!-- <SettingItem name="字体颜色">--> <SettingItem name="字体颜色">
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>--> <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
<!-- </SettingItem>--> </SettingItem>
<!-- </SettingItemBox>--> </SettingItemBox>
<!-- <SettingItemBox name="涟漪">--> <SettingItemBox name="涟漪">
<!-- <SettingItem name="涟漪大小">--> <SettingItem name="涟漪大小">
<!-- <n-input-number--> <n-input-number
<!-- v-model:value="seriesList[0].rippleEffect.scale"--> v-model:value="seriesList[0].rippleEffect.scale"
<!-- :min="1"--> :min="1"
<!-- size="small"--> size="small"
<!-- placeholder="请输入涟漪大小"--> placeholder="请输入涟漪大小"
<!-- ></n-input-number>--> ></n-input-number>
<!-- </SettingItem>--> </SettingItem>
<!-- <SettingItem name="涟漪颜色">--> <!-- <SettingItem name="涟漪颜色">-->
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>--> <!-- <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>-->
<!-- </SettingItem>--> <!-- </SettingItem>-->
<!-- <SettingItem name="涟漪的绘制方式">--> <SettingItem name="涟漪的绘制方式">
<!-- <n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />--> <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> </SettingItem>
</SettingItemBox> </SettingItemBox>
</CollapseItem> </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> </template>
<script setup lang="ts"> <script setup lang="ts">

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

@ -28,7 +28,7 @@
</template> </template>
<script setup lang="ts"> <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 config, { includes } from './config'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { icon } from '@/plugins' import { icon } from '@/plugins'
@ -39,11 +39,15 @@ import { CanvasRenderer } from 'echarts/renderers'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
import { mergeTheme, setOption } from '@/packages/public/chart' import { mergeTheme, setOption } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils' import {isPreview, postMessageToParent} from '@/utils'
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
import mapChinaJson from './mapGeojson/china.json' import mapChinaJson from './mapGeojson/china.json'
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
import { customData as customDataConfig } from './config' 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({ const props = defineProps({
themeSetting: { themeSetting: {
@ -85,22 +89,84 @@ const option = reactive({
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes) value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
}) })
props.chartConfig.option.series[1].tooltip.formatter = (v: any) => { const originStore = useOriginStore()
let obj = JSON.parse(customData.value.dataMap) const systemConfig = originStore.getOriginStore.user.systemConfig
let value: any
if(obj && JSON.stringify(obj) !== '{}') value = obj[v.name] || '-' const activeAlarmData = computed(() => {
else value = v.value let obj:any = {levels: [], confirm_statuses: []}
let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${value}</span></div>` if (systemConfig['active_alarm_level']) {
return str 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 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注册地图 //动态获取json注册地图
const getGeojson = (regionId: string) => { const getGeojson = (regionId: string) => {
return new Promise<boolean>(resolve => { return new Promise<boolean>(resolve => {
import(`./mapGeojson/${regionId}.json`).then(data => { import(`./mapGeojson/${regionId}.json`).then(data => {
currentMap.value = data.default
registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} }) registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
updateMapFn(data.default)
resolve(true) resolve(true)
}) })
}) })
@ -122,8 +188,34 @@ const registerMapInitAsync = async () => {
} }
registerMapInitAsync() 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 = () => { const vEchartsSetOption = () => {
updateMapFn(currentMap.value)
option.value = props.chartConfig.option option.value = props.chartConfig.option
setOption(vChartRef.value, props.chartConfig.option) setOption(vChartRef.value, props.chartConfig.option)
} }
@ -131,8 +223,8 @@ const vEchartsSetOption = () => {
// 更新数据处理 // 更新数据处理
const dataSetHandle = async (dataset: any) => { const dataSetHandle = async (dataset: any) => {
props.chartConfig.option.series.forEach((item: any) => { props.chartConfig.option.series.forEach((item: any) => {
if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point // if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
else if (item.type === 'lines' && dataset.line) { if (item.type === 'lines' && dataset.line) {
item.data = dataset.line.map((it: any) => { item.data = dataset.line.map((it: any) => {
return { return {
...it, ...it,
@ -194,30 +286,50 @@ const checkOrMap = async (newData: string) => {
vEchartsSetOption() vEchartsSetOption()
} }
//监听 dataset 数据发生变化 onMounted(() => {
watch( nextTick(() => {
() => props.chartConfig.option.dataset, getData()
newData => { })
dataSetHandle(newData) })
},
{ watch(() => customData.value.dataMap, () => {
immediate: true, let obj = dataMap.value as any
deep: false 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()) { // if (props.chartConfig.option.series[2] && !isPreview()) {
watch( // watch(
() => props.chartConfig.option.series[2].lineStyle.normal.color, // () => props.chartConfig.option.series[2].lineStyle.normal.color,
() => { // () => {
dataSetHandle(props.chartConfig.option.dataset) // dataSetHandle(props.chartConfig.option.dataset)
}, // },
{ // {
deep: false // deep: false
} // }
) // )
} // }
//监听是否显示南海群岛 //监听是否显示南海群岛
if (!isPreview()) { if (!isPreview()) {
@ -251,10 +363,39 @@ watch(
} }
) )
// 预览
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { let timer:unknown
dataSetHandle(newData) 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> </script>
<style scope lang="scss"> <style scope lang="scss">