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