From 61e6956be147e1e84e7104f16dd47e9f87f20dfd Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 10:57:32 +0800
Subject: [PATCH] feat: 控制台显示一些信息
---
src/hooks/useMapAggregation/useMapAggregation.js | 184 +++++++++++++++++++++++++++++++--------------
1 files changed, 126 insertions(+), 58 deletions(-)
diff --git a/src/hooks/useMapAggregation/useMapAggregation.js b/src/hooks/useMapAggregation/useMapAggregation.js
index df7750a..5557967 100644
--- a/src/hooks/useMapAggregation/useMapAggregation.js
+++ b/src/hooks/useMapAggregation/useMapAggregation.js
@@ -2,10 +2,23 @@
import aggregationImg from '@/assets/images/home/useUavHome/aggregation.png'
import eventAggregationImg from '@/assets/images/home/useUavHome/eventAggregationImg.png'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
+
+// 事件图标
import eventSingle from '@/assets/images/home/useEventOperate/eventSingle.png'
-import DevicePopUpBox from '@/hooks/useMapAggregation/DevicePopUpBox.vue'
-import EventPopUpBox from '@/hooks/useMapAggregation/EventPopUpBox.vue'
+import eventPending from '@/assets/images/home/useEventOperate/eventPending.png' // 待处理 0
+import eventWaitAudit from '@/assets/images/home/useEventOperate/eventWaitAudit.png' // 待审核 2
+import eventProcessing from '@/assets/images/home/useEventOperate/eventProcessing.png' // 处理中 3
+import eventCompleted from '@/assets/images/home/useEventOperate/eventCompleted.png' // 已完成 4
+import eventClosed from '@/assets/images/home/useEventOperate/eventClosed.png' // 已完结 5
+
+import DevicePopUpBox from '@/hooks/components/DevicePopUpBox.vue'
+import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue'
+
+
+// 机巢图标
+import endingImg from '@/assets/images/aiNowFly/ending.png'
+import endingHighImg from '@/assets/images/aiNowFly/ending-high.png'
import { render } from 'vue'
import { useStore } from 'vuex'
@@ -18,17 +31,25 @@
* 机巢聚合功能
*/
-let arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"]
+let arrColor = [
+ 'rgb(15,176,255)',
+ 'rgb(18,76,154)',
+ '#40C4E4',
+ '#42B2BE',
+ 'rgb(51,176,204)',
+ '#8CB7E5',
+ 'rgb(0,244,188)',
+ '#139FF0',
+]
let index = 0
function getColor () {
return arrColor[++index % arrColor.length]
}
-export const useMapAggregation = type => {
+export const useMapAggregation = (type, status) => {
const { flyTo } = cesiumOperation()
- const singleImg = type === 'device' ? uavImg : eventSingle
const mergeImg = type === 'device' ? aggregationImg : eventAggregationImg
const MapPopUpBox = type === 'device' ? DevicePopUpBox : EventPopUpBox
const styleTransform = type === 'device' ? 'translateY(-50%)' : 'translate(-50%,-110%)'
@@ -54,9 +75,22 @@
const store = useStore()
const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode)
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
- let saveAreaCode = null;
- let saveParams = { area_code: '',date_enum:'CURRENT_WEEK' };
+ const eventTimeType = computed(() => store.state.home.eventTimeType)
+ const eventTimeRang = computed(() => store.state.home.eventTimeRang)
+
+ const singleUavHome = computed(() => store.state.home.singleUavHome)
+
+ let needFly = true
+
+ const combinedValues = computed(() => ({
+ selectedAreaCode: selectedAreaCode.value,
+ eventTimeType: eventTimeType.value,
+ eventTimeRang: eventTimeRang.value,
+ singleUavHome: singleUavHome.value,
+ }))
+
+ let saveParams = { area_code: '', date_enum: 'CURRENT_WEEK' }
// 确定缩放比例
const determineScaling = () => {
@@ -95,20 +129,22 @@
// 获取设备聚合
function getDeviceCount (areaCode) {
return getDeviceRegionCount({ areaCode }).then(res => {
- return (res?.data?.data || [])
+ return res?.data?.data || []
})
}
// 获取设备散点
function getDeviceList (areaCode) {
return getDeviceRegion({ areaCode }).then(res => {
+
return (res?.data?.data || []).map(i => ({ ...i, type }))
+
+
})
}
// 事件散点
let eventList = []
function processChildren (childrens) {
- // console.log(childrens, '事件点')
return (childrens || []).map(item => {
const arr = processChildren(item.childrens)
if (item.data) {
@@ -122,14 +158,12 @@
if (arr.length !== 0) {
returnObj.childrens = arr
}
- console.log(returnObj, '111111')
return returnObj
})
}
// 获取事件聚合
function getMapEventCount (params) {
- console.log(5555555)
return getMapEvents(params).then(res => {
const resData = res?.data?.data
if (resData?.data) {
@@ -150,9 +184,7 @@
}
const getOutLine = async (jsonPathPre, hierarchy) => {
const parentGJson = await getFiler(`${defaultDir}${jsonPathPre}/index.json`)
- let features = parentGJson.features.find(
- item => item.properties.adcode === Number(hierarchy[hierarchy.length - 1])
- )
+ let features = parentGJson.features.find(item => item.properties.adcode === Number(hierarchy[hierarchy.length - 1]))
return { type: 'FeatureCollection', features: [features] }
}
@@ -169,13 +201,19 @@
const initMapData = async areaCode => {
eventList = []
if (!areaCode) return
- saveAreaCode = areaCode;
- saveParams.area_code = areaCode;
- console.log(type, '444')
+ saveParams.area_code = areaCode
const list = type === 'device' ? await getDeviceCount(areaCode) : await getMapEventCount(saveParams)
- const splashedList = type === 'device'
- ? await getDeviceList(areaCode)
- : eventList.map(i => ({ eventId: i.id, latitude: Number(i.latitude), longitude: Number(i.longitude), type: 'event' }))
+
+ const splashedList =
+ type === 'device'
+ ? await getDeviceList(areaCode)
+ : eventList.map(i => ({
+ eventId: i.id,
+ latitude: Number(i.latitude),
+ longitude: Number(i.longitude),
+ type: 'event',
+ status: i.status
+ }))
const hierarchy = convertToHierarchy(areaCode.slice(0, 6))
const jsonPath = hierarchy.join('/')
const jsonPathPre = hierarchy.slice(0, hierarchy.length - 1).join('/')
@@ -214,56 +252,66 @@
const outlineGJson = await getOutLine(jsonPathPre, hierarchy)
scalingJudgment.forEach(item => item.show && (item.outline = outlineGJson))
const [longitude, latitude] = outlineGJson.features[0].properties.centroid
- const height = scalingJudgment[(hierarchy.length - 3) * (-1)].height
+ const height = scalingJudgment[(hierarchy.length - 3) * -1].height
setCenterPosition({ longitude, latitude, height })
flyTo({ longitude, latitude }, 0, height)
}
const userAreaPosition = computed(() => store.state.home.userAreaPosition)
- const setCenterPosition = (position) => {
+ const setCenterPosition = position => {
store.commit('setCurrentAreaPosition', position)
if (!userAreaPosition.value.longitude) {
store.commit('setUserAreaPosition', position)
}
}
-
- let needFly = true
-
watch(
- selectedAreaCode,
+ combinedValues,
async (newValue, oldValue) => {
+ if (newValue.singleUavHome?.device_sn) {
+ clearMapEntity()
+ return
+ }
+
+ if (newValue.eventTimeType) {
+ saveParams = { area_code: newValue.selectedAreaCode, date_enum: store.state.home.eventTimeParams }
+ }
+
+ if (newValue.eventTimeRang) {
+ saveParams = {
+ area_code: newValue.selectedAreaCode,
+ start_date: newValue.eventTimeRang[0],
+ end_date: newValue.eventTimeRang[1],
+ }
+ }
+
needFly = true
if (!viewer) return
+ handlerInit()
+
viewer.scene.postRender.removeEventListener(determineScaling)
- initMapData(newValue).then(() => {
+
+ initMapData(newValue.selectedAreaCode).then(() => {
viewer.scene.postRender.addEventListener(determineScaling)
})
},
{ deep: true }
)
- // 监听 日 周 月 年
- watch(() => store.state.home.eventTimeType, (newVal) => {
- if (!saveAreaCode) return
- if (newVal) {
- saveParams = { area_code:saveAreaCode,date_enum: store.state.home.eventTimeParams }
- initMapData(saveAreaCode);
- }
- });
- // 监听事件右侧日期范围
- watch(() => store.state.home.eventTimeRang, (newVal) => {
- if (!saveAreaCode) return
- if (newVal) {
- saveParams = { area_code:saveAreaCode,start_date: newVal[0], end_date: newVal[1]}
- initMapData(saveAreaCode);
- }
- });
-
//散点机巢
function splashed (row) {
row.splashedList.forEach((item, index) => {
+ const eventImage = {
+ 0: eventPending,
+ 2: eventWaitAudit,
+ 3: eventProcessing,
+ 4: eventCompleted,
+ 5: eventClosed
+ }
+
+ const image = type === 'device' ? (item.status === "OFFLINE" ? endingHighImg : endingImg) : eventImage[item.status] || eventSingle
+
viewer.entities.add({
id: `aggregation-splashed-${index}`,
position: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude),
@@ -278,7 +326,8 @@
pixelOffset: new Cesium.Cartesian2(0, -9),
},
billboard: {
- image: new Cesium.ConstantProperty(singleImg),
+ // singleImg
+ image: new Cesium.ConstantProperty(image),
width: 24,
height: 24,
},
@@ -307,7 +356,7 @@
let material = new PolyGradientMaterial({
color: Cesium.Color.fromCssColorString(arrColor[randomInt]),
opacity: 0.7,
- alphaPower: 1.3
+ alphaPower: 1.3,
})
entity.polygon.extrudedHeight = (entity.properties.childrenNum._value || 1) * 500
@@ -329,14 +378,14 @@
}),
},
- polygon
+ polygon,
})
})
})
}
// 聚合机巢
- const aggregation = (item) => {
+ const aggregation = item => {
if (!item.gJson) return
const featuresList = item.gJson.features.map(item1 => {
// const {lng,lat} = getCenterPoint(item1.geometry.coordinates[0][0])
@@ -401,7 +450,7 @@
let material = new PolyGradientMaterial({
color: Cesium.Color.fromCssColorString(getColor()),
opacity: 0.7,
- alphaPower: 1.3
+ alphaPower: 1.3,
})
const randomInt = Math.floor(Math.random() * 8) + 1
@@ -412,10 +461,11 @@
entity.polygon.outline = false // 显示边框
})
- needFly && viewer.flyTo(dataSource, {
- offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0),
- duration: 0.5,
- })
+ needFly &&
+ viewer.flyTo(dataSource, {
+ offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0),
+ duration: 0.5,
+ })
needFly = false
})
}
@@ -463,10 +513,16 @@
let clickTargets = viewer.scene.drillPick(click.position).map(item => item.id)
if (!clickTargets.length) return
- let deviceAggregationFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'deviceAggregation')
- let deviceFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'device')
- let eventFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'event')
+ let deviceAggregationFind = findTypeItem(
+ clickTargets,
+ item => item?.properties?.customData?._value?.data?.type === 'deviceAggregation'
+ )
+ let deviceFind = findTypeItem(clickTargets, item => item?.properties?.customData?._value?.data?.type === 'device')
+ // "event"
+ let eventFind = findTypeItem(clickTargets, item => item?.properties?.customData?._value?.data?.type === 'event')
+ // let eventFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'eventAggregation')
currentEntity = deviceAggregationFind || deviceFind || eventFind
+
if (!currentEntity) return
if (!currentEntity?.position?._value) return
// 一定要移除
@@ -508,6 +564,11 @@
// 移除所有监听事件，变量置空
const removeAll = () => {
+ clearMapEntity()
+ viewer = null
+ }
+
+ const clearMapEntity = () => {
if (!viewer) return
removeEntities()
removeLabel()
@@ -515,21 +576,28 @@
viewer.scene.postRender.removeEventListener(determineScaling)
handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler?.destroy()
- viewer = null
active = null
handler = null
currentEntity = null
}
+
const init = () => {
viewer = window.$viewer
viewer.scene.postRender.removeEventListener(determineScaling)
initMapData(selectedAreaCode.value || userAreaCode.value).then(() => {
viewer.scene.postRender.addEventListener(determineScaling)
})
+
+ handlerInit()
+ }
+
+ const handlerInit = () => {
+ if (handler) return
+
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
}
+
onBeforeUnmount(() => { })
// onMounted(() => {
// nextTick(() => {
--
Gitblit v1.9.3