Merge branch 'master' of http://192.168.20.92:8888/r/PM20230220027_Web

WX

2023-09-13 3ac241dca10f0dc85b6a3291a8339f1b1765491f

 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">
      <label>{{store.state.spatialTitle }}</label>
      <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: 73%">
        <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
                class="el-icon-map"
                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>

@@ -50,14 +161,16 @@
  nextTick,
  watch,
} from "vue";
import config from "@/assets/js/Map/config";
import { User, Lock, Plus } from "@element-plus/icons-vue";
// import config from "../../../public/config/config.js";
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,14 +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: {
    type: Object,
  },
  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();
@@ -99,34 +224,108 @@

//查询列表数据
const setQueySpatialData = async () => {
  listData.value.name = listData.value.name.replaceAll("_", "");
  const data = await dataQuery_selectByPage(listData.value);
  if (data.code != 200) {
    return ElMessage.error("空间查询失败");
    return ElMessage.error(data.msg);
  }
  listData.value.count = data.count;
  tableData.value = data.result;
};

  var val = data.result.filter((res) => {
    if (res.apprTime) {
      res.apprTime = format(res.apprTime);
    }
    if (res.createtime) {
      res.apprTime = format(res.createtime);
    }
    if (res.updatetime) {
      res.apprTime = format(res.updatetime);
    }
    return res;
  });
  tableData.value = val;
};
//格式化时间
const format = (shijianchuo) => {
  //shijianchuo是整数，否则要parseInt转换
  var time = new Date(shijianchuo);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return y + "-" + add0(m) + "-" + add0(d) + " " + h + ":" + mm + ":" + s;
};
//格式化时间
const add0 = (m) => {
  return m < 10 ? "0" + m : m;
};
const setQueySpatialFields = async () => {
  console.log(props.layerData);
  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("字段查询失败");
  }
  console.log(data);
  attributeData.value = data.result;

  console.log(attributeData.value);

  var std = data.result.filter((res) => {
    if (res.showtype > 0) {
      return res;
    }
  });
  var val = std.filter((res) => {
    if (res.field.indexOf("_") > -1) {
      var str = res.field.split("_");
      res.field = str[0] + str[1][0].toUpperCase() + str[1].slice(1);
      return res;
    } else {
      return res;
    }
  });
  attributeData.value = val;
  fieldOption.value = val;
  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];
@@ -148,22 +347,25 @@

//页面初始化
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(
  () => props.layerData,
  (nVal, oVal) => {
    console.log("值发生了变更", nVal, oVal);
    startQueryData();
  },
  { deep: true }
);
onMounted(() => {});
onMounted(() => {
  startQueryData();
});
</script>

<style lang="less" scoped>
@@ -177,7 +379,7 @@
  left: 100%;
  background: rgba(7, 8, 14, 0.8);
  border: 1px solid #d6e4ff;
  z-index: 10;
  z-index: 31;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  .spatialTitle {
    padding: 10px;
@@ -253,7 +455,16 @@
    padding: 10px;
    height: 40px;
  }

  .el-icon-map {
    background: url("../../assets/img/location.png") center no-repeat;
    background-size: 100% 100%;
    border: transparent;
  }
  .el-icon-map:before {
    content: "定位";
    font-size: 0;
    visibility: hidden;
  }
  /deep/.el-pagination button {
    background: transparent;
    color: #d6e4ff;
@@ -293,25 +504,25 @@
}
</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-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;
}