JT-CIM-ZHNY/src/views/Map3d/components/query-keyword.vue

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

	/**
	 * element-plus字体
	 */
	import jt3dNavigation from 'cesium-navigation-es6';
	import {
		Search,
		DArrowRight
	} from '@element-plus/icons-vue';
	import {
		inject
	} from "vue";
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="query-keyword fadein-left">
		<el-input v-model="search.searchKey" placeholder="请输入查询关键字" @change="searchKeyChange" @input="searchKeyChange" clearable>
			<template #append>
				<el-button :icon="Search" @click="btnSearchClick" />
			</template>
		</el-input>
		<div class="autocomplete " v-if="search.searchListShow">
			<ul>
				<li v-for="(item,index) in search.searchCompleteData" :key="index" @click="SearchSelect(index)">
					{{ item }}
				</li>
			</ul>
		</div>
		<div class="query-result" v-if="resultListShow">
			<template v-if="resultCompleteData && resultCompleteData.length">
				<ul>
					<li v-for="(item, i) in resultCompleteData" :key="i" class="query-result__item" @click.stop="flyTo(item)">
						<div class="query-result__context">
							<p class="query-result-text" :title="item.name">
								<span class="query-result-text_num">{{ i + 1 }}</span>
								{{ item.name }}
							</p>
							<p class="query-result-sub">{{ item.label }}</p>
						</div>
						<p class="query-result__more">
							<el-icon>
								<DArrowRight />
							</el-icon>
						</p>
					</li>
				</ul>
				<div class="query-result__page">
					<p class="query-result-allcount">共{{ resultCompleteData.length }}条结果</p>
					<el-pagination layout="prev, pager, next" size="small" :total="resultCompleteData.length" pageSize="1" :simple="true" />
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	export default {
		props: {

		},

		/**
		 * 数据
		 */
		data() {
			return {
				search: {
					searchKey: "", // input框输入的值，用v-model双向绑定
					searchDataList: [], // autocomplete查询数据，一般由后端返回
					searchCompleteData: [], // autocomplete查询到的数据
					searchListShow: false,
				},
				resultCompleteData: [], // 查询结果
				resultListShow: false,
				pagination: {
					size: "small",
					total: 0,
					pageSize: 6,
					simple: true
				}
			}
		},

		/**
		 * 方法
		 */
		methods: {
			/**
			 * 比例尺、指南针
			 */
			initNavigation(jt3d) {
				let options = {};
				// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
				options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
				// options.defaultResetView = Cesium.Cartographic.fromDegrees(103.84,31.15,24000);
				// options.defaultResetView = Cesium.Cartographic.fromDegrees(Cesium.Math.toRadians(103.84),Cesium.Math.toRadians(31.15),Cesium.Math.toRadians(24000));
				options.orientation = {
					heading: Cesium.Math.toRadians(0),
					pitch: Cesium.Math.toRadians(-90),
					roll: 0
				};
			
				//相机延时
				options.duration = 4; //默认为3s
			
				// 用于启用或禁用罗盘。
				options.enableCompass = true;
				// 用于启用或禁用指南针外环。
				options.enableCompassOuterRing = true;
				// 用于启用或禁用缩放控件。
				options.enableZoomControls = true;
				// 用于启用或禁用距离图例。
				options.enableDistanceLegend = false;
			
				//修改重置视图的tooltip
				options.resetTooltip = "重置视图";
				//修改放大按钮的tooltip
				options.zoomInTooltip = "放大";
				//修改缩小按钮的tooltip
				options.zoomOutTooltip = "缩小";
			
				//如需自定义罗盘控件，请看下面的自定义罗盘控件
				new jt3dNavigation(jt3d._viewer, options);
			},
			
			/**
			 * 在 Input 值改变时触发
			 * 当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发
			 */
			searchKeyChange() {
				let _self = this;
				this.search.searchListShow = true;
				this.resultListShow = false;
				let searchRegex = new RegExp(this.search.searchKey, 'i');
				this.search.searchCompleteData = []; // 先把原有的数据清空，重新查询
				if (this.search.searchKey === '') return; //如果什么都没有输入，则不用查找
				this.search.searchDataList.forEach((item) => {
					if (searchRegex.test(item.label)) {
						_self.search.searchCompleteData.push(item.label)
					}
				});
			},

			/**
			 * 选中联想查询数据
			 * @param {Object} index
			 */
			SearchSelect(index) {
				this.search.searchListShow = false;
				console.log(this.search.searchCompleteData[index]);
				this.getSearchData(this.search.searchCompleteData[index]);
			},

			/**
			 * 查询按钮
			 */
			btnSearchClick() {
				if (this.search.searchKey === "") {
					ElMessage("请输入查询关键字");
					return;
				}
				this.getSearchData(this.search.searchKey);
			},

			/**
			 * 数据查询
			 * @param {Object} queryString
			 */
			getSearchData(queryString) {
				let _self = this;
				_self.$http.get('/getTableList', {
					tableName: 'base_sys_role',
					sqlWhere: " label like '%" + queryString + "%'",
					orderByField: ''
				}).then(res => {
					console.log('从服务端搜索数据', res.data)
					_self.resultCompleteData = res.data;
					_self.resultListShow = true;
					_self.search.searchListShow = false;
				});
			}
		},

		mounted() {
			//比例尺、指南针
			this.initNavigation(jt3d);
			let _self = this;
			_self.$http.get('/getTableList', {
				tableName: 'base_sys_role',
				sqlWhere: '',
				orderByField: ''
			}).then(res => {
				console.log('从服务端搜索数据', res.data)
				_self.search.searchDataList = res.data;
			});
		}
	};
</script>

<style lang="scss" scoped>
	$jt3d-text-color:#fff;
	$jt3d-content-color:#fff;

	$jt3d-select-bg:red;

	.query-keyword {
		position: absolute;
		top: 80rem;
		width: 200rem;
		left: 10rem;
		border: 1rem solid rgb(0 44 126 / 100%);

		.el-input {
			--el-input-bg-color: rgb(0 44 126 / 50%);
			--el-input-border-color: rgb(0 44 126 / 50%);
			--el-input-placeholder-color: #fff;

			--el-fill-color-blank: rgb(0 44 126 / 80%);
			--el-text-color-regular: #fff;
			--el-color-primary: #fff --el-border-radius-base:0rem;
			--el-border-radius-base: 0rem;

			.el-button {
				background-color: rgb(0 44 126 / 100%);
				color: #fff;
			}
		}

		.autocomplete {
			--el-fill-color-blank: rgb(0 44 126 / 0%);
		}
	}

	.autocomplete ul {
		font-family: sans-serif;
		position: absolute;
		list-style: none;
		background: rgb(0 44 126 / 30%);
		margin: 0;
		width: 80%;
		margin-top: 1rem;
		margin-left: -1rem;
		border: 1rem solid rgb(0 44 126 / 100%);
	}

	.autocomplete ul li {
		text-decoration: none;
		display: block;
		background: rgb(0 44 126 / 30%);
		color: #fff;
		padding: 5rem;
		margin-left: -40rem;
		text-align: left;
	}

	.autocomplete ul li:hover,
	.autocomplete ul li.focus-list {
		color: white;
		background: #2F9AF7;
	}

	.query-result {
		position: absolute;
		border-top: none;
		padding-bottom: 0rem;
		width: 100%;
		z-index: 100;
		border: 1rem solid rgb(0 44 126 / 100%);
		background: rgb(0 44 126 / 30%);
		margin-left: -1rem;

		--el-fill-color-blank: rgb(0 44 126 / 0%);
		--color: #fff;
		--el-color-primary: #fff;

		.query-result__item {
			height: 80rem;
			padding: 0 10rem;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-left: -40rem;
			text-align: left;

			&:hover {
				// background-color: var(--mars-select-bg);
			}

			.query-result__context {
				flex-grow: 1;
				width: 90%;

				.query-result-text {
					font-size: 16rem;
					width: 200rem;
					font-family: Source Han Sans CN;
					font-weight: 400;
					// color: var($jt3d-text-color);
					color: $jt3d-text-color;

					.query-result-text_num {
						width: 20rem;
						height: 20rem;
						margin-right: 5rem;
						display: inline-block;
						text-align: center;
						background: rgb(0 44 126 / 100%);
					}
				}

				.query-result-sub {
					font-size: 14rem;
					width: 200rem;
					margin-left: 19rem;
					font-family: Source Han Sans CN;
					font-weight: 400;
					// color: var($jt3d-content-color);
					color: $jt3d-content-color;
				}
			}

			.query-result__more {
				font-size: 14rem;
				font-family: Source Han Sans CN;
				font-weight: 400;
				// color: var($jt3d-content-color);
				color: $jt3d-content-color;
			}
		}

		.query-result__page {
			display: flex;
			justify-content: space-between;
			padding: 5rem;

			.query-result-allcount {
				font-size: 14rem;
				// color: var($jt3d-text-color);
				color: $jt3d-text-color;
			}
		}
	}
	
	/* 四个边角样式 */
	// .borderstyle {
	// 	position: relative;
	// 	width: 100%;
	// 	height: 490rem;
	// 	padding: 10rem;
	// 	border: 1rem solid #008aff70 !important;
	// 	background-color: rgba(5, 45, 115, 0.7) !important;
	// 	box-shadow: 0 4rem 15rem 1rem #02213bb3;
	

		.angle-border {
			position: absolute;
			width: 12rem;
			height: 12rem;
		}
	
		.angle-border-blue {
			position: absolute;
			width: 70rem;
			height: 30rem;
		}
	
		.left-top-border {
			top: -2rem;
			left: -2rem;
			border-left: 2rem solid #008affdd;
			border-top: 2rem solid #008affdd;
		}
	
		.right-top-border {
			top: -2rem;
			right: -2rem;
			border-right: 2rem solid #008affdd;
			border-top: 2rem solid #008affdd;
		}
	
		.left-bottom-border {
			bottom: -2rem;
			left: -2rem;
			border-bottom: 2rem solid #FFFFFF;
			border-left: 2rem solid #FFFFFF;
		}
	
		.right-bottom-border {
			bottom: -2rem;
			right: -2rem;
			border-right: 2rem solid #FFFFFF;
			border-bottom: 2rem solid #FFFFFF;
		}
	// }
</style>