<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,
}
图片.zip （24个子文件） 
图片 
index (2).vue 28KB jianTou 
caozuo.png 2KB magnify.png 1KB you.png 552B zuo.png 551B reduce.png 1KB xia.png 551B Yshang.png 300B Zshang.png 310B shang.png 496B Zxia.png 304B Yxia.png 304B carmear BigList.png 1KB xiala.png 2KB duijiang.png 2KB SHEX.png 5KB reight.png 49KB c4376fe3c0a3900dac115188b86e1a7.png 393B left.png 58KB luxiang.png 1KB yinpin.png 1KB yuanpan.png 96KB zhuapai.png 1KB qaunping.png 910B资源评论
