907 lines
38 KiB
Vue
907 lines
38 KiB
Vue
<template>
|
||
<div class="rightMenu-wrap">
|
||
<div class="left-border"></div>
|
||
<div class="content">
|
||
<div class="list-item" v-if="pageType == 1">
|
||
<div class="item-content">
|
||
<div class="item-title"><span></span>智能监测</div>
|
||
<div>
|
||
<ul class="monitor-list">
|
||
<li v-for="(item,index) in statisticsDevCount" :key="index">
|
||
<p><b>{{item.devOnline}}</b>/{{item.devNum}}</p>
|
||
<span>{{item.name}}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-item" v-if="pageType == 1">
|
||
<div class="item-content">
|
||
<div class="item-title"><span></span>巡检情况</div>
|
||
<div class="item-detail">
|
||
<!-- 暂无数据 -->
|
||
<div class="condition-title">检查总数<span>208</span></div>
|
||
<div ref="echart1" style="width:100%; height:148px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-item" v-if="pageType == 1">
|
||
<div class="item-content">
|
||
<div class="item-title"><span></span>累计预警工程排行</div>
|
||
<div class="item-detail">
|
||
<!-- 暂无数据 -->
|
||
<div ref="echart2" style="width:100%; height:177px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-item" v-if="pageType == 1">
|
||
<div class="item-content">
|
||
<div class="item-title"><span></span>设备预警</div>
|
||
<div class="item-detail">
|
||
<ul class="warning-list">
|
||
<li :class="{'active': warningIndex == index}" v-for="(item,index) in warningData" :key="index" @click="selectEchartData(index)">
|
||
{{item.num}}
|
||
<span>{{item.name}}</span>
|
||
</li>
|
||
</ul>
|
||
<div ref="echart3" style="width:100%; height:151px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="viedo-list" v-if="pageType == 2">
|
||
<div class="video-title">
|
||
<span>视频回放</span>
|
||
<el-select v-model="value" size="small" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in dateList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
<span style="float: left">时间：</span>
|
||
<span style="float: right; font-size: 13px">{{ item.label.split("：")[1] }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="video-content">
|
||
<ul>
|
||
<li v-for="i in 20" :key="i">
|
||
<!-- <video src=""></video> -->
|
||
<img src="./../../../assets/images/bigScreen/demo.jpg" style="width: 90%; height: 130px; margin: 0 auto; display: block;"/>
|
||
<div class="video-message"><span>2020-06-13</span></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-border"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import {
|
||
selectDevCountStatistics,
|
||
selectDevCurrentAlarmCount,
|
||
selectDischargingSevenDayAlarmList,
|
||
selectEnvironmentSevenDayAlarmList,
|
||
selectVideoSevenDayAlarmList,
|
||
selectLifterSevenDayAlarmList,
|
||
selectTowerSevenDayAlarmList,
|
||
} from './../../../assets/js/api/companyBigScreen.js'
|
||
export default {
|
||
name: "rightMenu",
|
||
props:{
|
||
pageType:{
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
projectSn:{
|
||
type: String,
|
||
default: ""
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
dateList: [
|
||
{
|
||
label: "时间：2021-06-13",
|
||
value: "1"
|
||
}
|
||
],
|
||
value: "",
|
||
monitorData: [
|
||
{
|
||
name: '扬尘',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '塔吊',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '升降机',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '卸料',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '水表',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '烟感',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '电表',
|
||
params: '4',
|
||
num: '103'
|
||
},
|
||
{
|
||
name: '养护室',
|
||
params: '4',
|
||
num: '103'
|
||
}
|
||
],
|
||
warningData: [],
|
||
echart1: Object,
|
||
option1: {},
|
||
echart2: Object,
|
||
option2: {},
|
||
echart3: Object,
|
||
option3: {},
|
||
statisticsDevCount: [],
|
||
warningIndex: 0,
|
||
}
|
||
},
|
||
watch:{
|
||
pageType(val, oldval){
|
||
if(val == 1){
|
||
this.$nextTick(()=>{
|
||
this.createEchart1();
|
||
this.createEchart2();
|
||
this.getDevCurrentAlarmCount();
|
||
})
|
||
}
|
||
},
|
||
projectSn(val, oldval){
|
||
console.log(val)
|
||
this.getDevCountStatistics();
|
||
this.getDevCurrentAlarmCount();
|
||
}
|
||
},
|
||
created(){
|
||
// this.projectSn = JSON.parse(sessionStorage.getItem('vuex')).userInfo.sn;
|
||
this.getDevCountStatistics();
|
||
this.getDevCurrentAlarmCount();
|
||
},
|
||
mounted(){
|
||
if(this.pageType == 1){
|
||
this.createEchart1();
|
||
this.createEchart2();
|
||
this.createEchart3();
|
||
}
|
||
},
|
||
methods: {
|
||
createEchart1(){
|
||
let echart1 = echarts.init(this.$refs['echart1']);
|
||
this.echart1 = echart1
|
||
echart1.clear();
|
||
this.option1 = {
|
||
legend: {
|
||
show:false
|
||
},
|
||
grid: {
|
||
right: "5%",
|
||
top: "20%",
|
||
left: "5%",
|
||
bottom: "5%",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: ["安全检查","综合检查",'质量检查'],
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置。
|
||
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
|
||
// margin:15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,0.4)",
|
||
fontStyle: "normal",
|
||
fontSize: 12
|
||
}
|
||
},
|
||
axisTick: {
|
||
//坐标轴刻度相关设置。
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
//坐标轴在 grid 区域中的分隔线。
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: [{
|
||
type: "value",
|
||
splitNumber: 6,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "rgba(255,255,255,0.4)",
|
||
fontSize: 12
|
||
}
|
||
},
|
||
axisLine:{
|
||
show: true,
|
||
lineStyle:{
|
||
type: 'dashed',
|
||
color: 'rgba(255,255,255,0.2)'
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255, 0.2)",
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [{
|
||
name: '巡检情况',
|
||
type: "pictorialBar",
|
||
barWidth: "60%",
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: "rgba(255,255,255, 0.8)"
|
||
},
|
||
symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAA+CAYAAAC1BDz9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4NjI5QTRCRDg3RDExRUJCQjVERThGMEY5QkU2NTFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ4NjI5QTRDRDg3RDExRUJCQjVERThGMEY5QkU2NTFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDg2MjlBNDlEODdEMTFFQkJCNURFOEYwRjlCRTY1MUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDg2MjlBNEFEODdEMTFFQkJCNURFOEYwRjlCRTY1MUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SyNc1AAAU6ElEQVR42uxca4wd110/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",
|
||
data: [23,84,101,74,87]
|
||
}],
|
||
};
|
||
echart1.setOption(this.option1);
|
||
},
|
||
createEchart2(){
|
||
let echart2 = echarts.init(this.$refs['echart2']);
|
||
this.echart2 = echart2
|
||
echart2.clear();
|
||
|
||
this.option2 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '10%',
|
||
bottom: '0',
|
||
top: "0",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
show: false
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['御花园一期…', '御花园一期…', '御花园一期…', '御花园一期…', '御花园一期…',"御花园一期…"],
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.8)",
|
||
formatter: function(value){
|
||
let valueTxt = ''
|
||
if (value.length > 5) {
|
||
valueTxt = value.substring(0,5) + '...'
|
||
} else {
|
||
valueTxt = value
|
||
}
|
||
return valueTxt
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '累计预警次数',
|
||
type: 'bar',
|
||
data: [ 100, 50, 30, 5, 15, 85 ],
|
||
label : {
|
||
normal : {
|
||
show : true,//显示数字
|
||
position : 'right',
|
||
color: "#fff"
|
||
}
|
||
},
|
||
barHeight: '12',
|
||
symbol: 'circle',
|
||
itemStyle:{
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
|
||
[
|
||
{offset: 0, color: 'rgba(2,251,256,0.8)'},
|
||
{offset: 1, color: 'rgba(238,115,25,0.8)'}
|
||
])
|
||
},
|
||
barCategoryGap: 14,
|
||
// barWidth: "40%"
|
||
}
|
||
]
|
||
};
|
||
echart2.setOption(this.option2);
|
||
},
|
||
createEchart3(val1,val2){
|
||
let echart3 = echarts.init(this.$refs['echart3']);
|
||
this.echart3 = echart3
|
||
echart3.clear();
|
||
let data1 = val1 ? val1 : []
|
||
let data2 = val2 ? val2 : []
|
||
this.option3 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '20',
|
||
bottom: '3%',
|
||
top: '20',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: data1,
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.6)',
|
||
type: 'dashed',
|
||
show: false,
|
||
fontSize: 10
|
||
}
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 10
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
},
|
||
boundaryGap: false
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine:{
|
||
show: false,
|
||
lineStyle:{
|
||
type: 'dashed',
|
||
color: 'rgba(255,255,255,0.3)'
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
nameTextStyle:{
|
||
color: "#fff"
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '设备预警',
|
||
type: 'line',
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
|
||
[
|
||
{offset: 0, color: 'rgba(252,201,16,0.3)'},
|
||
{offset: 1, color: 'rgba(238,115,25,0.3)'}
|
||
])
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data2,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FCC710",//折线点的颜色
|
||
lineStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
|
||
[
|
||
{offset: 0, color: 'rgba(252,201,16,1)'},
|
||
{offset: 1, color: 'rgba(238,115,25,1)'}
|
||
])//折线的颜色
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
echart3.setOption(this.option3);
|
||
},
|
||
// 获取智能检测数据
|
||
getDevCountStatistics(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectDevCountStatistics(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr = []
|
||
for(let key in res.result){
|
||
arr.push(res.result[key])
|
||
}
|
||
this.statisticsDevCount = arr
|
||
// console.log(this.statisticsDevCount)
|
||
}
|
||
})
|
||
},
|
||
// 获取每日设备预警数
|
||
getDevCurrentAlarmCount(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectDevCurrentAlarmCount(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr = []
|
||
for(let i in res.result){
|
||
var obj = {}
|
||
if(i == 'dischargingAlarmNum'){
|
||
obj.name = "卸料"
|
||
obj.num = res.result[i]
|
||
arr.push(obj)
|
||
} else if(i == 'environmentAlarmNum'){
|
||
obj.name = "扬尘"
|
||
obj.num = res.result[i]
|
||
arr.push(obj)
|
||
}else if(i == 'lifterAlarmNum'){
|
||
obj.name = "升降机"
|
||
obj.num = res.result[i]
|
||
arr.push(obj)
|
||
}else if(i == 'towerAlarmNum'){
|
||
obj.name = "塔吊"
|
||
obj.num = res.result[i]
|
||
arr.push(obj)
|
||
}else if(i == 'videoAlarmCount'){
|
||
obj.name = "视频"
|
||
obj.num = res.result[i]
|
||
arr.push(obj)
|
||
}
|
||
}
|
||
this.warningData = arr
|
||
this.selectEchartData(this.warningIndex)
|
||
}
|
||
})
|
||
},
|
||
// 切换预警展示数据
|
||
selectEchartData(index){
|
||
this.warningIndex = index
|
||
if(this.warningData[index].name == '卸料'){
|
||
this.getDischargingSevenDayAlarmList()
|
||
} else if(this.warningData[index].name == '扬尘'){
|
||
this.getEnvironmentSevenDayAlarmList()
|
||
} else if(this.warningData[index].name == '视频'){
|
||
this.getVideoSevenDayAlarmList()
|
||
} else if(this.warningData[index].name == '升降机'){
|
||
this.getLifterSevenDayAlarmList()
|
||
} else if(this.warningData[index].name == '塔吊'){
|
||
this.getTowerSevenDayAlarmList()
|
||
}
|
||
// console.log(this.warningData[index])
|
||
},
|
||
// 获取卸料七日内数据
|
||
getDischargingSevenDayAlarmList(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectDischargingSevenDayAlarmList(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr1 = [],
|
||
arr2 = [];
|
||
res.result.forEach(item=>{
|
||
let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
|
||
arr1.push(str)
|
||
arr2.push(item.num)
|
||
})
|
||
this.createEchart3(arr1,arr2)
|
||
}
|
||
})
|
||
},
|
||
// 获取扬尘七日内数据
|
||
getEnvironmentSevenDayAlarmList(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectEnvironmentSevenDayAlarmList(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr1 = [],
|
||
arr2 = [];
|
||
res.result.forEach(item=>{
|
||
let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
|
||
arr1.push(str)
|
||
arr2.push(item.num)
|
||
})
|
||
this.createEchart3(arr1,arr2)
|
||
}
|
||
})
|
||
},
|
||
// 获取视频预警七日内数据
|
||
getVideoSevenDayAlarmList(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectVideoSevenDayAlarmList(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr1 = [],
|
||
arr2 = [];
|
||
res.result.forEach(item=>{
|
||
let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
|
||
arr1.push(str)
|
||
arr2.push(item.num)
|
||
})
|
||
this.createEchart3(arr1,arr2)
|
||
}
|
||
})
|
||
},
|
||
// 获取升降机七日内数据
|
||
getLifterSevenDayAlarmList(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectLifterSevenDayAlarmList(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr1 = [],
|
||
arr2 = [];
|
||
res.result.forEach(item=>{
|
||
let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
|
||
arr1.push(str)
|
||
arr2.push(item.num)
|
||
})
|
||
this.createEchart3(arr1,arr2)
|
||
}
|
||
})
|
||
},
|
||
// 获取塔吊七日内数据
|
||
getTowerSevenDayAlarmList(){
|
||
let data = {
|
||
sn: this.projectSn
|
||
}
|
||
selectTowerSevenDayAlarmList(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
let arr1 = [],
|
||
arr2 = [];
|
||
res.result.forEach(item=>{
|
||
let str = item.titleName.split('-')[1]+"/"+item.titleName.split('-')[2]
|
||
arr1.push(str)
|
||
arr2.push(item.num)
|
||
})
|
||
this.createEchart3(arr1,arr2)
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.rightMenu-wrap{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50px;
|
||
width: 24%;
|
||
bottom: 0;
|
||
height:calc(100% - 50px);
|
||
z-index: 10;
|
||
display: flex;
|
||
}
|
||
.left-border{
|
||
width: 34px;
|
||
height: 100%;
|
||
background: url("./../../../assets/images/bigScreen/right-border.png") center no-repeat;
|
||
background-size: contain;
|
||
}
|
||
.right-border{
|
||
width: 34px;
|
||
height: 100%;
|
||
background: url("./../../../assets/images/bigScreen/body-right.png") center no-repeat;
|
||
background-size: contain;
|
||
}
|
||
.content{
|
||
flex: 1;
|
||
width: calc(100% - 68px);
|
||
height: 100%;
|
||
background-color: rgba(18, 65, 68, .2);
|
||
}
|
||
|
||
.list-item{
|
||
position: relative;
|
||
width: 100%;
|
||
margin-bottom: 12px;
|
||
padding: 13px 0;
|
||
.item-content{
|
||
background-color: rgba(18, 65, 68,0.3);
|
||
.item-title{
|
||
height: 22px;
|
||
color: #02FBE2;
|
||
font-size: 14px;
|
||
position: relative;
|
||
padding-left: 19px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 18px;
|
||
span{
|
||
width: 3px;
|
||
height: 13px;
|
||
background: #02FBE2;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
.item-title::before{
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 40px;
|
||
height: 100%;
|
||
background: linear-gradient(to right, rgba(2, 251, 226, 0.5),rgba(0,0,0,0));
|
||
}
|
||
}
|
||
}
|
||
.list-item::before{
|
||
content: "";
|
||
display: block;
|
||
background: url("./../../../assets/images/bigScreen/top-border.png") center no-repeat;
|
||
background-size: 100%;
|
||
width: 100%;
|
||
height: 10px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.list-item::after{
|
||
content: "";
|
||
display: block;
|
||
background: url("./../../../assets/images/bigScreen/bottom-border.png") center no-repeat;
|
||
background-size: 100%;
|
||
width: 100%;
|
||
height: 10px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.item-detail{
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
padding-bottom: 6px;
|
||
}
|
||
.item-detail:nth-child(2){
|
||
line-height: 180px;
|
||
text-align: center;
|
||
width: 100%;
|
||
height:180px;
|
||
}
|
||
.item-detail:nth-child(3){
|
||
line-height: 180px;
|
||
text-align: center;
|
||
width: 100%;
|
||
height:180px;
|
||
}
|
||
.monitor-list{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
li{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex: 25%;
|
||
height: 74px;
|
||
background: url('./../../../assets/images/bigScreen/num-border.png') no-repeat center;
|
||
margin-bottom: 9px;
|
||
color: #02FBE2;
|
||
b{
|
||
font-weight: normal;
|
||
color: #FFDF10;
|
||
}
|
||
span{
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
.condition-title{
|
||
display: flex;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: -30px;
|
||
span{
|
||
width: 65px;
|
||
height: 35px;
|
||
display: block;
|
||
background: url('./../../../assets/images/bigScreen/inspect-border.png') no-repeat center;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #02FBE2;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
margin-left: 15px;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.warning-list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
li{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #02FBE2;
|
||
font-size: 16px;
|
||
margin: 0 2px;
|
||
width: 69px;
|
||
opacity: 0.5;
|
||
cursor: pointer;
|
||
height: 58px;
|
||
background: url('./../../../assets/images/bigScreen/item-border.png') no-repeat center;
|
||
span{
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 12px;
|
||
padding-bottom: 6px;
|
||
}
|
||
}
|
||
.active{
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.viedo-list{
|
||
height: calc(100% - 10px);
|
||
.video-title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 10px;
|
||
/deep/ .el-input{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 18px;
|
||
}
|
||
/deep/ .el-input__inner{
|
||
height: 34px;
|
||
background: rgba(5, 12, 17, 0.5);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(4, 134, 123, 0.28);
|
||
}
|
||
/deep/ .el-input__icon{
|
||
color: #02FBE2;
|
||
line-height: 34px;
|
||
}
|
||
/deep/ .el-input__inner:focus {
|
||
outline: none;
|
||
border: 1px solid rgba(4, 134, 123, 0.8);
|
||
}
|
||
}
|
||
.video-content{
|
||
height: calc(100% - 40px);
|
||
overflow: auto;
|
||
ul{
|
||
li{
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 10px 0;
|
||
.video-message{
|
||
margin-left: 5%;
|
||
margin-top: 10px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/*滚动条整体部分,必须要设置*/
|
||
::-webkit-scrollbar{
|
||
width: 4px;
|
||
height: 26px;
|
||
background-color: transparent;
|
||
}
|
||
/*滚动条的轨道*/
|
||
::-webkit-scrollbar-track{
|
||
background-color: transparent;
|
||
}
|
||
/*滚动条的滑块按钮*/
|
||
::-webkit-scrollbar-thumb{
|
||
border-radius: 10px;
|
||
background-color: rgba(4, 106, 169,0.3);
|
||
box-shadow: inset 0 0 5px rgba(4, 186, 169,0.3);
|
||
}
|
||
/*滚动条的上下两端的按钮*/
|
||
::-webkit-scrollbar-button{
|
||
height: 0;
|
||
background-color: rgba(4, 186, 169,0.3);
|
||
}
|
||
|
||
// 两个滚动条的交汇处
|
||
::-webkit-scrollbar-corner{
|
||
background-color: transparent;
|
||
}
|
||
|
||
div{
|
||
/*三角箭头的颜色*/
|
||
scrollbar-arrow-color: rgba(4, 186, 169,0.3);
|
||
/*滚动条滑块按钮的颜色*/
|
||
scrollbar-face-color: rgba(4, 186, 169,0.3);
|
||
/*滚动条整体颜色*/
|
||
scrollbar-highlight-color: rgb(12,23,35);
|
||
/*滚动条阴影*/
|
||
scrollbar-shadow-color: transparent;
|
||
/*滚动条轨道颜色*/
|
||
scrollbar-track-color: transparent;
|
||
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
|
||
scrollbar-3dlight-color:rgba(4, 186, 169,0.3);
|
||
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
|
||
scrollbar-darkshadow-color: rgba(4, 186, 169,0.3);
|
||
/*滚动条基准颜色*/
|
||
scrollbar-base-color: rgba(4, 186, 169,0.3);
|
||
}
|
||
</style> |