添加时间

src/assets/icons/svg/arrow.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="·窑炉总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="总览" transform="translate(-1823.000000, -772.000000)">
+            <g id="编组-20备份-5" transform="translate(1786.000000, 764.000000)">
+                <g id="编组-13" transform="translate(37.000000, 8.000000)">
+                    <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+                    <path d="M3.67840479,4.47768215 L12.3215952,4.47768215 C12.87388,4.47768215 13.3215952,4.9253974 13.3215952,5.47768215 C13.3215952,5.70423387 13.2446673,5.92407165 13.1034098,6.1011931 L8.78181462,11.5200015 C8.43745903,11.9517857 7.80827335,12.0226607 7.37648905,11.6783051 C7.31796217,11.6316289 7.2648616,11.5785283 7.21818538,11.5200015 L2.89659016,6.1011931 C2.55223458,5.6694088 2.62310955,5.04022312 3.05489384,4.69586753 C3.23201529,4.55461005 3.45185307,4.47768215 3.67840479,4.47768215 Z" id="路径-2" fill="#03233C"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/databoard/components/DefectChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <NotMsg v-show="notMsg"/>
-    <div id="defectChart" style="width:600px;height:238px;" v-show="!notMsg"></div>
+    <div id="defectChart" style="width:580px;height:238px;" v-show="!notMsg"></div>
   </div>
 </template>
 <script>
@@ -45,6 +45,7 @@ export default {
 				if (this.chartTime === '日') {
           this.tempData = this.israDayStatistic
 					this.updateChart()
+          this.$emit('emitFun')
 				}
 			}
 		},
@@ -53,6 +54,7 @@ export default {
 				if (this.chartTime === '周') {
           this.tempData = this.israWeekStatistic
 					this.updateChart()
+          this.$emit('emitFun')
 				}
 			}
 		},
@@ -61,6 +63,7 @@ export default {
 				if (this.chartTime === '月') {
           this.tempData = this.israMonthStatistic
 					this.updateChart()
+          this.$emit('emitFun')
 				}
 			}
 		},
@@ -69,6 +72,7 @@ export default {
 				if (this.chartTime === '年') {
           this.tempData = this.israYearStatistic
 					this.updateChart()
+          this.$emit('emitFun')
 				}
 			}
 		},

src/views/databoard/components/DefectClassChart.vue

@@ -33,6 +33,7 @@ export default {
           return false
         }
         this.updateChart()
+        this.$emit('emitFun')
 			}
 		},
     chartType: {// 监听类型变化，更新图

src/views/databoard/components/DropDownBtn.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="drop-down-btn">
+		<button class="top-btn" @click='toggleExpand'><span style="margin-right: 3px;">{{active}}</span><svg-icon class-name="arrow" icon-class="arrow" :style="{transform:isExpand?'rotate(180deg)':'rotate(0deg)'}"/></button>
+		<div v-show="isExpand" class="btn-box">
+			<button
+				class="btn"
+				v-for="opt in options"
+				:key="opt"
+				@click="clickBtn(opt)"
+				v-show="active !== opt">
+				<span class="btn-text">
+					{{ opt }}
+				</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DropDownBtn',
+	components: {},
+	props: ['options', 'active'],
+	data() {
+		return {
+			isExpand: false
+		};
+	},
+	computed: {},
+	methods: {
+		clickBtn(opt) {
+			this.$emit('emitFun', opt)
+			this.isExpand = !this.isExpand
+		},
+		toggleExpand() {
+			this.isExpand = !this.isExpand
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.drop-down-btn {
+	z-index: 1000;
+	button {
+		border: none;
+		appearance: none;
+		outline: none;
+		color: #fff;
+		font-size: 14px;
+		padding: 8px 5px 8px 8px;
+		height: 32px;
+	}
+	.top-btn {
+		background: #02457E;
+		border-radius: 5px;
+		cursor: pointer;
+		.arrow {
+			font-size: 16px;
+		}
+	}
+	.btn-box {
+		.btn {
+			display: block;
+			width: 100%;
+			background: #03233C;
+			&:hover {
+				background: #02457E;
+				transition: all 0.5s ease-out;
+			}
+			.btn-text{
+				padding: 0px 5px 6px;
+				border-bottom: 1px solid #010D18;
+			}
+		}
+		.btn:last-child{
+			border-bottom-right-radius: 5px;
+			border-bottom-left-radius: 5px;
+			.btn-text{
+				height: 16px;
+				border-bottom: none;
+			}
+		}
+	}
+}
+</style>

src/views/databoard/components/EnergeMonitoringChart.vue

@@ -30,6 +30,7 @@ export default {
           return false
         }
         this.updateChart()
+        this.$emit('emitFun')
 			}
 		}
   },

src/views/databoard/components/FlueGasChart.vue

@@ -53,6 +53,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '日') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -60,6 +61,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -67,6 +69,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -74,6 +77,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},

src/views/databoard/components/GasChart.vue

@@ -53,6 +53,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周' && this.chartType === '电耗能') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -60,6 +61,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月' && this.chartType === '电耗能') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -67,6 +69,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年' && this.chartType === '电耗能') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -74,6 +77,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartType === '天然气I' || this.chartType === '天然气II') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -242,7 +246,7 @@ export default {
 						.map((_, index) => {
 							const today = new Date();
 							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
-							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+							return `${currentMonth < 10?'0'+currentMonth:currentMonth }.${new Date(
 								dtimestamp
 							).getDate()}`;}).reverse()
 			}else if (this.chartTime == "月") {
@@ -259,7 +263,7 @@ export default {
 				return Array(12)
 						.fill(1)
 						.map((_, index) => {
-							return `${currentYear}.${12 - index}`;}).reverse()
+							return `${12 - index}`;}).reverse()
 			}
 		},
 		isLeapYear(year) {

src/views/databoard/components/Header.vue

@@ -80,7 +80,7 @@ export default {
 	.datetime {
 		position: absolute;
 		top: 45px;
-		right: 240px;
+		right: 425px;
 		color: #fff;
 		font-size: 20px;
 		letter-spacing: 1px;

src/views/databoard/components/ISRAChart.vue

@@ -35,6 +35,7 @@ export default {
 			handler(newVal, oldVal) {
 				this.chartData = newVal || []
 				this.updateChart()
+				this.$emit('emitFun')
 			}
 		}
 	},

src/views/databoard/components/NumRateChart.vue

@@ -30,6 +30,7 @@ export default {
           return false
         }
         this.updateChart()
+        this.$emit('emitFun')
 			}
 		}
   },

src/views/databoard/components/TimePrompt.vue

@@ -0,0 +1,75 @@
+<template>
+	<span
+		style="
+			font-size: 20px;
+			color:#52FFF8;
+		">
+		{{timestr}}
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'TimePrompt',
+	components: {},
+	props: ['timestr'],
+	data() {
+		return {
+			
+		};
+	},
+	// watch: {
+	// 	timestr:{
+	// 		handler(){
+
+	// 		}
+	// 	}
+	// }
+};
+</script>
+
+<style scoped lang="scss">
+.drop-down-btn {
+	z-index: 1000;
+	button {
+		border: none;
+		appearance: none;
+		outline: none;
+		color: #fff;
+		font-size: 14px;
+		padding: 8px 5px 7px 8px;
+		height: 32px;
+	}
+	.top-btn {
+		background: #02457E;
+		border-radius: 5px;
+		cursor: pointer;
+		.arrow {
+			font-size: 16px;
+		}
+	}
+	.btn-box {
+		.btn {
+			display: block;
+			width: 100%;
+			background: #03233C;
+			&:hover {
+				background: #02457E;
+				transition: all 0.5s ease-out;
+			}
+			.btn-text{
+				padding: 0px 5px 6px;
+				border-bottom: 1px solid #010D18;
+			}
+		}
+		.btn:last-child{
+			border-bottom-right-radius: 5px;
+			border-bottom-left-radius: 5px;
+			.btn-text{
+				height: 16px;
+				border-bottom: none;
+			}
+		}
+	}
+}
+</style>

src/views/databoard/components/YieldRateChart.vue

@@ -5,7 +5,6 @@
 <script>
 import * as echarts from 'echarts';
 import resize from './../mixins/resize'
-import { formatDate } from '@/utils'
 
 export default {
 	name: 'GasChart',
@@ -39,6 +38,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '日') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -46,6 +46,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -53,6 +54,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},
@@ -60,6 +62,7 @@ export default {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年') {
 					this.updateChart()
+					this.$emit('emitFun')
 				}
 			}
 		},

src/views/databoard/deepProcessing/DefectSum.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="flex: 1;">
     <Container name="各工序缺陷汇总" size="middle" style="">
+      <TimePrompt class="timeShow" :timestr="timestr" />
       <div style="padding: 5px 10px;">
         <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
       </div>
@@ -9,9 +10,11 @@
 </template>
 <script>
 import Container from '../components/Container.vue';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
   name: 'DefectSum',
-  components: { Container },
+  components: { Container, TimePrompt },
   computed: {
     defectSum() {
       return this.$store.state.websocket.defectSum
@@ -19,6 +22,7 @@ export default {
   },
   data() {
     return {
+      timestr: '',
       config: {
         header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
         headerBGC: 'rgba(32, 55, 96, 0.8)',
@@ -32,6 +36,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.timestr = switchShowTime('日')
+  },
   watch:{
     defectSum: {
 			handler(newVal, oldVal) {
@@ -44,8 +51,16 @@ export default {
       ]);
         this.config.data = outArr
         this.$refs['defectScrollBoard'].updateRows(outArr)
+        this.timestr = switchShowTime('日')
 			}
 		}
   }
 }
 </script>
+<style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 240px;
+}
+</style>

src/views/databoard/deepProcessing/EnergyMonitoring.vue

@@ -1,25 +1,41 @@
 <template>
   <Container name="能源监控" size="large" style="">
+    <TimePrompt class="timeShow" :timestr="timestr" />
     <div class="chart" style="height: 370px; margin-top: 8px;">
-      <EnergeMonitoringChart/>
+      <EnergeMonitoringChart @emitFun='dateUpdate'/>
     </div>
   </Container>
 </template>
 <script>
 import Container from '../components/Container.vue';
 import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
   name: 'EnergyMonitoring',
-  components: { Container, EnergeMonitoringChart },
+  components: { Container, EnergeMonitoringChart, TimePrompt },
   data() {
     return {
+      timestr: ''
     }
   },
+  mounted() {
+    this.timestr = switchShowTime('日')
+  },
   methods: {
+    // 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime('日')
+    }
   }
 }
 </script>
 <style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 18px;
+  left: 170px;
+}
 .timeToggle {
   position: absolute;
   right: 20px;

src/views/databoard/deepProcessing/EqAlarm.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="flex: 1;">
     <Container name="设备报警" size="middle" style="">
+      <TimePrompt class="timeShow" :timestr="timestr" />
       <div style="padding: 5px 10px;">
         <dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
       </div>
@@ -9,9 +10,11 @@
 </template>
 <script>
 import Container from '../components/Container.vue';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
   name: 'EqAlarm',
-  components: { Container },
+  components: { Container, TimePrompt },
   computed: {
     sjgEquipment() {
       return this.$store.state.websocket.sjgEquipment
@@ -19,6 +22,7 @@ export default {
   },
   data() {
     return {
+      timestr: '',
       config: {
         header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
         headerBGC: 'rgba(32, 55, 96, 0.8)',
@@ -44,6 +48,7 @@ export default {
     }
   },
   mounted(){
+    this.timestr = switchShowTime('日')
   },
   watch:{
     sjgEquipment: {
@@ -57,8 +62,16 @@ export default {
       ]);
         this.config.data = outArr
         this.$refs['eqScrollBoard'].updateRows(outArr)
+        this.timestr = switchShowTime('日')
 			}
 		}
   }
 }
 </script>
+<style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 170px;
+}
+</style>

src/views/databoard/deepProcessing/NumRate.vue

@@ -1,25 +1,41 @@
 <template>
   <Container name="产线产量及良品率" size="large" style="">
+    <TimePrompt class="timeShow" :timestr="timestr" />
     <div class="chart" style="height: 370px; margin-top: 8px;">
-      <NumRateChart />
+      <NumRateChart @emitFun='dateUpdate'/>
     </div>
   </Container>
 </template>
 <script>
 import Container from '../components/Container';
 import NumRateChart from '../components/NumRateChart';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
   name: 'NumRate',
-  components: { Container, NumRateChart },
+  components: { Container, NumRateChart, TimePrompt },
   data() {
     return {
+      timestr: ''
     }
   },
+  mounted() {
+    this.timestr = switchShowTime('日')
+  },
   methods: {
+    // 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime('日')
+    }
   }
 }
 </script>
 <style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 265px;
+}
 .timeToggle {
   position: absolute;
   right: 20px;

src/views/databoard/deepProcessing/WorkOrderMonitoring.vue

@@ -1,5 +1,6 @@
 <template>
   <Container name="工单监控" size="middle" style="">
+    <TimePrompt class="timeShow" :timestr="timestr" />
     <div style="padding: 5px 10px;" class="WOMonitoring">
       <dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
     </div>
@@ -7,10 +8,12 @@
 </template>
 <script>
 import Container from '../components/Container.vue';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 import { formatDate } from '@/utils'
 export default {
   name: 'WorkOrderMonitoring',
-  components: { Container },
+  components: { Container, TimePrompt },
   computed: {
     order() {
       return this.$store.state.websocket.workOrder
@@ -18,6 +21,7 @@ export default {
   },
   data() {
     return {
+      timestr: '',
       config: {
         header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
         headerBGC: 'rgba(32, 55, 96, 0.8)',
@@ -30,7 +34,8 @@ export default {
       }
     }
   },
-  methods:{
+  mounted(){
+    this.timestr = switchShowTime('日')
   },
   watch:{
     order: {
@@ -47,8 +52,16 @@ export default {
       ]);
         this.config.data = outArr
         this.$refs['worderScrollBoard'].updateRows(outArr)
+        this.timestr = switchShowTime('日')
 			}
 		}
   }
 }
 </script>
+<style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 170px;
+}
+</style>

src/views/databoard/kiln/EnergeCost.vue

@@ -7,6 +7,7 @@
 
 <template>
 	<Container name="能耗" size="middle" style="">
+		<TimePrompt class="timeShow" :timestr="timestr" />
 		<EnergeTop />
 		<SplitLine :horizontal="true" />
 		<div class="" style="flex: 2; padding: 8px">
@@ -35,7 +36,7 @@
 				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
 			</div>
 			<div class="chart" style="height: 200px; margin-top: 8px;">
-				<GasChart :chartType='chartType' :chartTime='chartTime'/>
+				<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
 			</div>
 		</div>
 	</Container>
@@ -49,6 +50,8 @@ import SplitLine from '../components/line';
 import EnergeTop from './EnergeTop';
 import GasChart from '../components/GasChart.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
 	name: 'EnergeCost',
 	components: {
@@ -58,13 +61,18 @@ export default {
 		EnergeTop,
 		GasChart,
 		SelectorBtnGroup,
+		TimePrompt
 	},
 	props: {},
 	data() {
 		return {
 			chartType:'电耗能',
-			chartTime:'周'
+			chartTime:'周',
+			timestr: ''
 		};
+	},
+	mounted() {
+    this.timestr = switchShowTime(this.chartTime)
   },
 	computed: {
 		gasInfoMsg() {
@@ -74,37 +82,27 @@ export default {
 	methods: {
 		// 切换能源
 		toggleType(val) {
-			console.log('能源' + val)
 			this.chartType = val
-			// if (val === '天然气I' || val === '天然气II') {
-			// 	if (this.chartTime === '周') {
-			// 		this.chartType = val
-			// 	} else {
-			// 		this.$message.warning('暂无数据')
-			// 	}
-			// }else {
-			// 	this.chartType = val
-			// }
 		},
 		// 切换时间
 		toggleDate(val) {
-			console.log('时间' + val)
 			this.chartTime = val
-			// if (val === '月' || val === '年') {
+			this.timestr = switchShowTime(val)
-			// 	if (this.chartType === '电耗能') {
+		},
-			// 		this.chartTime = val
+		// 数据更新
-			// 	} else {
+    dateUpdate() {
-			// 		this.$message.warning('暂无数据')
+      this.timestr = switchShowTime(this.chartTime)
-			// 	}
-			// }else{
-			// 	this.chartTime = val
-			// }
     }
 	},
 };
 </script>
 
 <style scoped lang="scss">
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 120px;
+}
 .lgd {
 	color: #fff;
 

src/views/databoard/kiln/GasHandle.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="gas-handle" style="flex: 2">
 		<Container name="烟气处理" size="large" style="">
+			<TimePrompt class="timeShow" :timestr="timestr" />
 			<div
 				class=""
 				style="
@@ -99,7 +100,7 @@
 					<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
 				</div>
 				<div class="chart" style="height: 250px;margin-top: 10px;">
-					<FlueGasChart :chartType='chartType' :chartTime='chartTime'/>
+					<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
 				</div>
 			</div>
 		</Container>
@@ -113,6 +114,8 @@ import KilnLine from '../components/line';
 // import Switcher from '../components/Switcher';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
 import FlueGasChart from '../components/FlueGasChart';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 
 export default {
 	name: 'GasHandle',
@@ -122,18 +125,23 @@ export default {
 		KilnLine,
 		SelectorBtnGroup,
 		FlueGasChart,
+		TimePrompt
 	},
 	props: {},
 	data() {
 		return {
 			chartType:'氧气含量',
-			chartTime:'日'
+			chartTime:'日',
+			timestr: ''
 		};
 	},
 	computed: {
 		exhaustGasInfo() {
 			return this.$store.state.websocket.exhaustGasInfo
 		}
+	},
+	mounted() {
+    this.timestr = switchShowTime(this.chartTime)
   },
 	methods: {
 		// 烟气
@@ -143,14 +151,23 @@ export default {
 		},
 		// 切换时间
 		toggleDate(val) {
-			console.log('时间' + val)
 			this.chartTime = val
+			this.timestr = switchShowTime(val)
+		},
+		// 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime(this.chartTime)
     }
 	},
 };
 </script>
 
 <style scoped lang="scss">
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 170px;
+}
 .gas-handle {
 }
 

src/views/databoard/kiln/IsraCheck.vue

@@ -1,34 +1,8 @@
-<!-- 
-    filename: IsraCheck.vue
-    author: liubin
-    date: 2023-12-06 09:50:13
-    description: 
--->
 
 <template>
 	<Container name="ISRA缺陷检测" size="middle" style="">
-		<ISRAChart />
+		<TimePrompt class="timeShow" :timestr="timestr" />
-		<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
+		<ISRAChart @emitFun='dateUpdate'/>
-			<div class="f" style="flex: 9;">
-				
-			</div>
-			<ul
-				class="legend"
-				style="
-					flex: 1;
-					padding: 8px;
-					display: flex;
-					justify-content: center;
-					gap: 20px;
-					color: #fff;
-					font-size: 14px;
-				">
-				<li class="fault-1">缺陷1</li>
-				<li class="fault-2">缺陷2</li>
-				<li class="fault-3">缺陷3</li>
-				<li class="fault-4">缺陷4</li>
-			</ul>
-		</div> -->
 	</Container>
 </template>
 
@@ -36,20 +10,36 @@
 import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 import ISRAChart from '../components/ISRAChart.vue';
-
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
 	name: 'IsraCheck',
-	components: { Container, ShadowRect, ISRAChart },
+	components: { Container, ShadowRect, ISRAChart, TimePrompt },
 	props: {},
 	data() {
-		return {};
+		return {
+			timestr: ''
+		};
 	},
 	computed: {},
-	methods: {},
+	mounted() {
+		this.timestr = switchShowTime('日')
+	},
+	methods: {
+		// 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime('日')
+    }
+	},
 };
 </script>
 
 <style scoped lang="scss">
+.timeShow {
+  position: absolute;
+  top: 19px;
+  left: 210px;
+}
 ul,
 li {
 	margin: 0;

src/views/databoard/utils/index.js

@@ -0,0 +1,44 @@
+import moment from "moment";
+export const switchShowTime = (type) => {
+  let nowTime = new Date
+  let startTime = ''
+  let endTime = ''
+  let currentYear = nowTime.getFullYear();
+  let startYear = null
+  switch(type) {
+    case '日':
+      let hour = nowTime.getHours()
+      if (hour > 6) {
+        startTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
+        endTime = moment(moment(nowTime)+86400000).format('yyyy.MM.DD')+' 7点'
+      }else{
+        endTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
+        startTime = moment(moment(nowTime)-86400000).format('yyyy.MM.DD')+' 7点'
+      }
+      return startTime+'-'+endTime
+    case '周':
+      let timestamp = nowTime- 24 * 60 * 60 * 1000
+      endTime = moment(timestamp).format('yyyy.MM.DD')
+      startTime = moment(timestamp-24 * 60 * 60 * 1000 * 6).format('yyyy.MM.DD')
+      return startTime+'-'+endTime
+    case '月':
+      let day = 29;
+      let lastMonth = nowTime.getMonth() === 0 ? 12 : nowTime.getMonth();
+      if (lastMonth === 2) {
+        day = isLeapYear(currentYear) ? 29 : 28;
+      }
+      if (lastMonth === 12) {
+        startYear = currentYear - 1
+      }
+      startTime = startYear+'.'+lastMonth+'.'+day
+      endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
+      return startTime+'-'+endTime
+    default:// 年
+      startTime = (currentYear - 1)+'.12.29'
+      endTime = currentYear+'.12.28'
+      return startTime+'-'+endTime
+  }
+}
+const isLeapYear = (year) => {
+  return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
+}

src/views/databoard/wholePlant/DefectClass.vue

@@ -1,36 +1,51 @@
 <template>
   <Container name="产线当日缺陷分类" size="middle">
-    <SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
+    <TimePrompt class="timeShow" :timestr="timestr" />
+    <DropDownBtn class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
     <div class="chart" style="height: 375px; margin-top: 8px;">
-      <DefectClassChart :chartType='chartType'/>
+      <DefectClassChart :chartType='chartType' @emitFun='dateUpdate'/>
     </div>
   </Container>
 </template>
 <script>
 import Container from '../components/Container';
-import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import DropDownBtn from '../components/DropDownBtn';
 import DefectClassChart from '../components/DefectClassChart';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils'
 export default {
   name: 'DefectClass',
-  components: { Container, SelectorBtnGroup, DefectClassChart },
+  components: { Container, DropDownBtn, DefectClassChart, TimePrompt },
   data() {
     return {
-      chartType:'Y61'
+      chartType:'Y61',
+      timestr: ''
     }
   },
+  mounted() {
+    this.timestr = switchShowTime('日')
+  },
   methods: {
     // 切换产线
 		toggleType(val) {
-			console.log('产线' + val)
 			this.chartType = val
+		},
+    // 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime('日')
     }
   }
 }
 </script>
 <style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 18px;
+  left: 260px;
+}
 .typeToggle {
   position: absolute;
   right: 20px;
-  top: 30px;
+  top: 15px;
 }
 </style>

src/views/databoard/wholePlant/DefectStatistics.vue

@@ -1,38 +1,54 @@
 <template>
   <div style="flex: 1;">
     <Container name="产线缺陷统计" size="small">
-        <SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
+        <TimePrompt class="timeShow" :timestr="timestr" />
+        <DropDownBtn class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
         <div class="chart" style="height: 238px; margin-top: 8px;">
-          <DefectChart :chartTime='chartTime'/>
+          <DefectChart :chartTime='chartTime' @emitFun='dateUpdate'/>
         </div>
       </Container>
   </div>
 </template>
 <script>
 import Container from '../components/Container';
-import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import DropDownBtn from '../components/DropDownBtn';
+import TimePrompt from '../components/TimePrompt';
 import DefectChart from '../components/DefectChart';
+import { switchShowTime } from '../utils'
 export default {
   name: 'DefectStatistics',
-  components: { Container, SelectorBtnGroup, DefectChart },
+  components: { Container, DropDownBtn, DefectChart, TimePrompt },
   data() {
     return {
-      chartTime:'日'
+      chartTime:'日',
+      timestr: ''
     }
   },
+  mounted() {
+    this.timestr = switchShowTime(this.chartTime)
+  },
   methods: {
     // 切换时间
 		toggleDate(val) {
-			console.log('时间' + val)
 			this.chartTime = val
+      this.timestr = switchShowTime(val)
+		},
+    // 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime(this.chartTime)
     }
   }
 }
 </script>
 <style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 210px;
+}
 .timeToggle {
   position: absolute;
   right: 20px;
-  top: 20px;
+  top: 15px;
 }
 </style>

src/views/databoard/wholePlant/OrderStatus.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="flex: 1;" class="orderContainer">
     <Container name="订单完成情况" size="small" style="">
+      <TimePrompt class="timeShow" :timestr="timestr" />
       <div style="padding: 5px 10px;">
         <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
       </div>
@@ -9,10 +10,12 @@
 </template>
 <script>
 import Container from '../components/Container'
+import TimePrompt from '../components/TimePrompt';
 import { formatDate } from '@/utils'
+import { switchShowTime } from '../utils'
 export default {
   name: 'OrderStatus',
-  components: { Container },
+  components: { Container, TimePrompt },
   computed: {
     order() {
       return this.$store.state.websocket.order
@@ -20,6 +23,7 @@ export default {
   },
   data() {
     return {
+      timestr: '',
       config: {
         header: ['上线时间', '客户名称', '规格','完成度'],
         headerBGC: 'rgba(32, 55, 96, 0.8)',
@@ -31,7 +35,9 @@ export default {
       }
     }
   },
-  mounted() {},
+  mounted() {
+    this.timestr = switchShowTime('日')
+  },
   watch:{
     order:{
       handler() {
@@ -49,8 +55,16 @@ export default {
       ]);
       this.config.data = outArr
       this.$refs['orderScrollBoard'].updateRows(outArr)
+      this.timestr = switchShowTime('日')
       }
     }
   }
 }
 </script>
+<style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 210px;
+}
+</style>

src/views/databoard/wholePlant/YieldRate.vue

@@ -1,5 +1,6 @@
 <template>
     <Container name="本日生产良品率" size="large">
+      <TimePrompt class="timeShow" :timestr="timestr" />
       <div style="padding: 5px 10px;">
         <dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
       </div>
@@ -22,7 +23,7 @@
           </div>
         </div>
         <div class="chart" style="height: 230px;">
-          <YieldRateChart :chartTime='chartTime' :chartType='chartType'/>
+          <YieldRateChart :chartTime='chartTime' :chartType='chartType' @emitFun='dateUpdate'/>
         </div>
       </div>
     </Container>
@@ -33,10 +34,12 @@ import ScrollBoard from '../components/ScrollBoard'
 import KilnLine from '../components/line'
 import Switcher from '../components/Switcher'
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
-import YieldRateChart from '../components/YieldRateChart'
+import YieldRateChart from '../components/YieldRateChart';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils';
 export default {
   name: 'YieldRate',
-  components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
+  components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart, TimePrompt },
   computed: {
     yieldRateTable() {
       return this.$store.state.websocket.yieldRateTable
@@ -55,7 +58,8 @@ export default {
         rowNum: 5
       },
       chartType:false,
-      chartTime: "日"
+      chartTime: "日",
+      timestr: ""
     }
   },
   watch:{
@@ -73,6 +77,9 @@ export default {
 			}
 		}
   },
+  mounted() {
+    this.timestr = switchShowTime(this.chartTime)
+  },
   methods: {
     changeType(val) {
       this.chartType = val
@@ -80,11 +87,21 @@ export default {
     // 切换时间
 		toggleDate(val) {
 			this.chartTime = val
+      this.timestr = switchShowTime(this.chartTime)
+		},
+    // 数据更新
+    dateUpdate() {
+      this.timestr = switchShowTime(this.chartTime)
     }
   }
 }
 </script>
 <style lang='scss' scoped>
+.timeShow {
+  position: absolute;
+  top: 20px;
+  left: 235px;
+}
 .lgd {
 	color: #fff;