update
This commit is contained in:
parent
ab3575b596
commit
e6c7a143e8
@ -14,13 +14,14 @@
|
||||
<th>设备状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <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">
|
||||
<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" />
|
||||
@ -33,7 +34,8 @@
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</transition-group>
|
||||
<!-- </tbody> -->
|
||||
</table>
|
||||
</div>
|
||||
<!--
|
||||
@ -73,6 +75,7 @@ import Container from "../layout/Container.vue";
|
||||
import SubContainer from "../layout/SubContainer.vue";
|
||||
import FrequentComp from "./subcomponents/TableFrequence.vue";
|
||||
import StatusComp from "./subcomponents/TableStatus.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "KilnPressure",
|
||||
@ -81,29 +84,55 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
|
||||
tableCache: [
|
||||
// [11, "风机11", "未运行", "正常" /**or 0,1*/],
|
||||
// [12, "风机12", "未运行", "正常" /**or 0,1*/],
|
||||
// [13, "风机13", "73Hz", "正常" /**or 0,1*/],
|
||||
],
|
||||
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*/],
|
||||
// [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*/],
|
||||
],
|
||||
};
|
||||
},
|
||||
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(() => {
|
||||
this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||
}, 200);
|
||||
this.tableCache.push(outData);
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -121,9 +150,23 @@ export default {
|
||||
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;
|
||||
// background: #eee;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
@ -138,9 +181,10 @@ export default {
|
||||
);
|
||||
}
|
||||
.table-wrapper {
|
||||
padding-right: 6px;
|
||||
// padding-right: 6px;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
@ -153,7 +197,7 @@ table {
|
||||
// }
|
||||
|
||||
.t-row {
|
||||
height: adjust(13.88px);
|
||||
height: adjust(14px);
|
||||
}
|
||||
|
||||
.tables > table {
|
||||
@ -169,9 +213,9 @@ thead > tr th:first-child {
|
||||
}
|
||||
|
||||
thead > tr th {
|
||||
font-size: adjust(9px);
|
||||
font-size: adjust(10px);
|
||||
line-height: 1.5;
|
||||
padding: adjust(2px) adjust(8px);
|
||||
padding: adjust(3px) adjust(8px);
|
||||
font-weight: 400;
|
||||
background: #044a8446;
|
||||
text-align: left;
|
||||
@ -182,7 +226,7 @@ tbody > tr:nth-child(odd) {
|
||||
}
|
||||
|
||||
tbody > tr td {
|
||||
font-size: adjust(9px);
|
||||
font-size: adjust(10px);
|
||||
line-height: 1.25;
|
||||
padding: adjust(2px) adjust(8px);
|
||||
font-weight: 400;
|
||||
|
||||
@ -1,26 +1,30 @@
|
||||
<template>
|
||||
<div class="history-temp flex flex-col" style="height: 100%">
|
||||
<h3>窑炉历史温度趋势</h3>
|
||||
<BarChart class="flex-1" />
|
||||
<BarChart class="flex-1" :series="series" />
|
||||
<!-- :data="compType === 'inWater' ? kilnWaterIn : kilnWaterOut" -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChart from "../charts/BarChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "HistoryTemp",
|
||||
components: { BarChart },
|
||||
props: {
|
||||
series: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
...mapState(["kilnWaterIn", "kilnWaterOut"]),
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
@ -34,9 +34,9 @@ function adjust(v) {
|
||||
export default {
|
||||
name: "BarChart",
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
series: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
type: "category",
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => index + 1 + ':00'),
|
||||
.map((_, index) => index + 1 + ":00"),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
@ -82,11 +82,11 @@ export default {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
color: "#fff9",
|
||||
fontSize: adjust(7),
|
||||
lineHeight: adjust(1),
|
||||
margin: adjust(6),
|
||||
rotate: 30
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
@ -122,16 +122,16 @@ export default {
|
||||
series: [
|
||||
{
|
||||
data:
|
||||
// this.series
|
||||
Array(31)
|
||||
.fill(1)
|
||||
.map(() => {
|
||||
let v = Math.ceil(Math.random() * 100);
|
||||
while (v < 60) {
|
||||
v = Math.ceil(Math.random() * 100);
|
||||
}
|
||||
return v;
|
||||
}),
|
||||
this.series,
|
||||
// Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => {
|
||||
// let v = Math.ceil(Math.random() * 100);
|
||||
// while (v < 60) {
|
||||
// v = Math.ceil(Math.random() * 100);
|
||||
// }
|
||||
// return v;
|
||||
// }),
|
||||
type: "bar",
|
||||
barWidth: adjust(4),
|
||||
label: {
|
||||
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
color: "#fff9",
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
margin: adjust(8),
|
||||
@ -253,11 +253,22 @@ li {
|
||||
|
||||
ul {
|
||||
margin-left: adjust(8px);
|
||||
padding-left: adjust(8px);
|
||||
padding: 0 adjust(8px);
|
||||
// background: #eee3;
|
||||
// flex: 1;
|
||||
// width: adjust(154px);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: adjust(2px);
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-right: adjust(16px);
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
li::before {
|
||||
@ -305,18 +316,6 @@ li:nth-child(11)::before {
|
||||
background: #98f;
|
||||
}
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
width: adjust(154px);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: adjust(2px);
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.line-chart__wrapper {
|
||||
position: relative;
|
||||
background: #7771;
|
||||
@ -335,7 +334,8 @@ li:not(:last-child) {
|
||||
font-family: Ubuntu, sans-serif;
|
||||
// background: #fff2;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
// max-width: 100%;
|
||||
width: 60%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -16,9 +16,9 @@ export default new Vuex.Store({
|
||||
kilnBtm2: {},
|
||||
xiCao1: {},
|
||||
xiCao2: {},
|
||||
kilnWaterIn: {},
|
||||
kilnWaterOut: {},
|
||||
fan: {},
|
||||
kilnWaterIn: [],
|
||||
kilnWaterOut: [],
|
||||
fan: [],
|
||||
fireDirection: "南火",
|
||||
kilnPressure: '99',
|
||||
fireChangeTime: '13:30:11',
|
||||
@ -33,107 +33,107 @@ export default new Vuex.Store({
|
||||
switch (payload.target) {
|
||||
case 'oil-1': {
|
||||
state.oilTable1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'oil-2': {
|
||||
state.oilTable2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'gas-1': {
|
||||
state.gasTable1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'gas-2': {
|
||||
state.gasTable2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-top-1': {
|
||||
state.kilnTop1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-top-2': {
|
||||
state.kilnTop2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-btm-1': {
|
||||
state.kilnBtm1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-btm-2': {
|
||||
state.kilnBtm2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-water-in': {
|
||||
state.kilnWaterIn = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-water-out': {
|
||||
state.kilnWaterOut = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-in-temp': {
|
||||
state.waterInTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-out-temp': {
|
||||
state.waterOutTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'xicao-1': {
|
||||
state.xiCao1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'xicao-2': {
|
||||
state.xiCao2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'fan': {
|
||||
state.fan = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'fire-direction': {
|
||||
state.fireDirection = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'last-fire-change-time': {
|
||||
state.lastFireChangeTime = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-pressure': {
|
||||
state.kilnPressure = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'fire-change-time': {
|
||||
state.fireChangeTime = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-in-temp': {
|
||||
state.waterInTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-out-temp': {
|
||||
state.waterOutTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,10 +42,10 @@ export default class WsClient {
|
||||
'kilnTempTopT2': 'kiln-top-2',
|
||||
'kilnTempBottomT1': 'kiln-btm-1',
|
||||
'kilnTempBottomT2': 'kiln-btm-2',
|
||||
'kilnTempWaterT1': 'kiln-water-in',
|
||||
'kilnTempWaterT2': 'kiln-water-out',
|
||||
'kilnTempTinbathT1': 'kiln-water-in',
|
||||
'kilnTempTinbathT2': 'kiln-water-out',
|
||||
'inWater': 'kiln-water-in',
|
||||
'outWater': 'kiln-water-out',
|
||||
'kilnTempTinbathT1': 'xicao-1',
|
||||
'kilnTempTinbathT2': 'xicao-2',
|
||||
'kilnGasT1': 'gas-1',
|
||||
'kilnGasT2': 'gas-2',
|
||||
'kilnOilT1': 'oil-1',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user