forked from drone/command-center-dashboard

罗广辉
2025-04-17 9005ee603a22a063664fd5631a92d42c48669233
Merge remote-tracking branch 'origin/master'
5 files modified
124 ■■■■■ changed files
src/assets/images/aiNowFly/ending-high.png patch | view | raw | blame | history
src/hooks/useMapAggregation/useMapAggregation.js 37 ●●●● patch | view | raw | blame | history
src/hooks/useSingleDroneMap/useSingleDroneMap.js 10 ●●●● patch | view | raw | blame | history
src/views/Home/AINowFly.vue 31 ●●●●● patch | view | raw | blame | history
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue 46 ●●●●● patch | view | raw | blame | history
src/assets/images/aiNowFly/ending-high.png

src/hooks/useMapAggregation/useMapAggregation.js
@@ -2,13 +2,24 @@
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 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 offlineImg from '@/assets/images/home/useEventOperate/offline.png'
import onlineImg from '@/assets/images/home/useEventOperate/eventSingle.png'
// 机巢图标
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'
import { getCenterPoint } from '@/utils/cesium/mapUtil'
@@ -39,8 +50,6 @@
export const useMapAggregation = (type, status) => {
    const { flyTo } = cesiumOperation()
    const singleImg = type === 'device' ? onlineImg : eventSingle
  const offlinesingleImg = type === 'device' ? offlineImg : eventSingle
    const mergeImg = type === 'device' ? aggregationImg : eventAggregationImg
    const MapPopUpBox = type === 'device' ? DevicePopUpBox : EventPopUpBox
    const styleTransform = type === 'device' ? 'translateY(-50%)' : 'translate(-50%,-110%)'
@@ -136,7 +145,6 @@
    // 事件散点
    let eventList = []
    function processChildren(childrens) {
        // console.log(childrens, '事件点')
        return (childrens || []).map(item => {
            const arr = processChildren(item.childrens)
            if (item.data) {
@@ -195,6 +203,7 @@
        if (!areaCode) return
        saveParams.area_code = areaCode
        const list = type === 'device' ? await getDeviceCount(areaCode) : await getMapEventCount(saveParams)
        const splashedList =
            type === 'device'
                ? await getDeviceList(areaCode)
@@ -203,6 +212,7 @@
                        latitude: Number(i.latitude),
                        longitude: Number(i.longitude),
                        type: 'event',
          status: i.status
                  }))
        const hierarchy = convertToHierarchy(areaCode.slice(0, 6))
        const jsonPath = hierarchy.join('/')
@@ -292,6 +302,15 @@
    //散点机巢
    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}`,
@@ -308,9 +327,7 @@
                },
                billboard: {
          // singleImg
                    image: new Cesium.ConstantProperty(()=>{
            return item.status ==="OFFLINE" ? offlinesingleImg:singleImg
          }),
          image: new Cesium.ConstantProperty(image),
                    width: 24,
                    height: 24,
                },
@@ -495,8 +512,6 @@
    const singleMachineEvent = async click => {
        let clickTargets = viewer.scene.drillPick(click.position).map(item => item.id)
        if (!clickTargets.length) return
        // console.log(clickTargets, 11111)
        let deviceAggregationFind = findTypeItem(
            clickTargets,
src/hooks/useSingleDroneMap/useSingleDroneMap.js
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2025-04-15 22:41:40
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-04-16 22:26:26
 * @LastEditTime: 2025-04-17 15:05:32
 * @FilePath: \command-center-dashboard\src\hooks\useSingleDroneMap\useSingleDroneMap.js
 * @Description: 
 * 
@@ -75,7 +75,7 @@
      properties: {
        customData: {
          data: {
            type: 'single-drone-event'
            type: 'single-drone-position'
          }
        }
      }
@@ -168,13 +168,9 @@
    let clickedEntities = viewer?.scene.drillPick(click.position).map(item => item.id)
    console.log(clickedEntities, 1111111)
    if (!clickedEntities?.length) return
    currentEntity = findEntityByType(clickedEntities, 'single-drone-event')
    console.log(currentEntity, 1111111)
    removeLabel()
@@ -215,8 +211,6 @@
  const labelBoxRender = () => {
    if (!currentEntity) return
    let dom = document.querySelector('#mapPopUpBox')
    console.log(currentEntity.properties.customData, 4444)
    if (!dom) {
      dom = getLabelDom(currentEntity.properties.customData._value.data)
src/views/Home/AINowFly.vue
@@ -50,8 +50,8 @@
                    <el-checkbox v-model="item.checked" @change="handleItemCheck"/>
                </div>
                <div class="table-item">{{ item.nickname }}</div>
                <div class="table-item">{{ item.minute }}</div>
                <div class="table-item">{{ item.exe_distance }}</div>
                <div class="table-item">{{ item.minute }}(min)</div>
                <div class="table-item">{{ item.exe_distance }}(km)</div>
            </div>
        </div>
        <div class="btn-submit" @click="nowFly"><img src="@/assets/images/aiNowFly/fly.png" alt=""></div>
@@ -157,22 +157,22 @@
      label: {
        text: `预计${item.minute}分钟`,
                font: 'bold 16px Source Han Sans CN',  // 加粗并增大字号
              fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0),
                fillColor: Cesium.Color.WHITE,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                eyeOffset: new Cesium.Cartesian3(0, 0, -10),
                pixelOffset: new Cesium.Cartesian2(0, -10),
                rotation: Math.atan2(direction.y, direction.x)
              // fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0),
                // fillColor: Cesium.Color.WHITE,
                // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                // verticalOrigin: Cesium.VerticalOrigin.CENTER,
                // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                // eyeOffset: new Cesium.Cartesian3(0, 0, -10),
                // pixelOffset: new Cesium.Cartesian2(0, -10),
                rotation: 12.785398, // 修改旋转计算方式
      }
    })
        viewer.entities.add({
            id: `AINow-line-${index}`,
            polyline: {
                width: 4,
                width: 2,
                positions: positionsList,
                material: new Cesium.Color(27/255, 179/255, 255/255, 1.0),
                material: index === 0 ? new Cesium.Color(2/255, 192/255, 255/255, 1) : new Cesium.Color(27/255, 179/255, 255/255, 0.4),
                clampToGround: false,
            },
        })
@@ -416,7 +416,7 @@
        padding: 0 0 14px 11px;
    }
    .tabledata {
        height: 120px;
        min-height: 120px;
        border: 1px dashed #fff;
        margin: 0px 10px;
        .table-content {
@@ -424,13 +424,18 @@
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:not(:last-child) {
            border-bottom: 1px dashed #fff;
            }
        }
        .table-item {
            width: 100px;
            text-align: center;
            height: 32px;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
@@ -1,6 +1,6 @@
<template>
    <div class="event-overviewdetail-right" :class="{ isMore }">
        <CommonTitle title="事件概况" :style="{right: isMore?pxToRem(410):pxToRem(0)}" />
        <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" />
        <div class="content">
            <img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
@@ -70,15 +70,15 @@
                        class="eventListItemImg"
                        :src="getSmallImg(item.photo_url)"
                        alt=""
                        @click="getFindImgHistory(item.id)"
                        @click="getFindImgHistory(item)"
                    />
                    <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
                        <img :src="positioningImg" alt="" title="点击定位" />
                        <div class="address">{{ item.address }}</div>
                        <!-- <div class="address">{{ item.address }}</div> -->
                    </div>
                    <div class="eventListItemText">
                        <div class="eventListItemName">{{ item.event_name }}</div>
                        <div class="eventListItemTime">{{ item.create_time }}</div>
                        <div class="eventListItemTime">{{ dayjs(item.create_time).format('MM/DD HH:mm') }}</div>
                    </div>
                </div>
            </div>
@@ -96,7 +96,7 @@
            </div>
        </div>
    </div>
    <div class="image-list" v-if="isShowBigImg">
    <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore?pxToRem(840):pxToRem(460) }">
        <div class="title">
            <img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt="">
        </div>
@@ -195,10 +195,18 @@
    })
}
const { flyTo } = cesiumOperation()
const longitudeOffset = ref(0);
const positioning = row => {
    const longitude = Number(row.longitude)
    const latitude = Number(row.latitude)
    flyTo({ longitude, latitude }, 1, 1000)
    // ismore 单独点击定位和未展开都为0 ismore为false 展开大图 值为0.004 ismore=true & isShowBigImg=true 展开大图 值为0.005
    if (isMore.value) {
        longitudeOffset.value = isShowBigImg.value ? 0.005 : 0.003
    }
    if (!isMore.value) {
        longitudeOffset.value = isShowBigImg.value ? 0.003 : 0;
    }
    flyTo({ longitude: longitude + longitudeOffset.value, latitude }, 1, 1000);
}
// 事件状态+数量
@@ -271,13 +279,16 @@
const clickImgSrc = ref('');
const selectedImgIndex = ref(0);
// 点击图片放大 显示详细信息
const getFindImgHistory = (id) => {
    findImgHistory(id).then((res) => {
const getFindImgHistory = (item) => {
    // 下半部分隐藏 右侧隐藏
    isShowBigImg.value = true
    store.commit('setHideBottomIcon', false)
    findImgHistory(item.id).then((res) => {
        if (res.data.code !== 0) return
        imageList.value = res.data.data
        clickImgSrc.value = res.data.data[0]?.url;
        isShowBigImg.value = true
    })
    positioning(item);
}
// 点击周期
const clickWeekTime = (item,index) => {
@@ -529,11 +540,11 @@
}
.image-list {
    position: absolute;
    left: 40%;
    transform: translate(-40%);
    bottom: 218px;
    width: 524px;
    height: 382px;
    z-index: 10;
    right: 460px;
    top: 122px;
    width: 800px;
    height: 600px;
    background: #0F1929;
    box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
    border-radius: 0px 0px 0px 0px;
@@ -551,15 +562,16 @@
        }
    }
    .content {
        width: 475px;
        height: 231px;
        width: 740px;
        height: 440px;
        box-shadow: 1px 3px 6px 0px rgba(81,168,255,0.58);
        border-radius: 20px 20px 20px 20px;
        border-image: linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1)) 2 2;
        margin: 28px 28px;
        img {
            width: 100%;
            height: 230px;
            height: 100%;
            border-radius: 20px 20px 20px 20px;
        }
    }
    .card {