最新样式

snowy-admin-web/src/views/motoring/location/index.vue

@@ -1,12 +1,130 @@
 <template>
-	<div>位置查询</div>
+	<div class="table_item">
+		<div class="table_left">
+			<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入采集名称" />
+			<a-tree
+				:expanded-keys="expandedKeys"
+				:auto-expand-parent="autoExpandParent"
+				:tree-data="gData"
+				@expand="onExpand"
+			>
+				<template #title="{ title }">
+					<span v-if="title.indexOf(searchValue) > -1">
+						{{ title.substring(0, title.indexOf(searchValue)) }}
+						<span style="color: #f50">{{ searchValue }}</span>
+						{{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
+					</span>
+					<span v-else>{{ title }}</span>
+				</template>
+			</a-tree>
+		</div>
+		<div class="table_right">地图</div>
+	</div>
 </template>
-<script setup>
-	onMounted(() => {})
+<script lang="ts" setup>
+	import type { TreeProps } from 'ant-design-vue'
 
-	onBeforeMount(() => {})
+	const x = 3
+	const y = 2
+	const z = 1
+	const genData: TreeProps['treeData'] = []
 
-	// 监听
-	watch()
+	const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
+		const preKey = _preKey || '0'
+		const tns = _tns || genData
+
+		const children = []
+		for (let i = 0; i < x; i++) {
+			const key = `${preKey}-${i}`
+			tns.push({ title: key, key })
+			if (i < y) {
+				children.push(key)
+			}
+		}
+		if (_level < 0) {
+			return tns
+		}
+		const level = _level - 1
+		children.forEach((key, index) => {
+			tns[index].children = []
+			return generateData(level, key, tns[index].children)
+		})
+	}
+	generateData(z)
+
+	const dataList: TreeProps['treeData'] = []
+	const generateList = (data: TreeProps['treeData']) => {
+		for (let i = 0; i < data.length; i++) {
+			const node = data[i]
+			const key = node.key
+			dataList.push({ key, title: key })
+			if (node.children) {
+				generateList(node.children)
+			}
+		}
+	}
+	generateList(genData)
+
+	const getParentKey = (key: string | number, tree: TreeProps['treeData']): string | number | undefined => {
+		let parentKey
+		for (let i = 0; i < tree.length; i++) {
+			const node = tree[i]
+			if (node.children) {
+				if (node.children.some((item) => item.key === key)) {
+					parentKey = node.key
+				} else if (getParentKey(key, node.children)) {
+					parentKey = getParentKey(key, node.children)
+				}
+			}
+		}
+		return parentKey
+	}
+	const expandedKeys = ref<(string | number)[]>([])
+	const searchValue = ref<string>('')
+	const autoExpandParent = ref<boolean>(true)
+	const gData = ref<TreeProps['treeData']>(genData)
+
+	const onExpand = (keys: string[]) => {
+		expandedKeys.value = keys
+		autoExpandParent.value = false
+	}
+
+	watch(searchValue, (value) => {
+		const expanded = dataList
+			.map((item: TreeProps['treeData'][number]) => {
+				if (item.title.indexOf(value) > -1) {
+					return getParentKey(item.key, gData.value)
+				}
+				return null
+			})
+			.filter((item, i, self) => item && self.indexOf(item) === i)
+		expandedKeys.value = expanded
+
+		searchValue.value = value
+		autoExpandParent.value = true
+	})
 </script>
-<style lang="less" scoped></style>
+
+<style lang="less" scoped>
+	.table_item {
+		width: 100%;
+		display: flex;
+		padding: 15px 20px;
+
+		.table_left {
+			width: 25%;
+			padding: 10px;
+			margin-right: 10px;
+			background-color: #ffffff;
+		}
+		.table_right {
+			width: 70%;
+		}
+	}
+	:deep(.ant-card-body) {
+		text-align: center;
+	}
+	:deep(.ant-card-head) {
+		border-bottom: 1px solid #f0f0f0 !important;
+	}
+</style>