新增更新缩略图功能

src/api/trials.js

@@ -4422,4 +4422,12 @@ export function getTrialSubjectVisitMarkList(data) {
     method: 'post',
     data
   })
+}
+// 更新缩略图
+export function updateImageResizePath(data) {
+  return request({
+    url: `/Series/updateImageResizePath`,
+    method: 'post',
+    data
+  })
 }

src/views/dicom-show/dicom-study.vue

@@ -29,8 +29,12 @@
                           :src="item.previewImageUrl"
                           fit="fill"
                         /> -->
-                        <img class="image-preview" :src="item.previewImageUrl" crossorigin="anonymous" alt=""
+                        <div class="imageBox" style="width: 72px;height:72px;">
-                          style="width: 72px;height:72px;" fit="fill">
+                          <img class="image-preview" :src="item.previewImageUrl" crossorigin="anonymous" alt=""
+                            style="width: 72px;height:72px;" fit="fill" />
+                          <i class="el-icon-refresh" :title="$t('tip:refreshImage')"
+                            @click.stop="refreshImage(item)"></i>
+                        </div>
                         <div class="viewernavitextwrapper">
                           <div style="padding: 1px 5px 1px 1px;display: flex;justify-content: space-between;">
                             <div v-if="item.keySeries" style="color:red">
@@ -136,7 +140,7 @@ import * as cornerstone from 'cornerstone-core'
 import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
 import dicomViewer from '@/components/Dicom/DicomViewer'
 import { getStudyInfo, getSeriesList } from '@/api/reading'
-import { getInstanceList, getPatientSeriesList, setSeriesStatus, setInstanceStatus } from '@/api/trials'
+import { getInstanceList, getPatientSeriesList, setSeriesStatus, setInstanceStatus, updateImageResizePath } from '@/api/trials'
 
 import requestPoolManager from '@/utils/request-pool'
 import store from '@/store'
@@ -247,6 +251,62 @@ export default {
     workSpeedclose(true)
   },
   methods: {
+    async updateImageResizePath(data) {
+      try {
+        let res = await updateImageResizePath(data)
+        if (res.IsSuccess) {
+          this.$message.success(this.$t("message:tip:updateImageResizePath:success"))
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async refreshImage(item) {
+      let thumbnailPath = item.previewImageUrl.split(this.OSSclientConfig.basePath)[1]
+      let blob = await this.dicomToPng(item.imageIds[0])
+      let OSSclient = this.OSSclient
+      try {
+        let seriesRes = await OSSclient.put(thumbnailPath, blob)
+        if (seriesRes && seriesRes.url) {
+          let path = this.$getObjectName(seriesRes.url)
+          item.previewImageUrl = seriesRes.url
+          let data = {
+            seriesId: item.seriesId,
+            ImageResizePath: path
+          }
+          this.updateImageResizePath(data)
+        }
+      } catch (e) {
+
+      }
+    },
+    dicomToPng(imageId) {
+      return new Promise((resolve) => {
+        cornerstone.loadImage(imageId).then(async (image) => {
+          let width = image.columns, height = image.rows;
+          let canvas = document.createElement('canvas')
+          canvas.width = (width * 60) / height
+          canvas.height = 60
+          if (image) {
+            cornerstone.renderToCanvas(canvas, image)
+            // 将 Canvas 图像对象转换为 PNG 格式
+            let blob = await this.canvasToBlob(canvas)
+            resolve(blob)
+          } else {
+            resolve()
+          }
+        })
+      }).catch((reason) => {
+        reason()
+      })
+    },
+    canvasToBlob(canvas) {
+      return new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+          resolve(blob)
+        })
+      })
+    },
     async loadStudy() {
       let params = {}
       if (this.isPacs) {
@@ -905,7 +965,18 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.imageBox {
+  position: relative;
+
+  i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+  }
+}
+
 .viewerContainer .el-tabs--border-card {
   background: none;
   border: none;

src/views/dicom-show/dicom-visit.vue

@@ -45,8 +45,12 @@
                           style="position: relative;margin-bottom:5px;border-radius: 2px;border: 1px solid #404040;"
                           series-type="current" @click="showSeriesImage($event, index, i, series)">
                           <div class="viewernavigatorwrapper">
-                            <img class="image-preview" :src="series.previewImageUrl" crossorigin="anonymous" alt=""
+                            <div class="imageBox" style="width: 72px;height:72px;">
-                              style="width: 85px;height:85px;" fit="fill">
+                              <img class="image-preview" :src="series.previewImageUrl" crossorigin="anonymous" alt=""
+                                style="width: 72px;height:72px;" fit="fill" />
+                              <i class="el-icon-refresh" :title="$t('tip:refreshImage')"
+                                @click.stop="refreshImage(series)"></i>
+                            </div>
                             <div class="viewernavitextwrapper">
                               <div style="padding: 1px 5px 1px 1px;display: flex;justify-content: space-between;">
                                 <div>#{{ series.seriesNumber }}</div>
@@ -184,8 +188,12 @@
                                   <div class="viewernavigatorwrapper"
                                     style="position: relative;border:1px solid #434343;" series-type="relation"
                                     @click="showRelationSeriesImage($event, seriesItem, studyIndex, index)">
-                                    <img class="image-preview" :src="seriesItem.previewImageUrl" crossorigin="anonymous"
+                                    <div class="imageBox" style="width: 72px;height:72px;">
-                                      alt="" style="width: 85px;height:85px;" fit="fill">
+                                      <img class="image-preview" :src="seriesItem.previewImageUrl"
+                                        crossorigin="anonymous" alt="" style="width: 72px;height:72px;" fit="fill" />
+                                      <i class="el-icon-refresh" :title="$t('tip:refreshImage')"
+                                        @click.stop="refreshImage(item)"></i>
+                                    </div>
 
                                     <div class="viewernavitextwrapper">
                                       <div
@@ -273,7 +281,7 @@ import * as cornerstone from 'cornerstone-core'
 import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
 import dicomViewer from '@/components/Dicom/DicomViewer'
 import { getVisitStudyList, getAllRelationStudyList, getSeriesList } from '@/api/reading'
-import { setSeriesStatus, setInstanceStatus } from '@/api/trials'
+import { setSeriesStatus, setInstanceStatus, updateImageResizePath } from '@/api/trials'
 import { getTaskUploadedDicomStudyList } from '@/api/reading'
 import requestPoolManager from '@/utils/request-pool'
 import store from '@/store'
@@ -358,6 +366,62 @@ export default {
     workSpeedclose(true)
   },
   methods: {
+    async updateImageResizePath(data) {
+      try {
+        let res = await updateImageResizePath(data)
+        if (res.IsSuccess) {
+          this.$message.success(this.$t("message:tip:updateImageResizePath:success"))
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async refreshImage(item) {
+      let thumbnailPath = item.previewImageUrl.split(this.OSSclientConfig.basePath)[1]
+      let blob = await this.dicomToPng(item.imageIds[0])
+      let OSSclient = this.OSSclient
+      try {
+        let seriesRes = await OSSclient.put(thumbnailPath, blob)
+        if (seriesRes && seriesRes.url) {
+          let path = this.$getObjectName(seriesRes.url)
+          item.previewImageUrl = seriesRes.url
+          let data = {
+            seriesId: item.seriesId,
+            ImageResizePath: path
+          }
+          this.updateImageResizePath(data)
+        }
+      } catch (e) {
+
+      }
+    },
+    dicomToPng(imageId) {
+      return new Promise((resolve) => {
+        cornerstone.loadImage(imageId).then(async (image) => {
+          let width = image.columns, height = image.rows;
+          let canvas = document.createElement('canvas')
+          canvas.width = (width * 60) / height
+          canvas.height = 60
+          if (image) {
+            cornerstone.renderToCanvas(canvas, image)
+            // 将 Canvas 图像对象转换为 PNG 格式
+            let blob = await this.canvasToBlob(canvas)
+            resolve(blob)
+          } else {
+            resolve()
+          }
+        })
+      }).catch((reason) => {
+        reason()
+      })
+    },
+    canvasToBlob(canvas) {
+      return new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+          resolve(blob)
+        })
+      })
+    },
     // 获取某个访视下所有的检查信息
     async getStudiesInfo() {
       this.studyList = []
@@ -947,7 +1011,18 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+.imageBox {
+  position: relative;
+
+  i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+  }
+}
+
 .viewerContainer .el-tabs--border-card {
   background: none;
   border: none;