mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb 2023-07-12 17:12:12 +08:00
parent 3409e7dd8a
commit 776ba572da
4 changed files with 92 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/boxes/KilnRuntime.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<!-- 窑炉运行时间 --> <!-- 窑炉运行时间 -->
<Container usage="NumberOrDate"> <Container usage="NumberOrDate">
<SubContainer title="窑炉运行时间" icon="clock" padding="34px"> <SubContainer title="窑炉运行时间" icon="clock" padding="34px">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="time flex flex-center"> <div class="time flex flex-center">
<DigitalBox <DigitalBox
class="time--item" class="time--item"
v-for="(item, index) in time" v-for="(item, index) in time"
:key="index" :key="index"
:value="item" :value="item"
/> />
</div> </div>
<div class="text">窑炉运行时间</div> <div class="text">窑炉运行时间</div>
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
</template> </template>
<script> <script>
@ -23,28 +23,28 @@ import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue"; import DigitalBox from "../common/DigitalBox.vue";
export default { export default {
name: "KilnRuntime", name: "KilnRuntime",
components: { Container, SubContainer, DigitalBox }, components: { Container, SubContainer, DigitalBox },
props: {}, props: {},
data() { data() {
return { return {
time: " 天", time: " 天",
}; };
}, },
mounted() { mounted() {
this.getRuntime() this.getRuntime();
setInterval(this.getRuntime, 1000 * 60 * 60); setInterval(this.getRuntime, 1000 * 60 * 60);
}, },
methods: { methods: {
getRuntime() { getRuntime() {
const diff = Date.now() - new Date("2023-5-7 8:00:00"); const diff = Date.now() - new Date("2023-5-7 8:00:00");
const days = parseInt(diff / 1000 / 60 / 60 / 24); const days = parseInt(diff / 1000 / 60 / 60 / 24);
const hours = parseInt( const hours = parseInt(
(diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60 (diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
); );
this.time = `${days}天`; this.time = `${days}天`;
}, },
}, },
}; };
</script> </script>
@ -52,47 +52,47 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.time { .time {
// background: #eee; // background: #eee;
margin: adjust(12px) 0; margin: adjust(12px) 0;
} }
.flex-center { .flex-center {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: adjust(8px); margin-right: adjust(8px);
} }
.text { .text {
padding: adjust(12px) 0; padding: adjust(12px) 0;
text-align: center; text-align: center;
font-size: adjust(23px); font-size: adjust(23px);
letter-spacing: adjust(4px); letter-spacing: adjust(4px);
position: relative; position: relative;
z-index: 10; z-index: 10;
user-select: none; user-select: none;
} }
.text::after { .text::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 12%; left: 12%;
bottom: adjust(10px); bottom: adjust(10px);
height: adjust(4px); height: adjust(4px);
width: 76%; width: 76%;
/* 渐变色 */ /* 渐变色 */
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,
#6fe2ffc0, #6fe2ffc0,
#52cbef80, #52cbef80,
#52cbef30, #52cbef30,
#52cbef00, #52cbef00,
transparent transparent
); );
} }
</style> </style>

5
src/components/isolate-area-1/Area.vue
View File

@ -73,9 +73,12 @@ export default {
this.$set(this.rdata[2], "value", `${min}分${sec}秒`); this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
}, 1000); }, 1000);
}, },
kilnPressure: function(val) {
this.pressure = val.split("")
}
}, },
computed: { computed: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]), ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
}, },
}; };
</script> </script>

26
src/components/isolate-area-1/Runtime.vue
View File

@ -5,7 +5,7 @@
<span <span
v-for="(val, index) in runtime" v-for="(val, index) in runtime"
:key="index" :key="index"
:class="{ digit: true, dot: press == '.' ? true : false }" :class="{ digit: true, dot: val == '.' ? true : false }"
>{{ val }}</span >{{ val }}</span
> >
<span>天</span> <span>天</span>
@ -21,9 +21,21 @@ export default {
runtime: "0012".split(""), runtime: "0012".split(""),
}; };
}, },
created() {}, mounted() {
mounted() {}, this.getRuntime();
methods: {}, 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> </script>
@ -31,15 +43,15 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.runtime { .runtime {
width: 1920px; width: 1920px;
} }
.data { .data {
padding: 0 32px; padding: 0 32px;
font-family: zcoolqingkehuangyouti-Regular, sans-serif; font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.data > span:not(.dot) { .data > span:not(.dot) {

2
src/components/layout/Main.vue
View File

@ -21,7 +21,7 @@
></div> ></div>
<div <div
class="arrow ar-top-right" class="arrow ar-top-right"
:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''" :class="topRightArrowRolling === '运行' ? 'ar-running' : ''"
></div> ></div>
<div <div
class="arrow ar-bottom-left" class="arrow ar-bottom-left"