EnforcementCode-2.0/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue

<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { getDicts } from '@/api/system/dict/data';

/** 企业行数据 */
interface EnterpriseRow {
  id: number;
  enterpriseName: string;
  areaName: string;
  streetName: string;
  enforcementCount: number | null;
}

// ======================== 查询条件 ========================
const queryParams = reactive({
  enterpriseName: '' as string,
  area: undefined as string | undefined,
  street: undefined as string | undefined
});

// 时段类型：week=周度 month=月度 quarter=季度 year=年度
const periodType = ref('month');
const periodOptions = [
  // { label: '周度', value: 'week' },
  { label: '月度', value: 'month' },
  // { label: '季度', value: 'quarter' },
  // { label: '年度', value: 'year' }
];
const periodDate = ref<string>('2026-09');

/** 根据时段切换日期选择器类型 */
const pickerType = computed<'week' | 'month' | 'year'>(() => {
  if (periodType.value === 'week') return 'week';
  if (periodType.value === 'year') return 'year';
  return 'month';
});
const pickerFormat = computed(() => {
  if (pickerType.value === 'year') return 'YYYY';
  if (pickerType.value === 'week') return 'YYYY-MM-DD';
  return 'YYYY-MM';
});

// ======================== 区域/街道字典 ========================
const areaOptions = ref<any[]>([]);
const streetOptions = ref<any[]>([]);

const loadAreaDict = async () => {
  try {
    const res = await getDicts('address_type');
    areaOptions.value = res.data || [];
  } catch (e) {
    console.error('加载所属区字典失败', e);
  }
};

/** 切换所属区时联动加载所属街道 */
const handleAreaChange = async (val: string) => {
  queryParams.street = undefined;
  streetOptions.value = [];
  if (!val) return;
  try {
    const res = await getDicts(val);
    streetOptions.value = res.data || [];
  } catch (e) {
    console.error('加载所属街道字典失败', e);
  }
};

// ======================== 表格数据 ========================
const loading = ref(false);
const tableData = ref<EnterpriseRow[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(20);
const selectedRows = ref<EnterpriseRow[]>([]);

// 表格高度（与 efcode/report/registration/indexList.vue 实现一致）
const tableHeight = ref<number | undefined>(undefined);
const tableRef = ref<HTMLElement>();

/** 计算表格高度：视口高度 - 表格顶部偏移 - 分页区高度(~52px) - 底部边距(16px) */
const calcTableHeight = () => {
  if (!tableRef.value) return;
  const rect = tableRef.value.getBoundingClientRect();
  tableHeight.value = window.innerHeight - rect.top - 84;
};

/** 构造设计稿中的占位数据（前2条有数据，其余为空行） */
const buildMockRows = (): EnterpriseRow[] => {
  const rows: EnterpriseRow[] = [
    { id: 1, enterpriseName: '深圳市宝安区西乡佳创电子厂', areaName: '宝安区', streetName: '光明街道', enforcementCount: 996 },
    { id: 2, enterpriseName: '深圳市黄金屋真空科技有限公司', areaName: '龙华区', streetName: '福海街道', enforcementCount: 990 }
  ];
  for (let i = 3; i <= 7; i++) {
    rows.push({ id: i, enterpriseName: '', areaName: '', streetName: '', enforcementCount: null });
  }
  return rows;
};

const getList = async () => {
  loading.value = true;
  try {
    // TODO: 接入真实接口后替换为接口返回数据
    // const res = await listKeyEnterprise({ ...queryParams, periodType: periodType.value, periodDate: periodDate.value, pageNum: currentPage.value, pageSize: pageSize.value });
    tableData.value = buildMockRows();
    total.value = 26064;
  } finally {
    loading.value = false;
  }
};

/** 搜索 */
const handleSearch = () => {
  currentPage.value = 1;
  getList();
};

/** 重置 */
const handleReset = () => {
  queryParams.enterpriseName = '';
  queryParams.area = undefined;
  queryParams.street = undefined;
  streetOptions.value = [];
  periodType.value = 'month';
  periodDate.value = '2026-09';
  currentPage.value = 1;
  pageSize.value = 20;
  getList();
};

/** 导出 */
const handleExport = () => {
  // TODO: 接入导出接口后实现文件下载
};

// ======================== 详情弹窗 ========================
interface EnforcementDetailRow {
  id: number;
  enforcementTime: string;
  bureauDeptName: string;
  categoryText: string;
  lawEnforcer: string;
  itemText: string;
}

const detailDialogVisible = ref(false);
const detailEnterprise = ref<EnterpriseRow | null>(null);
const detailLoading = ref(false);
const detailTableData = ref<EnforcementDetailRow[]>([]);
const detailTotal = ref(0);
const detailPage = ref(1);
const detailPageSize = ref(20);

/** 获取详情 mock 数据 */
const buildDetailMockRows = (enterprise: EnterpriseRow, periodDate: string): EnforcementDetailRow[] => {
  const rows: EnforcementDetailRow[] = [];
  const enforcerPool = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
  const bureauPool = [
    `${enterprise.areaName}市场监督管理局`,
    `${enterprise.areaName}市场监管局${enterprise.streetName}监管所`
  ];
  const categoryPool = ['行政检查', '行政处罚', '专项整治', '日常监管'];
  const itemPool = ['特种设备安全检查', '产品质量抽查', '计量器具检定', '食品安全监督抽检', '药品经营许可检查'];

  const count = enterprise.enforcementCount ?? 5;
  for (let i = 1; i <= Math.min(count, 8); i++) {
    const hour = String(8 + (i % 11)).padStart(2, '0');
    const minute = String((i * 17) % 60).padStart(2, '0');
    rows.push({
      id: i,
      enforcementTime: `${periodDate}-${String(i % 28 + 1).padStart(2, '0')} ${hour}:${minute}:00`,
      bureauDeptName: bureauPool[i % bureauPool.length],
      categoryText: categoryPool[i % categoryPool.length],
      lawEnforcer: enforcerPool[i % enforcerPool.length],
      itemText: itemPool[i % itemPool.length]
    });
  }
  return rows;
};

const getDetailList = async () => {
  detailLoading.value = true;
  try {
    if (!detailEnterprise.value) return;
    // TODO: 接入真实接口后替换为接口返回数据
    // const res = await listKeyEnterpriseDetail({
    //   enterpriseId: detailEnterprise.value.id,
    //   enterpriseName: detailEnterprise.value.enterpriseName,
    //   periodType: periodType.value,
    //   periodDate: periodDate.value,
    //   pageNum: detailPage.value,
    //   pageSize: detailPageSize.value
    // });
    detailTableData.value = buildDetailMockRows(detailEnterprise.value, periodDate.value);
    detailTotal.value = detailEnterprise.value.enforcementCount ?? 0;
  } finally {
    detailLoading.value = false;
  }
};

/** 查看详情 — 打开弹窗并加载当前时段的执法明细 */
const handleDetail = (row: EnterpriseRow) => {
  if (!row.enterpriseName) return;
  detailEnterprise.value = row;
  detailPage.value = 1;
  detailDialogVisible.value = true;
  getDetailList();
};

const handleDetailSizeChange = (size: number) => {
  detailPageSize.value = size;
  detailPage.value = 1;
  getDetailList();
};

const handleDetailPageChange = (page: number) => {
  detailPage.value = page;
  getDetailList();
};

/** 多选 */
const handleSelectionChange = (selection: EnterpriseRow[]) => {
  selectedRows.value = selection;
};

/** 切换每页条数 */
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1;
  getList();
};

/** 翻页 */
const handlePageChange = (page: number) => {
  currentPage.value = page;
  getList();
};

onMounted(() => {
  loadAreaDict();
  getList();
  nextTick(() => calcTableHeight());
  window.addEventListener('resize', calcTableHeight);
});

onUnmounted(() => {
  window.removeEventListener('resize', calcTableHeight);
});
</script>

<template>
  <div class="app-container">
    <!-- 单页白底带边框容器，与 border-card tabs 壳提供的容器效果一致 -->
    <div class="page-card">
      <!-- ==================== 搜索区域 ==================== -->
    <div class="search-panel">
      <el-form :inline="true" label-colon>
        <el-form-item label="企业名称">
          <el-input
            v-model="queryParams.enterpriseName"
            placeholder="请输入关键字"
            class="search-input"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="所属区">
          <el-select
            v-model="queryParams.area"
            placeholder="请选择"
            class="search-select"
            clearable
            @change="handleAreaChange"
          >
            <el-option v-for="item in areaOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属街道">
          <el-select
            v-model="queryParams.street"
            placeholder="请选择"
            class="search-select"
            clearable
          >
            <el-option v-for="item in streetOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="时段">
          <el-select v-model="periodType" class="period-select">
            <el-option v-for="item in periodOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="periodDate"
            :type="pickerType"
            :format="pickerFormat"
            :value-format="pickerFormat"
            class="period-date"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
          <el-button @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- ==================== 表格区域 ==================== -->
    <div class="table-panel">
      <div ref="tableRef">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 100%"
          :height="tableHeight"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" width="90" align="center">
            <template #default="{ $index }">
              {{ tableData[$index].enterpriseName ? $index + 1 : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="enterpriseName" label="企业名称" min-width="300" align="center" />
          <el-table-column prop="areaName" label="所属区" width="160" align="center" />
          <el-table-column prop="streetName" label="所属街道" width="160" align="center" />
          <el-table-column label="行政执法次数" width="180" align="center">
            <template #default="{ row }">
              <span v-if="row.enforcementCount !== null">{{ row.enforcementCount }}次</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template #default="{ row }">
              <el-button
                v-if="row.enterpriseName"
                type="primary"
                link
                size="small"
                @click="handleDetail(row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- ==================== 分页 ==================== -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-4"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- ==================== 企业执法详情弹窗 ==================== -->
    <el-dialog
      v-model="detailDialogVisible"
      width="1100px"
      :title="`${detailEnterprise?.enterpriseName || ''} — ${periodDate} 执法明细`"
      append-to-body
      top="5vh"
      destroy-on-close
    >
      <el-alert
        v-if="detailEnterprise"
        :closable="false"
        show-icon
        :title="`所属区：${detailEnterprise.areaName} ｜ 所属街道：${detailEnterprise.streetName} ｜ 行政执法次数：${detailEnterprise.enforcementCount ?? 0}次 ｜ 时段：${periodType} / ${periodDate}`"
        type="info"
        class="mb-4"
      />

      <el-table
        v-loading="detailLoading"
        :data="detailTableData"
        border
        stripe
        style="width: 100%"
        max-height="55vh"
      >
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="执法时间" prop="enforcementTime" min-width="180" align="center" />
        <el-table-column label="执法单位" prop="bureauDeptName" min-width="260" align="center" />
        <el-table-column label="执法类别" prop="categoryText" width="140" align="center" />
        <el-table-column label="执法人员" prop="lawEnforcer" width="140" align="center" />
        <el-table-column label="执法事项" prop="itemText" min-width="220" align="center" />
      </el-table>

      <el-pagination
        v-model:current-page="detailPage"
        v-model:page-size="detailPageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="detailTotal"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-4"
        @size-change="handleDetailSizeChange"
        @current-change="handleDetailPageChange"
      />
    </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 外层容器：与 border-card tabs 壳提供的白底带边框容器一致 */
.app-container {
  padding: 16px;
  box-sizing: border-box;
}

.page-card {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 16px;
  min-height: calc(100vh - 116px);
}

/* ==================== 搜索面板 ==================== */
.search-panel {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 18px 20px 0;
  margin-bottom: 16px;

  :deep(.el-form-item__label) {
    font-weight: 600;
    color: #333;
  }

  .search-input {
    width: 210px;
  }

  .search-select {
    width: 220px;
  }

  .period-select {
    width: 110px;
  }

  .period-date {
    width: 150px;
  }
}

/* ==================== 表格面板 ==================== */
.table-panel {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px 20px;
  box-sizing: border-box;
}

/* ==================== 分页 ==================== */
.mt-4 {
  margin-top: 16px;
  justify-content: flex-end;
}
.mb-4 {
  margin-bottom: 16px;
}
</style>