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