'火向,剩余时间,中间大图'
This commit is contained in:
parent
3a1f2f5cf6
commit
05b4009614
BIN
src/assets/1.png
Normal file
BIN
src/assets/1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
Before Width: | Height: | Size: 5.2 MiB After Width: | Height: | Size: 6.6 MiB |
@ -283,7 +283,7 @@ ul {
|
||||
align-items: center;
|
||||
height: adjust(28px);
|
||||
// background: #eeec;
|
||||
overflow-x: hidden;
|
||||
// overflow-x: hidden;
|
||||
white-space: pre-wrap;
|
||||
padding-bottom: adjust(2px);
|
||||
}
|
||||
|
@ -15,40 +15,63 @@ import DragabbleContainer from "../layout/DragableContainer.vue";
|
||||
import SmallBox2 from "../common/SmallBox2.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
let timeFun = null
|
||||
|
||||
export default {
|
||||
name: "IsolateArea--1",
|
||||
components: { DragabbleContainer, SmallBox2 },
|
||||
data() {
|
||||
return {
|
||||
// rdata: [
|
||||
// // { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
// { icon: "fire", title: "当前火向", value: "南北" },
|
||||
// { icon: "clock", title: "换火时间", value: "12:21:39" },
|
||||
// { icon: "sand", title: "剩余时间", value: "6h" },
|
||||
// ],
|
||||
rdata: [
|
||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: "" },
|
||||
{ icon: "clock", title: "换火时间", value: "20分" },
|
||||
{ icon: "sand", title: "剩余时间", value: "0" },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
||||
rdata() {
|
||||
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime || '0分0秒')
|
||||
min = +min
|
||||
sec = +sec
|
||||
let timer = setInterval(() => {
|
||||
if (sec) sec -= 1
|
||||
watch: {
|
||||
fireDirection: function(val) {
|
||||
this.$set(this.rdata[0], 'value', val)
|
||||
},
|
||||
fireChangeTime: function(val) {
|
||||
this.$set(this.rdata[1], 'value', val)
|
||||
},
|
||||
lastFireChangeTime: function(val) {
|
||||
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
|
||||
if (timeFun) clearInterval(timeFun)
|
||||
timeFun = setInterval(() => {
|
||||
if (sec > 0) sec -= 1
|
||||
else {
|
||||
sec = 59
|
||||
min -= 1
|
||||
}
|
||||
}, 1000);
|
||||
return [
|
||||
// { icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: this.fireDirection },
|
||||
{ icon: "clock", title: "换火时间", value: this.fireChangeTime },
|
||||
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
|
||||
];
|
||||
this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
||||
// rdata() {
|
||||
// let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
|
||||
// min = +min
|
||||
// sec = +sec
|
||||
// let interTime = `${min}分${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 },
|
||||
// { icon: "clock", title: "换火时间", value: this.fireChangeTime },
|
||||
// { icon: "sand", title: "剩余时间", value: interTime },
|
||||
// ];
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="video-crash" v-if="false"></div>
|
||||
|
||||
<div class="eq-main absolute">
|
||||
<div class="video-bottom" v-show="true || fireDirection === '北火'" style="">
|
||||
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
@ -175,7 +175,7 @@ main {
|
||||
position: absolute;
|
||||
// right: adjust(1200px);
|
||||
opacity: 0;
|
||||
top: adjust(118px);
|
||||
top: adjust(125px);
|
||||
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(118px);
|
||||
top: adjust(125px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
@ -198,9 +198,6 @@ main {
|
||||
|
||||
@keyframes mirror-to-left {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
1% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
@ -214,9 +211,6 @@ main {
|
||||
|
||||
@keyframes mirror-to-left-2 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
1% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -19,7 +19,7 @@ export default new Vuex.Store({
|
||||
kilnWaterIn: [],
|
||||
kilnWaterOut: [],
|
||||
fan: [],
|
||||
fireDirection: "南火",
|
||||
fireDirection: "",
|
||||
kilnPressure: '00',
|
||||
fireChangeTime: '00:00:00',
|
||||
lastFireChangeTime: '0分0秒',
|
||||
|
Loading…
Reference in New Issue
Block a user