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

@@ -2,28 +2,128 @@
     filename: index.vue
     author: liubin
     date: 2023-08-04 14:44:58
-    description: 
+    description: 检测统计数据
 -->
 
 <template>
-    <div class="app-container">
-        <h1>Quality Statistics</h1>
-    </div>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+	</div>
 </template>
 
 <script>
 export default {
-    name: "QualityStatistics",
-    components: {},
-    props: {},
-    data() {
-        return {}
-    },
-    computed: {},
-    methods: {},
-}
+	name: 'QualityStatistics',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'checkTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '数据总览',
+					name: 'summary',
+					color: 'text',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '表格版',
+					name: 'tableVersion',
+					color: 'text btn-table',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '图形版',
+					name: 'graphVersion',
+					color: 'text btn-graph',
+				},
+			],
+		};
+	},
+	computed: {},
+	methods: {
+		handleSearchBarBtnClick(btn) {
+			switch (btn.btnName) {
+				case 'search':
+					this.queryParams[key] = btn[key] || null;
+					// this.handleQuery();
+					break;
+                case 'summary':
+                    alert('数据总览')
+                    break;
+                case 'tableVersion':
+                    alert('表格版')
+                    break;
+                case 'graphVersion':
+                    alert('图形版')
+                    break;
+				case 'reset':
+					this.$refs['search-bar'].resetForm();
+					// this.resetQuery();
+					break;
+			}
+		},
+	},
+};
 </script>
 
 <style scoped lang="scss">
+:deep(.searchBar) {
+	.el-button.btn-table {
+		color: rgb(0, 130, 130);
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
 
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(0, 130, 130);
+		}
+	}
+	.el-button.btn-graph {
+		color: rgb(130, 0, 130);
+		border: 1px solid rgb(130, 0, 130);
+		padding: 8px 10px;
+
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(130, 0, 130);
+		}
+	}
+}
 </style>