update
This commit is contained in:
lb
父節點
3409e7dd8a
當前提交
776ba572da
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<!-- 窑炉运行时间 -->
|
||||
<Container usage="NumberOrDate">
|
||||
<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
|
||||
<div class="flex flex-col">
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
class="time--item"
|
||||
v-for="(item, index) in time"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">窑炉运行时间</div>
|
||||
</div>
|
||||
</SubContainer>
|
||||
</Container>
|
||||
<!-- 窑炉运行时间 -->
|
||||
<Container usage="NumberOrDate">
|
||||
<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
|
||||
<div class="flex flex-col">
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
class="time--item"
|
||||
v-for="(item, index) in time"
|
||||
:key="index"
|
||||
:value="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">窑炉运行时间</div>
|
||||
</div>
|
||||
</SubContainer>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -23,28 +23,28 @@ import SubContainer from "../layout/SubContainer.vue";
|
||||
import DigitalBox from "../common/DigitalBox.vue";
|
||||
|
||||
export default {
|
||||
name: "KilnRuntime",
|
||||
components: { Container, SubContainer, DigitalBox },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
time: " 天",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getRuntime()
|
||||
setInterval(this.getRuntime, 1000 * 60 * 60);
|
||||
},
|
||||
methods: {
|
||||
getRuntime() {
|
||||
const diff = Date.now() - new Date("2023-5-7 8:00:00");
|
||||
const days = parseInt(diff / 1000 / 60 / 60 / 24);
|
||||
const hours = parseInt(
|
||||
(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
|
||||
);
|
||||
this.time = `${days}天`;
|
||||
},
|
||||
},
|
||||
name: "KilnRuntime",
|
||||
components: { Container, SubContainer, DigitalBox },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
time: " 天",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getRuntime();
|
||||
setInterval(this.getRuntime, 1000 * 60 * 60);
|
||||
},
|
||||
methods: {
|
||||
getRuntime() {
|
||||
const diff = Date.now() - new Date("2023-5-7 8:00:00");
|
||||
const days = parseInt(diff / 1000 / 60 / 60 / 24);
|
||||
const hours = parseInt(
|
||||
(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
|
||||
);
|
||||
this.time = `${days}天`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -52,47 +52,47 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.time {
|
||||
// background: #eee;
|
||||
margin: adjust(12px) 0;
|
||||
// background: #eee;
|
||||
margin: adjust(12px) 0;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time--item:not(:last-child) {
|
||||
margin-right: adjust(8px);
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: adjust(23px);
|
||||
letter-spacing: adjust(4px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: adjust(23px);
|
||||
letter-spacing: adjust(4px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.text::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 12%;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(4px);
|
||||
width: 76%;
|
||||
/* 渐变色 */
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
#6fe2ffc0,
|
||||
#52cbef80,
|
||||
#52cbef30,
|
||||
#52cbef00,
|
||||
transparent
|
||||
);
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 12%;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(4px);
|
||||
width: 76%;
|
||||
/* 渐变色 */
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
#6fe2ffc0,
|
||||
#52cbef80,
|
||||
#52cbef30,
|
||||
#52cbef00,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -73,9 +73,12 @@ export default {
|
||||
this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
|
||||
}, 1000);
|
||||
},
|
||||
kilnPressure: function(val) {
|
||||
this.pressure = val.split("")
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
|
||||
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<span
|
||||
v-for="(val, index) in runtime"
|
||||
:key="index"
|
||||
:class="{ digit: true, dot: press == '.' ? true : false }"
|
||||
:class="{ digit: true, dot: val == '.' ? true : false }"
|
||||
>{{ val }}</span
|
||||
>
|
||||
<span>天</span>
|
||||
@ -21,9 +21,21 @@ export default {
|
||||
runtime: "0012".split(""),
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
mounted() {
|
||||
this.getRuntime();
|
||||
setInterval(this.getRuntime, 1000 * 60 * 60);
|
||||
},
|
||||
methods: {
|
||||
getRuntime() {
|
||||
const diff = Date.now() - new Date("2023-5-7 8:00:00");
|
||||
const days = parseInt(diff / 1000 / 60 / 60 / 24);
|
||||
const hours = parseInt(
|
||||
(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
|
||||
);
|
||||
console.log("days", days);
|
||||
this.runtime = (days + "").padStart(4, "0");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -31,15 +43,15 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.runtime {
|
||||
width: 1920px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.data {
|
||||
padding: 0 32px;
|
||||
padding: 0 32px;
|
||||
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.data > span:not(.dot) {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
></div>
|
||||
<div
|
||||
class="arrow ar-top-right"
|
||||
:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"
|
||||
:class="topRightArrowRolling === '运行' ? 'ar-running' : ''"
|
||||
></div>
|
||||
<div
|
||||
class="arrow ar-bottom-left"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user