实时轨迹优化

Web/src/components/deviceLive/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="deviceLive">
     <div class="deviceLive-frames">
-      <LivePlayer :url="state.playerUrl" />
+      <LivePlayer :text="state.playerText" :url="state.playerUrl" />
     </div>
     <div class="deviceLive-operation">
       <a-select style="width:150px;margin-right: 13px;" placeholder="摄像头" v-model:value="state.cameraValue">
@@ -73,6 +73,7 @@ interface State {
   videoValue?: string,
   clarityValue: number,
   videoId: string,
+  playerText: string,
   playerUrl: string,
 }
 
@@ -83,6 +84,7 @@ const state: State = reactive({
   videoValue: undefined,
   clarityValue: 0,
   videoId: '',
+  playerText: '',
   playerUrl: '',
 })
 
@@ -91,7 +93,8 @@ const fetchLiveCapacity = async () => {
     const res = await getLiveCapacity({});
     if (res.code === 0) {
       const deviceInfo = res.data.filter((item: any) => item.sn === props.sn)[0];
-      const cameraList = deviceInfo.cameras_list.map((item: any) => {
+      const cameras_list = deviceInfo.cameras_list || [];
+      const cameraList = cameras_list.map((item: any) => {
         return {
           label: item.name,
           value: item.index,
@@ -101,8 +104,7 @@ const fetchLiveCapacity = async () => {
       state.cameraList = cameraList;
     }
   } catch (e: any) {
-    message.destroy();
-    message.error(e);
+    console.error(e);
   }
 }
 
@@ -149,12 +151,16 @@ const onStart = async () => {
       url_type: 1,// RTMP 
       video_quality: state.clarityValue
     });
-    const playerUrl = res.data.url
-    state.playerUrl = playerUrl;
-    message.success('已开启直播');
+    if (res.code !== 0) {
+      state.playerText = res.message;
+    } else {
+      const playerUrl = res.data.url;
+      state.playerText = '';
+      state.playerUrl = playerUrl;
+      message.success('已开启直播');
+    }
   } catch (e: any) {
-    message.destroy();
-    message.error(e);
+    console.error(e);
   }
 }
 

Web/src/components/livePlayer/index.vue

@@ -1,11 +1,17 @@
 <template>
-    <LivePlayer alt=" " :live="true" :hide-big-play-button="true" :hide-stretch-button="true" :video-url="url" />
+    <div class="player">
+        <div class="player-text">
+            {{ text }}
+        </div>
+        <LivePlayer alt=" " :live="true" :hide-big-play-button="true" :hide-stretch-button="true" :video-url="url" />
+    </div>
 </template>
 
 <script lang="ts" setup>
 import LivePlayer from '@liveqing/liveplayer-v3'
 
 interface Props {
+    text: string,
     url: string,
 };
 
@@ -14,4 +20,19 @@ const props = withDefaults(defineProps<Props>(), {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.player {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &-text {
+        color: #FFFFFF;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+    }
+}
+</style>

Web/src/hooks/use-g-map-trajectory.ts

@@ -115,54 +115,54 @@ export function useGMapTrajectory() {
       strokeWeight: 6,//线宽
       strokeStyle: 'solid',
     })
-    const serialList = list.filter((item) => item.type === 1);
-    // 序号
-    const text = serialList.map((item, index) => {
-      return new AMap.Text({
-        position: new AMap.LngLat(item.paths[0], item.paths[1]),
-        offset: new AMap.Pixel(-8, -30),
-        text: index + 1,
-        style: {
-          backgroundColor: 'transparent',
-          borderColor: 'transparent',
-        }
-      })
-    })
-    // 序号下方圆形标记
-    const circles = serialList.map((item, index) => {
-      return new AMap.Circle({
-        center: new AMap.LngLat(item.paths[0], item.paths[1]),
-        radius: 0.5, // 半径
-        // strokeColor: 'white',
-        fillColor: 'white',
-        fillOpacity: 1,
-        strokeWeight: 2,
-      });
-    })
-    // 计算并显示每段线的距离
-    const distances = [];
-    const serialPaths = serialList.map(item => item.paths)
-    for (let i = 0; i < serialPaths.length - 1; i++) {
-      const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1]));
-      // 计算两个点之间的中点坐标
-      const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2;
-      const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2;
-      const midPoint = new AMap.LngLat(midLng, midLat);
-      // 在中点位置放置文本以显示距离
-      const distanceText = new AMap.Text({
-        position: midPoint,
-        offset: new AMap.Pixel(-16, 10),
-        text: `${distance.toFixed(1)} m`,// 距离
-        style: {
-          fontSize: '10px',
-          color: '#FFFFFF',
-          backgroundColor: 'rgba(0, 0, 0, 0.75)',
-          borderColor: 'transparent',
-        },
-      });
-      distances.push(distanceText);
-    }
-    const other = [polyline, ...text, ...circles, ...distances]
+    // const serialList = list.filter((item) => item.type === 1);
+    // // 序号
+    // const text = serialList.map((item, index) => {
+    //   return new AMap.Text({
+    //     position: new AMap.LngLat(item.paths[0], item.paths[1]),
+    //     offset: new AMap.Pixel(-8, -30),
+    //     text: index + 1,
+    //     style: {
+    //       backgroundColor: 'transparent',
+    //       borderColor: 'transparent',
+    //     }
+    //   })
+    // })
+    // // 序号下方圆形标记
+    // const circles = serialList.map((item, index) => {
+    //   return new AMap.Circle({
+    //     center: new AMap.LngLat(item.paths[0], item.paths[1]),
+    //     radius: 0.5, // 半径
+    //     // strokeColor: 'white',
+    //     fillColor: 'white',
+    //     fillOpacity: 1,
+    //     strokeWeight: 2,
+    //   });
+    // })
+    // // 计算并显示每段线的距离
+    // const distances = [];
+    // const serialPaths = serialList.map(item => item.paths)
+    // for (let i = 0; i < serialPaths.length - 1; i++) {
+    //   const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1]));
+    //   // 计算两个点之间的中点坐标
+    //   const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2;
+    //   const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2;
+    //   const midPoint = new AMap.LngLat(midLng, midLat);
+    //   // 在中点位置放置文本以显示距离
+    //   const distanceText = new AMap.Text({
+    //     position: midPoint,
+    //     offset: new AMap.Pixel(-16, 10),
+    //     text: `${distance.toFixed(1)} m`,// 距离
+    //     style: {
+    //       fontSize: '10px',
+    //       color: '#FFFFFF',
+    //       backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    //       borderColor: 'transparent',
+    //     },
+    //   });
+    //   distances.push(distanceText);
+    // }
+    const other = [polyline]
     // 获取起飞点
     const homeList = list.filter(item => item.type === 0);
     if (homeList.length) {