update
This commit is contained in:
parent
38cf9236cb
commit
c838b4ebb1
@ -8,7 +8,7 @@
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
class="time--item"
|
||||
v-for="(item, index) in '999'.split('')"
|
||||
v-for="(item, index) in waterInTemp.split('')"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["kilnWaterIn"]),
|
||||
...mapState(["kilnWaterIn", "waterInTemp"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,36 +1,40 @@
|
||||
<template>
|
||||
<!-- 窑炉压力 -->
|
||||
<Container usage="NumberOrDate">
|
||||
<SubContainer title="窑炉压力" icon="docs" padding="34px">
|
||||
<div class="pressure flex flex-col flex-start">
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
class="time--item"
|
||||
v-for="(item, index) in ['9', '9', '9']"
|
||||
:key="index"
|
||||
:value="item"
|
||||
:wider="true"
|
||||
/>
|
||||
<span class="unit">Kpa</span>
|
||||
</div>
|
||||
<div class="text">窑炉压力值</div>
|
||||
</div>
|
||||
</SubContainer>
|
||||
</Container>
|
||||
<!-- 窑炉压力 -->
|
||||
<Container usage="NumberOrDate">
|
||||
<SubContainer title="窑炉压力" icon="docs" padding="34px">
|
||||
<div class="pressure flex flex-col flex-start">
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
class="time--item"
|
||||
v-for="(item, index) in kilnPressure.split('')"
|
||||
:key="index"
|
||||
:value="item"
|
||||
:wider="true"
|
||||
/>
|
||||
<span class="unit">Pa</span>
|
||||
</div>
|
||||
<div class="text">窑炉压力值</div>
|
||||
</div>
|
||||
</SubContainer>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../layout/Container.vue";
|
||||
import SubContainer from "../layout/SubContainer.vue";
|
||||
import DigitalBox from "../common/DigitalBox.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "KilnPressure",
|
||||
props: {},
|
||||
components: { Container, SubContainer, DigitalBox },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
name: "KilnPressure",
|
||||
props: {},
|
||||
components: { Container, SubContainer, DigitalBox },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["kilnPressure"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -38,60 +42,60 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.pressure {
|
||||
background: url(../../assets/speed.png) no-repeat;
|
||||
background-size: 65% 95%;
|
||||
// background-position: bottom 85% right -8%;
|
||||
background-position: top -28% right -9%;
|
||||
background: url(../../assets/speed.png) no-repeat;
|
||||
background-size: 65% 95%;
|
||||
// background-position: bottom 85% right -8%;
|
||||
background-position: top -28% right -9%;
|
||||
}
|
||||
|
||||
.time {
|
||||
// background: #eee;
|
||||
margin: adjust(12px) 0;
|
||||
// background: #eee;
|
||||
margin: adjust(12px) 0;
|
||||
}
|
||||
|
||||
.time--item:not(:last-child) {
|
||||
margin-right: adjust(4px);
|
||||
margin-right: adjust(4px);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: sans-serif;
|
||||
font-size: adjust(20px);
|
||||
letter-spacing: adjust(1px);
|
||||
align-self: flex-end;
|
||||
font-family: sans-serif;
|
||||
font-size: adjust(20px);
|
||||
letter-spacing: adjust(1px);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: adjust(23px);
|
||||
letter-spacing: adjust(1px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: adjust(23px);
|
||||
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>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
class="time--item"
|
||||
v-for="(item, index) in '999'.split('')"
|
||||
v-for="(item, index) in waterOutTemp.split('')"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["kilnWaterOut"]),
|
||||
...mapState(["kilnWaterOut", "waterOutTemp"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<!-- line chart -->
|
||||
<div class="line-chart__wrapper">
|
||||
<div class="line-chart__custom-legend flex" v-if="legend.length">
|
||||
<!-- <span>产线1 - 产线5</span> -->
|
||||
<ul style="" class="flex">
|
||||
<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :id="id" style="width: 100%; height: 100%"></div>
|
||||
<div
|
||||
v-show="legend.length === 0"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #eee0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
color: #eee8;
|
||||
user-select: none;
|
||||
"
|
||||
>
|
||||
无数据
|
||||
</div>
|
||||
</div>
|
||||
<!-- line chart -->
|
||||
<div class="line-chart__wrapper">
|
||||
<div class="line-chart__custom-legend flex" v-if="legend.length">
|
||||
<!-- <span>产线1 - 产线5</span> -->
|
||||
<ul style="" class="flex">
|
||||
<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :id="id" style="width: 100%; height: 100%"></div>
|
||||
<div
|
||||
v-show="legend.length === 0"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #eee0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
color: #eee8;
|
||||
user-select: none;
|
||||
"
|
||||
>
|
||||
无数据
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -34,9 +34,9 @@ import * as echarts from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
} from "echarts/components";
|
||||
|
||||
import { LabelLayout, UniversalTransition } from "echarts/features";
|
||||
@ -44,183 +44,183 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
function adjust(v) {
|
||||
return v * 2;
|
||||
return v * 2;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "LineChart",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "line-chart",
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: { text: "default chart" },
|
||||
}),
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
series: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
colors: [
|
||||
"#18c7f3",
|
||||
"#FFD160",
|
||||
"#F31868",
|
||||
"#30E89A",
|
||||
"#2760FF",
|
||||
"#723fff",
|
||||
"#ee3fff",
|
||||
"#800f77",
|
||||
"#f77",
|
||||
"#19f",
|
||||
"#98f",
|
||||
],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
series: {
|
||||
deep: true,
|
||||
handler: function () {
|
||||
console.log('LineChart: series changed!')
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: adjust(32),
|
||||
left: adjust(32),
|
||||
bottom: adjust(24),
|
||||
right: adjust(12),
|
||||
},
|
||||
xAxis: {
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => index + 1 + ':00'),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
margin: adjust(8),
|
||||
rotate: 30
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位/m³",
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(7),
|
||||
align: "right",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
// data: [100, 200, 300, 400, 500],
|
||||
},
|
||||
color: this.colors,
|
||||
// series: Array(5)
|
||||
// .fill(1)
|
||||
// .map((_, index) => ({
|
||||
// name: Math.random(),
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: adjust(3),
|
||||
// lineStyle: {
|
||||
// width: adjust(1),
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: this.colors[index] + "33" },
|
||||
// { offset: 1, color: "transparent" },
|
||||
// ]),
|
||||
// },
|
||||
// data: Array(31)
|
||||
// .fill(1)
|
||||
// .map(() => {
|
||||
// let v = Math.floor(Math.random() * 5000);
|
||||
// while (v < 3000) v = Math.floor(Math.random() * 5000);
|
||||
// return v;
|
||||
// }),
|
||||
// })),
|
||||
series: Array(this.legend.length)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
let lgd = this.legend[index]
|
||||
console.log("series: ", lgd, index, this.series[lgd]);
|
||||
return {
|
||||
name: lgd,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: adjust(3),
|
||||
lineStyle: {
|
||||
width: adjust(1),
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.colors[index] + "33" },
|
||||
{ offset: 1, color: "transparent" },
|
||||
]),
|
||||
},
|
||||
data: this.series[lgd],
|
||||
};
|
||||
}),
|
||||
});
|
||||
},
|
||||
},
|
||||
name: "LineChart",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "line-chart",
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: { text: "default chart" },
|
||||
}),
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
series: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
colors: [
|
||||
"#18c7f3",
|
||||
"#FFD160",
|
||||
"#F31868",
|
||||
"#30E89A",
|
||||
"#2760FF",
|
||||
"#723fff",
|
||||
"#ee3fff",
|
||||
"#800f77",
|
||||
"#f77",
|
||||
"#19f",
|
||||
"#98f",
|
||||
],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
series: {
|
||||
deep: true,
|
||||
handler: function () {
|
||||
console.log("LineChart: series changed!");
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: adjust(32),
|
||||
left: adjust(32),
|
||||
bottom: adjust(24),
|
||||
right: adjust(12),
|
||||
},
|
||||
xAxis: {
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => index + 1 + ":00"),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
margin: adjust(8),
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位/m³",
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(7),
|
||||
align: "right",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
// data: [100, 200, 300, 400, 500],
|
||||
},
|
||||
color: this.colors,
|
||||
// series: Array(5)
|
||||
// .fill(1)
|
||||
// .map((_, index) => ({
|
||||
// name: Math.random(),
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: adjust(3),
|
||||
// lineStyle: {
|
||||
// width: adjust(1),
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: this.colors[index] + "33" },
|
||||
// { offset: 1, color: "transparent" },
|
||||
// ]),
|
||||
// },
|
||||
// data: Array(31)
|
||||
// .fill(1)
|
||||
// .map(() => {
|
||||
// let v = Math.floor(Math.random() * 5000);
|
||||
// while (v < 3000) v = Math.floor(Math.random() * 5000);
|
||||
// return v;
|
||||
// }),
|
||||
// })),
|
||||
series: Array(this.legend.length)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
let lgd = this.legend[index];
|
||||
// console.log("series: ", lgd, index, this.series[lgd]);
|
||||
return {
|
||||
name: lgd,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: adjust(3),
|
||||
lineStyle: {
|
||||
width: adjust(1),
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.colors[index] + "33" },
|
||||
{ offset: 1, color: "transparent" },
|
||||
]),
|
||||
},
|
||||
data: this.series[lgd],
|
||||
};
|
||||
}),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -228,14 +228,14 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
::-webkit-scrollbar {
|
||||
// display: none;
|
||||
height: adjust(2px);
|
||||
// display: none;
|
||||
height: adjust(2px);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
height: adjust(2px);
|
||||
border-radius: adjust(2px);
|
||||
background: #ccc3;
|
||||
height: adjust(2px);
|
||||
border-radius: adjust(2px);
|
||||
background: #ccc3;
|
||||
}
|
||||
|
||||
// ::-webkit-scrollbar-track {
|
||||
@ -245,98 +245,98 @@ export default {
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
min-width: adjust(20px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
min-width: adjust(20px);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: adjust(8px);
|
||||
padding-left: adjust(8px);
|
||||
margin-left: adjust(8px);
|
||||
padding-left: adjust(8px);
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: adjust(2px);
|
||||
left: adjust(-6px);
|
||||
width: adjust(4px);
|
||||
height: adjust(4px);
|
||||
border-radius: adjust(1px);
|
||||
background: #eee6;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: adjust(2px);
|
||||
left: adjust(-6px);
|
||||
width: adjust(4px);
|
||||
height: adjust(4px);
|
||||
border-radius: adjust(1px);
|
||||
background: #eee6;
|
||||
}
|
||||
|
||||
li:nth-child(1)::before {
|
||||
background: #18c7f3;
|
||||
background: #18c7f3;
|
||||
}
|
||||
li:nth-child(2)::before {
|
||||
background: #ffd160;
|
||||
background: #ffd160;
|
||||
}
|
||||
li:nth-child(3)::before {
|
||||
background: #f31868;
|
||||
background: #f31868;
|
||||
}
|
||||
li:nth-child(4)::before {
|
||||
background: #30e89a;
|
||||
background: #30e89a;
|
||||
}
|
||||
li:nth-child(5)::before {
|
||||
background: #2760ff;
|
||||
background: #2760ff;
|
||||
}
|
||||
li:nth-child(6)::before {
|
||||
background: #723fff;
|
||||
background: #723fff;
|
||||
}
|
||||
li:nth-child(7)::before {
|
||||
background: #ee3fff;
|
||||
background: #ee3fff;
|
||||
}
|
||||
li:nth-child(8)::before {
|
||||
background: #800f77;
|
||||
background: #800f77;
|
||||
}
|
||||
li:nth-child(9)::before {
|
||||
background: #f77;
|
||||
background: #f77;
|
||||
}
|
||||
li:nth-child(10)::before {
|
||||
background: #19f;
|
||||
background: #19f;
|
||||
}
|
||||
li:nth-child(11)::before {
|
||||
background: #98f;
|
||||
background: #98f;
|
||||
}
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
width: adjust(154px);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: adjust(2px);
|
||||
flex: 1;
|
||||
width: adjust(154px);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: adjust(2px);
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-right: adjust(8px);
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.line-chart__wrapper {
|
||||
position: relative;
|
||||
background: #7771;
|
||||
border-radius: adjust(3px);
|
||||
backdrop-filter: blur(adjust(2px));
|
||||
box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
|
||||
height: 100%;
|
||||
width: adjust(1px);
|
||||
position: relative;
|
||||
background: #7771;
|
||||
border-radius: adjust(3px);
|
||||
backdrop-filter: blur(adjust(2px));
|
||||
box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
|
||||
height: 100%;
|
||||
width: adjust(1px);
|
||||
}
|
||||
|
||||
.line-chart__custom-legend {
|
||||
position: absolute;
|
||||
top: adjust(-13px);
|
||||
right: 0;
|
||||
font-size: adjust(7px);
|
||||
font-family: Ubuntu, sans-serif;
|
||||
// background: #fff2;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
top: adjust(-13px);
|
||||
right: 0;
|
||||
font-size: adjust(7px);
|
||||
font-family: Ubuntu, sans-serif;
|
||||
// background: #fff2;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,32 +1,44 @@
|
||||
<template>
|
||||
<DragabbleContainer class="isolate-area-1">
|
||||
<SmallBox2
|
||||
v-for="rd in rdata"
|
||||
:key="rd.icon"
|
||||
<DragabbleContainer class="isolate-area-1">
|
||||
<SmallBox2
|
||||
v-for="rd in rdata"
|
||||
:key="rd.icon"
|
||||
:icon="rd.icon"
|
||||
:title="rd.title"
|
||||
:value="rd.value"
|
||||
></SmallBox2>
|
||||
</DragabbleContainer>
|
||||
:title="rd.title"
|
||||
:value="rd.value"
|
||||
></SmallBox2>
|
||||
</DragabbleContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DragabbleContainer from "../layout/DragableContainer.vue";
|
||||
import SmallBox2 from "../common/SmallBox2.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "IsolateArea--1",
|
||||
components: { DragabbleContainer, SmallBox2 },
|
||||
data() {
|
||||
return {
|
||||
rdata: [
|
||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: "南北" },
|
||||
{ icon: "clock", title: "换火时间", value: "12:21:39" },
|
||||
{ icon: "sand", title: "剩余时间", value: "6h" },
|
||||
],
|
||||
};
|
||||
},
|
||||
name: "IsolateArea--1",
|
||||
components: { DragabbleContainer, SmallBox2 },
|
||||
data() {
|
||||
return {
|
||||
// rdata: [
|
||||
// // { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
// { icon: "fire", title: "当前火向", value: "南北" },
|
||||
// { icon: "clock", title: "换火时间", value: "12:21:39" },
|
||||
// { icon: "sand", title: "剩余时间", value: "6h" },
|
||||
// ],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
||||
rdata() {
|
||||
return [
|
||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: this.fireDirection },
|
||||
{ icon: "clock", title: "换火时间", value: this.fireChangeTime },
|
||||
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime + 'h' },
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -34,12 +46,12 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.isolate-area-1 {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
> .small-box-2:not(:last-child) {
|
||||
margin: {
|
||||
right: adjust(15px);
|
||||
}
|
||||
}
|
||||
> .small-box-2:not(:last-child) {
|
||||
margin: {
|
||||
right: adjust(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<main class="">
|
||||
<div class="video-crash" v-if="true"></div>
|
||||
<div class="video-crash" v-if="false"></div>
|
||||
|
||||
<div class="eq-main absolute">
|
||||
<div class="video-bottom" style="">
|
||||
|
||||
@ -17,7 +17,14 @@ export default new Vuex.Store({
|
||||
xiCao1: {},
|
||||
xiCao2: {},
|
||||
kilnWaterIn: {},
|
||||
kilnWaterOut: {}
|
||||
kilnWaterOut: {},
|
||||
fan: {},
|
||||
fireDirection: "南火",
|
||||
kilnPressure: '99',
|
||||
fireChangeTime: '13:30:11',
|
||||
lastFireChangeTime: '33',
|
||||
waterInTemp: '099',
|
||||
waterOutTemp: '056'
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
@ -26,64 +33,108 @@ export default new Vuex.Store({
|
||||
switch (payload.target) {
|
||||
case 'oil-1': {
|
||||
state.oilTable1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'oil-2': {
|
||||
state.oilTable2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'gas-1': {
|
||||
state.gasTable1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'gas-2': {
|
||||
state.gasTable2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-top-1': {
|
||||
state.kilnTop1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-top-2': {
|
||||
state.kilnTop2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-btm-1': {
|
||||
state.kilnBtm1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-btm-2': {
|
||||
state.kilnBtm2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-water-in': {
|
||||
state.kilnWaterIn = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-water-out': {
|
||||
state.kilnWaterOut = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-in-temp': {
|
||||
state.waterInTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-out-temp': {
|
||||
state.waterOutTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'xicao-1': {
|
||||
state.xiCao1 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'xicao-2': {
|
||||
state.xiCao2 = payload.data
|
||||
console.log('更换' + payload.target + '的数据')
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'fan': {
|
||||
state.fan = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'fire-direction': {
|
||||
state.fireDirection = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'last-fire-change-time': {
|
||||
state.lastFireChangeTime = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'kiln-pressure': {
|
||||
state.kilnPressure = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'fire-change-time': {
|
||||
state.fireChangeTime = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-in-temp': {
|
||||
state.waterInTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
}
|
||||
case 'water-out-temp': {
|
||||
state.waterOutTemp = payload.data
|
||||
console.log('更换' + payload.target + '的数据' + payload.data)
|
||||
break
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,8 @@ function handleClose() {
|
||||
|
||||
|
||||
export default class WsClient {
|
||||
static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
|
||||
// static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
|
||||
static wsServer = 'ws://m306416y13.yicp.fun:48978/dz-screen/websocket/1'
|
||||
static tableMap = {
|
||||
// 窑顶温度
|
||||
'kilnTempTopT1': 'kiln-top-1',
|
||||
@ -49,6 +50,13 @@ export default class WsClient {
|
||||
'kilnGasT2': 'gas-2',
|
||||
'kilnOilT1': 'oil-1',
|
||||
'kilnOilT2': 'oil-2',
|
||||
'fan': 'fan',
|
||||
'fireDirection': 'fire-direction',
|
||||
'lastFireChangeTime': 'last-fire-change-time',
|
||||
'kilnPressure': 'kiln-pressure',
|
||||
'fireChangeTime': 'fire-change-time',
|
||||
'waterInTemp': 'water-in-temp',
|
||||
'waterOutTemp': 'water-out-temp'
|
||||
}
|
||||
static socket = null
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user