master: Fixed 添加处理按钮 修复问题

config/vite.config.prod.ts

@@ -1,6 +1,6 @@
 import { mergeConfig } from 'vite';
 import baseConfig from './vite.config.base';
-import configCompressPlugin from './plugin/compress';
+// import configCompressPlugin from './plugin/compress';
 import configVisualizerPlugin from './plugin/visualizer';
 import configArcoResolverPlugin from './plugin/arcoResolver';
 import configImageminPlugin from './plugin/imagemin';
@@ -9,7 +9,7 @@ export default mergeConfig(
   {
     mode: 'production',
     plugins: [
-      configCompressPlugin('gzip'),
+      // configCompressPlugin('gzip'),
       configVisualizerPlugin(),
       configArcoResolverPlugin(),
       configImageminPlugin(),

src/api/system.ts

@@ -27,6 +27,11 @@ export function getAlgorithmList(params = {}, headers = {}): Promise<any> {
     headers,
   });
 }
+export function getMailbox(data = {}, headers = {}): Promise<any> {
+  return axios.put('/rpc/rabbitMQ/Host/Mailbox', data, {
+    headers,
+  });
+}
 export function getAlarmImgFiles(path: string, headers = {}): Promise<any> {
   return axios.get(`/rpc/rabbitMQ/KunPengYun/Files/${path}`, {
     headers,

src/assets/js/useWheel.ts

@@ -9,17 +9,21 @@ import { useAppStore } from '../../store';
 // const { API_VIEW_PREVIEW_POST } = useRequest()
 const useSystem = useAppStore();
 export default function useWheel(
-  containerEl,
-  partUrl,
+  containerEl: any,
+  // partUrl: any,
   className = '.ps-video'
 ) {
   const container = containerEl;
-  const scaleEle: any = document.querySelector(className + partUrl.UUID);
+  const scaleEle: any = document.querySelector(className);
+  const transformN = scaleEle.style.transform;
+  console.log('container', container);
+  console.log('scaleEle', scaleEle);
+
   let x = 0;
   let y = 0;
   let scale = 1;
-  let scaleEleW = 806;
-  let scaleEleH = 453;
+  let scaleEleW = container.offsetWidth;
+  let scaleEleH = container.offsetHeight;
   let minScale = 1;
   let maxScale = 20;
   let isDown = false; // 按下标识
@@ -28,7 +32,9 @@ export default function useWheel(
   let offsetY = 0;
 
   // 滚轮缩放、放大逻辑
-  const wheelHandle = (e) => {
+  const wheelHandle = (e: any) => {
+    console.log(123);
+
     let ratio = 1.1;
     // 缩小
     if (e.deltaY > 0) {
@@ -36,6 +42,7 @@ export default function useWheel(
     }
     // 限制缩放倍数
     const onscale = scale * ratio;
+
     if (onscale > maxScale) {
       ratio = maxScale / scale;
       scale = maxScale;
@@ -74,20 +81,24 @@ export default function useWheel(
     );
     x = offsetX;
     y = offsetY;
-    scaleEle.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
+
+    scaleEle.style.transform = `${transformN}matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
   };
-  const mousemoveHandle = (e) => {
-    const transformStyle = scaleEle.style.transform;
+  const mousemoveHandle = (e: any) => {
+    if (isDown) {
+      const transformStyle = scaleEle.style.transform;
 
-    // 解析矩阵的缩放值
-    const matrixValues = transformStyle.split('(')[1].split(')')[0].split(',');
-    const mscaleX = parseFloat(matrixValues[0]);
-    const mscaleY = parseFloat(matrixValues[3]);
+      // 解析矩阵的缩放值
+      const matrixValues = transformStyle
+        .split('(')[2]
+        .split(')')[0]
+        .split(',');
+      const mscaleX = parseFloat(matrixValues[0]);
+      const mscaleY = parseFloat(matrixValues[3]);
 
-    // 计算实际宽度
-    scaleEleW = scaleEle.offsetWidth * mscaleX;
-    scaleEleH = scaleEle.offsetHeight * mscaleY;
-    if (isDown) {
+      // 计算实际宽度
+      scaleEleW = scaleEle.offsetWidth * mscaleX;
+      scaleEleH = scaleEle.offsetHeight * mscaleY;
       if (scale === 1) return;
       const moveX = e.offsetX - lastPointermove.x;
       const moveY = e.offsetY - lastPointermove.y;
@@ -120,26 +131,26 @@ export default function useWheel(
       }
       x = offsetX;
       y = offsetY;
-      scaleEle.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
+      scaleEle.style.transform = `${transformN}matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
     }
   };
 
-  const params = {
-    ...partUrl,
-  };
-  // 全景更新细节初始化x y
-  watch(
-    () => useSystem.partObj,
-    (newV: any) => {
-      params.PartCenterX = newV.PartCenterX;
-      params.PartCenterY = newV.PartCenterY;
-    },
-    { deep: true }
-  );
+  // const params = {
+  //   ...partUrl,
+  // };
+  // // 全景更新细节初始化x y
+  // watch(
+  //   () => useSystem.partObj,
+  //   (newV: any) => {
+  //     params.PartCenterX = newV.PartCenterX;
+  //     params.PartCenterY = newV.PartCenterY;
+  //   },
+  //   { deep: true }
+  // );
   const mouseupHandle = () => {
     isDown = false;
   };
-  const mousedownHandle = (e) => {
+  const mousedownHandle = (e: any) => {
     e.preventDefault();
     isDown = true;
     lastPointermove = { x: e.offsetX, y: e.offsetY };
@@ -159,11 +170,11 @@ export default function useWheel(
       lastPointermove = { x: 0, y: 0 }; // 用于计算鼠标移动距离
       offsetX = 0;
       offsetY = 0;
-      scaleEle.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
+      scaleEle.style.transform = `${transformN}matrix(1, 0, 0, 1, 0, 0)`;
     }
   );
 
-  scaleEle.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
+  scaleEle.style.transform = `${transformN}matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
   // 拖拽查看
   // 绑定鼠标点击
   container.addEventListener('mousedown', mousedownHandle, false);

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

@@ -63,7 +63,7 @@
                   </template>
                 </a-button>
                 <template #content>
-                  <Speech />
+                  <Speech :data="data" />
                 </template>
               </a-popover>
               <!-- 对讲 -->
@@ -328,12 +328,11 @@
   import { useAppStore } from '@/store';
   import dayjs from 'dayjs';
   import { Message } from '@arco-design/web-vue';
+  import useWheel from '@/assets/js/useWheel';
   import Speech from '../components/speech.vue';
   import AlarmAll from '../components/alarm-all.vue';
   import PubModal from '../components/pub-modal.vue';
 
-  // import useWheel from '@/assets/js/useWheel';
-
   const { t } = useI18n();
   interface IBtn {
     label: string;
@@ -398,6 +397,7 @@
   ]);
   const state = ref(false);
   const toolsClick = (tool: any) => {
+    if (!workerObj.value.qj) return;
     switch (tool.type) {
       case 'lx':
         state.value = !state.value;
@@ -569,9 +569,10 @@
             () => {
               ao.loading = false;
               ao.isSignal = false;
-              // useWheel(document.querySelectorAll(`#video-canvas-part`), {
-              //   UUID: screenActive.value,
-              // });
+              useWheel(
+                document.querySelectorAll('.video-box')[screenActive.value],
+                `#video-canvas-part${screenActive.value}`
+              );
             }
           );
         });

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

@@ -141,12 +141,17 @@
     >
       <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>
   </div>
 </template>
 
 <script setup lang="ts">
-  import dayjs from 'dayjs';
+  // import dayjs from 'dayjs';
   import { useAppStore } from '@/store';
   import { ref, reactive, onMounted } from 'vue';
   import {
@@ -156,6 +161,9 @@
   } from '@/api/system';
   import ViewAlarm from './view-alarm.vue';
 
+  interface AlarmData {
+    [key: string]: number | string | boolean;
+  }
   const app = useAppStore();
   const props = defineProps<{
     guid?: string;
@@ -177,9 +185,9 @@
   const loading = ref(false);
   const total = ref(0);
   const typeAlarmOptions = ref<any[]>([]);
-  const viewData = ref({});
+  const viewData = ref<AlarmData>({});
 
-  const alarmData = ref<{ [key: string]: number | string | boolean }[]>([
+  const alarmData = ref<AlarmData[]>([
     // {
     //   type: '行人闯入',
     //   timeN: dayjs().format('YYYY-MM-DD HH:mm:ss'),
@@ -245,6 +253,12 @@
   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 = () => {

src/views/preview-list/components/speech.vue

@@ -40,7 +40,7 @@
         </template>
       </a-button>
     </a-tooltip>
-    <a-tooltip :content="$t('previewList.bt')">
+    <!-- <a-tooltip :content="$t('previewList.bt')">
       <a-button
         v-if="!isPlay"
         :disabled="audioChunks.length === 0"
@@ -67,7 +67,7 @@
           />
         </template>
       </a-button>
-    </a-tooltip>
+    </a-tooltip> -->
   </div>
 </template>
 
@@ -76,23 +76,49 @@
   import { Icon } from '@iconify/vue';
   import { Message } from '@arco-design/web-vue';
   import { useAppStore } from '@/store';
+  import { getMailbox } from '@/api/system';
 
   const app = useAppStore();
   const isSpeech = ref(false);
   const isPlay = ref(false);
   const audioChunks = ref<any[]>([]);
   let mediaRecorder: MediaRecorder;
-  let audioUrl;
+  let audioUrl: string;
   let audioBlob: any;
   let audio: any;
   const second = ref(0);
+  const props = defineProps<{
+    data: any;
+  }>();
+
+  // 将录音发送到服务器
+  const sendMicrophone = async () => {
+    // const formData = new FormData();
+    // console.log(audioBlob);
 
+    // formData.append('audio', audioBlob, 'recording.wav');
+    try {
+      await getMailbox(audioBlob, {
+        'GUID': props.data.id,
+        'Content-Type': 'application/octet-stream',
+      });
+    } catch (error) {
+      Message.error('上传音频失败');
+      // eslint-disable-next-line no-console
+      console.error('Error uploading audio:', error);
+      // alert('Error uploading audio');
+    }
+  };
   // 获取用户的麦克风权限并开始录音
   const getMicrophone = async () => {
     let previousTime = Date.now();
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const options = {
+      audioBitsPerSecond: 128000,
+      mimeType: 'audio/webm',
+    };
 
-    mediaRecorder = new MediaRecorder(stream);
+    mediaRecorder = new MediaRecorder(stream, options);
     mediaRecorder.ondataavailable = (event) => {
       second.value += 1;
       const timeNow = Date.now();
@@ -105,9 +131,12 @@
     mediaRecorder.onstop = () => {
       audio = document.createElement('audio');
       audio.controls = true;
-      audioBlob = new Blob(audioChunks.value, { type: 'audio/wav' });
+      audioBlob = new Blob(audioChunks.value, {
+        type: 'application/octet-stream',
+      });
       audioUrl = URL.createObjectURL(audioBlob);
       audio.src = audioUrl;
+      sendMicrophone();
     };
 
     if (audio) {
@@ -120,9 +149,10 @@
 
   // 停止录音
   const stopMicrophone = async () => {
-    if (!isSpeech.value) return;
+    // if (!isSpeech.value) return;
     mediaRecorder.stop();
     Message.info('录音结束');
+    URL.revokeObjectURL(audioUrl);
   };
 
   // 播放录音
@@ -130,39 +160,14 @@
     audio.play();
   };
 
-  // 将录音发送到服务器
-  const sendMicrophone = async () => {
-    const formData = new FormData();
-    formData.append('audio', audioBlob, 'recording.wav');
-    try {
-      const response = await fetch(`${app.ip}/IM/AudioFile`, {
-        method: 'PUT',
-        body: formData,
-      });
-
-      if (response.ok) {
-        Message.success('音频上传成功');
-        // alert('Audio uploaded successfully');
-      } else {
-        // alert('Failed to upload audio');
-        Message.error('上传音频失败');
-      }
-    } catch (error) {
-      Message.error('上传音频失败');
-      // eslint-disable-next-line no-console
-      console.error('Error uploading audio:', error);
-      // alert('Error uploading audio');
-    }
-  };
-
   const speechDown = () => {
     isSpeech.value = true;
     getMicrophone();
   };
   const speechUp = () => {
+    if (!isSpeech.value) return;
     stopMicrophone();
     isSpeech.value = false;
-    sendMicrophone();
   };
 
   const speechStop = () => {

src/views/preview-list/index.vue

@@ -272,139 +272,6 @@
                       </a-grid-item>
                     </a-grid>
                   </div>
-                  <div class="alarm-box">
-                    <a-table
-                      :columns="alarmColumns"
-                      :data="alarmData"
-                      :scroll="{ y: 100 }"
-                      :pagination="false"
-                      :bordered="{ cell: true }"
-                      :loading="false"
-                      size="small"
-                      style="height: 100%"
-                    >
-                      <template #columns>
-                        <a-table-column
-                          :title="t('previewList.bjlx')"
-                          :ellipsis="true"
-                          :tooltip="true"
-                          data-index="type"
-                        >
-                        </a-table-column>
-                        <a-table-column
-                          :title="t('previewList.bjsj')"
-                          data-index="timeN"
-                          :width="180"
-                        ></a-table-column>
-                        <a-table-column
-                          :title="t('previewList.status')"
-                          data-index="status"
-                          :width="150"
-                          :body-cell-style="
-                            (record) => ({
-                              background: record.status ? '' : '#7e2d2d',
-                            })
-                          "
-                        >
-                          <template #cell="{ record }">
-                            <span>{{
-                              record.status
-                                ? t('previewList.ycl')
-                                : t('previewList.wcl')
-                            }}</span>
-                          </template>
-                        </a-table-column>
-                        <a-table-column
-                          :title="t('previewList.dqstatus')"
-                          data-index="isRead"
-                          :width="150"
-                          :body-cell-style="
-                            (record) => ({
-                              background: record.isRead ? '' : '#2d4f7e',
-                            })
-                          "
-                        >
-                          <template #cell="{ record }">
-                            <span>{{
-                              record.isRead
-                                ? t('previewList.yd')
-                                : t('previewList.wd')
-                            }}</span>
-                          </template>
-                        </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,
-                                  })
-                                )
-                              "
-                              >{{ t('previewList.ck') }}</a-button
-                            >
-                          </template>
-                          <template #title>
-                            <span>{{ t('previewList.cz') }}</span>
-                            <a-tooltip :content="$t('previewList.ckqb')">
-                              <a-button
-                                type="text"
-                                size="mini"
-                                style="position: absolute; right: 40px"
-                                @click="modalRef.open()"
-                              >
-                                <template #icon>
-                                  <Icon
-                                    icon="gg:view-list"
-                                    width="22"
-                                    height="22"
-                                  />
-                                </template>
-                              </a-button>
-                            </a-tooltip>
-                            <a-tooltip :content="$t('previewList.tip1')">
-                              <a-button
-                                type="text"
-                                size="mini"
-                                style="position: absolute; right: 8px"
-                                @click="
-                                  () =>
-                                    alarmData.forEach(
-                                      (item) => (item.isRead = true)
-                                    )
-                                "
-                              >
-                                <template #icon>
-                                  <a-badge
-                                    dot
-                                    color="#FFB400"
-                                    :count="
-                                      alarmData.filter((v) => !v.isRead).length
-                                    "
-                                  >
-                                    <Icon
-                                      icon="ant-design:clear-outlined"
-                                      width="20"
-                                      height="20"
-                                    />
-                                  </a-badge>
-                                </template>
-                              </a-button>
-                            </a-tooltip>
-                          </template>
-                        </a-table-column>
-                      </template>
-                    </a-table>
-                  </div>
                 </div>
               </a-col>
             </a-row>
@@ -445,7 +312,7 @@
   import { getCropFullInfo } from '@/api/system';
   import { Message } from '@arco-design/web-vue';
   import { useDebounceFn } from '@vueuse/core';
-  import dayjs from 'dayjs';
+  // import dayjs from 'dayjs';
   import AlarmAll from './components/alarm-all.vue';
   import PubModal from './components/pub-modal.vue';
 
@@ -511,6 +378,7 @@
   // ]);
   const state = ref(false);
   const toolsClick = (tool: any, ao: any) => {
+    if (!ao.workerObj) return;
     switch (tool.type) {
       case 'lx':
         state.value = !state.value;
@@ -587,25 +455,25 @@
     },
   ]);
 
-  const alarmColumns = [
-    {
-      title: t('previewList.bjlx'),
-      dataIndex: 'type',
-    },
-    {
-      title: t('previewList.status'),
-      dataIndex: 'status',
-      width: 150,
-    },
-  ];
-  const alarmLoading = ref(false);
-  const alarmData = ref<{ [key: string]: number | string | boolean }[]>([
-    // {
-    //   type: '行人闯入',
-    //   status: 0,
-    //   isRead: false,
-    // },
-  ]);
+  // const alarmColumns = [
+  //   {
+  //     title: t('previewList.bjlx'),
+  //     dataIndex: 'type',
+  //   },
+  //   {
+  //     title: t('previewList.status'),
+  //     dataIndex: 'status',
+  //     width: 150,
+  //   },
+  // ];
+  // const alarmLoading = ref(false);
+  // const alarmData = ref<{ [key: string]: number | string | boolean }[]>([
+  // {
+  //   type: '行人闯入',
+  //   status: 0,
+  //   isRead: false,
+  // },
+  // ]);
 
   const searchKey = ref<string>('');
 
@@ -796,45 +664,45 @@
     // toggle();
   };
 
-  let eventSource: EventSource;
-  const alarmSSE = () => {
-    alarmLoading.value = true;
-    eventSource = new EventSource(`${app.ip}/rpc/AiSSE?Topic=All`);
-    eventSource.addEventListener(
-      'open',
-      () => {
-        alarmData.value = [];
-        alarmLoading.value = false;
-      },
-      false
-    );
-    eventSource.addEventListener(
-      'message',
-      (e) => {
-        const data = JSON.parse(e.data);
-        alarmData.value.unshift({
-          type: data.AlgorithmName,
-          status: 0,
-          isRead: false,
-          timeN: dayjs(+`${data.time}`.padEnd(13, '0')).format(
-            'YYYY-MM-DD HH:mm:ss'
-          ),
-          ...data,
-        });
-      },
-      false
-    );
-    eventSource.addEventListener(
-      'error',
-      () => {
-        Message.warning({
-          content: t('previewList.tip2'),
-          duration: 5 * 1000,
-        });
-      },
-      false
-    );
-  };
+  // let eventSource: EventSource;
+  // const alarmSSE = () => {
+  //   alarmLoading.value = true;
+  //   eventSource = new EventSource(`${app.ip}/rpc/AiSSE?Topic=All`);
+  //   eventSource.addEventListener(
+  //     'open',
+  //     () => {
+  //       alarmData.value = [];
+  //       alarmLoading.value = false;
+  //     },
+  //     false
+  //   );
+  //   eventSource.addEventListener(
+  //     'message',
+  //     (e) => {
+  //       const data = JSON.parse(e.data);
+  //       alarmData.value.unshift({
+  //         type: data.AlgorithmName,
+  //         status: 0,
+  //         isRead: false,
+  //         timeN: dayjs(+`${data.time}`.padEnd(13, '0')).format(
+  //           'YYYY-MM-DD HH:mm:ss'
+  //         ),
+  //         ...data,
+  //       });
+  //     },
+  //     false
+  //   );
+  //   eventSource.addEventListener(
+  //     'error',
+  //     () => {
+  //       Message.warning({
+  //         content: t('previewList.tip2'),
+  //         duration: 5 * 1000,
+  //       });
+  //     },
+  //     false
+  //   );
+  // };
 
   watch(
     radioActive,
@@ -891,9 +759,9 @@
     comName,
     (newV) => {
       if (newV === 'index') {
-        alarmSSE();
+        // alarmSSE();
       } else {
-        eventSource.close();
+        // eventSource.close();
         // for (let i = 0; i < radioActive.value; i + 1) {
         handleClose(screenActive.value);
         // }

src/views/preview-list/locale/en-US.ts

@@ -17,6 +17,7 @@ export default {
   'previewList.dqstatus': 'Read status',
   'previewList.ycl': 'Already processed',
   'previewList.wcl': 'Not processed',
+  'previewList.cl': 'Processed',
   'previewList.cz': 'Operation',
   'previewList.cx': 'Query',
   'previewList.ck': 'View',

src/views/preview-list/locale/zh-CN.ts

@@ -17,6 +17,7 @@ export default {
   'previewList.dqstatus': '读取状态',
   'previewList.ycl': '已处理',
   'previewList.wcl': '未处理',
+  'previewList.cl': '处理',
   'previewList.cz': '操作',
   'previewList.ck': '查看',
   'previewList.cx': '查询',