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

---

title: 查询结果展示组件

date: 2023-07-17

[[toc]]

1. jt-queryResult 简介

• 查询结果展示组件

2.Warning

::: warning 注意

• 需要引入useWidget的currentWidget对象，使用deepTree方法处理currentWidget.data.resultData获得treeData数据！
• 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台查询结果组件写法！ :::

3. jt-queryResult API

属性名	说明	类型	是否必须
viewer	视图	obj	是
treeData	展示数据列表	array	是
currentNode	默认第一条数据展开	array	是

4. 代码示例

<jt-popup title="信息展示" :showfooter="false" animationClass="fadein-left" height="400rem" width="800rem" >
	<jt-queryResult ref="queryResultRef" :viewer="viewer" :treeData="treeData" :currentNode="currentNode"></jt-queryResult>
</jt-popup>
<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject
	} from "vue";

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

	import {
		deepTree
	} from "@/utils/deepTree.js";

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

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

	//定义属性
	const treeData = ref([]);
	const currentNode = ref({});
	let isDataOnload = ref(false);

	onMounted(() => {
		treeData.value = deepTree(currentWidget.data.resultData);
		currentNode.value = treeData.value[0].children[0];
		isDataOnload.value = true;
	})
	
	/**
	 * 即将销毁
	 */
	onBeforeUnmount(() => {
		// 释放当前的widget
		disable(currentWidget.name);
	});
</script>