| | |
| | | <div |
| | | v-drag="true" |
| | | class="spatialBox" |
| | | v-resizable="'right, bottom'" |
| | | > |
| | | <!-- v-resizable="'right, bottom'" --> |
| | | <div class="spatialTitle"> |
| | | <label>空间查询 </label> |
| | | <label>空间查询</label> |
| | | <el-icon |
| | | @click="setSpatialClose" |
| | | :size="20" |
| | |
| | | <Close /> |
| | | </el-icon> |
| | | </div> |
| | | <div class="spatialContent"> |
| | | <div> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="18"> |
| | | <el-input |
| | | v-model="listData.filter" |
| | | type="text" |
| | | placeholder="请选择..." |
| | | disabled |
| | | /> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-button |
| | | :icon="Plus" |
| | | type="success" |
| | | @click="dialogVisible = true" |
| | | >高级查询</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <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> |
| | | |
| | | <!-- 高级查询 --> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | title="高级查询" |
| | | width="30%" |
| | | :show-close="false" |
| | | :close-on-click-modal="false" |
| | | :close-on-press-escape="false" |
| | | > |
| | | <div> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-select |
| | | v-model="formSql.field" |
| | | class="m-2" |
| | | placeholder="Select" |
| | | @change="setFieldChange($event)" |
| | | > |
| | | <el-option |
| | | v-for="item in fieldOption" |
| | | :key="item.id" |
| | | :label="item.alias" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-select |
| | | v-model="formSql.type" |
| | | class="m-2" |
| | | placeholder="Select" |
| | | > |
| | | <el-option |
| | | v-for="item in condOption" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-input v-model="formSql.value"></el-input> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | |
| | | </div> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false">取消</el-button> |
| | | <el-button |
| | | type="primary" |
| | | @click="setInsertDialog" |
| | | > 添加 </el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | reactive, |
| | | defineProps, |
| | | defineEmits, |
| | | nextTick, |
| | | } from "vue"; |
| | | import { User, Lock } from "@element-plus/icons-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); |
| | | }; |
| | | onMounted(() => {}); |
| | | const dialogVisible = ref(false); |
| | | const listData = ref({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | count: 0, |
| | | wkt: null, |
| | | hasGeom: 1, |
| | | filter: "", |
| | | 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 setInsertDialog = () => { |
| | | if (!formSql.value.value) { |
| | | return ElMessage.error("请输入要查询的参数"); |
| | | } |
| | | dialogVisible.value = false; |
| | | if (listData.value.filter != "") { |
| | | listData.value.filter += " and "; |
| | | } |
| | | const val = null; |
| | | if (formSql.value.cut === "long" || formSql.value.cut === "integer") { |
| | | val = parseInt(formSql.value.value); |
| | | } else if (formSql.value.cut === "double") { |
| | | if (formSql.value.value.indexOf(".") != -1) { |
| | | val = parseInt(formSql.value.value); |
| | | } else { |
| | | val = parseFloat(formSql.value.value).toFixed(1); |
| | | } |
| | | } else if (formSql.value.cut == "date" || formSql.value.cut == "datetime") { |
| | | var time = new Date(formSql.value.value); |
| | | var m = time.getMonth() + 1; |
| | | var d = time.getDate(); |
| | | var y = time.getFullYear(); |
| | | val = "'" + y + "-" + add0(m) + "-" + add0(d) + "'"; |
| | | } else { |
| | | val = "'" + formSql.value.value + "'"; |
| | | } |
| | | listData.value.filter += |
| | | formSql.value.field + " " + formSql.value.type + " " + val; |
| | | debugger; |
| | | // debugger; |
| | | // setFieldChange(attributeData.value[0]); |
| | | }; |
| | | //格式化时间 |
| | | const add0 = (m) => { |
| | | return m < 10 ? "0" + m : m; |
| | | }; |
| | | //查询列表数据 |
| | | 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("字段查询失败"); |
| | | } |
| | | attributeData.value = data.result; |
| | | fieldOption.value = data.result; |
| | | conditionChange(data.result[0]); |
| | | setQueySpatialData(); |
| | | }; |
| | | const setFieldChange = (res) => { |
| | | const val = fieldOption.value; |
| | | const str = []; |
| | | for (var i in val) { |
| | | if (val[i].id === res) { |
| | | str.push(val[i]); |
| | | } |
| | | } |
| | | if (str.length > 0) { |
| | | conditionChange(str[0]); |
| | | } |
| | | }; |
| | | 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> |
| | |
| | | width: 800px; |
| | | height: 400px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | position: absolute; |
| | | top: 5%; |
| | | left: 5%; |
| | | bottom: 5%; |
| | | right: 5%; |
| | | background: rgba(7, 8, 14, 0.8); |
| | | border: 1px solid #d6e4ff; |
| | | z-index: 10; |
| | |
| | | .spatialTitle { |
| | | padding: 10px; |
| | | width: calc(100% - 20px); |
| | | height: 66px; |
| | | color: #d6e4ff; |
| | | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | |
| | | 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> |
| | | <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> |