update
This commit is contained in:
parent
0b7feca848
commit
2ab0dfa759
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 6.3 KiB |
@ -4,6 +4,21 @@
|
||||
<SubContainer title="风机运行情况" icon="fan" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<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">
|
||||
<thead>
|
||||
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
|
||||
@ -21,7 +36,11 @@
|
||||
style="font-size: 7px; background: #0b5499; opacity: 35%"
|
||||
> -->
|
||||
<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">
|
||||
<template v-if="idx === 2">
|
||||
<FrequentComp :value="d" />
|
||||
@ -109,7 +128,7 @@ export default {
|
||||
watch: {
|
||||
fan: {
|
||||
handler: function (data) {
|
||||
if (!data) return
|
||||
if (!data) return;
|
||||
let idx = 0;
|
||||
this.tableData1 = data.slice(0, 10).map((item, index) => {
|
||||
idx += 1;
|
||||
@ -128,9 +147,9 @@ export default {
|
||||
const inData = this.tableCache.shift();
|
||||
const outData = this.tableData1.shift();
|
||||
setTimeout(() => {
|
||||
this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||
if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||
}, 200);
|
||||
this.tableCache.push(outData);
|
||||
if (outData) this.tableCache.push(outData);
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,8 +1,24 @@
|
||||
<template>
|
||||
<div class="history-temp flex flex-col" style="height: 100%">
|
||||
<h3>窑炉历史温度趋势</h3>
|
||||
<div class="history-temp flex flex-col" style="height: 100%; position: relative;">
|
||||
<h3>{{ title }}</h3>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -18,6 +34,10 @@ export default {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "窑炉历史温度趋势",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -34,7 +34,11 @@
|
||||
</div>
|
||||
<div class="wave"></div>
|
||||
<div class="graph flex-1">
|
||||
<HistoryTrend key="water-in" :series="kilnWaterIn" />
|
||||
<HistoryTrend
|
||||
key="water-in"
|
||||
title="窑炉进口水温历史"
|
||||
:series="kilnWaterIn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SubContainer>
|
||||
|
||||
@ -28,9 +28,23 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
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>
|
||||
|
||||
|
||||
@ -34,7 +34,11 @@
|
||||
</div>
|
||||
<div class="wave"></div>
|
||||
<div class="graph flex-1">
|
||||
<HistoryTrend key="water-out" :series="kilnWaterOut" />
|
||||
<HistoryTrend
|
||||
key="water-out"
|
||||
title="窑炉出口水温历史"
|
||||
:series="kilnWaterOut"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SubContainer>
|
||||
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(7),
|
||||
fontSize: adjust(8),
|
||||
lineHeight: adjust(1),
|
||||
margin: adjust(6),
|
||||
rotate: 30,
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
axisLabel: {
|
||||
formatter: "{value} ℃",
|
||||
color: "#fff9",
|
||||
fontSize: adjust(7),
|
||||
fontSize: adjust(8),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
splitLine: {
|
||||
@ -136,7 +136,7 @@ export default {
|
||||
barWidth: adjust(4),
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: adjust(6),
|
||||
fontSize: adjust(7),
|
||||
color: "#eee8",
|
||||
position: "top",
|
||||
},
|
||||
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(6),
|
||||
fontSize: adjust(8),
|
||||
lineHeight: adjust(1),
|
||||
margin: adjust(8),
|
||||
rotate: 30,
|
||||
@ -146,8 +146,8 @@ export default {
|
||||
name: "单位/m³",
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(7),
|
||||
align: "right",
|
||||
fontSize: adjust(9),
|
||||
align: "",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: adjust(6),
|
||||
fontSize: adjust(8),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
splitLine: {
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: this.fireDirection },
|
||||
{ icon: "clock", title: "换火时间", value: this.fireChangeTime },
|
||||
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime + 'h' },
|
||||
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
|
||||
];
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,13 +7,53 @@
|
||||
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span class="header--wing absolute company"></span>
|
||||
<span class="header--wing absolute datetime"></span>
|
||||
<span class="header--wing absolute datetime">
|
||||
{{ date }} {{ week }} {{ time }}
|
||||
</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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>
|
||||
|
||||
@ -69,6 +109,10 @@ header {
|
||||
}
|
||||
|
||||
.datetime {
|
||||
color: $main-color;
|
||||
font-size: adjust(26px);
|
||||
text-align: center;
|
||||
// display: inline-block;
|
||||
margin-left: adjust(w(6150px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="video-crash" v-if="false"></div>
|
||||
|
||||
<div class="eq-main absolute">
|
||||
<div class="video-bottom" style="">
|
||||
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
@ -16,7 +16,7 @@
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div class="video-top" style="">
|
||||
<div class="video-top" v-show="fireDirection === '南火'" style="">
|
||||
<video
|
||||
id="2"
|
||||
class="video-top"
|
||||
@ -102,21 +102,7 @@ export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: mapState([
|
||||
"kilnPressure",
|
||||
"oilTable1",
|
||||
"oilTable2",
|
||||
"gasTable1",
|
||||
"gasTable2",
|
||||
"kilnTop1",
|
||||
"kilnTop2",
|
||||
"kilnBtm1",
|
||||
"kilnBtm2",
|
||||
"xiCao1",
|
||||
"xiCao2",
|
||||
"kilnWaterIn",
|
||||
"kilnWaterOut",
|
||||
]),
|
||||
computed: mapState(["kilnPressure", "fireDirection"]),
|
||||
mounted() {
|
||||
const wsc = new WsClient(this);
|
||||
wsc.registerListeners();
|
||||
@ -184,25 +170,59 @@ main {
|
||||
transform: rotateY(0.5turn);
|
||||
}
|
||||
|
||||
.eq-main::after {
|
||||
.eq-main::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: adjust(1200px);
|
||||
// right: adjust(1200px);
|
||||
opacity: 0;
|
||||
top: adjust(164px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
animation: 10s linear .3s infinite mirror-to-left;
|
||||
animation: 10s linear 0.3s infinite mirror-to-left-2;
|
||||
}
|
||||
|
||||
.eq-main::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
// right: adjust(1200px);
|
||||
opacity: 0;
|
||||
top: adjust(164px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
animation: 10s linear 5s infinite mirror-to-left;
|
||||
}
|
||||
|
||||
@keyframes mirror-to-left {
|
||||
0% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
1% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
right: adjust(60px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mirror-to-left-2 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
1% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
// 50% {
|
||||
// right: adjust(800px);
|
||||
// }
|
||||
100% {
|
||||
right: adjust(60px);
|
||||
}
|
||||
|
||||
@ -20,11 +20,11 @@ export default new Vuex.Store({
|
||||
kilnWaterOut: [],
|
||||
fan: [],
|
||||
fireDirection: "南火",
|
||||
kilnPressure: '99',
|
||||
fireChangeTime: '13:30:11',
|
||||
lastFireChangeTime: '33',
|
||||
waterInTemp: '099',
|
||||
waterOutTemp: '056'
|
||||
kilnPressure: '00',
|
||||
fireChangeTime: '00:00:00',
|
||||
lastFireChangeTime: '/',
|
||||
waterInTemp: '000',
|
||||
waterOutTemp: '000'
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user