save

package-lock.json

@@ -2303,6 +2303,14 @@
             "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
             "dev": true
         },
+        "aes-decrypter": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+            "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+            "requires": {
+                "pkcs7": "^0.2.3"
+            }
+        },
         "aggregate-error": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -4832,6 +4840,11 @@
                 }
             }
         },
+        "dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
         "domain-browser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5077,6 +5090,11 @@
                 "is-symbol": "^1.0.2"
             }
         },
+        "es5-shim": {
+            "version": "4.5.14",
+            "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.14.tgz",
+            "integrity": "sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg=="
+        },
         "escalade": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
@@ -6266,6 +6284,22 @@
             "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
             "dev": true
         },
+        "global": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+            "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+            "requires": {
+                "min-document": "^2.19.0",
+                "process": "~0.5.1"
+            },
+            "dependencies": {
+                "process": {
+                    "version": "0.5.2",
+                    "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+                    "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+                }
+            }
+        },
         "globals": {
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6826,6 +6860,11 @@
             "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
             "dev": true
         },
+        "individual": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+            "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+        },
         "infer-owner": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -7179,6 +7218,11 @@
             "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
             "dev": true
         },
+        "is-function": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+        },
         "is-glob": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -7790,6 +7834,11 @@
                 "yallist": "^3.0.2"
             }
         },
+        "m3u8-parser": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+            "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+        },
         "make-dir": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -8069,6 +8118,14 @@
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
             "dev": true
         },
+        "min-document": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+            "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+            "requires": {
+                "dom-walk": "^0.1.0"
+            }
+        },
         "mini-css-extract-plugin": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -8276,6 +8333,11 @@
             "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
             "dev": true
         },
+        "mux.js": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+            "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
         "mz": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -8995,6 +9057,11 @@
                 "safe-buffer": "^5.1.1"
             }
         },
+        "parse-headers": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
+            "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
+        },
         "parse-json": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz",
@@ -9145,6 +9212,11 @@
                 "pinkie": "^2.0.0"
             }
         },
+        "pkcs7": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+            "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+        },
         "pkg-dir": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -9813,8 +9885,7 @@
         "process": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
-            "dev": true
         },
         "process-nextick-args": {
             "version": "2.0.1",
@@ -10488,6 +10559,14 @@
                 "aproba": "^1.1.1"
             }
         },
+        "rust-result": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+            "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+            "requires": {
+                "individual": "^2.0.0"
+            }
+        },
         "rxjs": {
             "version": "6.6.2",
             "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
@@ -10503,6 +10582,14 @@
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
             "dev": true
         },
+        "safe-json-parse": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+            "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+            "requires": {
+                "rust-result": "^1.0.0"
+            }
+        },
         "safe-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -11913,6 +12000,11 @@
             "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
             "dev": true
         },
+        "tsml": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+            "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+        },
         "tty-browserify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -12183,6 +12275,11 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "url-toolkit": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.1.tgz",
+            "integrity": "sha512-8+DzgrtDZYZGhHaAop5WGVghMdCfOLGbhcArsJD0qDll71FXa7EeKxi2hilPIscn2nwMz4PRjML32Sz4JTN0Xw=="
+        },
         "use": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -12281,6 +12378,99 @@
                 "extsprintf": "^1.2.0"
             }
         },
+        "video.js": {
+            "version": "6.13.0",
+            "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+            "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+            "requires": {
+                "babel-runtime": "^6.9.2",
+                "global": "4.3.2",
+                "safe-json-parse": "4.0.0",
+                "tsml": "1.0.1",
+                "videojs-font": "2.1.0",
+                "videojs-ie8": "1.1.2",
+                "videojs-vtt.js": "0.12.6",
+                "xhr": "2.4.0"
+            }
+        },
+        "videojs-contrib-hls": {
+            "version": "5.15.0",
+            "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+            "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+            "requires": {
+                "aes-decrypter": "1.0.3",
+                "global": "^4.3.0",
+                "m3u8-parser": "2.1.0",
+                "mux.js": "4.3.2",
+                "url-toolkit": "^2.1.3",
+                "video.js": "^5.19.1 || ^6.2.0",
+                "videojs-contrib-media-sources": "4.7.2",
+                "webwackify": "0.1.6"
+            }
+        },
+        "videojs-contrib-media-sources": {
+            "version": "4.7.2",
+            "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+            "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+            "requires": {
+                "global": "^4.3.0",
+                "mux.js": "4.3.2",
+                "video.js": "^5.17.0 || ^6.2.0",
+                "webwackify": "0.1.6"
+            }
+        },
+        "videojs-flash": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
+            "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
+            "requires": {
+                "global": "^4.4.0",
+                "video.js": "^6 || ^7",
+                "videojs-swf": "5.4.2"
+            },
+            "dependencies": {
+                "global": {
+                    "version": "4.4.0",
+                    "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+                    "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+                    "requires": {
+                        "min-document": "^2.19.0",
+                        "process": "^0.11.10"
+                    }
+                }
+            }
+        },
+        "videojs-font": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+            "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+        },
+        "videojs-hotkeys": {
+            "version": "0.2.27",
+            "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz",
+            "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ=="
+        },
+        "videojs-ie8": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+            "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+            "requires": {
+                "es5-shim": "^4.5.1"
+            }
+        },
+        "videojs-swf": {
+            "version": "5.4.2",
+            "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
+            "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+        },
+        "videojs-vtt.js": {
+            "version": "0.12.6",
+            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+            "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+            "requires": {
+                "global": "^4.3.1"
+            }
+        },
         "vm-browserify": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -12484,6 +12674,18 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
+        "vue-video-player": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
+            "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
+            "requires": {
+                "object-assign": "^4.1.1",
+                "video.js": "^6.6.0",
+                "videojs-contrib-hls": "^5.12.2",
+                "videojs-flash": "^2.1.0",
+                "videojs-hotkeys": "^0.2.20"
+            }
+        },
         "vuex": {
             "version": "3.5.1",
             "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
@@ -13126,6 +13328,11 @@
             "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
             "dev": true
         },
+        "webwackify": {
+            "version": "0.1.6",
+            "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+            "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+        },
         "which": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -13260,11 +13467,21 @@
                 "async-limiter": "~1.0.0"
             }
         },
+        "xhr": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+            "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+            "requires": {
+                "global": "~4.3.0",
+                "is-function": "^1.0.1",
+                "parse-headers": "^2.0.0",
+                "xtend": "^4.0.0"
+            }
+        },
         "xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
-            "dev": true
         },
         "y18n": {
             "version": "4.0.0",

package.json

@@ -14,6 +14,7 @@
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
+        "vue-video-player": "^5.0.2",
         "vuex": "^3.4.0"
     },
     "devDependencies": {

src/views/history/index.vue

@@ -9,19 +9,17 @@
             @search="handleSearch"
         ></a-input-search>'
         <a-table :rowKey="record => record.id" :columns="columns" :dataSource="dataSource">
-            <div slot="filePath" slot-scope="text, record">
+            <div slot="mediaPath" slot-scope="text, record">
+                <a :href="record.mediaPath" target="_blank">
                     <img
                         v-if="imglist.some(item => record.mediaType.toLowerCase() === item)"
-                    :src="record.filePath"
+                        :src="record.mediaPath"
                         alt="内容图片"
                         style="width: 140px; cursor:pointer;"
-                    @click="handlePopup('image', record.filePath)"
                     />
-                <span
+
-                    v-else
+                    <span v-else style="color: #40a9ff; cursor:pointer;">{{ record.mediaPath }}</span>
-                    style="color: #40a9ff; cursor:pointer;"
+                </a>
-                    @click="handlePopup('video', record.filePath)"
-                >{{record.filePath}}</span>
             </div>
         </a-table>
         <a-drawer placement="bottom" :visible="drawer" @close="onClose">
@@ -31,16 +29,40 @@
                 alt="内容图片"
                 style="height: 500px"
             />
-            <video v-else style="height: 500px" :src="showDrawer.url" controls></video>
+
+            <!-- <video-player
+                v-else
+                class="flex"
+                style="height: 500px;"
+                ref="videoPlayer"
+                :options="playerOptions"
+            ></video-player>-->
         </a-drawer>
     </div>
 </template>
 
 <script>
+// require styles
+import "video.js/dist/video-js.css";
+// import { videoPlayer } from "vue-video-player";
 export default {
     name: "history",
+    components: {
+        // videoPlayer
+    },
     data() {
         return {
+            playerOptions: {
+                autoplay: true,
+                muted: true,
+                language: "zh-CN",
+                height: 500,
+                sources: [
+                    {
+                        src: ""
+                    }
+                ]
+            },
             search: "",
             columns: [
                 {
@@ -60,9 +82,9 @@ export default {
                 },
                 {
                     title: "内容",
-                    dataIndex: "filePath",
+                    dataIndex: "mediaPath",
                     scopedSlots: {
-                        customRender: "filePath"
+                        customRender: "mediaPath"
                     },
                     width: 300
                 }
@@ -96,13 +118,15 @@ export default {
                     }
                 })
                 .then(res => {
+                    // res.data[1].mediaPath =
+                    //     "http://gitlab.zhehekeji.com/security_check/security_front/raw/1.0.0/src/assets/video/video2.mp4";
                     this.dataSource = res.data;
                 });
         },
         handlePopup(type, url) {
             this.drawer = true;
             this.showDrawer.type = type;
-            this.showDrawer.url = url;
+            this.playerOptions.sources[0].src = url;
         },
         onClose() {
             this.drawer = false;
@@ -112,7 +136,7 @@ export default {
 };
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .history {
     padding: 24px;
 }