From 035827670d7343d82465c66834dc7f08d15bbb84 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 27 Aug 2024 16:29:23 +0800
Subject: [PATCH] gx

---
 index.html                        |  5 ---
 src/view/dialog/dialogCamera.vue  | 36 ++++++++++--------
 src/view/dialog/dialogCameras.vue | 34 +++++++----------
 src/view/person/index.vue         | 61 ++++++++++++++++++++++++++++++-
 4 files changed, 93 insertions(+), 43 deletions(-)
diff --git a/index.html b/index.html
index 46625fd..3471e6c 100644
--- a/index.html
+++ b/index.html
@@ -8,11 +8,6 @@
   <title>公共服务一体化驾驶舱</title>
   <script type="text/javascript"
     src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"></script>
-  <!-- 视频取流 -->
-  <link href="https://cdn.bootcss.com/video.js/7.20.3/alt/video-js-cdn.min.css" rel="stylesheet">
-  <script src="https://cdn.bootcss.com/video.js/7.20.3/video.js"></script>
-  <!-- <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> -->
-
 </head>
 
 <body>
diff --git a/src/view/dialog/dialogCamera.vue b/src/view/dialog/dialogCamera.vue
index 3806b5a..4dc1a63 100644
--- a/src/view/dialog/dialogCamera.vue
+++ b/src/view/dialog/dialogCamera.vue
@@ -63,14 +63,12 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
-import { CircleCloseFilled } from "@element-plus/icons-vue";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
-import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
-videojs.addLanguage('zh-CN',VideojsZhcnLanguage);
-// import Hls from 'hls.js';
-// import 'videojs-contrib-hls';
+import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
+videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置
 
 const props = defineProps({
   cameraShow: {
@@ -98,7 +96,7 @@ const dp = ref(null);
 const attachmentLink = ref("");
 
 const options = {
-  language: 'zh-CN',
+  language: "zh-CN",
   playbackRates: [1.0],
   aspectRatio: "10:5",
   notSupportedMessage: "此视频暂无法播放，请稍后再试",
@@ -107,6 +105,7 @@ const options = {
   preload: "auto",
   controls: true,
 };
+
 watch(
   () => props.cameraShow,
   (newVal) => {
@@ -170,28 +169,33 @@ const insertVideo = () => {
   // console.log("插入视频元素:", videoElement);
 };
 
+
 const loadVideo = () => {
   if (dp.value) {
-    dp.value.dispose();
     // console.log("正在销毁之前的video.js实例。");
+    dp.value.dispose();
   }
+
   dp.value = videojs("videoPlayerInside", options);
   // console.log("Video.js播放器已加载：", dp.value);
 };
-
-const videoPlayer = ref(null);
-// 使用生命钩子
-onMounted(() => {
-  cameraShow.value = props.cameraShow;
-});
-
 const disposeVideo = () => {
   if (dp.value) {
     dp.value.dispose(); // dispose()会直接删除Dom元素
     dp.value = null;
+    // console.log("Video.js播放器已处理。");
   }
+  // 清空 videoBox 内的内容
+  // const videoBox = document.getElementById("videoBox");
+  // if (videoBox) {
+  //   videoBox.innerHTML = "";
+  //   console.log("videoBox内容已清除。");
+  // }
 };
-
+// 使用生命钩子
+onMounted(() => {
+  cameraShow.value = props.cameraShow;
+});
 const closeDialog = () => {
   cameraShow.value = false;
   disposeVideo();
diff --git a/src/view/dialog/dialogCameras.vue b/src/view/dialog/dialogCameras.vue
index 3e170c2..8f54a5f 100644
--- a/src/view/dialog/dialogCameras.vue
+++ b/src/view/dialog/dialogCameras.vue
@@ -63,14 +63,14 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
-import { CircleCloseFilled } from "@element-plus/icons-vue";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
-// import 'videojs-contrib-hls';
+import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
 import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
 videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置
 
+
 const props = defineProps({
   cameraShow: {
     type: Boolean,
@@ -117,20 +117,20 @@ watch(
       cameraShow.value = newVal;
       hlsUriSslNow.value = props.hlsUriSsl;
       data.title = props.sxtname;
-      console.log(hlsUriSslNow.value, props.sxtname, 5555);
+      // console.log(hlsUriSslNow.value, props.sxtname, 5555);
 
       attachmentLink.value = hlsUriSslNow.value;
       dp.value = null;
       //当摄像头第二次打开时，要先创建dom
       if (num.value) {
-        console.log(22222, document.getElementById("videoBox"));
+        // console.log(22222, document.getElementById("videoBox"));
         insertVideo();
       }
-      // nextTick(() => {
-      setTimeout(() => {
-        loadVideo();
-      }, 1000);
-      // });
+      nextTick(() => {
+        setTimeout(() => {
+          loadVideo();
+        }, 1000);
+      });
     }
   }
 );
@@ -160,23 +160,15 @@ const options = {
   muted: true,
   preload: "auto",
   controls: true,
-  hls: {},
+  hls:{
+    
+  }
 };
 
 const loadVideo = () => {
   if (videoPlayer) {
     dp.value = videojs("videoPlayer", options);
   }
-  // videojs.hook("beforeerror", (player, err) => {
-  //   // Video.js 在切换/指定 source 后立即会触发一个 err=null 的错误，这里过滤一下
-  //   console.log("播放器实例", player, err);
-  //   if (err !== null) {
-  //     dp.value.src(url);
-  //   }
-
-  //   // 清除错误，避免 error 事件在控制台抛出错误
-  //   return null;
-  // });
 };
 // 使用生命钩子
 onMounted(() => {
diff --git a/src/view/person/index.vue b/src/view/person/index.vue
index ae53920..2d81c95 100644
--- a/src/view/person/index.vue
+++ b/src/view/person/index.vue
@@ -213,6 +213,50 @@
               />
             </div>
           </div>
+          <div>
+            <div class="my-label">
+              <div class="my-label-title">一卡通</div>
+            </div>
+            <div class="my-table">
+              <el-table
+                :data="dataMyTag.form.data"
+                border
+                style="width: 100%"
+                height="270"
+                :header-cell-style="{
+                  border: 'none',
+                  height: '60px',
+                  fontSize: '18px',
+                  color: '#fff',
+                }"
+                :row-style="{
+                  letterSpacing: '1px',
+                  fontSize: '16px',
+                  height: '50px',
+                  backgroundColor: 'rgba(31, 63, 113, 1)',
+                  color: '#fff',
+                }"
+              >
+                <template v-for="item in dataMyTag.form.column">
+                  <el-table-column
+                    :width="item.width"
+                    :prop="item.property"
+                    :label="item.label"
+                  />
+                </template>
+              </el-table>
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                :page-size="zhpagination.pageSize"
+                :total="zhpagination.total"
+                prev-text="上一页"
+                next-text="下一页"
+                v-model:current-page="zhpagination.current"
+                @current-change="handlePagination1"
+              />
+            </div>
+          </div>
         </div>
         <div v-else-if="rightType == '1'">
           <div class="my-label">
@@ -941,10 +985,10 @@ onMounted(() => {
     align-items: center;
     height: 870px;
   }
-
   .person-side {
     width: 480px;
     height: 100%;
+    overflow-y: auto;
     background: linear-gradient(
         270deg,
         rgba(0, 52, 131, 0.69) 0%,
@@ -960,6 +1004,21 @@ onMounted(() => {
     border-radius: 8px;
     z-index: 2;
     padding: 32px;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background: rgba(173, 221, 255, 1);
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 2px;
+      background: rgba(255, 255, 255, 0.2);
+    }
   }
 
   .person-main {
