8
0

update 数据对接

Este cometimento está contido em:
lb 2023-05-11 17:07:31 +08:00
ascendente 6ef1d50911
cometimento c60e8abec8
8 ficheiros modificados com 132 adições e 42 eliminações

Ver ficheiro

@ -3,9 +3,21 @@
<Container usage="Charts">
<SubContainer title="窑底温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
<LineChart
key="1"
id="line-chart-7"
class="flex-1"
:legend="Object.keys(kilnBtm1)"
:series="kilnBtm1"
/>
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-8" class="flex-1" :config="chartConfig" />
<LineChart
key="2"
id="line-chart-8"
class="flex-1"
:legend="Object.keys(kilnBtm2)"
:series="kilnBtm2"
/>
</div>
</SubContainer>
</Container>
@ -15,6 +27,7 @@
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";
export default {
name: "BottomTemp",
@ -25,6 +38,9 @@ export default {
chartConfig: {},
};
},
computed: {
...mapState(["kilnBtm1", "kilnBtm2"]),
},
};
</script>

Ver ficheiro

@ -3,9 +3,21 @@
<Container usage="Charts">
<SubContainer title="天然气流量" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" />
<LineChart
key="1"
id="line-chart-3"
class="flex-1"
:legend="Object.keys(gasTable1)"
:series="gasTable1"
/>
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-4" class="flex-1" :config="chartConfig" />
<LineChart
key="2"
id="line-chart-4"
class="flex-1"
:legend="Object.keys(gasTable2)"
:series="gasTable2"
/>
</div>
</SubContainer>
</Container>
@ -15,6 +27,7 @@
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";
export default {
name: "GasFlow",
@ -25,6 +38,9 @@ export default {
chartConfig: {},
};
},
computed: {
...mapState(["gasTable1", "gasTable2"]),
},
};
</script>

Ver ficheiro

@ -3,9 +3,21 @@
<Container usage="Charts">
<SubContainer title="油流量" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
<LineChart
key="1"
id="line-chart-1"
class="flex-1"
:legend="Object.keys(oilTable1)"
:series="oilTable1"
/>
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-2" class="flex-1" :config="chartConfig" />
<LineChart
key="2"
id="line-chart-2"
class="flex-1"
:legend="Object.keys(oilTable2)"
:series="oilTable2"
/>
</div>
</SubContainer>
</Container>
@ -15,6 +27,7 @@
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";
export default {
name: "OilFlow",
@ -25,6 +38,9 @@ export default {
chartConfig: {},
};
},
computed: {
...mapState(["oilTable1", "oilTable2"]),
},
};
</script>

Ver ficheiro

@ -3,9 +3,21 @@
<Container usage="Charts">
<SubContainer title="窑顶温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-5" class="flex-1" :legend="Object.keys(chartOne)" :series="chartOne" />
<LineChart
key="1"
id="line-chart-5"
class="flex-1"
:legend="Object.keys(kilnTop1)"
:series="kilnTop1"
/>
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-6" class="flex-1" :legend="Object.keys(chartTwo)" :series="chartTwo" />
<LineChart
key="2"
id="line-chart-6"
class="flex-1"
:legend="Object.keys(kilnTop2)"
:series="kilnTop2"
/>
</div>
</SubContainer>
</Container>
@ -15,25 +27,28 @@
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";
export default {
name: "TopTemp",
props: {
chartOne: {
type: Object,
default: () => ({})
},
chartTwo: {
type: Object,
default: () => ({})
}
},
components: { Container, SubContainer, LineChart },
props: {},
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnTop1", "kilnTop2"]),
legend_1() {
return Object.keys(this.kilnTop1)
}
},
watch: {
kilnTop1(val) {
console.log("update!", this.kilnTop1);
},
},
};
</script>

Ver ficheiro

@ -3,9 +3,21 @@
<Container usage="Charts">
<SubContainer title="锡槽温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
<LineChart
key="1"
id="line-chart-9"
class="flex-1"
:legend="Object.keys(xiCao1)"
:series="xiCao1"
/>
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
<LineChart
key="2"
id="line-chart-10"
class="flex-1"
:legend="Object.keys(xiCao2)"
:series="xiCao2"
/>
</div>
</SubContainer>
</Container>
@ -15,6 +27,7 @@
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";
export default {
name: "XicaoTemp",
@ -25,6 +38,9 @@ export default {
chartConfig: {},
};
},
computed: {
...mapState(["xiCao1", "xiCao2"]),
},
};
</script>

Ver ficheiro

@ -1,6 +1,6 @@
<template>
<!-- line chart -->
<div class="line-chart__wrapper" style="overflow: hidden;">
<div class="line-chart__wrapper">
<div class="line-chart__custom-legend flex" v-if="legend.length">
<!-- <span>产线1 - 产线5</span> -->
<ul style="" class="flex">
@ -101,6 +101,14 @@ export default {
mounted() {
this.init();
},
watch: {
series: {
deep: true,
handler: function () {
this.init();
},
},
},
methods: {
init() {
if (!this.chart)
@ -136,7 +144,7 @@ export default {
name: "单位/m³",
nameTextStyle: {
color: "#fff9",
fontSize: adjust(6),
fontSize: adjust(7),
align: "right",
},
axisLine: {
@ -186,27 +194,30 @@ export default {
// return v;
// }),
// })),
series: Array(this.legend)
series: Array(this.legend.length)
.fill(1)
.map((lgd, index) => ({
name: lgd,
type: "line",
symbol: "circle",
symbolSize: adjust(3),
lineStyle: {
width: adjust(1),
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.colors[index] + "33" },
{ offset: 1, color: "transparent" },
]),
},
data: this.series[this.legend],
})),
.map((_, index) => {
let lgd = this.legend[index]
console.log("series: ", lgd, index, this.series[lgd]);
return {
name: lgd,
type: "line",
symbol: "circle",
symbolSize: adjust(3),
lineStyle: {
width: adjust(1),
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.colors[index] + "33" },
{ offset: 1, color: "transparent" },
]),
},
data: this.series[lgd],
};
}),
});
},
initData() {},
},
};
</script>

Ver ficheiro

@ -74,7 +74,7 @@ export default {
}
.info {
font-family: "微软雅黑", Helvicate, sans-serif;
font-family: "微软雅黑", sans-serif;
h2 {
font-size: adjust(16px);

Ver ficheiro

@ -47,7 +47,7 @@
<GasFlow />
</div>
<div class="absolute left top-temp">
<TopTemp :chart-one="kilnTop1" :chart-two="kilnTop2" />
<TopTemp />
</div>
<div class="absolute left bottom-temp">
<BottomTemp />