修改bug

package.json

@@ -61,6 +61,7 @@
     "quill": "1.3.7",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "v-viewer": "^1.6.4",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",

src/main.js

@@ -25,7 +25,8 @@ import RightToolbar from "@/components/RightToolbar"
 import * as echarts from "echarts";
 import '@/utils/dialog.js'
 import { toSuperFixed } from "./api/warehouseBusiness/restructure";
-
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 // 解决浮点数的问题
 import _ from 'lodash';
 
@@ -91,7 +92,25 @@ Vue.use(Element, {
 })
 
 Vue.config.productionTip = false
-
+Vue.use(Viewer)
+Viewer.setDefaults({
+  Options: {
+    'inline': true, // 启用 inline 模式
+    'button': true, // 显示右上角关闭按钮
+    'navbar': true, // 显示缩略图导航
+    'title': true, // 显示当前图片的标题
+    'toolbar': true, // 显示工具栏
+    'tooltip': true, // 显示缩放百分比
+    'movable': true, // 图片是否可移动
+    'zoomable': true, // 图片是否可缩放
+    'rotatable': true, // 图片是否可旋转
+    'scalable': true, // 图片是否可翻转
+    'transition': true, // 使用 CSS3 过度
+    'fullscreen': true, // 播放时是否全屏
+    'keyboard': true, // 是否支持键盘
+    'url': 'data-source' // 设置大图片的 url
+  }
+})
 new Vue({
   el: '#app',
   router,

src/views/monitor/alrtmList/index.vue

@@ -75,8 +75,11 @@
               {{  scope.row.deviceState | deviceFormat(deviceOptions)  }}
             </span>
           </span>
-          <span v-else-if="item.label == 'alarmPicUrl'" @click="openImg(scope.row.alarmPicUrl)">
-            <img ref="img" :src="scope.row.alarmPicUrl" style="width: 100px;height: 60px;" alt="">
+          <span v-else-if="item.label == 'alarmPicUrl'">
+            <!-- <img ref="img" :src="scope.row.alarmPicUrl" style="width: 100px;height: 60px;" alt=""> -->
+            <viewer>
+              <img :src="scope.row.alarmPicUrl" style="width: 100px;height: 60px;" alt="" title="点击放大" />
+            </viewer>
           </span>
           <span v-else>{{  scope.row[item.label]  }}</span>
         </template>
@@ -84,11 +87,6 @@
     </el-table>
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
-    <el-dialog title="预警图片" v-dialogDrag :visible.sync="dialogImg" @closed="imgClosed" :close-on-click-modal="false">
-      <div style="width:100%; height:60vh;">
-        <img ref="img" :src="imgUrl" style="width: 100%;height:100%;" alt="">
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -102,7 +100,6 @@ export default {
   data() {
     return {
       show: false,
-      dialogImg: false,
       tableOption: tableOption,
       // 遮罩层
       loading: true,
@@ -117,8 +114,7 @@ export default {
       },
       showSearch: true,
       dealOptions: [],
-      deviceOption: [],
-      imgUrl: '',
+      deviceOptions: [],
     };
   },
   created() {
@@ -186,15 +182,6 @@ export default {
             this.handleQuery()
           });
       })
-    },
-    openImg(row) {
-      if (row) {
-        this.imgUrl = row;
-        this.dialogImg = true
-      }
-    },
-    imgClosed() {
-      this.imgUrl = this.$options.data().imgUrl
     }
   }
 };