历史监控页数据重组，新增v-viewer图片预览插件

package-lock.json

@@ -11857,6 +11857,11 @@
                 "neo-async": "^2.6.0"
             }
         },
+        "throttle-debounce": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+            "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+        },
         "through": {
             "version": "2.3.8",
             "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -12368,6 +12373,15 @@
             "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
             "dev": true
         },
+        "v-viewer": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.5.1.tgz",
+            "integrity": "sha512-Q5ICKzmYQD0qTf+hti2Lhgy6UYY2zgFr+YrN9a3yPgr7pOjYrG405Pz4+6Z6FXlhdhGysCWFJUNCI2tsIyvjWQ==",
+            "requires": {
+                "throttle-debounce": "^2.0.1",
+                "viewerjs": "^1.5.0"
+            }
+        },
         "v8-compile-cache": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
@@ -12407,6 +12421,11 @@
                 "extsprintf": "^1.2.0"
             }
         },
+        "viewerjs": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.9.0.tgz",
+            "integrity": "sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w=="
+        },
         "vm-browserify": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

package.json

@@ -14,6 +14,7 @@
         "core-js": "^3.6.5",
         "path-to-regexp": "^6.2.0",
         "style-loader": "^2.0.0",
+        "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
         "vuex": "^3.4.0"

src/main.js

@@ -22,6 +22,13 @@ Vue.component('happy-scroll', HappyScroll)
 // 引入css
 import 'vue-happy-scroll/docs/happy-scroll.css'
 
+// 图片预览插件 viewer
+import 'viewerjs/dist/viewer.css'
+import viewer from 'v-viewer'
+
+Vue.use(viewer)
+//配置项
+
 new Vue({
     router,
     store,

src/views/historyMonitoring/index.vue

@@ -29,13 +29,13 @@
             :pagination="pagination"
             @change="handleGetHistoryList"
         >
-            <span slot="pic" slot-scope="text">
+            <span slot="pics" slot-scope="text">
             <template>
                 <span v-if="text.putPath || text.goodsPath ||text.outputPath">
-<!--                    {{text.putPath}} {{text.goodsPath}} {{text.outputPath}}-->
-                    <img class="historyImg" :src="imgUrl+text.putPath" alt="">
-                    <img class="historyImg" :src="imgUrl+text.goodsPath" alt="">
-                    <img class="historyImg" :src="imgUrl+text.outputPath" alt="">
+                    <viewer :images="text.pics">
+                       <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
+                            :key="index"/>
+                    </viewer>
                 </span>
                 <span v-else>
                     暂无图片
@@ -117,7 +117,7 @@ export default {
                 {
                     title: "照片（入库 货位 出库）",
                     // dataIndex: "pic",
-                    scopedSlots: {customRender: 'pic'}
+                    scopedSlots: {customRender: 'pics'}
                 },
                 {
                     title: "视频状态",
@@ -172,7 +172,16 @@ export default {
                     ...this.queryParam
                 }
             }).then(res => {
-                console.log(res)
+                // let pics =new Array()
+                res.data.map(function (item) {
+                    console.log(item)
+                    console.log('000')
+                    var pic = [
+                        item.putPath, item.goodsPath, item.outputPath
+                    ]
+                    item.pics = pic
+                })
+                console.log(res.data)
                 this.data = res.data
             }).catch(err => {