This commit is contained in:
g7hoo 2023-05-13 15:04:41 +08:00
parent d1ba6ffe61
commit 38cf9236cb
2 changed files with 207 additions and 177 deletions

View File

@ -1,40 +1,42 @@
<template> <template>
<!-- 风机运行情况 --> <!-- 风机运行情况 -->
<Container usage="Table"> <Container usage="Table">
<SubContainer title="风机运行情况" icon="docs" padding="34px"> <SubContainer title="风机运行情况" icon="docs" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<table class="table-1 flex-1 align-start"> <div class="table-wrapper flex-1 align-start">
<thead> <table class="table-1">
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> --> <thead>
<tr class="t-row"> <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
<th>序号</th> <tr class="t-row">
<th>设备名称</th> <th>序号</th>
<th>运行频率</th> <th>设备名称</th>
<th>设备状态</th> <th>运行频率</th>
</tr> <th>设备状态</th>
</thead> </tr>
<tbody> </thead>
<!-- <tr <tbody>
<!-- <tr
v-for="(row, index) in tableData1" v-for="(row, index) in tableData1"
:key="index" :key="index"
style="font-size: 7px; background: #0b5499; opacity: 35%" style="font-size: 7px; background: #0b5499; opacity: 35%"
> --> > -->
<tr class="t-row" v-for="(row, index) in tableData1" :key="index"> <tr class="t-row" v-for="(row, index) in tableData1" :key="index">
<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" />
</template> </template>
<template v-else-if="idx === 3"> <template v-else-if="idx === 3">
<StatusComp :value="d" /> <StatusComp :value="d" />
</template> </template>
<template v-else> <template v-else>
{{ d }} {{ d }}
</template> </template>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </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>
@ -60,10 +62,10 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table> -->
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
</template> </template>
<script> <script>
@ -73,60 +75,77 @@ import FrequentComp from "./subcomponents/TableFrequence.vue";
import StatusComp from "./subcomponents/TableStatus.vue"; import StatusComp from "./subcomponents/TableStatus.vue";
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: ["序号", "设备名称", "运行频率", "设备状态"],
tableData1: [ tableData1: [
// { // {
// id: 1, // id: 1,
// name: '1', // name: '1',
// sequence: '', // sequence: '',
// status: '', // or 0 // status: '', // or 0
// } // }
[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*/],
[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*/],
], ],
}; };
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
::-webkit-scrollbar {
width: 6px;
background: #eee1;
}
::-webkit-scrollbar-thumb {
width: 6px;
border-radius: 8px;
background: #eee3;
}
.flex-1 { .flex-1 {
flex: 1; flex: 1;
// background: #eee; // background: #eee;
} }
.vertical-line { .vertical-line {
margin: 0 adjust(3px); margin: 0 adjust(3px);
width: adjust(3px); width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,
#52cbef80, #52cbef80,
transparent, transparent,
transparent transparent
); );
}
.table-wrapper {
padding-right: 6px;
height: 400px;
overflow-y: auto;
} }
table { table {
border-spacing: adjust(1px); width: 100%;
border-spacing: adjust(1px);
} }
// tr, td, th { // tr, td, th {
@ -134,32 +153,43 @@ table {
// } // }
.t-row { .t-row {
height: adjust(13.88px); height: adjust(13.88px);
}
.tables > table {
overflow-y: auto;
} }
.align-start { .align-start {
align-self: flex-start; align-self: flex-start;
}
thead > tr th:first-child {
text-align: center;
} }
thead > tr th { thead > tr th {
font-size: adjust(8px); font-size: adjust(9px);
padding: adjust(1px) adjust(3px); line-height: 1.5;
font-weight: 400; padding: adjust(2px) adjust(8px);
background: #044a8446; font-weight: 400;
background: #044a8446;
text-align: left;
} }
tbody > tr:nth-child(odd) { tbody > tr:nth-child(odd) {
background: #0b549960; background: #0b549960;
} }
tbody > tr td { tbody > tr td {
font-size: adjust(7px); font-size: adjust(9px);
padding: adjust(1px) adjust(6px); line-height: 1.25;
font-weight: 400; padding: adjust(2px) adjust(8px);
background: inherit; font-weight: 400;
background: inherit;
} }
tbody > tr td:first-child { tbody > tr td:first-child {
text-align: center; text-align: center;
} }
</style> </style>

View File

@ -1,28 +1,28 @@
<template> <template>
<!-- 窑炉出口水温 --> <!-- 窑炉出口水温 -->
<Container usage="NumberAndChart"> <Container usage="NumberAndChart">
<SubContainer title="窑炉出口水温" icon="inWater" padding="34px"> <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div> <div class="pic" style=""></div>
<div class="content flex flex-col"> <div class="content flex flex-col">
<div class="realtime"> <div class="realtime">
<div class="time flex flex-center"> <div class="time flex flex-center">
<DigitalBox <DigitalBox
class="time--item" class="time--item"
v-for="(item, index) in '999'.split('')" v-for="(item, index) in '999'.split('')"
:key="index" :key="index"
:value="item" :value="item"
/> />
<span class="unit"></span> <span class="unit"></span>
</div> </div>
<div class="text">出口实时水温</div> <div class="text">出口实时水温</div>
</div> </div>
<div class="wave"></div> <div class="wave"></div>
<div class="graph flex-1"> <div class="graph flex-1">
<HistoryTrend key="water-out" :series="kilnWaterOut" /> <HistoryTrend key="water-out" :series="kilnWaterOut" />
</div> </div>
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
</template> </template>
<script> <script>
@ -34,17 +34,17 @@ import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
name: "OutWater", name: "OutWater",
props: {}, props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend }, components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() { data() {
return { return {
chartConfig: {}, chartConfig: {},
}; };
}, },
computed: { computed: {
...mapState(["kilnWaterOut"]), ...mapState(["kilnWaterOut"]),
}, },
}; };
</script> </script>
@ -52,85 +52,85 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.pic { .pic {
background: url(../../assets/out-water.png) no-repeat; background: url(../../assets/out-water.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
position: absolute; position: absolute;
top: adjust(24px); top: adjust(24px);
right: 0; right: 0;
width: adjust(w(440px)); width: adjust(w(440px));
height: adjust(h(380px)); height: adjust(h(380px));
} }
.content { .content {
height: 100%; height: 100%;
} }
.wave { .wave {
transform: translateX(adjust(-16px)); transform: translateX(adjust(-16px)) rotateY(0.5turn);
width: adjust(w(793px)); width: adjust(w(793px));
height: adjust(h(76px)); height: adjust(h(76px));
background: url(../../assets/inwater.png) no-repeat; background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.graph { .graph {
// background: #ccc3; // background: #ccc3;
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
// background: #eee; // background: #eee;
} }
.time { .time {
// background: #eee; // background: #eee;
margin: adjust(12px) 0; margin: adjust(12px) 0;
padding-left: adjust(14px); padding-left: adjust(14px);
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: adjust(5px); margin-right: adjust(5px);
} }
.unit { .unit {
font-family: Ubuntu, monospace, sans-serif !important; font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px); font-size: adjust(20px);
letter-spacing: adjust(1px); letter-spacing: adjust(1px);
align-self: flex-end; align-self: flex-end;
} }
.text { .text {
display: inline-block; display: inline-block;
margin-left: adjust(24px); margin-left: adjust(24px);
margin-bottom: adjust(10px); margin-bottom: adjust(10px);
padding: adjust(12px) 0; padding: adjust(12px) 0;
text-align: center; text-align: center;
font-size: adjust(22px); font-size: adjust(22px);
letter-spacing: adjust(1px); letter-spacing: adjust(1px);
position: relative; position: relative;
z-index: 10; z-index: 10;
user-select: none; user-select: none;
} }
.text::after { .text::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 0; left: 0;
bottom: adjust(10px); bottom: adjust(10px);
height: adjust(4px); height: adjust(4px);
width: 100%; width: 100%;
/* 渐变色 */ /* 渐变色 */
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,
#6fe2ffc0, #6fe2ffc0,
#52cbef80, #52cbef80,
#52cbef30, #52cbef30,
#52cbef00, #52cbef00,
transparent transparent
); );
} }
</style> </style>