From 64581a3e070337874132f045d553ef7235b80e91 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 25 Aug 2025 14:00:46 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=85=E7=89=87=E9=A1=B5=E9=9D=A2=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=82=A3=E8=80=85=E4=BF=A1=E6=81=AF=E3=80=81=E6=A3=80?=
 =?UTF-8?q?=E6=9F=A5=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms/components/DicomCanvas.vue | 296 +++++++-------
 .../dicoms/customize/CustomizeDicomCanvas.vue | 360 ++++++++++--------
 2 files changed, 354 insertions(+), 302 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue b/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
index 921df42..8bb2e1a 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
@@ -1,15 +1,7 @@
 <template>
-  <div
-    id="canvas"
-    ref="canvas"
-    v-loading="loading"
-    element-loading-text="Loading..."
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    style="position:relative;"
-    class="cornerstone-element"
-    @mouseup="sliderMouseup"
-    @contextmenu.prevent="onContextmenu"
-  >
+  <div id="canvas" ref="canvas" v-loading="loading" element-loading-text="Loading..."
+    element-loading-background="rgba(0, 0, 0, 0.8)" style="position:relative;" class="cornerstone-element"
+    @mouseup="sliderMouseup" @contextmenu.prevent="onContextmenu">
     <!-- 临床数据 -->
     <div v-if="stack.isExistsClinicalData" class="info-cd" @click.stop="handleViewCD($event)">
       <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')" placement="bottom">
@@ -18,46 +10,40 @@
 
     </div>
     <!-- 切换访视 -->
-    <div
-      v-if="stack.imageRendered && isReadingTaskViewInOrder === 1"
-      class="info-visit"
-      @dblclick.stop="preventDefault($event)"
-    >
-      <div
-        class="arrw_div_wrapper"
-        :style="{cursor:stack.visitTaskNum <= minVistNum?'not-allowed':'pointer',color:stack.visitTaskNum <= minVistNum?'#888':'#fff'}"
-        @click.stop.prevent="toggleSeries($event,-1)"
-        @dblclick.stop="preventDefault($event)"
-      >
+    <div v-if="stack.imageRendered && isReadingTaskViewInOrder === 1" class="info-visit"
+      @dblclick.stop="preventDefault($event)">
+      <div class="arrw_div_wrapper"
+        :style="{ cursor: stack.visitTaskNum <= minVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum <= minVistNum ? '#888' : '#fff' }"
+        @click.stop.prevent="toggleSeries($event, -1)" @dblclick.stop="preventDefault($event)">
         <i class="el-icon-caret-left" />
       </div>
       <div class="blind_name_wrapper">
         {{ stack.taskBlindName }}
       </div>
-      <div
-        class="arrw_div_wrapper"
-        :style="{cursor:stack.visitTaskNum >= maxVistNum?'not-allowed':'pointer',color:stack.visitTaskNum >= maxVistNum?'#888':'#fff'}"
-        @click.stop.prevent="toggleSeries($event,1)"
-        @dblclick.stop="preventDefault($event)"
-      >
+      <div class="arrw_div_wrapper"
+        :style="{ cursor: stack.visitTaskNum >= maxVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum >= maxVistNum ? '#888' : '#fff' }"
+        @click.stop.prevent="toggleSeries($event, 1)" @dblclick.stop="preventDefault($event)">
         <i class="el-icon-caret-right" />
       </div>
     </div>
     <div class="info-series">
-      <h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{ stack.taskBlindName }}</h2>
+      <h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{
+        stack.taskBlindName }}</h2>
       <div v-show="dicomInfo.series">Series: #{{ dicomInfo.series }}</div>
       <div>Image: #{{ dicomInfo.frame }}</div>
       <div>{{ dicomInfo.modality }}</div>
     </div>
     <div class="info-image">
       <div v-show="mousePosition.mo">
-        Pos: {{ mousePosition.x?mousePosition.x.toFixed(0):'' }}, {{ mousePosition.y?mousePosition.y.toFixed(0):'' }}
+        Pos: {{ mousePosition.x ? mousePosition.x.toFixed(0) : '' }}, {{ mousePosition.y ? mousePosition.y.toFixed(0) :
+          '' }}
       </div>
-      <div v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
+      <div
+        v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
         HU: {{ mousePosition.mo }}
       </div>
       <div v-else-if="(dicomInfo.modality === 'PT' && mousePosition.suv)">
-        SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.suv.toFixed(3) :mousePosition.suv.toFixed(digitPlaces) }}
+        SUVbw(g/ml): {{ digitPlaces === -1 ? mousePosition.suv.toFixed(3) : mousePosition.suv.toFixed(digitPlaces) }}
       </div>
       <div v-else-if="mousePosition.mo">
         Density: {{ mousePosition.mo }}
@@ -75,14 +61,20 @@
     <div class="info-subject">
       <div>{{ stack.description }}</div>
       <!-- <div>{{ dicomInfo.hospital }}</div> -->
-      <!-- <div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div> -->
+      <div v-if="dicomInfo.pid">{{ dicomInfo.pid }}</div>
+      <div v-if="dicomInfo.patientName">{{ dicomInfo.patientName }}</div>
       <!-- <div>{{ subjectCode }}</div> -->
       <!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
       <!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
-      <!-- <div>{{ dicomInfo.time }}</div> -->
+      <div v-if="dicomInfo.modality">{{ dicomInfo.modality }}</div>
+      <div v-if="dicomInfo.time">{{ dicomInfo.time }}</div>
     </div>
-    <div ref="sliderBox" class="my_slider_box" style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer" @click.stop="goViewer($event)">
-      <div :style="{top: height + '%'}" style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
+    <div ref="sliderBox" class="my_slider_box"
+      style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer"
+      @click.stop="goViewer($event)">
+      <div :style="{ top: height + '%' }"
+        style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move"
+        @click.stop.prevent="() => { return }" @mousedown.stop="sliderMousedown($event)" />
     </div>
     <div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
       {{ markers.top }}
@@ -117,7 +109,7 @@
   </div>
 </template>
 <style>
-.my_slider_box:after{
+.my_slider_box:after {
   content: '';
   position: absolute;
   bottom: -20px;
@@ -152,6 +144,7 @@ import getOrientationString from '@/views/trials/trials-panel/reading/dicoms/too
 import invertOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/invertOrientationString'
 // import calculateLongestAndShortestDiameters from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/calculateLongestAndShortestDiameters'
 import calculateSUV from '@/views/trials/trials-panel/reading/dicoms/tools/calculateSUV'
+import { convertBytes } from '@/utils/dicom-character-set'
 cornerstoneTools.external.cornerstone = cornerstone
 cornerstoneTools.external.Hammer = Hammer
 cornerstoneTools.external.cornerstoneMath = cornerstoneMath
@@ -568,7 +561,7 @@ export default {
             type: 'warning'
           }).then(() => {
 
-          }).catch(() => {})
+          }).catch(() => { })
           e.stopImmediatePropagation()
           e.stopPropagation()
           e.preventDefault()
@@ -1088,7 +1081,7 @@ export default {
         var frame = imageInfo.frame
         this.stack.frame = this.stack.isExistMutiFrames ? parseInt(frame) : null
         this.stack.instanceId = instanceId
-        
+
         const element = this.$refs.canvas
         cornerstone.enable(element)
         element.tabIndex = 0
@@ -1141,7 +1134,7 @@ export default {
 
           // const scope = this
           Array.from(toolButtons).forEach((toolBtn) => {
-          // Add the tool
+            // Add the tool
             const toolName = toolBtn.getAttribute('data-tool')
             const apiTool = cornerstoneTools[`${toolName}Tool`]
             if (apiTool) {
@@ -1149,15 +1142,15 @@ export default {
 
               if (!toolAlreadyAddedToElement) {
                 if (toolName === 'Length') {
-                  cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true }})
+                  cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true } })
                 } else if (toolName === 'Bidirectional') {
-                // cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
-                // , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
-                  cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true }})
+                  // cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
+                  // , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
+                  cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true } })
                 } else if (toolName === 'ArrowAnnotate') {
-                  cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
+                  cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
                 } else if (toolName === 'RectangleRoi') {
-                  cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
+                  cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
                 } else {
                   cornerstoneTools.addToolForElement(element, apiTool)
                 }
@@ -1183,10 +1176,10 @@ export default {
             mouseButtonMask: 4
           })
 
-        // if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
-        //   cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
-        // }
-        // cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
+          // if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
+          //   cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
+          // }
+          // cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
         }
 
         // cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
@@ -1218,9 +1211,24 @@ export default {
       ToolStateManager.clearImageIdToolState(imageId)
       e.detail.enabledElement.options = {}
       var data = e.detail.image.data
+      const patientNameElement = data.elements.x00100010
+      const patientNameBytes = new Uint8Array(
+        data.byteArray.buffer,
+        patientNameElement ? patientNameElement.dataOffset : 0,
+        patientNameElement ? patientNameElement.length : 0
+      )
+      // 解析dicom中字符集字段与解析库不一致 2025.03.04
+      let SpecificCharacterSet = data.string('x00080005')
+        ? data.string('x00080005').replace('ISO IR', 'ISO_IR')
+        : ''
+      const patientNameStr = convertBytes(
+        SpecificCharacterSet,
+        patientNameBytes
+      )
       this.dicomInfo.hospital = data.string('x00080080')
-      // this.dicomInfo.pid = data.string('x00100020')
-      this.dicomInfo.pid = data.string('x00120040')
+      this.dicomInfo.pid = data.string('x00100020')
+      this.dicomInfo.patientName = patientNameStr
+      // this.dicomInfo.pid = data.string('x00120040')
       this.dicomInfo.name = data.string('x00100010')
       this.dicomInfo.age = data.string('x00101010')
       this.dicomInfo.sex = data.string('x00100040')
@@ -1231,9 +1239,8 @@ export default {
         data.string('x00080030')
       )
       this.dicomInfo.series = data.string('x00200011')
-      this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
-        this.stack.imageIds.length
-      }`
+      this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${this.stack.imageIds.length
+        }`
       this.dicomInfo.size = `${data.uint16('x00280011')}*${data.uint16(
         'x00280010'
       )}`
@@ -1413,9 +1420,9 @@ export default {
       var element = cornerstone.getEnabledElement(this.canvas)
       const { rowPixelSpacing, colPixelSpacing } = this.getPixelSpacing(element.image)
       const dx =
-      (data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
+        (data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
       const dy =
-      (data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
+        (data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
       const length = Math.sqrt(dx * dx + dy * dy)
 
       return length.toFixed(this.digitPlaces)
@@ -1429,9 +1436,9 @@ export default {
       if (imagePlane) {
         return {
           rowPixelSpacing:
-        imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
+            imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
           colPixelSpacing:
-        imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
+            imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
         }
       }
 
@@ -1482,7 +1489,7 @@ export default {
     },
     debounce(callback, delay) {
       let timerId
-      return function() {
+      return function () {
         clearTimeout(timerId)
         timerId = setTimeout(() => {
           callback.apply(this, arguments)
@@ -1963,88 +1970,102 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .context-menu-wrapper{
-    position: absolute;
-    ul{
-      list-style: none;
-      margin: 0px;
-      padding: 0px;
+.context-menu-wrapper {
+  position: absolute;
+
+  ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+    background: #343333;
+    color: #fff;
+    margin: 0;
+    border: 1px solid #2a2a2a;
+    border-radius: 3px;
+    height: auto;
+    min-height: 50px;
+    line-height: 1.5em;
+    width: 80px;
+    box-sizing: border-box;
+  }
+
+  .menu {
+    li {
+      padding: 2px 5px;
+      position: relative;
+      border-bottom: 1px solid #666;
+
+      div {
+        padding: 5px;
+      }
+    }
+
+    .submenu {
+      position: absolute;
+      left: 77px;
+      top: -1px;
       background: #343333;
       color: #fff;
-      margin: 0;
-      border: 1px solid #2a2a2a;
-      border-radius: 3px;
-      height: auto;
-      min-height: 50px;
-      line-height: 1.5em;
-      width:80px;
-      box-sizing: border-box;
-    }
-    .menu{
+      display: none;
+
       li {
         padding: 2px 5px;
-        position: relative;
         border-bottom: 1px solid #666;
-        div{
+
+        div {
           padding: 5px;
         }
       }
-      .submenu{
-        position: absolute;
-        left: 77px;
-        top: -1px;
-        background: #343333;
-        color: #fff;
-        display: none;
-        li {
-          padding: 2px 5px;
-          border-bottom: 1px solid #666;
-          div{
-            padding: 5px;
-          }
-        }
-      }
-
-    }
-    .menu li:hover{
-      background-color: #ff5722;
-      .submenu{
-        display:block;
-      }
-    }
-    .menu_active{
-      cursor: pointer;
-    }
-    .menu_disabled{
-      cursor: not-allowed;
     }
 
   }
-  .info-visit{
-    position: absolute;
-    left:50%;
-    top: 5px;
-    transform: translateX(-50%);
-    display: flex;
-    flex-direction: row;
-    .arrw_div_wrapper{
-      width: 20px;
-      height: 20px;
-      background-color: #3f3f3f;
-      text-align: center;
-      line-height: 20px;
-      border-radius: 10%;
-    }
-    .blind_name_wrapper{
-      height: 20px;
-      line-height: 20px;
-      background-color: #00000057;
-      color: #fff;
-      padding:0 10px;
-      font-size: 14px;
+
+  .menu li:hover {
+    background-color: #ff5722;
+
+    .submenu {
+      display: block;
     }
   }
-.info-cd{
+
+  .menu_active {
+    cursor: pointer;
+  }
+
+  .menu_disabled {
+    cursor: not-allowed;
+  }
+
+}
+
+.info-visit {
+  position: absolute;
+  left: 50%;
+  top: 5px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+
+  .arrw_div_wrapper {
+    width: 20px;
+    height: 20px;
+    background-color: #3f3f3f;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 10%;
+  }
+
+  .blind_name_wrapper {
+    height: 20px;
+    line-height: 20px;
+    background-color: #00000057;
+    color: #fff;
+    padding: 0 10px;
+    font-size: 14px;
+  }
+}
+
+.info-cd {
   position: absolute;
   left: 10px;
   top: 5px;
@@ -2053,6 +2074,7 @@ export default {
   font-size: 18px;
   cursor: pointer;
 }
+
 .info-series {
   position: absolute;
   left: 10px;
@@ -2062,6 +2084,7 @@ export default {
   font-size: 12px;
   /* z-index: 1; */
 }
+
 .info-image {
   position: absolute;
   left: 10px;
@@ -2081,6 +2104,7 @@ export default {
   font-size: 12px;
   /* z-index: 1; */
 }
+
 .info-instance {
   position: absolute;
   right: 15px;
@@ -2113,6 +2137,7 @@ export default {
   margin: 10px;
   cursor: default;
 }
+
 .menu__item:hover {
   color: #ff0000;
 }
@@ -2132,11 +2157,12 @@ li:hover {
   background-color: #e0e0e2;
   color: white;
 }
+
 .msg-div {
-    position: absolute;
-    z-index: 10;
-    background-color: rgba(255, 255, 255, 0.5);
-    color: #000;
-    padding: 5px 20px;
-  }
+  position: absolute;
+  z-index: 10;
+  background-color: rgba(255, 255, 255, 0.5);
+  color: #000;
+  padding: 5px 20px;
+}
 </style>
diff --git a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue
index 32d4331..fee6310 100644
--- a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue
@@ -1,15 +1,7 @@
 <template>
-  <div
-    id="canvas"
-    ref="canvas"
-    v-loading="loading"
-    element-loading-text="Loading..."
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    style="position:relative;"
-    class="cornerstone-element"
-    @mouseup="sliderMouseup"
-    @contextmenu.prevent="onContextmenu"
-  >
+  <div id="canvas" ref="canvas" v-loading="loading" element-loading-text="Loading..."
+    element-loading-background="rgba(0, 0, 0, 0.8)" style="position:relative;" class="cornerstone-element"
+    @mouseup="sliderMouseup" @contextmenu.prevent="onContextmenu">
     <!-- 临床数据 -->
     <div v-if="stack.isExistsClinicalData" class="info-cd" @click.stop="handleViewCD($event)">
       <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')" placement="bottom">
@@ -18,46 +10,40 @@
 
     </div>
     <!-- 切换访视 -->
-    <div
-      v-if="stack.imageRendered && isReadingTaskViewInOrder === 1"
-      class="info-visit"
-      @dblclick.stop="preventDefault($event)"
-    >
-      <div
-        class="arrw_div_wrapper"
-        :style="{cursor:stack.visitTaskNum <= minVistNum?'not-allowed':'pointer',color:stack.visitTaskNum <= minVistNum?'#888':'#fff'}"
-        @click.stop.prevent="toggleSeries($event,-1)"
-        @dblclick.stop="preventDefault($event)"
-      >
+    <div v-if="stack.imageRendered && isReadingTaskViewInOrder === 1" class="info-visit"
+      @dblclick.stop="preventDefault($event)">
+      <div class="arrw_div_wrapper"
+        :style="{ cursor: stack.visitTaskNum <= minVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum <= minVistNum ? '#888' : '#fff' }"
+        @click.stop.prevent="toggleSeries($event, -1)" @dblclick.stop="preventDefault($event)">
         <i class="el-icon-caret-left" />
       </div>
       <div class="blind_name_wrapper">
         {{ stack.taskBlindName }}
       </div>
-      <div
-        class="arrw_div_wrapper"
-        :style="{cursor:stack.visitTaskNum >= maxVistNum?'not-allowed':'pointer',color:stack.visitTaskNum >= maxVistNum?'#888':'#fff'}"
-        @click.stop.prevent="toggleSeries($event,1)"
-        @dblclick.stop="preventDefault($event)"
-      >
+      <div class="arrw_div_wrapper"
+        :style="{ cursor: stack.visitTaskNum >= maxVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum >= maxVistNum ? '#888' : '#fff' }"
+        @click.stop.prevent="toggleSeries($event, 1)" @dblclick.stop="preventDefault($event)">
         <i class="el-icon-caret-right" />
       </div>
     </div>
     <div class="info-series">
-      <h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{ stack.taskBlindName }}</h2>
+      <h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{
+        stack.taskBlindName }}</h2>
       <div v-show="dicomInfo.series">Series: #{{ dicomInfo.series }}</div>
       <div>Image: #{{ dicomInfo.frame }}</div>
       <div>{{ dicomInfo.modality }}</div>
     </div>
     <div class="info-image">
       <div v-show="mousePosition.mo">
-        Pos: {{ mousePosition.x?mousePosition.x.toFixed(0):'' }}, {{ mousePosition.y?mousePosition.y.toFixed(0):'' }}
+        Pos: {{ mousePosition.x ? mousePosition.x.toFixed(0) : '' }}, {{ mousePosition.y ? mousePosition.y.toFixed(0) :
+          '' }}
       </div>
-      <div v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
+      <div
+        v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
         HU: {{ mousePosition.mo }}
       </div>
       <div v-else-if="(dicomInfo.modality === 'PT' && mousePosition.suv)">
-        SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.suv.toFixed(3) :mousePosition.suv.toFixed(digitPlaces) }}
+        SUVbw(g/ml): {{ digitPlaces === -1 ? mousePosition.suv.toFixed(3) : mousePosition.suv.toFixed(digitPlaces) }}
       </div>
       <div v-else-if="mousePosition.mo">
         Density: {{ mousePosition.mo }}
@@ -75,14 +61,20 @@
     <div class="info-subject">
       <div>{{ stack.description }}</div>
       <!-- <div>{{ dicomInfo.hospital }}</div> -->
-      <!-- <div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div> -->
+      <div v-if="dicomInfo.pid">{{ dicomInfo.pid }}</div>
+      <div v-if="dicomInfo.patientName">{{ dicomInfo.patientName }}</div>
       <!-- <div>{{ subjectCode }}</div> -->
       <!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
       <!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
-      <!-- <div>{{ dicomInfo.time }}</div> -->
+      <div v-if="dicomInfo.modality">{{ dicomInfo.modality }}</div>
+      <div v-if="dicomInfo.time">{{ dicomInfo.time }}</div>
     </div>
-    <div ref="sliderBox" class="my_slider_box" style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer" @click.stop="goViewer($event)">
-      <div :style="{top: height + '%'}" style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
+    <div ref="sliderBox" class="my_slider_box"
+      style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer"
+      @click.stop="goViewer($event)">
+      <div :style="{ top: height + '%' }"
+        style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move"
+        @click.stop.prevent="() => { return }" @mousedown.stop="sliderMousedown($event)" />
     </div>
     <div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
       {{ markers.top }}
@@ -117,7 +109,7 @@
   </div>
 </template>
 <style>
-.my_slider_box:after{
+.my_slider_box:after {
   content: '';
   position: absolute;
   bottom: -20px;
@@ -153,6 +145,7 @@ import getOrientationString from '@/views/trials/trials-panel/reading/dicoms/too
 import invertOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/invertOrientationString'
 // import calculateLongestAndShortestDiameters from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/calculateLongestAndShortestDiameters'
 import calculateSUV from '@/views/trials/trials-panel/reading/dicoms/tools/calculateSUV'
+import { convertBytes } from '@/utils/dicom-character-set'
 cornerstoneTools.external.cornerstone = cornerstone
 cornerstoneTools.external.Hammer = Hammer
 cornerstoneTools.external.cornerstoneMath = cornerstoneMath
@@ -560,7 +553,7 @@ export default {
     mouseDown(e) {
       this.image = e.detail.image
       var pointNearTool = this.pointNearTool(e)
-       if (pointNearTool) {
+      if (pointNearTool) {
         e.stopImmediatePropagation()
         e.stopPropagation()
         e.preventDefault()
@@ -572,7 +565,7 @@ export default {
             type: 'warning'
           }).then(() => {
 
-          }).catch(() => {})
+          }).catch(() => { })
           e.stopImmediatePropagation()
           e.stopPropagation()
           e.preventDefault()
@@ -670,7 +663,7 @@ export default {
       this.sliderInfo.isMove = false
     },
     getMeasureData() {
-      console.log('getMeasureData') 
+      console.log('getMeasureData')
       var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
       this.measureData = this.visitTaskList[idx].MeasureData
       const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
@@ -887,7 +880,7 @@ export default {
           } else {
             // cornerstoneTools.setToolEnabledForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
             cornerstoneTools.setToolPassiveForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
-            
+
           }
           if (this.stack.instanceId.includes(data.InstanceId) && ((this.stack.isExistMutiFrames && (data.MeasureData.frame === this.stack.frame) && data.MeasureData) || (!this.stack.isExistMutiFrames && data.MeasureData))) {
             //  console.log('renderMeasuredData', this.stack.frame,data.MeasureData.frame,this.stack.isExistMutiFrames)
@@ -989,32 +982,32 @@ export default {
           var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
           if (idx > -1) {
             DicomEvent.$emit('setCollapseActive', this.measureData[idx])
-              const measureData = {}
-              // var markName = this.measureData[idx].OrderMarkName
-              var markName = this.measureData[idx].MeasureData.data.remark
-              if (this.activeToolName === 'Eraser' && this.disabledMarks.indexOf(markName) === -1) {
-                const questionInfo = this.measureData[idx]
-                measureData.orderMarkName = markName
-                this.$emit('moveMeasureData', { measureData, questionInfo, orderMarkName: markName})
-              }
-              if ((this.disabledMarks.indexOf(markName) === -1 || !this.disabledMarks) && this.activeToolName !== 'Eraser') {
-                const questionInfo = this.measureData[idx]
-                const canvas = this.canvas.querySelector('canvas')
-                measureData.pictureBaseStr = canvas.toDataURL('image/png', 1)
-                measureData.studyId = this.stack.studyId
-                measureData.seriesId = this.stack.seriesId
-                measureData.instanceId = instanceId
-                measureData.frame = this.stack.frame ? this.stack.frame : 0
-                measureData.data = toolState.data[i]
-                measureData.type = toolType
-                measureData.thick = this.dicomInfo.thick
-                measureData.location = this.dicomInfo.location
-                measureData.ww = Math.round(viewport.voi.windowWidth)
-                measureData.wc = Math.round(viewport.voi.windowCenter)
-                measureData.data.active = false
-                this.$emit('modifyMeasureData', { measureData, questionInfo })
-              }
-            
+            const measureData = {}
+            // var markName = this.measureData[idx].OrderMarkName
+            var markName = this.measureData[idx].MeasureData.data.remark
+            if (this.activeToolName === 'Eraser' && this.disabledMarks.indexOf(markName) === -1) {
+              const questionInfo = this.measureData[idx]
+              measureData.orderMarkName = markName
+              this.$emit('moveMeasureData', { measureData, questionInfo, orderMarkName: markName })
+            }
+            if ((this.disabledMarks.indexOf(markName) === -1 || !this.disabledMarks) && this.activeToolName !== 'Eraser') {
+              const questionInfo = this.measureData[idx]
+              const canvas = this.canvas.querySelector('canvas')
+              measureData.pictureBaseStr = canvas.toDataURL('image/png', 1)
+              measureData.studyId = this.stack.studyId
+              measureData.seriesId = this.stack.seriesId
+              measureData.instanceId = instanceId
+              measureData.frame = this.stack.frame ? this.stack.frame : 0
+              measureData.data = toolState.data[i]
+              measureData.type = toolType
+              measureData.thick = this.dicomInfo.thick
+              measureData.location = this.dicomInfo.location
+              measureData.ww = Math.round(viewport.voi.windowWidth)
+              measureData.wc = Math.round(viewport.voi.windowCenter)
+              measureData.data.active = false
+              this.$emit('modifyMeasureData', { measureData, questionInfo })
+            }
+
             break
           }
         }
@@ -1115,7 +1108,7 @@ export default {
           const toolButtons = document.querySelectorAll('[data-tool]')
           // const scope = this
           Array.from(toolButtons).forEach((toolBtn) => {
-          // Add the tool
+            // Add the tool
             const toolName = toolBtn.getAttribute('data-tool')
             const apiTool = cornerstoneTools[`${toolName}Tool`]
             if (apiTool) {
@@ -1123,17 +1116,17 @@ export default {
 
               if (!toolAlreadyAddedToElement) {
                 if (toolName === 'Length') {
-                  cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true }})
+                  cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true } })
                 } else if (toolName === 'Bidirectional') {
-                // cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
-                // , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
-                  cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true }})
+                  // cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
+                  // , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
+                  cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true } })
                 } else if (toolName === 'ArrowAnnotate') {
-                  cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
+                  cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
                 } else if (toolName === 'RectangleRoi') {
-                  cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
+                  cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
                 } else if (toolName === 'CircleRoi') {
-                  cornerstoneTools.addToolForElement(element, CircleRoiTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true, showMinMax: true }})
+                  cornerstoneTools.addToolForElement(element, CircleRoiTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true, showMinMax: true } })
                 } else {
                   cornerstoneTools.addToolForElement(element, apiTool)
                 }
@@ -1159,10 +1152,10 @@ export default {
             mouseButtonMask: 4
           })
 
-        // if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
-        //   cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
-        // }
-        // cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
+          // if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
+          //   cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
+          // }
+          // cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
         }
 
         // cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
@@ -1194,9 +1187,24 @@ export default {
       ToolStateManager.clearImageIdToolState(imageId)
       e.detail.enabledElement.options = {}
       var data = e.detail.image.data
+      const patientNameElement = data.elements.x00100010
+      const patientNameBytes = new Uint8Array(
+        data.byteArray.buffer,
+        patientNameElement ? patientNameElement.dataOffset : 0,
+        patientNameElement ? patientNameElement.length : 0
+      )
+      // 解析dicom中字符集字段与解析库不一致 2025.03.04
+      let SpecificCharacterSet = data.string('x00080005')
+        ? data.string('x00080005').replace('ISO IR', 'ISO_IR')
+        : ''
+      const patientNameStr = convertBytes(
+        SpecificCharacterSet,
+        patientNameBytes
+      )
       this.dicomInfo.hospital = data.string('x00080080')
-      // this.dicomInfo.pid = data.string('x00100020')
-      this.dicomInfo.pid = data.string('x00120040')
+      this.dicomInfo.pid = data.string('x00100020')
+      this.dicomInfo.patientName = patientNameStr
+      // this.dicomInfo.pid = data.string('x00120040')
       this.dicomInfo.name = data.string('x00100010')
       this.dicomInfo.age = data.string('x00101010')
       this.dicomInfo.sex = data.string('x00100040')
@@ -1207,9 +1215,8 @@ export default {
         data.string('x00080030')
       )
       this.dicomInfo.series = data.string('x00200011')
-      this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
-        this.stack.imageIds.length
-      }`
+      this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${this.stack.imageIds.length
+        }`
       this.dicomInfo.size = `${data.uint16('x00280011')}*${data.uint16(
         'x00280010'
       )}`
@@ -1390,9 +1397,9 @@ export default {
       var element = cornerstone.getEnabledElement(this.canvas)
       const { rowPixelSpacing, colPixelSpacing } = this.getPixelSpacing(element.image)
       const dx =
-      (data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
+        (data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
       const dy =
-      (data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
+        (data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
       const length = Math.sqrt(dx * dx + dy * dy)
 
       return length.toFixed(this.digitPlaces)
@@ -1406,9 +1413,9 @@ export default {
       if (imagePlane) {
         return {
           rowPixelSpacing:
-        imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
+            imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
           colPixelSpacing:
-        imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
+            imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
         }
       }
 
@@ -1460,7 +1467,7 @@ export default {
     },
     debounce(callback, delay) {
       let timerId
-      return function() {
+      return function () {
         clearTimeout(timerId)
         timerId = setTimeout(() => {
           callback.apply(this, arguments)
@@ -1478,7 +1485,7 @@ export default {
       if (imageId) {
         ToolStateManager.clearImageIdToolState(imageId)
         let elements = cornerstone.getEnabledElementsByImageId(imageId)
-        elements.map(el=>{
+        elements.map(el => {
           cornerstone.updateImage(el.element)
         })
       }
@@ -1764,7 +1771,7 @@ export default {
       this.activeToolName = toolName
       this.$nextTick(() => {
         // console.log(cornerstoneTools.isToolActiveForElement(this.canvas, 'Bidirectional'))
-        
+
         if (toolName === 'Zoom') {
           cornerstoneTools.setToolActiveForElement(this.canvas, 'Zoom', {
             mouseButtonMask: [1, 2]
@@ -1918,7 +1925,7 @@ export default {
       for (const [key, value] of searchParams.entries()) {
         params[key] = value
       }
-      if (isNaN(params.frame)){
+      if (isNaN(params.frame)) {
         params.frame = 0
       }
       return params
@@ -1940,88 +1947,102 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .context-menu-wrapper{
-    position: absolute;
-    ul{
-      list-style: none;
-      margin: 0px;
-      padding: 0px;
+.context-menu-wrapper {
+  position: absolute;
+
+  ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+    background: #343333;
+    color: #fff;
+    margin: 0;
+    border: 1px solid #2a2a2a;
+    border-radius: 3px;
+    height: auto;
+    min-height: 50px;
+    line-height: 1.5em;
+    width: 80px;
+    box-sizing: border-box;
+  }
+
+  .menu {
+    li {
+      padding: 2px 5px;
+      position: relative;
+      border-bottom: 1px solid #666;
+
+      div {
+        padding: 5px;
+      }
+    }
+
+    .submenu {
+      position: absolute;
+      left: 77px;
+      top: -1px;
       background: #343333;
       color: #fff;
-      margin: 0;
-      border: 1px solid #2a2a2a;
-      border-radius: 3px;
-      height: auto;
-      min-height: 50px;
-      line-height: 1.5em;
-      width:80px;
-      box-sizing: border-box;
-    }
-    .menu{
+      display: none;
+
       li {
         padding: 2px 5px;
-        position: relative;
         border-bottom: 1px solid #666;
-        div{
+
+        div {
           padding: 5px;
         }
       }
-      .submenu{
-        position: absolute;
-        left: 77px;
-        top: -1px;
-        background: #343333;
-        color: #fff;
-        display: none;
-        li {
-          padding: 2px 5px;
-          border-bottom: 1px solid #666;
-          div{
-            padding: 5px;
-          }
-        }
-      }
-
-    }
-    .menu li:hover{
-      background-color: #ff5722;
-      .submenu{
-        display:block;
-      }
-    }
-    .menu_active{
-      cursor: pointer;
-    }
-    .menu_disabled{
-      cursor: not-allowed;
     }
 
   }
-  .info-visit{
-    position: absolute;
-    left:50%;
-    top: 5px;
-    transform: translateX(-50%);
-    display: flex;
-    flex-direction: row;
-    .arrw_div_wrapper{
-      width: 20px;
-      height: 20px;
-      background-color: #3f3f3f;
-      text-align: center;
-      line-height: 20px;
-      border-radius: 10%;
-    }
-    .blind_name_wrapper{
-      height: 20px;
-      line-height: 20px;
-      background-color: #00000057;
-      color: #fff;
-      padding:0 10px;
-      font-size: 14px;
+
+  .menu li:hover {
+    background-color: #ff5722;
+
+    .submenu {
+      display: block;
     }
   }
-.info-cd{
+
+  .menu_active {
+    cursor: pointer;
+  }
+
+  .menu_disabled {
+    cursor: not-allowed;
+  }
+
+}
+
+.info-visit {
+  position: absolute;
+  left: 50%;
+  top: 5px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+
+  .arrw_div_wrapper {
+    width: 20px;
+    height: 20px;
+    background-color: #3f3f3f;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 10%;
+  }
+
+  .blind_name_wrapper {
+    height: 20px;
+    line-height: 20px;
+    background-color: #00000057;
+    color: #fff;
+    padding: 0 10px;
+    font-size: 14px;
+  }
+}
+
+.info-cd {
   position: absolute;
   left: 10px;
   top: 5px;
@@ -2030,6 +2051,7 @@ export default {
   font-size: 18px;
   cursor: pointer;
 }
+
 .info-series {
   position: absolute;
   left: 10px;
@@ -2039,6 +2061,7 @@ export default {
   font-size: 12px;
   /* z-index: 1; */
 }
+
 .info-image {
   position: absolute;
   left: 10px;
@@ -2058,6 +2081,7 @@ export default {
   font-size: 12px;
   /* z-index: 1; */
 }
+
 .info-instance {
   position: absolute;
   right: 15px;
@@ -2090,6 +2114,7 @@ export default {
   margin: 10px;
   cursor: default;
 }
+
 .menu__item:hover {
   color: #ff0000;
 }
@@ -2109,11 +2134,12 @@ li:hover {
   background-color: #e0e0e2;
   color: white;
 }
+
 .msg-div {
-    position: absolute;
-    z-index: 10;
-    background-color: rgba(255, 255, 255, 0.5);
-    color: #000;
-    padding: 5px 20px;
-  }
+  position: absolute;
+  z-index: 10;
+  background-color: rgba(255, 255, 255, 0.5);
+  color: #000;
+  padding: 5px 20px;
+}
 </style>