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