'火向,剩余时间,中间大图'

This commit is contained in:
张恪铭 2023-05-14 17:53:45 +08:00
parent 3a1f2f5cf6
commit 05b4009614
6 changed files with 49 additions and 32 deletions

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

View File

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

View File

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

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="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;
}

View File

@ -19,7 +19,7 @@ export default new Vuex.Store({
kilnWaterIn: [],
kilnWaterOut: [],
fan: [],
fireDirection: "南火",
fireDirection: "",
kilnPressure: '00',
fireChangeTime: '00:00:00',
lastFireChangeTime: '0分0秒',