JT-CIM-API/docs/theme-reco/jtquerypoi.md

---

title: 关键字查询组件

date: 2023-07-17

[[toc]]

1. jt-query-poi 简介

• 通过关键字搜索对应项目与工程，点击定位查询详细项目信息
• 实时返回模糊查询结果，点击搜索按钮查询详细信息

2.Warning

::: warning 注意

• 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台关键字查询组件写法！ :::

3. jt-query-poi API

属性名	说明	类型	是否必须
isDataOnload	控制组件显示隐藏	boolean	否
resultCompleteData	详细数据列表	arr	是
queryDataSource	实时响应数据列表	arr	是

4. jt-query-poi methods API

方法名	说明	类型	是否必须
realtimeQuery	实时查询方法，返回输入值	methods	是
activateQuery	点击查询方法，返回输入值	methods	是
activateQueryInfo	定位详细项目地块位置，返回值option对象，查询表名与id	methods	是

5. 代码示例

<template>
	<transition enter-active-class="animate__animated animate__bounceInLeft" leave-active-class="animate__animated animate__bounceOutLeft">
		<jt-query-poi v-if="isDataOnload" ref="querypoiRef"  @realtimeQuery="realtimeQuery" @activateQuery="activateQuery" @activateQueryInfo="activateQueryInfo" :resultCompleteData="resultCompleteData" :queryDataSource="queryDataSource">
		</jt-query-poi>
	</transition>
</template>

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage,
		ElLoading
	} from 'element-plus';

	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject
	} from "vue";

	import {
		useWidget
	} from "@/common/store/widget"
	const {
		disable,
		currentWidget
	} = useWidget();

	import {
		formattingTime
	} from '@/assets/js/localtime.js';
	import $http from '@/utils/http.js';

	// 按需引入
	import {
		mapWorkQueryResult
	} from '../../../../../map3d-ui/index.js';

	/**
	 * 获取地图对象
	 */
	const getMapInstance = inject("getMapInstance");
	let jtMap3d = getMapInstance();
	let viewer = jtMap3d._viewer;

	//定义子组件实例，名称要和上面的ref相同
	const querypoiRef = ref(null)

	//定义属性
	let isDataOnload = ref(false);
	let queryDataSource = ref([]); //查询数据源
	let resultCompleteData = ref([]) //详细数据源

	onMounted(() => {
		isDataOnload.value = true;
	});

	/**
	 * 执行查询
	 */
	const activateQuery = (keyword) => {
		getAxios({
			tableName: "view_mapquery",
			sqlWhere: " name like '%" + keyword + "%' ",
			orderByField: ''
		}).then(data => {
			resultCompleteData.value = data;//props双向绑定，监听参数变化
			// querypoiRef.value.processingQueryResults(data);//调用组件方法
		})
	}
	/**
	 * 定位某个查询结果
	 */
	const activateQueryInfo = (options) => {

		$http.get('/getGeoJson', {
			tableName: options.tablename,
			sqlWhere: " id = " + options.id,
			orderByField: ''
		}).then(res => {

			if (res.data.features.length >= 1) {
				let features = res.data.features[0]

				//清除定位高亮显示
				mapWorkQueryResult.removeHighlight(viewer);

				var field = res.table;
				var properties = features.properties;
				let geometry = features.geometry;

				let datalist = getTextoption(properties, field)

				let html = "";
				html +=
					"<div style='text-align: left;backfround-color:rgba(61, 198, 205, 0.6);width:300rem;font-family: TTTGB-Medium, sans-serif !important;'>";
				Object.keys(datalist).forEach((res, index) => {
					if (Object.values(datalist)[index]) {
						html +=
							"<div :class=" + `${index}%2==0?'one':'odd'` + ">" +
							"<span style='width:100rem'>" + Object.keys(datalist)[
								index] + "：</span>" +
							"<span>" + Object.values(datalist)[index] + "</span>" +
							"</div>";
					}
				})
				html += "</div>";

				let popupObj = new jtMap3dSDK.PopupWindow.HtmlWindow(viewer, geometry.coordinates[0][0][0],
					"详细信息", html, 20);
				popupObj.activateCloseButton().then(res => {
					//清除定位高亮显示
					mapWorkQueryResult.removeHighlight(viewer);
				});

				//定位高亮
				mapWorkQueryResult.locHighlight(viewer, geometry);

			} else {
				ElMessage("项目信息暂未入库！");
			}
		});
	}

	/**
	 * 联想输入实时查询
	 * 如果想要等数据返回后再执行后面的代码，那么就要使用 async/await
	 */
	async function realtimeQuery(keyword) {

		// 这时queryData会等到异步请求的结果回来后才进行赋值，同时不会执行之后的代码
		const queryData = await getAxios({
			tableName: 'view_mapquery',
			sqlWhere: " name like '" + keyword + "%' ",
			orderByField: ''
		});
		// console.log('查询到的数据', queryData)
		
		queryDataSource.value = queryData;//props双向绑定，监听参数变化
		// querypoiRef.value.processingSearchResults(queryData);//调用组件方法
	}

	/**
	 * 调用查询接口
	 */
	const getAxios = (options) => {
		return new Promise((resolve, reject) => {
			$http.get('/getTableList', options).then(res => {
				resolve(res.data)
			});
		}).catch(err => {
			console.log('log-error', err)
		})
	}

	//匹配对应字段，dataList数据列表，tableList参数配置表
	const getTextoption = (dataList, tableList) => {
		let resultObject = {}
		Object.keys(dataList).forEach((res, index) => {
			tableList.forEach((itemField, idx) => {
				if (itemField.isDisplay === 1) {
					if (Object.keys(dataList)[index] == itemField.fieldName) {
						let fieldDesc = itemField.fieldDescription || itemField.fieldName;
						let fieldVals = Object.values(dataList)[index];
						//日期格式
						if (itemField.fieldType === 1) {
							let time = new Date(fieldVals).getTime();
							fieldVals = formattingTime(time);
						}
						resultObject[fieldDesc] = fieldVals
					}
				}
			})
		})
		return resultObject
	}
</script>