<template>
|
<div class="data-view">
|
<div id="load" v-show="loading">
|
<div class="load_img">
|
<!-- 加载动画 -->
|
<img class="jzxz1" src="/images/data-v/jzxz1.png" />
|
<img class="jzxz2" src="/images/data-v/jzxz2.png" />
|
</div>
|
</div>
|
<div class="head_top">
|
<div class="time">{{ timeStr }}</div>
|
<span>智慧工厂可视化驾驶舱</span>
|
</div>
|
<div class="visual">
|
<div class="left-top10">
|
<div class="title">
|
<span>部门告警数量 TOP10</span>
|
</div>
|
|
<div class="top10-list" v-for="(v, idx) in top10" :key="idx">
|
<div class="list-0">{{ idx + 1 }}</div>
|
<div class="list-1">{{ v.name }}</div>
|
<div class="list-2">{{ v.totalWarn }}</div>
|
<img class="list-img" src="/images/data-v/line.png" alt="" />
|
</div>
|
</div>
|
<div class="center">
|
<div class="center-left">
|
<div class="center-count">
|
<b style="font-size: 40px;">{{ warnTotal }}</b>
|
<p style="margin-top:2px">7日内预警总量</p>
|
<p style="margin-top:35px">场景总量: 974</p>
|
<p style="margin-top:5px">监测点总量: {{ cameraTotal }}</p>
|
</div>
|
</div>
|
<div class="center-right">
|
<div class="chart">
|
<el-progress :stroke-width="15" type="circle" :percentage="checkRate"></el-progress>
|
</div>
|
<span>周</span><span>排查率</span>
|
<div class="chart">
|
<el-progress :stroke-width="15" type="circle" :percentage="solveRate"></el-progress>
|
</div>
|
<span>周</span><span>整改率</span>
|
<div class="chart">
|
<el-progress :stroke-width="15" type="circle" :percentage="manageRate"></el-progress>
|
</div>
|
<span>周</span><span>处理率</span>
|
</div>
|
</div>
|
<div class="right-week">
|
<div class="title">
|
<span>近7日排查数量统计</span>
|
</div>
|
<div id="barChart" style="width: 100%;height:100%"></div>
|
</div>
|
<div class="right-device">
|
<div class="title">
|
<span>数据监控</span>
|
</div>
|
<div class="device-count">
|
<img src="/images/data-v/d-total.png" alt="" />
|
<div class="device-total">
|
<p>设备总量</p>
|
<p style="color:#FFF">6</p>
|
</div>
|
|
<div class="device-online">
|
<img src="/images/data-v/online.png" alt="" />
|
|
<p style="margin-top: 10px;">在线</p>
|
<p style="color:#FFF">6</p>
|
</div>
|
<div class="device-offline">
|
<img src="/images/data-v/offline.png" alt="" />
|
|
<p style="margin-top: 10px;">离线</p>
|
<p style="color:#FFF">0</p>
|
</div>
|
</div>
|
</div>
|
<div class="right-type">
|
<div class="title">
|
<span>告警类型占比</span>
|
</div>
|
<div id="pieChart" style="width: 100%;height:100%"></div>
|
</div>
|
<div class="bottom-line">
|
<div class="title">
|
<span>告警数量趋势</span>
|
</div>
|
<div id="lineChart" style="width: 100%;height:100%"></div>
|
</div>
|
<div class="clear"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from "echarts"
|
import * as Base64 from "js-base64"
|
import { analysisReport } from "@/api/es"
|
import { getLocalCameraTree } from "@/api/area"
|
import { getClusterDevList } from "@/api/clusterManage"
|
|
export default {
|
components: {},
|
computed: {
|
solvedPre() {
|
if (this.solvedTotal == 0 || this.tableDataList.length == 0) {
|
return 0
|
}
|
return parseInt(this.solvedTotal / this.tableDataList.length)
|
},
|
warningManage() {
|
if (this.warningChecked == 0 || this.warningTotal == 0) {
|
return 0
|
}
|
return parseInt(this.warningChecked / this.warningTotal) * 100
|
}
|
},
|
data() {
|
return {
|
timeStr: "",
|
cameraTree: [],
|
warnTotal: 0,
|
cameraTotal: 0,
|
cameras: {}, // 记录摄像机属于的部门
|
orgs: {}, // 记录有摄像机的部门
|
checkRate: 0,
|
solveRate: 0,
|
manageRate: 0,
|
searchTime: [
|
this.$moment()
|
.subtract(6, "days")
|
.format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss")
|
],
|
loading: true,
|
lineChart: {},
|
pieChart: {},
|
barChart: {},
|
top10: [],
|
lineChartOption: {
|
grid: {
|
left: "3%",
|
right: "3%",
|
bottom: "20%",
|
containLabel: true
|
},
|
legend: {
|
x: "right",
|
y: "top",
|
itemHeight: 2,
|
itemWidth: 2,
|
icon: "circle"
|
},
|
tooltip: {},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
color: "#e3f0fd"
|
},
|
data: ["1", "2", "3", "4", "5", "6", "7"]
|
},
|
yAxis: {
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
//y轴
|
show: false
|
},
|
axisLabel: {
|
color: "#e3f0fd"
|
},
|
splitLine: {
|
//网格线
|
lineStyle: {
|
color: "rgb(230, 230, 230)",
|
type: "dashed" //设置网格线类型 dotted：虚线 solid:实线
|
},
|
show: false //隐藏或显示
|
}
|
},
|
// Declare several bar series, each will be mapped
|
// to a column of dataset.source by default.
|
series: [
|
{
|
type: "line",
|
data: [55, 33, 22, 33, 55, 43, 11],
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: "#0066FF"
|
},
|
{
|
offset: 1,
|
color: "rgba(0, 102, 255, 0.25)"
|
}
|
])
|
},
|
color: {
|
type: "linear",
|
x: 0.02,
|
y: 0.02,
|
x2: 1,
|
y2: 1,
|
colorStops: [
|
{
|
offset: 0,
|
color: "#0066FF" // 0% 处的颜色
|
// radius: ["50%", "80%"]
|
},
|
{
|
offset: 1,
|
color: "rgba(0, 102, 255, 0.25)" // 100% 处的颜色
|
}
|
],
|
global: false // 缺省为 false
|
},
|
itemStyle: {
|
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
normal: {
|
//柱形图圆角，初始化效果
|
barBorderRadius: [15, 15, 0, 0]
|
}
|
}
|
}
|
]
|
},
|
barChartOption: {
|
grid: {
|
top: "10%",
|
left: "10%",
|
right: "10%",
|
// bottom: "0%"
|
containLabel: true
|
},
|
legend: {
|
x: "right",
|
y: "top",
|
itemHeight: 2,
|
itemWidth: 2,
|
icon: "circle"
|
},
|
tooltip: {},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
color: "#e3f0fd"
|
},
|
data: []
|
},
|
yAxis: {
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
//y轴
|
show: false
|
},
|
axisLabel: {
|
color: "#e3f0fd",
|
show: false
|
},
|
splitLine: {
|
//网格线
|
lineStyle: {
|
color: "rgb(230, 230, 230)",
|
type: "dashed" //设置网格线类型 dotted：虚线 solid:实线
|
},
|
show: false //隐藏或显示
|
}
|
},
|
// Declare several bar series, each will be mapped
|
// to a column of dataset.source by default.
|
series: [
|
{
|
type: "bar",
|
data: [],
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: "#0066FF"
|
},
|
{
|
offset: 1,
|
color: "rgba(0, 102, 255, 0.25)"
|
}
|
])
|
},
|
color: {
|
type: "linear",
|
x: 0.02,
|
y: 0.02,
|
x2: 1,
|
y2: 1,
|
colorStops: [
|
{
|
offset: 0,
|
color: "#0066FF" // 0% 处的颜色
|
// radius: ["50%", "80%"]
|
},
|
{
|
offset: 1,
|
color: "rgba(0, 102, 255, 0.25)" // 100% 处的颜色
|
}
|
],
|
global: false // 缺省为 false
|
},
|
itemStyle: {
|
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
normal: {
|
//柱形图圆角，初始化效果
|
barBorderRadius: [15, 15, 0, 0]
|
}
|
}
|
}
|
]
|
},
|
pieChartOption: {
|
tooltip: {
|
trigger: "item",
|
formatter: "{b} {d}%" //只要百分比
|
},
|
legend: {
|
top: "70%",
|
bottom: "center",
|
textStyle: {
|
color: "#e3f0fd"
|
}
|
},
|
color: [
|
"rgb(54, 60, 231)",
|
"rgb(54, 178, 74)",
|
"rgb(255, 178, 36)",
|
"rgb(240, 190, 231)",
|
"rgb(255, 124, 31)",
|
"rgb(165, 96, 255)"
|
],
|
series: [
|
{
|
name: "",
|
type: "pie",
|
radius: [60, 80],
|
center: ["50%", "40%"],
|
// roseType: "area",
|
itemStyle: {
|
borderRadius: 10
|
},
|
label: {
|
show: false
|
},
|
data: [
|
{ value: 22, name: "a" },
|
{ value: 22, name: "b" },
|
{ value: 33, name: "c" },
|
{ value: 35, name: "d" }
|
]
|
}
|
]
|
}
|
}
|
},
|
mounted() {
|
this.timer()
|
setTimeout(() => {
|
this.loading = false
|
}, 6000)
|
|
this.$nextTick(() => {
|
this.initLineChart()
|
this.initPieChart()
|
this.initBarChart()
|
})
|
|
this.searchHandler()
|
this.getCameras()
|
},
|
methods: {
|
timer() {
|
let now = new Date()
|
let year = now.getFullYear()
|
let month = now.getMonth() + 1
|
let date = now.getDate()
|
var hour = now.getHours()
|
let min = now.getMinutes()
|
|
this.timeStr = hour + ":" + min + " " + year + "-" + month + "-" + date
|
setTimeout(() => {
|
this.timer()
|
}, 1000 * 3)
|
},
|
|
initLineChart() {
|
let chartDom = document.getElementById("lineChart")
|
this.lineChart = echarts.init(chartDom)
|
this.lineChart.setOption(this.lineChartOption)
|
this.lineChart.resize()
|
},
|
|
initPieChart() {
|
let chartDom = document.getElementById("pieChart")
|
this.pieChart = echarts.init(chartDom)
|
this.pieChart.setOption(this.pieChartOption)
|
this.pieChart.resize()
|
},
|
|
initBarChart() {
|
let chartDom = document.getElementById("barChart")
|
this.barChart = echarts.init(chartDom)
|
this.barChart.setOption(this.barChartOption)
|
this.barChart.resize()
|
},
|
|
async getCameras() {
|
let clusterId = ""
|
let clusterReq = await getClusterDevList()
|
if (clusterReq && clusterReq.success) {
|
if (clusterReq.data.clusterList.length > 0) {
|
clusterId = clusterReq.data.clusterList[0].cluster_id
|
}
|
}
|
|
let camereReq = await getLocalCameraTree({ clusterId: clusterId })
|
if (camereReq && camereReq.success) {
|
this.cameraTree = camereReq.data.treeMenu
|
let tmpTree = JSON.parse(JSON.stringify(camereReq.data.treeMenu))
|
this.cameraTotal = 0
|
this.orgs = {}
|
this.cameras = {}
|
for (let i = 0; i < tmpTree.length; i++) {
|
this.countNodes(tmpTree[i], null)
|
}
|
|
// 根据部门数据统计报警数量
|
await this.orgsWarnCount()
|
|
this.loading = false
|
// 统计7日排查量
|
this.checkWarnCount()
|
}
|
},
|
// 统计监测点总量
|
countNodes(tree, parent) {
|
if (tree.children && tree.children.length > 0) {
|
for (let i = 0; i < tree.children.length; i++) this.countNodes(tree.children[i], tree)
|
} else {
|
if (tree.type == "4") {
|
this.cameraTotal += 1
|
// 记录摄像机父id信息,并且统计同级摄像机ID,按部门查询
|
if (!(parent.id in this.orgs)) {
|
this.orgs[parent.id] = {
|
name: parent.name,
|
cameras: [tree.id],
|
totalWarn: 0
|
}
|
} else {
|
this.orgs[parent.id].cameras.push(tree.id)
|
}
|
|
// 记录摄像机父ID
|
this.cameras[tree.id] = parent.id
|
}
|
}
|
},
|
// 检索数据
|
searchHandler() {
|
let query = {
|
// treeNodes: this.collSelectedNodes(),
|
searchTime: this.format(this.searchTime)
|
// alarmLevel: this.alarmValues
|
}
|
|
analysisReport(query).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.decodeWarningRate(rsp.data.warningRate)
|
this.decodeWarningChartRate(rsp.data.warningChartRate)
|
this.decodeWarningStatics(rsp.data.warningTable)
|
// this.decodeWarningTable(rsp.data.warningStatics)
|
}
|
})
|
},
|
decodeWarningTable(b64data) {
|
this.solvedTotal = 0
|
this.tableDataList = []
|
if (b64data) {
|
let decodeString = Base64.decode(b64data)
|
if (decodeString != "") {
|
let decodeResult = JSON.parse(decodeString)
|
decodeResult = []
|
if (decodeResult) {
|
decodeResult.forEach((element) => {
|
this.solvedTotal = this.solvedTotal + element.doc_count
|
this.tableDataList.push({ date: element.key_as_string, count: element.doc_count })
|
})
|
}
|
}
|
}
|
},
|
// 折线图
|
decodeWarningStatics(b64data) {
|
this.lineChart.clear()
|
this.lineChartOption.xAxis.data = []
|
this.lineChartOption.series[0].data = []
|
if (b64data) {
|
let decodeString = Base64.decode(b64data)
|
if (decodeString != "") {
|
let decodeResult = JSON.parse(decodeString)
|
if (decodeResult) {
|
decodeResult.forEach((element) => {
|
this.lineChartOption.xAxis.data.push(element.key_as_string)
|
this.lineChartOption.series[0].data.push(element.doc_count)
|
})
|
}
|
}
|
}
|
|
this.lineChart.setOption(this.lineChartOption)
|
},
|
// 饼图
|
decodeWarningChartRate(b64data) {
|
this.pieChart.clear()
|
this.pieChartOption.series[0].data = []
|
if (b64data) {
|
let decodeString = Base64.decode(b64data)
|
if (decodeString != "") {
|
let decodeResult = JSON.parse(decodeString)
|
if (decodeResult) {
|
decodeResult.forEach((element) => {
|
this.pieChartOption.series[0].data.push({ value: element.doc_count, name: element.key })
|
})
|
}
|
}
|
}
|
this.pieChart.setOption(this.pieChartOption)
|
},
|
// "warningRate": {"buckets":[{"doc_count":4,"key":3},{"doc_count":3,"key":2},{"doc_count":1,"key":1}],"total":3257}
|
//key 1=误报数据,2=已整改,3=未整改,4=已排查 doc_count=数量 total=总量
|
decodeWarningRate(b64data) {
|
if (b64data) {
|
let warningTotal = 0
|
let warningFalse = 0
|
let warningSolved = 0
|
let warningNoCheck = 0
|
let warningChecked = 0
|
|
let decodeString = Base64.decode(b64data)
|
if (decodeString != "") {
|
let decodeResult = JSON.parse(decodeString)
|
if (decodeResult && decodeResult.total > 0) {
|
warningTotal = decodeResult.total
|
decodeResult.buckets.forEach((element) => {
|
switch (element.key) {
|
case 1:
|
warningFalse += element.doc_count
|
break
|
case 2:
|
warningSolved += element.doc_count
|
break
|
case 3:
|
warningNoCheck += element.doc_count
|
break
|
case 4:
|
warningChecked += element.doc_count
|
break
|
default:
|
break
|
}
|
})
|
}
|
// console.log("WarningRate:", decodeResult)
|
// 处理率
|
this.manageRate = parseInt(((warningChecked + warningFalse) / warningTotal) * 100)
|
// 排查率
|
this.checkRate = parseInt((warningChecked / warningTotal) * 100)
|
// 整改率
|
this.solveRate = parseInt(((warningFalse + warningSolved) / warningTotal) * 100)
|
}
|
}
|
},
|
async orgsWarnCount() {
|
let orgArry = []
|
this.warnTotal = 0
|
for (let key in this.orgs) {
|
if (!this.searchTime) {
|
this.searchTime = []
|
}
|
this.VideoPhotoData.page = 0
|
this.VideoPhotoData.size = 0
|
// 时间范围
|
this.VideoPhotoData.searchTime = this.format(this.searchTime)
|
// 排查登记
|
this.VideoPhotoData.warningFlag = 0
|
this.VideoPhotoData.treeNodes = this.orgs[key].cameras
|
// this.VideoPhotoData.showType = this.showType
|
await this.VideoPhotoData.querySearchList()
|
this.orgs[key].totalWarn = this.VideoPhotoData.total
|
this.warnTotal += this.VideoPhotoData.total
|
orgArry.push(this.orgs[key])
|
}
|
|
orgArry = orgArry.sort((a, b) => {
|
return b.totalWarn - a.totalWarn
|
})
|
this.top10 = orgArry.slice(0, 10)
|
},
|
// 统计7日排查量
|
async checkWarnCount() {
|
this.barChart.clear()
|
this.barChartOption.xAxis.data = []
|
this.barChartOption.series[0].data = []
|
for (let i = 6; i >= 0; i--) {
|
this.VideoPhotoData.page = 0
|
this.VideoPhotoData.size = 0
|
// 时间范围
|
this.VideoPhotoData.searchTime = [
|
this.$moment()
|
.subtract(i, "days")
|
.format("YYYY-MM-DD 00:00:00"),
|
this.$moment()
|
.subtract(i, "days")
|
.format("YYYY-MM-DD 23:59:59")
|
]
|
// 排查登记
|
this.VideoPhotoData.warningFlag = 4
|
this.VideoPhotoData.treeNodes = []
|
// this.VideoPhotoData.showType = this.showType
|
await this.VideoPhotoData.querySearchList()
|
this.barChartOption.xAxis.data.push(
|
this.$moment()
|
.subtract(i, "days")
|
.format("MM-DD")
|
)
|
this.barChartOption.series[0].data.push(this.VideoPhotoData.total)
|
this.barChart.setOption(this.barChartOption)
|
}
|
},
|
format(array) {
|
if (!array || array.length === 0) {
|
return []
|
}
|
return [
|
this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
|
]
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
@font-face {
|
font-family: yjsz;
|
src: url("./fonts/yjsz.TTF"); /* IE9+,可以是具体的实际链接 */
|
}
|
|
ul {
|
padding: 0;
|
margin: 0;
|
}
|
a {
|
text-decoration: none !important;
|
}
|
.clear {
|
clear: both;
|
}
|
|
.title {
|
margin-top: 27px;
|
margin-left: 20px;
|
font-size: 15px;
|
font-weight: 700;
|
color: #e3f0fd;
|
}
|
|
.time {
|
position: absolute;
|
color: #cbe3e2;
|
font-size: 26px;
|
font-weight: 600;
|
opacity: 0.5;
|
top: -25px;
|
left: 2%;
|
font-style: normal;
|
font-family: "yjsz";
|
/* font-stretch: expanded; */
|
letter-spacing: 5px;
|
}
|
.data-view {
|
width: 100%;
|
height: 100%;
|
/* padding: 15px; */
|
background: #0c194d;
|
/* background: url(/images/data-v/bg.jpg); */
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-size: cover;
|
overflow: hidden;
|
position: absolute;
|
color: #e3f0fd;
|
z-index: 0;
|
}
|
|
/* 加载旋转动画 */
|
#load {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: url(/images/data-v/data08.png) no-repeat #061537;
|
background-size: cover;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
opacity: 0.95;
|
}
|
|
#load .load_img {
|
position: absolute;
|
left: calc(50% - 182px);
|
top: calc(50% - 182px);
|
}
|
|
.load_img img {
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
|
.load_img .jzxz1 {
|
animation: xz1 8s infinite linear;
|
}
|
|
@keyframes xz1 {
|
from {
|
transform: rotate(0deg);
|
}
|
50% {
|
transform: rotate(180deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
.load_img .jzxz2 {
|
animation: xz2 7s infinite linear;
|
}
|
|
@keyframes xz2 {
|
from {
|
transform: rotate(0deg);
|
}
|
50% {
|
transform: rotate(-180deg);
|
}
|
to {
|
transform: rotate(-360deg);
|
}
|
}
|
|
.head_top {
|
position: relative;
|
background: url(/images/data-v/head.png) no-repeat center center;
|
height: 120px;
|
line-height: 120px;
|
font-style: italic;
|
}
|
|
.head_top span {
|
text-align: center;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 55px;
|
font-weight: 700;
|
background: linear-gradient(0deg, #e3f0fd, #e3f0fd);
|
background-size: cover;
|
-webkit-background-clip: text;
|
background-clip: text;
|
-webkit-text-fill-color: transparent;
|
/* text-fill-color: transparent; font-weight: bolder; cursor: text; */
|
}
|
.head_top img {
|
width: 90%;
|
margin: auto;
|
}
|
.head_top p {
|
width: 100%;
|
text-align: center;
|
color: #55bfff;
|
position: absolute;
|
bottom: -18px;
|
left: -10px;
|
}
|
.head_top p span {
|
font-family: "yjsz";
|
font-size: 20px;
|
}
|
|
.left-top10 {
|
background: url(/images/data-v/top10.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
height: 53%;
|
width: 20%;
|
position: absolute;
|
top: 12%;
|
left: 2%;
|
font-family: yjsz;
|
}
|
|
.center {
|
/* background: #edeef1; */
|
width: 46%;
|
height: 52%;
|
position: absolute;
|
left: 23%;
|
top: 11%;
|
}
|
|
.center .center-left {
|
background: url(/images/data-v/center.png) no-repeat center center;
|
width: 75%;
|
height: 100%;
|
text-align: center;
|
}
|
|
.center .center-count {
|
position: relative;
|
top: 60%;
|
color: #e3f0fd;
|
}
|
|
.center .center-right {
|
position: absolute;
|
top: 0;
|
left: 73%;
|
width: 25%;
|
height: 100%;
|
text-align: center;
|
}
|
|
.center .center-right span {
|
color: #e3f0fd;
|
}
|
|
.center .center-right .chart {
|
height: 28%;
|
margin-top: 10px;
|
/* background: #e3f0fd; */
|
}
|
.center .center-right .chart >>> svg path:first-child {
|
stroke: #101d50;
|
}
|
|
.right-week {
|
background: url(/images/data-v/week.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
height: 33%;
|
width: 28%;
|
position: absolute;
|
top: 8%;
|
right: 2%;
|
}
|
|
.right-device {
|
background: url(/images/data-v/data-m.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
height: 23%;
|
width: 28%;
|
position: absolute;
|
top: 43%;
|
right: 2%;
|
}
|
|
.right-type {
|
background: url(/images/data-v/type.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
height: 30%;
|
width: 28%;
|
position: absolute;
|
bottom: 2%;
|
right: 2%;
|
}
|
|
.bottom-line {
|
background: url(/images/data-v/lineup.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
height: 31%;
|
width: 66%;
|
/* height: 309px;
|
width: 1268px; */
|
position: absolute;
|
bottom: 2%;
|
left: 2%;
|
}
|
|
.device-count {
|
width: 50%;
|
margin-top: 35px;
|
margin-left: 68px;
|
}
|
.device-total {
|
position: absolute;
|
top: 43%;
|
left: 36%;
|
font-size: 26px;
|
color: rgb(217, 214, 214);
|
text-align: center;
|
}
|
.device-online {
|
position: absolute;
|
width: 30%;
|
top: 22%;
|
right: 4%;
|
color: rgb(217, 214, 214);
|
}
|
|
.device-online img,
|
.device-offline img {
|
float: left;
|
margin-right: 10px;
|
}
|
|
.device-offline {
|
position: absolute;
|
width: 30%;
|
top: 57%;
|
right: 4%;
|
color: rgb(217, 214, 214);
|
}
|
|
.top10-list {
|
width: 100%;
|
height: 9%;
|
/* background: #e3f0fd; */
|
/* border-bottom: solid 1px; */
|
position: relative;
|
line-height: 60px;
|
color: #e3f0fd;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
|
.top10-list .list-0 {
|
position: absolute;
|
top: 0;
|
left: 5%;
|
}
|
.top10-list .list-1 {
|
position: absolute;
|
top: 0;
|
margin: 0px 70px;
|
}
|
.top10-list .list-2 {
|
position: absolute;
|
top: 0;
|
left: 80%;
|
}
|
.top10-list .list-img {
|
position: absolute;
|
bottom: -18%;
|
left: 18%;
|
width: 250px;
|
}
|
|
::v-deep .el-progress__text {
|
font-size: 30px !important;
|
/* font-weight: 600; */
|
color: #e3f0fd;
|
}
|
</style>
|
