-
+
{{ item.name }}
-
{{ item.value }}
-
{{ item.subValue }}
+
{{
+ item.total }}
+
{{ item.percentage }}
@@ -136,10 +138,10 @@ const currentYearValue = new Date().getFullYear();
// 根据年份获取季度列表
const getQuarterColumns = (year) => {
const quarters = [
- { text: '1', value: 'Q1' },
- { text: '2', value: 'Q2' },
- { text: '3', value: 'Q3' },
- { text: '4', value: 'Q4' },
+ { text: '1', value: '1' },
+ { text: '2', value: '2' },
+ { text: '3', value: '3' },
+ { text: '4', value: '4' },
];
// 如果是当前年份，只显示到当前季度
if (Number(year) === currentYearValue) {
@@ -175,48 +177,35 @@ const toggleFilter = (selectedList, value, allKey = 'all') => {
};
// ========== 响应式状态 ==========
-const userType = ref('personal');
-const period = ref('year');
+const searchType = ref('user');
+const dateType = ref('year');
const currentYear = ref(new Date().getFullYear());
const activeTab = ref(0);
// 统计数据
const statistics = ref({
- totalCount: 0,
- monthOverMonth: 0,
- yearOverYear: 0,
- jointLaw: { noticeCount: 0, entrustedCount: 0, evaluateCount: 0, complaintCount: 0 },
+ registrationTotal: 0, // 涉企检查数量
+ uniteTotal: 0, // 联合检查数量
+ authTotal: 0, // 委托检查数量
+ noticeTotal: 0, // 执法检查预告数量
+ warningTotal: 0, // 执法预警数量
+ enterpriseTotal: 0, // 企业数量
+ complaintTotal: 0, // 投诉数量
+ evaluateTotal: 0, // 评论数量
+ plantTotal: 0, // 计划数量
+ huanPercentage: 0, // 环比
+ tongPercentage: 0, // 同比
});
// 类别数据（使用 shallowRef 优化性能）
-const lawCategoryList = shallowRef([
- { name: '行政检查', value: 11, subValue: '100%' },
- { name: '行政处罚', value: 0, subValue: '-' },
- { name: '行政许可', value: 0, subValue: '-' },
- { name: '行政强制', value: 0, subValue: '-' },
- { name: '行政征收', value: 0, subValue: '-' },
- { name: '行政给付', value: 0, subValue: '-' },
- { name: '行政确认', value: 0, subValue: '-' },
- { name: '行政登记', value: 0, subValue: '-' },
- { name: '行政裁决', value: 0, subValue: '-' },
- { name: '文书送达', value: 0, subValue: '-' },
+const lawEnforceCategoryList = shallowRef([
]);
-const enterpriseCategoryList = shallowRef([
- { name: '有限责任公司', value: 5, subValue: '45.45%' },
- { name: '股份有限公司', value: 3, subValue: '27.27%' },
- { name: '个人独资企业', value: 2, subValue: '18.18%' },
- { name: '合伙企业', value: 1, subValue: '9.1%' },
- { name: '个体工商户', value: 4, subValue: '-' },
- { name: '其他', value: 0, subValue: '-' },
-
+const companyOrgTypeList = shallowRef([
]);
-const complaintCategoryList = shallowRef([
- { name: '违规执法', value: 2, subValue: '40%' },
- { name: '入企不扫码', value: 1, subValue: '20%' },
- { name: '违法执法', value: 3, subValue: '40%' },
- { name: '其他', value: 0, subValue: '-' },
+const complaintTypeList = shallowRef([
+
]);
// Tab 配置
@@ -228,9 +217,9 @@ const tabConfig = [
// Tab 数据映射
const tabDataMap = {
- law: lawCategoryList,
- enterprise: enterpriseCategoryList,
- complaint: complaintCategoryList,
+ law: lawEnforceCategoryList,
+ enterprise: companyOrgTypeList,
+ complaint: complaintTypeList,
};
// 当前Tab数据
@@ -270,14 +259,14 @@ watch(() => selectedQuarter.value[0], (newYear) => {
// 动画数字
const animatedTotal = ref(0);
const animatedNotice = ref(0);
-const animatedEntrusted = ref(0);
+const animatedAuth = ref(0);
const animatedEvaluate = ref(0);
const animatedComplaint = ref(0);
// 根据当前周期显示的时间文本
const periodDisplayText = computed(() => {
// 如果是筛选模式，显示日期范围
- if (period.value === 'other') {
+ if (dateType.value === 'day') {
const [startDate, endDate] = selectedDateRange.value;
const formatDate = (date) => {
const d = new Date(date);
@@ -286,20 +275,20 @@ const periodDisplayText = computed(() => {
return `${formatDate(startDate)} - ${formatDate(endDate)}`;
}
- if (period.value === 'month') {
+ if (dateType.value === 'month') {
if (selectedMonth.value && selectedMonth.value.length === 2) {
return `${selectedMonth.value[0]}年${selectedMonth.value[1]}月`;
}
return `${currentYear.value}年`;
- } else if (period.value === 'quarter') {
+ } else if (dateType.value === 'quarter') {
if (selectedQuarter.value && selectedQuarter.value.length === 2) {
const year = selectedQuarter.value[0];
const quarter = selectedQuarter.value[1];
const quarterMap = {
- 'Q1': '1季度',
- 'Q2': '2季度',
- 'Q3': '3季度',
- 'Q4': '4季度'
+ '1': '1季度',
+ '2': '2季度',
+ '3': '3季度',
+ '4': '4季度'
};
return `${year}年${quarterMap[quarter] || quarter}`;
}
@@ -309,10 +298,10 @@ const periodDisplayText = computed(() => {
}
});
-// 联合执法统计数据
+// 统计数据列表
const jointStatsList = computed(() => [
{ label: '执法预告', value: animatedNotice.value, isRed: false },
- { label: '委托执法', value: animatedEntrusted.value > 0 ? animatedEntrusted.value : '-', isRed: false },
+ { label: '委托执法', value: animatedAuth.value > 0 ? animatedAuth.value : '-', isRed: false },
{ label: '评价', value: animatedEvaluate.value, isRed: false },
{ label: '投诉', value: animatedComplaint.value > 0 ? animatedComplaint.value : '-', isRed: animatedComplaint.value > 0 },
]);
@@ -331,62 +320,76 @@ const yearColumns = computed(() => {
// ========== 数据加载与动画 ==========
const loadStatistics = () => {
isLoading.value = true;
-
+
// 构建请求参数
const params = {
- userType: userType.value, // 'personal' 或 'company'
- period: period.value, // 'month', 'quarter', 'year', 'other'
+ searchType: searchType.value, // 'user' 或 'bureauDept'
+ dateType: dateType.value, // 'month', 'quarter', 'year', 'other'
};
-
+
// 根据周期类型添加具体参数
- if (period.value === 'month') {
+ if (dateType.value === 'month') {
params.year = selectedMonth.value[0];
params.month = selectedMonth.value[1];
- } else if (period.value === 'quarter') {
+ } else if (dateType.value === 'quarter') {
params.year = selectedQuarter.value[0];
params.quarter = selectedQuarter.value[1];
- } else if (period.value === 'year') {
+ } else if (dateType.value === 'year') {
params.year = currentYear.value;
- } else if (period.value === 'other' && selectedDateRange.value) {
+ } else if (dateType.value === 'day' && selectedDateRange.value) {
const formatDate = (date) => {
const d = new Date(date);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
- params.startDate = formatDate(selectedDateRange.value[0]);
- params.endDate = formatDate(selectedDateRange.value[1]);
+ params.beginTime = formatDate(selectedDateRange.value[0]);
+ params.endTime = formatDate(selectedDateRange.value[1]);
}
-
+
getComprehensiveAnalysis(params, (res) => {
if (res.code === 200 || res.code === 0) {
const data = res.data || {};
-
+
statistics.value = {
- totalCount: data.totalCount || 0,
- monthOverMonth: data.monthOverMonth || 0,
- yearOverYear: data.yearOverYear || 0,
- jointLaw: {
- noticeCount: data.jointLaw?.noticeCount || 0,
- entrustedCount: data.jointLaw?.entrustedCount || 0,
- evaluateCount: data.jointLaw?.evaluateCount || 0,
- complaintCount: data.jointLaw?.complaintCount || 0,
- },
+ registrationTotal: data.registrationTotal || 0, // 涉企检查数量
+ uniteTotal: data.uniteTotal || 0, // 联合检查数量
+ authTotal: data.authTotal || 0, // 委托检查数量
+ noticeTotal: data.noticeTotal || 0, // 执法检查预告数量
+ warningTotal: data.warningTotal || 0, // 执法预警数量
+ enterpriseTotal: data.enterpriseTotal || 0, // 企业数量
+ complaintTotal: data.complaintTotal || 0, // 投诉数量
+ evaluateTotal: data.evaluateTotal || 0, // 评论数量
+ plantTotal: data.plantTotal || 0, // 计划数量
+ huanPercentage: data.huanPercentage || 0, // 环比
+ tongPercentage: data.tongPercentage || 0, // 同比
};
-
- // 更新执法类别数据
- if (data.lawCategoryList && Array.isArray(data.lawCategoryList)) {
- lawCategoryList.value = data.lawCategoryList;
+
+ // 更新执法类别数据（使用后台返回的数据）
+ if (data.lawEnforceCategoryList && Array.isArray(data.lawEnforceCategoryList)) {
+ lawEnforceCategoryList.value = data.lawEnforceCategoryList.map(item => ({
+ name: item.lawEnforceCategory || '',
+ total: item.lawEnforceCategoryNumber || 0,
+ percentage: item.percentage ? `${item.percentage}%` : '-'
+ }));
}
-
- // 更新企业类别数据
- if (data.enterpriseCategoryList && Array.isArray(data.enterpriseCategoryList)) {
- enterpriseCategoryList.value = data.enterpriseCategoryList;
+
+ // 更新企业类别数据（使用后台返回的数据）
+ if (data.companyOrgTypeList && Array.isArray(data.companyOrgTypeList)) {
+ companyOrgTypeList.value = data.companyOrgTypeList.map(item => ({
+ name: item.companyOrgType || '',
+ total: item.companyOrgTypeNumber || 0,
+ percentage: item.percentage ? `${item.percentage}%` : '-'
+ }));
}
-
- // 更新投诉类别数据
- if (data.complaintCategoryList && Array.isArray(data.complaintCategoryList)) {
- complaintCategoryList.value = data.complaintCategoryList;
+
+ // 更新投诉类别数据（使用后台返回的数据）
+ if (data.complaintTypeList && Array.isArray(data.complaintTypeList)) {
+ complaintTypeList.value = data.complaintTypeList.map(item => ({
+ name: item.complaintType || '',
+ total: item.complaintTypeNumber || 0,
+ percentage: item.percentage ? `${item.percentage}%` : '-'
+ }));
}
-
+
startNumberAnimation();
} else {
showToast(res.msg || '加载失败');
@@ -402,11 +405,11 @@ const loadStatistics = () => {
const startNumberAnimation = () => {
const duration = 1000;
const startTime = performance.now();
- const targetTotal = statistics.value.totalCount;
- const targetNotice = statistics.value.jointLaw.noticeCount;
- const targetEntrusted = statistics.value.jointLaw.entrustedCount;
- const targetEvaluate = statistics.value.jointLaw.evaluateCount;
- const targetComplaint = statistics.value.jointLaw.complaintCount;
+ const targetTotal = statistics.value.registrationTotal; // 涉企检查数量
+ const targetNotice = statistics.value.noticeTotal; // 执法检查预告数量
+ const targetAuth = statistics.value.authTotal; // 委托检查数量
+ const targetEvaluate = statistics.value.evaluateTotal; // 评论数量
+ const targetComplaint = statistics.value.complaintTotal; // 投诉数量
const animate = (currentTime) => {
const elapsed = currentTime - startTime;
@@ -415,7 +418,7 @@ const startNumberAnimation = () => {
animatedTotal.value = Math.round(targetTotal * easeOut);
animatedNotice.value = Math.round(targetNotice * easeOut);
- animatedEntrusted.value = Math.round(targetEntrusted * easeOut);
+ animatedAuth.value = Math.round(targetAuth * easeOut);
animatedEvaluate.value = Math.round(targetEvaluate * easeOut);
animatedComplaint.value = Math.round(targetComplaint * easeOut);
@@ -428,21 +431,16 @@ const startNumberAnimation = () => {
// 显示弹窗
const showMonthPicker = () => {
- period.value = 'month';
selectedMonth.value = [now.getFullYear(), now.getMonth() + 1];
showMonthSelector.value = true;
- isFilterMode.value = false; // 退出筛选模式
};
const showQuarterPicker = () => {
- period.value = 'quarter';
selectedQuarter.value = [String(now.getFullYear()), `Q${Math.ceil((now.getMonth() + 1) / 3)}`];
showQuarterSelector.value = true;
- isFilterMode.value = false; // 退出筛选模式
};
const showYearPeriodPicker = () => {
- period.value = 'year';
selectedYearPeriod.value = ['2026'];
showYearSelector.value = true;
};
@@ -453,16 +451,15 @@ const showYearPicker = () => {
};
const showFilterPopup = () => {
- period.value = 'other';
showFilterSelector.value = true;
};
// 根据当前周期显示对应的选择器
const showPeriodPicker = () => {
- if (period.value === 'month') {
+ if (dateType.value === 'month') {
selectedMonth.value = selectedMonth.value || [now.getFullYear(), now.getMonth() + 1];
showMonthSelector.value = true;
- } else if (period.value === 'quarter') {
+ } else if (dateType.value === 'quarter') {
const currentQuarter = Math.ceil((new Date().getMonth() + 1) / 3);
selectedQuarter.value = [String(now.getFullYear()), `Q${currentQuarter}`];
showQuarterSelector.value = true;
@@ -474,42 +471,44 @@ const showPeriodPicker = () => {
// 确认选择
const confirmMonth = (value) => {
- showMonthSelector.value = false;
+ console.log(value);
+ onMonthConfirm(value);
};
-const confirmQuarter = () => {
- showToast(`已选择${periodDisplayText.value}`);
- showQuarterSelector.value = false;
+const confirmQuarter = (value) => {
+ onQuarterConfirm(value);
};
-const confirmYear = () => {
- currentYear.value = Number(selectedYearPeriod.value[0]);
- showToast(`已选择${periodDisplayText.value}`);
- showYearSelector.value = false;
+const confirmYear = (value) => {
+ onYearConfirm(value);
};
-const confirmFilter = () => {
- showToast('筛选已更新');
- showFilterSelector.value = false;
+const confirmFilter = (dates) => {
+ onConfirm(dates);
};
const onMonthConfirm = (value) => {
- selectedMonth.value = value;
- showToast(`已选择${periodDisplayText.value}`);
+ dateType.value = 'month';
+ // van-date-picker 返回的是对象，包含 selectedValues 属性
+ const selectedValues = value.selectedValues || value;
+ if (Array.isArray(selectedValues)) {
+ selectedMonth.value = selectedValues;
+ }
showMonthSelector.value = false;
loadStatistics();
};
const onQuarterConfirm = ({ selectedValues }) => {
+ dateType.value = 'quarter';
if (Array.isArray(selectedValues)) {
selectedQuarter.value = selectedValues;
}
- showToast(`已选择${periodDisplayText.value}`);
showQuarterSelector.value = false;
loadStatistics();
};
const onYearConfirm = (value) => {
+ dateType.value = 'year';
const selectedValues = value.selectedValues || value;
if (typeof selectedValues === 'string') {
@@ -519,11 +518,11 @@ const onYearConfirm = (value) => {
selectedYearPeriod.value = selectedValues;
currentYear.value = Number(selectedValues[0]);
}
- showToast(`已选择${periodDisplayText.value}`);
showYearSelector.value = false;
loadStatistics();
};
const onConfirm = (dates) => {
+ dateType.value = 'day';
if (dates && dates.length === 2) {
selectedDateRange.value = dates;
isFilterMode.value = true;
@@ -546,8 +545,12 @@ onMounted(() => {
loadStatistics();
});
-// 监听用户类型和周期变化，重新加载数据
-watch([userType, period], () => {
+// 只监听用户类型变化，周期变化不在此处触发接口调用
+watch(searchType, () => {
+ // 清空类别数据，确保切换时页面能正确显示加载状态
+ lawEnforceCategoryList.value = [];
+ companyOrgTypeList.value = [];
+ complaintTypeList.value = [];
loadStatistics();
});
@@ -945,7 +948,8 @@ watch([userType, period], () => {
text-align: center;
position: relative;
overflow: hidden;
- transition: all 0.3s ease;
+ transition: all 0.15s ease;
+ border: 1px solid transparent;
&:active {
transform: scale(0.97);
@@ -974,6 +978,18 @@ watch([userType, period], () => {
}
}
+/* ===== 投诉类别样式 ===== */
+.category-grid {
+ .complaint-item {
+ background: #fff5f5 !important;
+ border-color: #ffccc7 !important;
+
+ .complaint-value {
+ color: #ff4d4f !important;
+ }
+ }
+}
+
/* ===== 弹窗样式 ===== */
.picker-header {
display: flex;