update fanruntime
This commit is contained in:
lb
parent
18c08ca42d
commit
01aa8be033
@ -1,49 +1,63 @@
|
||||
<template>
|
||||
<!-- 风机运行情况 -->
|
||||
<Container usage="Table">
|
||||
<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="
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eee1;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
color: #3C4E8B;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
user-select: none;
|
||||
">无数据</div>
|
||||
<table class="table-1">
|
||||
<thead>
|
||||
<tr class="t-row">
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>运行频率</th>
|
||||
<th>设备状态</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()">
|
||||
<td v-for="(d, idx) in row" :key="idx">
|
||||
<template v-if="idx === 2">
|
||||
<FrequentComp :value="d" />
|
||||
</template>
|
||||
<template v-else-if="idx === 3">
|
||||
<StatusComp :value="d" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ d }}
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
<!-- </tbody> -->
|
||||
</table>
|
||||
</div>
|
||||
<!--
|
||||
<!-- 风机运行情况 -->
|
||||
<Container usage="Table">
|
||||
<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="
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eee1;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
color: #3c4e8b;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
user-select: none;
|
||||
"
|
||||
>
|
||||
无数据
|
||||
</div>
|
||||
<table class="table-1">
|
||||
<thead>
|
||||
<tr class="t-row">
|
||||
<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()"
|
||||
>
|
||||
<td v-for="(d, idx) in row" :key="idx">
|
||||
<template v-if="idx === 2">
|
||||
<FrequentComp :value="d" />
|
||||
</template>
|
||||
<template v-else-if="idx === 3">
|
||||
<StatusComp :value="d" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- <el-tooltip effect="light" :content="d" placement="top"> -->
|
||||
<span>{{ d }}</span>
|
||||
<!-- </el-tooltip> -->
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
<!-- </tbody> -->
|
||||
</table>
|
||||
</div>
|
||||
<!--
|
||||
<div class="vertical-line"></div>
|
||||
<table class="table-2 flex-1 align-start">
|
||||
<thead>
|
||||
@ -70,9 +84,9 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table> -->
|
||||
</div>
|
||||
</SubContainer>
|
||||
</Container>
|
||||
</div>
|
||||
</SubContainer>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -83,61 +97,61 @@ import StatusComp from "./subcomponents/TableStatus.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "KilnPressure",
|
||||
props: {},
|
||||
components: { Container, SubContainer, FrequentComp, StatusComp },
|
||||
data() {
|
||||
return {
|
||||
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
|
||||
tableCache: [
|
||||
// [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*/],
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...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,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(() => {
|
||||
const inData = this.tableCache.shift();
|
||||
const outData = this.tableData1.shift();
|
||||
setTimeout(() => {
|
||||
if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||
}, 200);
|
||||
if (outData) this.tableCache.push(outData);
|
||||
}, 3000);
|
||||
},
|
||||
name: "KilnPressure",
|
||||
props: {},
|
||||
components: { Container, SubContainer, FrequentComp, StatusComp },
|
||||
data() {
|
||||
return {
|
||||
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
|
||||
tableCache: [
|
||||
[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*/],
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...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,
|
||||
// },
|
||||
},
|
||||
mounted() {
|
||||
setInterval(() => {
|
||||
const inData = this.tableCache.shift();
|
||||
const outData = this.tableData1.shift();
|
||||
setTimeout(() => {
|
||||
if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||
}, 200);
|
||||
if (outData) this.tableCache.push(outData);
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -145,19 +159,19 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #eee1;
|
||||
width: 6px;
|
||||
background: #eee1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
border-radius: 8px;
|
||||
background: #eee3;
|
||||
width: 6px;
|
||||
border-radius: 8px;
|
||||
background: #eee3;
|
||||
}
|
||||
|
||||
.fan-list-enter-active,
|
||||
.fan-list-leave-active {
|
||||
transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
// .fan-list-leave-move {
|
||||
@ -166,23 +180,23 @@ export default {
|
||||
|
||||
.fan-list-enter,
|
||||
.fan-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
// background: #f001;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
// background: #f001;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: adjust(1px);
|
||||
width: 100%;
|
||||
border-spacing: adjust(1px);
|
||||
}
|
||||
|
||||
// .table-1 {
|
||||
@ -194,52 +208,58 @@ table {
|
||||
// }
|
||||
|
||||
.t-row {
|
||||
height: adjust(14px);
|
||||
height: adjust(14px);
|
||||
}
|
||||
|
||||
.tables {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tables>table {
|
||||
overflow-y: auto;
|
||||
.tables > table {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
thead>tr th:first-child {
|
||||
text-align: center;
|
||||
thead > tr th:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 1px;
|
||||
padding: adjust(3px) adjust(8px);
|
||||
font-weight: 600;
|
||||
background: #4288df23;
|
||||
color: #030609d6;
|
||||
text-align: left;
|
||||
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;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 1px;
|
||||
padding: adjust(3px) adjust(8px);
|
||||
font-weight: 600;
|
||||
background: #4288df23;
|
||||
color: #030609d6;
|
||||
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;
|
||||
color: #030609d6;
|
||||
font-size: adjust(8px);
|
||||
line-height: 1.2;
|
||||
padding: adjust(2px) adjust(8px);
|
||||
font-weight: 400;
|
||||
background: inherit;
|
||||
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 {
|
||||
text-align: center;
|
||||
tbody > tr td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user