¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div v-drag="true" class="spatialBox"> |
| | | <!-- v-resizable="'right, bottom'" --> |
| | | <div class="spatialTitle"> |
| | | <label>ç©ºé´æ¥è¯¢</label> |
| | | <el-icon @click="setSpatialClose" :size="20"> |
| | | <Close /> |
| | | </el-icon> |
| | | </div> |
| | | <div class="spatialContent"> |
| | | <div class="spatialTable"> |
| | | <el-table :data="tableData" style="width: 100%; height: 73%"> |
| | | <el-table-column |
| | | v-for="(item, index) in attributeData" |
| | | :key="index" |
| | | :label="item.alias" |
| | | :prop="item.field" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | :fit="true" |
| | | width="120" |
| | | ></el-table-column> |
| | | </el-table> |
| | | <div class="spatialBottom"> |
| | | <el-pagination |
| | | v-model:current-page="listData.pageIndex" |
| | | v-model:page-size="listData.pageSize" |
| | | :page-sizes="[10, 20, 100, 200]" |
| | | small="small" |
| | | :disabled="false" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="listData.count" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { |
| | | ref, |
| | | onMounted, |
| | | onBeforeUnmount, |
| | | reactive, |
| | | defineProps, |
| | | defineEmits, |
| | | nextTick, |
| | | } from "vue"; |
| | | import config from "@/assets/js/Map/config"; |
| | | import { User, Lock, Plus } from "@element-plus/icons-vue"; |
| | | import { dataQuery_selectByPage, dataQuery_selectFields } from "@/api/api"; |
| | | import { ElMessage } from "element-plus"; |
| | | import store from "@/store"; |
| | | |
| | | const emits = defineEmits(["SETspatialClose"]); |
| | | const setSpatialClose = () => { |
| | | emits("SETspatialClose", false); |
| | | }; |
| | | const dialogVisible = ref(false); |
| | | const listData = ref({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | count: 0, |
| | | wkt: null, |
| | | hasGeom: 1, |
| | | |
| | | name: "", |
| | | }); |
| | | const condOption = ref([]); |
| | | const fieldOption = ref([]); |
| | | const attributeData = ref([]); |
| | | const tableData = ref([]); |
| | | const formSql = ref({ |
| | | field: "", |
| | | type: "", |
| | | value: "", |
| | | cut: "", |
| | | }); |
| | | const handleSizeChange = (res) => { |
| | | listData.value.pageSize = res; |
| | | setQueySpatialData(); |
| | | }; |
| | | const handleCurrentChange = (res) => { |
| | | listData.value.pageIndex = res; |
| | | setQueySpatialData(); |
| | | }; |
| | | |
| | | //æ¥è¯¢åè¡¨æ°æ® |
| | | const setQueySpatialData = async () => { |
| | | const data = await dataQuery_selectByPage(listData.value); |
| | | if (data.code != 200) { |
| | | return ElMessage.error("ç©ºé´æ¥è¯¢å¤±è´¥"); |
| | | } |
| | | listData.value.count = data.count; |
| | | tableData.value = data.result; |
| | | }; |
| | | |
| | | const setQueySpatialFields = async () => { |
| | | const data = await dataQuery_selectFields({ name: listData.value.name }); |
| | | if (data.code != 200) { |
| | | return ElMessage.error("åæ®µæ¥è¯¢å¤±è´¥"); |
| | | } |
| | | console.log(data); |
| | | attributeData.value = data.result; |
| | | |
| | | console.log(attributeData.value); |
| | | |
| | | conditionChange(data.result[0]); |
| | | setQueySpatialData(); |
| | | }; |
| | | |
| | | const conditionChange = (res) => { |
| | | formSql.value.field = res.field; |
| | | formSql.value.cut = res.type; |
| | | const type = res.type; |
| | | |
| | | var std = []; |
| | | if (type == "text" || type == "blob") { |
| | | std = config.conditions[0]; |
| | | } else if (type == "date" || type == "datetime") { |
| | | std = config.conditions[2]; |
| | | } else { |
| | | std = config.conditions[1]; |
| | | } |
| | | var str = []; |
| | | for (var i in std) { |
| | | str.push({ |
| | | label: std[i], |
| | | value: std[i], |
| | | }); |
| | | } |
| | | condOption.value = str; |
| | | formSql.value.type = std[0]; |
| | | }; |
| | | |
| | | //页é¢åå§å |
| | | const startQueryData = () => { |
| | | listData.value.wkt = store.state.spatialQueryData.wkt; |
| | | listData.value.name = "lunarplacenane"; |
| | | listData.value.hasGeom = 1; |
| | | // |
| | | setQueySpatialFields(); |
| | | }; |
| | | onMounted(() => { |
| | | startQueryData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .spatialBox { |
| | | width: 800px; |
| | | height: 400px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | position: absolute; |
| | | bottom: 5%; |
| | | right: 5%; |
| | | background: rgba(7, 8, 14, 0.8); |
| | | border: 1px solid #d6e4ff; |
| | | z-index: 10; |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | .spatialTitle { |
| | | padding: 10px; |
| | | width: calc(100% - 20px); |
| | | height: 66px; |
| | | color: #d6e4ff; |
| | | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | height: 30px; |
| | | label { |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | .spatialContent { |
| | | height: calc(100% - 10px); |
| | | width: calc(100% - 20px); |
| | | padding: 10px; |
| | | |
| | | .spatialTable { |
| | | margin-top: 10px; |
| | | width: 100%; |
| | | height: calc(100% - 35px); |
| | | position: relative; |
| | | |
| | | .el-table /deep/ .el-table__header-wrapper tr th { |
| | | background-color: rgba(38, 47, 71, 1) !important; |
| | | color: #d6e4ff; |
| | | } |
| | | // ä¿®æ¹æ¯è¡æ ·å¼ï¼ |
| | | .el-table /deep/ .el-table__row { |
| | | background-color: rgba(38, 47, 71, 1) !important; |
| | | color: #d6e4ff; |
| | | } |
| | | .el-table /deep/ .el-table__body tr.current-row > td { |
| | | background-color: rgba(38, 47, 71, 1) !important; |
| | | } |
| | | .el-table /deep/ .el-table__body tr:hover > td { |
| | | background-color: rgba(38, 47, 71, 1) !important; |
| | | } |
| | | // ä¿®æ¹è¡¨æ ¼æ¯è¡è¾¹æ¡çæ ·å¼ï¼ |
| | | .el-table /deep/ td, |
| | | .el-table /deep/ th.is-leaf { |
| | | // border-bottom: 1px solid #409eff; |
| | | // border-right: 1px solid #409eff; |
| | | } |
| | | .el-table /deep/ .el-table__cell { |
| | | padding: 8px 0; |
| | | } |
| | | // è®¾ç½®è¡¨æ ¼æ¯è¡çé«åº¦ï¼ |
| | | .el-table /deep/ .el-table__header tr, |
| | | .el-table /deep/ .el-table__header th { |
| | | height: 50px; |
| | | } |
| | | .el-table__body tr, |
| | | .el-table__body td { |
| | | height: 50px; |
| | | padding: 0; |
| | | } |
| | | // è®¾ç½®è¡¨æ ¼è¾¹æ¡é¢è²ï¼ |
| | | |
| | | .el-table--border::after, |
| | | .el-table--group::after { |
| | | width: 0; |
| | | } |
| | | .el-table::before { |
| | | height: 0; |
| | | } |
| | | } |
| | | } |
| | | .spatialBottom { |
| | | padding: 10px; |
| | | height: 40px; |
| | | } |
| | | |
| | | /deep/.el-pagination button { |
| | | background: transparent; |
| | | color: #d6e4ff; |
| | | } |
| | | /deep/.el-pager li { |
| | | background: transparent; |
| | | color: #d6e4ff; |
| | | } |
| | | /deep/.el-pager li.is-active { |
| | | color: #409eff; |
| | | } |
| | | /deep/.el-pagination__total { |
| | | color: #d6e4ff; |
| | | } |
| | | /deep/.el-pagination__goto { |
| | | color: #d6e4ff; |
| | | } |
| | | /deep/.el-pagination__classifier { |
| | | color: #d6e4ff; |
| | | } |
| | | /deep/.el-input.is-disabled .el-input__wrapper { |
| | | background: transparent !important; |
| | | color: #d6e4ff; |
| | | } |
| | | /deep/.el-input.is-disabled .el-input__inner { |
| | | color: #d6e4ff !important; |
| | | } |
| | | /deep/ .el-dialog { |
| | | background: rgba(7, 8, 14, 0.8); |
| | | border: 1px solid #d6e4ff; |
| | | z-index: 10; |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | } |
| | | /deep/.el-dialog__title { |
| | | color: #d6e4ff !important; |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="less"> |
| | | .el-scrollbar { |
| | | background: rgba(7, 8, 14) !important; |
| | | border: 1px solid #4472cb; |
| | | color: #d6e4ff !important; |
| | | box-shadow: inset 0px 1px 40px 1px rgba(38, 47, 71, 1); |
| | | // .el-dropdown-menu { |
| | | // background: rgba(7, 8, 14, 0.8) !important; |
| | | // } |
| | | .el-select-dropdown__item { |
| | | color: #d6e4ff; |
| | | } |
| | | .el-select-dropdown__item:hover { |
| | | background: rgba(38, 47, 71, 1) !important; |
| | | } |
| | | .el-select-dropdown__item.hover, |
| | | .el-select-dropdown__item:hover { |
| | | background: rgba(38, 47, 71, 1) !important; |
| | | } |
| | | } |
| | | .el-table__header-wrapper { |
| | | border: 1px siolid #409eff; |
| | | } |
| | | </style> |