From 4ccfd36206c608c115ed7e1b0a51321bb866ab86 Mon Sep 17 00:00:00 2001
From: "wangmingyong@163.com" <wangmingyong@163.com>
Date: Wed, 16 Sep 2026 09:17:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8A=A5=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.env.development-wmy-cust                 |   3 +-
 .../efcode/trend/high-frequency/index.vue     | 355 +++++++++++++++++
 .../components/StatPane.vue                   | 356 ++++++++++++++++++
 .../trend/inspection-registration/index.vue   |  38 ++
 .../efcode/trend/key-enterprise/index.vue     | 340 +++++++++++++++++
 .../efcode/trend/situation-trend/index.vue    |  88 +++++
 .../efcode/trend/trend-behavior/index.vue     |  87 +++++
 7 files changed, 1266 insertions(+), 1 deletion(-)
 create mode 100644 zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/high-frequency/index.vue
 create mode 100644 zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/components/StatPane.vue
 create mode 100644 zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/index.vue
 create mode 100644 zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue
 create mode 100644 zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/situation-trend/index.vue
 create mode 100644 zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/trend-behavior/index.vue

diff --git a/zdxt-web-client/zdxt-admin-plus-ui/.env.development-wmy-cust b/zdxt-web-client/zdxt-admin-plus-ui/.env.development-wmy-cust
index 8f6a8406..1bffb228 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/.env.development-wmy-cust
+++ b/zdxt-web-client/zdxt-admin-plus-ui/.env.development-wmy-cust
@@ -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/'
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/high-frequency/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/high-frequency/index.vue
new file mode 100644
index 00000000..8c9f9493
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/high-frequency/index.vue
@@ -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>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/components/StatPane.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/components/StatPane.vue
new file mode 100644
index 00000000..b899a1cb
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/components/StatPane.vue
@@ -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>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/index.vue
new file mode 100644
index 00000000..4af28c3b
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/inspection-registration/index.vue
@@ -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>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue
new file mode 100644
index 00000000..67440a8d
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/key-enterprise/index.vue
@@ -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>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/situation-trend/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/situation-trend/index.vue
new file mode 100644
index 00000000..5d482684
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/situation-trend/index.vue
@@ -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>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/trend-behavior/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/trend-behavior/index.vue
new file mode 100644
index 00000000..9121e062
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/efcode/trend/trend-behavior/index.vue
@@ -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>