This commit is contained in:
g7hoo 2023-05-13 18:10:05 +08:00
parent ab3575b596
commit e6c7a143e8
6 changed files with 283 additions and 235 deletions

View File

@ -14,13 +14,14 @@
<th>设备状态</th>
</tr>
</thead>
<tbody>
<!-- <tr
<!-- <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;

View File

@ -1,28 +1,32 @@
<template>
<div class="history-temp flex flex-col" style="height: 100%">
<h3>窑炉历史温度趋势</h3>
<BarChart class="flex-1" />
</div>
<div class="history-temp flex flex-col" style="height: 100%">
<h3>窑炉历史温度趋势</h3>
<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: () => ({}),
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
name: "HistoryTemp",
components: { BarChart },
props: {
series: {
type: Array,
default: () => [],
},
},
data() {
return {};
},
computed: {
...mapState(["kilnWaterIn", "kilnWaterOut"]),
},
mounted() {},
methods: {},
};
</script>
@ -30,17 +34,17 @@ export default {
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
h3 {
margin: 0;
font-family: sans-serif;
font-weight: 400;
font-size: adjust(14px);
letter-spacing: adjust(1px);
color: #52fff8;
margin: adjust(12px) 0;
margin: 0;
font-family: sans-serif;
font-weight: 400;
font-size: adjust(14px);
letter-spacing: adjust(1px);
color: #52fff8;
margin: adjust(12px) 0;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<!-- bar chart -->
<div class="bar-chart" :id="id"></div>
<!-- bar chart -->
<div class="bar-chart" :id="id"></div>
</template>
<script>
@ -8,9 +8,9 @@ import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
GridComponent,
TitleComponent,
TooltipComponent,
GridComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
@ -18,142 +18,142 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
]);
function adjust(v) {
return v * 2;
return v * 2;
}
export default {
name: "BarChart",
props: {
config: {
type: Object,
default: () => ({}),
},
},
data() {
return {
id: Math.random().toString(),
chart: null,
};
},
mounted() {
this.init();
},
watch: {
series: {
deep: true,
handler: function () {
console.log("BarChart: series changed!");
this.init();
},
},
},
methods: {
init() {
if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
grid: {
top: adjust(10),
left: adjust(28),
bottom: adjust(18),
right: adjust(12),
},
xAxis: {
type: "category",
data: Array(24)
.fill(1)
.map((_, index) => index + 1 + ':00'),
axisLine: {
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffffff",
fontSize: adjust(7),
lineHeight: adjust(1),
margin: adjust(6),
rotate: 30
},
},
yAxis: {
type: "value",
// name: "/",
// nameTextStyle: {
// color: "#fff9",
// fontSize: adjust(8),
// align: "right",
// },
axisLine: {
show: true,
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value} ℃",
color: "#fff9",
fontSize: adjust(7),
lineHeight: adjust(1),
},
splitLine: {
lineStyle: {
color: "#5982b2a0",
},
},
// data: [100, 200, 300, 400, 500],
},
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;
}),
type: "bar",
barWidth: adjust(4),
label: {
show: true,
fontSize: adjust(6),
color: "#eee8",
position: "top",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#A0FF49" },
{ offset: 0.35, color: "#49FF9A" },
{ offset: 0.7, color: "#49F2FF" },
{ offset: 1, color: "#0D6FFF" },
]),
},
},
],
});
},
initData() {},
},
name: "BarChart",
props: {
series: {
type: Array,
default: () => [],
},
},
data() {
return {
id: Math.random().toString(),
chart: null,
};
},
mounted() {
this.init();
},
watch: {
series: {
deep: true,
handler: function () {
console.log("BarChart: series changed!");
this.init();
},
},
},
methods: {
init() {
if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
grid: {
top: adjust(10),
left: adjust(28),
bottom: adjust(18),
right: adjust(12),
},
xAxis: {
type: "category",
data: Array(24)
.fill(1)
.map((_, index) => index + 1 + ":00"),
axisLine: {
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff9",
fontSize: adjust(7),
lineHeight: adjust(1),
margin: adjust(6),
rotate: 30,
},
},
yAxis: {
type: "value",
// name: "/",
// nameTextStyle: {
// color: "#fff9",
// fontSize: adjust(8),
// align: "right",
// },
axisLine: {
show: true,
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value} ℃",
color: "#fff9",
fontSize: adjust(7),
lineHeight: adjust(1),
},
splitLine: {
lineStyle: {
color: "#5982b2a0",
},
},
// data: [100, 200, 300, 400, 500],
},
series: [
{
data:
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: {
show: true,
fontSize: adjust(6),
color: "#eee8",
position: "top",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#A0FF49" },
{ offset: 0.35, color: "#49FF9A" },
{ offset: 0.7, color: "#49F2FF" },
{ offset: 1, color: "#0D6FFF" },
]),
},
},
],
});
},
initData() {},
},
};
</script>

View File

@ -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;
}

View File

@ -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
}
}

View File

@ -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',