src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue

@@ -96,8 +96,8 @@ export default {
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: {
-						type: 'shadow'
+						type: 'shadow',
-					}
+					},
 				},
 				legend: {
 					data: this.legend,
@@ -121,29 +121,29 @@ export default {
 							// color: 'red'
 						},
 					},
-					// data: this.xProps,
+					data: this.xProps,
-					data: [
+					// data: [
-						'设备1',
+					// 	'设备1',
-						'设备2',
+					// 	'设备2',
-						'设备3',
+					// 	'设备3',
-						'设备4',
+					// 	'设备4',
-						'设备5',
+					// 	'设备5',
-						'设备6',
+					// 	'设备6',
-						'设备7',
+					// 	'设备7',
-						'设备8',
+					// 	'设备8',
-						'设备9',
+					// 	'设备9',
-						'设备10',
+					// 	'设备10',
-						'设备11',
+					// 	'设备11',
-						'设备12',
+					// 	'设备12',
-						'设备13',
+					// 	'设备13',
-						'设备14',
+					// 	'设备14',
-						'设备15',
+					// 	'设备15',
-						'设备16',
+					// 	'设备16',
-						'设备17',
+					// 	'设备17',
-						'设备18',
+					// 	'设备18',
-						'设备19',
+					// 	'设备19',
-						'设备20',
+					// 	'设备20',
-					],
+					// ],
 				},
 				yAxis: {
 					type: 'value',
@@ -161,95 +161,95 @@ export default {
 				dataZoom: {
 					type: 'inside',
 				},
-				// series: this.series,
+				series: this.series,
-				series: [
+				// series: [
-					{
+				// 	{
-						name: '上片数',
+				// 		name: '上片数',
-						type: 'bar',
+				// 		type: 'bar',
-						// barWidth: 12,
+				// 		// barWidth: 12,
-						data: [
+				// 		data: [
-							10,
+				// 			10,
-							12,
+				// 			12,
-							43,
+				// 			43,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-							12,
+				// 			12,
-							8,
+				// 			8,
-							122,
+				// 			122,
-							0,
+				// 			0,
-							,
+				// 			,
-							43,
+				// 			43,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-							12,
+				// 			12,
-							8,
+				// 			8,
-							122,
+				// 			122,
-							77,
+				// 			77,
-							99,
+				// 			99,
-						],
+				// 		],
-					},
+				// 	},
-					{
+				// 	{
-						name: '下片数',
+				// 		name: '下片数',
-						type: 'bar',
+				// 		type: 'bar',
-						// barWidth: 12,
+				// 		// barWidth: 12,
-						data: [
+				// 		data: [
-							10,
+				// 			10,
-							12,
+				// 			12,
-							43,
+				// 			43,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-							12,
+				// 			12,
-							8,
+				// 			8,
-							122,
+				// 			122,
-							0,
+				// 			0,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-							12,
+				// 			12,
-							8,
+				// 			8,
-							122,
+				// 			122,
-							0,
+				// 			0,
-							,
+				// 			,
-							43,
+				// 			43,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-						],
+				// 		],
-					},
+				// 	},
-					{
+				// 	{
-						name: '检测数',
+				// 		name: '检测数',
-						type: 'bar',
+				// 		type: 'bar',
-						// barWidth: 12,
+				// 		// barWidth: 12,
-						barCategoryGap: 12,
+				// 		barCategoryGap: 12,
-						data: [
+				// 		data: [
-							10,
+				// 			10,
-							12,
+				// 			12,
-							43,
+				// 			43,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-							12,
+				// 			12,
-							8,
+				// 			8,
-							122,
+				// 			122,
-							0,
+				// 			0,
-							,
+				// 			,
-							43,
+				// 			43,
-							4,
+				// 			4,
-							22,
+				// 			22,
-							32,
+				// 			32,
-							32,
+				// 			32,
-							12,
+				// 			12,
-							8,
+				// 			8,
-							122,
+				// 			122,
-							0,
+				// 			0,
-						],
+				// 		],
-					},
+				// 	},
-				],
+				// ],
 			};
 		},
 	},

src/views/quality/monitoring/qualityStatistics/graphPage.vue

@@ -15,7 +15,12 @@
 		</DetailGraph> -->
 		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
 			<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
-		<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
+		<div v-if="!series || series.length == 0" style="color: #777; font-size: 16px; letter-spacing: 1px; text-align: center; padding-top: 56px; text-decoration: underline;">暂无数据</div>
+		<LineGraph
+			v-else
+			:x-props="lineData.xProps"
+			:legend="legend"
+			:series="series" />
 	</div>
 </template>
 
@@ -56,7 +61,8 @@ export default {
 			console.log('this.list', this.lineData.list, this.lineData.xProps);
 			const seriesItem = {
 				name: item.inspectionContent,
-				type: 'line',
+				type: 'bar',
+				barCategoryGap: 12,
 				data: [],
 			};
 

src/views/quality/monitoring/qualityStatistics/index.vue

@@ -99,11 +99,55 @@
 import GraphPage from './graphPage.vue';
 import summaryTable from './components/summaryTable.vue';
 
+class DateGetter {
+	constructor() {
+		this.today = new Date();
+		this.y = this.today.getFullYear();
+		this.m = this.today.getMonth();
+		this.d = this.today.getDate();
+	}
+	getWeekRange() {
+		const weekStart = new Date(this.y, this.m, this.d - this.today.getDay());
+		const weekEnd = new Date(
+			this.y,
+			this.m,
+			this.d + (6 - this.today.getDay()),
+			23,
+			59,
+			59
+		);
+		// console.log('week', [weekStart, weekEnd]);
+		return [weekStart, weekEnd];
+	}
+
+	getMonthRange() {
+		const monthStart = new Date(this.y, this.m, 1);
+		const monthEnd = new Date(this.y, this.m + 1, 0, 23, 59, 59);
+		// console.log('month', [monthStart, monthEnd]);
+		return [monthStart, monthEnd];
+	}
+
+	getQuarterRange() {
+		const quarterStart = new Date(this.y, this.m - (this.m % 3), 1);
+		const quarterEnd = new Date(
+			this.y,
+			this.m - (this.m % 3) + 3,
+			0,
+			23,
+			59,
+			59
+		);
+		// console.log('quarter', [quarterStart, quarterEnd]);
+		return [quarterStart, quarterEnd];
+	}
+}
+
 export default {
 	name: 'QualityStatistics',
 	components: { GraphPage, summaryTable },
 	props: {},
 	data() {
+		const dateGetter = new DateGetter();
 		return {
 			// mode: 'table', // defaults to 'table'
 			activeName: 'table', // defaults to 'table'
@@ -121,6 +165,28 @@ export default {
 					endPlaceholder: '结束日期',
 					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'timerange',
+					pickerOptions: {
+						shortcuts: [
+							{
+								text: '本周',
+								onClick(picker) {
+									picker.$emit('pick', dateGetter.getWeekRange());
+								},
+							},
+							{
+								text: '本月',
+								onClick(picker) {
+									picker.$emit('pick', dateGetter.getMonthRange());
+								},
+							},
+							{
+								text: '本季',
+								onClick(picker) {
+									picker.$emit('pick', dateGetter.getQuarterRange());
+								},
+							},
+						],
+					},
 				},
 				{
 					type: 'button',