src/assets/images/home/useEventOperate/close.png
@@ -1,143 +1,164 @@ <template> <div class="mapPopUpBox"> <div class="title"> <span>{{ info.event_name }}</span> <el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon> <el-icon class="header-close" @click.stop="props.removeLabel"> <Close /> </el-icon> </div> <div class="content"> <div class="medium"> <el-image class="eventImage" :src="getSmallImg(infoList?.link)" :preview-src-list="[getSmallImg(infoList?.link)]" fit="cover" preview-teleported ></el-image> </div> <div class="mapPopUpBox"> <div class="title"> <span>{{ info.event_name }}</span> <el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon> <el-icon class="header-close" @click.stop="props.removeLabel"> <Close /> </el-icon> </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)]" fit="cover" preview-teleported ></el-image> </div> <div class="details"> <div class="label">时间：</div> <div class="value point"> {{ infoList?.create_time?.slice(5, 16).replace('-', '/') || infoList?.createTime?.slice(5, 16).replace('-', '/') }} </div> <div class="label">地点：</div> <div class="value"> {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{ _.round(infoList?.metadata?.shootPosition?.lat, 3) }} </div> </div> </div> </div> <div class="details"> <div class="label">时间：</div> <div class="value point"> {{ infoList?.create_time?.slice(5, 16).replace('-', '/') || infoList?.createTime?.slice(5, 16).replace('-', '/') }} </div> <div class="label">地点：</div> <div class="value"> {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{ _.round(infoList?.metadata?.shootPosition?.lat, 3) }} </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, url: '1', longitude: '', latitude: '', create_time: '04/01 12:41', }) const infoList = props.data onMounted(async () => {}) event_name: '', status: 1, url: '1', longitude: '', latitude: '', create_time: '04/01 12:41', }); 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"> .mapPopUpBox { width: 271px; height: 153px; // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%; border-radius: 20px; background-color: #fff; width: 271px; height: 153px; // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%; border-radius: 20px; background-color: #fff; padding: 13px 13px 1px 13px; pointer-events: all; padding: 13px 13px 1px 13px; pointer-events: all; .title { font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; font-weight: 400; font-size: 18px; line-height: 16px; background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; margin-bottom: 10px; display: flex; align-items: center; justify-content: end; .title { font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; font-weight: 400; font-size: 18px; line-height: 16px; background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; margin-bottom: 10px; display: flex; align-items: center; justify-content: end; .header-close { width: 20px; height: 100%; line-height: 100%; display: flex; align-items: center; color: black; pointer-events: all; cursor: pointer; } } .header-close { width: 20px; height: 100%; line-height: 100%; display: flex; align-items: center; color: black; pointer-events: all; cursor: pointer; } } .content { height: 102px; width: 240px; display: flex; align-items: center; .content { height: 102px; width: 240px; display: flex; align-items: center; .medium { height: 102px; width: 120px; margin-right: 10px; .medium { height: 102px; width: 120px; margin-right: 10px; > img, video, div { width: 100%; height: 100%; } } > img, video, div { width: 100%; height: 100%; } } .details { .label { font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 14px; color: black; line-height: 16px; margin-bottom: 2px; } .details { .label { font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 14px; color: black; line-height: 16px; margin-bottom: 2px; } .value { font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 14px; color: black; line-height: 16px; margin-bottom: 2px; } .value { font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 14px; color: black; line-height: 16px; margin-bottom: 2px; } .point { margin-bottom: 14px; } } } .point { margin-bottom: 14px; } } } } </style> 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
