feat:事件工单滚动条

张含笑

2025-08-05 c832bf2e80ac465e71b7a1c1f7a59d4252030989

 src/views/job/components/DeviceJobDetailsMap.vue

@@ -1,90 +1,45 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-05-26 17:30:33
 * @LastEditors  : yuan
 * @LastEditTime : 2025-06-10 15:46:18
 * @FilePath     : \src\views\job\components\DeviceJobDetailsMap.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-05-26 17:30:33
-->
<template>
   <div id="deviceJobDetailsMap" class="ztzf-cesium" />
   <div id="deviceJobDetailsMap" class="ztzf-cesium">
      <PlanarRouteLineList :curRouteLineData="curRouteLineData" @routeLineListClick="routeLineListClick" />
   </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/task/arrow-right-blue.png'
// import rwqfdImg from '@/assets/images/task/rwqfd.png'
import rwqfdImg from '@/assets/map_images/Startingpointicon.png'
import endPointImg from '@/assets/images/task/EndPointicon.png'
import { flyVisual } from '@/utils/cesium/mapUtil'
import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'

import { PublicCesium } from '@/utils/cesium/publicCesium'

const props = defineProps(['detailsData'])

import { useRouteLine } from '@/hooks/useRouteLine/useRouteLine.js'

// 加载航线hook
const { curRouteLineData, routeLineListClick, initViewer, renderPreviewLine } = useRouteLine()


let viewer = null
const initMap = () => {
   viewer = new PublicCesium({ dom: 'deviceJobDetailsMap' }).getViewer()
}

// 渲染线和点
const renderingLine = (lineObj,startPoint) => {
   const positions = lineObj.Placemark.map(item => {
      const [lon, lat] = item.Point.coordinates.split(',')
      return Cartesian3.fromDegrees(Number(lon), Number(lat))
   })
   // 向前插入起飞点
   positions.unshift(Cartesian3.fromDegrees(startPoint[0], startPoint[1]))
   // 起点
   viewer.entities.add({
      position: positions[0],
      billboard: {
         image: new Cesium.ConstantProperty(rwqfdImg),
         width: 30,
         height: 30,
      },
   })
   // 终点
   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 analysis = async item => {
   return new Promise(async resolve => {
      const res = await analyzeKmzFile(`${item.url}?_t=${new Date().getTime()}`)
      const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
      const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document']
      const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
      resolve({ waylinesXMLObj, takeOffRefPoint:[item.longitude,item.latitude] })
   })
   initViewer(viewer)
}

// 绘制线和飞行
const drawLine = async () => {
   const res = await Promise.all(props.detailsData.way_lines.map(item => analysis(item)))
   // 渲染线
   res.forEach(({ waylinesXMLObj,takeOffRefPoint }) => renderingLine(waylinesXMLObj,takeOffRefPoint))
   // 收集所有起飞点
   const allTakeOffRefPoint = props.detailsData.way_lines.map(item => ([item.longitude,item.latitude]))
   // 收集所有点包括起飞点
   const allPoint = res.flatMap(({ waylinesXMLObj }) => waylinesXMLObj.Placemark)
      .map(item => item.Point.coordinates.split(',')).concat(allTakeOffRefPoint)
   flyVisual(allPoint, viewer,4)
   Promise.all(
      props.detailsData.way_lines.map(
         async item => await renderPreviewLine(`${item.url}?_t=${new Date().getTime()}`, item.wayline_type)
      )
   )
}

const removeMap = () => {
@@ -113,6 +68,7 @@
</script>
<style scoped lang="scss">
#deviceJobDetailsMap {
   position: relative;
   height: 100%;
}
</style>