非dicom阅片页面快捷键功能补充

src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue

@@ -1230,7 +1230,7 @@ export default {
     async getHotKeys() {
       // const loading = this.$loading({ fullscreen: true })
       try {
-        const res = await getDoctorShortcutKey({ imageToolType: 0 })
+        const res = await getDoctorShortcutKey({ imageToolType: 1 })
         res.Result.map(item => {
           this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
         })

src/views/trials/trials-panel/reading/dicoms/components/Hotkeys.vue

@@ -60,7 +60,7 @@ export default {
       this.loading = true
       this.hotKeyList = []
       try {
-        const res = await getDoctorShortcutKey({ imageToolType: this.readingTool })
+        const res = await getDoctorShortcutKey({ imageToolType: this.readingTool === 1 ? 2 : 1 })
         if (res.IsSuccess) {
           res.Result.map(item => {
             this.hotKeyList.push({ id: item.Id, keys: { controlKey: { altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code }, text: item.Text }, label: item.ShortcutKeyEnum })

src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomViewer.vue

@@ -924,7 +924,7 @@ export default {
     async getHotKeys() {
       // const loading = this.$loading({ fullscreen: true })
       try {
-        let res = await getDoctorShortcutKey({ imageToolType: 0 })
+        let res = await getDoctorShortcutKey({ imageToolType: 1 })
         res.Result.map((item) => {
           this.hotKeyList.push({
             id: item.Id,

src/views/trials/trials-panel/reading/dicoms/customize/Hotkeys.vue

@@ -61,7 +61,7 @@ export default {
       this.loading = true
       this.hotKeyList = []
       try{
-        let res = await getDoctorShortcutKey({ imageToolType: this.readingTool })
+        let res = await getDoctorShortcutKey({ imageToolType: this.readingTool === 1 ? 2 : 1 })
         res.Result.map(item => {
           this.hotKeyList.push({ id: item.Id, keys: { controlKey: { altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code }, text: item.Text }, label: item.ShortcutKeyEnum })
         })

src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue

@@ -3124,7 +3124,7 @@ export default {
     // 获取热键配置信息
     async getHotKeys() {
       try {
-        const res = await getDoctorShortcutKey({ imageToolType: 0 })
+        const res = await getDoctorShortcutKey({ imageToolType: 1 })
         res.Result.map(item => {
           this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
         })

src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue

@@ -129,7 +129,7 @@
     </div>
     <!-- viewports -->
     <div class="viewports-wrapper" v-loading="loading" ref="viewports-wrapper">
-      <div class="grid-container" :style="gridStyle">
+      <div ref="container" class="grid-container" :style="gridStyle">
         <div v-for="(v, index) in viewportInfos" v-show="index < cells.length" :key="index" :style="cellStyle"
           :class="['grid-cell', index === activeCanvasIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
           @dblclick="toggleFullScreen($event, index)" @click="activeCanvas(index)"
@@ -237,7 +237,17 @@
 
     <el-dialog v-if="personalConfigDialog.visible" :visible.sync="personalConfigDialog.visible"
       :close-on-click-modal="false" :title="personalConfigDialog.title" width="600px">
-      <Others />
+      <!-- <Others /> -->
+      <el-tabs v-model="activeName" class="personal_config">
+        <!-- 热键 -->
+        <el-tab-pane :label="$t('trials:reading:tab:hotkeys')" name="1">
+          <Hotkeys v-if="activeName === '1'" :reading-tool="1" @reset="resetHotkeyList" />
+        </el-tab-pane>
+        <!-- 其他 -->
+        <el-tab-pane :label="$t('trials:reading:tab:others')" name="2">
+          <Others v-if="activeName === '2'" />
+        </el-tab-pane>
+      </el-tabs>
     </el-dialog>
     <upload-dicom-and-nonedicom v-if="uploadImageVisible" :subject-id="uploadSubjectId"
       :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible"
@@ -272,6 +282,7 @@
 </template>
 <script>
 import { addNoneDicomMark, deleteTrialFileType, getCriterionReadingInfo, setReadKeyFile } from '@/api/trials'
+import { getDoctorShortcutKey } from '@/api/user'
 import html2canvas from 'html2canvas'
 import {
   RenderingEngine,
@@ -290,6 +301,7 @@ import hardcodedMetaDataProvider from './../js/hardcodedMetaDataProvider'
 import registerWebImageLoader from './../js/registerWebImageLoader'
 import { mapGetters } from 'vuex'
 import store from '@/store'
+import Hotkeys from '@/views/trials/trials-panel/reading/dicoms/components/Hotkeys'
 import Others from '@/views/trials/trials-panel/reading/dicoms/components/Others'
 import Manuals from '@/views/trials/trials-panel/reading/dicoms/components/Manuals'
 const { ViewportType } = Enums
@@ -321,6 +333,7 @@ const { MouseBindings, Events: toolsEvents } = csToolsEnums
 export default {
   name: 'ImageViewer',
   components: {
+    Hotkeys,
     Others,
     downloadDicomAndNonedicom,
     uploadDicomAndNonedicom,
@@ -397,10 +410,13 @@ export default {
         annotation: null
       },
       loading: false,
-      manualsDialog: { visible: false, isFullscreen: false },
+      manualsDialog: { visible: false, isFullscreen: false, justKeyDoc: false },
       trialId: null,
 
-      ManualsClose: false
+      ManualsClose: false,
+      activeName: '1',
+      hotKeyList: [],
+      isShowAnnotations: true
     }
   },
   computed: {
@@ -498,6 +514,7 @@ export default {
     this.$refs['viewports-wrapper'].addEventListener('wheel', (e) => {
       this.setToolsPassive()
     });
+    this.getHotKeys()
   },
   beforeDestroy() {
     window.removeEventListener('message', this.handleIframeMessage)
@@ -1730,6 +1747,39 @@ export default {
       viewport.resetCamera({ resetPan: true, resetZoom: true, resetToCenter: true })
       renderingEngine.render()
     },
+    setZoomScale(isZoomIn) {
+      this.setToolsPassive()
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `canvas-${this.activeCanvasIndex}`
+      const viewport = renderingEngine?.getViewport(viewportId)
+      if (!viewport) return
+      const camera = viewport.getCamera()
+      const factor = 1.1
+      const current = Number(camera.parallelScale)
+      if (!Number.isFinite(current) || current <= 0) return
+      const next = isZoomIn ? current / factor : current * factor
+      const parallelScale = Math.max(0.0001, Math.min(1000000, next))
+      viewport.setCamera({ parallelScale })
+      viewport.render()
+    },
+    async saveImage() {
+      const divForDownloadViewport = document.querySelector(
+        `div[data-viewport-uid="canvas-${this.activeCanvasIndex}"]`
+      )
+      if (!divForDownloadViewport) return
+      const canvas = await html2canvas(divForDownloadViewport)
+      const base64Str = canvas.toDataURL('image/png', 1)
+      const i = this.viewportInfos.findIndex(v => v.index === this.activeCanvasIndex)
+      const name = (i > -1 ? this.viewportInfos[i].currentFileName : '') || `screenshot-${Date.now()}`
+      const safeName = String(name).replace(/[\\/:*?"<>|]/g, '_')
+      const downloadName = safeName.toLowerCase().endsWith('.png') ? safeName : `${safeName}.png`
+      const a = document.createElement('a')
+      a.href = base64Str
+      a.download = downloadName
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+    },
     resetAnnotations({ annotations, visitTaskId }) {
       // 移除病灶
       const arr = cornerstoneTools.annotation.state.getAllAnnotations()
@@ -1920,8 +1970,101 @@ export default {
       this.$emit('previewCD', id)
     },
     previewConfig() {
+      this.activeName = '1'
       this.personalConfigDialog.visible = true
-    }
+    },
+    // 获取热键配置信息
+    async getHotKeys() {
+      try {
+        const res = await getDoctorShortcutKey({ imageToolType: 2 })
+        res.Result.map(item => {
+          this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
+        })
+        this.bindHotKey()
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    // 绑定热键事件
+    bindHotKey() {
+      const container = this.$refs['container']
+      if (!container) return
+      container.tabIndex = 0
+      container.focus()
+      container.addEventListener('keydown', event => {
+        const idx = this.hotKeyList.findIndex(i => i.code === event.code && i.ctrlKey === event.ctrlKey && i.shiftKey === event.shiftKey && i.altKey === event.altKey)
+        if (idx === -1) return
+        const shortcutKeyEnum = this.hotKeyList[idx].shortcutKeyEnum
+
+        if (shortcutKeyEnum === 1) {
+          // 前一图像视口
+          const canvasIndex = this.activeCanvasIndex === 0 ? this.activeCanvasIndex : this.activeCanvasIndex - 1
+          this.activeCanvas(canvasIndex)
+        } else if (shortcutKeyEnum === 2) {
+          // 后一图像视口
+          const canvasIndex = this.activeCanvasIndex === this.cells.length - 1 ? this.activeCanvasIndex : this.activeCanvasIndex + 1
+          this.activeCanvas(canvasIndex)
+        } else if (shortcutKeyEnum === 5) {
+          // 上一张图像
+          const i = this.viewportInfos.findIndex(v => v.index === this.activeCanvasIndex)
+          if (i > -1 && this.imageType.includes(this.viewportInfos[i].fileType)) {
+            this.sliceIndex(this.viewportInfos[i].currentImageIdIndex - 1)
+          }
+        } else if (shortcutKeyEnum === 6) {
+          // 下一张图像
+          const i = this.viewportInfos.findIndex(v => v.index === this.activeCanvasIndex)
+          if (i > -1 && this.imageType.includes(this.viewportInfos[i].fileType)) {
+            this.sliceIndex(this.viewportInfos[i].currentImageIdIndex + 1)
+          }
+        } else if (shortcutKeyEnum === 11) {
+          // 放大
+          const i = this.viewportInfos.findIndex(v => v.index === this.activeCanvasIndex)
+          if (i > -1 && this.imageType.includes(this.viewportInfos[i].fileType)) {
+            this.setZoomScale(true)
+          }
+        } else if (shortcutKeyEnum === 12) {
+          // 缩小
+          const i = this.viewportInfos.findIndex(v => v.index === this.activeCanvasIndex)
+          if (i > -1 && this.imageType.includes(this.viewportInfos[i].fileType)) {
+            this.setZoomScale(false)
+          }
+        } else if (shortcutKeyEnum === 15) {
+          // 截图
+          const i = this.viewportInfos.findIndex(v => v.index === this.activeCanvasIndex)
+          if (i > -1 && this.imageType.includes(this.viewportInfos[i].fileType)) {
+            this.saveImage()
+          }
+        } else if (shortcutKeyEnum === 18) {
+          // 重置
+          this.resetViewport()
+        } else if (shortcutKeyEnum === 19) {
+          // 显示或隐藏标记
+          this.isShowAnnotations = !this.isShowAnnotations
+          const { visibility } = cornerstoneTools.annotation
+          if (this.isShowAnnotations) {
+            visibility.showAllAnnotations()
+          } else {
+            const annotationUIDs = cornerstoneTools.annotation.state.getAllAnnotations().map((a) => a.annotationUID)
+            annotationUIDs.forEach((annotationUID) => {
+              visibility.setAnnotationVisibility(annotationUID, false)
+            })
+          }
+          const renderingEngine = getRenderingEngine(renderingEngineId)
+          let viewportIds = [`canvas-0`, `canvas-1`, `canvas-2`, `canvas-3`]
+          renderingEngine.renderViewports(viewportIds)
+        }
+        event.stopImmediatePropagation()
+        event.stopPropagation()
+        event.preventDefault()
+      })
+    },
+    // 重置热键信息
+    resetHotkeyList(arr) {
+      this.hotKeyList = []
+      arr.map(item => {
+        this.hotKeyList.push({ id: item.id, altKey: item.keys.controlKey.altKey, ctrlKey: item.keys.controlKey.ctrlKey, shiftKey: item.keys.controlKey.shiftKey, metaKey: item.keys.controlKey.metaKey, key: item.keys.controlKey.key, code: item.keys.controlKey.code, text: item.keys.text, shortcutKeyEnum: item.label })
+      })
+    },
   }
 }
 </script>
@@ -2178,4 +2321,17 @@ export default {
     }
   }
 }
+.personal_config {
+  ::v-deep .el-tabs__content {
+    height: 450px;
+    overflow-y: auto;
+  }
+  ::v-deep .hot-keys-label {
+    color: #dfdfdf !important;
+  }
+
+  ::v-deep .shortcut-key-input span {
+    color: #dfdfdf !important;
+  }
+}
 </style>