数据分析-数据曲线

snowy-admin-web/src/views/motoring/analyse/curve.vue

@@ -1,7 +1,51 @@
 <template>
 	<div class="table_item">
 		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
-			<template #operator> </template>
+			<template #operator>
+				<div class="table-head">
+					<div class="head-left">
+						<a-form
+							ref="searchFormRef"
+							name="advanced_search"
+							layout="inline"
+							:model="searchFormState"
+							class="ant-advanced-search-form"
+						>
+							<a-form-item label="" name="searchKey">
+								<a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
+							</a-form-item>
+
+							<a-form-item label="报警类型" name="type">
+								<a-select v-model:value="searchFormState.type" placeholder="请选择报警类型">
+									<a-select-option value="qst">趋势图</a-select-option>
+								</a-select>
+							</a-form-item>
+
+							<a-form-item label="是否展示全部区间" name="isshow">
+								<a-select v-model:value="searchFormState.isshow" placeholder="请选择是否展示全部区间">
+									<a-select-option value="1">是</a-select-option>
+									<a-select-option value="1">否</a-select-option>
+								</a-select>
+							</a-form-item>
+						</a-form>
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+					<div class="head-right">
+						<a-button>
+							<template #icon><setting-outlined /></template>设置
+						</a-button>
+					</div>
+				</div>
+			</template>
+			<template #headerCell="{ title, column }">
+				<template v-if="column.dataIndex === 'type'">
+					<text>{{ title }}</text>
+					<a-select ref="select" v-model:value="value1" style="width: 250px; margin-left: 10px">
+						<a-select-option value="1">二氧化碳浓度</a-select-option>
+					</a-select>
+				</template>
+			</template>
 		</s-table>
 
 		<div class="item-right">
@@ -25,6 +69,8 @@
 	const unitSearchRef = ref(null)
 	const monitorSearchRef = ref(null)
 
+	const value1 = ref('1') //选择器
+
 	onMounted(() => {
 		unitSearchRef.value.onOpen() //获取单位数据
 		monitorSearchRef.value.onOpen() //获取监控点数据
@@ -37,10 +83,8 @@
 
 	const columns = [
 		{
-			title: '',
-			dataIndex: 'aaa',
-			align: 'center',
-			ellipsis: true
+			title: '采集类型',
+			dataIndex: 'type'
 		}
 	]
 
@@ -75,7 +119,16 @@
 				justify-content: space-between;
 
 				.head-left {
+					width: 90%;
 					display: flex;
+
+					.ant-form-inline {
+						width: 100%;
+
+						.ant-form-item {
+							flex: 1;
+						}
+					}
 				}
 
 				.ant-btn {
@@ -101,13 +154,17 @@
 			}
 		}
 	}
-	:deep(.ant-table-pagination-right) {
-		justify-content: center !important;
-	}
+	// 树形结构的样式
 	:deep(.ant-tree-treenode) {
 		width: 100%;
 		margin-bottom: 5px;
 		border-radius: 5px;
+		padding: 5px 0 !important;
 		border: 1px solid #eaeaea;
 	}
+
+	// 分页居中显示
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
 </style>

snowy-admin-web/src/views/motoring/analyse/daily.vue

@@ -195,7 +195,16 @@
 				justify-content: space-between;
 
 				.head-left {
+					width: 70%;
 					display: flex;
+
+					.ant-form-inline {
+						width: 100%;
+
+						.ant-form-item {
+							flex: 1;
+						}
+					}
 				}
 
 				.ant-btn {
@@ -227,7 +236,7 @@
 		width: 100%;
 		margin-bottom: 5px;
 		border-radius: 5px;
-		padding: 5px 0;
+		padding: 5px 0 !important;
 		border: 1px solid #eaeaea;
 	}