master: Fixed 修复画布反转

src/assets/js/renderer_2d.js

@@ -1,4 +1,3 @@
-
 export class Canvas2DRenderer {
   canvas = null
   ctx = null
@@ -47,13 +46,14 @@ export class Canvas2DRenderer {
     }
   }
   temp = null
+  img = null
   draw(frame) {
     this.canvas.width = frame.displayHeight
     this.canvas.height = frame.displayWidth
-    this.ctx.translate(frame.displayHeight, 0);
+    this.ctx.translate(frame.displayHeight, 0)
     this.ctx.rotate(Math.PI / 2)
     this.ctx.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight)
-    if (self.GetImg){
+    if (self.GetImg) {
       this.ctx.canvas.convertToBlob().then((blob) => {
         self.postMessage({ img: blob, type: 'img' })
       })

src/assets/scss/adapter.scss

@@ -23,14 +23,11 @@ body {
   }
 
   .panoramic-situation .ps-part-box {
-      display: grid!important;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: auto 1fr;
-      .real-time {
-        grid-column: 1 / 3;
-      }
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto 1fr;
   }
-  .remote-playback .remote-playback-r-box .part-box-wrapper{
+  .remote-playback .remote-playback-r-box .part-box-wrapper {
     flex-direction: row;
   }
 }

src/hooks/useWorker.js

@@ -36,15 +36,52 @@ function formatDateTime(date) {
   return `${year}${month}${day}${hours}${minutes}${seconds}${Milliseconds}`
 }
 
-async function DownloadStreamSaver(blob, fileName) {
+async function DownloadStreamSaver(blob, fileName, type) {
   const opts = {
     suggestedName: fileName,
     types: [{ 'image/png': ['png'] }]
   }
-  const handle = await showSaveFilePicker(opts)
-  const ws = await handle.createWritable()
-  ws.write(blob)
-  ws.close()
+  if (window.parent != window) {
+    window.parent.postMessage(
+      { type: 'native-file-system-adapter', imgOrVideo: type, opts, blob },
+      '*'
+    )
+  } else {
+    if (type === 'img') {
+      // 创建一个新的Image对象
+      const img = new Image()
+      img.src = URL.createObjectURL(blob)
+
+      // 等待图片加载完成
+      img.onload = () => {
+        // 创建Canvas元素
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        // 设置Canvas大小
+        canvas.width = img.width
+        canvas.height = img.height
+        if (ctx) {
+          ctx.translate(img.width / 2, img.height / 2)
+          ctx.rotate(Math.PI)
+          ctx.translate(-img.width / 2, -img.height / 2)
+          ctx.drawImage(img, 0, 0)
+        }
+
+        // 将旋转后的Canvas转换回Blob
+        canvas.toBlob(async (rotatedBlob) => {
+          const handle = await showSaveFilePicker(opts)
+          const ws = await handle.createWritable()
+          ws.write(rotatedBlob)
+          ws.close()
+        })
+      }
+    } else {
+      const handle = await showSaveFilePicker(opts)
+      const ws = await handle.createWritable()
+      ws.write(blob)
+      ws.close()
+    }
+  }
 }
 
 export default function useWorker(url, className, callback = () => {}) {
@@ -58,7 +95,7 @@ export default function useWorker(url, className, callback = () => {}) {
   worker.addEventListener('message', (msg) => {
     if (msg.data.type === 'img') {
       // saveAs(msg.data.img,`${formatDateTime(new Date())}.png`)
-      DownloadStreamSaver(msg.data.img, `${formatDateTime(new Date())}.png`)
+      DownloadStreamSaver(msg.data.img, `${formatDateTime(new Date())}.png`, msg.data.type)
     } else {
       callback()
     }
@@ -113,7 +150,8 @@ export default function useWorker(url, className, callback = () => {}) {
       ffmpeg.deleteFile('test.mp4')
       DownloadStreamSaver(
         new Blob([data.buffer], { type: 'video/mp4' }),
-        `${formatDateTime(new Date())}.mp4`
+        `${formatDateTime(new Date())}.mp4`,
+        message.data.DataType
       )
       ffmpeg.deleteFile('out.mp4')
     }

src/views/VideoMonitoring/VideoMonitoring.vue

@@ -5,7 +5,7 @@
       <video-com v-show="isVideo"></video-com>
       <main-box />
     </div>
-    <audio ref="alertAudioRef" loop src="/audio/alert.mp3">
+    <audio ref="alertAudioRef" loop src="/foreground/audio/alert.mp3">
       Your browser does not support the <code>audio</code> element.
     </audio>
   </layout-box>

src/views/VideoMonitoring/components/DeviceInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="device-info"
+    flex
+    justify-center
+    items-center
+    flex-1
+    pt-36px
+    px-10px
+    b-1px
+    b-solid
+    b-color="#007bff"
+  >
+    <ul class="color-#8AC5FF text-2vw flex flex-col gap-2">
+      <li>
+        <span>名称：</span>
+        <span>工地管控设备</span>
+      </li>
+      <li>
+        <span>架设地点：</span>
+        <span>成都市青羊区西河路1号</span>
+      </li>
+      <li>
+        <span>工作时间：</span>
+        <span>2024年11月18日</span>
+      </li>
+      <li>
+        <span>所属单位：</span>
+        <span>首创集团</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/VideoMonitoring/pages/PanoramicSituation/PanoramicSituation.vue

@@ -13,6 +13,7 @@
         >
           <UWindow :currentActive="i"></UWindow>
         </div>
+        <DeviceInfo />
         <RealTime />
       </div>
     </div>
@@ -21,6 +22,7 @@
 <script setup>
 import { useOutsideSystemStore } from '@/stores/modules/system.js'
 import RealTime from '../../components/RealTime.vue'
+import DeviceInfo from '../../components/DeviceInfo.vue'
 const useSystem = useOutsideSystemStore()
 
 const selectPart = (i) => {

src/views/VideoMonitoring/pages/PanoramicSituation/components/PartBox.vue

@@ -8,7 +8,7 @@
     <template v-if="item.UUID">
       <div :style="{ maxWidth: '100%', maxHeight: '100%', aspectRatio: 16 / 9 }">
         <!-- 视频 -->
-        <pub-video :new-class="'part ps-video' + item.UUID" :is-scale="true" />
+        <pub-video style="transform: rotate(180deg);" :new-class="'part ps-video' + item.UUID" :is-scale="true" />
         <!-- 工具面板 -->
         <!-- <OperationPanel :op-class="'ps-video' + item.UUID" :uuid="item.UUID" /> -->
         <!-- 加载 -->
@@ -86,7 +86,7 @@ const setPart = (newV, lowRate = 0, index) => {
         workerObj[active] = useWorker(url, '.ps-video' + item.UUID, () => {
           const partV = document.querySelector('.ps-video' + item.UUID)
           useSystem.videoWorkerCache[route.name + active] = Object.assign({}, item)
-          // useWheel(document.querySelectorAll('.ps-part-box-item')[active], item)
+          useWheel(document.querySelectorAll('.ps-part-box-item')[active], item)
           item.loading = false
           partV.style.transform = useSystem.canvasStyle[item.UUID]
         })