This commit is contained in:
lb 2023-05-12 16:35:38 +08:00
parent c60e8abec8
commit bfc5dca853
5 changed files with 332 additions and 308 deletions

View File

@ -1,17 +1,22 @@
<template>
<div class="history-temp flex flex-col" style="height: 100%;">
<div class="history-temp flex flex-col" style="height: 100%">
<h3>窑炉历史温度趋势</h3>
<BarChart class="flex-1"/>
<BarChart class="flex-1" />
</div>
</template>
<script>
import BarChart from '../charts/BarChart.vue'
import BarChart from "../charts/BarChart.vue";
export default {
name: "HistoryTemp",
components: { BarChart },
props: {},
props: {
series: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
@ -24,7 +29,6 @@ export default {
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;

View File

@ -18,7 +18,7 @@
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend />
<HistoryTrend key="water-in" :series="kilnWaterIn" />
</div>
</div>
</SubContainer>
@ -31,9 +31,10 @@ import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue";
import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex";
export default {
name: "XicaoTemp",
name: "InWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
@ -41,6 +42,9 @@ export default {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterIn"]),
},
};
</script>
@ -54,7 +58,7 @@ export default {
position: absolute;
top: adjust(24px);
right: 0;
width:adjust(w(386px));
width: adjust(w(386px));
height: adjust(h(364px));
}

View File

@ -18,7 +18,7 @@
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend />
<HistoryTrend key="water-out" :series="kilnWaterOut" />
</div>
</div>
</SubContainer>
@ -31,9 +31,10 @@ import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue";
import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex";
export default {
name: "XicaoTemp",
name: "OutWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
@ -41,6 +42,9 @@ export default {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterOut"]),
},
};
</script>

View File

@ -28,7 +28,7 @@ echarts.use([
]);
function adjust(v) {
return v * 2
return v * 2;
}
export default {
@ -42,12 +42,21 @@ export default {
data() {
return {
id: Math.random().toString(),
chart: null
chart: null,
};
},
mounted() {
this.init();
},
watch: {
series: {
deep: true,
handler: function () {
console.log("BarChart: series changed!");
this.init();
},
},
},
methods: {
init() {
if (!this.chart)
@ -76,7 +85,7 @@ export default {
color: "#ffffff",
fontSize: adjust(7),
lineHeight: adjust(1),
margin: adjust(8)
margin: adjust(8),
},
},
yAxis: {
@ -111,7 +120,9 @@ export default {
},
series: [
{
data: Array(31)
data:
// this.series
Array(31)
.fill(1)
.map(() => {
let v = Math.ceil(Math.random() * 100);

View File

@ -105,6 +105,7 @@ export default {
series: {
deep: true,
handler: function () {
console.log('LineChart: series changed!')
this.init();
},
},