gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/SearchFilterDemo.vue

@@ -0,0 +1,412 @@
+<script setup>
+/**
+ * 搜索与筛选演示：
+ * 上半区把 keyword / scope / fields / limit 与 search / searchAsync 摆出来，
+ * 下半区用 setFilter 对比「隐藏数据」和「只找出来」的差别。
+ *
+ * 数据里额外塞了 props.owner 与 symbol 两个字段：前者演示业务字段路径，
+ * 后者演示默认全字段模式会跳过、显式 fields 点名时又能命中的边界口径。
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+
+const OWNERS = ['北城运检', '南城运检', '西城运检']
+const baseData = buildDemoData({ count: 24, channels: 2 })
+const dataset = {
+	...baseData,
+	points: baseData.points.map((point, index) => ({
+		...point,
+		props: {
+			owner: OWNERS[index % OWNERS.length],
+			tag: `BJ-${String(index + 1).padStart(3, '0')}`
+		},
+		symbol: index % 3 === 0 ? 'square' : 'circle'
+	})),
+	lines: baseData.lines.map((line, index) => ({
+		...line,
+		props: { owner: OWNERS[index % OWNERS.length] }
+	}))
+}
+
+const keyword = ref('变电站')
+const scope = ref('all')
+const fieldMode = ref('all')
+const limit = ref(3)
+const useWorker = ref(false)
+const actionText = ref('输入关键字，点同步或异步搜索')
+const filterAction = ref('当前没有筛选条件')
+const searchResult = ref(null)
+const filterResult = ref(null)
+const visibleDataText = ref('未读取')
+const activeFilter = ref('none')
+let view = null
+let requestSeq = 0
+
+const SCOPES = [
+	{ id: 'all', label: '全部三类' },
+	{ id: 'points', label: '只看节点' },
+	{ id: 'lines', label: '只看线路' },
+	{ id: 'channels', label: '只看通道' }
+]
+const FIELD_MODES = [
+	{ id: 'all', label: '全部字段', fields: null },
+	{ id: 'name', label: 'name', fields: ['name'] },
+	{ id: 'owner', label: 'props.owner', fields: ['props.owner'] },
+	{ id: 'symbol', label: '显式 symbol', fields: ['symbol'] }
+]
+const LIMITS = [3, 10, 20, 0]
+const PRESETS = [
+	{ id: 'name', demo: 'search-filter-preset-name', label: '变电站（limit 3）', keyword: '变电站', scope: 'points', field: 'all', limit: 3 },
+	{ id: 'owner', demo: 'search-filter-preset-owner', label: '北城运检（props.owner）', keyword: '北城运检', scope: 'points', field: 'owner', limit: 10 },
+	{ id: 'channel', demo: 'search-filter-preset-channel', label: '甲通道（scope=channels）', keyword: '甲通道', scope: 'channels', field: 'all', limit: 10 },
+	{ id: 'symbol', demo: 'search-filter-preset-symbol', label: 'square（显式 symbol）', keyword: 'square', scope: 'points', field: 'symbol', limit: 10 }
+]
+const FILTERS = [
+	{ id: 'none', demo: 'search-filter-filter-clear', label: '清空筛选', condition: null },
+	{ id: 'voltage', demo: 'search-filter-filter-voltage', label: '节点电压 ≥ 525 kV', condition: { points: { vn_kv: { gte: 525 } }, cascade: 'binding' } },
+	{ id: 'zone', demo: 'search-filter-filter-zone', label: '分区 2 / 4', condition: { points: { zone_name: { in: ['分区 2', '分区 4'] } }, cascade: 'binding' } },
+	{ id: 'loading', demo: 'search-filter-filter-loading', label: '线路负载 ≥ 1', condition: { lines: { max_loading_rate: { gte: 1 } } } }
+]
+const KIND_LABELS = { point: '节点', line: '线路', channel: '通道' }
+
+const scopeLabel = computed(() => SCOPES.find(item => item.id === scope.value)?.label ?? '全部三类')
+const searchSummary = computed(() => {
+	const result = searchResult.value
+	if (!result) {
+		return '还没有搜索'
+	}
+	return `命中 ${result.total} 条：节点 ${result.points.length} / 线路 ${result.lines.length} / 通道 ${result.channels.length}`
+})
+const searchMeta = computed(() => {
+	const result = searchResult.value
+	if (!result) {
+		return `limit=${limit.value} · 还没跑搜索`
+	}
+	const via = result.via === 'async' ? 'searchAsync' : 'search'
+	const worker = result.via === 'async' ? ` · worker=${result.worker ? '是' : '否'}` : ''
+	const stale = result.stale ? ' · stale=true（这一份已作废）' : ''
+	return `${via}${worker} · limit=${limit.value} · truncated=${result.truncated ? '是' : '否'} · ${result.durationMs} ms${stale}`
+})
+const hitRows = computed(() => (searchResult.value?.hits ?? []).slice(0, 6).map((hit, index) => ({
+	key: `${hit.kind}-${hit.index}-${index}`,
+	demo: `search-filter-hit-${index}`,
+	title: `${KIND_LABELS[hit.kind] ?? hit.kind} · ${hit.id ?? `#${hit.index}`}`,
+	detail: `${hit.field} = ${hit.value}`,
+	hit
+})))
+const filterSummary = computed(() => {
+	const result = filterResult.value
+	if (!result) {
+		return 'getFilterResult：当前没有筛选条件'
+	}
+	const hiddenPoints = result.hiddenPoints?.length ?? 0
+	const hiddenLines = result.hiddenLines?.length ?? 0
+	return `getFilterResult：隐藏 ${hiddenPoints} 节点 / ${hiddenLines} 线路 · 可见 ${result.visiblePoints ?? 0} 节点 / ${result.visibleLines ?? 0} 线路`
+})
+const chipClass = active => (active ? 'dv-chip--active' : '')
+
+const buildSearchRequest = () => {
+	const mode = FIELD_MODES.find(item => item.id === fieldMode.value) ?? FIELD_MODES[0]
+	const request = { keyword: keyword.value, limit: limit.value }
+	if (scope.value !== 'all') {
+		request.scope = scope.value
+	}
+	if (mode.fields) {
+		request.fields = [...mode.fields]
+	}
+	return request
+}
+
+const runSearch = async (mode = 'sync') => {
+	if (!view) {
+		return
+	}
+	const seq = (requestSeq += 1)
+	const request = buildSearchRequest()
+	if (mode === 'async') {
+		actionText.value = 'searchAsync 正在计算…'
+		try {
+			const result = await view.searchAsync(request)
+			if (seq !== requestSeq) {
+				return
+			}
+			searchResult.value = { ...result, via: 'async' }
+			actionText.value = result.stale ? '异步搜索返回 stale：这一份结果已作废' : '异步搜索完成：数据量大时这段计算在 Worker 里'
+		}
+		catch (error) {
+			if (seq === requestSeq) {
+				actionText.value = `searchAsync 失败：${error?.message ?? error}`
+			}
+		}
+		return
+	}
+	const result = view.search(request)
+	if (seq !== requestSeq) {
+		return
+	}
+	searchResult.value = { ...result, via: 'sync' }
+	actionText.value = '同步搜索完成：只返回命中，不改筛选与视角'
+}
+const runSync = () => runSearch('sync')
+const runAsync = () => runSearch('async')
+
+const choosePreset = (preset) => {
+	keyword.value = preset.keyword
+	scope.value = preset.scope
+	fieldMode.value = preset.field
+	limit.value = preset.limit
+	runSearch('sync')
+}
+const applyWorker = () => {
+	if (!view) {
+		return
+	}
+	view.updateOptions({ searchWorker: useWorker.value ? { threshold: 30 } : false })
+	actionText.value = useWorker.value
+		? 'searchWorker.threshold=30：这份小数据也会走 Worker'
+		: 'searchWorker=false：searchAsync 退回主线程同步计算'
+}
+const focusHit = (hit) => {
+	view?.focusOn(hit, { select: true })
+	actionText.value = `focusOn(${KIND_LABELS[hit.kind] ?? hit.kind} #${hit.index}, { select: true })`
+}
+const focusAllHits = () => {
+	const hits = searchResult.value?.hits ?? []
+	if (!hits.length) {
+		actionText.value = '当前没有可定位的命中'
+		return
+	}
+	view?.focusOn(hits, { select: true })
+	actionText.value = `focusOn(hits, { select: true })：${hits.length} 条命中一起进包围盒并选中`
+}
+const readVisibleData = () => {
+	if (!view) {
+		return null
+	}
+	const data = view.getVisibleData()
+	visibleDataText.value = `getVisibleData：${data.points.length} 节点 / ${data.lines.length} 线路`
+	return data
+}
+const syncFilterReadout = (result) => {
+	filterResult.value = result
+	nextTick(readVisibleData)
+}
+const applyFilter = (filter) => {
+	if (!view) {
+		return
+	}
+	activeFilter.value = filter.id
+	if (filter.condition) {
+		view.setFilter(filter.condition)
+		filterAction.value = `setFilter：${filter.label}`
+	}
+	else {
+		view.setFilter(null)
+		filterAction.value = 'setFilter(null)：筛选条件已清空'
+	}
+	filterResult.value = view.getFilterResult()
+	readVisibleData()
+}
+
+onMounted(() => {
+	view = createGisView(container.value, {
+		points: dataset.points,
+		lines: dataset.lines,
+		channels: dataset.channels,
+		channelWidth: 2.2,
+		channelInset: 1.6,
+		pointStyle: { size: 8, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.6 },
+		lineStyle: { width: 1.2, color: 'rgba(120, 168, 226, 0.43)' },
+		showGrid: true,
+		gridColor: 'rgba(126, 168, 214, 0.18)',
+		fitPadding: 62,
+		features: 'view',
+		// 默认阈值 20000；这份 demo 只有几十条，勾选后降到 30 才看得到 Worker 路径
+		searchWorker: useWorker.value ? { threshold: 30 } : false,
+		label: {
+			enabled: true,
+			content: '{name}',
+			position: 'top',
+			gap: 6,
+			maxCount: 20,
+			style: { color: '#24415f', fontSize: '10px', background: 'rgba(255, 255, 255, 0.72)' }
+		},
+		onReady: () => {
+			emit('notice', `${dataset.points.length} 节点 / ${dataset.lines.length} 线路，搜索与筛选都是只读口径`)
+		},
+		onFilter: result => syncFilterReadout(result),
+		onWarning: text => {
+			actionText.value = `warning：${text}`
+		}
+	})
+	runSearch('sync')
+	readVisibleData()
+})
+
+onBeforeUnmount(() => {
+	requestSeq += 1
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class='dv-demo'>
+		<div class='dv-stage'>
+			<div ref='container' class='dv-canvas'></div>
+			<div class='dv-toolbar'>
+				<button type='button' @click='view?.fitView(62)'>适应全部</button>
+			</div>
+		</div>
+		<aside class='dv-panel'>
+			<div class='dv-group'>
+				<h3>搜索<span class='dv-chip'>{{ scopeLabel }}</span></h3>
+				<div class='dv-row'>
+					<label class='sf-keyword'>关键字
+						<input v-model='keyword' class='sf-input' data-demo='search-filter-keyword' type='text' @keydown.enter.prevent='runSync' />
+					</label>
+				</div>
+				<div class='dv-row'>
+					<label>范围
+						<select v-model='scope' data-demo='search-filter-scope'>
+							<option v-for='item in SCOPES' :key='item.id' :value='item.id'>{{ item.label }}</option>
+						</select>
+					</label>
+					<label>字段
+						<select v-model='fieldMode' data-demo='search-filter-fields'>
+							<option v-for='item in FIELD_MODES' :key='item.id' :value='item.id'>{{ item.label }}</option>
+						</select>
+					</label>
+					<label>limit
+						<select v-model.number='limit' data-demo='search-filter-limit'>
+							<option v-for='value in LIMITS' :key='value' :value='value'>{{ value === 0 ? '0（不限）' : value }}</option>
+						</select>
+					</label>
+				</div>
+				<div class='dv-row sf-actions'>
+					<button type='button' class='dv-button dv-button--primary' data-demo='search-filter-run' @click='runSync'>同步 search</button>
+					<button type='button' class='dv-button' data-demo='search-filter-run-async' @click='runAsync'>异步 searchAsync</button>
+					<label><input v-model='useWorker' data-demo='search-filter-worker' type='checkbox' @change='applyWorker' /> 低阈值 Worker（30 条）</label>
+				</div>
+				<div class='dv-chips'>
+					<button v-for='preset in PRESETS' :key='preset.id' type='button' class='dv-chip' :data-demo='preset.demo' @click='choosePreset(preset)'>{{ preset.label }}</button>
+				</div>
+				<p class='dv-hint'>显式 fields 能搜默认会跳过的 symbol；搜索基于全量数据，不隐藏、也不自动移动视角。</p>
+				<div class='dv-row'>
+					<button type='button' class='dv-button' data-demo='search-filter-focus-all' @click='focusAllHits'>聚焦并选中全部命中</button>
+				</div>
+				<p class='dv-readout' data-demo='search-filter-summary'>{{ searchSummary }}</p>
+				<p class='dv-readout' data-demo='search-filter-meta'>{{ searchMeta }}</p>
+				<p class='dv-hint' data-demo='search-filter-action'>{{ actionText }}</p>
+				<ul v-if='hitRows.length' class='sf-hits'>
+					<li v-for='row in hitRows' :key='row.key'>
+						<button type='button' class='sf-hit' :data-demo='row.demo' @click='focusHit(row.hit)'>
+							<strong>{{ row.title }}</strong>
+							<span>{{ row.detail }}</span>
+						</button>
+					</li>
+				</ul>
+				<p v-else class='dv-hint'>当前没有命中，换一个关键字或字段再试。</p>
+			</div>
+			<div class='dv-group'>
+				<h3>筛选<span class='dv-chip'>getFilterResult</span></h3>
+				<div class='dv-chips'>
+					<button
+						v-for='filter in FILTERS'
+						:key='filter.id'
+						type='button'
+						class='dv-chip'
+						:class='chipClass(activeFilter === filter.id)'
+						:data-demo='filter.demo'
+						@click='applyFilter(filter)'
+					>{{ filter.label }}</button>
+				</div>
+				<p class='dv-readout' data-demo='search-filter-filter'>{{ filterSummary }}</p>
+				<p class='dv-readout' data-demo='search-filter-visible'>{{ visibleDataText }}</p>
+				<div class='dv-row'>
+					<button type='button' class='dv-button' data-demo='search-filter-read-visible' @click='readVisibleData'>读取 getVisibleData()</button>
+				</div>
+				<p class='dv-hint' data-demo='search-filter-filter-action'>{{ filterAction }}</p>
+			</div>
+			<div class='dv-group'>
+				<h3>两件事别混用</h3>
+				<p class='dv-hint'>search 只把要素找出来，结果带 bounds；要居中就再调 focusOn。setFilter 才会隐藏要素，并从 getVisibleData / listPoints 的可见集合里消失。</p>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.sf-keyword {
+	flex: 1 1 220px;
+}
+
+.sf-keyword .sf-input {
+	flex: 1;
+}
+
+.sf-input {
+	width: 100%;
+	min-width: 150px;
+	padding: 5px 8px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	color: #1f2a44;
+	font-size: 12px;
+}
+
+.sf-actions {
+	align-items: center;
+}
+
+.sf-hits {
+	max-height: 196px;
+	margin: 8px 0 0;
+	padding: 0;
+	overflow: auto;
+	list-style: none;
+}
+
+.sf-hits li + li {
+	margin-top: 5px;
+}
+
+.sf-hit {
+	display: flex;
+	align-items: baseline;
+	gap: 7px;
+	width: 100%;
+	padding: 6px 8px;
+	border: 1px solid #e2e9f2;
+	border-radius: 7px;
+	background: #f8fbff;
+	text-align: left;
+	cursor: pointer;
+}
+
+.sf-hit:hover {
+	border-color: #b7d2ee;
+	background: #eef4fc;
+}
+
+.sf-hit strong {
+	flex: none;
+	color: #2f5e94;
+	font-size: 11.5px;
+	font-weight: 600;
+}
+
+.sf-hit span {
+	min-width: 0;
+	overflow: hidden;
+	color: #71809d;
+	font-size: 11px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>