图层管理属性查询；空间查询下载借款给调试，分屏对比功能修改；

Surpriseplus

2023-08-22 e2c94dcb58b199eb57c164a67f1b038d401063d7

 src/views/layer/attributeList.vue

@@ -1,15 +1,69 @@
<template>
  <div v-drag="true" class="spatialBox">
  <div
    v-drag="true"
    class="spatialBox"
  >
    <!--     v-resizable="'right, bottom'" -->
    <div class="spatialTitle">
      <label>属性</label>
      <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
      <el-icon
        @click="setSpatialClose"
        :size="20"
        style="cursor: pointer"
      >
        <Close />
      </el-icon>
    </div>
    <div class="spatialContent">
      <div>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              v-model="listData.filter"
              type="text"
              placeholder="请选择..."
              disabled
            />
          </el-col>
          <el-col :span="8">
            <el-button
              :icon="Plus"
              type="success"
              @click="dialogVisible = true"
            >高级查询</el-button>
            <el-button
              :icon="Refresh"
              type="info"
              @click="setdialogRefresh"
            >重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="spatialTable">
        <el-table :data="tableData" style="width: 100%; height: 82%">
        <el-table
          :data="tableData"
          style="width: 100%; height: 75%"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70"
          />
          <el-table-column
            label="定位"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-button
                :icon="Location"
                size="small"
                @click.prevent="spaceLocation(scope.$index, scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in attributeData"
            :key="index"
@@ -18,7 +72,7 @@
            show-overflow-tooltip
            align="center"
            :fit="true"
            width="120"
            min-width="120"
          ></el-table-column>
        </el-table>
        <div class="spatialBottom">
@@ -36,6 +90,63 @@
        </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.field"
                :label="item.alias"
                :value="item.field"
              />
            </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>

@@ -51,13 +162,15 @@
  watch,
} from "vue";
import config from "@/assets/js/Map/config";
import { User, Lock, Plus } from "@element-plus/icons-vue";
import { User, Lock, Plus, Location } from "@element-plus/icons-vue";
import { dataQuery_selectByPage, dataQuery_selectFields } from "@/api/api";
import { ElMessage } from "element-plus";
import store from "@/store";

import menuTool from "@/assets/js/Map/menuTool";
import WKT from "terraformer-wkt-parser";
const emits = defineEmits(["spatialClose"]);
const setSpatialClose = () => {
  menuTool.setClearLocation("空间查询");
  emits("spatialClose", false);
};
const dialogVisible = ref(false);
@@ -67,7 +180,7 @@
  count: 0,
  wkt: null,
  hasGeom: 1,

  filter: "",
  name: "",
});
const condOption = ref([]);
@@ -80,12 +193,26 @@
  value: "",
  cut: "",
});
//定位显示
const spaceLocation = (index, row) => {
  var geom = menuTool.decr(row.geom);

  var wkt = WKT.parse(geom);
  menuTool.spaceLocation(wkt);
};
//defineProps 来接收组件的传值
const props = defineProps({
  layerData: Object,
});
const setdialogRefresh = () => {
  listData.value.filter = "";
  listData.value.pageIndex = 1;
  listData.value.pageSize = 10;

  var res = attributeData.value[0];
  conditionChange(res);
  setQueySpatialData();
};
const handleSizeChange = (res) => {
  listData.value.pageSize = res;
  setQueySpatialData();
@@ -97,6 +224,7 @@

//查询列表数据
const setQueySpatialData = async () => {
  listData.value.name = listData.value.name.replaceAll("_", "");
  const data = await dataQuery_selectByPage(listData.value);
  if (data.code != 200) {
    return ElMessage.error("空间查询失败");
@@ -106,22 +234,61 @@
};

const setQueySpatialFields = async () => {
  const data = await dataQuery_selectFields({ name: listData.value.name });
  const data = await dataQuery_selectFields({
    ns: "mn",
    tab: listData.value.name,
  });
  if (data.code != 200) {
    return ElMessage.error("字段查询失败");
  }

  attributeData.value = data.result;

  var std = data.result.filter((res) => {
    if (res.showtype > 0) {
      return res;
    }
  });
  attributeData.value = std;
  fieldOption.value = std;
  conditionChange(data.result[0]);
  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;

  var res = attributeData.value[0];
  conditionChange(res);
  setQueySpatialData();
};
const conditionChange = (res) => {
  formSql.value.value = "";
  formSql.value.field = res.field;
  formSql.value.cut = res.type;
  const type = res.type;

  var type = res.type;
  var std = [];
  if (type == "text" || type == "blob") {
    std = config.conditions[0];
@@ -137,17 +304,20 @@
      value: std[i],
    });
  }
  debugger;
  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();
  if (store.state.tab) {
    listData.value.wkt = "";
    listData.value.name = store.state.tab.tab.replaceAll("moon:", "");
    listData.value.hasGeom = 1;

    setQueySpatialFields();
  }
};

watch(
@@ -158,7 +328,9 @@
  },
  { deep: true }
);
onMounted(() => {});
onMounted(() => {
  startQueryData();
});
</script>

<style lang="less" scoped>