| | |
| | | > |
| | | <div class="search_content_text">总查询结果:{{ listData.count }}</div> |
| | | <div class="search_content_text paging"> |
| | | 总页数:{{listData.page }} |
| | | 总页数:{{ listData.page }} |
| | | <el-button |
| | | size="small" |
| | | text |
| | | :icon="DArrowLeft" |
| | | @click="setPageChange(1)" |
| | | class="pagingBtn" |
| | | /> |
| | | <el-button |
| | |
| | | text |
| | | :icon="ArrowLeft" |
| | | class="pagingBtn1" |
| | | @click="setPageChange(2)" |
| | | /> |
| | | <el-input |
| | | class="numInput" |
| | | v-model="listData.pageIndex" |
| | | 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 class="table_childer"> |
| | | <div |
| | | class="table_tr" |
| | | v-for='(item,flag) in tableData' |
| | | 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 class="table_th_x">{{ flag + 1 }}</div> |
| | | <div class="table_th">{{ item.name }}</div> |
| | | </div> |
| | | <!-- <div class="table_tr"> |
| | | |
| | | </div> |
| | | <div class="table_tr"> |
| | | <div class="table_th_x"></div> |
| | | <div class="table_th"></div> |
| | | </div> |
| | | <div class="table_tr"> |
| | | <div class="table_th_x"></div> |
| | | <div class="table_th"></div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </el-collapse-item> |
| | |
| | | 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(""); |
| | |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | }); |
| | | const imageLabel = null; |
| | | const NumhandleChange = (value: number) => {}; |
| | | const handleChange = (val: string[]) => {}; |
| | | const setPoitCannel = () => { |
| | | if (imageLabel) { |
| | | 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/location.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; |
| | | |
| | | const NumhandleChange = (value: number) => { |
| | | console.log(value); |
| | | break; |
| | | } |
| | | setSearchClick(); |
| | | }; |
| | | const handleChange = (val: string[]) => { |
| | | console.log(val); |
| | | }; |
| | | |
| | | const setSearchClose = () => { |
| | | searchFLag.value = false; |
| | | |
| | | searchValue.value = ""; |
| | | setPoitCannel(); |
| | | }; |
| | | const setSearchClick = async () => { |
| | | if (!searchValue) return; |
| | | if (!searchValue.value) return; |
| | | |
| | | var obj = { |
| | | filter: "name like '" + searchValue.value + "'", |
| | | pageIndex: listData.value.pageIndex, |
| | | pageSize: listData.value.pageSize, |
| | | name: "lunarplacenane", |
| | | name: "lunarplacename", |
| | | hasGeom: 1, |
| | | }; |
| | | const data = await dataQuery_selectByPage(obj); |
| | |
| | | return ElMessage(data.msg); |
| | | } |
| | | tableData.value = data.result; |
| | | listData.value.count = data.count; |
| | | listData.value.page = Math.ceil(data.count / 10); |
| | | searchFLag.value = true; |
| | | }; |
| | | |
| | |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .searchBox { |
| | | margin-left: 34px; |
| | | // margin-left: 34px; |
| | | // height: auto; |
| | | position: absolute; |
| | | top: 0; |
| | | right: -270px; |
| | | z-index: 101; |
| | | } |
| | | .searchInput { |
| | | width: 222px; |
| | | width: 243px; |
| | | height: 35px; |
| | | /deep/.el-input__icon { |
| | | color: #d6e4ff; |
| | |
| | | } |
| | | .search_content { |
| | | margin-top: 8px; |
| | | width: 222px; |
| | | width: 243px; |
| | | // background: rgba(7, 8, 14, 0.8); |
| | | border-radius: 4px; |
| | | z-index: 40px; |
| | | .el-collapse, |
| | | /deep/ .el-collapse-item__wrap { |
| | | border: 0; |
| | |
| | | color: #d6e4ff; |
| | | } |
| | | .numInput { |
| | | width: 49px; |
| | | width: 70px; |
| | | height: 23px; |
| | | padding: 0 5px; |
| | | } |
| | |
| | | display: flex; |
| | | background: #000000; |
| | | } |
| | | .table_tr:hover { |
| | | .table_th { |
| | | color: #409eff; |
| | | } |
| | | .table_th_x { |
| | | color: #409eff; |
| | | } |
| | | } |
| | | .table_tr:nth-child(2n) { |
| | | background: #0e151f; |
| | | } |