预览图片修改

2024-09-02 14:12:26 +08:00 · 2024-09-02 14:12:26 +08:00 · f0eda2bc66
parent 8f274aad89
commit f0eda2bc66
10 changed files with 137 additions and 141 deletions
--- a/src/main.js
+++ b/src/main.js
@ -28,25 +28,22 @@ Vue.use(permission)

 import Viewer from 'v-viewer'
 import './assets/css/viewer.css'
-
-Vue.use(Viewer)
 Viewer.setDefaults({
-  Options: {
-    'inline': true,
-    'button': true,
-    'navbar': true,
-    'title': true,
-    'toolbar': true,
-    'tooltip': true,
-    'movable': true,
-    'zoomable': true,
-    'rotatable': true,
-    'scalable': true,
-    'transition': true,
-    'keyboard': true,
-    'url': 'data-source'
+  // navbar: true, //底部缩略图
+  toolbar: {
+    zoomIn: true,
+    zoomOut: true,
+    reset: true,
+    prev: true,
+    next: true,
+    rotateLeft: true,
+    rotateRight: true,
+    flipHorizontal: true,
+    flipVertical: true,
  }
 })
+Vue.use(Viewer)
+

 import hasPermi from './directive/permission'
 Vue.use(hasPermi)
--- a/src/views/trials/trials-panel/reading/ad-review/index.vue
+++ b/src/views/trials/trials-panel/reading/ad-review/index.vue
@ -445,7 +445,6 @@ import SignForm from "@/views/trials/components/newSignForm";
 import DicomEvent from "@/views/trials/trials-panel/reading/dicoms/components/DicomEvent";
 // import store from '@/store'
 import { changeURLStatic } from "@/utils/history.js";
-import Viewer from "v-viewer";
 export default {
  name: "AdReview",
  components: { SignForm },
@ -532,7 +531,6 @@ export default {
  //   }
  // },
  mounted() {
-    this.initializeViewer();
    this.criterionType = parseInt(this.$route.query.criterionType);
    this.getAdInfo();
    if (this.isReadingShowPreviousResults) {
@ -960,19 +958,7 @@ export default {
        this.loading = false;
        console.log(e);
      }
-    },
-    initializeViewer() {
-      Viewer.setDefaults({
-        toolbar: {
-          zoomIn: true,
-          zoomOut: true,
-          rotateLeft: true,
-          rotateRight: true,
-          flipHorizontal: true,
-          flipVertical: true,
-        },
-      });
-    },
+    }
  },
 };
 </script>
--- a/src/views/trials/trials-panel/reading/dicoms/components/Lugano/QuestionForm.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Lugano/QuestionForm.vue
@ -276,7 +276,6 @@ import { submitTableQuestion, deleteReadingRowAnswer, getIsSuvMaxLesion } from '
 // import { uploadPrintscreen } from '@/api/reading'
 import DicomEvent from './../DicomEvent'
 import store from '@/store'
-import Viewer from 'v-viewer'
 export default {
  name: 'MeasurementForm',
  props: {
@ -353,7 +352,6 @@ export default {
    }
  },
  mounted() {
-    this.initializeViewer()
    this.trialId = this.$route.query.trialId
    this.initForm()
    DicomEvent.$on('handleImageQualityAbnormal', () => {
@ -380,11 +378,6 @@ export default {
        }
      }
    },
-    initializeViewer() {
-      Viewer.setDefaults({
-        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
-      })
-    },
    previewImage() {
      this.$refs.viewer[0].$viewer.show()
    },
--- a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionFormItem.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionFormItem.vue
@ -239,7 +239,7 @@
 <!--            </span>-->
 <!--          </div>-->
        </el-upload>
-        <el-dialog
+        <!-- <el-dialog
          v-if="question.Type==='upload'"
          append-to-body
          :visible.sync="imgVisible"
@ -250,7 +250,20 @@
              加载中<span class="dot">...</span>
            </div>
          </el-image>
-        </el-dialog>
+        </el-dialog> -->
+        <viewer
+          v-if="question.Type==='upload' && imgVisible"
+          :ref="imageUrl"
+          style="margin:0 10px;"
+          :images="[imageUrl]"
+        >
+          <img
+            v-show="false"
+            crossorigin="anonymous"
+            :src="imageUrl"
+            alt="Image"
+          >
+        </viewer>
      </el-form-item>
    </template>

@ -801,6 +814,9 @@ export default {
      }else{
        this.imageUrl = this.OSSclientConfig.basePath + file.url
        this.imgVisible = true
+        this.$nextTick(()=>{
+          this.$refs[this.imageUrl].$viewer.show()
+        })
      }
    },
    // 删除图片
--- a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionItem.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionItem.vue
@ -138,11 +138,24 @@
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
+            <viewer
+              :ref="file.url"
+              :images="[imageUrl]"
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+              "
+            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="OSSclientConfig.basePath + file.url"
+                crossOrigin="anonymous"
                alt=""
-            >
+                style="max-width: 100%; max-height: 100%"
+              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
@ -159,6 +172,7 @@
                  <i class="el-icon-delete" />
                </span>
              </span>
+            </viewer>
          </div>
        </el-upload>
        <el-dialog
@ -308,7 +322,7 @@ export default {
        window.open(this.OSSclientConfig.basePath + file.url,'_blank')
      }else{
        this.imageUrl = this.OSSclientConfig.basePath + file.url
-        this.imgVisible = true
+        this.$refs[file.url].$viewer.show();
      }
    },
    // 删除图片
--- a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionTableFormItem.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionTableFormItem.vue
@ -148,11 +148,24 @@
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
+            <viewer
+              :ref="file.url"
+              :images="[imageUrl]"
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+              "
+            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="OSSclientConfig.basePath + file.url"
+                crossOrigin="anonymous"
                alt=""
-            >
+                style="max-width: 100%; max-height: 100%"
+              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
@ -169,6 +182,7 @@
                  <i class="el-icon-delete" />
                </span>
              </span>
+            </viewer>
          </div>
        </el-upload>
        <el-dialog
@ -492,7 +506,8 @@ export default {
        window.open(this.OSSclientConfig.basePath + file.url,'_blank')
      }else{
        this.imageUrl = this.OSSclientConfig.basePath + file.url
-        this.imgVisible = true
+        // this.imgVisible = true
+        this.$refs[file.url].$viewer.show()
      }
      
    },
--- a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeReportPageUpload.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeReportPageUpload.vue
@ -14,12 +14,24 @@
    >
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{file}">
+        <viewer
+          :ref="file.url"
+          :images="[imageUrl]"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          "
+        >
          <img
            class="el-upload-list__item-thumbnail"
-          crossOrigin="Anonymous"
            :src="OSSclientConfig.basePath + file.url"
+            crossOrigin="anonymous"
            alt=""
-        >
+            style="max-width: 100%; max-height: 100%"
+          />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
@ -36,19 +48,9 @@
              <i class="el-icon-delete" />
            </span>
          </span>
+        </viewer>
      </div>
    </el-upload>
-    <el-dialog
-      append-to-body
-      :visible.sync="imgVisible"
-      width="600px"
-    >
-      <el-image :src="imageUrl" width="100%" crossOrigin="Anonymous">
-        <div slot="placeholder" class="image-slot">
-          加载中<span class="dot">...</span>
-        </div>
-      </el-image>
-    </el-dialog>
  </div>
 </template>

@ -142,7 +144,8 @@ name: "CustomizeReportPageUpload",
        window.open(this.OSSclientConfig.basePath + file.url,'_blank')
      }else{
        this.imageUrl = this.OSSclientConfig.basePath + file.url
-        this.imgVisible = true
+        // this.imgVisible = true
+        this.$refs[file.url].$viewer.show()
      }
    },
    // 删除图片
--- a/src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue
+++ b/src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue
@ -143,7 +143,6 @@ import { getMedicalReviewDialog } from '@/api/trials'
 import FeedbackForm from './FeedbackForm'
 import mimAvatar from '@/assets/MIM.png'
 import irAvatar from '@/assets/IR.png'
-import Viewer from 'v-viewer'
 export default {
  name: 'ChatForm',
  components: { FeedbackForm },
@ -177,7 +176,6 @@ export default {
    }
  },
  mounted() {
-    this.initializeViewer()
    this.getMessageList()
  },
  methods: {
@ -213,11 +211,6 @@ export default {
      this.imagePath = `${this.OSSclientConfig.basePath}${path}`
      this.previewDialog = true
      this.$refs[path][0].$viewer.show()
-    },
-    initializeViewer() {
-      Viewer.setDefaults({
-        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
-      })
    }
  }

--- a/src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue
+++ b/src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue
@ -171,7 +171,6 @@ import { getMedicalReviewDialog, sendMedicalReviewDialog } from '@/api/trials'
 import FeedbackForm from '@/views/trials/trials-panel/reading/medical-feedback/components/FeedbackForm'
 import mimAvatar from '@/assets/MIM.png'
 import irAvatar from '@/assets/IR.png'
-import Viewer from 'v-viewer'
 export default {
  name: 'ChatForm',
  components: {
@ -207,7 +206,6 @@ export default {
    }
  },
  mounted() {
-    this.initializeViewer()
    this.getMessageList()
  },
  methods: {
@ -261,11 +259,6 @@ export default {
      this.irFeedbackForm.title = this.$t('trials:medicalFeedback:title:feedback')

      this.irFeedbackForm.visible = true
-    },
-    initializeViewer() {
-      Viewer.setDefaults({
-        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
-      })
    }
  }

--- a/src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue
+++ b/src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue
@ -197,7 +197,6 @@
 import { saveMedicalReviewInfo } from "@/api/trials";
 import ChatForm from "./ChatForm";
 import CloseQC from "./CloseQC";
-import Viewer from "v-viewer";
 export default {
  name: "AuditConclusions",
  components: {
@ -253,7 +252,6 @@ export default {
    };
  },
  mounted() {
-    this.initializeViewer();
    this.initForm();
  },
  methods: {
@ -435,21 +433,9 @@ export default {
      var idx = this.fileList.findIndex((i) => i.url === file.url);
      if (idx === -1) return;
      this.fileList.splice(idx, 1);
-    },
-    initializeViewer() {
-      Viewer.setDefaults({
-        toolbar: {
-          zoomIn: true,
-          zoomOut: true,
-          rotateLeft: true,
-          rotateRight: true,
-          flipHorizontal: true,
-          flipVertical: true,
-        },
-      });
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .conclusions {