src/assets/images/home/useEventOperate/close.png
@@ -9,7 +9,15 @@ </div> <div class="content"> <div class="medium"> <!-- <img class="quanjing" @click="clickpanorama(infoList)" v-if="infoList?.resultType === 5" :src="infoList?.link" alt="" /> --> <el-image class="eventImage" :src="getSmallImg(infoList?.link)" :preview-src-list="[getSmallImg(infoList?.link)]" @@ -34,16 +42,23 @@ </div> </div> </div> </div> <!-- 全景预览 --> <!-- <PanoramaPopup class="quanjing" v-model:panoramaParamsShow="panoramaParamsShow" v-model:panoramaParamsUrl="panoramaParamsUrl" ></PanoramaPopup> --> </template> <script setup> import { ElImage, ElIcon } from 'element-plus' import { Close,Warning } from '@element-plus/icons-vue' import _ from 'lodash' import { ElImage, ElIcon } from 'element-plus'; import { Close, Warning } from '@element-plus/icons-vue'; import _ from 'lodash'; import { getShowImg, getSmallImg } from '@/utils/util'; const props = defineProps(['data', 'removeLabel','detailClick']) const loading = ref(true) const props = defineProps(['data', 'removeLabel', 'detailClick']); const loading = ref(true); import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景 const info = ref({ event_name: '', status: 1, @@ -51,9 +66,15 @@ longitude: '', latitude: '', create_time: '04/01 12:41', }) const infoList = props.data onMounted(async () => {}) }); const infoList = props.data; const panoramaParamsShow = ref(false); const panoramaParamsUrl = ref(null); const clickpanorama = val => { panoramaParamsShow.value = true; panoramaParamsUrl.value = val.link; }; onMounted(async () => {}); </script> <style scoped lang="scss"> src/utils/stateToImageMap/drone.js
New file @@ -0,0 +1,32 @@ /* * @Author: shuishen 1109946754@qq.com * @Date: 2025-04-17 20:17:12 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2025-04-17 20:28:08 * @FilePath: \command-center-dashboard\src\utils\stateToImageMap\drone.js * @Description: * * Copyright (c) 2025 by shuishen, All Rights Reserved. */ import endingImg from '@/assets/images/aiNowFly/ending-offline.png' import endingHighImg from '@/assets/images/aiNowFly/ending-high.png' const droneImage = { 'OFFLINE': endingImg, 'WORKING': endingHighImg, 'LEISURE': endingHighImg } /** * 根据机巢状态获取图片 * @param {string} status 状态 * @returns */ export const getDroneStatusImage = (status) => droneImage[status] || endingHighImg /** * 根据机巢状态获取图片 * @param {boolean} isOnline 状态 * @returns */ export const getDroneFlagImage = (isOnline) => isOnline ? endingHighImg : endingImg src/utils/stateToImageMap/event.js
New file @@ -0,0 +1,34 @@ import eventPending1 from '@/assets/images/home/useEventOperate/eventPending1.png' // 待处理 0 import eventPending from '@/assets/images/home/useEventOperate/eventPending.png' // 待处理 0 import eventWaitAudit1 from '@/assets/images/home/useEventOperate/eventWaitAudit1.png' // 待审核 2 import eventWaitAudit from '@/assets/images/home/useEventOperate/eventWaitAudit.png' // 待审核 2 import eventProcessing1 from '@/assets/images/home/useEventOperate/eventProcessing1.png' // 处理中 3 import eventProcessing from '@/assets/images/home/useEventOperate/eventProcessing.png' // 处理中 3 import eventCompleted1 from '@/assets/images/home/useEventOperate/eventCompleted1.png' // 已完成 4 import eventCompleted from '@/assets/images/home/useEventOperate/eventCompleted.png' // 已完成 4 import eventClosed1 from '@/assets/images/home/useEventOperate/eventClosed1.png' // 已完结 5 import eventClosed from '@/assets/images/home/useEventOperate/eventClosed.png' // 已完结 5 const eventImage = { 0: eventPending, 2: eventWaitAudit, 3: eventProcessing, 4: eventCompleted, 5: eventClosed } const eventActiveImage = { 0: eventPending1, 2: eventWaitAudit1, 3: eventProcessing1, 4: eventCompleted1, 5: eventClosed1 } /** * 根据事件状态获取图片资源 * @param {*} status 状态 * @returns */ export const getEventImage = (status) => eventImage[status] || eventCompleted export const getEventActiveImage = (status) => eventActiveImage[status] || eventCompleted src/views/dataCenter/components/dataCenterMap.vue
@@ -3,10 +3,17 @@ <div class="mapBox"> <div v-if="isShow" id="dataCenterMap" class="ztzf-cesium"></div> </div> <!-- 全景360 --> <PanoramaPopup v-if="props.dotData.resultType === 5" v-model:panoramaParamsShow="panoramaParamsShow" v-model:panoramaParamsUrl="panoramaParamsUrl" /> </el-dialog> </template> <script setup> import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue' import { getMapInfoAPI } from '@/api/dataCenter/dataCenter'; import { useStore } from 'vuex'; import { PublicCesium } from '@/utils/cesium/publicCesium'; @@ -14,13 +21,17 @@ import * as Cesium from 'cesium'; import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue'; import { render, nextTick, watch, onMounted, onBeforeUnmount, shallowRef, ref, h } from 'vue'; import panoramaPoint from '@/assets/images/panorama/panorama-point.png' //全景图标 import defaultIcon from '@/assets/images/dataCenter/datamap/eventCompleted.png'; //默认图标 import activeIcon from '@/assets/images/dataCenter/datamap/activeevent.png'; // 激活图标 import { getEventActiveImage, getEventImage } from '@/utils/stateToImageMap/event' //点 const emit = defineEmits(['lookDetail']); const isShow = defineModel('show'); const viewerRef = shallowRef(null); let viewer = null; // 全景 const panoramaParamsShow = ref(false) const panoramaParamsUrl = ref(null) const store = useStore(); const currentAreaPosition = ref({ height: 1987280, latitude: 27.636112, longitude: 115.732975 }); let handler = null; @@ -86,8 +97,12 @@ // 恢复所有点的默认图标 const restoreAllIcons = () => { dataPointEntities.value.forEach(entity => { console.log('entity',entity); if (entity.billboard) { entity.billboard.image = defaultIcon; entity.billboard.image = props.dotData.resultType === 2 ? getEventImage(entity.status) : defaultIcon; } }); activeEntity.value = null; @@ -111,7 +126,9 @@ // 设置当前点击点为激活状态 if (currentClickEntity.billboard) { currentClickEntity.billboard.image = activeIcon; currentClickEntity.billboard.image = props.dotData.resultType === 2 ? getEventImage(currentClickEntity.status) : activeIcon; currentClickEntity.billboard.scale = 1 // 可选缩放效果 activeEntity.value = currentClickEntity; } @@ -168,7 +185,9 @@ pixelOffset: new Cesium.Cartesian2(0, 55), }, billboard: { image: defaultIcon, // 初始为默认图标 image: props.dotData.resultType === 2 ? getEventImage(item.status) : defaultIcon, // 初始为默认图标 width: 40, height: 40, pixelOffset: new Cesium.Cartesian2(0, -15), @@ -258,7 +277,7 @@ const initEntityOrPopup = data => { //地图点在范围内 watch( [() => isMapInitialized.value], () => isMapInitialized.value, ready => { if (ready) { src/views/dataCenter/dataCenter.vue
@@ -191,6 +191,7 @@ ref="mapComponent" v-model:show="dataCenterMapVisible" :jobId="jobId" @lookDetail="lookDetail" :dotData="mapList" ></dataCenterMap> @@ -463,8 +464,12 @@ const mapList = ref(null); const dataCenterMapVisible = ref(false); const jobId = ref(''); const statusType = ref(null) const positionDetail = val => { // console.log('地图',val); jobId.value = val.wayLineJobId; // console.log('statusType.value',statusType.value); mapList.value = val; dataCenterMapVisible.value = true; // 确保地图组件加载完成 src/views/util/stateToImageMap/event.js
New file @@ -0,0 +1,34 @@ import eventPending1 from '@/assets/images/home/useEventOperate/eventPending1.png' // 待处理 0 import eventPending from '@/assets/images/home/useEventOperate/eventPending.png' // 待处理 0 import eventWaitAudit1 from '@/assets/images/home/useEventOperate/eventWaitAudit1.png' // 待审核 2 import eventWaitAudit from '@/assets/images/home/useEventOperate/eventWaitAudit.png' // 待审核 2 import eventProcessing1 from '@/assets/images/home/useEventOperate/eventProcessing1.png' // 处理中 3 import eventProcessing from '@/assets/images/home/useEventOperate/eventProcessing.png' // 处理中 3 import eventCompleted1 from '@/assets/images/home/useEventOperate/eventCompleted1.png' // 已完成 4 import eventCompleted from '@/assets/images/home/useEventOperate/eventCompleted.png' // 已完成 4 import eventClosed1 from '@/assets/images/home/useEventOperate/eventClosed1.png' // 已完结 5 import eventClosed from '@/assets/images/home/useEventOperate/eventClosed.png' // 已完结 5 const eventImage = { 0: eventPending, 2: eventWaitAudit, 3: eventProcessing, 4: eventCompleted, 5: eventClosed } const eventActiveImage = { 0: eventPending1, 2: eventWaitAudit1, 3: eventProcessing1, 4: eventCompleted1, 5: eventClosed1 } /** * 根据事件状态获取图片资源 * @param {*} status 状态 * @returns */ export const getEventImage = (status) => eventImage[status] || eventCompleted export const getEventActiveImage = (status) => eventActiveImage[status] || eventCompleted
