vue前端对接监控视频 FLV格式 （分屏的操作 单屏 ，四平 ，六屏）

<template> <div class="list"> <div class="lsieqqwe"> <div class="boseList bgImg"> <span @click="getall" style="color: #fff; margin-left: 12px; font-size: 16px" >设备分组</span > </div> <div style="padding: 5px"> <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 5px" /> </div> <div class="treeDataLsit"> <el-tree class="filter-tree" :data="treeData" ref="tree" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" :filter-node-method="filterNode" > <span slot-scope="{ node, data }" class="customize-tree-p"> <div class="haha" v-if="node.level == 3"> <img :src=" data.isOnline == 1 ? '/img/isOnlinetrue.png' : '/img/isOnlinefalse.png' " alt="" /> <span>{{ data.channelName }} </span> </div> <span v-else>{{ data.channelName }} </span> </span> </el-tree> </div> <div style=" width: 100%; height: 42%; display: flex; flex-direction: column; position: relative; " > <div class="control toplst" v-if="zheDielist" @click="zheDielist = false" > <div></div> <div>云台控制</div> <div><img src="@/assets/carmear/xiala.png" alt="" /></div> </div> <div v-if="zheDielist" style="height: 90%; flex: 1; margin-top: 65px"> <div class="control_list"> <img @mousedown="cameraBtn(1)" @mouseup="mouseup(1)" class="ShArrows" src="@/assets/jianTou/shang.png" alt="" /> <img @mousedown="cameraBtn(2)" @mouseup="mouseup(2)" class="XArrows" src="@/assets/jianTou/xia.png" alt="" /> <img @mousedown="cameraBtn(3)" @mouseup="mouseup(3)" class="ZArrows" src="@/assets/jianTou/zuo.png" alt="" /> <img @mousedown="cameraBtn(4)" @mouseup="mouseup(4)" class="YArrows" src="@/assets/jianTou/you.png" alt="" /> <img @mousedown="cameraBtn(7)" @mouseup="mouseup(7)" class="YSArrows" src="@/assets/jianTou/Yshang.png" alt="" /> <img @mousedown="cameraBtn(8)" @mouseup="mouseup(8)" class="YXArrows" src="@/assets/jianTou/Yxia.png" alt="" /> <img @mousedown="cameraBtn(6)" @mouseup="mouseup(6)" class="ZXArrows" src="@/assets/jianTou/Zxia.png" alt="" /> <img @mousedown="cameraBtn(5)" @mouseup="mouseup(5)" class="ZSArrows" src="@/assets/jianTou/Zshang.png" alt="" /> </div> <div class="footerLsitStyle_why"> <div style="padding: 5px" @mousedown="BigCamera(1)" @mouseup="BigCameraMouseup(1)" > <img src="@/assets/jianTou/magnify.png" alt="" /> </div> <div style="padding: 5px; border-left: 2px solid #1f4075" @mousedown="BigCamera(2)" @mouseup="BigCameraMouseup(2)" > <img src="@/assets/jianTou/reduce.png" alt="" /> </div> </div> </div> <div class="control footer" v-else @click="zheDielist = true"> <div></div> <div>云台控制</div> <div><img src="@/assets/carmear/xiala.png" alt="" /></div> </div> </div> </div> <div style="width: 100%; padding: 10px"> <div class="carStyle"> <div class="shexinag"> <div style="margin-left: 40px; display: flex"> <div style="padding: 6px; font-size: 17px" :class="1 == 1 ? 'tableLIstStyle ' : 'table_hui'" > 实时监控 </div> <div style="padding: 5px; font-size: 17px" :class="1 == 2 ? 'tableLIstStyle' : 'table_hui'" > 录像回放 </div> </div> </div> </div> <ul :class="1 != 1 ? 'FenPingCenter_box' : 'FenPingCenter_list_box'"> <li :class=" item == FenPingCenType ? 'FenPingCenter_Ui' : 'FenPingCenter_li' " v-for="(item, index) in IconFontNumber" :key="item" :style="{ width: 100 / IconFontTypenumber + '%' }" > <div class="FenPingLise" v-if="item == mouType"> <button @click="playerBtnItem(index)">关 闭</button> </div> <div class="divVide" :id="'FenPingCenter_li' + index" @mouseenter="mouseenteBtn(item)" @click=" FenPingCenClick({ type: item, Nme: 'FenPingCenter_li' + index }) " ></div> </li> </ul> <div class="footer_box"> <div class="iconFlist_box"> <span style="color: #fff">分屏 : </span> <i @mousedown="FenPing(item)" v-for="item in IconFont" :key="item.className" :class=" item.number == IconFontNumber ? ` iconFlist ${item.className}` : ` iconStyle ${item.className}` " ></i> </div> <div> <ul class="operationUl"> <li v-for="(item, index) in operationArray" :key="index" @click="FooterBtn(item)" > <div><img :src="item.image" alt="" /></div> <div>{{ item.name }}</div> </li> </ul> </div> </div> </div> </div> </template> <script> // import { treeselect } from "@/api/system/dept"; // 接口 import { get_user_info, cameraTree, realtime, screenshot, panTiltControl,//云台控制必须是球机-上下左右转动 operateCamera } from '../api' // 接口 import { camerasPage, hikCameraRtspUrl } from "../../autonym/api"; //接口 import Player from "xgplayer"; import FlvPlayer from "xgplayer-flv"; import 'xgplayer/dist/index.min.css' import { v4 as uuidv4 } from 'uuid'; export default { name: 'RuoyiVueUIIndex', data() { return { FenPingCenType: null, // mouType: null, destroyType: null,// 判断是否销毁 zheDielist: false, // 左侧云台控制显示 uuidv4: '',// uuid 视频放大时使用 treeData: [ // 左侧 tree 的数据 { id: 1, channelName: "全部", children: [ ], }, ], // 图标 IconFontNumber: 1, IconFontTypenumber: 1, IconFont: [ { className: 'iconfont icontiFenPingOne', number: 1, }