Răsfoiți Sursa

数据分析样式重新调整

like 7 luni în urmă
părinte
comite
fccf8b5ef0

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

@@ -7,92 +7,34 @@
 		<div class="item-right">
 			<!-- 单位 -->
 			<div class="unit">
-				<a-input-search
-					v-model:value="searchValue"
-					style="margin-bottom: 8px"
-					placeholder="请输入单位名称"
-					@search="treeSelect"
-				/>
-				<a-tree
-					v-if="treeData"
-					show-icon
-					v-model:expandedKeys="defaultExpandedKeys"
-					:tree-data="treeData"
-					:field-names="treeFieldNames"
-				>
-					<template #icon="{ parentId }">
-						<template v-if="parentId == '0'">
-							<home-outlined />
-						</template>
-
-						<template v-else>
-							<cluster-outlined />
-						</template>
-					</template>
-				</a-tree>
+				<unitSearch ref="unitSearchRef" />
 			</div>
 			<!-- 监控点 -->
 			<div class="monitor">
-				<div class="monitor-search">
-					<a-input-search
-						v-model:value="searchValue"
-						style="margin-bottom: 8px"
-						placeholder="请输入对象-监控点名称"
-					/><a-button type="link">全选</a-button>
-				</div>
-				<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
-					<a-checkbox v-for="(item, index) in checkboxList" :key="index" :value="item.id" style="width: 100%">{{
-						item.name
-					}}</a-checkbox>
-				</a-checkbox-group>
+				<monitorSearch ref="monitorSearchRef" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-	import tool from '@/utils/tool'
 	import jobApi from '@/api/dev/jobApi'
+	import unitSearch from './unitSearch.vue'
+	import monitorSearch from './monitorSearch.vue'
 
-	const searchValue = ref('') //单位名称搜索字段
-	const treeData = ref([
-		{
-			id: '1',
-			parentId: '0',
-			name: '广州海关技术中心',
-			children: [
-				{ id: '1-1', parentId: '1', name: '广州海关技术中心(生物岛)' },
-				{ id: '1-2', parentId: '1', name: '广州海关技术中心(机场路)' },
-				{ id: '1-3', parentId: '1', name: '广州海关技术中心(花都基地)' },
-				{ id: '1-4', parentId: '1', name: '广州海关技术中心(国家新能源汽车重点实验室科学城基地)' }
-			]
-		},
-		{
-			id: '2',
-			parentId: '0',
-			name: '海南海关技术中心'
-		}
-	]) //单位树形结构
-	const defaultExpandedKeys = ref([]) //  默认展开二级树的节点id
-	// 替换treeNode 中 title,key,children
-	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
-
-	const checkboxValue = ref([]) //监控点搜索字段
-
-	const checkboxList = ref([
-		{ name: '-89度超低温冷冻储存箱-监控点1', id: '1' },
-		{ name: '医用冰箱-监控点1', id: '2' },
-		{ name: '超低温冰箱-监控点1', id: '3' },
-		{ name: '-100度超低温冷冻储存箱-监控点2', id: '4' },
-		{ name: '医用冰箱-监控点2', id: '5' },
-		{ name: '超低温冰箱-监控点2', id: '6' }
-	]) //监控点数据
+	const unitSearchRef = ref(null)
+	const monitorSearchRef = ref(null)
 
+	onMounted(() => {
+		unitSearchRef.value.onOpen() //获取单位数据
+		monitorSearchRef.value.onOpen() //获取监控点数据
+	})
 	const searchFormState = ref({
 		type: 'qst',
 		isshow: '1'
 	})
 	const tableRef = ref()
+
 	const columns = [
 		{
 			title: '',
@@ -115,11 +57,6 @@
 			return obj
 		})
 	}
-
-	// 点击树查询
-	const treeSelect = (selectedKeys) => {
-		console.log(selectedKeys, 'x')
-	}
 </script>
 
 <style lang="less" scoped>
@@ -128,18 +65,22 @@
 		display: flex;
 		padding: 15px 20px;
 
-		.table-head {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.head-left {
+		.table-wrapper {
+			width: 75%;
+			// 搜索及操作按钮区域
+			.table-head {
+				width: 100%;
 				display: flex;
-			}
+				align-items: center;
+				justify-content: space-between;
 
-			.ant-btn {
-				margin-left: 10px;
+				.head-left {
+					display: flex;
+				}
+
+				.ant-btn {
+					margin-left: 10px;
+				}
 			}
 		}
 
@@ -158,11 +99,6 @@
 				border: 1px solid #eaeaea;
 				overflow-y: auto;
 			}
-
-			.unit-head,
-			.monitor-search {
-				display: flex;
-			}
 		}
 	}
 	:deep(.ant-table-pagination-right) {

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

@@ -52,90 +52,32 @@
 		<div class="item-right">
 			<!-- 单位 -->
 			<div class="unit">
-				<a-input-search
-					v-model:value="searchValue"
-					style="margin-bottom: 8px"
-					placeholder="请输入单位名称"
-					@search="treeSelect"
-				/>
-				<a-tree
-					v-if="treeData"
-					show-icon
-					v-model:expandedKeys="defaultExpandedKeys"
-					:tree-data="treeData"
-					:field-names="treeFieldNames"
-				>
-					<template #icon="{ parentId }">
-						<template v-if="parentId == '0'">
-							<home-outlined />
-						</template>
-
-						<template v-else>
-							<cluster-outlined />
-						</template>
-					</template>
-				</a-tree>
+				<unitSearch ref="unitSearchRef" />
 			</div>
 			<!-- 监控点 -->
 			<div class="monitor">
-				<div class="monitor-search">
-					<a-input-search
-						v-model:value="searchValue"
-						style="margin-bottom: 8px"
-						placeholder="请输入对象-监控点名称"
-					/><a-button type="link">全选</a-button>
-				</div>
-				<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
-					<a-checkbox v-for="(item, index) in checkboxList" :key="index" :value="item.id" style="width: 100%">{{
-						item.name
-					}}</a-checkbox>
-				</a-checkbox-group>
+				<monitorSearch ref="monitorSearchRef" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-	import tool from '@/utils/tool'
 	import jobApi from '@/api/dev/jobApi'
+	import unitSearch from './unitSearch.vue'
+	import monitorSearch from './monitorSearch.vue'
 
-	const searchValue = ref('') //单位名称搜索字段
-	const treeData = ref([
-		{
-			id: '1',
-			parentId: '0',
-			name: '广州海关技术中心',
-			children: [
-				{ id: '1-1', parentId: '1', name: '广州海关技术中心(生物岛)' },
-				{ id: '1-2', parentId: '1', name: '广州海关技术中心(机场路)' },
-				{ id: '1-3', parentId: '1', name: '广州海关技术中心(花都基地)' },
-				{ id: '1-4', parentId: '1', name: '广州海关技术中心(国家新能源汽车重点实验室科学城基地)' }
-			]
-		},
-		{
-			id: '2',
-			parentId: '0',
-			name: '海南海关技术中心'
-		}
-	]) //单位树形结构
-	const defaultExpandedKeys = ref([]) //  默认展开二级树的节点id
-	// 替换treeNode 中 title,key,children
-	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
-
-	const checkboxValue = ref([]) //监控点搜索字段
-
-	const checkboxList = ref([
-		{ name: '-89度超低温冷冻储存箱-监控点1', id: '1' },
-		{ name: '医用冰箱-监控点1', id: '2' },
-		{ name: '超低温冰箱-监控点1', id: '3' },
-		{ name: '-100度超低温冷冻储存箱-监控点2', id: '4' },
-		{ name: '医用冰箱-监控点2', id: '5' },
-		{ name: '超低温冰箱-监控点2', id: '6' }
-	]) //监控点数据
-
+	const unitSearchRef = ref(null)
+	const monitorSearchRef = ref(null)
 	const searchFormState = ref({
 		type: 'wd'
 	})
+
+	onMounted(() => {
+		unitSearchRef.value.onOpen() //获取单位数据
+		monitorSearchRef.value.onOpen() //获取监控点数据
+	})
+
 	const tableRef = ref()
 	const columns = [
 		{
@@ -233,11 +175,6 @@
 			return obj
 		})
 	}
-
-	// 点击树查询
-	const treeSelect = (selectedKeys) => {
-		console.log(selectedKeys, 'x')
-	}
 </script>
 
 <style lang="less" scoped>
@@ -246,18 +183,24 @@
 		display: flex;
 		padding: 15px 20px;
 
-		.table-head {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
+		// 表格区域
+		.table-wrapper {
+			width: 75%;
 
-			.head-left {
+			// 搜索及操作按钮区域
+			.table-head {
+				width: 100%;
 				display: flex;
-			}
+				align-items: center;
+				justify-content: space-between;
 
-			.ant-btn {
-				margin-left: 10px;
+				.head-left {
+					display: flex;
+				}
+
+				.ant-btn {
+					margin-left: 10px;
+				}
 			}
 		}
 
@@ -276,20 +219,20 @@
 				border: 1px solid #eaeaea;
 				overflow-y: auto;
 			}
-
-			.unit-head,
-			.monitor-search {
-				display: flex;
-			}
 		}
 	}
-	:deep(.ant-table-pagination-right) {
-		justify-content: center !important;
-	}
+
+	// 树形结构的样式
 	:deep(.ant-tree-treenode) {
 		width: 100%;
 		margin-bottom: 5px;
 		border-radius: 5px;
+		padding: 5px 0;
 		border: 1px solid #eaeaea;
 	}
+
+	// 分页居中显示
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
 </style>

+ 39 - 0
snowy-admin-web/src/views/motoring/analyse/monitorSearch.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="monitor-search">
+		<a-input-search
+			v-model:value="searchValue"
+			style="margin-bottom: 8px"
+			placeholder="请输入对象-监控点名称"
+		/><a-button type="link">全选</a-button>
+	</div>
+	<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
+		<a-checkbox v-for="(item, index) in checkboxList" :key="index" :value="item.id" style="width: 100%">{{
+			item.name
+		}}</a-checkbox>
+	</a-checkbox-group>
+</template>
+
+<script setup>
+	const searchValue = ref('') //单位名称搜索字段
+	const checkboxValue = ref([]) //全选
+	const checkboxList = ref([]) //监控点数据
+	const onOpen = () => {
+		checkboxList.value = [
+			{ name: '-89度超低温冷冻储存箱-监控点1', id: '1' },
+			{ name: '医用冰箱-监控点1', id: '2' },
+			{ name: '超低温冰箱-监控点1', id: '3' },
+			{ name: '-100度超低温冷冻储存箱-监控点2', id: '4' },
+			{ name: '医用冰箱-监控点2', id: '5' },
+			{ name: '超低温冰箱-监控点2', id: '6' }
+		]
+	}
+
+	defineExpose({
+		onOpen
+	})
+</script>
+<style lang="less" scoped>
+	.monitor-search {
+		display: flex;
+	}
+</style>

+ 61 - 0
snowy-admin-web/src/views/motoring/analyse/unitSearch.vue

@@ -0,0 +1,61 @@
+<template>
+	<a-input-search
+		v-model:value="searchValue"
+		style="margin-bottom: 8px"
+		placeholder="请输入单位名称"
+		@search="treeSelect"
+	/>
+	<a-tree
+		v-if="treeData"
+		show-icon
+		v-model:expandedKeys="defaultExpandedKeys"
+		:tree-data="treeData"
+		:field-names="treeFieldNames"
+	>
+		<template #icon="{ parentId }">
+			<template v-if="parentId == '0'">
+				<home-outlined />
+			</template>
+
+			<template v-else>
+				<cluster-outlined />
+			</template>
+		</template>
+	</a-tree>
+</template>
+
+<script setup>
+	const searchValue = ref('') //单位名称搜索字段
+	const treeData = ref([]) //单位树形结构
+	const defaultExpandedKeys = ref([]) //  默认展开二级树的节点id
+	const treeFieldNames = { children: 'children', title: 'name', key: 'id' } // 替换treeNode 中 title,key,children
+	const onOpen = () => {
+		treeData.value = [
+			{
+				id: '1',
+				parentId: '0',
+				name: '广州海关技术中心',
+				children: [
+					{ id: '1-1', parentId: '1', name: '广州海关技术中心(生物岛)' },
+					{ id: '1-2', parentId: '1', name: '广州海关技术中心(机场路)' },
+					{ id: '1-3', parentId: '1', name: '广州海关技术中心(花都基地)' },
+					{ id: '1-4', parentId: '1', name: '广州海关技术中心(国家新能源汽车重点实验室科学城基地)' }
+				]
+			},
+			{
+				id: '2',
+				parentId: '0',
+				name: '海南海关技术中心'
+			}
+		]
+	}
+	// 点击树查询
+	const treeSelect = (selectedKeys) => {
+		console.log(selectedKeys, 'x')
+	}
+
+	defineExpose({
+		onOpen
+	})
+</script>
+<style lang="less" scoped></style>