---
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>

```

<style>
    blockquote {
  line-height: 22px;
  border-radius: 5px;
  display: block;
  margin-bottom: 0.8em;
  font-family: "黑体";
  background: rgba(230,162,60,.1) !important;
  border-color: #f56c6c;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
  padding-left: 1em;
}


blockquote p {
  padding-left: 3px; 
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
}

blockquote code {
  background: rgba(230,162,60,.1) !important;
  font-weight: bold;
}
</style>