commit

package-lock.json

@@ -3718,6 +3718,14 @@
         "printj": "~1.1.0"
       }
     },
+    "aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha512-rsx8pfx7wJsn+ziYbpJ8XA5c93hKAtBCrfydxJqJCMT+qfjipd/B5wC2xHtBcoxyvlqJcpeAo3K55t0lXOn9yQ==",
+      "requires": {
+        "pkcs7": "^0.2.3"
+      }
+    },
     "ajv": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
@@ -7218,6 +7226,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/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",
@@ -7540,6 +7553,11 @@
         "next-tick": "~1.0.0"
       }
     },
+    "es5-shim": {
+      "version": "4.6.7",
+      "resolved": "https://registry.npmmirror.com/es5-shim/-/es5-shim-4.6.7.tgz",
+      "integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ=="
+    },
     "es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@@ -8525,6 +8543,22 @@
         "is-glob": "^4.0.1"
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
+      "integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
+          "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+        }
+      }
+    },
     "global-modules-path": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/global-modules-path/-/global-modules-path-2.3.1.tgz",
@@ -9330,6 +9364,11 @@
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
       "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -9611,6 +9650,11 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/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",
@@ -10264,6 +10308,11 @@
         "yallist": "^2.1.2"
       }
     },
+    "m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha512-WbEpQ2FUaNGbJ0YanSeyj9D9ruu4FUvz+ZvebIzI2bSME+PUwcPXO1kKXZkjcPUAFruDikoOI5fWQNIA6JCCOQ=="
+    },
     "make-dir": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@@ -10493,6 +10542,14 @@
       "resolved": "https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz",
       "integrity": "sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "min-dom": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-3.1.3.tgz",
@@ -10703,6 +10760,11 @@
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
       "dev": true
     },
+    "mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-4.3.2.tgz",
+      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+    },
     "nan": {
       "version": "2.14.2",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
@@ -11408,8 +11470,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -11798,6 +11859,11 @@
         }
       }
     },
+    "parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "parse-json": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -11940,6 +12006,11 @@
       "resolved": "https://registry.npmjs.org/pinyin-match/-/pinyin-match-1.0.9.tgz",
       "integrity": "sha512-3N3gdgKEElSDgZ8wu47wqvGOqMQvGjwK1eKdsMQDdbHrVBBo10KEgcFGMW9FIgrqHcdMRAB4+tj8irWCRznHJA=="
     },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha512-kJRwmADEQUg+qJyRgWLtpEL9q9cFjZschejTEK3GRjKvnsU9G5WWoe/wKqRgbBoqWdVSeTUKP6vIA3Y72M3rWA=="
+    },
     "pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -13923,8 +13994,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -14669,6 +14739,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -14699,6 +14777,14 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "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",
@@ -16433,6 +16519,11 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -16786,6 +16877,11 @@
         "unidecode": "0.1.8"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmmirror.com/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -16937,6 +17033,99 @@
         }
       }
     },
+    "video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmmirror.com/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.npmmirror.com/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.npmmirror.com/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.npmmirror.com/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.npmmirror.com/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.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+    },
+    "videojs-hotkeys": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmmirror.com/videojs-hotkeys/-/videojs-hotkeys-0.2.28.tgz",
+      "integrity": "sha512-M8rlD5OSB3EDRdbS4MRNlGKFpA2sSIStmUPvy5zfl/NigzWaN6r4wnb32rEN0v97GiQwmUfXSmqrPNrXhiFQmQ=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha512-0Zb2T4MLkpfZbeGMK/Z93b8Lrepr+rLFoHgQV1CoDeFqXvH7b+Vsd/VHoILGxQrgCSHFQ7mAODR6oyMjuiD4/g==",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmmirror.com/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmmirror.com/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",
@@ -17117,6 +17306,18 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/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"
+      }
+    },
     "vue2-animate": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/vue2-animate/-/vue2-animate-2.1.4.tgz",
@@ -18367,6 +18568,11 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmmirror.com/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",
@@ -18453,6 +18659,17 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha512-TUbBsdAuJbX8olk9hsDwGK8P1ri1XlV+PdEWkYw+HQQbpkiBR8PLgD1F3kQDPBs9l4Px34hP9rCYAZOCCAENbw==",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "xlsx": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.5.tgz",
@@ -18494,8 +18711,7 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "xxhashjs": {
       "version": "0.2.2",

package.json

@@ -75,6 +75,7 @@
     "vue-moment": "^4.0.0",
     "vue-navigation": "^1.1.4",
     "vue-radial-progress": "^0.2.10",
+    "vue-video-player": "^5.0.2",
     "vue-router": "^3.4.9",
     "vue2-animate": "^2.1.2",
     "vuedraggable": "^2.24.3",

src/App.vue

@@ -12,6 +12,7 @@
       :process-status="crmImportStatus"
       @click.native="fixImportClick"
     />
+    <VideoPlayer ref="VideoPlayer" />
   </div>
 </template>
 
@@ -28,6 +29,7 @@ export default {
   components: {
     VuePictureViewer,
     XrImport,
+    VideoPlayer: () => import("@/components/VideoPlayer"),
   },
   mixins: [XrImportMixins],
   data() {
@@ -43,6 +45,9 @@ export default {
   watch: {
     $route(to, from) {
       this.showPreviewImg = false; // 切换页面隐藏图片预览
+      if (this.$refs["VideoPlayer"]) {
+        this.$refs["VideoPlayer"].close();
+      }
     },
   },
   created() {
@@ -108,6 +113,9 @@ export default {
         self.previewImgs = data.data;
         self.showPreviewImg = true;
       });
+      this.$bus.on("preview-video", (data) => {
+        this.$refs["VideoPlayer"].showDialog(data);
+      });
     },
 
     setMinHeight() {

src/components/VideoPlayer.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog :visible.sync="visible" width="1000px">
+    <video-player
+      class="video-player-box play"
+      ref="videoPlayer"
+      :options="playerOptions"
+      :playsinline="true"
+    >
+    </video-player>
+    <div class="flex_row">
+      <div class="flex_space"></div>
+      <el-button type="text" icon="el-icon-download" @click="onDownLoad"
+        >下载</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { videoPlayer } from "vue-video-player";
+import "vue-video-player/src/custom-theme.css";
+import "video.js/dist/video-js.css";
+import { downloadFile } from "@/utils";
+export default {
+  components: { videoPlayer },
+  props: {},
+  data() {
+    return {
+      visible: false,
+      playerOptions: {
+        // videojs options
+        autoplay: true,
+        muted: true,
+        language: "zh-CN",
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [
+          {
+            type: "video/mp4",
+            src: "",
+          },
+        ],
+        poster: "",
+      },
+      name: "",
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    showDialog(data) {
+      this.playerOptions.sources[0]["src"] = data.sources;
+      this.name = data.name;
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    onDownLoad() {
+      downloadFile({
+        path: this.playerOptions.sources[0]["src"],
+        name: this.name,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.play {
+  width: 100%;
+  height: 600px;
+  margin: 0 auto;
+}
+
+/deep/ .video-js {
+  width: 100%;
+  height: 100%;
+}
+/deep/.video-js .vjs-big-play-button {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+}
+</style>

src/views/demand/component/StatusRecordsItem/index.vue

@@ -23,6 +23,22 @@
       <span>{{ implement.desc }}</span>
     </div> -->
     <template v-for="(item, index) in formFields">
+      <el-descriptions
+        v-if="item.formType === 'table'"
+        :key="index"
+        :column="2"
+        title=""
+        class="field-wrap"
+        style="width: 800px; margin-left: 30px"
+      >
+        <el-descriptions-item :span="2" :label="item.cnName">
+          <Table
+            :ticketId="ticketId"
+            :values="item.value"
+            :tableExtendList="item.tableExtendList"
+          />
+        </el-descriptions-item>
+      </el-descriptions>
       <template v-if="isSysComponent(item.formType)">
         <component
           :is="item.formType"

src/views/demand/component/StatusRecordsItem/table.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <el-table
+      :data="data"
+      :cell-class-name="cellClassName"
+      size="small"
+      border
+      @row-click="handleRowClick"
+    >
+      <el-table-column
+        v-for="(item, index) in fieldList"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        :formatter="fieldFormatter"
+        :min-width="item.width"
+        :fixed="item.fixed"
+        :align="item.align || 'center'"
+        :header-align="item.headerAlign || 'center'"
+      >
+        <template slot-scope="scope">
+          <template
+            v-if="
+              scope.row[scope.column.property] &&
+              ['pic', 'file'].includes(
+                scope.row[scope.column.property].formType
+              )
+            "
+          >
+            <div
+              v-for="(item1, index1) in scope.row[scope.column.property].value"
+              :key="index1"
+              class="flex_row"
+            >
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item1.fileName"
+                placement="top-start"
+              >
+                <div class="flex_space clamp1">
+                  <a
+                    style="color: #2362fb"
+                    href="javascript:;"
+                    @click="
+                      onPreview(item1, scope.row[scope.column.property].value)
+                    "
+                    >{{ item1.fileName }}</a
+                  >
+                </div>
+              </el-tooltip>
+              <el-link
+                :data-clipboard-text="item1.url"
+                type="primary"
+                icon="el-icon-document-copy"
+                style="margin-left: 10px"
+                class="clipboardbtn"
+              ></el-link>
+              <el-link
+                type="primary"
+                icon="el-icon-download"
+                style="margin-left: 10px"
+                @click.native="onDownLoad(item1)"
+              ></el-link>
+            </div>
+          </template>
+          <span v-else>{{ fieldFormatter(scope.row, scope.column) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { downloadFile } from "@/utils";
+import Clipboard from "clipboard";
+let clipboard = null;
+export default {
+  components: {},
+  props: {
+    dataPermission: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    ticketId: {
+      type: String,
+    },
+    values: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    tableExtendList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    fieldList() {
+      const fieldList = [];
+      this.tableExtendList.forEach((element) => {
+        const field = element[0];
+        fieldList.push({
+          label: field.cnName,
+          width: "120px",
+          prop: field.name,
+        });
+      });
+      return fieldList;
+    },
+    data() {
+      return this.values.map((item) => {
+        const item1 = {};
+        item.forEach((element) => {
+          item1[element.name] = element;
+          if (
+            ["pic", "file"].includes(item1[element.name].formType) &&
+            item1[element.name].value
+          ) {
+            item1[element.name].value = JSON.parse(item1[element.name].value);
+          }
+        });
+        return item1;
+      });
+    },
+  },
+  watch: {
+    values: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          document.querySelector(".el-table__body-wrapper").scrollTop = 1;
+          if (clipboard) {
+            clipboard.destroy();
+          }
+          clipboard = new Clipboard(".clipboardbtn");
+          clipboard.on("success", (e) => {
+            this.$message({
+              message: "复制成功",
+              type: "success",
+            });
+            e.clearSelection();
+          });
+          clipboard.on("error", (e) => {
+            console.log(e);
+          });
+        });
+      },
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    /**
+     * 通过回调控制class
+     */
+    cellClassName({ row, column, rowIndex, columnIndex }) {
+      return "";
+    },
+    /**
+     * 格式化字段
+     */
+    fieldFormatter(row, column, cellValue) {
+      return !row[column.property] || !row[column.property].value
+        ? "--"
+        : row[column.property].value;
+    },
+    handleRowClick(row, column, event) {},
+    onDownLoad(item) {
+      downloadFile({
+        path: item.url,
+        name: item.fileName,
+      });
+    },
+    onPreview(file, fileList) {
+      let name = file.fileName || file.key;
+      if (!name.includes(".")) {
+        name = `${name}.${file.fileType}`;
+      }
+      if (file.fileType === "jpg" || file.fileType === "png") {
+        const imgList = fileList
+          .filter((item) => {
+            return item.fileType === "jpg" || item.fileType === "png";
+          })
+          .map((item, index) => {
+            const strRegex = /\.(jpg|png|gif|bmp|jpeg)$/g;
+            let disco = name.match(strRegex);
+            if (!disco || !disco.length) {
+              name = name + ".png";
+            }
+            return {
+              url: item.url,
+              key: item.key,
+              name,
+            };
+          });
+        const index = imgList.findIndex((item) => item.url === file.url);
+        this.$bus.emit("preview-image-bus", {
+          index,
+          data: imgList,
+        });
+      } else if (file.fileType === "pdf") {
+        window.open(file.url);
+      } else if (file.fileType === "mp4") {
+        this.$bus.emit("preview-video", {
+          sources: file.url,
+          name,
+        });
+      } else {
+        let name = file.fileName || file.key;
+        if (!name.includes(".")) {
+          name = `${name}.${file.fileType}`;
+        }
+        downloadFile({
+          path: file.url,
+          name,
+        });
+      }
+    },
+    getValue() {
+      const values = this.values.map((item) => {
+        item.map((item1) => {
+          if (["pic", "file"].includes(item1.formType) && item1.value) {
+            item1.value = JSON.parse(item1.value);
+            item1.value = JSON.stringify([
+              {
+                bizType: item.name,
+                files: item1.value.map((item2) => {
+                  return {
+                    name: item2.name || item2.key,
+                    key: item2.key,
+                  };
+                }),
+              },
+            ]);
+          }
+          return item1;
+        });
+        return item;
+      });
+      return values;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+</style>