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

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; align-items: center;
height: adjust(28px); height: adjust(28px);
// background: #eeec; // background: #eeec;
overflow-x: hidden; // overflow-x: hidden;
white-space: pre-wrap; white-space: pre-wrap;
padding-bottom: adjust(2px); padding-bottom: adjust(2px);
} }

View File

@ -15,40 +15,63 @@ import DragabbleContainer from "../layout/DragableContainer.vue";
import SmallBox2 from "../common/SmallBox2.vue"; import SmallBox2 from "../common/SmallBox2.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
let timeFun = null
export default { export default {
name: "IsolateArea--1", name: "IsolateArea--1",
components: { DragabbleContainer, SmallBox2 }, components: { DragabbleContainer, SmallBox2 },
data() { data() {
return { return {
// rdata: [ rdata: [
// // { icon: "temp", title: "", value: "27" }, // { icon: "temp", title: "", value: "27" },
// { icon: "fire", title: "", value: "" }, { icon: "fire", title: "当前火向", value: "" },
// { icon: "clock", title: "", value: "12:21:39" }, { icon: "clock", title: "换火时间", value: "20分" },
// { icon: "sand", title: "", value: "6h" }, { icon: "sand", title: "剩余时间", value: "0" },
// ], ],
}; };
}, },
computed: { watch: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]), fireDirection: function(val) {
rdata() { this.$set(this.rdata[0], 'value', val)
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime || '0分0秒') },
min = +min fireChangeTime: function(val) {
sec = +sec this.$set(this.rdata[1], 'value', val)
let timer = setInterval(() => { },
if (sec) sec -= 1 lastFireChangeTime: function(val) {
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
if (timeFun) clearInterval(timeFun)
timeFun = setInterval(() => {
if (sec > 0) sec -= 1
else { else {
sec = 59 sec = 59
min -= 1 min -= 1
} }
}, 1000); this.$set(this.rdata[2], 'value', `${min}${sec}`)
return [ }, 1000)
// { icon: "temp", title: "", value: "27" },
{ icon: "fire", title: "当前火向", value: this.fireDirection },
{ icon: "clock", title: "换火时间", value: this.fireChangeTime },
{ icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
];
}, },
}, },
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> </script>

View File

@ -3,7 +3,7 @@
<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" v-show="true || fireDirection === '北火'" style=""> <div class="video-bottom" v-show="fireDirection === '北火'" style="">
<video <video
id="1" id="1"
preload="auto" preload="auto"
@ -175,7 +175,7 @@ main {
position: absolute; position: absolute;
// right: adjust(1200px); // right: adjust(1200px);
opacity: 0; opacity: 0;
top: adjust(118px); top: adjust(125px);
width: adjust(150px); width: adjust(150px);
height: adjust(150px); height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat; background: url(../../assets/mirror.png) no-repeat;
@ -188,7 +188,7 @@ main {
position: absolute; position: absolute;
// right: adjust(1200px); // right: adjust(1200px);
opacity: 0; opacity: 0;
top: adjust(118px); top: adjust(125px);
width: adjust(150px); width: adjust(150px);
height: adjust(150px); height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat; background: url(../../assets/mirror.png) no-repeat;
@ -198,9 +198,6 @@ main {
@keyframes mirror-to-left { @keyframes mirror-to-left {
0% { 0% {
opacity: 1;
}
1% {
right: adjust(1200px); right: adjust(1200px);
opacity: 1; opacity: 1;
} }
@ -214,9 +211,6 @@ main {
@keyframes mirror-to-left-2 { @keyframes mirror-to-left-2 {
0% { 0% {
opacity: 1;
}
1% {
right: adjust(1200px); right: adjust(1200px);
opacity: 1; opacity: 1;
} }

View File

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