2022-06-08 14:51:11 +08:00
|
|
|
|
<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>
|
2023-05-15 16:29:36 +08:00
|
|
|
|
<div>
|
2022-06-08 14:51:11 +08:00
|
|
|
|
<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>
|
2023-05-15 16:29:36 +08:00
|
|
|
|
<div class="item-detail">暂无数据
|
|
|
|
|
|
<!-- <div class="condition-title">检查总数<span>208</span></div>
|
|
|
|
|
|
<div ref="echart1" style="width:100%; height:148px"></div> -->
|
2022-06-08 14:51:11 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="list-item" v-if="pageType == 1">
|
|
|
|
|
|
<div class="item-content">
|
|
|
|
|
|
<div class="item-title"><span></span>累计预警工程排行</div>
|
2023-05-15 16:29:36 +08:00
|
|
|
|
<div class="item-detail">暂无数据
|
|
|
|
|
|
<!-- <div ref="echart2" style="width:100%; height:177px"></div> -->
|
2022-06-08 14:51:11 +08:00
|
|
|
|
</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;
|
|
|
|
|
|
}
|
2023-05-15 16:29:36 +08:00
|
|
|
|
.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;
|
|
|
|
|
|
}
|
2022-06-08 14:51:11 +08:00
|
|
|
|
.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>
|
