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

update fanruntime

Browse Source
This commit is contained in:
lb 2023-07-07 16:56:11 +08:00
parent 18c08ca42d
commit 01aa8be033
1 changed files with 165 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,29 +4,41 @@
<SubContainer title="风机运行情况" icon="fan" padding="24px 32px">
<div class="tables flex relative" 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;
width: 100%;
height: 100%;
background: #eee1;
font-size: 18px;
letter-spacing: 2px;
color: #3C4E8B;
color: #3c4e8b;
display: grid;
place-items: center;
user-select: none;
">无数据</div>
"
>
无数据
</div>
<table class="table-1">
<thead>
<tr class="t-row">
<th>序号</th>
<th>设备名称</th>
<th>运行频率</th>
<th>设备状态</th>
<th style="width: 90px">序号</th>
<!-- <th style="width: 180px">设备名称</th>
<th style="width: 180px">运行频率</th>
<th style="width: 180px">设备状态</th> -->
<th style="width: 220px">设备名称</th>
<th style="width: 160px">运行频率</th>
<th style="width: 160px">设备状态</th>
</tr>
</thead>
<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" />
@ -35,7 +47,9 @@
<StatusComp :value="d" />
</template>
<template v-else>
{{ d }}
<!-- <el-tooltip effect="light" :content="d" placement="top"> -->
<span>{{ d }}</span>
<!-- </el-tooltip> -->
</template>
</td>
</tr>
@ -90,43 +104,43 @@ export default {
return {
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
tableCache: [
// [11, "风机11", "未运行", "正常" /**or 0,1*/],
// [12, "风机12", "未运行", "正常" /**or 0,1*/],
// [13, "风机13", "73Hz", "正常" /**or 0,1*/],
[11, "风机11", "未运行", "正常" /**or 0,1*/],
[12, "风机12", "未运行", "正常" /**or 0,1*/],
[13, "风机13", "73Hz", "正常" /**or 0,1*/],
],
tableData1: [
// [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
// [2, "风机2", "未运行", "故障" /**or 0,1*/],
// [3, "风机3", "333Hz", "正常" /**or 0,1*/],
// [4, "风机4", "100Hz", "正常" /**or 0,1*/],
// [5, "风机5", "未运行", "正常" /**or 0,1*/],
// [6, "风机6", "未运行", "故障" /**or 0,1*/],
// [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
// [8, "风机8", "未运行", "正常" /**or 0,1*/],
// [9, "风机9", "未运行", "正常" /**or 0,1*/],
// [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
[1, "风机1", "2332Hz", "正常" /**or 0,1*/],
[2, "2#风机水电费款经典款", "未运行", "故障" /**or 0,1*/],
[3, "风机3", "333Hz", "正常" /**or 0,1*/],
[4, "风机4", "100Hz", "正常" /**or 0,1*/],
[5, "风机5", "未运行", "正常" /**or 0,1*/],
[6, "风机6", "未运行", "故障" /**or 0,1*/],
[7, "风机7", "3000Hz", "正常" /**or 0,1*/],
[8, "风机8", "未运行", "正常" /**or 0,1*/],
[9, "风机9", "未运行", "正常" /**or 0,1*/],
[10, "风机10", "86423Hz", "正常" /**or 0,1*/],
],
};
},
computed: {
...mapState(["fan"]),
// ...mapState(["fan"]),
},
watch: {
fan: {
handler: function (data) {
if (!data) return;
let idx = 0;
this.tableData1 = data.slice(0, 10).map((item, index) => {
idx += 1;
return [idx, ...item];
});
this.tableCache = data
.slice(10)
.map((item, index) => [index + 1 + idx, ...item]);
},
deep: true,
immediate: true,
},
// fan: {
// handler: function (data) {
// if (!data) return;
// let idx = 0;
// this.tableData1 = data.slice(0, 10).map((item, index) => {
// idx += 1;
// return [idx, ...item];
// });
// this.tableCache = data
// .slice(10)
// .map((item, index) => [index + 1 + idx, ...item]);
// },
// deep: true,
// immediate: true,
// },
},
mounted() {
setInterval(() => {
@ -201,7 +215,7 @@ table {
overflow: hidden;
}
.tables>table {
.tables > table {
overflow-y: auto;
}
@ -209,13 +223,15 @@ table {
align-self: flex-start;
}
thead>tr th:first-child {
thead > tr th:first-child {
text-align: center;
}
thead>tr th {
thead > tr th {
font-size: adjust(8px);
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
"微软雅黑", Arial, Helvetica, sans-serif;
line-height: 1.25;
letter-spacing: 1px;
padding: adjust(3px) adjust(8px);
@ -225,21 +241,25 @@ thead>tr th {
text-align: left;
}
tbody>tr:nth-child(even) {
tbody > tr:nth-child(even) {
background: #4288df13;
}
tbody>tr td {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
tbody > tr td {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
"微软雅黑", Arial, Helvetica, sans-serif;
color: #030609d6;
font-size: adjust(8px);
height: adjust(8px * 1.2);
line-height: 1.2;
padding: adjust(2px) adjust(8px);
font-weight: 400;
overflow: hidden;
background: inherit;
}
tbody>tr td:first-child {
tbody > tr td:first-child {
text-align: center;
}
</style>