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="handleExport" type="default">
            <i class="el-icon-download"></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="6">
            <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="6">
            <el-select 
              v-model="selectedGrid" 
              placeholder="选择网格"
              clearable
            >
              <el-option label="全部网格" value=""></el-option>
              <el-option label="A网格" value="A网格"></el-option>
              <el-option label="B网格" value="B网格"></el-option>
              <el-option label="C网格" value="C网格"></el-option>
              <el-option label="D网格" value="D网格"></el-option>
              <el-option label="E网格" value="E网格"></el-option>
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-select 
              v-model="selectedInstaller" 
              placeholder="选择装维师傅"
              clearable
            >
              <el-option label="全部师傅" value=""></el-option>
              <el-option 
                v-for="installer in installers" 
                :key="installer.id"
                :label="`${installer.name} (${installer.workId})`"
                :value="installer.id"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-select 
              v-model="selectedSales" 
              placeholder="选择营销人员"
              clearable
            >
              <el-option label="全部人员" value=""></el-option>
              <el-option 
                v-for="sales in salesPersons" 
                :key="sales.id"
                :label="`${sales.name} (${sales.workId})`"
                :value="sales.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 网格数据统计 -->
    <div class="stats-cards">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">网格总数</span>
            </div>
            <div class="card-content">
              <div class="card-value">{{ gridStats.totalGrids }}</div>
            </div>
            <img 
              src="../assets/icons/ad61df2f28f6b51d5f386829473ab1b592fd14e0.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">装维师傅</span>
            </div>
            <div class="card-content">
              <div class="card-value">{{ gridStats.totalInstallers }}</div>
            </div>
            <img 
              src="../assets/icons/a8703fd7713f624a505aed79bcf30eb245a86d9c.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">营销人员</span>
            </div>
            <div class="card-content">
              <div class="card-value">{{ gridStats.totalSales }}</div>
            </div>
            <img 
              src="../assets/icons/eb05b4822d67dff64c5712d0777f069d241ecc13.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">商机总数</span>
            </div>
            <div class="card-content">
              <div class="card-value">{{ gridStats.totalOpportunities }}</div>
            </div>
            <img 
              src="../assets/icons/1b66793397a66bf54212d266505eb98e3377a354.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
      </el-row>
    </div>

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

      <div class="list-content">
        <el-table 
          :data="filteredGrids" 
          style="width: 100%"
          @row-click="handleRowClick"
        >
          <el-table-column prop="name" label="网格名称" width="120"></el-table-column>
          <el-table-column prop="region" label="所属区域" width="200"></el-table-column>
          <el-table-column prop="installerCount" label="装维师傅数" width="120"></el-table-column>
          <el-table-column prop="salesCount" label="营销人员数" width="120"></el-table-column>
          <el-table-column prop="opportunityCount" label="商机数" width="100"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag 
                :type="scope.row.status === 'active' ? 'success' : 'info'"
                size="small"
              >
                {{ scope.row.status === 'active' ? '活跃' : '非活跃' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastActivity" label="最后活跃" width="150"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button 
                type="text" 
                size="small" 
                @click.stop="viewGridDetail(scope.row)"
              >
                查看详情
              </el-button>
              <el-button 
                type="text" 
                size="small" 
                @click.stop="editGrid(scope.row)"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>

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

    <!-- 网格详情对话框 -->
    <el-dialog
      title="网格详情"
      :visible.sync="detailDialogVisible"
      width="800px"
    >
      <div v-if="selectedGridDetail" class="grid-detail">
        <div class="detail-header">
          <h3>{{ selectedGridDetail.name }} - {{ selectedGridDetail.region }}</h3>
        </div>
        
        <el-row :gutter="20" class="detail-stats">
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ selectedGridDetail.installerCount }}</div>
              <div class="stat-label">装维师傅</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ selectedGridDetail.salesCount }}</div>
              <div class="stat-label">营销人员</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ selectedGridDetail.opportunityCount }}</div>
              <div class="stat-label">商机数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ selectedGridDetail.completionRate }}%</div>
              <div class="stat-label">成单率</div>
            </div>
          </el-col>
        </el-row>
        
        <div class="detail-content">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="装维师傅" name="installers">
              <el-table :data="selectedGridDetail.installers" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="workId" label="工号" width="100"></el-table-column>
                <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="opportunityCount" label="商机数" width="100"></el-table-column>
                <el-table-column prop="completionRate" label="成单率" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.completionRate }}%
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="营销人员" name="sales">
              <el-table :data="selectedGridDetail.sales" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="workId" label="工号" width="100"></el-table-column>
                <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="opportunityCount" label="商机数" width="100"></el-table-column>
                <el-table-column prop="completionRate" label="成单率" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.completionRate }}%
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="商机明细" name="opportunities">
              <el-table :data="selectedGridDetail.opportunities" style="width: 100%">
                <el-table-column prop="id" label="商机ID" width="120"></el-table-column>
                <el-table-column prop="customerAddress" label="客户地址" width="200"></el-table-column>
                <el-table-column prop="installerName" label="装维师傅" width="120"></el-table-column>
                <el-table-column prop="salesName" label="营销人员" width="120"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag 
                      :type="getStatusType(scope.row.status)"
                      size="small"
                    >
                      {{ getStatusLabel(scope.row.status) }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 地区数据
const regionOptions = [
  {
    name: '江苏省',
    children: [
      {
        name: '南京市',
        children: [
          { name: '玄武区' },
          { name: '秦淮区' },
          { name: '建邺区' },
          { name: '鼓楼区' },
          { name: '浦口区' },
          { name: '栖霞区' },
          { name: '雨花台区' },
          { name: '江宁区' },
          { name: '六合区' },
          { name: '溧水区' },
          { name: '高淳区' }
        ]
      }
    ]
  }
]

// 模拟网格数据
const mockGrids = [
  { 
    id: 'GRID001', 
    name: 'A网格', 
    region: '江苏省-南京市-玄武区', 
    installerCount: 8, 
    salesCount: 6, 
    opportunityCount: 45, 
    status: 'active', 
    lastActivity: '2025-09-28 15:30:00' 
  },
  { 
    id: 'GRID002', 
    name: 'B网格', 
    region: '江苏省-南京市-玄武区', 
    installerCount: 7, 
    salesCount: 5, 
    opportunityCount: 38, 
    status: 'active', 
    lastActivity: '2025-09-28 14:20:00' 
  },
  { 
    id: 'GRID003', 
    name: 'C网格', 
    region: '江苏省-南京市-秦淮区', 
    installerCount: 9, 
    salesCount: 7, 
    opportunityCount: 52, 
    status: 'active', 
    lastActivity: '2025-09-28 12:15:00' 
  },
  { 
    id: 'GRID004', 
    name: 'D网格', 
    region: '江苏省-南京市-建邺区', 
    installerCount: 6, 
    salesCount: 4, 
    opportunityCount: 31, 
    status: 'active', 
    lastActivity: '2025-09-27 18:45:00' 
  },
  { 
    id: 'GRID005', 
    name: 'E网格', 
    region: '江苏省-南京市-鼓楼区', 
    installerCount: 10, 
    salesCount: 8, 
    opportunityCount: 63, 
    status: 'active', 
    lastActivity: '2025-09-28 16:20:00' 
  }
]

// 模拟人员数据
const mockInstallers = [
  { id: 'INS001', name: '王师傅', workId: 'W001', phone: '13987654321', gridId: 'GRID001', opportunityCount: 12, completionRate: 75 },
  { id: 'INS002', name: '李师傅', workId: 'W002', phone: '13876543210', gridId: 'GRID001', opportunityCount: 9, completionRate: 66 },
  { id: 'INS003', name: '张师傅', workId: 'W003', phone: '13765432109', gridId: 'GRID002', opportunityCount: 11, completionRate: 72 },
  { id: 'INS004', name: '刘师傅', workId: 'W004', phone: '13654321098', gridId: 'GRID002', opportunityCount: 8, completionRate: 62 },
  { id: 'INS005', name: '陈师傅', workId: 'W005', phone: '13543210987', gridId: 'GRID003', opportunityCount: 15, completionRate: 80 }
]

const mockSalesPersons = [
  { id: 'SALE001', name: '张营销', workId: 'S001', phone: '13912345678', gridId: 'GRID001', opportunityCount: 10, completionRate: 80 },
  { id: 'SALE002', name: '陈营销', workId: 'S002', phone: '13923456789', gridId: 'GRID001', opportunityCount: 8, completionRate: 75 },
  { id: 'SALE003', name: '杨营销', workId: 'S003', phone: '13934567890', gridId: 'GRID002', opportunityCount: 12, completionRate: 83 },
  { id: 'SALE004', name: '黄营销', workId: 'S004', phone: '13945678901', gridId: 'GRID002', opportunityCount: 7, completionRate: 71 },
  { id: 'SALE005', name: '徐营销', workId: 'S005', phone: '13956789012', gridId: 'GRID003', opportunityCount: 14, completionRate: 85 }
]

// 模拟商机数据
const mockOpportunities = [
  { id: 'OP202500001', customerAddress: '南京市玄武区中山路123号', installerName: '王师傅', salesName: '张营销', createTime: '2025-09-27 10:30:00', status: 'assigned', gridId: 'GRID001' },
  { id: 'OP202500002', customerAddress: '南京市玄武区珠江路456号', installerName: '李师傅', salesName: '陈营销', createTime: '2025-09-27 14:20:00', status: 'following', gridId: 'GRID001' },
  { id: 'OP202500003', customerAddress: '南京市秦淮区北京东路789号', installerName: '张师傅', salesName: '杨营销', createTime: '2025-09-26 16:45:00', status: 'completed', gridId: 'GRID002' },
  { id: 'OP202500004', customerAddress: '南京市建邺区汉中路321号', installerName: '刘师傅', salesName: '黄营销', createTime: '2025-09-28 09:15:00', status: 'assigned', gridId: 'GRID002' }
]

export default {
  name: 'GridQuery',
  data() {
    return {
      selectedRegion: [],
      selectedGrid: '',
      selectedInstaller: '',
      selectedSales: '',
      regionOptions,
      grids: mockGrids,
      installers: mockInstallers,
      salesPersons: mockSalesPersons,
      opportunities: mockOpportunities,
      gridStats: {
        totalGrids: 5,
        totalInstallers: 28,
        totalSales: 22,
        totalOpportunities: 239
      },
      currentPage: 1,
      pageSize: 20,
      detailDialogVisible: false,
      selectedGridDetail: null,
      activeTab: 'installers'
    }
  },
  computed: {
    filteredGrids() {
      let result = this.grids

      // 区域筛选
      if (this.selectedRegion && this.selectedRegion.length > 0) {
        const regionPath = this.selectedRegion.join('-')
        result = result.filter(grid => grid.region.startsWith(regionPath))
      }

      // 网格筛选
      if (this.selectedGrid) {
        result = result.filter(grid => grid.name === this.selectedGrid)
      }

      // 装维师傅筛选
      if (this.selectedInstaller) {
        // 获取该师傅所属的网格
        const installerGrid = this.installers.find(inst => inst.id === this.selectedInstaller)?.gridId
        if (installerGrid) {
          result = result.filter(grid => grid.id === installerGrid)
        }
      }

      // 营销人员筛选
      if (this.selectedSales) {
        // 获取该人员所属的网格
        const salesGrid = this.salesPersons.find(sales => sales.id === this.selectedSales)?.gridId
        if (salesGrid) {
          result = result.filter(grid => grid.id === salesGrid)
        }
      }

      return result
    }
  },
  methods: {
    handleQuery() {
      this.currentPage = 1
      this.$message.success('查询成功')
    },
    handleExport() {
      this.$message.success('数据导出成功')
    },
    resetQuery() {
      this.selectedRegion = []
      this.selectedGrid = ''
      this.selectedInstaller = ''
      this.selectedSales = ''
      this.currentPage = 1
    },
    handleRowClick(row) {
      this.viewGridDetail(row)
    },
    viewGridDetail(grid) {
      // 模拟获取网格详情
      const installers = this.installers.filter(inst => inst.gridId === grid.id)
      const sales = this.salesPersons.filter(sales => sales.gridId === grid.id)
      const opportunities = this.opportunities.filter(opp => opp.gridId === grid.id)
      
      this.selectedGridDetail = {
        ...grid,
        installers,
        sales,
        opportunities,
        completionRate: 75 // 模拟成单率
      }
      this.detailDialogVisible = true
    },
    editGrid(grid) {
      this.$message.info('编辑功能开发中')
    },
    getStatusType(status) {
      const typeMap = {
        'assigned': 'info',
        'following': 'warning',
        'pending_review': 'primary',
        'completed': 'success',
        'closed': 'info'
      }
      return typeMap[status] || 'info'
    },
    getStatusLabel(status) {
      const labelMap = {
        'assigned': '待跟进',
        'following': '跟进中',
        'pending_review': '成单待审核',
        'completed': '已成单',
        'closed': '已关闭'
      }
      return labelMap[status] || status
    },
    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>