zhuibobo
/
EnforcementCode-2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增报表页面

dev-V1.0.6
wangmingyong@163.com 2 months ago
parent
5400e2863b
commit
4ccfd36206
7 changed files with 1266 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      zdxt-web-client/zdxt-admin-plus-ui/.env.development-wmy-cust
  2. 355
      zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/high-frequency/index.vue
  3. 356
      zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/components/StatPane.vue
  4. 38
      zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/index.vue
  5. 340
      zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue
  6. 88
      zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/situation-trend/index.vue
  7. 87
      zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/trend-behavior/index.vue

3
zdxt-web-client/zdxt-admin-plus-ui/.env.development-wmy-cust
View File

@ -12,7 +12,8 @@ VITE_APP_ENV = 'development'
# 开发环境
# VITE_APP_BASE_API = '/dev-api'
VITE_APP_BASE_API = '/efcode20-sup-web/prod-api'
# VITE_APP_BASE_API = '/efcode20-sup-web/prod-api'
VITE_APP_BASE_API = '/zfjdm/prod-api'
# 应用访问路径 例如使用前缀 /admin/
# VITE_APP_CONTEXT_PATH = '/efcode20-sup-web/'

355
zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/high-frequency/index.vue
View File

@ -0,0 +1,355 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { getDicts } from '@/api/system/dict/data';
/** 高频检查预警企业行数据 */
interface HighFrequencyRow {
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<HighFrequencyRow[]>([]);
const total = ref(0);
/** 当前预警数 */
const warningCount = ref(0);
const currentPage = ref(52); // 默认页码按设计稿
const selectedRows = ref<HighFrequencyRow[]>([]);
// 表格高度（与 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 = (): HighFrequencyRow[] => {
const rows: HighFrequencyRow[] = [
{ id: 1, enterpriseName: '深圳市宝安区西乡佳创电子厂', areaName: '宝安区', streetName: '光明街道', enforcementCount: 20 },
{ id: 2, enterpriseName: '深圳市黄金屋真空科技有限公司', areaName: '龙华区', streetName: '福海街道', enforcementCount: 10 }
];
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 listHighFrequency({
// ...queryParams,
// periodType: periodType.value,
// periodDate: periodDate.value,
// pageNum: currentPage.value
// });
tableData.value = buildMockRows();
total.value = 658;
warningCount.value = 20;
} 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;
getList();
};
/** 导出 */
const handleExport = () => {
// TODO: 接入导出接口后实现文件下载
};
/** 查看详情 */
const handleDetail = (_row: HighFrequencyRow) => {
// TODO: 待详情页面创建后放开路由跳转
};
/** 多选 */
const handleSelectionChange = (selection: HighFrequencyRow[]) => {
selectedRows.value = selection;
};
/** 翻页 */
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="high-frequency-container">
<!-- ==================== 搜索区域 ==================== -->
<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 class="warning-summary">当前预警数：{{ warningCount }}条</div>
<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>
<!-- ==================== 分页 ==================== -->
<div class="pagination-bar">
<span class="total-text">共 {{ total }} 项数据</span>
<el-pagination
:current-page="currentPage"
:page-size="10"
:total="total"
background
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.high-frequency-container {
padding: 16px;
background: #f5f7fa;
min-height: calc(100vh - 84px);
box-sizing: border-box;
}
/* ==================== 搜索面板 ==================== */
.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;
}
/* 当前预警数 */
.warning-summary {
margin-bottom: 12px;
font-size: 15px;
font-weight: 700;
color: #303133;
}
/* ==================== 分页 ==================== */
.pagination-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.total-text {
color: #909399;
font-size: 14px;
}
</style>

356
zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/components/StatPane.vue
View File

@ -0,0 +1,356 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { getDicts } from '@/api/system/dict/data';
/** 维度：area=各区域 field=各领域 */
const props = defineProps<{
dimension: 'area' | 'field';
}>();
/** 统计行数据（各区域 / 各领域通用） */
interface StatRow {
id: number;
dimensionName: string;
enforcementCount: number | null;
inspectionCaseCount: number | null;
penaltyCaseCount: number | null;
coerciveCount: number | null;
}
// ======================== 查询条件 ========================
const queryParams = reactive({
enterpriseName: '' as string,
area: undefined as string | undefined,
field: 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 fieldOptions = [
{ label: '食品安全', value: 'food' },
{ label: '药品安全', value: 'drug' },
{ label: '特种设备', value: 'special_equipment' },
{ label: '产品质量', value: 'product' },
{ label: '计量', value: 'metrology' },
{ label: '认证认可', value: 'certification' }
];
const loadAreaDict = async () => {
try {
const res = await getDicts('address_type');
areaOptions.value = res.data || [];
} catch (e) {
console.error('加载所属区字典失败', e);
}
};
// ======================== 表格数据 ========================
const loading = ref(false);
const tableData = ref<StatRow[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(20);
const selectedRows = ref<StatRow[]>([]);
// 表格高度（与 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 = (): StatRow[] => {
const isArea = props.dimension === 'area';
const rows: StatRow[] = [
{
id: 1,
dimensionName: isArea ? '宝安区' : '食品安全',
enforcementCount: 996,
inspectionCaseCount: 996,
penaltyCaseCount: 996,
coerciveCount: 996
},
{
id: 2,
dimensionName: isArea ? '龙华区' : '特种设备',
enforcementCount: 990,
inspectionCaseCount: 990,
penaltyCaseCount: 990,
coerciveCount: 990
}
];
for (let i = 3; i <= 7; i++) {
rows.push({ id: i, dimensionName: '', enforcementCount: null, inspectionCaseCount: null, penaltyCaseCount: null, coerciveCount: null });
}
return rows;
};
const getList = async () => {
loading.value = true;
try {
// TODO: 接入真实接口后替换为接口返回数据
// const res = await listInspectionRegistration({
// dimension: props.dimension,
// ...queryParams,
// periodType: periodType.value,
// periodDate: periodDate.value,
// pageNum: currentPage.value,
// pageSize: pageSize.value
// });
tableData.value = buildMockRows();
total.value = 658;
} finally {
loading.value = false;
}
};
/** 搜索 */
const handleSearch = () => {
currentPage.value = 1;
getList();
};
/** 重置 */
const handleReset = () => {
queryParams.enterpriseName = '';
queryParams.area = undefined;
queryParams.field = undefined;
periodType.value = 'month';
periodDate.value = '2026-09';
currentPage.value = 1;
pageSize.value = 20;
getList();
};
/** 导出 */
const handleExport = () => {
// TODO: 接入导出接口后实现文件下载
};
/** 多选 */
const handleSelectionChange = (selection: StatRow[]) => {
selectedRows.value = selection;
};
/** 切换每页条数 */
const handleSizeChange = (size: number) => {
pageSize.value = size;
currentPage.value = 1;
getList();
};
/** 翻页 */
const handlePageChange = (page: number) => {
currentPage.value = page;
getList();
};
onMounted(() => {
if (props.dimension === 'area') {
loadAreaDict();
}
getList();
nextTick(() => calcTableHeight());
window.addEventListener('resize', calcTableHeight);
});
onUnmounted(() => {
window.removeEventListener('resize', calcTableHeight);
});
defineExpose({ calcTableHeight });
</script>
<template>
<div class="stat-pane">
<!-- ==================== 搜索区域 ==================== -->
<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 v-if="dimension === 'area'" label="所属区">
<el-select
v-model="queryParams.area"
placeholder="请选择"
class="search-select"
clearable
>
<el-option v-for="item in areaOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
</el-select>
</el-form-item>
<el-form-item v-else label="所属领域">
<el-select
v-model="queryParams.field"
placeholder="请选择"
class="search-select"
clearable
>
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</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>
<!-- ==================== 表格区域（表格样式对齐 /statistics/administrative/enterprise-enforcement） ==================== -->
<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].dimensionName ? $index + 1 : '' }}
</template>
</el-table-column>
<el-table-column prop="dimensionName" :label="dimension === 'area' ? '所属区' : '所属领域'" min-width="200" align="center" />
<el-table-column label="行政执法数" min-width="160" align="center">
<template #default="{ row }">
<span v-if="row.enforcementCount !== null">{{ row.enforcementCount }}次</span>
</template>
</el-table-column>
<el-table-column label="行政检查案件数" min-width="180" align="center">
<template #default="{ row }">
<span v-if="row.inspectionCaseCount !== null">{{ row.inspectionCaseCount }}次</span>
</template>
</el-table-column>
<el-table-column label="行政处罚案件数" min-width="180" align="center">
<template #default="{ row }">
<span v-if="row.penaltyCaseCount !== null">{{ row.penaltyCaseCount }}次</span>
</template>
</el-table-column>
<el-table-column label="行政处罚强制数" min-width="180" align="center">
<template #default="{ row }">
<span v-if="row.coerciveCount !== null">{{ row.coerciveCount }}次</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- ==================== 分页（与 /statistics/administrative/enterprise-enforcement 保持一致） ==================== -->
<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>
</div>
</template>
<style scoped lang="scss">
.stat-pane {
box-sizing: border-box;
}
/* ==================== 搜索面板 ==================== */
.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;
}
}
/* ==================== 表格面板 ==================== */
/* el-table 不做任何自定义皮肤覆盖，与
efcode/report/registration/indexList.vue（/statistics/administrative/enterprise-enforcement）
保持 100% 一致：原生 border + stripe + 动态高度 */
.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;
}
</style>

38
zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/index.vue
View File

@ -0,0 +1,38 @@
<script setup lang="ts">
import { nextTick, ref } from 'vue';
import StatPane from './components/StatPane.vue';
// area=各区域 field=各领域
const activeTab = ref<'area' | 'field'>('area');
/** 页签切换后通知表格重新计算高度（懒加载/隐藏页签中的 ECharts 式尺寸需要重算） */
const handleTabChange = () => {
nextTick(() => {
window.dispatchEvent(new Event('resize'));
});
};
</script>
<template>
<div class="app-container">
<el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
<el-tab-pane label="各区域" name="area" lazy>
<StatPane dimension="area" />
</el-tab-pane>
<el-tab-pane label="各领域" name="field" lazy>
<StatPane dimension="field" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<style scoped lang="scss">
.app-container {
padding: 16px;
}
/* 卡片式页签（与 efcode/report/registration/index.vue 保持一致） */
:deep(.el-tabs--border-card) {
box-shadow: none;
}
</style>

340
zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue
View File

@ -0,0 +1,340 @@
<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: 接入导出接口后实现文件下载
};
/** 查看详情 */
const handleDetail = (_row: EnterpriseRow) => {
// TODO: 待详情页面创建后放开路由跳转
};
/** 多选 */
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="key-enterprise-container">
<!-- ==================== 搜索区域 ==================== -->
<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>
<!-- ==================== 表格区域（表格样式对齐 /statistics/administrative/enterprise-enforcement） ==================== -->
<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>
</div>
</template>
<style scoped lang="scss">
.key-enterprise-container {
padding: 16px;
background: #f5f7fa;
min-height: calc(100vh - 84px);
box-sizing: border-box;
}
/* ==================== 搜索面板 ==================== */
.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;
}
}
/* ==================== 表格面板 ==================== */
/* el-table 不做任何自定义皮肤覆盖，与
efcode/report/registration/indexList.vue（/statistics/administrative/enterprise-enforcement）
保持 100% 一致：原生 border + stripe + 动态高度 */
.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;
}
</style>

88
zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/situation-trend/index.vue
View File

@ -0,0 +1,88 @@
<script setup lang="ts">
import { ref, reactive } from 'vue';
// 查询参数
const queryParams = reactive({
area: undefined as string | undefined,
field: undefined as string | undefined,
dateRange: [] as string[]
});
const loading = ref(false);
/** 查询 */
const handleQuery = () => {
loading.value = true;
// TODO: 调用对应API加载数据
setTimeout(() => {
loading.value = false;
}, 500);
};
/** 重置 */
const handleReset = () => {
queryParams.area = undefined;
queryParams.field = undefined;
queryParams.dateRange = [];
};
</script>
<template>
<div class="app-container">
<!-- 搜索区域 -->
<el-card shadow="hover" class="mb-[10px]">
<el-form :inline="true" :model="queryParams" label-width="100px">
<el-form-item label="所属区域">
<el-select v-model="queryParams.area" placeholder="请选择区域" clearable style="width: 180px">
<el-option label="福田区" value="futian" />
<el-option label="罗湖区" value="luohu" />
<el-option label="南山区" value="nanshan" />
<el-option label="盐田区" value="yantian" />
<el-option label="宝安区" value="baoan" />
<el-option label="龙岗区" value="longgang" />
<el-option label="龙华区" value="longhua" />
<el-option label="坪山区" value="pingshan" />
<el-option label="光明区" value="guangming" />
<el-option label="大鹏新区" value="dapeng" />
</el-select>
</el-form-item>
<el-form-item label="监测领域">
<el-select v-model="queryParams.field" placeholder="请选择领域" clearable style="width: 180px">
<el-option label="食品安全" value="food" />
<el-option label="药品安全" value="drug" />
<el-option label="特种设备" value="special_equipment" />
<el-option label="产品质量" value="product" />
<el-option label="计量" value="metrology" />
<el-option label="认证认可" value="certification" />
</el-select>
</el-form-item>
<el-form-item label="统计时间">
<el-date-picker
v-model="queryParams.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 260px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
<el-button icon="Refresh" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 内容区域 -->
<el-card shadow="hover" v-loading="loading">
<el-empty description="暂无数据，待接口接入后展示态势趋势监测分析数据" />
</el-card>
</div>
</template>
<style scoped lang="scss">
.app-container {
padding: 16px;
}
</style>

87
zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/trend-behavior/index.vue
View File

@ -0,0 +1,87 @@
<script setup lang="ts">
import { ref, reactive } from 'vue';
// 查询参数
const queryParams = reactive({
area: undefined as string | undefined,
behaviorType: undefined as string | undefined,
dateRange: [] as string[]
});
const loading = ref(false);
/** 查询 */
const handleQuery = () => {
loading.value = true;
// TODO: 调用对应API加载数据
setTimeout(() => {
loading.value = false;
}, 500);
};
/** 重置 */
const handleReset = () => {
queryParams.area = undefined;
queryParams.behaviorType = undefined;
queryParams.dateRange = [];
};
</script>
<template>
<div class="app-container">
<!-- 搜索区域 -->
<el-card shadow="hover" class="mb-[10px]">
<el-form :inline="true" :model="queryParams" label-width="100px">
<el-form-item label="所属区域">
<el-select v-model="queryParams.area" placeholder="请选择区域" clearable style="width: 180px">
<el-option label="福田区" value="futian" />
<el-option label="罗湖区" value="luohu" />
<el-option label="南山区" value="nanshan" />
<el-option label="盐田区" value="yantian" />
<el-option label="宝安区" value="baoan" />
<el-option label="龙岗区" value="longgang" />
<el-option label="龙华区" value="longhua" />
<el-option label="坪山区" value="pingshan" />
<el-option label="光明区" value="guangming" />
<el-option label="大鹏新区" value="dapeng" />
</el-select>
</el-form-item>
<el-form-item label="行为类型">
<el-select v-model="queryParams.behaviorType" placeholder="请选择类型" clearable style="width: 180px">
<el-option label="执法检查" value="inspection" />
<el-option label="投诉举报" value="complaint" />
<el-option label="案件查办" value="case" />
<el-option label="应急处置" value="emergency" />
<el-option label="日常监管" value="daily" />
</el-select>
</el-form-item>
<el-form-item label="统计时间">
<el-date-picker
v-model="queryParams.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 260px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
<el-button icon="Refresh" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 内容区域 -->
<el-card shadow="hover" v-loading="loading">
<el-empty description="暂无数据，待接口接入后展示趋势行为监测分析数据" />
</el-card>
</div>
</template>
<style scoped lang="scss">
.app-container {
padding: 16px;
}
</style>
Write Preview
Loading…
Cancel
Save