图层详细弹出页面“详细编辑”，设置成可拖动的；属性框弹出后，表头的"属性"改为对应图层名称

Surpriseplus

2023-08-31 b3dfb58acba1eda7c45d949a3e67fcb849509dec

 src/views/query/SpatialQuery.vue

@@ -2,21 +2,262 @@
  <div
    v-drag="true"
    class="spatialBox"
    v-resizable="'right, bottom'"
  >
    <!--     v-resizable="'right, bottom'" -->
    <div class="spatialTitle">
      <label>空间查询 </label>
      <el-icon
        @click="setSpatialClose"
        :size="20"
      >
        <Close />
      </el-icon>
      <label>空间查询</label>
      <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">
        <ul>
          <li
            v-for="item in menuList"
            @click="setMenuListClick(item)"
            :class="{'isActive':isActive==item.id}"
          >{{ item.cnName }}</li>
        </ul>
      </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: 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"
              :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>

    <!-- 高级查询 -->
    <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>
    <!-- 下载信息 -->
    <el-dialog
      v-model="downloaVisible"
      title="下载"
      width="30%"
      :show-close="false"
    >
      <div
        class="spatialTable"
        style="max-height: 40vh;"
      >
        <el-table
          :data="downTable"
          @selection-change="handleSelectionChange"
          style="width: 100%; height: 28vh;"
        >
          <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"
              @click="setCloseSpatialDownload"
            >取消</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,
@@ -24,23 +265,353 @@
  reactive,
  defineProps,
  defineEmits,
  nextTick,
} from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import menuTool from "@/assets/js/Map/menuTool";
import config from "@/assets/js/Map/config";
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);
};
onMounted(() => {});
var encrypt = new JSEncrypt();
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 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 setCloseSpatialDownload = () => {
  downloaVisible.value = false;
  setClearDownload();
};
//定位显示
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();
};
const handleCurrentChange = (res) => {
  listData.value.pageIndex = res;
  setQueySpatialData();
};
const setMenuListClick = (res) => {
  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;
  listData.value.pageSize = 10;
  setQueySpatialFields();
};
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 setdialogRefresh = () => {
  listData.value.filter = "";
  listData.value.pageIndex = 1;
  listData.value.pageSize = 10;

  var res = attributeData.value[0];
  conditionChange(res);
  setQueySpatialData();
};

//格式化时间
const add0 = (m) => {
  return m < 10 ? "0" + m : m;
};
//查询列表数据
const setQueySpatialData = async () => {
  listData.value.name = listData.value.name.replaceAll("_", "");
  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({
    ns: "mn",
    tab: listData.value.name,
  });
  if (data.code != 200) {
    return ElMessage.error("字段查询失败");
  }

  var std = data.result.filter((res) => {
    if (res.showtype > 0) {
      return res;
    }
  });

  attributeData.value = std;
  fieldOption.value = std;
  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.value = "";
  formSql.value.field = res.field;
  formSql.value.cut = res.type;
  var 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 = () => {
  var std = store.state.chekNowLayers;
  if (std.length <= 0) {
    ElMessage.error("请选择要查询的图层");
    setSpatialClose();
    return;
  }
  var str = std.filter((res) => {
    if (res.isLayer == 1 && res.tab) {
      return res;
    }
  });

  menuList.value = str;
  listData.value.wkt = store.state.spatialQueryData.wkt;
  listData.value.name = menuList.value[0].tab.replaceAll("moon:", "");
  isActive.value = menuList.value[0].id;
  listData.value.hasGeom = 1;
  //
  setQueySpatialFields();
};

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

<style lang="less" scoped>
.spatialBox {
  width: 800px;
  width: 900px;
  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 +619,9 @@
  .spatialTitle {
    padding: 10px;
    width: calc(100% - 20px);
    height: 66px;
    color: #d6e4ff;

    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -57,5 +630,187 @@
      font-size: 16px;
    }
  }
  .spatialContentBox {
    height: calc(100% - 40px);
    width: 100%;
    display: flex;
  }
  .spatialMenu {
    width: calc(20% - 20px);
    height: calc(100% - 26px);
    padding: 10px;
    border-right: 1px solid #d6e4ff;
    overflow: auto;
    font-family: Source Han Sans SC;
    ul {
      li {
        color: #d6e4ff;
        font-size: 12px;
        height: 20px;
        border-bottom: 1px solid #409eff;
        box-shadow: inset 0px 5px 20px 5px rgba(38, 47, 71, 1);
        padding: 10px 10px;
        display: flex;
        align-items: center;
      }
      li :hover {
        color: #409eff;
      }
    }
    .isActive {
      color: #409eff;
    }
  }
  .spatialContent {
    height: calc(100% - 10px);
    width: calc(80% - 20px);
    padding: 10px;
  }
  .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;
  }
  /* 修改滚动条的宽度为10px，颜色为白色 */
  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background: rgba(38, 47, 71, 0);
    border-radius: 10px;
  }

  /* 修改滚动条的轨道和滑块颜色 */
  ::-webkit-scrollbar-track {
    background: rgba(38, 47, 71, 0);
  }

  ::-webkit-scrollbar-thumb {
    background: #d6e4ff;
  }

  /* hover时滚动条轨道和滑块变色 */
  ::-webkit-scrollbar-thumb:hover {
    background: #d6e4ff;
  }

  ::-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> 
<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>