update 进出口实时水温
This commit is contained in:
lb
부모
1c3be47344
커밋
86a606b177
BIN
src/assets/i-water.png
Normal file
BIN
src/assets/i-water.png
Normal file
Binary file not shown.
|
After Width: | Height: | 크기: 32 KiB |
BIN
src/assets/o-water.png
Normal file
BIN
src/assets/o-water.png
Normal file
Binary file not shown.
|
After Width: | Height: | 크기: 32 KiB |
@ -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;
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user