<template>
|
<div class="searchBox">
|
<div>
|
<el-input
|
v-model="searchValue"
|
class="searchInput"
|
placeholder="请输入地名"
|
>
|
<template #suffix>
|
<el-icon
|
title="清除"
|
@click="setSearchClose"
|
class="el-input__icon"
|
>
|
<Close />
|
</el-icon>
|
</template>
|
<template #prefix>
|
<el-icon
|
@click="setSearchClick"
|
title="查询"
|
class="el-input__icon"
|
>
|
<search />
|
</el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div
|
v-if="searchFLag"
|
class="search_content"
|
>
|
<el-collapse
|
v-model="activeNames"
|
@change="handleChange"
|
>
|
<el-collapse-item
|
title="查询结果"
|
name="1"
|
>
|
<div class="search_content_text">总查询结果:{{ listData.count }}</div>
|
<div class="search_content_text paging">
|
总页数：{{ listData.page }}
|
<el-button
|
size="small"
|
text
|
:icon="DArrowLeft"
|
@click="setPageChange(1)"
|
class="pagingBtn"
|
/>
|
<el-button
|
size="small"
|
text
|
:icon="ArrowLeft"
|
class="pagingBtn1"
|
@click="setPageChange(2)"
|
/>
|
<el-input
|
class="numInput"
|
v-model.number="listData.pageIndex"
|
@change="setInputCahgne"
|
/>
|
<el-button
|
size="small"
|
text
|
:icon="ArrowRight"
|
class="pagingBtn1"
|
@click="setPageChange(3)"
|
/>
|
<el-button
|
size="small"
|
text
|
:icon="DArrowRight"
|
@click="setPageChange(4)"
|
class="pagingBtn"
|
/>
|
</div>
|
<div class="table_box">
|
<div class="table_header">
|
<div class="table_th_x">序号</div>
|
<div class="table_th">地名</div>
|
</div>
|
<div class="table_childer">
|
<div
|
class="table_tr"
|
v-for="(item, flag) in tableData"
|
@click="setPointLocal(item)"
|
>
|
<div class="table_th_x">{{ flag + 1 }}</div>
|
<div class="table_th">{{ item.enName }}</div>
|
</div>
|
</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import {
|
DArrowLeft,
|
ArrowLeft,
|
ArrowRight,
|
DArrowRight,
|
} from "@element-plus/icons-vue";
|
// import config from "../../../public/config/config.js";
|
import { dataQuery_selectByPage } from "@/api/api.js";
|
import { ElMessage } from "element-plus";
|
let searchValue = ref("");
|
const searchFLag = ref(false);
|
const tableData = ref([]);
|
const activeNames = ref(["1"]);
|
const listData = ref({
|
count: 0,
|
page: 0,
|
pageIndex: 1,
|
pageSize: 10,
|
});
|
const imageLabel = null;
|
const NumhandleChange = (value: number) => {};
|
const handleChange = (val: string[]) => {};
|
const setPoitCannel = () => {
|
imageLabel.deleteObject();
|
imageLabel = null;
|
};
|
const setPointLocal = (res) => {
|
if (imageLabel) {
|
setPoitCannel();
|
}
|
var position = { X: res.lon, Y: res.lat, Altitude: 10 };
|
imageLabel = window.sgworld.Creator.CreateImageLabel(
|
position,
|
config.StaticFileBaseUrl + "/Workers/image/mark.png",
|
{},
|
0,
|
"标签点"
|
);
|
var id = imageLabel.item.id;
|
window.sgworld.Navigate.flyToObj(imageLabel.item);
|
// window.earthCtrl.camera.flyTo(res.log, res.lat, 300, 9.5, -45, 0.0, 5);
|
};
|
const setInputCahgne = () => {
|
if (
|
listData.value.pageIndex >= 1 &&
|
listData.value.pageIndex <= listData.value.page
|
) {
|
} else {
|
return ElMessage("输出错误,无法查询");
|
}
|
setSearchClick();
|
};
|
const setPageChange = (res) => {
|
switch (res) {
|
case 1: //查询第一页
|
listData.value.pageIndex = 1;
|
break;
|
case 2: //前一页
|
if (listData.value.pageIndex > 1) {
|
listData.value.pageIndex -= 1;
|
} else {
|
return;
|
}
|
break;
|
case 3: //后一页
|
if (listData.value.pageIndex < listData.value.page) {
|
listData.value.pageIndex += 1;
|
} else {
|
return;
|
}
|
break;
|
case 4: //查询最后一页
|
listData.value.pageIndex = listData.value.page;
|
|
break;
|
}
|
setSearchClick();
|
};
|
|
const setSearchClose = () => {
|
searchFLag.value = false;
|
|
searchValue.value = "";
|
setPoitCannel();
|
};
|
const setSearchClick = async () => {
|
if (!searchValue.value) return;
|
|
var obj = {
|
filter: "name like '" + searchValue.value + "'",
|
pageIndex: listData.value.pageIndex,
|
pageSize: listData.value.pageSize,
|
name: "lunarplacename",
|
hasGeom: 1,
|
};
|
const data = await dataQuery_selectByPage(obj);
|
if (data.code != 200) {
|
return ElMessage(data.msg);
|
}
|
tableData.value = data.result;
|
listData.value.count = data.count;
|
listData.value.page = Math.ceil(data.count / 10);
|
searchFLag.value = true;
|
};
|
|
onMounted(() => {});
|
</script>
|
<style lang="less" scoped>
|
.searchBox {
|
// margin-left: 34px;
|
// height: auto;
|
position: absolute;
|
top: 0;
|
right: -270px;
|
z-index: 101;
|
}
|
.searchInput {
|
width: 243px;
|
height: 35px;
|
/deep/.el-input__icon {
|
color: #d6e4ff;
|
}
|
}
|
.search_content {
|
margin-top: 8px;
|
width: 243px;
|
// background: rgba(7, 8, 14, 0.8);
|
border-radius: 4px;
|
z-index: 40px;
|
.el-collapse,
|
/deep/ .el-collapse-item__wrap {
|
border: 0;
|
background-color: transparent;
|
}
|
/deep/ .el-collapse-item__header {
|
border-radius: 4px 4px 0px 0px;
|
height: 35px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
padding: 10px 20px;
|
box-sizing: border-box;
|
color: #d6e4ff;
|
border: 0;
|
}
|
/deep/ .el-collapse-item__content {
|
background: rgba(7, 8, 14, 0.8);
|
padding: 14px;
|
}
|
|
.search_content_text {
|
font-size: 12px;
|
color: #d6e4ff;
|
}
|
.numInput {
|
width: 70px;
|
height: 23px;
|
padding: 0 5px;
|
}
|
.paging {
|
margin-top: 14px;
|
}
|
.pagingBtn {
|
width: 15px;
|
height: 12px;
|
margin: 0;
|
font-size: 16px;
|
color: RGBA(186, 199, 223, 1);
|
}
|
.pagingBtn1 {
|
width: 8px;
|
height: 12px;
|
margin: 0;
|
padding: 0;
|
font-size: 16px;
|
color: RGBA(186, 199, 223, 1);
|
}
|
.pagingBtn:hover,
|
.pagingBtn1:hover {
|
background: transparent;
|
}
|
.pagingBtn1.is-text:not(.is-disabled):focus,
|
.pagingBtn1.is-text:not(.is-disabled):hover,
|
.pagingBtn.is-text:not(.is-disabled):focus,
|
.pagingBtn.is-text:not(.is-disabled):hover {
|
background: transparent;
|
}
|
.table_box {
|
margin-top: 17px;
|
border-radius: 4px;
|
border: 1px solid #d6e4ff;
|
.table_header {
|
height: 27px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
}
|
.table_th_x {
|
width: 50px;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
font-size: 14px;
|
|
color: #d6e4ff;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
box-sizing: border-box;
|
}
|
.table_th {
|
font-size: 14px;
|
color: #d6e4ff;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
overflow: hidden;
|
}
|
.table_tr {
|
height: 27px;
|
display: flex;
|
background: #000000;
|
}
|
.table_tr:hover {
|
.table_th {
|
color: #409eff;
|
}
|
.table_th_x {
|
color: #409eff;
|
}
|
}
|
.table_tr:nth-child(2n) {
|
background: #0e151f;
|
}
|
}
|
}
|
</style>
|
