master: Added 更改视频细节风格，样式有问题

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

@@ -140,15 +140,37 @@
                       @mouseenter="handleMouseEnter(i)"
                       @dblclick="handleDoubleClick(i)"
                     >
-                      <a-spin v-if="activeObj[i].loading" dot />
-                      <div v-if="!activeObj[i].workerObj" class="video-box-tip"
+                      <a-spin v-if="activeObj[i]?.loading" dot />
+                      <div v-if="!activeObj[i]?.workerObj" class="video-box-tip"
                         ><span>{{ t('previewList.wxh') }}</span></div
                       >
-                      <div class="video-tools">
+                      <div v-if="activeObj[i]?.isCloseBtn" class="video-tools">
+                        <!-- 截图 录像 -->
+                        <a-tooltip
+                          v-for="tool in activeObj[i]?.tools"
+                          :key="tool.type"
+                          :content="tool.title"
+                        >
+                          <a-button
+                            type="text"
+                            size="mini"
+                            @click="partToolsClick(tool, activeObj[i])"
+                          >
+                            <template #icon>
+                              <Icon
+                                :icon="tool.icon"
+                                :color="tool.color"
+                                :class="[tool.iconClass]"
+                                width="24"
+                                height="24"
+                              />
+                            </template>
+                          </a-button>
+                        </a-tooltip>
                         <!-- 关闭 -->
                         <a-tooltip :content="$t('previewList.close')">
                           <a-button
-                            v-if="activeObj[i].isCloseBtn"
+                            v-if="i != 0"
                             type="text"
                             size="mini"
                             @click="handleClose(i)"
@@ -179,7 +201,7 @@
                         </a-tooltip> -->
                       </div>
                       <canvas
-                        v-if="activeObj[i].isReset"
+                        v-if="activeObj[i]?.isReset"
                         :id="'video-canvas-part' + i"
                         :style="{
                           width: '100%',
@@ -369,7 +391,7 @@
   }>();
   const qjLoading = ref(false);
   const radioActive = ref<number>(2);
-  const screenActive = ref<number>(0);
+  const screenActive = ref<number>(1);
 
   const btnList = computed<IBtn[]>(() => [
     {
@@ -430,6 +452,26 @@
         break;
     }
   };
+  const partToolsClick = (tool: any, ao: any) => {
+    if (!ao.workerObj) return;
+    switch (tool.type) {
+      case 'lx':
+        state.value = !state.value;
+        tool.icon = state.value ? 'fad:armrecording' : 'bx:video-recording';
+        tool.color = state.value ? 'red' : '#8ac5ff';
+        tool.iconClass = state.value ? '.fade-open' : '';
+        ao.workerObj.WebSocketWork.postMessage({
+          type: 'lx',
+          lx: state.value,
+        });
+        break;
+      case 'jt':
+        ao.workerObj.worker.postMessage({ type: 'jt' });
+        break;
+      default:
+        break;
+    }
+  };
   const gridCount = computed<number>(() => {
     let result = 4;
     switch (radioActive.value) {
@@ -457,7 +499,16 @@
       isSignal: boolean;
       [key: string]: any;
     }[]
-  >([]);
+  >([
+    {
+      loading: false,
+      isSignal: false,
+      workerObj: null,
+      isCloseBtn: false,
+      isReset: false,
+      tools: ref(tools.value.map((v) => ({ ...v, color: '#8ac5ff' }))),
+    },
+  ]);
   const alarmColumns = [
     {
       title: t('previewList.bjlx'),
@@ -497,14 +548,15 @@
   ) => {
     radioActive.value = typeof v === 'number' ? v : 2;
     if (typeof v === 'number') {
-      screenActive.value = 0;
+      screenActive.value = 1;
       // eslint-disable-next-line no-plusplus
-      for (let i = 0; i < v; i++) {
+      for (let i = 1; i < v; i++) {
         handleClose(i);
       }
     }
   };
   const handleScreen = (i: number) => {
+    if (!i) return;
     screenActive.value = i;
   };
   const handleMouseEnter = (v: number) => {
@@ -598,16 +650,16 @@
   watch(
     radioActive,
     (newV) => {
-      activeObj.value = [];
+      activeObj.value = [activeObj.value[0]];
       // eslint-disable-next-line no-plusplus
-      for (let i = 0; i < newV; i++) {
-        handleClose(i);
+      for (let i = 1; i < newV; i++) {
         activeObj.value.push({
           loading: false,
           isSignal: false,
           workerObj: null,
           isCloseBtn: false,
           isReset: false,
+          tools: ref(tools.value.map((v) => ({ ...v, color: '#8ac5ff' }))),
         });
       }
     },
@@ -616,32 +668,42 @@
   watch(
     () => app.partObj,
     (newV: any) => {
-      const partVideoUrl = `${app.ip}/VideoShow/Preview/Part/Main?GUID=${props.data.id}&X=${newV.PartCenterX}&Y=${newV.PartCenterY}`;
       handleClose(screenActive.value).then(() => {
         ((active: number) => {
-          const ao = activeObj.value[active];
-          ao.loading = true;
-          ao.isReset = true;
+          let ao: any;
+          let partVideoUrl;
+          let className;
+          if (newV.PartCenterX) {
+            ao = activeObj.value[active];
+            ao.loading = true;
+            ao.isReset = true;
+            partVideoUrl = `${app.ip}/VideoShow/Preview/Part/Main?GUID=${props.data.id}&X=${newV.PartCenterX}&Y=${newV.PartCenterY}`;
+            className = `#video-canvas-part${active}`;
+          } else {
+            [ao] = activeObj.value;
+            ao.loading = true;
+            ao.isReset = true;
+            partVideoUrl = `${app.ip}/VideoShow/Preview/Part/Main?GUID=${props.data.id}&X=0&Y=0`;
+            className = `#video-canvas-part${0}`;
+          }
           nextTick(() => {
-            ao.workerObj = useWorker(
-              partVideoUrl,
-              `#video-canvas-part${active}`,
-              null,
-              () => {
-                ao.loading = false;
-                ao.isSignal = false;
+            ao.workerObj = useWorker(partVideoUrl, className, null, () => {
+              ao.loading = false;
+              ao.isSignal = false;
+              if (newV.PartCenterX) {
                 useWheel(
                   document.querySelectorAll('.video-box')[active],
-                  `#video-canvas-part${active}`
+                  className
                 );
-              },
-              JSON.stringify(cropFullInfo.value)
-            );
+              } else {
+                useWheel(document.querySelectorAll('.video-box')[0], className);
+              }
+            });
           });
         })(screenActive.value);
       });
     },
-    { deep: true }
+    { deep: true, immediate: true }
   );
 
   let eventSource: EventSource;
@@ -691,18 +753,17 @@
       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;
-        },
-        JSON.stringify(cropFullInfo.value)
-      );
+      workerObj.value.qj = useWorker(videoUrl, `#video-canvas-qj`, null, () => {
+        qjLoading.value = false;
+      });
     });
   });
   onUnmounted(() => {
+    handleClose(0);
+    app.partObj = Object.assign(app.partObj as any, {
+      PartCenterX: '',
+      PartCenterY: '',
+    });
     workerObj.value.qj?.close();
     workerObj.value.qj = null;
     eventSource?.close();
@@ -827,6 +888,7 @@
     background-color: #000;
     overflow: hidden;
     box-sizing: content-box;
+    border: 1px solid #000000;
     cursor: pointer;
     .arco-spin {
       position: absolute;

src/views/preview-list/index.vue

@@ -500,7 +500,7 @@
 
     return loop<any>(originTreeData.value);
   }
-  const fetchData = async (params: PolicyParams = { Status: '1' }) => {
+  const fetchData = async (params: PolicyParams = {}) => {
     setLoading(true);
     try {
       const { data } = await queryPolicyList(params);