视频demo

2defcd63 · 朱松文 · 9979eec8 · 2defcd63 · 2defcd63 · 2defcd63
Commit 2defcd63 authored Sep 18, 2021 by 朱松文
7 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -1439,6 +1439,12 @@
        }
      }
    },
+    "@types/video.js": {
+      "version": "7.3.26",
+      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.26.tgz",
+      "integrity": "sha512-RspjR7uqX6+zRXJLQ5NrsPPppxJ/jta2X7U/7E5LZDSztVMy9+AjB1SOWcC3td1JzoEo67f0ns1tZo36zBCUqQ==",
+      "dev": true
+    },
    "@types/webpack": {
      "version": "4.41.31",
      "resolved": "https://registry.nlark.com/@types/webpack/download/@types/webpack-4.41.31.tgz",
@@ -1771,6 +1777,44 @@
        "eslint-visitor-keys": "^2.0.0"
      }
    },
+    "@videojs/http-streaming": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.2.tgz",
+      "integrity": "sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "3.0.3",
+        "aes-decrypter": "3.1.2",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.7.0",
+        "mpd-parser": "0.19.0",
+        "mux.js": "5.13.0",
+        "video.js": "^6 || ^7"
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz",
+      "integrity": "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
    "@vue/babel-helper-vue-jsx-merge-props": {
      "version": "1.2.1",
      "resolved": "https://registry.nlark.com/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -2595,6 +2639,12 @@
        "@xtuc/long": "4.2.2"
      }
    },
+    "@xmldom/xmldom": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
+      "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
+      "dev": true
+    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.nlark.com/@xtuc/ieee754/download/@xtuc/ieee754-1.2.0.tgz",
@@ -2647,6 +2697,18 @@
      "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
      "dev": true
    },
+    "aes-decrypter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
+      "integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.0",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
    "ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1631470871211&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
@@ -5262,6 +5324,12 @@
        }
      }
    },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
+    },
    "domain-browser": {
      "version": "1.2.0",
      "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1627591557212&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
@@ -6629,6 +6697,16 @@
      "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
      "dev": true
    },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dev": true,
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
    "globals": {
      "version": "11.12.0",
      "resolved": "https://registry.nlark.com/globals/download/globals-11.12.0.tgz?cache=0&sync_timestamp=1628810148451&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglobals%2Fdownload%2Fglobals-11.12.0.tgz",
@@ -7313,6 +7391,12 @@
      "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=",
+      "dev": true
+    },
    "infer-owner": {
      "version": "1.0.4",
      "resolved": "https://registry.nlark.com/infer-owner/download/infer-owner-1.0.4.tgz",
@@ -7688,6 +7772,12 @@
      "integrity": "sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=",
      "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==",
+      "dev": true
+    },
    "is-glob": {
      "version": "4.0.1",
      "resolved": "https://registry.nlark.com/is-glob/download/is-glob-4.0.1.tgz",
@@ -7993,6 +8083,12 @@
        "verror": "1.10.0"
      }
    },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=",
+      "dev": true
+    },
    "killable": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -8244,6 +8340,17 @@
        "yallist": "^3.0.2"
      }
    },
+    "m3u8-parser": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz",
+      "integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.0",
+        "global": "^4.4.0"
+      }
+    },
    "make-dir": {
      "version": "3.1.0",
      "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
@@ -8448,6 +8555,15 @@
      "integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
      "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=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
    "mini-css-extract-plugin": {
      "version": "0.9.0",
      "resolved": "https://registry.nlark.com/mini-css-extract-plugin/download/mini-css-extract-plugin-0.9.0.tgz?cache=0&sync_timestamp=1631375762466&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmini-css-extract-plugin%2Fdownload%2Fmini-css-extract-plugin-0.9.0.tgz",
@@ -8589,6 +8705,18 @@
        "run-queue": "^1.0.3"
      }
    },
+    "mpd-parser": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.0.tgz",
+      "integrity": "sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.2",
+        "@xmldom/xmldom": "^0.7.2",
+        "global": "^4.4.0"
+      }
+    },
    "ms": {
      "version": "2.1.2",
      "resolved": "https://registry.nlark.com/ms/download/ms-2.1.2.tgz",
@@ -8617,6 +8745,15 @@
      "integrity": "sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=",
      "dev": true
    },
+    "mux.js": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.13.0.tgz",
+      "integrity": "sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.11.2"
+      }
+    },
    "mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
@@ -9485,6 +9622,15 @@
        "pinkie": "^2.0.0"
      }
    },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
    "pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.nlark.com/pkg-dir/download/pkg-dir-4.2.0.tgz",
@@ -11068,6 +11214,15 @@
        "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=",
+      "dev": true,
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
    "rxjs": {
      "version": "6.6.7",
      "resolved": "https://registry.nlark.com/rxjs/download/rxjs-6.6.7.tgz",
@@ -11083,6 +11238,15 @@
      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
      "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=",
+      "dev": true,
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
    "safe-regex": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz",
@@ -12919,6 +13083,12 @@
        "requires-port": "^1.0.0"
      }
    },
+    "url-toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz",
+      "integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==",
+      "dev": true
+    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.nlark.com/use/download/use-3.1.1.tgz",
@@ -13017,6 +13187,42 @@
        "extsprintf": "^1.2.0"
      }
    },
+    "video.js": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.15.4.tgz",
+      "integrity": "sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.10.2",
+        "@videojs/vhs-utils": "^3.0.3",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "3.1.2",
+        "global": "^4.4.0",
+        "keycode": "^2.2.0",
+        "m3u8-parser": "4.7.0",
+        "mpd-parser": "0.19.0",
+        "mux.js": "5.13.0",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.3"
+      }
+    },
+    "videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
+      "dev": true
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
+      "integrity": "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==",
+      "dev": true,
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
    "vm-browserify": {
      "version": "1.1.2",
      "resolved": "https://registry.nlark.com/vm-browserify/download/vm-browserify-1.1.2.tgz",

--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
    "vuex": "^3.4.0"
  },
  "devDependencies": {
+    "@types/video.js": "^7.3.26",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
@@ -38,6 +39,7 @@
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
+    "video.js": "^7.15.4",
    "vue-template-compiler": "^2.6.11"
  }
 }
--- a/src/assets/scss/myVideo.scss
+++ b/src/assets/scss/myVideo.scss
+.najiu-dog-track {
+  position: absolute;
+  top: 30px;
+  left: 60px;
+  width: 30px;
+  height: 80px;
+  border: 1px solid red;
+}
\ No newline at end of file
--- a/src/components/MyVideo/index.vue
+++ b/src/components/MyVideo/index.vue
+<template>
+  <video id="najiu-player" class="video-js" muted preload="auto">
+    <source :src="src" type="video/mp4" />
+    <p class="vjs-no-js">当前浏览器不支持视频播放</p>
+  </video>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import "video.js/dist/video-js.min.css";
+import videojs from "video.js";
+import "@/components/MyVideo/track/index";
+import "@/assets/scss/myVideo.scss";
+@Component({})
+export default class MyVideo extends Vue {
+  @Prop() private src!: string;
+  @Prop() private width!: number;
+  player = null;
+  mounted() {
+    this.$nextTick(() => {
+      this.player = videojs(
+        "najiu-player",
+        {
+          controls: true,
+          autoplay: true,
+          width: this.width,
+        },
+        function onPlayerReady() {
+          console.log("ready", this);
+          //@ts-ignore
+          this.addChild("DogTrack");
+          this.play();
+        }
+      );
+    });
+  }
+  beforeDestroy() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+}
+</script>
--- a/src/components/MyVideo/track/index.ts
+++ b/src/components/MyVideo/track/index.ts
+import videojs from 'video.js'
+const Component = videojs.getComponent('Component');
+class DogTrack extends Component {
+  constructor(player, options) {
+    super(player, options);
+    player.on("timeupdate", (e) => this.update(e))
+  }
+  createEl(): HTMLDivElement {
+    const el = document.createElement("div")
+    el.classList.add("najiu-dog-track")
+    return el;
+  }
+  update(e) {
+    //@ts-ignore
+    console.log("update", this.player_.currentTime())
+  }
+}
+videojs.registerComponent("DogTrack", DogTrack)
\ No newline at end of file
--- a/src/mock/cameraData.ts
+++ b/src/mock/cameraData.ts
+export default {
+  cameras: [
+    {
+      areaName: "开福区",
+      list: [
+        { id: 1, name: "捞刀河街道楚家湖路爱民公园", total: 6588 },
+        { id: 2, name: "开福大道与横四路交叉路口", total: 188 },
+      ],
+    },
+    {
+      areaName: " 芙蓉区",
+      list: [
+        { id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
+        { id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
+        { id: 5, name: "八一路韶山路口", total: 2 },
+      ],
+    },
+    {
+      areaName: " 芙蓉区",
+      list: [
+        { id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
+        { id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
+        { id: 5, name: "八一路韶山路口", total: 2 },
+      ],
+    },
+  ],
+  dogData: [
+    {
+      id: 1,
+      beginTime: "2021-09-13 09:51:47",
+      endTime: "2021-09-13 10:05:26",
+      totalTime: "13:39",
+      isHand: false,
+      dogType: "威尔士柯基犬",
+      hairColor: "黑白相间",
+      picture:
+        "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u283.png",
+    },
+    {
+      id: 2,
+      beginTime: "2021-09-13 09:51:47",
+      endTime: "2021-09-13 10:05:26",
+      totalTime: "19:25",
+      isHand: true,
+      dogType: "卡斯罗犬",
+      hairColor: "黑色",
+      picture:
+        "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u301.png",
+    },
+    {
+      id: 3,
+      beginTime: "2021-09-13 09:51:47",
+      endTime: "2021-09-13 10:05:26",
+      totalTime: "19:25",
+      isHand: true,
+      dogType: "卡斯罗犬",
+      hairColor: "黑色",
+      picture:
+        "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u319.png",
+    },
+    {
+      id: 4,
+      beginTime: "2021-09-13 09:51:47",
+      endTime: "2021-09-13 10:05:26",
+      totalTime: "19:25",
+      isHand: true,
+      dogType: "卡斯罗犬",
+      hairColor: "黑色",
+      picture:
+        "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u337.png",
+    },
+    {
+      id: 5,
+      beginTime: "2021-09-13 09:51:47",
+      endTime: "2021-09-13 10:05:26",
+      totalTime: "19:25",
+      isHand: true,
+      dogType: "卡斯罗犬",
+      hairColor: "黑色",
+      picture:
+        "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u355.png",
+    },
+  ],
+};
\ No newline at end of file
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -10,7 +10,13 @@
        <Camera v-for="(camera, i) in cameras" :key="i" :cameraItem="camera" />
      </div>
    </div>
-    <div class="player">player</div>
+    <div class="player" ref="player-container">
+      <MyVideo
+        v-if="width > 0"
+        src="http://skynet-test.inajiu.com:7011/sn-web/video/video"
+        :width="width"
+      />
+    </div>
    <div class="video-list">
      <div class="title">犬只记录</div>
      <div class="detail">
@@ -21,102 +27,32 @@
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import Camera from "@/components/Camera/index.vue";
 import { DashBoardData } from "./data";
 import DogInfo from "@/components/DogInfo/index.vue";
 import Search from "@/components/Camera/search.vue";
 import BaseVue from "@/types/baseVue";
+import MyVideo from "@/components/MyVideo/index.vue";
+import CameraData from "@/mock/cameraData";
-@Component({ components: { Camera, DogInfo, Search } })
+@Component({ components: { Camera, DogInfo, Search, MyVideo } })
 export default class Dashboard extends BaseVue {
  data(): DashBoardData {
-    return {
+    return CameraData;
-      cameras: [
+  }
-        {
+  width = 0;
-          areaName: "开福区",
+  height = 0;
-          list: [
+  mounted() {
-            { id: 1, name: "捞刀河街道楚家湖路爱民公园", total: 6588 },
+    this.$nextTick(() => {
-            { id: 2, name: "开福大道与横四路交叉路口", total: 188 },
+      const p = this.$refs["player-container"];
-          ],
+      //@ts-ignore
-        },
+      this.width = p.offsetWidth;
-        {
+      //@ts-ignore
-          areaName: " 芙蓉区",
+      this.height = p.offsetHeight;
-          list: [
+      console.log("&&&&", p, this.width, this.height);
-            { id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
+    });
-            { id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
-            { id: 5, name: "八一路韶山路口", total: 2 },
-          ],
-        },
-        {
-          areaName: " 芙蓉区",
-          list: [
-            { id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
-            { id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
-            { id: 5, name: "八一路韶山路口", total: 2 },
-          ],
-        },
-      ],
-      dogData: [
-        {
-          id: 1,
-          beginTime: "2021-09-13 09:51:47",
-          endTime: "2021-09-13 10:05:26",
-          totalTime: "13:39",
-          isHand: false,
-          dogType: "威尔士柯基犬",
-          hairColor: "黑白相间",
-          picture:
-            "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u283.png",
-        },
-        {
-          id: 2,
-          beginTime: "2021-09-13 09:51:47",
-          endTime: "2021-09-13 10:05:26",
-          totalTime: "19:25",
-          isHand: true,
-          dogType: "卡斯罗犬",
-          hairColor: "黑色",
-          picture:
-            "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u301.png",
-        },
-        {
-          id: 3,
-          beginTime: "2021-09-13 09:51:47",
-          endTime: "2021-09-13 10:05:26",
-          totalTime: "19:25",
-          isHand: true,
-          dogType: "卡斯罗犬",
-          hairColor: "黑色",
-          picture:
-            "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u319.png",
-        },
-        {
-          id: 4,
-          beginTime: "2021-09-13 09:51:47",
-          endTime: "2021-09-13 10:05:26",
-          totalTime: "19:25",
-          isHand: true,
-          dogType: "卡斯罗犬",
-          hairColor: "黑色",
-          picture:
-            "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u337.png",
-        },
-        {
-          id: 5,
-          beginTime: "2021-09-13 09:51:47",
-          endTime: "2021-09-13 10:05:26",
-          totalTime: "19:25",
-          isHand: true,
-          dogType: "卡斯罗犬",
-          hairColor: "黑色",
-          picture:
-            "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u355.png",
-        },
-      ],
-    };
  }
-  //#endregion
 }
 </script>