almost done
This commit is contained in:
lb
bovenliggende
270fd2d071
commit
bd0f7986a9
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Laden…
Verwijs in nieuw issue
Block a user