mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

almost done

Browse Source
This commit is contained in:
lb 2023-06-08 14:29:51 +08:00
parent 270fd2d071
commit bd0f7986a9
6 changed files with 81 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/boxes/FanRuntime.vue
View File

@ -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,6 +198,10 @@ table {
height: adjust(14px); height: adjust(14px);
} }
.tables {
overflow: hidden;
}
.tables>table { .tables>table {
overflow-y: auto; overflow-y: auto;
} }
@ -232,21 +215,24 @@ thead > tr th:first-child {
} }
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;

40
src/components/charts/LineChart.vue
View File

@ -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%;

8
src/components/groups/data.vue
View File

@ -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));
} }

3
src/components/groups/monitor2.vue
View File

@ -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));

3
src/components/layout/Container.vue
View File

@ -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;

44
src/components/layout/Main.vue
View File

@ -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);
} }
} }