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

Surpriseplus

2023-08-22 e2c94dcb58b199eb57c164a67f1b038d401063d7

 src/views/query/SpatialQuery.vue

@@ -6,12 +6,22 @@
    <!--     v-resizable="'right, bottom'" -->
    <div class="spatialTitle">
      <label>空间查询</label>
      <el-icon
        @click="setSpatialClose"
        :size="20"
      >
        <Close />
      </el-icon>
      <div>
        <el-icon
          @click="setSpatialDownload"
          :size="20"
          style="margin-right: 20px;"
        >
          <Download />
        </el-icon>
        <el-icon
          @click="setSpatialClose"
          :size="20"
        >
          <Close />
        </el-icon>

      </div>
    </div>
    <div class="spatialContentBox">
      <div class="spatialMenu">
@@ -54,6 +64,26 @@
            :data="tableData"
            style="width: 100%; height: 73%;"
          >
            <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"
@@ -104,9 +134,9 @@
            >
              <el-option
                v-for="item in fieldOption"
                :key="item.id"
                :key="item.field"
                :label="item.alias"
                :value="item.id"
                :value="item.field"
              />
            </el-select>
          </el-col>
@@ -141,11 +171,89 @@
        </span>
      </template>
    </el-dialog>

    <!-- 下载信息 -->
    <el-dialog
      v-model="downloaVisible"
      title="下载"
      width="30%"
    >
      <div
        class="spatialTable"
        style="max-height: 40vh;"
      >
        <el-table
          :data="downTable"
          @selection-change="handleSelectionChange"
          style="width: 100%; height: 73%;"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70"
          />
          <el-table-column
            align="center"
            label="表名"
            prop="cnName"
          />
        </el-table>
        <el-form
          ref="downFormRef"
          class="setdownFrom"
          :model="downFrom"
          :rules="rules"
          label-width="180px"
        >
          <el-form-item
            label="请输入密码:"
            prop="pass"
          >
            <el-input
              type="password"
              v-model="downFrom.pass"
              autocomplete="off"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="请再次输入密码:"
            prop="repass"
          >
            <el-input
              type="password"
              show-password
              v-model="downFrom.repass"
              autocomplete="off"
              placeholder="请再次输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="submitForm(downFormRef)"
            >提交</el-button>
            <el-button size="small">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <iframe
      id="Iframe1"
      src=""
      style="display: none; border: 0; padding: 0; height: 0; width: 0"
    ></iframe>
  </div>
</template>

<script lang="ts" setup>
window.encrypt = null;
import {
  ref,
  onMounted,
@@ -155,16 +263,27 @@
  defineEmits,
  nextTick,
} from "vue";
import menuTool from "@/assets/js/Map/menuTool";
import config from "@/assets/js/Map/config";
import { User, Lock, Plus, Refresh } from "@element-plus/icons-vue";
import { dataQuery_selectByPage, dataQuery_selectFields } from "@/api/api";
import { User, Lock, Plus, Refresh, Location } from "@element-plus/icons-vue";
import {
  dataQuery_selectByPage,
  dataQuery_selectFields,
  dataQuery_downloadDbData,
  sign_getPublicKey,
} from "@/api/api";
import { ElMessage } from "element-plus";
import store from "@/store";

import WKT from "terraformer-wkt-parser";
import type { FormInstance, FormRules } from "element-plus";
import { removeToken, getToken } from "@/utils/auth";
import JSEncrypt from "jsencrypt";
const emits = defineEmits(["SETspatialClose"]);
const setSpatialClose = () => {
  menuTool.setClearLocation("空间查询");
  emits("SETspatialClose", false);
};
var encrypt = new JSEncrypt();
const dialogVisible = ref(false);
const listData = ref({
  pageIndex: 1,
@@ -175,18 +294,142 @@
  filter: "",
  name: "",
});

const condOption = ref([]);
const fieldOption = ref([]);
const attributeData = ref([]);
const tableData = ref([]);
const menuList = ref([]);
const downTable = ref([]);
const formSql = ref({
  field: "",
  type: "",
  value: "",
  cut: "",
});
const downloaVisible = ref(false);
const isActive = ref(null);
const multipleSelection = ref([]);
const downFormRef = ref<FormInstance>();
const downFrom = ref({
  pass: "",
  repass: "",
});

const validatepass = (rule: any, value: any, callback: any) => {
  var passwordreg =
    /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
  if (!passwordreg.test(value)) {
    callback(new Error("密码必须由数字、字母、特殊字符组合,请输入13-20位"));
  } else {
    callback();
  }
};
const validaterepass = (rule: any, value: any, callback: any) => {
  var passwordreg =
    /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
  if (!passwordreg.test(value)) {
    callback(new Error("密码必须由数字、字母、特殊字符组合,请输入13-20位"));
  } else if (value != downFrom.value.pass) {
    callback(new Error("两次输入密码不一致,请重新输入"));
  } else {
    callback();
  }
};
const rules = reactive<FormRules<typeof downFrom>>({
  pass: [{ validator: validatepass, trigger: "blur" }],
  repass: [{ validator: validaterepass, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      if (multipleSelection.value.length <= 0) {
        ElMessage.error("请选择要下载的表");
      } else {
        setDownLoadFrom();
      }
    } else {
      console.log("erro submit!");
      return false;
    }
  });
};
const getpublickey = async () => {
  const res = await sign_getPublicKey();
  if (res && res.code == 200) {
    encrypt.setPublicKey(res.result);
  }
};
const setDownLoadFrom = async () => {
  downloaVisible.value = false;
  var entities = [];
  var tabs = [];

  for (var i in multipleSelection.value) {
    var tab = multipleSelection.value[i].tab;
    if (tab.indexOf("moon:") > -1) {
      tab = tab.replaceAll("moon:", "");
    }
    tabs.push(tab);
    var entity = tab;
    if (entity.indexOf("_") > -1) {
      entity = entity.replaceAll("_", "");
    }
    entities.push(entity);
  }

  var obj = {
    pwd: encrypt.encrypt(downFrom.value.pass),
    filter: listData.value.filter,
    tabs: tabs,
    entities: entities,
    wkt: listData.value.wkt,
  };
  const data = await dataQuery_downloadDbData(obj);

  if (data.code != 200 && !data.result) {
    setClearDownload();
    return ElMessage.error("数据下载失败");
  }

  var token = getToken();
  var url =
    config.proxy +
    "/dataLib/downloadFile?token=" +
    token +
    "&guid=" +
    data.result +
    "&pwd=" +
    encodeURIComponent(downFrom.value.pass);
  $("#Iframe1").attr("src", url).click();
  setClearDownload();
};
const setClearDownload = () => {
  downFrom.value = {
    pass: "",
    repass: "",
  };
  multipleSelection.value = [];
  downTable.value = [];
};
const handleSelectionChange = (res) => {
  multipleSelection.value = res;
};
//下载
const setSpatialDownload = () => {
  downTable.value = menuList.value;
  downloaVisible.value = true;
};
//定位显示
const spaceLocation = (index, row) => {
  var geom = menuTool.decr(row.geom);

  var wkt = WKT.parse(geom);
  menuTool.spaceLocation(wkt);
};
const handleSizeChange = (res) => {
  listData.value.pageSize = res;
  setQueySpatialData();
@@ -196,7 +439,12 @@
  setQueySpatialData();
};
const setMenuListClick = (res) => {
  listData.value.name = res.name;
  if (res.tab && res.tab.indexOf("moon:") > -1) {
    listData.value.name = res.tab.replaceAll("moon:", "");
  } else {
    listData.value.name = res.tab;
  }

  isActive.value = res.id;
  listData.value.filter = "";
  listData.value.pageIndex = 1;
@@ -253,6 +501,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("空间查询失败");
@@ -262,12 +511,22 @@
};

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;
  fieldOption.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();
};
@@ -287,8 +546,7 @@
  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];
@@ -324,17 +582,16 @@

  menuList.value = str;
  listData.value.wkt = store.state.spatialQueryData.wkt;
  var val_name = menuList.value[0].tab.replaceAll("moon:", "");
  val_name = val_name.replaceAll("_", "");
  listData.value.name = val_name;
  listData.value.name = menuList.value[0].tab.replaceAll("moon:", "");
  isActive.value = menuList.value[0].id;

  listData.value.hasGeom = 1;
  //
  setQueySpatialFields();
};

onMounted(() => {
  startQueryData();
  getpublickey();
});
</script>

@@ -400,57 +657,6 @@
    height: calc(100% - 10px);
    width: calc(80% - 20px);
    padding: 10px;

    .spatialTable {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      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;
@@ -518,6 +724,62 @@
  ::-webkit-scrollbar-track:hover {
    background: rgba(38, 47, 71, 0);
  }
  .spatialTable {
    margin-top: 10px;
    width: 100%;
    height: 100%;
    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;
    }
  }
  .setdownFrom {
    margin-top: 10px;
    /deep/.el-form-item__label {
      color: #d6e4ff !important;
    }
  }
}
</style> 
<style lang="less"  >