@@ -4,9 +4,7 @@ | |||
<SubContainer title="风机运行情况" icon="fan" padding="24px 32px"> | |||
<div class="tables flex" style="height: 100%"> | |||
<div class="table-wrapper flex-1 align-start"> | |||
<div | |||
v-if="tableData1 && tableData1.length === 0" | |||
style=" | |||
<div v-if="tableData1 && tableData1.length === 0" style=" | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
@@ -15,13 +13,12 @@ | |||
background: #eee1; | |||
display: grid; | |||
place-items: center; | |||
font-size: 24px; | |||
color: #eee9; | |||
" | |||
>无数据</div> | |||
font-size: 18px; | |||
letter-spacing: 2px; | |||
color: #eee; | |||
">无数据</div> | |||
<table class="table-1"> | |||
<thead> | |||
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> --> | |||
<tr class="t-row"> | |||
<th>序号</th> | |||
<th>设备名称</th> | |||
@@ -29,18 +26,8 @@ | |||
<th>设备状态</th> | |||
</tr> | |||
</thead> | |||
<!-- <tbody> --> | |||
<!-- <tr | |||
v-for="(row, index) in tableData1" | |||
:key="index" | |||
style="font-size: 7px; background: #0b5499; opacity: 35%" | |||
> --> | |||
<transition-group name="fan-list" tag="tbody" mode="out-in"> | |||
<tr | |||
class="t-row" | |||
v-for="row in tableData1" | |||
:key="row && 'length' in row ? row[0] : Math.random()" | |||
> | |||
<tr class="t-row" v-for="row in tableData1" :key="row && 'length' in row ? row[0] : Math.random()"> | |||
<td v-for="(d, idx) in row" :key="idx"> | |||
<template v-if="idx === 2"> | |||
<FrequentComp :value="d" /> | |||
@@ -188,22 +175,10 @@ export default { | |||
flex: 1; | |||
} | |||
.vertical-line { | |||
margin: 0 adjust(3px); | |||
width: adjust(3px); | |||
background: radial-gradient( | |||
ellipse at center, | |||
#6fe2ff, | |||
#52cbef80, | |||
transparent, | |||
transparent | |||
); | |||
} | |||
.table-wrapper { | |||
// padding-right: 6px; | |||
height: 400px; | |||
// overflow-y: auto; | |||
overflow: hidden; | |||
// background: #f001; | |||
} | |||
table { | |||
@@ -211,6 +186,10 @@ table { | |||
border-spacing: adjust(1px); | |||
} | |||
// .table-1 { | |||
// background: #00f3; | |||
// } | |||
// tr, td, th { | |||
// max-height: 13.88px !important; | |||
// } | |||
@@ -219,7 +198,11 @@ table { | |||
height: adjust(14px); | |||
} | |||
.tables > table { | |||
.tables { | |||
overflow: hidden; | |||
} | |||
.tables>table { | |||
overflow-y: auto; | |||
} | |||
@@ -227,32 +210,35 @@ table { | |||
align-self: flex-start; | |||
} | |||
thead > tr th:first-child { | |||
thead>tr th:first-child { | |||
text-align: center; | |||
} | |||
thead > tr th { | |||
font-size: adjust(10px); | |||
line-height: 1.5; | |||
thead>tr th { | |||
font-size: adjust(8px); | |||
line-height: 1.2; | |||
letter-spacing: 1px; | |||
padding: adjust(3px) adjust(8px); | |||
font-weight: 400; | |||
background: #044a8446; | |||
font-weight: 600; | |||
background: #4288df23; | |||
color: #000; | |||
text-align: left; | |||
} | |||
tbody > tr:nth-child(odd) { | |||
background: #0b549960; | |||
tbody>tr:nth-child(even) { | |||
background: #4288df13; | |||
} | |||
tbody > tr td { | |||
font-size: adjust(10px); | |||
line-height: 1.25; | |||
tbody>tr td { | |||
color: #000; | |||
font-size: adjust(8px); | |||
line-height: 1.2; | |||
padding: adjust(2px) adjust(8px); | |||
font-weight: 400; | |||
background: inherit; | |||
} | |||
tbody > tr td:first-child { | |||
tbody>tr td:first-child { | |||
text-align: center; | |||
} | |||
</style> |
@@ -19,8 +19,9 @@ | |||
height: 100%; | |||
display: grid; | |||
place-items: center; | |||
font-size: 24px; | |||
color: #eee8; | |||
font-size: 18px; | |||
letter-spacing: 2px; | |||
color: #eee; | |||
user-select: none; | |||
" | |||
> | |||
@@ -142,10 +143,10 @@ export default { | |||
this.chart = echarts.init(document.getElementById(this.id)); | |||
this.chart.setOption({ | |||
grid: { | |||
top: adjust(32), | |||
left: adjust(32), | |||
bottom: adjust(24), | |||
right: adjust(12), | |||
top: adjust(14), | |||
left: adjust(18), | |||
bottom: adjust(14), | |||
right: adjust(8), | |||
}, | |||
xAxis: { | |||
data: this.updateXAxis(), | |||
@@ -158,10 +159,10 @@ export default { | |||
show: false, | |||
}, | |||
axisLabel: { | |||
color: "#fff9", | |||
fontSize: adjust(8), | |||
lineHeight: adjust(1), | |||
margin: adjust(8), | |||
color: "#fffd", | |||
fontSize: adjust(6), | |||
lineHeight: adjust(0), | |||
margin: adjust(4), | |||
rotate: 30, | |||
}, | |||
}, | |||
@@ -169,9 +170,10 @@ export default { | |||
type: "value", | |||
name: this.unit, | |||
nameTextStyle: { | |||
color: "#fff9", | |||
fontSize: adjust(9), | |||
align: "", | |||
color: "#fffd", | |||
fontSize: adjust(6), | |||
lineHeight: 1, | |||
align: "center", | |||
}, | |||
axisLine: { | |||
show: true, | |||
@@ -185,8 +187,8 @@ export default { | |||
}, | |||
axisLabel: { | |||
color: "#fff9", | |||
fontSize: adjust(8), | |||
lineHeight: adjust(1), | |||
fontSize: adjust(6), | |||
lineHeight: adjust(0), | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
@@ -229,7 +231,7 @@ export default { | |||
name: lgd, | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: adjust(3), | |||
symbolSize: adjust(2), | |||
lineStyle: { | |||
width: adjust(1), | |||
}, | |||
@@ -282,8 +284,6 @@ ul { | |||
justify-content: flex-end; | |||
align-items: center; | |||
height: adjust(28px); | |||
// background: #eeec; | |||
// overflow-x: hidden; | |||
white-space: pre-wrap; | |||
padding-bottom: adjust(2px); | |||
} | |||
@@ -360,8 +360,8 @@ li:nth-child(11)::before { | |||
.line-chart__wrapper { | |||
position: relative; | |||
background: #7771; | |||
border-radius: adjust(3px); | |||
background: #3565ff10; | |||
border-radius: adjust(4px); | |||
backdrop-filter: blur(adjust(2px)); | |||
box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1); | |||
height: 100%; | |||
@@ -40,12 +40,14 @@ export default { | |||
@import "../../assets/styles/functions"; | |||
section { | |||
background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat, #fcc7; | |||
background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat; | |||
width: adjust(w(13700px)); | |||
height: adjust(h(830px)); | |||
// width: adjust(w(13500px)); | |||
height: adjust(h(960px)); | |||
// height: adjust(h(960px)); | |||
position: absolute; | |||
top: adjust(h(3265px)); | |||
top: adjust(h(3390px)); | |||
// top: adjust(h(3265px)); | |||
left: adjust(w(3700px)); | |||
} | |||
@@ -26,8 +26,9 @@ export default { | |||
section { | |||
background: url('../../assets/middle1.png') left 144px top 4px / 97% 420px no-repeat, #fcc7; | |||
width: adjust(w(13700px)); | |||
height: adjust(h(1600px)); | |||
// width: adjust(w(13500px)); | |||
height: adjust(h(1470px)); | |||
// height: adjust(h(1470px)); | |||
position: absolute; | |||
top: adjust(h(1740px)); | |||
left: adjust(w(3700px)); | |||
@@ -50,7 +50,8 @@ export default { | |||
.tables { | |||
display: inline-block; | |||
width: adjust(w(1115px)); | |||
// width: adjust(w(1115px)); | |||
width: adjust(w(1400px)); | |||
height: adjust(h(700px)); | |||
background: url(../../assets/box-table.png); | |||
background-position: 0 0; | |||
@@ -63,11 +63,12 @@ | |||
</div> | |||
</div> | |||
<!-- <div class="video-bottom" v-show="fireDirection === '北火'" style=""> | |||
<div class="video-bottom--wrapper" v-show="fireDirection === '北火'" style=""> | |||
<video | |||
class="video-bottom" | |||
id="1" | |||
preload="auto" | |||
height="260" | |||
height="130" | |||
muted | |||
autoplay | |||
loop | |||
@@ -76,19 +77,19 @@ | |||
></video> | |||
</div> | |||
<div class="video-top" v-show="fireDirection === '南火'" style=""> | |||
<div class="video-top--wrapper" v-show="fireDirection === '南火'" style=""> | |||
<video | |||
id="2" | |||
class="video-top" | |||
preload="auto" | |||
height="260" | |||
height="130" | |||
muted | |||
autoplay | |||
loop | |||
disablepictureinpicture | |||
src="../../assets/videos/fire-to-bottom.mp4" | |||
></video> | |||
</div> --> | |||
</div> | |||
</div> | |||
<AreaOne class="area-one" /> | |||
@@ -225,9 +226,9 @@ main { | |||
.video-bottom { | |||
position: absolute; | |||
bottom: adjust(200.5px); | |||
left: adjust(48px); | |||
transform: scale(0.9); | |||
bottom: adjust(207px); | |||
left: adjust(29px); | |||
transform: scale(0.95); | |||
} | |||
.video-top { | |||
@@ -345,12 +346,11 @@ main { | |||
.eq-main::before { | |||
content: ""; | |||
position: absolute; | |||
// right: adjust(1200px); | |||
opacity: 0; | |||
top: adjust(105px); | |||
width: adjust(150px); | |||
height: adjust(150px); | |||
// background: url(../../assets/mirror.png) no-repeat; | |||
top: adjust(55px); | |||
width: adjust(75px); | |||
height: adjust(75px); | |||
background: url(../../assets/mirror.png) no-repeat; | |||
background-size: 100% 100%; | |||
animation: 10s linear 0.3s infinite mirror-to-left-2; | |||
} | |||
@@ -358,20 +358,18 @@ main { | |||
.eq-main::after { | |||
content: ""; | |||
position: absolute; | |||
// right: adjust(1200px); | |||
opacity: 0; | |||
top: adjust(105px); | |||
// top: adjust(125px); | |||
width: adjust(150px); | |||
height: adjust(150px); | |||
// background: url(../../assets/mirror.png) no-repeat; | |||
top: adjust(55px); | |||
width: adjust(75px); | |||
height: adjust(75px); | |||
background: url(../../assets/mirror.png) no-repeat; | |||
background-size: 100% 100%; | |||
animation: 10s linear 5s infinite mirror-to-left; | |||
} | |||
@keyframes mirror-to-left { | |||
0% { | |||
right: adjust(1200px); | |||
right: adjust(700px); | |||
opacity: 1; | |||
} | |||
@@ -380,13 +378,13 @@ main { | |||
} | |||
100% { | |||
right: adjust(60px); | |||
right: adjust(30px); | |||
} | |||
} | |||
@keyframes mirror-to-left-2 { | |||
0% { | |||
right: adjust(1200px); | |||
right: adjust(700px); | |||
opacity: 1; | |||
} | |||
@@ -395,7 +393,7 @@ main { | |||
} | |||
100% { | |||
right: adjust(60px); | |||
right: adjust(30px); | |||
} | |||
} | |||