From b5df9dc7c9c227440a3c5f2b6a1970a96655aada Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Thu, 19 Oct 2023 16:10:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=A2=99=E7=9B=B2=E5=86=99?=
 =?UTF-8?q?=E4=B8=80=E6=B3=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shequzhili/videoWall/videoDialog.vue      | 150 +++++++++-----
 .../shequzhili/videoWall/videoWall.vue        | 193 +++---------------
 2 files changed, 131 insertions(+), 212 deletions(-)

diff --git a/src/views/modules/shequzhili/videoWall/videoDialog.vue b/src/views/modules/shequzhili/videoWall/videoDialog.vue
index 67424def3..9cfd7b6ac 100644
--- a/src/views/modules/shequzhili/videoWall/videoDialog.vue
+++ b/src/views/modules/shequzhili/videoWall/videoDialog.vue
@@ -1,56 +1,104 @@
+
 <template>
-    <div class="p-6 w-96 h-80">
-      <iframe
-        ref="myIframe"
-        @load="sendMessageToIframe"
-        class="w-[60vw] h-[60vh]"
-        :src="videoSrc"
-        frameborder="0"
-      ></iframe>
-    </div>
-  </template>
-      <script>
-  export default {
-    data() {
+  <div>
+      <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" top="100px" width="1020px" :before-close="handleClose"
+          class="darkDialog" :modal="false" :append-to-body="true">
+          <!-- <div slot="title"
+           class="dialogTitle">
+        <div alt=""
+             class="title_img"></div>
+        {{ data.name }}
+      </div> -->
+          <div class="dialogBody" >
+              <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
+                  :options="playerOptions">
+              </video-player>
+          </div>
+          <!-- <div slot="footer" class="dialogFooter">
+              {{dataV.deviceName}}
+              <div>
+                  <img src="../../../../assets//img/arrow-down.png" alt="">
+                  <span>{{dataV.deviceAddress}}</span>
+              </div>
+          </div> -->
+      </el-dialog>
+  </div>
+</template>
+
+<script>
+import { requestPost,requestGet } from "@/js/dai/request";
+export default {
+  data() {
       return {
-        token: "",
-        videoSrc:"",
-        userData:{
-  "userName": "apizhsq",
-  "password": "12345678@df",
-  "type": 1
-  }
+          dialogVisible: false,
+          playerOptions: {
+              playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
+              autoplay: true, //如果true,浏览器准备好时开始回放。
+              muted: false, // 默认情况下将会消除任何音频。
+              loop: true, // 视频一结束就重新开始。
+              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+              language: 'zh-CN',
+              aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+              fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+              sources: [{ type: '', src: ''}],
+              poster: '', //你的封面地址
+              // width: document.documentElement.clientWidth,
+              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+              controlBar: {
+                  timeDivider: true, //当前时间和持续时间的分隔符
+                  durationDisplay: true, //显示持续时间
+                  remainingTimeDisplay: false, //是否显示剩余时间功能
+                  fullscreenToggle: true //全屏按钮
+              }
+          }
       };
-    },
-    methods: {
-      sendMessageToIframe() {
-        const message = {
-          token: this.token,
-        };
-        const iframe = this.$refs.myIframe;
-        iframe.contentWindow.postMessage(message, "*");
-      },
-      getAuthCameras(token){
-          var that=this;
-          this.$http.post("http://172.20.41.195:9006/video/api/getAuthCameras",null,{
-            headers: {
-              Authorization: token
-            }})
-        .then((res) => {
-          that.videoSrc="http://172.20.41.195:9015/video-play-plug?token="+that.token+"&playType=realPlay"+"&cameraCode="+res.data.data[0].code
-        });
+  },
+  props: {
+      dataV: {
+        type: Object,
+        default: () => {}
+      }
+  },
+  created() {
+      // debugger
+      //   this.playerOptions.sources[0].src = this.data.src;
+  },
+  components: {},
+  methods: {
+      handleClose(done) {
+          // done();
+          this.$emit('close');
+          this.dialogVisible = false
       },
-      getLogin(){
-          this.$http
-        .post("http://172.20.41.195:9006/video/api/login",this.userData)
-        .then((res) => {
-          this.token=res.data.data.token;
-          this.getAuthCameras(res.data.data.token);
-        });
+      async videoLogin(){
+        console.log(this.dataV);
+        let url = "/auth/thirdlogin/video/login"
+        let {data,code,msg} = await requestPost(url)
+        if(code == 0 ){
+          this.playerOptions.sources[0].src = "http://172.20.41.195:9015/video-play-plug?token="+data.token+"&playType=realPlay"+"&cameraCode="+this.dataV.code
+        }
       }
-    },
-    mounted(){
-      this.getLogin();
-    },
-  };
-  </script>
\ No newline at end of file
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  background-color: #000;
+
+  .el-dialog__header {
+      position: relative;
+      top: -6px;
+  }
+
+  .el-dialog__body {
+      padding: 0;
+  }
+
+  .el-dialog__footer {
+      background-color: #fff;
+      text-align: left;
+  }
+}
+</style>
+<!-- <style lang="scss" src="@/assets/scss/test.scss" scoped></style> -->
diff --git a/src/views/modules/shequzhili/videoWall/videoWall.vue b/src/views/modules/shequzhili/videoWall/videoWall.vue
index 466b1cfb3..987ee1c3d 100644
--- a/src/views/modules/shequzhili/videoWall/videoWall.vue
+++ b/src/views/modules/shequzhili/videoWall/videoWall.vue
@@ -5,165 +5,18 @@
         <div class="div_table" :style="{ height: maxTableHeight + 'px' }">
             <div class="card">
                 <div class="bgC">
-                    <div class="item">
+                    <div class="item" v-for="(item,index) in tableData" :key="index" @click="handelClickImg(item)">
                         <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
                         <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
+                            <p>{{item.deviceName}}</p>
+                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> {{item.deviceAddress}}</p>
                         </div>
                     </div>
-                    <div class="item">
+                    <div class="item"  @click="handelClickImg(item)" >
                         <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
                         <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
-                        </div>
-                    </div>
-                    <div class="item" @click="handelShowTv">
-                        <img width="100%" src="../../../../assets/img/login_bg.jpg" alt="">
-                        <div>
-                            <p>视频标题</p>
-                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> 视频位置</p>
+                            <p></p>
+                            <p><img src="../../../../assets/img/arrow-down.png" alt=""> </p>
                         </div>
                     </div>
                 </div>
@@ -178,12 +31,12 @@
                        layout="sizes, prev, pager, next, total"
                        :total="total">
         </el-pagination></div>
-        <video-dialog v-if="showTv" :data="selfVideo"></video-dialog>
+        <video-dialog  :dataV="selfVideo" ref="videoDialog"></video-dialog>
        </div>
 </template>
   
 <script>
-import { requestPost } from "@/js/dai/request";
+import { requestPost,requestGet } from "@/js/dai/request";
 import { mapGetters } from "vuex";
 import videoDialog  from "./videoDialog.vue";
 export default {
@@ -192,11 +45,10 @@ export default {
     data() {
         return {
             pageNo: '',
-            pageSize: 10,
+            pageSize: 20,
             total: 0,
             tableData: [],
             selfVideo:{},
-            showTv:false
         };
     },
     computed: {
@@ -210,10 +62,24 @@ export default {
 
     },
     mounted() {
-
-
+        this.getTableData()
     },
     methods: {
+    async getTableData(){
+        let url = "/gov/org/icmonitoringdevice/page"
+        let params = {
+            pageNo: this.pageNo,
+            pageSize: this.pageSize,
+        }
+        let {data,code,msg} = requestGet(url, params).then(res => {
+            if (code == 0) {
+                this.tableData = data.list
+                this.total = data.total
+            }else{
+                this.$message.error(msg)
+            }
+        })
+    },
     handleSizeChange (val) {
       console.log(`每页 ${val} 条`);
       this.pageSize = val;
@@ -225,8 +91,13 @@ export default {
       this.pageNo = val;
       this.getTableData();
     },
-    handelShowTv(){
-            this.showTv = true
+    handelClickImg(item){
+        this.selfVideo = item
+        console.log(item,'获取的对象');
+        this.$nextTick(()=>{
+            this.$refs['videoDialog'].videoLogin()
+            this.$refs['videoDialog'].dialogVisible = true
+        })
     }
     }
 };