131 lines
2.9 KiB
Vue
131 lines
2.9 KiB
Vue
<template>
|
|
<DragabbleContainer class="isolate-area-1">
|
|
<div class="data pressure">
|
|
<span>压</span>
|
|
<span>力</span>
|
|
<span
|
|
v-for="(press, index) in pressure"
|
|
:key="index"
|
|
:class="{ digit: true, dot: press == '.' ? true : false }"
|
|
>{{ press }}</span
|
|
>
|
|
<span>Pa</span>
|
|
</div>
|
|
<SmallBox2
|
|
class="data-center"
|
|
v-for="rd in rdata"
|
|
:key="rd.icon"
|
|
:icon="rd.icon"
|
|
:title="rd.title"
|
|
:value="rd.value"
|
|
></SmallBox2>
|
|
<!-- <div class="data runtime">
|
|
<span>运</span>
|
|
<span>行</span>
|
|
<span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
|
|
<span>天</span>
|
|
</div> -->
|
|
</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 {
|
|
pressure: "10.1".split(""),
|
|
runtime: "0012".split(""),
|
|
rdata: [
|
|
// { icon: "temp", title: "车间温度", value: "27℃" },
|
|
{ icon: "fire", title: "当前火向", value: "" },
|
|
{ icon: "clock", title: "换火时间", value: "20分" },
|
|
{ icon: "sand", title: "剩余时间", value: "19分20秒" },
|
|
],
|
|
};
|
|
},
|
|
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);
|
|
},
|
|
kilnPressure: function(val) {
|
|
this.pressure = val.split("")
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
.isolate-area-1 {
|
|
display: flex;
|
|
color: $main-color;
|
|
min-width: 300px;
|
|
align-items: flex-end;
|
|
|
|
> *:not(:last-child) {
|
|
margin: {
|
|
right: 128px;
|
|
}
|
|
}
|
|
|
|
> .data {
|
|
flex-shrink: 0;
|
|
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
> .data > span:not(.dot) {
|
|
/** 边框 */
|
|
background: url("../../assets/digitbox1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: inline-block;
|
|
width: 228px;
|
|
height: 299px;
|
|
color: #0068ffaa;
|
|
font-size: 142px;
|
|
line-height: 328px;
|
|
text-align: center;
|
|
vertical-align: bottom;
|
|
user-select: none;
|
|
}
|
|
|
|
> .data > span.digit {
|
|
/** 数字字体大小 */
|
|
color: #0071ff;
|
|
font-size: 242px;
|
|
line-height: 286px;
|
|
}
|
|
}
|
|
</style>
|