From 909d08a9d9ac07fc467ed49bd53bac9302490b9f Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期五, 22 四月 2022 16:22:34 +0800
Subject: [PATCH] Merge pull request #446 from 648540858/map

---
 web_src/src/components/live.vue |   57 +++++++++++++++------------------------------------------
 1 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
index 366672d..adf434e 100644
--- a/web_src/src/components/live.vue
+++ b/web_src/src/components/live.vue
@@ -1,28 +1,18 @@
 <template>
-  <div id="devicePosition" style="height: 100%;width: 100%">
-    <el-container v-loading="loading" element-loading-text="鎷煎懡鍔犺浇涓�">
+  <div id="devicePosition" style="width:100vw; height: 91vh">
+    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="鎷煎懡鍔犺浇涓�" >
       <el-aside width="300px" style="background-color: #ffffff">
-        <div style="text-align: center;padding-top: 20px;">璁惧鍒楄〃</div>
-        <el-menu  v-loading="loading">
-          <el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)">
-            <template slot="title" >
-              <i class="el-icon-location-outline"></i>
-              {{device.name}}
-            </template>
-            <ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree>
-          </el-submenu>
-        </el-menu>
+        <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
       </el-aside>
       <el-container>
-        <!-- <LivePlay></LivePlay> -->
-        <el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;">
+        <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
           鍒嗗睆:
           <i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
           <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
           <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
         </el-header>
-        <el-main>
-          <div style="width: 100%;height: calc( 100vh - 150px );display: flex;flex-wrap: wrap;background-color: #000;">
+        <el-main style="padding: 0;">
+          <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
             <div v-for="i in spilt" :key="i" class="play-box"
                  :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
                  @click="playerIdx = (i-1)"
@@ -30,7 +20,6 @@
               <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
               <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]"  fluent autoplay :height="true"
                       :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
-              <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]"  :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
             </div>
           </div>
         </el-main>
@@ -41,13 +30,13 @@
 
 <script>
   import uiHeader from "../layout/UiHeader.vue";
-  import player from './dialog/jessibuca.vue'
-  import ChannelTree from './channelTree.vue'
+  import player from './common/jessibuca.vue'
+  import DeviceTree from './common/DeviceTree.vue'
 
   export default {
     name: "live",
     components: {
-      uiHeader, player, ChannelTree
+      uiHeader, player, DeviceTree
     },
     data() {
       return {
@@ -122,33 +111,17 @@
       clearTimeout(this.updateLooper);
     },
     methods: {
-      initData: function () {
-        this.getDeviceList();
-
-      },
       destroy(idx) {
         console.log(idx);
         this.clear(idx.substring(idx.length-1))
       },
-      getDeviceList: function() {
-        let that = this;
-        this.$axios({
-          method: 'get',
-          url:`/api/device/query/devices`,
-          params: {
-            page: that.currentPage,
-            count: that.count
-          }
-        }).then(function (res) {
-          console.log(res.data.list);
-          that.total = res.data.total;
+      clickEvent: function (data) {
+        if (data.channelId && data.subCount == 0) {
+          this.sendDevicePush(data)
+        }
+      },
+      contextMenuEvent: function (data) {
 
-          that.deviceList = res.data.list.map(item=>{return {deviceChannelList:[],...item}});
-          that.getDeviceListLoading = false;
-        }).catch(function (error) {
-          console.log(error);
-          that.getDeviceListLoading = false;
-        });
       },
       //閫氱煡璁惧涓婁紶濯掍綋娴�
       sendDevicePush: function (itemData) {

--
Gitblit v1.8.0