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