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%;">
<h3>窑炉历史温度趋势</h3>
<BarChart class="flex-1"/>
</div>
<div class="history-temp flex flex-col" style="height: 100%">
<h3>窑炉历史温度趋势</h3>
<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: {},
components: { BarChart },
props: {
series: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
@ -24,19 +29,18 @@ export default {
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
h3 {
margin: 0;
font-family: sans-serif;
font-weight: 400;
font-size: adjust(10px);
letter-spacing: adjust(1px);
color: #52fff8;
margin: adjust(12px) 0;
margin: 0;
font-family: sans-serif;
font-weight: 400;
font-size: adjust(10px);
letter-spacing: adjust(1px);
color: #52fff8;
margin: adjust(12px) 0;
}
</style>

View File

@ -1,28 +1,28 @@
<template>
<!-- 窑炉进口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in '999'.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">进口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend />
</div>
</div>
</SubContainer>
</Container>
<!-- 窑炉进口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in '999'.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">进口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend key="water-in" :series="kilnWaterIn" />
</div>
</div>
</SubContainer>
</Container>
</template>
<script>
@ -31,16 +31,20 @@ 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",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
name: "InWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterIn"]),
},
};
</script>
@ -48,85 +52,85 @@ export default {
@import "../../assets/styles/functions";
.pic {
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: adjust(24px);
right: 0;
width:adjust(w(386px));
height: adjust(h(364px));
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: adjust(24px);
right: 0;
width: adjust(w(386px));
height: adjust(h(364px));
}
.content {
height: 100%;
height: 100%;
}
.wave {
transform: translateX(adjust(-16px));
width: adjust(w(793px));
height: adjust(h(72px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
transform: translateX(adjust(-16px));
width: adjust(w(793px));
height: adjust(h(72px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
}
.graph {
// background: #ccc3;
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: adjust(12px) 0;
padding-left: adjust(14px);
// background: #eee;
margin: adjust(12px) 0;
padding-left: adjust(14px);
}
.time--item:not(:last-child) {
margin-right: adjust(5px);
margin-right: adjust(5px);
}
.unit {
font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px);
letter-spacing: adjust(1px);
align-self: flex-end;
font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px);
letter-spacing: adjust(1px);
align-self: flex-end;
}
.text {
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
}
</style>

View File

@ -1,28 +1,28 @@
<template>
<!-- 窑炉出口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in '999'.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">出口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend />
</div>
</div>
</SubContainer>
</Container>
<!-- 窑炉出口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in '999'.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">出口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend key="water-out" :series="kilnWaterOut" />
</div>
</div>
</SubContainer>
</Container>
</template>
<script>
@ -31,16 +31,20 @@ 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",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
name: "OutWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterOut"]),
},
};
</script>
@ -48,85 +52,85 @@ export default {
@import "../../assets/styles/functions";
.pic {
background: url(../../assets/out-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: adjust(24px);
right: 0;
width: adjust(w(386px));
height: adjust(h(364px));
background: url(../../assets/out-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: adjust(24px);
right: 0;
width: adjust(w(386px));
height: adjust(h(364px));
}
.content {
height: 100%;
height: 100%;
}
.wave {
transform: translateX(adjust(-16px));
width: adjust(w(793px));
height: adjust(h(72px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
transform: translateX(adjust(-16px));
width: adjust(w(793px));
height: adjust(h(72px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
}
.graph {
// background: #ccc3;
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: adjust(12px) 0;
padding-left: adjust(14px);
// background: #eee;
margin: adjust(12px) 0;
padding-left: adjust(14px);
}
.time--item:not(:last-child) {
margin-right: adjust(5px);
margin-right: adjust(5px);
}
.unit {
font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px);
letter-spacing: adjust(1px);
align-self: flex-end;
font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px);
letter-spacing: adjust(1px);
align-self: flex-end;
}
.text {
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<!-- bar chart -->
<div class="bar-chart" :id="id"></div>
<!-- bar chart -->
<div class="bar-chart" :id="id"></div>
</template>
<script>
@ -8,9 +8,9 @@ import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
GridComponent,
TitleComponent,
TooltipComponent,
GridComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
@ -18,130 +18,141 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
]);
function adjust(v) {
return v * 2
return v * 2;
}
export default {
name: "BarChart",
props: {
config: {
type: Object,
default: () => ({}),
},
},
data() {
return {
id: Math.random().toString(),
chart: null
};
},
mounted() {
this.init();
},
methods: {
init() {
if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
grid: {
top: adjust(28),
left: adjust(28),
bottom: adjust(18),
right: adjust(12),
},
xAxis: {
type: "category",
data: Array(31)
.fill(1)
.map((_, index) => index + 1),
axisLine: {
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffffff",
fontSize: adjust(7),
lineHeight: adjust(1),
margin: adjust(8)
},
},
yAxis: {
type: "value",
name: "单位/℃",
nameTextStyle: {
color: "#fff9",
fontSize: adjust(8),
align: "right",
},
axisLine: {
show: true,
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value} ℃",
color: "#fff9",
fontSize: adjust(7),
lineHeight: adjust(1),
},
splitLine: {
lineStyle: {
color: "#5982b2a0",
},
},
// data: [100, 200, 300, 400, 500],
},
series: [
{
data: Array(31)
.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),
label: {
show: true,
fontSize: adjust(6),
color: "#eee8",
position: "top",
},
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: 1, color: "#0D6FFF" },
]),
},
},
],
});
},
initData() {},
},
name: "BarChart",
props: {
config: {
type: Object,
default: () => ({}),
},
},
data() {
return {
id: Math.random().toString(),
chart: null,
};
},
mounted() {
this.init();
},
watch: {
series: {
deep: true,
handler: function () {
console.log("BarChart: series changed!");
this.init();
},
},
},
methods: {
init() {
if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
grid: {
top: adjust(28),
left: adjust(28),
bottom: adjust(18),
right: adjust(12),
},
xAxis: {
type: "category",
data: Array(31)
.fill(1)
.map((_, index) => index + 1),
axisLine: {
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffffff",
fontSize: adjust(7),
lineHeight: adjust(1),
margin: adjust(8),
},
},
yAxis: {
type: "value",
name: "单位/℃",
nameTextStyle: {
color: "#fff9",
fontSize: adjust(8),
align: "right",
},
axisLine: {
show: true,
lineStyle: {
color: "#5982b2a0",
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value} ℃",
color: "#fff9",
fontSize: adjust(7),
lineHeight: adjust(1),
},
splitLine: {
lineStyle: {
color: "#5982b2a0",
},
},
// data: [100, 200, 300, 400, 500],
},
series: [
{
data:
// this.series
Array(31)
.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),
label: {
show: true,
fontSize: adjust(6),
color: "#eee8",
position: "top",
},
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: 1, color: "#0D6FFF" },
]),
},
},
],
});
},
initData() {},
},
};
</script>

View File

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