feat: 当前任务详情调整

罗广辉

2025-04-14 4144b687e5001ccad52f118e9fcd3f91609e87c4

feat: 当前任务详情调整

 src/components/LiveVideo.vue

@@ -20,6 +20,7 @@
let liveVideoRef = ref(null);

const play = (url) => {
    pause();
  webrtcPlayer = new window.ZLMRTCClient.Endpoint({
    element: liveVideoRef.value, // video 标签
    debug: true, // 是否打印日志
@@ -73,6 +74,7 @@
    )
};

// 销毁
const pause = () => {
  if (webrtcPlayer) {
    webrtcPlayer.close();
@@ -84,7 +86,6 @@
  (newValue) => {
    if (!newValue) return;
    nextTick(() => {
      pause();
      play(newValue);
    });
  },
@@ -92,6 +93,10 @@
    immediate: true
  }
);

onBeforeUnmount(() => {
    pause()
})

onMounted(() => {
  if (props.videoUrl) {
@@ -113,4 +118,4 @@
    object-fit: cover;
  }
}
</style>
</style>

 src/utils/cesium/mapUtil.js

@@ -347,3 +347,22 @@
        return true
    }
}

/**
 * 飞到中心点并且所有点在可视范围
 * @param lngLatArr
 * @param viewer
 * @param rangeMultiple 范围倍数越大飞的越高默认2
 */
export function flyVisual(lngLatArr,viewer,rangeMultiple = 2) {
    if (!Array.isArray(lngLatArr) || lngLatArr.length === 0) return
    const positions = lngLatArr.map(([lon, lat]) =>
        Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat))
    )
    // 计算包围盒 BoundingSphere（所有点的外接球）
    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
    viewer.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0,
        offset: new Cesium.HeadingPitchRange(0, 0, boundingSphere.radius * rangeMultiple),
    })
}

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -68,13 +68,7 @@
                <div class="eventListItem" v-for="item in list">
                    <img
                        class="eventListItemImg"
                        :src="
                            item.photo_url
                                ? item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) +
                                  '_small' +
                                  item.photo_url.substring(item.photo_url.lastIndexOf('.'))
                                : ''
                        "
                        :src="getSmallImg(item.photo_url)"
                        alt=""
                    />
                    <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
@@ -138,6 +132,10 @@
    current: 1,
    size: 8,
})

const getSmallImg = (url) => {
    return url ? url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.')) : ''
}

const isMore = ref(false)
const leftArrowFun = () => {
@@ -234,7 +232,7 @@
    }
    getEventPage(params.value, pageParams).then(res => {
        const resData = res.data.data
        list.value = resData?.records || []
        list.value = (resData?.records || [])
        total.value = resData.total
    })
}
@@ -280,7 +278,7 @@

        .leftArrow {
            position: absolute;
            left: 0;
            left: -11px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;

 src/views/SignMachineNest/MachineRight/MachineMonitor.vue

@@ -49,4 +49,4 @@
    justify-content: space-between;
    padding: 12px 10px 0;
 }
</style>
</style>

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue

@@ -8,44 +8,12 @@
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/arrow-right-blue.png'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
import endPointImg from '@/assets/images/EndPointicon.png'
import { addBlueFilter } from '@/utils/cesium/common'
import { flyVisual } from '@/utils/cesium/mapUtil'

const props = defineProps(['detailsData'])


const filterLayer = (options,viewer) => {
    const { bInvertColor, bFilterColor, filterColor } = options
    const color = new Cesium.Color.fromCssColorString(filterColor)
    const filterRGB = [
        Math.round(color.red * 255),
        Math.round(color.green * 255),
        Math.round(color.blue * 255)
    ]
    let fragShader = viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources
    for (let i = 0; i < fragShader.length; i++) {
        const strS = 'color = czm_saturation(color, textureSaturation);\n#endif\n'
        let strT = 'color = czm_saturation(color, textureSaturation);\n#endif\n'
        if (bInvertColor) {
            strT += `
          color.r = 1.0 - color.r;
          color.g = 1.0 - color.g;
          color.b = 1.0 - color.b;
        `
        }
        if (bFilterColor) {
            strT += `
          color.r = color.r * ${filterRGB[0]}.0/255.0;
          color.g = color.g * ${filterRGB[1]}.0/255.0;
          color.b = color.b * ${filterRGB[2]}.0/255.0;
        `
        }
        fragShader[i] = fragShader[i].replace(strS, strT)
    }
}


const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
    url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -131,20 +99,6 @@
    })
}

// 飞到中心点
function flyToPoints(lngLatArr) {
    if (!Array.isArray(lngLatArr) || lngLatArr.length === 0) return
    const positions = lngLatArr.map(([lon, lat]) =>
        Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat))
    )
    // 计算包围盒 BoundingSphere（所有点的外接球）
    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
    viewer.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0,
        offset: new Cesium.HeadingPitchRange(0, 0, boundingSphere.radius * 2),
    })
}

// 异步解析kmz文件
const analysis = async url => {
    return new Promise(async resolve => {
@@ -160,11 +114,10 @@
const drawLine = async () => {
    const res = await Promise.all(props.detailsData.way_lines.map(item => analysis(item.url)))
    res.map(item => renderingLine(item))
    console.log(res,'jiexi')
    const allPoint = res
        .flatMap(item => item.Placemark)
        .map(item => item.Point.coordinates.split(','))
    flyToPoints(allPoint)
    flyVisual(allPoint,viewer)
}

const removeMap = () => {

 src/views/SignMachineNest/SignMachineNest.vue

@@ -6,7 +6,7 @@
<script setup>
import MachineLeft from '@/views/SignMachineNest/MachineLeft/MachineLeft.vue'
import MachineRight from '@/views/SignMachineNest/MachineRight/MachineRight.vue';
import { useConnectWebSocket } from '../../utils/websocket/connect-websocket';
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket';
import { getWebsocketUrl } from '@/websocket/util/config';
import { EBizCode } from '@/utils/staticData/enums.js';
import { EModeCode } from '@/utils/staticData/device.js';

 src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue

File was deleted

 src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/CurrentTaskDetails.vue

New file
@@ -0,0 +1,104 @@
<!--当前任务详情-->
<template>
  <el-dialog
        modal-class="current-task-details"
        v-model="isShow"
        title="当前任务详情"
        :width="pxToRem(1500)"
        :close-on-click-modal="false"
        :destroy-on-close="true">
        <div class="content-container" v-if="isShow">
      <!-- 视频直播 -->
      <div class="video-container">
        <LiveVideo :videoUrl="machineNestUrl"/>
      </div>
            <!-- 展示地图 -->
            <RealTimeMap />
    </div>
  </el-dialog>
</template>

<script setup>
import { pxToRem } from '@/utils/rem';
import LiveVideo from '@/components/LiveVideo.vue';
import { liveStart } from '@/api/home/machineNest';
import { getJobDetails } from '@/api/home/task';

import RealTimeMap from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/RealTimeMap.vue'
import { getWebsocketUrl } from '@/websocket/util/config'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'


const isShow = defineModel('show');
const props = defineProps({
  rowData: { // 任务列表row数据
    type: Object,
    default: () => ({})
  }
});
let taskDetails = ref({})
const machineNestUrl = ref('');
provide('taskDetails', taskDetails);

// 获取机巢直播地址
const getVideoUrl = (deviceSn) => {
  liveStart(deviceSn).then(res => {
    if (res.data.code !== 0) return;
    machineNestUrl.value = res.data.data.rtcs_url;
  });
};
// 获取任务详情获取航线文件
const getTaskDetails = () => {
    getJobDetails({ wayLineJobInfoId: props.rowData.id }).then(res => {
        taskDetails.value = res.data.data
        getVideoUrl(taskDetails.value.device_sns[0]);
        console.log('taskDetails', taskDetails.value)
        createWsConnect(taskDetails.value.way_lines[0].workspace_id)
    })
}
const messageHandler = (result) => {
    let payload = JSON.parse(result) // 为了兼容聊天消息
    console.log('result,6666666', payload)
}
let connectWs
const createWsConnect = (workspaceId) => {
    let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId;
    // 监听ws 消息
    connectWs = useConnectWebSocket(messageHandler, webSocketUrl);
};


// 监听 rowData 变化
watch(isShow, (newVal) => {
  if (newVal) {
    getTaskDetails();
  }else{
        connectWs?.close();
    }
});

onBeforeUnmount(() => {
    connectWs?.close();
})

onMounted(() => {
});
</script>

<style lang="scss" scoped>
.current-task-details {
  display: flex;
  justify-content: space-between;
  .content-container {
    display: flex;
    // gap: 20px;
    height: 600px;

    .video-container {
      width: 50%;
      padding-right: 10px;
    }
  }

}
</style>

 src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/RealTimeMap.vue

New file
@@ -0,0 +1,175 @@


<template>
    <div id="currentTaskMap">


    </div>
</template>
<script setup>

import * as Cesium from 'cesium'
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import endPointImg from '@/assets/images/EndPointicon.png'
import startPointImg from '@/assets/images/Startingpointicon.png'
import { addBlueFilter } from '@/utils/cesium/common'
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/arrow-right-blue.png'
import { flyVisual } from '@/utils/cesium/mapUtil'

const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
    url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    layer: 'tdtVecBasicLayer',
    style: 'default',
    format: 'image/png',
    tileMatrixSetID: 'GoogleMapsCompatible',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    maximumLevel: 18,
    tilingScheme: new AmapMercatorTilingScheme(),
    credit: 'amap_SL',
})
let viewer = null
const initMap = () => {
    viewer = new Viewer('currentTaskMap', {
        terrain: Terrain.fromWorldTerrain(),
        infoBox: false, // 禁用沙箱，解决控制台报错
        animation: false, // 左下角的动画仪表盘
        baseLayerPicker: false, // 右上角的图层选择按钮
        geocoder: false, // 搜索框
        homeButton: false, // home按钮
        sceneModePicker: false, // 模式切换按钮
        timeline: false, // 底部的时间轴
        navigationHelpButton: false, // 右上角的帮助按钮，
        selectionIndicator: false, // 是否显示选择指示器
        baseLayer: false,
        fullscreenButton: false,
    })
    const gdLayer = viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
    const options = {
        bInvertColor: true,
        bFilterColor: true,
        filterColor: '#4e70a6'
    }
    // 添加蓝色滤镜
    addBlueFilter(options,viewer,gdLayer)
    viewer.scene.morphTo2D(0)
    //设置默认点
    viewer.camera.setView({
        destination: Cartesian3.fromDegrees(115.763819, 28.787374,5000),
    })
}


const drawWayline = lineObj => {
    const positions = lineObj.Placemark.map(item => {
        const [lon, lat] = item.Point.coordinates.split(',')
        return Cartesian3.fromDegrees(Number(lon), Number(lat))
    })
    // 起点
    viewer.entities.add({
        position: positions[0],
        billboard: {
            image: new Cesium.ConstantProperty(rwqfdImg),
            width: 70,
            height: 70,
        },
    })
    // 终点
    viewer.entities.add({
        position: positions[positions.length-1],
        billboard: {
            image: new Cesium.ConstantProperty(endPointImg),
            width: 30,
            height: 30,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
        },
    })
    // 路径线
    viewer.entities.add({
        polyline: {
            width: 4,
            positions: positions,
            material: new ImageTrailMaterial({
                color: { alpha: 1, blue: 1, green: 1, red: 1 },
                speed: 20,
                image: lineImg,
                repeat: { x: Math.floor(40), y: 1 },
            }),
            clampToGround: false,
        },
    })
}


// 解析kmz文件
const parsingFiles = async (url) => {
    const res = await analyzeKmzFile(`${url}?_t=${new Date().getTime()}`)
    const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
    const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document'];
    const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
    if (!waylinesXMLObj.Placemark.length) return;
    const allPoint = waylinesXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
    flyVisual(allPoint,viewer)
    drawWayline(waylinesXMLObj)
};

const removeMap = () => {
    viewer.entities.removeAll()
    viewer.destroy()
}

const taskDetails = inject('taskDetails')

watch(taskDetails, () => {
    if (taskDetails.value.way_lines.length){
        parsingFiles(taskDetails.value.way_lines[0].url)
    }
})

onBeforeUnmount(() => {
    removeMap()
})

onMounted(() => {
    nextTick(() => {
        initMap()
    })
})

</script>
<style scoped lang="scss">
#currentTaskMap {
    width: 50%;
    padding-left: 10px;
    height: 100%;
    :deep() {
        .cesium-viewer {
            width: 100%;
            height: 100%;
            overflow: hidden;

            .cesium-viewer-cesiumWidgetContainer {
                width: 100%;
                height: 100%;

                .cesium-widget {
                    width: 100%;
                    height: 100%;

                    canvas {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .cesium-viewer-bottom {
            display: none;
        }
    }
}
</style>

 src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -19,9 +19,9 @@
        <el-table-column prop="ai_type_str" label="关联算法" show-overflow-tooltip />
        <el-table-column label="任务状态" >
          <template #default="scope">
            <span :style="{ 
              color: scope.row.status === 1 ? '#e36913' : 
                     scope.row.status === 2 ? '#ffc398' : 
            <span :style="{
              color: scope.row.status === 1 ? '#e36913' :
                     scope.row.status === 2 ? '#ffc398' :
                     scope.row.status === 3 ? '#afd9fb' :
                     scope.row.status === 4 ? '#11c4ff' : '8cfea7'
            }">
@@ -65,8 +65,9 @@
<script setup>
import SearchBox from '../SearchBox.vue';
import AddTask from './AddTask.vue';
import CurrentTaskDetails from './CurrentTaskDetails.vue';
import CurrentTaskDetails from './CurrentTaskDetails/CurrentTaskDetails.vue';
import { jobList } from '@/api/home/task';
import { ElMessage } from 'element-plus'

const jobListParams = reactive({
  current: 1,
@@ -100,8 +101,12 @@
let isShowCurrentTaskDetails = ref(false);
let rowData = ref({});
const handleDetail = (row) => {
  isShowCurrentTaskDetails.value = true;
  rowData.value = row? row : {};
    if (row.device_sns.length === 1){
        isShowCurrentTaskDetails.value = true;
        rowData.value = row? row : {};
    }else{
        ElMessage.warning('即将跳转到集群调度');
    }
};

// 分页大小改变
@@ -122,7 +127,7 @@
  jobListParams.size = 10;
  jobListParams.searchParams = params;
  // 存储查询条件 ，用于统计图搜索
  

  getJobList();
};


 src/views/TaskManage/TaskIntermediateContent/initPlanarWayline.js

 src/views/TaskManage/TaskIntermediateContent/initPointWayline.js

File was deleted