头部UI以及轨迹直播页面部分改动

src/api/task/index.js

@@ -84,6 +84,17 @@ export function getTrackList(id) {
     method: 'GET'
   })
 }
+/**
+ * @description: 获取航线列表
+ * @param {*} id 任务id
+ * @return {*}
+ */
+export function getLineList(id) {
+  return request({
+    url: `/inspection/line/track/${id}`,
+    method: 'GET'
+  })
+}
 /**
  * @description: 获取问题列表
  * @param {*} params

src/layout/components/Header/index.vue

@@ -1,7 +1,8 @@
 <template>
   <n-layout-header class="layout__header" bordered>
-    <div class="header__logo">
-      <n-image height="18" src="/logo.png" preview-disabled />
+    <div class="header__title">
+      <n-image width="42" height="42" src="/logo.png" preview-disabled />
+      <span class="header__name">{{ platFormTitle }}</span>
     </div>
 
     <n-dropdown trigger="hover" :options="options" @select="handleSelect">
@@ -24,11 +25,11 @@ import { EditOutlined, LogoutOutlined } from '@vicons/antd'
 import { renderIcon } from '@/utils'
 import { useUserStore } from '@/store/modules/user.js'
 import { useSettingStore } from '@/store/modules/setting.js'
+import setting from '@/setting/config.js'
 export default defineComponent({
   name: 'LayoutHeader',
   setup() {
     const router = useRouter()
-
     const userStore = useUserStore()
     const settingStore = useSettingStore()
     const data = reactive({
@@ -43,7 +44,8 @@ export default defineComponent({
           key: 'out',
           icon: renderIcon(LogoutOutlined)
         }
-      ]
+      ],
+      platFormTitle: setting.title
     })
 
     const getUserInfo = computed(() => {
@@ -81,12 +83,22 @@ export default defineComponent({
 <style scoped>
 .layout__header {
   padding: 0 20px;
+  background: #36475D;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.header__logo{
-  height: 18px;
+.header__title{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.header__name {
+  font-size: 18px;
+  font-family: Noto Sans SC-Bold, Noto Sans SC;
+  font-weight: bold;
+  color: #FFFFFF;
+  margin-left: 16px;
 }
 .user_msg {
   display: flex;
@@ -99,4 +111,7 @@ export default defineComponent({
   height: 30px;
   margin-right: 10px;
 }
+.user_name {
+  color: #fff;
+}
 </style>

src/views/task-manage/all-task/components/DemandDrawer.vue

@@ -82,9 +82,20 @@ export default defineComponent({
       trackLayer: null,
       trackInfo: null,
       // 轨迹数据
-      trackList: [],
-      disdance: null,
-      animating: null,
+      trackList: [
+        { lng: '118.765591', lat: '32.050993' },
+        { lng: '118.665591', lat: '32.150993' },
+        { lng: '118.565591', lat: '32.070993' },
+        { lng: '118.465591', lat: '32.020993' },
+        { lng: '118.365591', lat: '32.110993' },
+        { lng: '118.265591', lat: '32.080993' },
+        { lng: '118.165591', lat: '32.150993' },
+        { lng: '118.765591', lat: '32.150993' },
+        { lng: '118.66551', lat: '32.050993' },
+        { lng: '118.365591', lat: '32.060993' },
+        { lng: '118.265591', lat: '32.180993' },
+        { lng: '118.165591', lat: '32.050993' }
+      ],
       detailData: {
         videoUrl: 'http://vod.play.t-aaron.com/228e844c4d18476b82627a54ccf7f4ec/1796b49c9df546ceabe30cda01ebb792-59f1f8c925e0817f19545b7d28f4eea9-fd.mp4',
         aiVideoUrl: 'http://vod.play.t-aaron.com/228e844c4d18476b82627a54ccf7f4ec/1796b49c9df546ceabe30cda01ebb792-59f1f8c925e0817f19545b7d28f4eea9-fd.mp4'
@@ -120,7 +131,7 @@ export default defineComponent({
         width: '400px',
         height: '324px',
         autoplay: false,
-        source: data.detailData.videoUrl
+        source: props.data.videoUrl
       }
     })
     /* 获取AI视频地址 */
@@ -130,7 +141,7 @@ export default defineComponent({
         width: '400px',
         height: '324px',
         autoplay: false,
-        source: data.detailData.aiVideoUrl
+        source: props.data.aiVideoUrl
       }
     })
     const videoRef = ref(null)
@@ -204,22 +215,34 @@ export default defineComponent({
     const getTrackData = async function() {
       const res = await getTrackList(props.data.id)
       const trackList = res.data
+      data.trackList = trackList
+      // const trackList = data.trackList
       return Promise.resolve({
         trackList
       })
     }
 
-    watch([() => data.videoStatus], ([status]) => {
+    watch(() => data.videoStatus, (status) => {
       if (status.status === 'ready' && status.aiStatus === 'ready') {
         startAllVideo()
-        initMap()
-        getTrackData().then(res => {
-          if (res.trackList.length > 0) {
-            initTrack(formatTradeList(res.trackList), 'route')
-          }
-        })
       }
     }, { deep: true })
+    watch(() => props.visible, (value) => {
+      if (value) {
+        if (document.getElementById('history-map')) {
+          initMap()
+        } else {
+          setTimeout(() => {
+            initMap()
+            getTrackData().then(res => {
+              if (res.trackList.length > 0) {
+                initTrack(formatTradeList(res.trackList), 'route')
+              }
+            })
+          }, 500)
+        }
+      }
+    })
 
     /* 初始化地图 */
     const initMap = function() {
@@ -295,11 +318,10 @@ export default defineComponent({
       data.mapData.addLayer(vectorLayer)
       data.mapView.fit(route, { padding: [50, 50, 50, 50] })
       vectorLayer.on('postrender', moveFeature.bind())
-
       function moveFeature(event) {
         /* 计算飞行的百分比 */
-        var distance = data.videoInfo.currentTime / data.videoInfo.duration
-        const currentCoordinate = route.getCoordinateAt(distance)
+        const percent = data.videoInfo.currentTime / data.videoInfo.duration
+        const currentCoordinate = route.getCoordinateAt(percent)
         position.setCoordinates(currentCoordinate)
         geoMarker.setGeometry(null)
         const vectorContext = getVectorContext(event)

src/views/task-manage/all-task/components/LiveDrawer.vue

@@ -54,7 +54,7 @@ import { getVectorContext } from 'ol/render'
 import VectorContext from 'ol/render/VectorContext'
 import * as control from 'ol/control'
 import { styleList } from '../tools/style.js'
-import { getTrackList } from '@/api/task/index.js'
+import { getTrackList, getLineList } from '@/api/task/index.js'
 
 // 视频组件
 import VideoPlayer from '@/components/VideoPlayer/index.vue'
@@ -99,7 +99,6 @@ export default defineComponent({
         { lng: '118.265591', lat: '32.180993' },
         { lng: '118.165591', lat: '32.050993' }
       ],
-      addIndex: 0,
       // 轨迹数据
       trackList: [
         { lng: '118.765591', lat: '32.050993' },
@@ -153,6 +152,17 @@ export default defineComponent({
     const getTrackData = async function() {
       const res = await getTrackList(props.data.id)
       const trackList = res.data
+      data.trackList = trackList
+      return Promise.resolve({
+        trackList
+      })
+    }
+
+    /* 获取航线数据 */
+    const getLineData = async function() {
+      const res = await getLineList(props.data.id)
+      const trackList = res.data
+      data.lineTrajectoryList = trackList
       return Promise.resolve({
         trackList
       })
@@ -164,7 +174,11 @@ export default defineComponent({
           if (document.getElementById('live-map')) {
             initMap()
             // 加载机场航线
-            // initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute')
+            getLineData().then(({ trackList }) => {
+              if (trackList.length > 0) {
+                initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute')
+              }
+            })
             // 加载历史轨迹和实时轨迹
             getTrackData().then(({ trackList }) => {
               if (trackList.length > 0) {
@@ -175,12 +189,15 @@ export default defineComponent({
             setTimeout(() => {
               initMap()
               // 加载机场航线
-              // initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute')
+              getLineData().then(({ trackList }) => {
+                if (trackList.length > 0) {
+                  initTrack(formatTradeList(trackList), 'lineTrackLayer', 'lineRoute')
+                }
+              })
               // 加载历史轨迹和实时轨迹
               getTrackData().then(({ trackList }) => {
-                data.trackList = trackList
                 if (trackList.length > 0) {
-                  setLiveTrack(formatTradeList(data.trackList))
+                  setLiveTrack(formatTradeList(trackList))
                 }
               })
             }, 500)
@@ -241,36 +258,50 @@ export default defineComponent({
         geometry: new Point(route.getLastCoordinate())
       })
       const position = endMarker.getGeometry().clone()
-      const geoMarker = new Feature({
-        type: 'geoMarker',
-        geometry: position
-      })
-      geoMarker.setProperties({ type: 'geoMarker' }, false)
-      if (data.liveTrackLayer) {
-        data.liveTrackLayer.setSource(
-          new VectorSource({
-            features: [geoMarker, routeFeature]
+      if (routeType === 'route') { // 轨迹数据
+        const geoMarker = new Feature({
+          type: 'geoMarker',
+          geometry: position
+        })
+        geoMarker.setProperties({ type: 'geoMarker' }, false)
+        if (data.liveTrackLayer) {
+          data.liveTrackLayer.setSource(
+            new VectorSource({
+              features: [geoMarker, routeFeature]
+            })
+          )
+          vectorLayer = data.liveTrackLayer
+        } else {
+          vectorLayer = new VectorLayer({
+            source: new VectorSource({
+              features: [geoMarker, routeFeature]
+            }),
+            style: function(feature) {
+              return styleList[feature.get('type')]
+            }
           })
-        )
-        vectorLayer = data.liveTrackLayer
-      } else {
+        }
+        data[layer] = vectorLayer
+        data.mapData.addLayer(data[layer])
+        data.view.fit(route, { padding: [50, 50, 50, 50] })
+        return {
+          vectorLayer,
+          geoMarker,
+          route,
+          position
+        }
+      } else { // 航线数据
         vectorLayer = new VectorLayer({
           source: new VectorSource({
-            features: [geoMarker, routeFeature]
+            features: [routeFeature]
           }),
           style: function(feature) {
             return styleList[feature.get('type')]
           }
         })
-      }
-      data[layer] = vectorLayer
-      data.mapData.addLayer(data[layer])
-      data.view.fit(route, { padding: [50, 50, 50, 50] })
-      return {
-        vectorLayer,
-        geoMarker,
-        route,
-        position
+        data[layer] = vectorLayer
+        data.mapData.addLayer(data[layer])
+        data.view.fit(route, { padding: [50, 50, 50, 50] })
       }
     }
 
@@ -301,30 +332,17 @@ export default defineComponent({
 
       // 两秒钟获取一次数据
       data.socket = setInterval(() => {
-      // getTrackdata({ inspectionId: id }).then((res) => {
-        // const coordinate = fromLonLat([res.data.lng, res.data.lat])
-        // const unUseableCoordinate = !coordinate.every((item) => !isNaN(item))
-        // if (unUseableCoordinate) return
-        // data.trackList.push(coordinate)
-        // if (data.trackList.length > 1 && !data.trackInfo) {
-        //   initTrack(data.trackList)
-        // }
-        // if (data.trackInfo) {
-        //   data.trackInfo.route.appendCoordinate(coordinate)
-        //   data.trackInfo.vectorLayer.getSource().changed()
-        //   data.trackInfo.position.setCoordinates(coordinate)
-        // }
-      // })
-        const obj = data.lineTrajectoryList[data.addIndex]
-        const coordinate = fromLonLat([obj.lng, obj.lat])
-        console.log(coordinate)
-        data.addIndex = data.addIndex + 1
-        if (data.trackInfo) {
-          data.trackInfo.route.appendCoordinate(coordinate)
-          data.trackInfo.vectorLayer.getSource().changed()
-          data.trackInfo.position.setCoordinates(coordinate)
-        }
+        getTrackData().then(({ trackList }) => {
+          const obj = trackList[0]
+          const coordinate = fromLonLat([obj.lng, obj.lat])
+          if (data.trackInfo) {
+            data.trackInfo.route.appendCoordinate(coordinate)
+            data.trackInfo.vectorLayer.getSource().changed()
+            data.trackInfo.position.setCoordinates(coordinate)
+          }
+        })
       }, 1000)
+
       // 移动要素
       const moveFeature = function(event) {
         var lastTime
@@ -356,12 +374,18 @@ export default defineComponent({
       }
     }
 
+    /* 视频窗口展开收起 */
+    const showVideo = function(value) {
+      data.videoShow = value
+    }
+
     return {
       ...toRefs(data),
       getDrawerOptions,
       handleDrawerColse,
       getVideoOptions,
-      getVideoLiveOptions
+      getVideoLiveOptions,
+      showVideo
     }
   }
 })

src/views/task-manage/all-task/tools/table.js

@@ -193,8 +193,8 @@ const data = reactive({
                 text: true,
                 onClick: handleTaskLive.bind(null, row)
               },
-              auth: 'basic_list'
-              // show: row.status === 2
+              auth: 'basic_list',
+              show: row.status === 2
             },
             {
               label: '轨迹',

src/views/task-manage/question/index.vue

@@ -53,7 +53,7 @@ export default {
       search,
       ...toRefs(table),
       pageData: [],
-      isReported: props.data?.reportStatus === 1 || false
+      isReported: props.data?.reportStatus === 0 || false
     })
 
     /**