分屏对比，等高线，坡度图，坐标定位功能添加

Surpriseplus

2023-07-13 f6dd93cb0d1b0fe17674e948f0daf6ceb792bb55

 src/views/query/SpatialQuery.vue

@@ -13,64 +13,75 @@
        <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 class="spatialContentBox">
      <div class="spatialMenu">
        <ul>
          <li
            v-for="item in menuList"
            @click="setMenuListClick(item)"
            :class="{'isActive':isActive==item.id}"
          >{{ item.name }}</li>
        </ul>
      </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 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>
        <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>
    </div>

    <!-- 高级查询 -->
@@ -168,12 +179,14 @@
const fieldOption = ref([]);
const attributeData = ref([]);
const tableData = ref([]);
const menuList = ref([]);
const formSql = ref({
  field: "",
  type: "",
  value: "",
  cut: "",
});
const isActive = ref(null);
const handleSizeChange = (res) => {
  listData.value.pageSize = res;
  setQueySpatialData();
@@ -182,7 +195,14 @@
  listData.value.pageIndex = res;
  setQueySpatialData();
};

const setMenuListClick = (res) => {
  listData.value.name = res.name;
  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("请输入要查询的参数");
@@ -290,8 +310,23 @@

//页面初始化
const startQueryData = () => {
  var std = store.state.chekNowLayers;
  if (std.length <= 0) {
    ElMessage.error("请选择要查询的图层");
    setSpatialClose();
    return;
  }
  var str = std.filter((res) => {
    if (res.type == 2) {
      return res;
    }
  });

  menuList.value = str;
  listData.value.wkt = store.state.spatialQueryData.wkt;
  listData.value.name = "lunarplacenane";
  listData.value.name = menuList.value[0].name;
  isActive.value = menuList.value[0].id;

  listData.value.hasGeom = 1;
  //
  setQueySpatialFields();
@@ -303,7 +338,7 @@

<style lang="less" scoped>
.spatialBox {
  width: 800px;
  width: 900px;
  height: 400px;
  display: flex;
  flex-direction: column;
@@ -328,15 +363,46 @@
      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(100% - 20px);
    width: calc(80% - 20px);
    padding: 10px;

    .spatialTable {
      margin-top: 10px;
      width: 100%;
      height: calc(100% - 35px);
      height: 100%;
      position: relative;

      .el-table /deep/ .el-table__header-wrapper tr th {
@@ -425,6 +491,31 @@
  /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);
  }
}
</style> 
<style lang="less"  >