update fan runtime
This commit is contained in:
parent
ba68b34879
commit
2c0e0f8fd6
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="table-frequence" :class="cls">{{ value }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TableFrequence",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '未运行'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cls: {
|
||||
'valid': this.value !== '未运行'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-frequence {
|
||||
font-family: Ubuntu, sans-serif !important;
|
||||
}
|
||||
|
||||
.valid {
|
||||
color: #30e89a;
|
||||
}
|
||||
</style>
|
||||
53
src/components/yx-dark/containers/components/TableStatus.vue
Normal file
53
src/components/yx-dark/containers/components/TableStatus.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="table-status" :class="cls">{{ value }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TableFrequence",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "正常",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cls: {
|
||||
invalid: this.value !== "正常",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-status {
|
||||
/* font-family: Ubuntu, sans-serif !important; */
|
||||
color: #3984ff;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-status::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 200px;
|
||||
background: #3984ff;
|
||||
box-shadow: 0px 0px 4px 4px rgba(39, 96, 255, 0.5);
|
||||
}
|
||||
|
||||
.invalid {
|
||||
color: #ff0c0c;
|
||||
}
|
||||
|
||||
.invalid::after {
|
||||
background: #ff0c0c;
|
||||
box-shadow: 0px 0px 4px 4px rgba(255, 39, 39, 0.5);
|
||||
}
|
||||
</style>
|
||||
@ -6,19 +6,127 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-tables"></div>
|
||||
<div class="yx-dark-tables">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<div class="table-wrapper flex-1 align-start">
|
||||
<div
|
||||
v-if="tableData1 && tableData1.length === 0"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eee1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
color: #eee9;
|
||||
"
|
||||
>
|
||||
无数据
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FrequentComp from "./components/TableFrequence.vue";
|
||||
import StatusComp from "./components/TableStatus.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "YxDarkTables",
|
||||
components: {},
|
||||
props: {},
|
||||
|
||||
components: { FrequentComp, StatusComp },
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
|
||||
tableCache: [
|
||||
[16, "风机16", "未运行", "正常" /**or 0,1*/],
|
||||
[17, "风机17", "未运行", "正常" /**or 0,1*/],
|
||||
[17, "风机18", "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*/],
|
||||
[11, "风机11", "未运行", "正常" /**or 0,1*/],
|
||||
[12, "风机12", "未运行", "正常" /**or 0,1*/],
|
||||
[13, "风机13", "73Hz", "正常" /**or 0,1*/],
|
||||
[14, "风机14", "未运行", "正常" /**or 0,1*/],
|
||||
[15, "风机15", "未运行", "正常" /**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);
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -27,4 +135,103 @@ export default {
|
||||
height: 100%;
|
||||
background: #fff3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #eee1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
border-radius: 8px;
|
||||
background: #eee3;
|
||||
}
|
||||
|
||||
.fan-list-enter-active,
|
||||
.fan-list-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
// .fan-list-leave-move {
|
||||
// transition: all 1s;
|
||||
// }
|
||||
|
||||
.fan-list-enter,
|
||||
.fan-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 6px;
|
||||
width: 6px;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
#52cbef80,
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.table-wrapper {
|
||||
// padding-right: 6px;
|
||||
// height: 480px;
|
||||
height: 100%;
|
||||
// overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 2px;
|
||||
}
|
||||
|
||||
// tr, td, th {
|
||||
// max-height: 13.88px !important;
|
||||
// }
|
||||
|
||||
.t-row {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.tables > table {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
thead > tr th:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
thead > tr th {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
padding: 6px 16px;
|
||||
font-weight: 400;
|
||||
background: #044a8446;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(odd) {
|
||||
background: #0b549960;
|
||||
}
|
||||
|
||||
tbody > tr td {
|
||||
font-size: 20px;
|
||||
line-height: 1.25;
|
||||
padding: 4px 16px;
|
||||
font-weight: 400;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
tbody > tr td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -80,6 +80,10 @@ export default {
|
||||
<style lang="scss">
|
||||
@import "../assets/styles/functions";
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.home-view {
|
||||
height: 1080px;
|
||||
width: 8640px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user