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

View File

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