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