GridQuery.vue

<template>
  <div class="grid-query">
    <div class="page-header">
      <h1>网格查询</h1>
    </div>

    <el-card class="filter-card">
      <div class="filter-header">
        <h3 class="filter-title">查询条件</h3>
        <div class="filter-actions">
          <el-button size="small" @click="handleQuery">
            <i class="el-icon-search"></i>
            查询
          </el-button>
          <el-button size="small" @click="resetQuery" type="default">
            <i class="el-icon-refresh-left"></i>
            重置
          </el-button>
        </div>
      </div>

      <div class="filter-content">
        <el-row :gutter="24">
          <el-col :span="3">
            <el-cascader
              v-model="selectedRegion"
              :options="regionOptions"
              :props="{ checkStrictly: true, value: 'name', label: 'name' }"
              placeholder="请选择区域"
              clearable
              class="region-cascader"
            ></el-cascader>
          </el-col>

          <el-col :span="3">
            <div class="search-wrapper">
              <el-input
                v-model="selectedGridName"
                placeholder="请输入网格名称"
                style="padding-left: 0;"
                @keyup.enter.native="handleFilter"
              />
            </div>
          </el-col>

          <el-col :span="3">
            <div class="search-wrapper">
              <el-input
                v-model="selectedGrid"
                placeholder="请输入网格ID"
                style="padding-left: 0;"
                @keyup.enter.native="handleFilter"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 网格列表 -->
    <el-card class="grid-list-card">
      <div class="list-header">
        <h3 class="list-title">网格列表</h3>
      </div>

      <div class="list-content">
        <el-table 
          :data="tableData" 
          border
        >
          <el-table-column prop="name" label="网格名称" width="220"></el-table-column>
          <el-table-column prop="id" label="网格ID" width="220"></el-table-column>
          <el-table-column prop="region" label="所属区域" min-width="250"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageStore.currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="pageStore.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageStore.total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GridQuery',
  data() {
    return {
      selectedRegion: [],
      selectedGrid: '',
      selectedGridName: '',
      
      
      tableData: [],
      pageStore:{
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  created(){
    this.regionOptions = this.addressStoreData
  },
  methods: {
    handleQuery() {
      this.currentPage = 1
      this.$message.success('查询成功')
    },
    resetQuery() {
      this.selectedRegion = []
      this.selectedGrid = ''
      this.selectedGridName = ''
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
    },
    handleCurrentChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-query {
  .page-header {
    margin-bottom: 24px;

    h1 {
      font-size: 24px;
      font-weight: 600;
      margin: 0;
      color: #303133;
    }
  }

  .filter-card {
    margin-bottom: 24px;

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .filter-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
      }

      .filter-actions {
        display: flex;
        gap: 8px;
      }
    }

    .filter-content {
      .region-cascader {
        width: 100%;
      }
    }
  }

  .stats-cards {
    margin-bottom: 24px;
  }

  .dashboard-card {
    position: relative;
    height: 116px;
    
    .card-header {
      .card-title {
        font-size: 14px;
        font-weight: 600;
        font-weight: normal;
      }
    }
    
    .card-content {
      .card-value {
        font-size: 24px;
        font-weight: bold;
      }
    }
    
    .card-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 88px;
      height: 88px;
    }
  }

  .grid-list-card {
    .list-header {
      margin-bottom: 16px;

      .list-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
      }
    }

    .list-content {
      .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .grid-detail {
    .detail-header {
      margin-bottom: 20px;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .detail-stats {
      margin-bottom: 20px;
      
      .stat-item {
        text-align: center;
        padding: 15px;
        background-color: #f5f7fa;
        border-radius: 4px;
        
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
        
        .stat-label {
          font-size: 14px;
          color: #909399;
          margin-top: 5px;
        }
      }
    }

    .detail-content {
      .el-tabs {
        margin-top: 20px;
      }
    }
  }
}
</style>