haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实时监控

This commit is contained in:
cwchen 2024-08-16 13:05:55 +08:00
parent 94e640ade3
commit 01fc431ec9
3 changed files with 328 additions and 481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/construction/manage/realTimeManage.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
/* 人员树 */
export function getBallDeviceLists(query) {
return request({
url: '/bracelet/consControl/getBallDeviceLists',
method: 'get',
params: query
})
}

22
src/views/construction/manage/index.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="app-container" style="background-color: #F9F9F9;">
<el-tabs v-model="activeName" class="demo-tabs">
<!-- <el-tab-pane label="实时监控" class="realTimeManage" name="first">
<realTimeManage/>
</el-tab-pane> -->
<el-tab-pane label="实时监控" class="realTimeManage" name="first">
<realTimeManage />
</el-tab-pane>
<el-tab-pane label="人员管控" class="personManage" name="second">
<personManage/>
<personManage />
</el-tab-pane>
<el-tab-pane label="吊装管控" class="hoistManage" name="three">
<hoistManage/>
<hoistManage />
</el-tab-pane>
</el-tabs>
@ -16,20 +16,19 @@
</template>
<script>
// import realTimeManage from './realTimeManage/realTimeManage.vue';
import realTimeManage from './realTimeManage/realTimeManage.vue';
import personManage from './personManage/personManage.vue';
import hoistManage from './hoistManage/hoistManage.vue';
export default {
name: "manage",
components: {
// realTimeManage,
realTimeManage,
personManage,
hoistManage
},
data() {
return {
// activeName: 'first'
activeName: 'second'
activeName: 'first'
};
},
created() {
@ -37,9 +36,8 @@ export default {
methods: {
// test();
}
};
</script>
<style>
</style>
<style></style>

778
src/views/construction/manage/realTimeManage/realTimeManage.vue
View File

@ -1,93 +1,51 @@
<template>
<div class="realTimeManage" style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;">
<div class="left">
<div class="leftTop">
<div class="title1">
实时监控
</div>
<div class="controlDeck">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>聚焦</div>
<div>缩放</div>
<div>光圈</div>
</div>
</div>
<div class="monitorList" >
<!-- -->
<el-tree :data="monitorList" icon="el-icon-search" node-key="id" :default-expanded-keys="[1]"
@node-click="handleNodeClick" :render-content="renderContent" style="font-size: 14px;"/>
</div>
</div>
<div class="rightTop">
<div class="title">
<el-tabs v-model="splitScreenName" class="demo-tabs" @tab-click="splitScreenClick">
<el-tab-pane label="一画面" class="realTimeManage" name="first">
<div style="width: 100%;height: 52vh;">
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="height:100%;width:100%;object-fit: fill"></video>
</div>
</el-tab-pane>
<el-tab-pane label="四画面" class="personManage" name="second">
<<!-- div style="width: 100%;height: 52vh;">
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="height:50%;width:50%;object-fit: fill"></video>
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="height:50%;width:50%;object-fit: fill"></video>
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="height:50%;width:50%;object-fit: fill"></video>
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="height:50%;width:50%;object-fit: fill"></video>
</div> -->
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="down">
<div v-for="(item, index) in violationPhoto" :key="item.id">
<div>
<img :src="item.path" style="width: 100%;height: 100%;"/>
</div>
<div>
<span>{{ item.cameraName }}</span>
<span>{{ item.time }}</span>
</div>
<div>{{ item.content }}</div>
</div>
</div>
</div>
<div class="right">
<div>预警信息</div>
<div>
<el-table :data="tableData" style="width: 100%" :show-header="false">
<el-table-column prop="deviceType" label="设备类型"/>
<el-table-column prop="deviceName" label="设备名称"/>
<el-table-column prop="time" label="预警时间" />
<el-table-column prop="warnContent" label="预警内容" />
</el-table>
<el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
:background="true" layout="prev, pager, next, jumper,->,total, sizes" :total="total"
@current-change="getHasRole" @size-change="handler" />
</div>
</div>
<div class="realTimeManage">
<div class="left">
<!-- 云平台 -->
<div class="cloud-platform-box">
</div>
<!-- 球机树 -->
<div class="tree-box tree">
<el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="filterText" maxlength="30"
style="margin: 10px 0;"></el-input>
<el-tree :data="treeData" icon="el-icon-search" node-key="id" :default-expanded-keys="idArr"
@node-click="handleNodeClick" :render-content="renderContent" style="font-size: 15px;letter-spacing: 1px;"
ref="tree" :highlight-current="true" :filter-node-method="filterNode" />
</div>
</div>
</template>
<script>
<!-- 视频 -->
<div class="center">
<div class="change-box layout">
<el-button type="primary" plain>1</el-button>
<el-button type="primary" plain>4</el-button>
</div>
<!-- 球机视频 -->
<div class="video-box">
<video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
</div>
<!-- 违章识别 -->
<div class="vio-box"></div>
</div>
<!-- 预警信息 -->
<div class="right">
<h4>预警信息</h4>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="deviceType" label="设备类型" align="center">
</el-table-column>
<el-table-column prop="deviceName" label="设备名称" align="center">
</el-table-column>
<el-table-column prop="warnTime" label="违章时间" align="center">
</el-table-column>
<el-table-column prop="warnContent" label="违章内容" align="center">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { getBallDeviceLists } from "@/api/construction/manage/realTimeManage.js";
/* import { include } from '../../../../utils/video/include.js'
import { video } from '../../../../utils/video/video-7.19.1.min.js'
import { flv } from '../../../../utils/video/flv.js'
@ -97,394 +55,276 @@
import { videoQX } from '../../../../utils/video/videoQX';
import $ from 'jquery'; */
export default {
name: 'realTimeManage',
data() {
return {
//页码
pageNo: 1,
//每页条数
pageSize: 5,
//保存球机数据
monitorList: [
{
id: '1',
label: '工程xxxxxxx',
children: [
{
label: '张三',
puId: '123123123123'
},
],
},
{
label: '工程xxxxxxx',
children: [
{
label: '张三1',
puId: '798779798779877'
},
],
},
{
label: '工程xxxxxxx',
children: [
{
label: '#张三2',
puId: '565445646464654'
},
],
},
],
splitScreenName: 'first',
//保存违章照片
violationPhoto: [{"id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}]
//保存表格数据
,tableData: [
{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
time: '2024-03-03',
warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
},{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
time: '2024-03-03',
warnContent: '人员未佩戴安全帽'
},{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
time: '2024-03-03',
warnContent: '人员未佩戴安全帽'
},{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
time: '2024-03-03',
warnContent: '人员未佩戴安全帽'
},
{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
time: '2024-03-03',
warnContent: '人员未佩戴安全帽'
}
]
};
export default {
name: 'realTimeManage',
/* 球机树前端筛选 */
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
data() {
return {
//页码
pageNo: 1,
//每页条数
pageSize: 5,
// 球机树过滤
filterText: '',
//球机树数据
treeData: [],
// 球机树默认展示的节点
idArr: [],
splitScreenName: 'first',
//保存违章照片
violationPhoto: [{ "id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }]
//保存表格数据
, tableData: [
{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
warnTime: '2024-03-03',
warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
}, {
deviceType: '监控设备',
deviceName: 'xxxxx球机',
warnTime: '2024-03-03',
warnContent: '人员未佩戴安全帽'
}, {
deviceType: '监控设备',
deviceName: 'xxxxx球机',
warnTime: '2024-03-03',
warnContent: '人员未佩戴安全帽'
}, {
deviceType: '监控设备',
deviceName: 'xxxxx球机',
warnTime: '2024-03-03',
warnContent: '人员未佩戴安全帽'
},
{
deviceType: '监控设备',
deviceName: 'xxxxx球机',
warnTime: '2024-03-03',
warnContent: '人员未佩戴安全帽'
}
]
};
},
created() {
this.laodBallDeviceLists();
},
mounted() {
this.loadExternalScript();
},
methods: {
/* 加载球机树 */
laodBallDeviceLists() {
getBallDeviceLists().then(res => {
const treeData = res.data;
if (treeData && treeData.length > 0) {
this.treeData = treeData
// 设置默认展示球机层级
treeData.forEach(item => {
this.idArr.push(item.id);
})
}
}).catch(res => { });
},
created() {
},
mounted(){
this.loadExternalScript();
// const queryParams = this.$route.query;
// console.log("queryParams");
},
methods: {
async loadExternalScript() {
try {
// 假设你的JavaScript文件位于'/path/to/your/script.js'
const module = await import('../../../../utils/video/videoPage');
// 如果你需要使用module.export导出的内容，可以在这里进行操作
} catch (e) {
console.error('Error loading the external script:', e);
}
},
splitScreenClick(pane, event){
console.log("pane:", );
console.log("event:", event);
if(pane.name === 'first'){
}
if(pane.name === 'second'){
}
},
//树组件节点点击
handleNodeClick(data){
console.log(data.puId)
},
//给梳妆街头不同层级设置不同的icon
renderContent(h, { node, data }) {
// 根据层级使用不同的图标
let icon;
if (node.level === 1) {
icon = 'el-icon-coin'; // 第一层使用主页图标
} else if (node.level === 2) {
icon = 'el-icon-s-unfold'; // 第二层使用展开图标
} else {
icon = 'el-icon-user'; // 其他层级使用平台图标
}
return (
<span class="custom-tree-node">
<i class={icon}></i>
<span>{node.label}</span>
</span>
);
},
//
//分页器设置
handler(){
getHasRole()
},
//获取表格数据
getHasRole (page = 1){
//修改当前页码
this.pageNo = page;
/* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
if (request.data.code == 200) {
total.value = request.data.data.total;
roleArr.value = request.data.data.records;
} */
async loadExternalScript() {
try {
// 假设你的JavaScript文件位于'/path/to/your/script.js'
const module = await import('../../../../utils/video/videoPage');
// 如果你需要使用module.export导出的内容，可以在这里进行操作
} catch (e) {
console.error('Error loading the external script:', e);
}
},
/* 球机树过滤 */
filterNode(value, data, node) {
if (!value) {
if (node.level == 1) {
node.expanded = true
} else {
node.expanded = false
}
return true
}
// 查询列表是否有匹配数据
let val = value.toLowerCase()
return this.chooseNode(val, data, node)
},
// 过滤父节点 子节点:如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。
chooseNode(value, data, node) {
if (data.label.indexOf(value) !== -1) {
return true
}
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回
if (parentData.data.label.indexOf(value) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
},
//球机树节点点击
handleNodeClick(data, node, item) {
if (node.level === 2) {
alert(data.id);
}
},
splitScreenClick(pane, event) {
console.log("pane:",);
console.log("event:", event);
if (pane.name === 'first') {
}
if (pane.name === 'second') {
}
},
//给梳妆街头不同层级设置不同的icon
renderContent(h, { node, data }) {
// 根据层级使用不同的图标
let icon;
if (node.level === 1) {
icon = 'el-icon-coin'; // 第一层使用主页图标
} else if (node.level === 2) {
icon = 'el-icon-s-unfold'; // 第二层使用展开图标
} else {
icon = 'el-icon-user'; // 其他层级使用平台图标
}
return (
<span class="custom-tree-node">
<i class={icon}></i>
<span>{node.label}</span>
</span>
);
},
//
//分页器设置
handler() {
getHasRole()
},
//获取表格数据
getHasRole(page = 1) {
//修改当前页码
this.pageNo = page;
/* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
if (request.data.code == 200) {
total.value = request.data.data.total;
roleArr.value = request.data.data.records;
} */
}
};
</script>
<style scoped>
}
};
</script>
<style lang="scss" scoped>
.realTimeManage {
width: 100%;
height: 80vh;
background-color: #fff;
box-shadow: 10px 10px 5px #000;
display: flex;
align-items: center;
justify-content: space-between;
}
.layout {
display: flex;
align-items: center;
justify-content: start;
}
.realTimeManage .left {
width: 20%;
height: 100%;
padding: 0 0.5%;
box-sizing: border-box;
}
.cloud-platform-box {
width: 100%;
height: 250px;
}
.tree-box {
width: 100%;
height: calc(100% - 250px);
overflow-y: auto;
}
.realTimeManage .center {
width: 48%;
height: 100%;
}
.change-box {
width: 100%;
height: 50px;
justify-content: center;
}
.video-box {
width: 100%;
height: calc(100% - 250px);
}
.ball-content {
width: 100%;
height: 100%;
pointer-events: none;
object-fit: fill;
}
.vio-box {
width: 100%;
height: 200px;
}
.realTimeManage .right {
width: 30%;
height: 100%;
}
.realTimeManage>div>div{
float: left;
}
.realTimeManage .left{
width: 66%;
/* tree节点过长换行处理 */
.tree {
width: 100%;
::v-deep .el-tree-node {
white-space: normal;
.el-tree-node__content {
height: 100%;
}
.realTimeManage .left>div{
float: left;
}
.realTimeManage .left>.leftTop{
width: 23%;
height: 75%;
}
.realTimeManage .left>.leftTop>.title1{
font-weight: 600;
font-size: 14px;
color: #333333;
width: 100%;
height: 8%;
display: flex;
align-items: center;
text-indent: 20px;
margin: 4px 0;
}
.realTimeManage .left>.leftTop>.controlDeck{
width: 100%;
height: 42%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1){
width: 100%;
height: 85%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div{
width: 40px;
height: 40px;
cursor: pointer;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(1){
position: absolute;
top: 7%;
left: 6.35%;
background-image: url('../../../../assets/images/control1.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(2){
position: absolute;
top: 12.55%;
left: 3.7%;
background-image: url('../../../../assets/images/control2.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(3){
position: absolute;
top: 12.5%;
left: 9%;
background-image: url('../../../../assets/images/control3.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(4){
position: absolute;
top: 18%;
left: 6.35%;
background-image: url('../../../../assets/images/control4.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(5){
position: absolute;
top: 21.9%;
left: 1%;
background-image: url('../../../../assets/images/control5.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(6){
position: absolute;
top: 27%;
left: 1%;
background-image: url('../../../../assets/images/control6.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(7){
position: absolute;
top: 27%;
left: 5.3%;
background-image: url('../../../../assets/images/control7.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(8){
position: absolute;
top: 27%;
left: 7.55%;
background-image: url('../../../../assets/images/control8.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(9){
position: absolute;
top: 21.9%;
left: 11.8%;
background-image: url('../../../../assets/images/control9.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(10){
position: absolute;
top: 27%;
left: 11.8%;
background-image: url('../../../../assets/images/control10.png');
background-repeat: no-repeat;
background-size: 100%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2){
width: 100%;
height: 15%;
display: flex;
justify-content: space-between;
align-items: center;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div{
color: #06182E;
font-size: 14px;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(1){
margin-left: 9%;
}
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(3){
margin-right: 9%;
}
.realTimeManage .left>.leftTop>.monitorList{
width: 100%;
height: 50%;
overflow: auto;
}
.realTimeManage .left>.leftTop>.monitorList>div:nth-child(1){
border-top: 0.5px solid #F5F4F4;
}
.realTimeManage .left>.rightTop{
width: 77%;
height: 75%;
}
.realTimeManage .left>.down{
margin-top: 1%;
width: 100%;
height: 23%;
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
}
.realTimeManage .left>.down>div{
height: 100%;
width: 17%;
margin-left: 2%;
display: inline-block;
}
.realTimeManage .left>.down>div>div:nth-child(1){
width: 100%;
height: 68%;
}
.realTimeManage .left>.down>div>div:nth-child(2){
width: 100%;
height: 16%;
display: flex;
justify-content: space-between;
align-items: center;
}
.realTimeManage .left>.down>div>div:nth-child(2)>span{
text-indent: 8px;
color: #333333;
font-size: 14px;
}
.realTimeManage .left>.down>div>div:nth-child(3){
width: 100%;
height: 16%;
text-indent: 8px;
color: #333333;
font-size: 14px;
}
.realTimeManage .right{
margin-left: 1%;
width:32%;
height: 100%;
}
.realTimeManage .right>div:nth-child(1){
width: 100%;
height: 6%;
color: #333333;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
text-indent: 20px;
}
.realTimeManage .right>div:nth-child(2){
width: 100%;
height: 94%;
overflow: auto;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px #e8eceb;
border-radius: 5px;
::v-deep .el-tree-node__label {
font-size: 15px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ffffff;
-webkit-box-shadow: inset 0 0 6px #cbb7b7;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #e8eceb;
}
::-webkit-scrollbar-corner {
background-color: #e8eceb;
}
</style>
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: #1890ff;
}
</style>