master: Fixed 修复视频 、其他问题

src/api/system.ts

@@ -13,7 +13,9 @@ export function getKey(): Promise<any> {
   return axios.get('/foreground/config.json', { baseURL: '/' });
 }
 export function getCropFullInfo(headers = {}): Promise<any> {
-  return axios.get('/rpc/rabbitMQ/VideoShow/CropFullInfo', { headers });
+  return axios.get('/rpc/rabbitMQ/VideoShow/CropFullInfo', {
+    headers,
+  });
 }
 export function getPubApi(path: string, headers = {}): Promise<any> {
   return axios.get(`/rpc/rabbitMQ/${path}`, { headers });
@@ -21,6 +23,16 @@ export function getPubApi(path: string, headers = {}): Promise<any> {
 export function getAlarmLog(params = {}, headers = {}): Promise<any> {
   return axios.get('/rpc/rabbitMQ/KunPengYun/AlarmLog', { params, headers });
 }
+export function setProcessingStatus(
+  params: any = {},
+  headers = {}
+): Promise<any> {
+  return axios.put(
+    `/rpc/rabbitMQ/KunPengYun/SetProcessingStatus?AlarmID=${params.AlarmID}&State=${params.State}`,
+    {},
+    { headers }
+  );
+}
 export function getAlgorithmList(params = {}, headers = {}): Promise<any> {
   return axios.get('/rpc/rabbitMQ/KunPengYun/AlgorithmList', {
     params,

src/assets/js/video-lib/omnimatrix-video-player.ts

@@ -128,7 +128,13 @@ async function UrlStreamSaverDownload(url, fileName) {
  * @param {Function} callback - 画面渲染完成时的回调
  * @returns {Object} 包含两个Web Worker和一个关闭函数的对象
  */
-function useWorker(url, className, device, callback = () => {}) {
+function useWorker(
+  url,
+  className,
+  device,
+  callback = () => {},
+  cropFullInfo = ''
+) {
   let canvas = document.querySelector(className);
   canvas = canvas.transferControlToOffscreen();
   const worker = new Worker(new URL('./worker.js', import.meta.url), {
@@ -147,7 +153,10 @@ function useWorker(url, className, device, callback = () => {}) {
     }
   });
   let DataType = 'Start';
-  worker.postMessage({ DataType, canvas, url, device }, [canvas]);
+  worker.postMessage(
+    { DataType, canvas, url, device, cropFullInfo, className },
+    [canvas]
+  );
 
   const WebSocketWork = new Worker(
     new URL('./GetVideoStreaming.js', import.meta.url).href,

src/assets/js/video-lib/renderer_2d.js

@@ -4,11 +4,13 @@ export class Canvas2DRenderer {
   getShowData = null;
   storage = [];
 
-  constructor(canvas, getShowData, outputLayer) {
+  constructor(canvas, getShowData, outputLayer, cropFullInfo, className) {
     this.canvas = canvas;
     this.ctx = canvas.getContext('2d');
     this.getShowData = getShowData;
     this.outputLayer = outputLayer;
+    this.cropFullInfo = JSON.parse(cropFullInfo);
+    this.className = className;
   }
   #ArraysAreEqual(arr1, arr2) {
     if (arr1.length !== arr2.length) {
@@ -47,11 +49,57 @@ export class Canvas2DRenderer {
   }
   temp = null;
   draw(frame) {
-    this.canvas.width = frame.displayHeight;
-    this.canvas.height = frame.displayWidth;
-    this.ctx.translate(frame.displayHeight, 0);
-    this.ctx.rotate(Math.PI / 2);
-    this.ctx.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight);
+    if (this.className.includes('part')) {
+      this.canvas.width = frame.displayWidth;
+      this.canvas.height = frame.displayHeight;
+      this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
+    } else {
+      this.canvas.width = this.cropFullInfo.W;
+      this.canvas.height = this.cropFullInfo.H;
+      this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
+    }
+    switch (this.cropFullInfo.Rotate) {
+      case 0:
+        this.ctx.rotate(0);
+        this.ctx.drawImage(
+          frame,
+          -this.canvas.width / 2,
+          -this.canvas.height / 2,
+          frame.displayWidth,
+          frame.displayHeight
+        );
+        break;
+      case 90:
+        this.ctx.rotate(1.57);
+        this.ctx.drawImage(
+          frame,
+          -this.canvas.height / 2,
+          -this.canvas.width / 2,
+          frame.displayWidth,
+          frame.displayHeight
+        );
+        break;
+      case 180:
+        this.ctx.rotate(3.14);
+        this.ctx.drawImage(
+          frame,
+          -this.canvas.width / 2,
+          -this.canvas.height / 2,
+          frame.displayWidth,
+          frame.displayHeight
+        );
+        break;
+      case 270:
+        this.ctx.rotate(4.71);
+        this.ctx.drawImage(
+          frame,
+          -this.canvas.height / 2,
+          -this.canvas.width / 2,
+          frame.displayWidth,
+          frame.displayHeight
+        );
+        break;
+    }
     if (self.GetImg) {
       this.ctx.canvas.convertToBlob().then((blob) => {
         self.postMessage({ img: blob, type: 'img' });

src/assets/js/video-lib/worker.js

@@ -66,12 +66,18 @@ function getShowData() {
 var flagPost = 0;
 // Listen for the start request.
 self.addEventListener('message', (message) => {
-  let { canvas, device, url, type } = message.data;
+  let { canvas, device, url, type, cropFullInfo, className } = message.data;
   if (type === 'jt') {
     self.GetImg = true;
   }
   if (message.data.DataType === 'Start') {
-    renderer = new Canvas2DRenderer(canvas, getShowData, null);
+    renderer = new Canvas2DRenderer(
+      canvas,
+      getShowData,
+      null,
+      cropFullInfo,
+      className
+    );
     if (!VideoDecoder)
       throw new Error(
         'The current browser does not support the VideoDecoder API'

src/directive/double-click.ts

@@ -5,8 +5,8 @@ export default {
     if (!value.W) return;
     const app = useAppStore();
     const fn = (x: number, y: number) => {
-      const ratioW = el.offsetWidth / value.H;
-      const ratioH = el.offsetHeight / value.W;
+      const ratioW = el.offsetWidth / value.W;
+      const ratioH = el.offsetHeight / value.H;
       const mouseX = x;
       const mouseY = y;
       Object.assign(

src/views/preview-list/children/preview-info.vue

@@ -25,7 +25,7 @@
                 v-doubleClick="cropFullInfo"
                 :style="{
                   width: '100%',
-                  transform: `rotateZ(${cropFullInfo.Rotate}deg)`,
+                  // transform: `rotateZ(${cropFullInfo.Rotate}deg)`,
                 }"
               ></canvas>
             </div>
@@ -57,7 +57,7 @@
                 position="top"
                 :content-style="{ padding: '0 15px' }"
               >
-                <a-button @click="speechClick">
+                <a-button>
                   <template #icon>
                     <Icon icon="ri:speak-line" width="22" height="22" />
                   </template>
@@ -174,7 +174,7 @@
                         :id="'video-canvas-part' + i"
                         :style="{
                           width: '100%',
-                          transform: `rotateZ(${cropFullInfo.Rotate}deg)`,
+                          // transform: `rotateZ(${cropFullInfo.Rotate}deg)`,
                         }"
                       ></canvas>
                     </div>
@@ -205,7 +205,7 @@
                     :width="180"
                   >
                   </a-table-column>
-                  <a-table-column
+                  <!-- <a-table-column
                     :title="t('previewList.status')"
                     data-index="status"
                     :width="150"
@@ -222,8 +222,8 @@
                           : t('previewList.wcl')
                       }}</span>
                     </template>
-                  </a-table-column>
-                  <a-table-column
+                  </a-table-column> -->
+                  <!-- <a-table-column
                     :title="t('previewList.dqstatus')"
                     data-index="isRead"
                     :width="150"
@@ -240,22 +240,13 @@
                           : t('previewList.wd')
                       }}</span>
                     </template>
-                  </a-table-column>
+                  </a-table-column> -->
                   <a-table-column :title="t('previewList.cz')" :width="150">
                     <template #cell="{ record }">
                       <a-button
                         type="text"
                         size="mini"
-                        @click="
-                          () => (
-                            (record.isRead = true),
-                            $modal.info({
-                              title: '提示',
-                              draggable: true,
-                              content: record.type,
-                            })
-                          )
-                        "
+                        @click="showView(record)"
                         >{{ t('previewList.ck') }}</a-button
                       >
                     </template>
@@ -265,7 +256,7 @@
                         <a-button
                           type="text"
                           size="mini"
-                          style="position: absolute; right: 40px"
+                          style="position: absolute; right: 8px"
                           @click="modalRef.open()"
                         >
                           <template #icon>
@@ -273,7 +264,7 @@
                           </template>
                         </a-button>
                       </a-tooltip>
-                      <a-tooltip :content="$t('previewList.tip1')">
+                      <!-- <a-tooltip :content="$t('previewList.tip1')">
                         <a-button
                           type="text"
                           size="mini"
@@ -297,7 +288,7 @@
                             </a-badge>
                           </template>
                         </a-button>
-                      </a-tooltip>
+                      </a-tooltip> -->
                     </template>
                   </a-table-column>
                 </template>
@@ -313,8 +304,14 @@
       :fullscreen="true"
       :closable="true"
     >
-      <AlarmAll :guid="data.id" />
+      <AlarmAll :guid="data.id" :is-show-cl="isShowCl" />
     </PubModal>
+    <ViewDrawer
+      ref="viewDrawerRef"
+      v-model:view-data="viewData"
+      :guid="data.id"
+      :is-show-cl="false"
+    />
   </div>
 </template>
 
@@ -332,14 +329,20 @@
   import Speech from '../components/speech.vue';
   import AlarmAll from '../components/alarm-all.vue';
   import PubModal from '../components/pub-modal.vue';
+  import ViewDrawer from '../components/view-drawer.vue';
 
   const { t } = useI18n();
   interface IBtn {
     label: string;
     value: number;
   }
+  interface AlarmData {
+    [key: string]: number | string | boolean;
+  }
   const app = useAppStore();
 
+  const viewData = ref<AlarmData>({});
+  const isShowCl = ref(false);
   const modalRef = ref();
   const workerObj: any = ref({ qj: null });
   const cropFullInfo = ref<{
@@ -534,7 +537,14 @@
     // (app.ip as string).split('//')[1]
     IntercomFn(intercomDisabled, '39.107.83.190');
   };
-  const speechClick = () => {};
+  const viewDrawerRef = ref();
+  const showView = (record: any) => {
+    record.isRead = true;
+    console.log(record);
+    
+    viewData.value = record;
+    viewDrawerRef.value.open();
+  };
   watch(
     radioActive,
     (newV) => {
@@ -573,7 +583,8 @@
                 document.querySelectorAll('.video-box')[screenActive.value],
                 `#video-canvas-part${screenActive.value}`
               );
-            }
+            },
+            JSON.stringify(cropFullInfo.value)
           );
         });
       });
@@ -625,11 +636,17 @@
     alarmSSE();
     getCropFullInfo({ GUID: props.data.id }).then((res) => {
       cropFullInfo.value = res.data;
-    });
-    const videoUrl = `${app.ip}/VideoShow/Preview/Full/Main?GUID=${props.data.id}`;
-    qjLoading.value = true;
-    workerObj.value.qj = useWorker(videoUrl, `#video-canvas-qj`, null, () => {
-      qjLoading.value = false;
+      const videoUrl = `${app.ip}/VideoShow/Preview/Full/Main?GUID=${props.data.id}`;
+      qjLoading.value = true;
+      workerObj.value.qj = useWorker(
+        videoUrl,
+        `#video-canvas-qj`,
+        null,
+        () => {
+          qjLoading.value = false;
+        },
+        JSON.stringify(cropFullInfo.value)
+      );
     });
   });
   onUnmounted(() => {

src/views/preview-list/components/alarm-all.vue

@@ -78,7 +78,7 @@
               }}</span>
             </template>
           </a-table-column>
-          <a-table-column
+          <!-- <a-table-column
             :title="$t('previewList.dqstatus')"
             data-index="isRead"
             :width="150"
@@ -93,7 +93,7 @@
                 record.isRead ? $t('previewList.yd') : $t('previewList.wd')
               }}</span>
             </template>
-          </a-table-column>
+          </a-table-column> -->
           <a-table-column :title="$t('previewList.cz')" :width="150">
             <template #cell="{ record }">
               <a-button type="text" size="mini" @click="showView(record)">{{
@@ -128,25 +128,13 @@
         @page-size-change="pageSizeChange"
       />
     </div>
-    <a-drawer
-      class="show-view-drawer"
-      unmount-on-close
-      :width="340"
-      :visible="tpckVisible"
-      :footer="false"
-      :mask-closable="false"
-      :mask="false"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <template #title>{{ $t('previewList.tpck') }}</template>
-      <ViewAlarm :data="viewData" />
-      <template #footer>
-        <a-button type="primary" @click="handleCl">{{
-          $t('previewList.cl')
-        }}</a-button>
-      </template>
-    </a-drawer>
+    <ViewDrawer
+      ref="viewDrawerRef"
+      :view-data="viewData"
+      :guid="guid"
+      :is-show-cl="true"
+      @update:view-data="(v) => Object.assign(viewData, v)"
+    />
   </div>
 </template>
 
@@ -159,7 +147,7 @@
     getAlarmLog,
     getAlgorithmList,
   } from '@/api/system';
-  import ViewAlarm from './view-alarm.vue';
+  import ViewDrawer from './view-drawer.vue';
 
   interface AlarmData {
     [key: string]: number | string | boolean;
@@ -168,6 +156,7 @@
   const props = defineProps<{
     guid?: string;
   }>();
+  const viewDrawerRef = ref();
   const radioActive = ref<any>('bg');
   const paramObj = reactive<{
     PageNum: number;
@@ -219,7 +208,7 @@
                 ...item,
                 type: item.Name,
                 timeN: item.CreatedAt,
-                status: 0,
+                status: +item.HandleStatus,
                 isRead: false,
                 img: `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${item.OriginPicture}&GUID=${props.guid}`,
                 tImg: `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${item.Thumbnail}&GUID=${props.guid}`,
@@ -250,23 +239,9 @@
     getList();
   };
 
-  const tpckVisible = ref(false);
-
-  const handleOk = () => {
-    viewData.value.isRead = true;
-    tpckVisible.value = false;
-  };
-  const handleCl = () => {
-    viewData.value.isRead = true;
-    viewData.value.status = 1;
-    tpckVisible.value = false;
-  };
-  const handleCancel = () => {
-    tpckVisible.value = false;
-  };
   const showView = (record: any) => {
     viewData.value = record;
-    tpckVisible.value = true;
+    viewDrawerRef.value.open();
   };
 
   const searchBtn = () => {

src/views/preview-list/components/view-drawer.vue

@@ -0,0 +1,70 @@
+<template>
+  <a-drawer
+    class="show-view-drawer"
+    unmount-on-close
+    :width="340"
+    :visible="tpckVisible"
+    :mask-closable="false"
+    :mask="false"
+    :footer="isShowCl && viewData.status === 0"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ $t('previewList.tpck') }}</template>
+    <ViewAlarm :data="viewData" />
+    <template #footer>
+      <a-button type="primary" :loading="clLoading" @click="handleCl">{{
+        $t('previewList.cl')
+      }}</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { setProcessingStatus } from '@/api/system';
+  import ViewAlarm from './view-alarm.vue';
+
+  interface AlarmData {
+    [key: string]: number | string | boolean;
+  }
+  const props = defineProps<{
+    viewData: AlarmData;
+    guid: any;
+    isShowCl: boolean;
+  }>();
+  const emits = defineEmits(['update:viewData']);
+  const clLoading = ref(false);
+  const tpckVisible = ref(false);
+
+  const close = () => {
+    tpckVisible.value = false;
+  };
+  const open = () => {
+    tpckVisible.value = true;
+  };
+  const handleOk = () => {
+    emits('update:viewData', { ...props.viewData, isRead: true });
+    close();
+  };
+  const handleCancel = () => {
+    close();
+  };
+  const handleCl = async () => {
+    open();
+    emits('update:viewData', { ...props.viewData, isRead: true, status: 1 });
+    await setProcessingStatus(
+      {
+        AlarmID: props.viewData.Id,
+        State: 'Procesed',
+      },
+      { GUID: props.guid }
+    );
+    clLoading.value = false;
+    close();
+  };
+
+  defineExpose({ close, open });
+</script>
+
+<style scoped></style>

src/views/preview-list/index.vue

@@ -143,7 +143,7 @@
                             v-if="activeObj[i].isReset"
                             :id="'video-canvas-' + i"
                             :style="{
-                              transform: `rotateZ(${rotateZ}deg)`,
+                              // transform: `rotateZ(${rotateZ}deg)`,
                             }"
                           ></canvas>
                           <div
@@ -577,29 +577,30 @@
           const videoUrl = `${app.ip}/VideoShow/Preview/Full/Main?GUID=${
             (data.node as PolicyRecord).id
           }`;
-          ao.workerObj = useWorker(
-            videoUrl,
-            `#video-canvas-${screenActive.value}`,
-            null,
-            () => {
-              ao.loading = false;
-              ao.isSignal = true;
+          getCropFullInfo({ GUID: (data.node as PolicyRecord).id }).then(
+            (res) => {
+              rotateZ.value = res.data.Rotate;
+              ao.workerObj = useWorker(
+                videoUrl,
+                `#video-canvas-${screenActive.value}`,
+                null,
+                () => {
+                  ao.loading = false;
+                  ao.isSignal = true;
 
-              getCropFullInfo({ GUID: (data.node as PolicyRecord).id }).then(
-                (res) => {
-                  rotateZ.value = res.data.Rotate;
-                }
+                  setTimeout(() => {
+                    const vc: any = document.querySelector(
+                      `#video-canvas-${screenActive.value}`
+                    );
+                    resizeArr.push(vc);
+                    vc.style.height = `${vc.parentNode.offsetHeight}px`;
+                    vc.style.width = 'auto';
+                    // eslint-disable-next-line no-use-before-define
+                    resize();
+                  }, 50);
+                },
+                JSON.stringify(res.data)
               );
-              setTimeout(() => {
-                const vc: any = document.querySelector(
-                  `#video-canvas-${screenActive.value}`
-                );
-                resizeArr.push(vc);
-                vc.style.height = `${vc.parentNode.offsetHeight}px`;
-                vc.style.width = 'auto';
-                // eslint-disable-next-line no-use-before-define
-                resize();
-              }, 50);
             }
           );
         });