mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/boxes/HistoryTemp.vue
View File

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

174
src/components/boxes/InWater.vue
View File

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

174
src/components/boxes/OutWater.vue
View File

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

257
src/components/charts/BarChart.vue
View File

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

1
src/components/charts/LineChart.vue
View File

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