月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-07-12 cd09654cd3d8cdcef089ff69c3af8209e0e07ee8
src/views/query/SpatialQuery.vue
@@ -2,10 +2,10 @@
  <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"
@@ -13,6 +13,119 @@
        <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>
@@ -24,13 +137,150 @@
  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>
@@ -38,9 +288,10 @@
  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;
@@ -48,7 +299,9 @@
  .spatialTitle {
    padding: 10px;
    width: calc(100% - 20px);
    height: 66px;
    color: #d6e4ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -57,5 +310,126 @@
      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>