update
Cette révision appartient à :
		| @@ -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" | ||||
|   | ||||
		Référencer dans un nouveau ticket
	
	Bloquer un utilisateur