@@ -1,52 +1,50 @@ | |||
<template> | |||
<div class="history-temp flex flex-col" style="height: 100%; position: relative;"> | |||
<h3>{{ title }}</h3> | |||
<BarChart class="flex-1" :series="series" /> | |||
<div | |||
v-if="series && series.length === 0" | |||
style=" | |||
position: absolute; | |||
top: 8px; | |||
left: -20px; | |||
width: 110%; | |||
height: 105%; | |||
background: #eee1; | |||
display: grid; | |||
place-items: center; | |||
font-size: 12px; | |||
color: #eee9; | |||
" | |||
> | |||
无数据 | |||
</div> | |||
</div> | |||
<div | |||
class="history-temp flex flex-col" | |||
style="height: 100%; position: relative" | |||
> | |||
<h3>{{ title }}</h3> | |||
<BarChart class="flex-1" :series="series" /> | |||
<div | |||
v-if="series && series.length === 0" | |||
style=" | |||
position: absolute; | |||
top: 8px; | |||
left: -20px; | |||
width: 110%; | |||
height: 105%; | |||
background: #eee1; | |||
display: grid; | |||
place-items: center; | |||
font-size: 32px; | |||
letter-spacing: 6px; | |||
color: #777; | |||
" | |||
> | |||
无数据 | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import BarChart from "../charts/BarChart.vue"; | |||
import { mapState } from "vuex"; | |||
export default { | |||
name: "HistoryTemp", | |||
components: { BarChart }, | |||
props: { | |||
series: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
title: { | |||
type: String, | |||
default: "窑炉历史温度趋势", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
...mapState(["kilnWaterIn", "kilnWaterOut"]), | |||
}, | |||
mounted() {}, | |||
methods: {}, | |||
name: "HistoryTemp", | |||
components: { BarChart }, | |||
props: { | |||
series: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
title: { | |||
type: String, | |||
default: "窑炉历史温度趋势", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
}; | |||
</script> | |||
@@ -54,17 +52,22 @@ export default { | |||
@import "../../assets/styles/functions"; | |||
.flex-1 { | |||
flex: 1; | |||
// background: #eee; | |||
flex: 1; | |||
// background: #eee; | |||
} | |||
.history-temp { | |||
// background: #f003; | |||
} | |||
h3 { | |||
margin: 0; | |||
font-family: sans-serif; | |||
font-weight: 400; | |||
font-size: adjust(h(20px)); | |||
letter-spacing: 1px; | |||
color: #0c71ff; | |||
margin: adjust(h(12px)) 0; | |||
margin: 0; | |||
font-family: sans-serif; | |||
font-weight: 400; | |||
font-size: 30px; | |||
line-height: 34px; | |||
letter-spacing: 2px; | |||
color: #0c71ff; | |||
margin: 0; | |||
} | |||
</style> |
@@ -54,8 +54,7 @@ export default { | |||
left: 27px; | |||
height: 509px; | |||
width: 1323px; | |||
background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat, | |||
#0068ff33; | |||
background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat; | |||
} | |||
.content { | |||
@@ -70,7 +69,9 @@ export default { | |||
} | |||
.graph { | |||
// background: #ccc3; | |||
// background: #0cc3; | |||
height: 436px; | |||
transform: translate(0, -64px); | |||
} | |||
.flex-1 { | |||
@@ -15,6 +15,7 @@ | |||
title="窑炉出口水温历史" | |||
:series="kilnWaterOut" | |||
/> | |||
<!-- :series="[11, 22, 33, 44, 55, 66, 77, 88, 99, 100, 32, 99, 88, 31]" --> | |||
</div> | |||
</div> | |||
</SubContainer> | |||
@@ -52,8 +53,7 @@ export default { | |||
left: 1350px; | |||
height: 509px; | |||
width: 1323px; | |||
background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat, | |||
#ff68ff33; | |||
background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat; | |||
} | |||
.content { | |||
@@ -68,9 +68,10 @@ export default { | |||
} | |||
.graph { | |||
// background: #ccc3; | |||
// background: #0cc3; | |||
height: 436px; | |||
transform: translate(0, -64px); | |||
} | |||
.flex-1 { | |||
flex: 1; | |||
// background: #eee; | |||
@@ -75,10 +75,10 @@ export default { | |||
this.chart = echarts.init(document.getElementById(this.id)); | |||
this.chart.setOption({ | |||
grid: { | |||
top: adjust(0), | |||
left: adjust(10), | |||
bottom: adjust(10), | |||
right: adjust(0), | |||
top: 32, | |||
left: 64, | |||
bottom: 64, | |||
right: 32, | |||
}, | |||
xAxis: { | |||
type: "category", | |||
@@ -93,10 +93,10 @@ export default { | |||
}, | |||
axisLabel: { | |||
color: "#3C4E8B", | |||
fontSize: adjust(4), | |||
lineHeight: adjust(0), | |||
margin: adjust(4), | |||
rotate: 30, | |||
fontSize: 16, | |||
lineHeight: 0, | |||
margin: 16, | |||
rotate: 45, | |||
}, | |||
}, | |||
yAxis: { | |||
@@ -119,8 +119,8 @@ export default { | |||
axisLabel: { | |||
formatter: "{value} ℃", | |||
color: "#3C4E8B", | |||
fontSize: adjust(4), | |||
lineHeight: adjust(0), | |||
fontSize: 16, | |||
lineHeight: 0, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
@@ -132,20 +132,11 @@ export default { | |||
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), | |||
barWidth: 12, | |||
label: { | |||
show: true, | |||
fontSize: adjust(7), | |||
fontSize: 18, | |||
color: "#eee8", | |||
position: "topRight", | |||
rotate: 90, | |||
@@ -153,11 +144,16 @@ export default { | |||
}, | |||
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: 0, color: "#996ef9" }, | |||
{ offset: 0.7, color: "#187aff" }, | |||
{ offset: 1, color: "#0D6FFF" }, | |||
]), | |||
// 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" }, | |||
// ]), | |||
}, | |||
}, | |||
], | |||
@@ -41,7 +41,7 @@ export default { | |||
section { | |||
// background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat; | |||
background: rgba(124, 63, 238, 0.722); | |||
// background: rgba(124, 63, 238, 0.722); | |||
width: 100%; | |||
position: absolute; | |||
bottom: 0; | |||