森防视频详情

src/views/globalMap/RightMenu/ForestDefenseVideo/DetailDialog.vue

@@ -2,24 +2,24 @@
   <div class="detail-box">
     <div class="content">
       <div class="line">
-        <div class="common-title-box">{{ detailData.title }}</div>
+        <div class="common-title-box">{{ detailData.name }}</div>
         <Switch v-model="visibleRange" label="可视域" style="flex-shrink: 0; white-space: wrap" />
       </div>
       <div class="text-box">
         <div class="box-item">
           <i class="icon1" />
           <div class="text1">地址：</div>
-          <div>{{ detailData.address }}</div>
+          <div>{{ detailData.installPlace }}</div>
         </div>
         <div class="box-item">
           <i class="icon2" />
           <div class="text1">坐标：</div>
-          <div>经度{{ detailData.lng }}；纬度{{ detailData.lat }}</div>
+          <div>经度{{ detailData.longitude }}；纬度{{ detailData.latitude }}</div>
         </div>
         <div class="box-item">
           <i class="icon3" />
           <div class="text1">类型：</div>
-          <div>{{ detailData.type }}</div>
+          <div>{{ detailData.cameraTypeName }}</div>
         </div>
       </div>
       <div class="video-box">
@@ -82,6 +82,7 @@ import Polygon from 'ol/geom/Polygon';
 import { getPtzInfo, setHkVideoControlling } from '@/api/globalMap/forestDefenseVideo';
 import { showErrorMsg, showSuccessMsg } from '@/utils/notification';
 import useMapStore from '@/store/modules/map';
+import { getVideoInfo } from '@/api/globalMap/spatialAnalysis';
 
 const props = defineProps({
   id: String
@@ -117,11 +118,11 @@ const tabs = ref([
 // 可视域开关
 let visibleRange = ref(false);
 let detailData = ref({
-  title: '',
-  address: '',
-  lng: undefined,
-  lat: undefined,
-  type: '',
+  name: '',
+  installPlace: '',
+  longitude: undefined,
+  latitude: undefined,
+  cameraTypeName: '',
   speed: 1,
   video_code: ''
 });
@@ -140,22 +141,18 @@ const handleGetPtzInfo = () => {
 };
 const getData = (refresh) => {
   handleGetPtzInfo();
-  // getDeviceByIndexCode({ code: props.id }).then((res) => {
-  //   detailData.value = res.data;
-  // });
-  detailData.value = {
-    title: '高州市根子镇上炕村委会',
-    address: '茂名市高州市坡心东南约400米',
-    lng: 110.819207,
-    lat: 21.711887,
-    type: '云台',
-    speed: 1,
-    video_code: '44090000001321000033'
-    // video_code: '44092251001320000009'
-  };
-  if (!refresh) {
-    initDot();
-  }
+  getVideoInfo(props.id).then((res) => {
+    detailData.value.name = res.data.name;
+    detailData.value.installPlace = res.data.installPlace;
+    detailData.value.longitude = res.data.longitude;
+    detailData.value.latitude = res.data.latitude;
+    detailData.value.speed = res.data.speed;
+    detailData.value.video_code = res.data.video_code;
+    detailData.value.cameraTypeName = res.data.cameraTypeName;
+    if (!refresh) {
+      initDot();
+    }
+  });
 };
 // 加载地图标点
 const initDot = () => {
@@ -170,7 +167,7 @@ const initDot = () => {
     });
     // 创建点覆盖物
     marker = new AMap.Marker({
-      position: new AMap.LngLat(detailData.value.lng, detailData.value.lat),
+      position: new AMap.LngLat(detailData.value.longitude, detailData.value.latitude),
       icon: icon,
       offset: new AMap.Pixel(-18, -20)
     });
@@ -189,7 +186,7 @@ const initDot = () => {
     map.addLayer(vectorLayer);
     // 创建标注点
     marker = new Feature({
-      geometry: new Point([detailData.value.lng, detailData.value.lat])
+      geometry: new Point([detailData.value.longitude, detailData.value.latitude])
     });
     // 定义样式
     const style = new Style({
@@ -261,7 +258,7 @@ const handleControl = (type) => {
 const createSector = () => {
   removeSector();
   const { startAngle, endAngle } = calculateAngle(ptzInfo.value.AzimuthH, ptzInfo.value.AngelH);
-  const center = turf.point([detailData.value.lng, detailData.value.lat]);
+  const center = turf.point([detailData.value.longitude, detailData.value.latitude]);
   const sectorData = turf.sector(center, ptzInfo.value.Distance / 1000, startAngle, endAngle);
   if (mapStore.isAMap) {
     sector = new AMap.Polyline({
@@ -336,7 +333,7 @@ const addVisibleRange = () => {
   if (mapStore.isAMap) {
     // 圆形范围
     circle = new AMap.Circle({
-      center: new AMap.LngLat(detailData.value.lng, detailData.value.lat),
+      center: new AMap.LngLat(detailData.value.longitude, detailData.value.latitude),
       radius: ptzInfo.value.Distance,
       strokeColor: '#ff0000', // 线颜色
       strokeOpacity: 0.35, // 线透明度
@@ -346,7 +343,7 @@ const addVisibleRange = () => {
     });
     map.add(circle);
   } else if (mapStore.YMapType.includes(mapStore.activeMap)) {
-    const center = turf.point([detailData.value.lng, detailData.value.lat]);
+    const center = turf.point([detailData.value.longitude, detailData.value.latitude]);
     const sectorData = turf.sector(center, ptzInfo.value.Distance / 1000, 0, 360);
 
     circle = new Feature({
@@ -452,7 +449,7 @@ const convertToClockwiseAngle = (counterClockwiseAngle) => {
 // 截图
 let videoRef = ref(null);
 const handleScreenshot = () => {
-  videoRef.value.handleScreenshot(detailData.value.title);
+  videoRef.value.handleScreenshot(detailData.value.name);
 };
 // 录像
 let player;
@@ -463,7 +460,7 @@ const handleRecording = () => {
   if (!recording.value) {
     // 开启录像
     let time = new Date().getTime();
-    let fileName = detailData.value.title ? detailData.value.title : '';
+    let fileName = detailData.value.name ? detailData.value.name : '';
     fileName += '录像' + time;
     player.JS_StartSaveEx(1, fileName, 5).then(
       () => {

src/views/globalMap/RightMenu/ForestDefenseVideo/index.vue

@@ -76,7 +76,6 @@
 <script lang="ts" setup name="ForestDefenseVideo">
 import DetailDialog from './DetailDialog.vue';
 import { getVideoForestFireList } from '@/api/globalMap/forestDefenseVideo';
-import useMapStore from '@/store/modules/map';
 
 const statisticsData = ref({
   online: '',