From e8e17acc60c337194c6a46ec1ef98adee6b9e12c Mon Sep 17 00:00:00 2001
From: fangyuan <527392886@qq.com>
Date: 星期一, 12 十二月 2022 14:32:42 +0800
Subject: [PATCH] 车辆管理及审核管理 批处理修改

---
 src/views/systemSetting/device/point/index.vue |  167 +++++++++++++++++++++++++++++++++----------------------
 1 files changed, 100 insertions(+), 67 deletions(-)

diff --git a/src/views/systemSetting/device/point/index.vue b/src/views/systemSetting/device/point/index.vue
index d97ee68..924bbde 100644
--- a/src/views/systemSetting/device/point/index.vue
+++ b/src/views/systemSetting/device/point/index.vue
@@ -28,8 +28,7 @@
         <div
           v-for="item in videoData"
           style="
-            height: 240px;
-            width: 210px;
+            width: 240px;
             position: relative;
             margin-left: 20px;
           "
@@ -47,17 +46,17 @@
             {{ item.name }}{{ item.community }}
           </div>
           <video
-            id="my-video"
-            :src="item.urlAddress"
-            class="video-js"
+            :id="item.id"
+            class="video-js vjs-default-skin"
             controls
             preload="auto"
-            width="210px"
-            height="150px"
-          ></video>
-          <div class="bottonOne" @click="">鏌ョ湅瑙嗛</div>
-          <div class="bottonTwo">瑙嗛涓婃姤</div>
-          <div class="bottonThird">瀵硅</div>
+            width="240px"
+            height="200px"
+            type="video/mp4"
+            :src="item.urlAddress"
+          >
+          </video>
+          <div @click="loadVideo(item)" class="button-div">鏌ョ湅瑙嗛</div>
         </div>
       </el-main>
       <el-footer>
@@ -75,6 +74,70 @@
     </el-container>
   </el-container>
 </template>
+<script>
+import departmentAside from "@/views/operate/fivepack/threepack/components/aside";
+import videoPoint from "@/api/system/videoPoint";
+
+export default {
+  name: 'point',
+  components: { departmentAside },
+   created() {
+    this.hls = new Hls();
+    this.getVideoPointList();
+  },
+  data() {
+    return {
+      currentPage: 1,
+      totalNum: 10,
+      pageSize: 10,
+      videoData: [],
+      searchData: null,
+      hls: null
+    };
+  },
+  methods: {
+    async getVideoPointList(data) {
+      let communityId, streetId;
+      if (data) {
+        communityId = data.parentId;
+        streetId = data.id;
+      }
+      await videoPoint.getVideoPointList({
+            current: this.currentPage,
+            size: this.pageSize,
+            communityId,
+            streetId,
+          })
+          .then(({ records, total }) => {
+            this.videoData = records;
+            this.totalNum = total;
+          })
+          .catch((err) => this.$message.error(err));
+    },
+    loadVideo(data) {
+      if (Hls.isSupported()) {
+        const videoPlayer = document.getElementById(data.id);
+        this.hls.loadSource(data.urlAddress);
+        this.hls.attachMedia(videoPlayer);
+      }
+    },
+    selectedDepartment(data) {
+      this.currentPage = 1;
+      data.parentId = data.id;
+      data.id = null;
+      this.searchData = data;
+      this.getVideoPointList(data);
+    },
+    current_change(e) {
+      this.currentPage = e;
+      this.getVideoPointList(this.searchData);
+    },
+  },
+  beforeDestroy() {
+    this.hls = null;
+  }
+};
+</script>
 <style lang="scss" scoped>
 .button-one {
   height: 40px;
@@ -134,9 +197,32 @@
   margin-left: 90px;
   cursor: pointer;
 }
-.el-pagination {
-  line-height: 40px;
+
+.button-div {
+  color: rgb(75, 155, 183);
+  position: absolute;
+  height: 30px;
+  line-height: 30px;
+  width: 100%;
+  margin-left: 20px;
+  cursor: pointer;
+  border: 1px solid rgb(75, 155, 183);
 }
+
+.el-pagination {
+  &::v-deep li,
+  &::v-deep .btn-prev,
+  &::v-deep .btn-next {
+    background-color: #071f39;
+    color: #4b9bb7;
+  }
+
+  &::v-deep .active {
+    background-color: #409eff;
+    color: #fff;
+  }
+}
+
 .bottonThird {
   color: rgb(75, 155, 183);
   font-size: 11px;
@@ -171,58 +257,5 @@
 ::v-deep .el-tree-node__label {
   line-height: 30px;
   font-size: 14px;
-  // color: rgb(75, 155, 183);
 }
-</style>
-<script>
-import departmentAside from "@/views/operate/fivepack/threepack/components/aside";
-import videoPoint from "@/api/system/videoPoint";
-
-export default {
-  components: { departmentAside },
-  created() {
-    this.getVideoPointList();
-  },
-  data() {
-    return {
-      currentPage: 1,
-      totalNum: 10,
-      pageSize: 10,
-      videoData: [],
-      searchData: null,
-    };
-  },
-  methods: {
-    getVideoPointList(data) {
-      let communityId, streetId;
-      if (data) {
-        communityId = data.id;
-        streetId = data.parentId;
-      }
-      videoPoint
-        .getVideoPointList({
-          current: this.currentPage,
-          size: this.pageSize,
-          communityId,
-          streetId,
-        })
-        .then(({ records, total }) => {
-          this.videoData = records;
-          this.totalNum = total;
-        })
-        .catch((err) => this.$message.error(err));
-    },
-    selectedDepartment(data) {
-      this.currentPage = 1;
-      data.parentId = data.id;
-      data.id = null;
-      this.searchData = data;
-      this.getVideoPointList(data);
-    },
-    current_change(e) {
-      this.currentPage = e;
-      this.getVideoPointList(this.searchData);
-    },
-  },
-};
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file

--
Gitblit v1.8.0