update
This commit is contained in:
parent
2ab0dfa759
commit
1dc95c0fc8
Binary file not shown.
Before Width: | Height: | Size: 5.6 MiB After Width: | Height: | Size: 5.2 MiB |
@ -7,6 +7,7 @@
|
||||
key="1"
|
||||
id="line-chart-7"
|
||||
class="flex-1"
|
||||
unit="单位/℃"
|
||||
:legend="Object.keys(kilnBtm1)"
|
||||
:series="kilnBtm1"
|
||||
/>
|
||||
@ -15,6 +16,7 @@
|
||||
key="2"
|
||||
id="line-chart-8"
|
||||
class="flex-1"
|
||||
unit="单位/℃"
|
||||
:legend="Object.keys(kilnBtm2)"
|
||||
:series="kilnBtm2"
|
||||
/>
|
||||
|
@ -7,6 +7,7 @@
|
||||
key="1"
|
||||
id="line-chart-3"
|
||||
class="flex-1"
|
||||
unit="单位 m³/h"
|
||||
:legend="Object.keys(gasTable1)"
|
||||
:series="gasTable1"
|
||||
/>
|
||||
@ -15,6 +16,7 @@
|
||||
key="2"
|
||||
id="line-chart-4"
|
||||
class="flex-1"
|
||||
unit="单位 m³/h"
|
||||
:legend="Object.keys(gasTable2)"
|
||||
:series="gasTable2"
|
||||
/>
|
||||
|
@ -7,6 +7,7 @@
|
||||
key="1"
|
||||
id="line-chart-1"
|
||||
class="flex-1"
|
||||
unit="单位 kg/h"
|
||||
:legend="Object.keys(oilTable1)"
|
||||
:series="oilTable1"
|
||||
/>
|
||||
@ -15,6 +16,7 @@
|
||||
key="2"
|
||||
id="line-chart-2"
|
||||
class="flex-1"
|
||||
unit="单位 kg/h"
|
||||
:legend="Object.keys(oilTable2)"
|
||||
:series="oilTable2"
|
||||
/>
|
||||
|
@ -7,6 +7,7 @@
|
||||
key="1"
|
||||
id="line-chart-5"
|
||||
class="flex-1"
|
||||
unit="单位/℃"
|
||||
:legend="Object.keys(kilnTop1)"
|
||||
:series="kilnTop1"
|
||||
/>
|
||||
@ -15,6 +16,7 @@
|
||||
key="2"
|
||||
id="line-chart-6"
|
||||
class="flex-1"
|
||||
unit="单位/℃"
|
||||
:legend="Object.keys(kilnTop2)"
|
||||
:series="kilnTop2"
|
||||
/>
|
||||
|
@ -7,6 +7,7 @@
|
||||
key="1"
|
||||
id="line-chart-9"
|
||||
class="flex-1"
|
||||
unit="单位/℃"
|
||||
:legend="Object.keys(xiCao1)"
|
||||
:series="xiCao1"
|
||||
/>
|
||||
@ -15,6 +16,7 @@
|
||||
key="2"
|
||||
id="line-chart-10"
|
||||
class="flex-1"
|
||||
unit="单位/℃"
|
||||
:legend="Object.keys(xiCao2)"
|
||||
:series="xiCao2"
|
||||
/>
|
||||
|
@ -58,6 +58,18 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateXAxis() {
|
||||
const hour = +new Date().getHours();
|
||||
return Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
if (hour - index < 0) {
|
||||
return 24 + hour - index + ":00";
|
||||
}
|
||||
return hour - index + ":00";
|
||||
})
|
||||
.reverse();
|
||||
},
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
@ -70,9 +82,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => index + 1 + ":00"),
|
||||
data: this.updateXAxis(),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
@ -121,8 +131,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data:
|
||||
this.series,
|
||||
data: this.series,
|
||||
// Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => {
|
||||
|
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<!-- line chart -->
|
||||
<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="legendtext.length">
|
||||
<!-- <span>产线1 - 产线5</span> -->
|
||||
<ul style="" class="flex">
|
||||
<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
|
||||
<li v-for="(v, i) in legendtext" :key="i">{{ v }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :id="id" style="width: 100%; height: 100%"></div>
|
||||
<div
|
||||
v-show="legend.length === 0"
|
||||
v-show="legendtext.length === 0"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -70,6 +70,10 @@ export default {
|
||||
title: { text: "default chart" },
|
||||
}),
|
||||
},
|
||||
unit: {
|
||||
type: "String",
|
||||
default: "单位/m³",
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
@ -88,14 +92,24 @@ export default {
|
||||
"#F31868",
|
||||
"#30E89A",
|
||||
"#2760FF",
|
||||
"#723fff",
|
||||
"#ee3fff",
|
||||
"#800f77",
|
||||
"#7138FF",
|
||||
"#F318D8",
|
||||
"#C0F318",
|
||||
"#f77",
|
||||
"#19f",
|
||||
"#98f",
|
||||
],
|
||||
data: [],
|
||||
legendtext: [
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -111,6 +125,18 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateXAxis() {
|
||||
const hour = +new Date().getHours();
|
||||
return Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
if (hour - index < 0) {
|
||||
return 24 + hour - index + ":00";
|
||||
}
|
||||
return hour - index + ":00";
|
||||
})
|
||||
.reverse();
|
||||
},
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
@ -122,9 +148,7 @@ export default {
|
||||
right: adjust(12),
|
||||
},
|
||||
xAxis: {
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => index + 1 + ":00"),
|
||||
data: this.updateXAxis(),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
@ -143,7 +167,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位/m³",
|
||||
name: this.unit,
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(9),
|
||||
@ -252,32 +276,50 @@ li {
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: adjust(8px);
|
||||
padding: 0 adjust(8px);
|
||||
// background: #eee3;
|
||||
// flex: 1;
|
||||
// width: adjust(154px);
|
||||
// padding: 0 adjust(8px);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: adjust(28px);
|
||||
// background: #eeec;
|
||||
overflow-x: hidden;
|
||||
white-space: pre-wrap;
|
||||
padding-bottom: adjust(2px);
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-right: adjust(16px);
|
||||
li {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
min-width: 40px;
|
||||
margin-right: adjust(9px);
|
||||
padding: 0 adjust(2px);
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
li:not(:last-child) {
|
||||
// margin-right: adjust(16px);
|
||||
}
|
||||
|
||||
.line-chart__custom-legend {
|
||||
position: absolute;
|
||||
top: adjust(-32px);
|
||||
right: 0;
|
||||
font-size: adjust(9px);
|
||||
font-family: Ubuntu, sans-serif;
|
||||
padding: 0;
|
||||
// max-width: 100%;
|
||||
width: 65%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: adjust(2px);
|
||||
left: adjust(-6px);
|
||||
width: adjust(4px);
|
||||
height: adjust(4px);
|
||||
left: adjust(-8px);
|
||||
width: adjust(8px);
|
||||
height: adjust(8px);
|
||||
border-radius: adjust(1px);
|
||||
background: #eee6;
|
||||
}
|
||||
@ -298,13 +340,13 @@ li:nth-child(5)::before {
|
||||
background: #2760ff;
|
||||
}
|
||||
li:nth-child(6)::before {
|
||||
background: #723fff;
|
||||
background: #7138FF;
|
||||
}
|
||||
li:nth-child(7)::before {
|
||||
background: #ee3fff;
|
||||
background: #F318D8;
|
||||
}
|
||||
li:nth-child(8)::before {
|
||||
background: #800f77;
|
||||
background: #C0F318;
|
||||
}
|
||||
li:nth-child(9)::before {
|
||||
background: #f77;
|
||||
@ -325,18 +367,4 @@ li:nth-child(11)::before {
|
||||
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%;
|
||||
width: 60%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
@ -31,6 +31,16 @@ export default {
|
||||
computed: {
|
||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
||||
rdata() {
|
||||
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
|
||||
min = +min
|
||||
sec = +sec
|
||||
let timer = setInterval(() => {
|
||||
if (sec) sec -= 1
|
||||
else {
|
||||
sec = 59
|
||||
min -= 1
|
||||
}
|
||||
}, 1000);
|
||||
return [
|
||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: this.fireDirection },
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="video-crash" v-if="false"></div>
|
||||
|
||||
<div class="eq-main absolute">
|
||||
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
||||
<div class="video-bottom" v-show="true || fireDirection === '北火'" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
@ -147,16 +147,16 @@ main {
|
||||
|
||||
.video-bottom {
|
||||
position: absolute;
|
||||
bottom: adjust(153.5px);
|
||||
left: adjust(63.5px);
|
||||
transform: scale(1.02, 1.02);
|
||||
bottom: adjust(178px);
|
||||
left: adjust(16px);
|
||||
transform: scale(.9, .57);
|
||||
}
|
||||
|
||||
.video-top {
|
||||
position: absolute;
|
||||
top: adjust(64px);
|
||||
left: adjust(35px);
|
||||
transform: scale(1.02, 1.02);
|
||||
top: adjust(44px);
|
||||
left: adjust(22px);
|
||||
transform: scale(.95, .9);
|
||||
}
|
||||
|
||||
.eq-main {
|
||||
@ -175,7 +175,7 @@ main {
|
||||
position: absolute;
|
||||
// right: adjust(1200px);
|
||||
opacity: 0;
|
||||
top: adjust(164px);
|
||||
top: adjust(118px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
@ -188,7 +188,7 @@ main {
|
||||
position: absolute;
|
||||
// right: adjust(1200px);
|
||||
opacity: 0;
|
||||
top: adjust(164px);
|
||||
top: adjust(118px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
|
Loading…
Reference in New Issue
Block a user