Merge branch 'master' of http://git.picaiba.com/g7hoo/dezhou-screen
This commit is contained in:
commit
bffbd5be51
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 MiB After Width: | Height: | Size: 5.2 MiB |
@ -7,6 +7,7 @@
|
|||||||
key="1"
|
key="1"
|
||||||
id="line-chart-7"
|
id="line-chart-7"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位/℃"
|
||||||
:legend="Object.keys(kilnBtm1)"
|
:legend="Object.keys(kilnBtm1)"
|
||||||
:series="kilnBtm1"
|
:series="kilnBtm1"
|
||||||
/>
|
/>
|
||||||
@ -15,6 +16,7 @@
|
|||||||
key="2"
|
key="2"
|
||||||
id="line-chart-8"
|
id="line-chart-8"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位/℃"
|
||||||
:legend="Object.keys(kilnBtm2)"
|
:legend="Object.keys(kilnBtm2)"
|
||||||
:series="kilnBtm2"
|
:series="kilnBtm2"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -4,6 +4,21 @@
|
|||||||
<SubContainer title="风机运行情况" icon="fan" padding="34px">
|
<SubContainer title="风机运行情况" icon="fan" padding="34px">
|
||||||
<div class="tables flex" style="height: 100%">
|
<div class="tables flex" style="height: 100%">
|
||||||
<div class="table-wrapper flex-1 align-start">
|
<div class="table-wrapper flex-1 align-start">
|
||||||
|
<div
|
||||||
|
v-if="tableData1 && tableData1.length === 0"
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #eee1;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #eee9;
|
||||||
|
"
|
||||||
|
>无数据</div>
|
||||||
<table class="table-1">
|
<table class="table-1">
|
||||||
<thead>
|
<thead>
|
||||||
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
|
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
|
||||||
@ -21,7 +36,11 @@
|
|||||||
style="font-size: 7px; background: #0b5499; opacity: 35%"
|
style="font-size: 7px; background: #0b5499; opacity: 35%"
|
||||||
> -->
|
> -->
|
||||||
<transition-group name="fan-list" tag="tbody" mode="out-in">
|
<transition-group name="fan-list" tag="tbody" mode="out-in">
|
||||||
<tr class="t-row" v-for="row in tableData1" :key="(row && 'length' in row) ? row[0] : Math.random()">
|
<tr
|
||||||
|
class="t-row"
|
||||||
|
v-for="row in tableData1"
|
||||||
|
:key="row && 'length' in row ? row[0] : Math.random()"
|
||||||
|
>
|
||||||
<td v-for="(d, idx) in row" :key="idx">
|
<td v-for="(d, idx) in row" :key="idx">
|
||||||
<template v-if="idx === 2">
|
<template v-if="idx === 2">
|
||||||
<FrequentComp :value="d" />
|
<FrequentComp :value="d" />
|
||||||
@ -109,7 +128,7 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
fan: {
|
fan: {
|
||||||
handler: function (data) {
|
handler: function (data) {
|
||||||
if (!data) return
|
if (!data) return;
|
||||||
let idx = 0;
|
let idx = 0;
|
||||||
this.tableData1 = data.slice(0, 10).map((item, index) => {
|
this.tableData1 = data.slice(0, 10).map((item, index) => {
|
||||||
idx += 1;
|
idx += 1;
|
||||||
@ -128,9 +147,9 @@ export default {
|
|||||||
const inData = this.tableCache.shift();
|
const inData = this.tableCache.shift();
|
||||||
const outData = this.tableData1.shift();
|
const outData = this.tableData1.shift();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.tableData1.splice(this.tableData1.length, 0, inData);
|
if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||||
}, 200);
|
}, 200);
|
||||||
this.tableCache.push(outData);
|
if (outData) this.tableCache.push(outData);
|
||||||
}, 3000);
|
}, 3000);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
key="1"
|
key="1"
|
||||||
id="line-chart-3"
|
id="line-chart-3"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位 m³/h"
|
||||||
:legend="Object.keys(gasTable1)"
|
:legend="Object.keys(gasTable1)"
|
||||||
:series="gasTable1"
|
:series="gasTable1"
|
||||||
/>
|
/>
|
||||||
@ -15,6 +16,7 @@
|
|||||||
key="2"
|
key="2"
|
||||||
id="line-chart-4"
|
id="line-chart-4"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位 m³/h"
|
||||||
:legend="Object.keys(gasTable2)"
|
:legend="Object.keys(gasTable2)"
|
||||||
:series="gasTable2"
|
:series="gasTable2"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -1,8 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="history-temp flex flex-col" style="height: 100%">
|
<div class="history-temp flex flex-col" style="height: 100%; position: relative;">
|
||||||
<h3>窑炉历史温度趋势</h3>
|
<h3>{{ title }}</h3>
|
||||||
<BarChart class="flex-1" :series="series" />
|
<BarChart class="flex-1" :series="series" />
|
||||||
<!-- :data="compType === 'inWater' ? kilnWaterIn : kilnWaterOut" -->
|
<div
|
||||||
|
v-if="series && series.length === 0"
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: -30px;
|
||||||
|
width: 110%;
|
||||||
|
height: 105%;
|
||||||
|
background: #eee1;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #eee9;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
无数据
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -18,6 +34,10 @@ export default {
|
|||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "窑炉历史温度趋势",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
|
|||||||
@ -34,7 +34,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="wave"></div>
|
<div class="wave"></div>
|
||||||
<div class="graph flex-1">
|
<div class="graph flex-1">
|
||||||
<HistoryTrend key="water-in" :series="kilnWaterIn" />
|
<HistoryTrend
|
||||||
|
key="water-in"
|
||||||
|
title="窑炉进口水温历史"
|
||||||
|
:series="kilnWaterIn"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SubContainer>
|
</SubContainer>
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 窑炉运行时间 -->
|
<!-- 窑炉运行时间 -->
|
||||||
<Container usage="NumberOrDate">
|
<Container usage="NumberOrDate">
|
||||||
<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
|
<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<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 time"
|
v-for="(item, index) in time"
|
||||||
:key="index"
|
:key="index"
|
||||||
:value="item"
|
:value="item"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">窑炉运行时间</div>
|
<div class="text">窑炉运行时间</div>
|
||||||
</div>
|
</div>
|
||||||
</SubContainer>
|
</SubContainer>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -23,14 +23,28 @@ import SubContainer from "../layout/SubContainer.vue";
|
|||||||
import DigitalBox from "../common/DigitalBox.vue";
|
import DigitalBox from "../common/DigitalBox.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "KilnRuntime",
|
name: "KilnRuntime",
|
||||||
components: { Container, SubContainer, DigitalBox },
|
components: { Container, SubContainer, DigitalBox },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
time: "2202天55时",
|
time: " 天 时",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getRuntime()
|
||||||
|
setInterval(this.getRuntime, 1000 * 60 * 60);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getRuntime() {
|
||||||
|
const diff = Date.now() - new Date("2023-5-12 10:00:00");
|
||||||
|
const days = parseInt(diff / 1000 / 60 / 60 / 24);
|
||||||
|
const hours = parseInt(
|
||||||
|
(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
|
||||||
|
);
|
||||||
|
this.time = `${days}天${hours}时`;
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -38,47 +52,47 @@ export default {
|
|||||||
@import "../../assets/styles/functions";
|
@import "../../assets/styles/functions";
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
// background: #eee;
|
// background: #eee;
|
||||||
margin: adjust(12px) 0;
|
margin: adjust(12px) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-center {
|
.flex-center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time--item:not(:last-child) {
|
.time--item:not(:last-child) {
|
||||||
margin-right: adjust(8px);
|
margin-right: adjust(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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(4px);
|
letter-spacing: adjust(4px);
|
||||||
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: 12%;
|
left: 12%;
|
||||||
bottom: adjust(10px);
|
bottom: adjust(10px);
|
||||||
height: adjust(4px);
|
height: adjust(4px);
|
||||||
width: 76%;
|
width: 76%;
|
||||||
/* 渐变色 */
|
/* 渐变色 */
|
||||||
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>
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
key="1"
|
key="1"
|
||||||
id="line-chart-1"
|
id="line-chart-1"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位 kg/h"
|
||||||
:legend="Object.keys(oilTable1)"
|
:legend="Object.keys(oilTable1)"
|
||||||
:series="oilTable1"
|
:series="oilTable1"
|
||||||
/>
|
/>
|
||||||
@ -15,6 +16,7 @@
|
|||||||
key="2"
|
key="2"
|
||||||
id="line-chart-2"
|
id="line-chart-2"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位 kg/h"
|
||||||
:legend="Object.keys(oilTable2)"
|
:legend="Object.keys(oilTable2)"
|
||||||
:series="oilTable2"
|
:series="oilTable2"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -34,7 +34,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="wave"></div>
|
<div class="wave"></div>
|
||||||
<div class="graph flex-1">
|
<div class="graph flex-1">
|
||||||
<HistoryTrend key="water-out" :series="kilnWaterOut" />
|
<HistoryTrend
|
||||||
|
key="water-out"
|
||||||
|
title="窑炉出口水温历史"
|
||||||
|
:series="kilnWaterOut"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SubContainer>
|
</SubContainer>
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
key="1"
|
key="1"
|
||||||
id="line-chart-5"
|
id="line-chart-5"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位/℃"
|
||||||
:legend="Object.keys(kilnTop1)"
|
:legend="Object.keys(kilnTop1)"
|
||||||
:series="kilnTop1"
|
:series="kilnTop1"
|
||||||
/>
|
/>
|
||||||
@ -15,6 +16,7 @@
|
|||||||
key="2"
|
key="2"
|
||||||
id="line-chart-6"
|
id="line-chart-6"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位/℃"
|
||||||
:legend="Object.keys(kilnTop2)"
|
:legend="Object.keys(kilnTop2)"
|
||||||
:series="kilnTop2"
|
:series="kilnTop2"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
key="1"
|
key="1"
|
||||||
id="line-chart-9"
|
id="line-chart-9"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位/℃"
|
||||||
:legend="Object.keys(xiCao1)"
|
:legend="Object.keys(xiCao1)"
|
||||||
:series="xiCao1"
|
:series="xiCao1"
|
||||||
/>
|
/>
|
||||||
@ -15,6 +16,7 @@
|
|||||||
key="2"
|
key="2"
|
||||||
id="line-chart-10"
|
id="line-chart-10"
|
||||||
class="flex-1"
|
class="flex-1"
|
||||||
|
unit="单位/℃"
|
||||||
:legend="Object.keys(xiCao2)"
|
:legend="Object.keys(xiCao2)"
|
||||||
:series="xiCao2"
|
:series="xiCao2"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -58,6 +58,18 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
init() {
|
||||||
if (!this.chart)
|
if (!this.chart)
|
||||||
this.chart = echarts.init(document.getElementById(this.id));
|
this.chart = echarts.init(document.getElementById(this.id));
|
||||||
@ -70,9 +82,7 @@ export default {
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: Array(24)
|
data: this.updateXAxis(),
|
||||||
.fill(1)
|
|
||||||
.map((_, index) => index + 1 + ":00"),
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#5982b2a0",
|
color: "#5982b2a0",
|
||||||
@ -83,7 +93,7 @@ export default {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff9",
|
color: "#fff9",
|
||||||
fontSize: adjust(7),
|
fontSize: adjust(8),
|
||||||
lineHeight: adjust(1),
|
lineHeight: adjust(1),
|
||||||
margin: adjust(6),
|
margin: adjust(6),
|
||||||
rotate: 30,
|
rotate: 30,
|
||||||
@ -109,7 +119,7 @@ export default {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value} ℃",
|
formatter: "{value} ℃",
|
||||||
color: "#fff9",
|
color: "#fff9",
|
||||||
fontSize: adjust(7),
|
fontSize: adjust(8),
|
||||||
lineHeight: adjust(1),
|
lineHeight: adjust(1),
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@ -121,8 +131,7 @@ export default {
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data:
|
data: this.series,
|
||||||
this.series,
|
|
||||||
// Array(24)
|
// Array(24)
|
||||||
// .fill(1)
|
// .fill(1)
|
||||||
// .map(() => {
|
// .map(() => {
|
||||||
@ -136,7 +145,7 @@ export default {
|
|||||||
barWidth: adjust(4),
|
barWidth: adjust(4),
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: adjust(6),
|
fontSize: adjust(7),
|
||||||
color: "#eee8",
|
color: "#eee8",
|
||||||
position: "top",
|
position: "top",
|
||||||
},
|
},
|
||||||
|
|||||||
@ -70,6 +70,10 @@ export default {
|
|||||||
title: { text: "default chart" },
|
title: { text: "default chart" },
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
|
unit: {
|
||||||
|
type: "String",
|
||||||
|
default: "单位/m³",
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
@ -88,14 +92,24 @@ export default {
|
|||||||
"#F31868",
|
"#F31868",
|
||||||
"#30E89A",
|
"#30E89A",
|
||||||
"#2760FF",
|
"#2760FF",
|
||||||
"#723fff",
|
"#7138FF",
|
||||||
"#ee3fff",
|
"#F318D8",
|
||||||
"#800f77",
|
"#C0F318",
|
||||||
"#f77",
|
"#f77",
|
||||||
"#19f",
|
"#19f",
|
||||||
"#98f",
|
"#98f",
|
||||||
],
|
],
|
||||||
data: [],
|
data: [],
|
||||||
|
legendtext: [
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
"asdfsadf",
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -111,6 +125,18 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
init() {
|
||||||
if (!this.chart)
|
if (!this.chart)
|
||||||
this.chart = echarts.init(document.getElementById(this.id));
|
this.chart = echarts.init(document.getElementById(this.id));
|
||||||
@ -122,9 +148,7 @@ export default {
|
|||||||
right: adjust(12),
|
right: adjust(12),
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: Array(24)
|
data: this.updateXAxis(),
|
||||||
.fill(1)
|
|
||||||
.map((_, index) => index + 1 + ":00"),
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#5982b2a0",
|
color: "#5982b2a0",
|
||||||
@ -135,7 +159,7 @@ export default {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff9",
|
color: "#fff9",
|
||||||
fontSize: adjust(6),
|
fontSize: adjust(8),
|
||||||
lineHeight: adjust(1),
|
lineHeight: adjust(1),
|
||||||
margin: adjust(8),
|
margin: adjust(8),
|
||||||
rotate: 30,
|
rotate: 30,
|
||||||
@ -143,11 +167,11 @@ export default {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "单位/m³",
|
name: this.unit,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff9",
|
color: "#fff9",
|
||||||
fontSize: adjust(7),
|
fontSize: adjust(9),
|
||||||
align: "right",
|
align: "",
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -161,7 +185,7 @@ export default {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff9",
|
color: "#fff9",
|
||||||
fontSize: adjust(6),
|
fontSize: adjust(8),
|
||||||
lineHeight: adjust(1),
|
lineHeight: adjust(1),
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@ -252,32 +276,50 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-left: adjust(8px);
|
// padding: 0 adjust(8px);
|
||||||
padding: 0 adjust(8px);
|
|
||||||
// background: #eee3;
|
|
||||||
// flex: 1;
|
|
||||||
// width: adjust(154px);
|
|
||||||
display: flex;
|
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);
|
padding-bottom: adjust(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
li:not(:last-child) {
|
li {
|
||||||
margin-right: adjust(16px);
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
min-width: 40px;
|
||||||
|
margin-right: adjust(9px);
|
||||||
|
padding: 0 adjust(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li:not(:last-child) {
|
||||||
position: relative;
|
// margin-right: adjust(16px);
|
||||||
width: 40px;
|
}
|
||||||
|
|
||||||
|
.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 {
|
li::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: adjust(2px);
|
top: adjust(2px);
|
||||||
left: adjust(-6px);
|
left: adjust(-8px);
|
||||||
width: adjust(4px);
|
width: adjust(8px);
|
||||||
height: adjust(4px);
|
height: adjust(8px);
|
||||||
border-radius: adjust(1px);
|
border-radius: adjust(1px);
|
||||||
background: #eee6;
|
background: #eee6;
|
||||||
}
|
}
|
||||||
@ -298,13 +340,13 @@ li:nth-child(5)::before {
|
|||||||
background: #2760ff;
|
background: #2760ff;
|
||||||
}
|
}
|
||||||
li:nth-child(6)::before {
|
li:nth-child(6)::before {
|
||||||
background: #723fff;
|
background: #7138FF;
|
||||||
}
|
}
|
||||||
li:nth-child(7)::before {
|
li:nth-child(7)::before {
|
||||||
background: #ee3fff;
|
background: #F318D8;
|
||||||
}
|
}
|
||||||
li:nth-child(8)::before {
|
li:nth-child(8)::before {
|
||||||
background: #800f77;
|
background: #C0F318;
|
||||||
}
|
}
|
||||||
li:nth-child(9)::before {
|
li:nth-child(9)::before {
|
||||||
background: #f77;
|
background: #f77;
|
||||||
@ -325,18 +367,4 @@ li:nth-child(11)::before {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: adjust(1px);
|
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>
|
</style>
|
||||||
|
|||||||
@ -31,11 +31,21 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
||||||
rdata() {
|
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 [
|
return [
|
||||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||||
{ icon: "fire", title: "当前火向", value: this.fireDirection },
|
{ icon: "fire", title: "当前火向", value: this.fireDirection },
|
||||||
{ icon: "clock", title: "换火时间", value: this.fireChangeTime },
|
{ icon: "clock", title: "换火时间", value: this.fireChangeTime },
|
||||||
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime + 'h' },
|
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,19 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="header relative">
|
<header class="header relative">
|
||||||
<div>
|
<div>
|
||||||
<span class="header--logo">
|
<span class="header--logo">
|
||||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||||
</span>
|
</span>
|
||||||
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||||
</div>
|
</div>
|
||||||
<span class="header--wing absolute company"></span>
|
<span class="header--wing absolute company"></span>
|
||||||
<span class="header--wing absolute datetime"></span>
|
<span class="header--wing absolute datetime">
|
||||||
</header>
|
{{ date }} {{ week }} {{ time }}
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "Header",
|
name: "Header",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
today: new Date(),
|
||||||
|
time: "00:00:00",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
date() {
|
||||||
|
return this.today.toLocaleDateString().replaceAll("/", ".");
|
||||||
|
},
|
||||||
|
week() {
|
||||||
|
return [
|
||||||
|
"星期日",
|
||||||
|
"星期一",
|
||||||
|
"星期二",
|
||||||
|
"星期三",
|
||||||
|
"星期四",
|
||||||
|
"星期五",
|
||||||
|
"星期六",
|
||||||
|
][this.today.getDay()];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.time = this.getTime().join(":");
|
||||||
|
setInterval(() => {
|
||||||
|
this.time = this.getTime().join(":");
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTime() {
|
||||||
|
const now = new Date();
|
||||||
|
return [
|
||||||
|
now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
|
||||||
|
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
|
||||||
|
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -22,56 +62,60 @@ export default {
|
|||||||
@import "../../assets/styles/variables";
|
@import "../../assets/styles/variables";
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: url(../../assets/header.png) center/contain no-repeat;
|
background: url(../../assets/header.png) center/contain no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
height: adjust(h(280px));
|
height: adjust(h(280px));
|
||||||
width: adjust($actual_width);
|
width: adjust($actual_width);
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: adjust(10px);
|
margin-bottom: adjust(10px);
|
||||||
|
|
||||||
.header--logo {
|
.header--logo {
|
||||||
width: adjust(102px);
|
width: adjust(102px);
|
||||||
height: adjust(56px);
|
height: adjust(56px);
|
||||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-left: adjust(20px);
|
margin-left: adjust(20px);
|
||||||
font-size: adjust(35px);
|
font-size: adjust(35px);
|
||||||
// line-height: adjust(100px);
|
// line-height: adjust(100px);
|
||||||
// background: #eee;
|
// background: #eee;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
letter-spacing: adjust(8px);
|
letter-spacing: adjust(8px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
// color: #6bf2ff;
|
// color: #6bf2ff;
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
font-family: "微软雅黑", sans-serif;
|
font-family: "微软雅黑", sans-serif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header--wing {
|
.header--wing {
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: adjust(10px);
|
bottom: adjust(10px);
|
||||||
height: adjust(h(78px));
|
height: adjust(h(78px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.company {
|
.company {
|
||||||
margin-left: adjust(w(1460px));
|
margin-left: adjust(w(1460px));
|
||||||
width: adjust(w(1320px));
|
width: adjust(w(1320px));
|
||||||
height: adjust(h(48px));
|
height: adjust(h(48px));
|
||||||
background: url("../../assets/company.png") center/cover no-repeat;
|
background: url("../../assets/company.png") center/cover no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.datetime {
|
.datetime {
|
||||||
margin-left: adjust(w(6150px));
|
color: $main-color;
|
||||||
width: adjust(w(1320px));
|
font-size: adjust(26px);
|
||||||
height: adjust(h(48px));
|
text-align: center;
|
||||||
background: url("../../assets/date.png") center/cover no-repeat;
|
// display: inline-block;
|
||||||
|
margin-left: adjust(w(6150px));
|
||||||
|
width: adjust(w(1320px));
|
||||||
|
height: adjust(h(48px));
|
||||||
|
background: url("../../assets/date.png") center/cover no-repeat;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,69 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="">
|
<main class="">
|
||||||
<div class="video-crash" v-if="false"></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" v-show="true || fireDirection === '北火'" style="">
|
||||||
<video
|
<video
|
||||||
id="1"
|
id="1"
|
||||||
preload="auto"
|
preload="auto"
|
||||||
height="200"
|
height="200"
|
||||||
muted
|
muted
|
||||||
autoplay
|
autoplay
|
||||||
loop
|
loop
|
||||||
disablepictureinpicture
|
disablepictureinpicture
|
||||||
src="../../assets/videos/fire-to-top.mp4"
|
src="../../assets/videos/fire-to-top.mp4"
|
||||||
></video>
|
></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="video-top" style="">
|
<div class="video-top" v-show="fireDirection === '南火'" style="">
|
||||||
<video
|
<video
|
||||||
id="2"
|
id="2"
|
||||||
class="video-top"
|
class="video-top"
|
||||||
preload="auto"
|
preload="auto"
|
||||||
height="200"
|
height="200"
|
||||||
muted
|
muted
|
||||||
autoplay
|
autoplay
|
||||||
loop
|
loop
|
||||||
disablepictureinpicture
|
disablepictureinpicture
|
||||||
src="../../assets/videos/fire-to-bottom.mp4"
|
src="../../assets/videos/fire-to-bottom.mp4"
|
||||||
></video>
|
></video>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AreaOne class="area-one" />
|
<AreaOne class="area-one" />
|
||||||
|
|
||||||
<div class="absolute left kiln-runtime">
|
<div class="absolute left kiln-runtime">
|
||||||
<KilnRuntime />
|
<KilnRuntime />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left kiln-pressure">
|
<div class="absolute left kiln-pressure">
|
||||||
<KilnPressure />
|
<KilnPressure />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left fan-runtime">
|
<div class="absolute left fan-runtime">
|
||||||
<FanRuntime />
|
<FanRuntime />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left oil-flow">
|
<div class="absolute left oil-flow">
|
||||||
<OilFlow />
|
<OilFlow />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left gas-flow">
|
<div class="absolute left gas-flow">
|
||||||
<GasFlow />
|
<GasFlow />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left top-temp">
|
<div class="absolute left top-temp">
|
||||||
<TopTemp />
|
<TopTemp />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left bottom-temp">
|
<div class="absolute left bottom-temp">
|
||||||
<BottomTemp />
|
<BottomTemp />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left ou-temp">
|
<div class="absolute left ou-temp">
|
||||||
<XicaoTemp />
|
<XicaoTemp />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute in-water">
|
<div class="absolute in-water">
|
||||||
<InWater />
|
<InWater />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute out-water">
|
<div class="absolute out-water">
|
||||||
<OutWater />
|
<OutWater />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -84,52 +84,38 @@ import { mapMutations, mapState } from "vuex";
|
|||||||
import WsClient from "../../utils/wsClass";
|
import WsClient from "../../utils/wsClass";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Main",
|
name: "Main",
|
||||||
components: {
|
components: {
|
||||||
AreaOne,
|
AreaOne,
|
||||||
KilnRuntime,
|
KilnRuntime,
|
||||||
KilnPressure,
|
KilnPressure,
|
||||||
FanRuntime,
|
FanRuntime,
|
||||||
OilFlow,
|
OilFlow,
|
||||||
GasFlow,
|
GasFlow,
|
||||||
TopTemp,
|
TopTemp,
|
||||||
BottomTemp,
|
BottomTemp,
|
||||||
XicaoTemp,
|
XicaoTemp,
|
||||||
InWater,
|
InWater,
|
||||||
OutWater,
|
OutWater,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: mapState([
|
computed: mapState(["kilnPressure", "fireDirection"]),
|
||||||
"kilnPressure",
|
mounted() {
|
||||||
"oilTable1",
|
const wsc = new WsClient(this);
|
||||||
"oilTable2",
|
wsc.registerListeners();
|
||||||
"gasTable1",
|
},
|
||||||
"gasTable2",
|
// watch: {
|
||||||
"kilnTop1",
|
// // works
|
||||||
"kilnTop2",
|
// 'kilnTop1': val => {
|
||||||
"kilnBtm1",
|
// console.log('val', val)
|
||||||
"kilnBtm2",
|
// }
|
||||||
"xiCao1",
|
// },
|
||||||
"xiCao2",
|
methods: {
|
||||||
"kilnWaterIn",
|
...mapMutations(["update"]),
|
||||||
"kilnWaterOut",
|
},
|
||||||
]),
|
|
||||||
mounted() {
|
|
||||||
const wsc = new WsClient(this);
|
|
||||||
wsc.registerListeners();
|
|
||||||
},
|
|
||||||
// watch: {
|
|
||||||
// // works
|
|
||||||
// 'kilnTop1': val => {
|
|
||||||
// console.log('val', val)
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
methods: {
|
|
||||||
...mapMutations(["update"]),
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -137,124 +123,158 @@ export default {
|
|||||||
@import "../../assets/styles/functions";
|
@import "../../assets/styles/functions";
|
||||||
|
|
||||||
main {
|
main {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
// background: #eee2;
|
// background: #eee2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.area-one {
|
.area-one {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: adjust(160px);
|
top: adjust(160px);
|
||||||
left: adjust(1588px);
|
left: adjust(1588px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-crash {
|
.video-crash {
|
||||||
height: adjust(h(424px));
|
height: adjust(h(424px));
|
||||||
width: adjust(w(800px));
|
width: adjust(w(800px));
|
||||||
background: url(../../assets/tv.png) no-repeat;
|
background: url(../../assets/tv.png) no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 356px;
|
top: 356px;
|
||||||
left: 1580px;
|
left: 1580px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-bottom {
|
.video-bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: adjust(153.5px);
|
bottom: adjust(178px);
|
||||||
left: adjust(63.5px);
|
left: adjust(16px);
|
||||||
transform: scale(1.02, 1.02);
|
transform: scale(.9, .57);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-top {
|
.video-top {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: adjust(64px);
|
top: adjust(44px);
|
||||||
left: adjust(35px);
|
left: adjust(22px);
|
||||||
transform: scale(1.02, 1.02);
|
transform: scale(.95, .9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.eq-main {
|
.eq-main {
|
||||||
width: adjust(w(7150px));
|
width: adjust(w(7150px));
|
||||||
height: adjust(h(960px));
|
height: adjust(h(960px));
|
||||||
background: url(../../assets/eq.png) no-repeat;
|
background: url(../../assets/eq.png) no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
top: adjust(170px);
|
top: adjust(170px);
|
||||||
left: adjust(380px);
|
left: adjust(380px);
|
||||||
position: relative;
|
position: relative;
|
||||||
transform: rotateY(0.5turn);
|
transform: rotateY(0.5turn);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eq-main::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
// right: adjust(1200px);
|
||||||
|
opacity: 0;
|
||||||
|
top: adjust(118px);
|
||||||
|
width: adjust(150px);
|
||||||
|
height: adjust(150px);
|
||||||
|
background: url(../../assets/mirror.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
animation: 10s linear 0.3s infinite mirror-to-left-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eq-main::after {
|
.eq-main::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: adjust(1200px);
|
// right: adjust(1200px);
|
||||||
top: adjust(164px);
|
opacity: 0;
|
||||||
width: adjust(150px);
|
top: adjust(118px);
|
||||||
height: adjust(150px);
|
width: adjust(150px);
|
||||||
background: url(../../assets/mirror.png) no-repeat;
|
height: adjust(150px);
|
||||||
background-size: 100% 100%;
|
background: url(../../assets/mirror.png) no-repeat;
|
||||||
animation: 10s linear .3s infinite mirror-to-left;
|
background-size: 100% 100%;
|
||||||
|
animation: 10s linear 5s infinite mirror-to-left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mirror-to-left {
|
@keyframes mirror-to-left {
|
||||||
0% {
|
0% {
|
||||||
right: adjust(1200px);
|
opacity: 1;
|
||||||
}
|
}
|
||||||
// 50% {
|
1% {
|
||||||
// right: adjust(800px);
|
right: adjust(1200px);
|
||||||
// }
|
opacity: 1;
|
||||||
100% {
|
}
|
||||||
right: adjust(60px);
|
90% {
|
||||||
}
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
right: adjust(60px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mirror-to-left-2 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
1% {
|
||||||
|
right: adjust(1200px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
right: adjust(60px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.kiln-runtime {
|
.kiln-runtime {
|
||||||
top: adjust(h(200px));
|
top: adjust(h(200px));
|
||||||
left: adjust(w(60px));
|
left: adjust(w(60px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.kiln-pressure {
|
.kiln-pressure {
|
||||||
top: adjust(h(610px));
|
top: adjust(h(610px));
|
||||||
left: adjust(w(60px));
|
left: adjust(w(60px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.fan-runtime {
|
.fan-runtime {
|
||||||
top: adjust(h(1020px));
|
top: adjust(h(1020px));
|
||||||
left: adjust(w(60px));
|
left: adjust(w(60px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.oil-flow {
|
.oil-flow {
|
||||||
top: adjust(h(1588px));
|
top: adjust(h(1588px));
|
||||||
left: adjust(w(60px));
|
left: adjust(w(60px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.gas-flow {
|
.gas-flow {
|
||||||
top: adjust(h(1588px));
|
top: adjust(h(1588px));
|
||||||
left: adjust(w(1660px));
|
left: adjust(w(1660px));
|
||||||
}
|
}
|
||||||
.top-temp {
|
.top-temp {
|
||||||
top: adjust(h(1588px));
|
top: adjust(h(1588px));
|
||||||
left: adjust(w(3260px));
|
left: adjust(w(3260px));
|
||||||
}
|
}
|
||||||
.bottom-temp {
|
.bottom-temp {
|
||||||
top: adjust(h(1588px));
|
top: adjust(h(1588px));
|
||||||
left: adjust(w(4860px));
|
left: adjust(w(4860px));
|
||||||
}
|
}
|
||||||
.ou-temp {
|
.ou-temp {
|
||||||
top: adjust(h(1588px));
|
top: adjust(h(1588px));
|
||||||
left: adjust(w(6460px));
|
left: adjust(w(6460px));
|
||||||
}
|
}
|
||||||
.in-water {
|
.in-water {
|
||||||
top: adjust(h(200px));
|
top: adjust(h(200px));
|
||||||
left: adjust(w(8096px));
|
left: adjust(w(8096px));
|
||||||
// left: w(5096px);
|
// left: w(5096px);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.out-water {
|
.out-water {
|
||||||
top: adjust(h(1177px));
|
top: adjust(h(1177px));
|
||||||
left: adjust(w(8096px));
|
left: adjust(w(8096px));
|
||||||
// left: w(5096px);
|
// left: w(5096px);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -20,11 +20,11 @@ export default new Vuex.Store({
|
|||||||
kilnWaterOut: [],
|
kilnWaterOut: [],
|
||||||
fan: [],
|
fan: [],
|
||||||
fireDirection: "南火",
|
fireDirection: "南火",
|
||||||
kilnPressure: '99',
|
kilnPressure: '00',
|
||||||
fireChangeTime: '13:30:11',
|
fireChangeTime: '00:00:00',
|
||||||
lastFireChangeTime: '33',
|
lastFireChangeTime: '/',
|
||||||
waterInTemp: '099',
|
waterInTemp: '000',
|
||||||
waterOutTemp: '056'
|
waterOutTemp: '000'
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
},
|
},
|
||||||
@ -72,7 +72,7 @@ export default new Vuex.Store({
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'kiln-water-in': {
|
case 'kiln-water-in': {
|
||||||
state.kilnWaterIn = payload.data
|
state.kilnWaterIn = payload.data
|
||||||
//console.log('更换' + payload.target + '的数据' + payload.data)
|
//console.log('更换' + payload.target + '的数据' + payload.data)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user