From 7d5250225fdc6eabf20024a5fbf4caa13cbb8de4 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Sat, 8 Feb 2025 14:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=88=E7=AB=AF=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=B7=A1=E6=A3=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../video/FixedCameraInspection.vue           |   3 +-
 .../components/video/components/Player.vue    |  78 +-
 .../components/video/components/VideoPlay.vue |  17 +-
 .../video/components/videoPlayNew.vue         | 702 ++++++++++++++++++
 vue.config.js                                 |   2 +-
 5 files changed, 713 insertions(+), 89 deletions(-)
 create mode 100644 src/views/screen/components/video/components/videoPlayNew.vue

diff --git a/src/views/screen/components/video/FixedCameraInspection.vue b/src/views/screen/components/video/FixedCameraInspection.vue
index 858e1cb..dfb5a9e 100644
--- a/src/views/screen/components/video/FixedCameraInspection.vue
+++ b/src/views/screen/components/video/FixedCameraInspection.vue
@@ -39,7 +39,8 @@
   </div>
 </template>
 <script>
-import VideoPlay from '@/views/screen/components/video/components/VideoPlay.vue'
+// import VideoPlay from '@/views/screen/components/video/components/VideoPlay.vue'
+import VideoPlay from '@/views/screen/components/video/components/videoPlayNew.vue'
 import VideoList from '@/views/screen/components/video/components/VideoList.vue'
 import { getVideoList } from '@/api/screen/screen'
 import { encryptCBC } from '@/utils/aescbc'
diff --git a/src/views/screen/components/video/components/Player.vue b/src/views/screen/components/video/components/Player.vue
index 7ea4b25..4d6be24 100644
--- a/src/views/screen/components/video/components/Player.vue
+++ b/src/views/screen/components/video/components/Player.vue
@@ -9,13 +9,9 @@
 <template>
   <div :class="{ player: true, selected: isSelected }" @click="handlePlayerClick" @dblclick="dblclick">
     <!-- {{ title }}号窗口 -->
-    <video class="cell-player-1" ref="videosmallone" preload="auto" muted type="rtmp/flv" :id="id" v-if="false">
+    <video class="cell-player-1" ref="videosmallone" preload="auto" muted type="rtmp/flv" :id="id">
       <source src="" />
     </video>
-
-    <div v-else class="jessibuca">
-      <div id="container" ref="container"></div>
-    </div>
   </div>
 </template>
 
@@ -51,8 +47,6 @@ export default {
       videoToken: '',
       qxToken: '',
       qxInfo: {},
-      jessibuca: null,
-      playUrl: '',
     }
   },
   beforeUnmount() {
@@ -76,12 +70,6 @@ export default {
   created() {
     this.getQxToken()
   },
-  beforeDestroy() {
-    if (this.jessibuca) {
-      this.jessibuca.destroy()
-      this.jessibuca = null
-    }
-  },
   methods: {
     getQxToken() {
       getQxToken().then(res => {
@@ -143,15 +131,6 @@ export default {
           setTimeout(() => {
             this.player.play()
           }, 500) // Delay to ensure the player is ready
-        } else {
-          const url =
-            this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
-          this.createJessibuca()
-          this.playUrl = url
-
-          setTimeout(() => {
-            this.playvideo()
-          }, 1000)
         }
       }, 1000)
     },
@@ -225,61 +204,6 @@ export default {
       }
       this.$emit('clearTime', this.title)
     },
-    createJessibuca() {
-      this.jessibuca = new window.Jessibuca({
-        container: this.$refs.container,
-        videoBuffer: 0.2, // 缓存时长
-        isResize: false,
-        text: '',
-        debug: false,
-        showBandwidth: true, // 显示网速
-        operateBtns: {
-          fullscreen: true,
-          screenshot: true,
-          play: true,
-          audio: true,
-        },
-        forceNoOffscreen: true,
-        isNotMute: true,
-      })
-      this.jessibuca.on('load', function () {
-        console.log('on load')
-      })
-      this.jessibuca.on('play', function () {
-        console.log('on play')
-      })
-      this.jessibuca.on('audioInfo', function (msg) {
-        //  console.log('audioInfo', msg)
-      })
-
-      this.jessibuca.on('videoInfo', function (info) {
-        // console.log('videoInfo', info)
-      })
-
-      this.jessibuca.on('error', function (error) {
-        console.log('error', error)
-      })
-
-      this.jessibuca.on('start', function () {
-        console.log('start')
-      })
-
-      this.jessibuca.on('stats', function (stats) {
-        //  console.log('stats', stats)
-      })
-    },
-    playvideo() {
-      if (this.playUrl) {
-        console.log('播放--', this.playUrl)
-        this.jessibuca.play(this.playUrl)
-      }
-    },
-    async stopvideo() {
-      if (this.jessibuca) {
-        await this.jessibuca.destroy()
-        jessibuca = null
-      }
-    },
   },
 }
 </script>
diff --git a/src/views/screen/components/video/components/VideoPlay.vue b/src/views/screen/components/video/components/VideoPlay.vue
index 7f0a762..0a6f20a 100644
--- a/src/views/screen/components/video/components/VideoPlay.vue
+++ b/src/views/screen/components/video/components/VideoPlay.vue
@@ -93,13 +93,13 @@
               >
                 4路
               </span>
-              <!-- <span
+              <span
                 :class="{ active: cellCount === 6 }"
                 @click="changCellCount(6)"
                 style="margin-right: 5px; cursor: pointer; font-size: 22px"
               >
                 6路
-              </span> -->
+              </span>
             </div>
           </div>
         </el-form-item>
@@ -127,10 +127,7 @@
       <div class="right">
         <div class="cell">
           <div class="cell-player">
-            <div class="player-container" v-for="i in cellCount" :key="i" :class="cellClassNew">
-              <JessibucaH265 :playerInfo="fixedData[i - 1]" />
-            </div>
-            <!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
+            <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
               <player
                 :title="i"
                 :id="`player${i}`"
@@ -173,7 +170,7 @@
                   ></player>
                 </div>
               </template>
-            </div> -->
+            </div>
           </div>
           <canvas id="canvas_video" style="display: none"></canvas>
           <canvas id="huaImg" style="display: none"></canvas>
@@ -554,9 +551,9 @@ export default {
     },
   },
 
-  mounted() {
-    this.getDeviceList()
-  },
+  // mounted() {
+  //   this.getDeviceList()
+  // },
 }
 </script>
 
diff --git a/src/views/screen/components/video/components/videoPlayNew.vue b/src/views/screen/components/video/components/videoPlayNew.vue
new file mode 100644
index 0000000..7f0a762
--- /dev/null
+++ b/src/views/screen/components/video/components/videoPlayNew.vue
@@ -0,0 +1,702 @@
+<!--
+ * @Author: zhangtq 2452618307@qq.com
+ * @Date: 2024-11-15 14:26:52
+ * @LastEditors: zhangtq 2452618307@qq.com
+ * @LastEditTime: 2025-01-20 18:30:16
+ * @FilePath: src/views/screen/components/video/components/VideoPlay.vue
+ * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
+ -->
+<template>
+  <div style="height: 100%">
+    <el-form layout="inline" class="header">
+      <div style="display: flex; flex-direction: row">
+        <el-form-item style="width: 40%">
+          <div style="display: inline-block; float: left">
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-search"
+              style="background: #1aa4e1"
+              @click="openPlayBack"
+              v-if="logBtnShow"
+            >
+              查看回放
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-search"
+              style="background: #1aa4e1"
+              @click="openLog"
+              v-if="logBtnShow"
+            >
+              日志查看
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-error"
+              @click="closeVideos(1)"
+              style="background: #1aa4e1"
+            >
+              关闭
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-error"
+              @click="closeVideos(2)"
+              style="background: #1aa4e1"
+            >
+              全关闭
+            </el-button>
+            <el-button
+              type="primary"
+              id="startTiming"
+              v-if="timingShow"
+              size="small"
+              icon="el-icon-check"
+              @click="changeTimingStatus(1)"
+              style="background: #a4a4a4; border: 1px solid #a4a4a4"
+              :disabled="timingStatus"
+            >
+              开启定时
+            </el-button>
+            <el-button
+              type="primary"
+              id="closeTiming"
+              v-if="timingShow"
+              size="small"
+              icon="el-icon-error"
+              @click="changeTimingStatus(2)"
+              style="background: #1aa4e1; border: 1px solid #1aa4e1"
+              :disabled="!timingStatus"
+            >
+              关闭定时
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item style="width: 30%">
+          <div class="cell-tool">
+            <div class="bk-button-group">
+              <span
+                :class="{ active: cellCount === 1 }"
+                @click="changCellCount(1)"
+                style="margin-right: 5px; cursor: pointer; font-size: 22px"
+              >
+                1路
+              </span>
+              <span
+                :class="{ active: cellCount === 4 }"
+                @click="changCellCount(4)"
+                style="margin-right: 5px; cursor: pointer; font-size: 22px"
+              >
+                4路
+              </span>
+              <!-- <span
+                :class="{ active: cellCount === 6 }"
+                @click="changCellCount(6)"
+                style="margin-right: 5px; cursor: pointer; font-size: 22px"
+              >
+                6路
+              </span> -->
+            </div>
+          </div>
+        </el-form-item>
+        <div class="status">
+          <span>
+            <el-badge is-dot class="item" type="primary" style="margin-top: 8px"></el-badge>
+            总数：{{ videoNum.totalNum }}
+          </span>
+          <span style="margin-left: 10px">
+            <el-badge is-dot class="item" type="success" style="margin-top: 8px"></el-badge>
+            在线：{{ videoNum.onlineNum }}
+          </span>
+          <span style="margin-left: 10px">
+            <el-badge is-dot class="item" type="info" style="margin-top: 8px"></el-badge>
+            离线：{{ videoNum.offlineNum }}
+          </span>
+        </div>
+      </div>
+    </el-form>
+    <div class="main-body">
+      <div class="left">
+        <div class="left-upper"></div>
+        <div class="left-lower"></div>
+      </div>
+      <div class="right">
+        <div class="cell">
+          <div class="cell-player">
+            <div class="player-container" v-for="i in cellCount" :key="i" :class="cellClassNew">
+              <JessibucaH265 :playerInfo="fixedData[i - 1]" />
+            </div>
+            <!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
+              <player
+                :title="i"
+                :id="`player${i}`"
+                @playerClick="handlePlayerClick"
+                @dblclick="toggleFullScreen()"
+                v-if="cellCount != 6"
+                :activePlayer="activePlayer"
+                :is_history="true"
+                :ref="`player${i}`"
+              ></player>
+              <player
+                :title="i"
+                :id="`player${i}`"
+                @playerClick="handlePlayerClick"
+                @dblclick="toggleFullScreen()"
+                v-if="cellCount == 6 && i != 2 && i != 3"
+                :activePlayer="activePlayer"
+                :is_history="true"
+                :ref="`player${i}`"
+              ></player>
+              <template v-if="cellCount == 6 && i == 2">
+                <div class="cell-player-6-2-cell">
+                  <player
+                    :title="i"
+                    :id="`player${i}`"
+                    @playerClick="handlePlayerClick"
+                    @dblclick="toggleFullScreen()"
+                    :activePlayer="activePlayer"
+                    :is_history="true"
+                    :ref="`player${i}`"
+                  ></player>
+                  <player
+                    :title="i + 1"
+                    :id="`player${i + 1}`"
+                    @playerClick="handlePlayerClick"
+                    @dblclick="toggleFullScreen()"
+                    :activePlayer="activePlayer"
+                    :is_history="true"
+                    :ref="`player${i + 1}`"
+                  ></player>
+                </div>
+              </template>
+            </div> -->
+          </div>
+          <canvas id="canvas_video" style="display: none"></canvas>
+          <canvas id="huaImg" style="display: none"></canvas>
+        </div>
+        <div class="right-lower"></div>
+      </div>
+    </div>
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="55%" style="height: 90%">
+      <el-form
+        label-width="80px"
+        style="display: flex; flex-direction: column; justify-content: center; align-items: center"
+      >
+        <img :src="base64" alt="" style="width: 95vh; height: 53vh" />
+        <div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
+          <span style="color: red">*</span>
+          <span>备注：</span>
+          <el-input
+            type="textarea"
+            v-model="reason"
+            placeholder="请输入备注"
+            clearable
+            maxlength="200"
+            show-word-limit
+            style="width: 92vh; margin-left: 3vh; margin-top: 2vh"
+            v-no-whitespace
+          ></el-input>
+        </div>
+        <el-form-item style="position: absolute; left: 75%; top: 93%">
+          <el-button type="primary" @click="storeCapture" v-preventReClick="3000">确定</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-dialog title="日志" :visible.sync="logOpen" :destroy-on-close="true">
+      <VideoLog />
+    </el-dialog>
+    <el-dialog title="回放" :visible.sync="playBackOpen" :destroy-on-close="true">
+      <VideoPlayBack ref="playBack" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import player from './Player.vue'
+import { insertCapture } from '@/api/screen/screen'
+import screenfull from 'screenfull'
+import VideoLog from '@/views/screen/components/video/components/VideoLog.vue'
+import VideoPlayBack from '@/views/screen/components/video/components/VideoPlayBack.vue'
+import doc from '@/components/bonus/Doc/index.vue'
+
+import JessibucaH265 from '@/components/JessibucaH265'
+import { getVideoList } from '@/api/screen/screen'
+import { getQxToken } from '@/api/video/camera'
+import { selectVideoLoginInfo } from '@/api/screen/screen'
+
+export default {
+  components: { VideoPlayBack, VideoLog, player, JessibucaH265 },
+  props: {
+    videoArray: {
+      type: Array,
+      default: () => [],
+    },
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    videoNum: {
+      type: Object,
+      default: () => ({
+        totalNum: 0,
+        onlineNum: 0,
+        offlineNum: 0,
+      }),
+    },
+    logBtnShow: {
+      type: Boolean,
+      default: false,
+    },
+    timingShow: {
+      type: Boolean,
+      default: false,
+    },
+    timingStatus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      logOpen: false,
+      playBackOpen: false,
+      cellCount: 4,
+      treeData: [],
+      activeArray: [],
+      activePlayer: 1,
+      puidArray: [],
+      dialogVisible: false,
+      reason: '',
+      base64: '',
+      blob: '',
+      fullscreen: false,
+      fixedData: [],
+    }
+  },
+  methods: {
+    play(item) {
+      console.log('item', item)
+      console.log('puidArray', this.puidArray)
+      let tf = this.puidArray.some(val => {
+        return val.puid === item.puid
+      })
+      if (tf) {
+        this.$message({
+          message: '此设备已经在播放中！！！',
+          type: 'warning',
+        })
+        return
+      } else {
+        this.puidArray.push(item)
+        this.playRealtimeVideo(item.puid, Number(item.ballIndex))
+      }
+    },
+    playVideo: function (i, activePlayer) {
+      setTimeout(() => {
+        const playerRef = `player${activePlayer}`
+        const playerInstance = this.$refs[playerRef]
+        if (playerInstance && playerInstance[0]) {
+          if (!this.activeArray.includes(activePlayer)) {
+            this.activeArray.push(activePlayer)
+          }
+          setTimeout(() => {
+            playerInstance[0].openVideo(this.puidArray[i].puid, Number(this.puidArray[i].ballIndex))
+          }, 500)
+        } else {
+          console.error(`Player instance for ${playerRef} is not available.`)
+        }
+      }, 500)
+    },
+    changCellCount(count) {
+      this.cellCount = count
+      let length = this.puidArray.length > count ? count : this.puidArray.length
+      this.puidArray = this.puidArray.sort((a, b) => a.activePlayer - b.activePlayer)
+      for (let i = 0; i < length; i++) {
+        this.closeVideoByChange(this.puidArray[i].activePlayer)
+        if (this.puidArray[i].activePlayer !== i + 1) {
+          this.activePlayer = i + 1
+          this.puidArray[i].activePlayer = i + 1
+        } else {
+          this.activePlayer = this.puidArray[i].activePlayer
+        }
+        this.playVideo(i, this.activePlayer)
+        this.$emit('changCellCount', count)
+      }
+    },
+    closeVideoByChange(activePlayer) {
+      const playerRef = `player${activePlayer}`
+      const playerInstance = this.$refs[playerRef]
+      if (playerInstance && playerInstance[0]) {
+        playerInstance[0].closeVideo()
+        this.activeArray.splice(this.activeArray.indexOf(activePlayer), 1)
+      }
+    },
+    closeVideos(type) {
+      if (type === 2) {
+        this.$emit('changeTimingStatus', 2)
+        while (this.activeArray.length > 0) {
+          this.closeVideoOne(this.activeArray[0])
+        }
+      } else {
+        this.closeVideoOne(this.activePlayer)
+      }
+    },
+    closeVideoOne(playerIndex) {
+      const playerRef = `player${playerIndex}`
+      const playerInstance = this.$refs[playerRef]
+      if (playerInstance && playerInstance[0]) {
+        playerInstance[0].closeVideo()
+        this.activeArray.splice(this.activeArray.indexOf(playerIndex), 1)
+        this.puidArray.splice(
+          this.puidArray.find(item => item.activePlayer === playerIndex),
+          1
+        )
+      }
+    },
+    async playRealtimeVideo(puid, ballIndex) {
+      if (this.activeArray.length === this.cellCount) {
+        this.$message.error('请先关闭一个视频再打开新视频！')
+        return
+      }
+      for (let i = 1; i <= this.cellCount; i++) {
+        if (!this.activeArray.includes(i)) {
+          this.activePlayer = i
+          break
+        }
+      }
+      const playerRef = `player${this.activePlayer}`
+      const playerInstance = this.$refs[playerRef]
+      if (playerInstance && playerInstance[0]) {
+        this.activeArray.push(Number(this.activePlayer))
+        this.puidArray[this.puidArray.length - 1].activePlayer = this.activePlayer
+        playerInstance[0].openVideo(puid, ballIndex)
+      } else {
+        console.error(`Player instance for ${playerRef} is not available.`)
+      }
+      this.$emit('playerClick', {
+        item: this.puidArray[this.puidArray.length - 1],
+      })
+    },
+    handlePlayerClick(e) {
+      this.activePlayer = e.title
+      let item = this.puidArray.find(item => item.activePlayer === this.activePlayer)
+      this.$emit('playerClick', {
+        item: item,
+      })
+    },
+    captureScreen(e) {
+      console.log('e:====', e)
+      console.log('this.activePlayer:====', this.activePlayer)
+      var canvas = document.getElementById('huaImg')
+      var video = document.getElementById(`player${this.activePlayer}`)
+      // const playerRef = `player${this.activePlayer}`
+      // const video = this.$refs[playerRef]
+      let ctx = canvas.getContext('2d')
+      canvas.width = 1080
+      canvas.height = 720
+      ctx.drawImage(video, 0, 0, 1080, 720)
+      const base64Image = canvas.toDataURL('image/png')
+      this.base64 = base64Image
+      this.blob = this.base64ToBlob(base64Image, 'image/png')
+      if (e === 2) {
+        saveAs(base64Image, new Date().getTime() + '.png')
+      } else {
+        this.openDialog()
+      }
+    },
+    openDialog() {
+      this.dialogVisible = true
+    },
+    base64ToBlob(base64, mime) {
+      const byteString = atob(base64.split(',')[1])
+      const ab = new ArrayBuffer(byteString.length)
+      const ia = new Uint8Array(ab)
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i)
+      }
+      return new Blob([ab], { type: mime })
+    },
+    storeCapture() {
+      if (!this.reason) {
+        this.$message({
+          message: '请输入备注',
+          type: 'warning',
+        })
+        return
+      }
+      const param = new FormData()
+      param.append('file', this.blob)
+
+      const activePlayerItem = this.puidArray.find(item => item.activePlayer === this.activePlayer)
+      activePlayerItem.fileType = 1
+      activePlayerItem.reason = this.reason
+      param.append('params', JSON.stringify(activePlayerItem))
+      insertCapture(param).then(res => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+        })
+        this.dialogVisible = false
+        this.reason = ''
+        this.blob = ''
+        this.base64 = ''
+        this.$parent.getSnapPhotoList()
+      })
+    },
+    //双击全屏
+    toggleFullScreen() {
+      const playerRef = `player${this.activePlayer}`
+      const playerInstance = this.$refs[playerRef]
+      if (playerInstance && playerInstance[0]) {
+        if (screenfull.isEnabled) {
+          if (screenfull.isFullscreen) {
+            screenfull.exit()
+          } else {
+            screenfull.request(playerInstance[0].$el)
+          }
+        } else {
+          this.$message.error('当前不支持全屏模式！！！')
+        }
+      } else {
+        console.error(`Player instance for ${playerRef} is not available.`)
+      }
+    },
+    openLog() {
+      this.logOpen = true
+    },
+    openPlayBack() {
+      this.playBackOpen = true
+    },
+    changeTimingStatus(type) {
+      const startTiming = document.getElementById('startTiming')
+      const closeTiming = document.getElementById('closeTiming')
+      if (type === 1) {
+        startTiming.style.background = '#a4a4a4'
+        startTiming.style.border = '1px solid #a4a4a4'
+        closeTiming.style.background = '#1aa4e1'
+        closeTiming.style.border = '1px solid #1aa4e1'
+      } else {
+        startTiming.style.background = '#1aa4e1'
+        startTiming.style.border = '1px solid #1aa4e1'
+        closeTiming.style.background = '#a4a4a4'
+        closeTiming.style.border = '1px solid #a4a4a4'
+      }
+      this.$emit('changeTimingStatus', type)
+    },
+    autoPlayVideo(item) {
+      const playerRef = `player${this.activePlayer}`
+      const playerInstance = this.$refs[playerRef]
+      if (playerInstance && playerInstance[0]) {
+        this.activeArray.push(Number(this.activePlayer))
+        item.activerPlayer = this.activePlayer
+        this.puidArray.push(item)
+        setTimeout(() => {
+          playerInstance[0].openVideo(item.puid, item.ballIndex)
+        }, 1000 * this.activePlayer)
+      } else {
+        console.error(`Player instance for ${playerRef} is not available.`)
+      }
+      this.activePlayer++
+    },
+    closeAllVideo() {
+      for (let i = 0; i <= this.activeArray.length; i++) {
+        const playerRef = `player${this.activeArray[i]}`
+        const playerInstance = this.$refs[playerRef]
+        if (playerInstance && playerInstance[0]) {
+          setTimeout(() => {
+            playerInstance[0].closeVideo()
+          }, 1000 * i)
+        }
+      }
+      this.activePlayer = 1
+      this.activeArray = []
+      this.puidArray = []
+    },
+
+    // 获取设备列表
+    async getDeviceList() {
+      const res = await getVideoList({
+        deviceType: '固定摄像头',
+      })
+      this.fixedData = res.data
+    },
+  },
+  computed: {
+    cellClass() {
+      return function (index) {
+        switch (this.cellCount) {
+          case 1:
+            return ['cell-player-1']
+          case 4:
+            return ['cell-player-4']
+          case 6:
+            if (index == 1) return ['cell-player-6-1']
+            if (index == 2) return ['cell-player-6-2']
+            if (index == 3) return ['cell-player-6-none']
+            return ['cell-player-6']
+          case 9:
+            return ['cell-player-9']
+          case 16:
+            return ['cell-player-16']
+          default:
+            break
+        }
+      }
+    },
+    cellClassNew() {
+      if (this.cellCount === 1) return 'container-1'
+      if (this.cellCount === 4) return 'container-4'
+    },
+  },
+
+  mounted() {
+    this.getDeviceList()
+  },
+}
+</script>
+
+<style scoped>
+.header {
+  background-color: transparent;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  height: 7vh;
+  padding: 10px;
+}
+
+.main-body {
+  width: 100%;
+  height: 90%;
+  display: flex;
+
+  .right {
+    width: 100%;
+    height: 100%;
+
+    .cell {
+      margin-top: 0.5%;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+}
+
+.bk-button-group .active {
+  color: skyblue;
+}
+
+.cell-tool {
+  height: 40px;
+  line-height: 40px;
+  margin-top: -1px;
+  color: whitesmoke;
+  margin-left: 18.5%;
+}
+
+.cell-player {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  height: 75vh;
+}
+
+.cell-player-4 {
+  width: 50%;
+  height: 50% !important;
+  box-sizing: border-box;
+}
+
+.cell-player-1 {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.cell-player-6-1 {
+  width: 66.66%;
+  height: 66.66% !important;
+  box-sizing: border-box;
+}
+
+.cell-player-6-2 {
+  width: 33.33%;
+  height: 66.66% !important;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.cell-player-6-none {
+  display: none;
+}
+
+.cell-player-6-2-cell {
+  width: 100%;
+  height: 50% !important;
+  box-sizing: border-box;
+}
+
+.cell-player-6 {
+  width: 33.33%;
+  height: 33.33% !important;
+  box-sizing: border-box;
+}
+
+.cell-player-9 {
+  width: 33.33%;
+  height: 33.33% !important;
+  box-sizing: border-box;
+}
+
+.cell-player-16 {
+  width: 25%;
+  height: 25% !important;
+  box-sizing: border-box;
+}
+
+.ant-select {
+  width: 180px;
+}
+
+.status {
+  width: 30%;
+  float: right;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: right;
+  margin-right: 2rem;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  color: white;
+
+  span {
+    margin: 0 10px;
+    color: white;
+  }
+}
+
+.container-1 {
+  flex: 1;
+}
+
+.container-4 {
+  width: calc((100% / 2) - 6px);
+  margin-left: 6px;
+  margin-bottom: 6px;
+}
+
+.container-4:nth-child(2n) {
+  margin-left: 0;
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index cb8ac31..551f0a5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -38,7 +38,7 @@ module.exports = {
         // target: `http://localhost:18080`,
         // target: 'http://192.168.0.176:18080',
         // target: 'http://192.168.0.58:19090', // 杰
-        //  target: 'http://192.168.0.14:19090', // 测试
+        // target: 'http://192.168.0.14:18080', // 测试
         target: 'http://218.21.27.6:1999/prod-api', // 测试
         // target: 'http://192.168.0.38:18080', // 郝
         changeOrigin: true,