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

update 完成风机运行情况

Browse Source
This commit is contained in:
lb 2023-05-10 10:02:02 +08:00
parent 57f5d8efeb
commit 1b170b07bf
3 changed files with 134 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<Container usage="Table">
<SubContainer title="风机运行情况" icon="docs" padding="17px">
<div class="tables flex" style="height: 100%">
<table class="table-1 flex-1">
<table class="table-1 flex-1 align-start">
<thead>
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
<tr>
@ -19,14 +19,24 @@
:key="index"
style="font-size: 7px; background: #0b5499; opacity: 35%"
> -->
<tr v-for="(row, index) in tableData1" :key="index">
<td v-for="(d, idx) in row" :key="idx">{{ d }}</td>
<tr class="t-row" v-for="(row, index) in tableData1" :key="index">
<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>
</tbody>
</table>
<div class="vertical-line"></div>
<table class="table-2 flex-1">
<table class="table-2 flex-1 align-start">
<thead>
<tr>
<th>序号</th>
@ -36,8 +46,18 @@
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData1" :key="index">
<td v-for="(d, idx) in row" :key="idx">{{ d }}</td>
<tr class="t-row" v-for="(row, index) in tableData1" :key="index">
<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>
</tbody>
</table>
@ -49,11 +69,13 @@
<script>
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import FrequentComp from "./subcomponents/TableFrequence.vue";
import StatusComp from "./subcomponents/TableStatus.vue";
export default {
name: "KilnPressure",
props: {},
components: { Container, SubContainer },
components: { Container, SubContainer, FrequentComp, StatusComp },
data() {
return {
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
@ -64,19 +86,19 @@ export default {
// sequence: '稳运行',
// status: '正常', // or 0
// }
[1, "风机1", "未运行", "正常" /**or 0,1*/],
[2, "风机2", "未运行", "正常" /**or 0,1*/],
[3, "风机3", "未运行", "正常" /**or 0,1*/],
[4, "风机4", "未运行", "正常" /**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", "未运行", "正常" /**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", "未运行", "正常" /**or 0,1*/],
[10, "风机10", "86423Hz", "正常" /**or 0,1*/],
[11, "风机11", "未运行", "正常" /**or 0,1*/],
[12, "风机12", "未运行", "正常" /**or 0,1*/],
[13, "风机13", "未运行", "正常" /**or 0,1*/],
[13, "风机13", "73Hz", "正常" /**or 0,1*/],
],
};
},
@ -107,6 +129,18 @@ table {
border-spacing: 1px;
}
// tr, td, th {
// max-height: 13.88px !important;
// }
.t-row {
height: 13.88px;
}
.align-start {
align-self: flex-start;
}
thead > tr th {
font-size: 8px;
padding: 1px 3px;
@ -128,20 +162,4 @@ tbody > tr td {
tbody > tr td:first-child {
text-align: center;
}
tbody > tr td:last-child {
color: blue;
}
tbody > tr td:last-child.danger {
color: red;
}
tbody > tr td:last-child.safe {
color: green;
}
tbody > tr td:last-child.warn {
color: orange;
}
tbody > tr td:last-child.info {
color: gray;
}
</style>

32
src/components/boxes/subcomponents/TableFrequence.vue Normal file
View File

@ -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/boxes/subcomponents/TableStatus.vue Normal file
View 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>
.table-status {
/* font-family: Ubuntu, sans-serif !important; */
color: #3984ff;
padding-left: 10px;
position: relative;
}
.table-status::after {
content: "";
position: absolute;
left: 1px;
top: 2px;
display: inline-block;
width: 4px;
height: 4px;
border-radius: 100px;
background: #3984ff;
box-shadow: 0px 0px 2px 2px rgba(39, 96, 255, 0.5);
}
.invalid {
color: #ff0c0c;
}
.invalid::after {
background: #ff0c0c;
box-shadow: 0px 0px 2px 2px rgba(255, 39, 39, 0.5);
}
</style>