95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<template>
|
|
<DragabbleContainer class="isolate-area-1">
|
|
<SmallBox2
|
|
v-for="rd in rdata"
|
|
:key="rd.icon"
|
|
:icon="rd.icon"
|
|
:title="rd.title"
|
|
:value="rd.value"
|
|
></SmallBox2>
|
|
</DragabbleContainer>
|
|
</template>
|
|
|
|
<script>
|
|
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: "20分" },
|
|
{ icon: "sand", title: "剩余时间", value: "0" },
|
|
],
|
|
};
|
|
},
|
|
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 {
|
|
if (min > 0) {
|
|
sec = 59
|
|
min -= 1
|
|
} else {
|
|
if (timeFun) clearInterval(timeFun)
|
|
}
|
|
}
|
|
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>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
.isolate-area-1 {
|
|
display: flex;
|
|
|
|
> .small-box-2:not(:last-child) {
|
|
margin: {
|
|
right: adjust(15px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|