update 数据对接
This commit is contained in:
lb
parent
6ef1d50911
commit
c60e8abec8
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -74,7 +74,7 @@ export default {
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: "微软雅黑", Helvicate, sans-serif;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
|
||||
h2 {
|
||||
font-size: adjust(16px);
|
||||
|
||||
@ -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 />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user