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

update

Browse Source
This commit is contained in:
g7hoo 2023-05-14 15:47:47 +08:00
parent 2ab0dfa759
commit 1dc95c0fc8
10 changed files with 112 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/eq.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 MiB

After

Width:  |  Height:  |  Size: 5.2 MiB

2
src/components/boxes/BottomTemp.vue
View File

@ -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"
/>

2
src/components/boxes/GasFlow.vue
View File

@ -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"
/>

2
src/components/boxes/OilFlow.vue
View File

@ -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"
/>

2
src/components/boxes/TopTemp.vue
View File

@ -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"
/>

2
src/components/boxes/XicaoTemp.vue
View File

@ -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"
/>

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

@ -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(() => {

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

@ -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>

10
src/components/isolate-area-1/Area.vue
View File

@ -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 },

18
src/components/layout/Main.vue
View File

@ -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;