GridQuery.vue

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

    <el-card class="filter-card">
      <div class="filter-content">
        <el-row :gutter="24">
          <el-col :span="3">
            <div class="search-wrapper">
              <el-input
                v-model="formData.gridName"
                placeholder="请输入网格名称"
                style="padding-left: 0;"
                clearable
                @keyup.enter.native="handleFilter"
              />
            </div>
          </el-col>

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

          <el-col :span="3" v-if="addressStore.cityArr.length>0">
            <el-select 
              v-model="addressStore.city" 
              placeholder="选择地市"
              @change="cityChange"
              clearable>
              <el-option 
                v-for="item in addressStore.cityArr" 
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3" v-if="addressStore.countyArr.length>0"> 
            <el-select 
              v-model="addressStore.county" 
              placeholder="选择区县"
              @change="countyChange"
              clearable>
              <el-option 
                v-for="item in addressStore.countyArr" 
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <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>
          </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="gridName" label="网格名称" width="220"></el-table-column>
          <el-table-column prop="gridCode" label="网格ID" width="220"></el-table-column>
          <el-table-column prop="areaName" 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 {
      addressStore:{
        city: '',
        cityArr: [],
        county: '',
        countyArr: [],
      },
      formData:{
        gridName: '',
        gridCode: '',
      },
      pageStore: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      tableData: []
    }
  },
  created(){
    this.queryArea()

    this.handleQuery()
  },
  methods: {
    queryArea(){
      this.apiReq.queryLevelAllArea({
        areaLevel: 2,
        parentAreaCode: '320000'
      }).then(res=>{
        if(res.code == 200){
          this.addressStore.cityArr = res.data
        }
      })
    },
    cityChange(value){
      let ad = this.addressStore
      ad.city = value
      ad.county = ''

      this.apiReq.queryLevelAllArea({
        areaLevel: 3,
        parentAreaCode: value
      }).then(res=>{
        if(res.code == 200){
          ad.countyArr = res.data
        }
      })
    },
    handleQuery() {
      this.pageStore.currentPage = 1
      
      this.queryGridData()
    },
    queryGridData(){
      if(this.addressStore.city && !this.addressStore.county){
        this.$message.error('请选择区县')
        return
      }

      this.apiReq.queryAllGridList({
        areaCode: this.addressStore.county,
        pageSize: this.pageStore.pageSize,
        pageNum: this.pageStore.currentPage,
        ...this.formData
      }).then(res=>{
        if(res.code == 200){
          this.tableData = res.data.records
          this.pageStore.total = res.data.total
        }
      })
    },

    resetQuery() {
      this.formData.gridCode = ''
      this.formData.gridName = ''
      this.addressStore.city = ''
      this.addressStore.county = ''
      this.addressStore.countyArr = []
    },
    handleSizeChange(size) {
      this.pageStore.pageSize = size
      
      this.handleQuery()
    },
    handleCurrentChange(page) {
      this.pageStore.currentPage = page

      this.queryGridData()
    },
  }
}
</script>

<style lang="scss" scoped>
.grid-query {

  .el-button.el-button--small{
    padding: 13px 12px;
  }
  .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>