2025-06-24 18:58:59 +08:00
..
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00
2025-06-24 18:58:59 +08:00

Mock数据使用说明

文件说明

以下是为上海地图大屏组件创建的模拟数据文件:

  1. getAllCourse.json - 总分数据
  2. getAllData.json - 各区域数据
  3. getCheckMonitoringValue.json - 抽检监测数据
  4. getCheckAssessmentValue.json - 抽查考核数据
  5. getIstrativeSanctionValue.json - 行政处罚数据
  6. getComplaintReportValue.json - 投诉举报数据
  7. getInformationTracingValue.json - 信息追溯数据
  8. getLawEnforcementInspectionValue.json - 执法检查数据
  9. mockConfig.js - Mock拦截器配置

使用方法

方法一使用axios-mock-adapter推荐

  1. 安装依赖:
npm install axios-mock-adapter --save-dev
  1. 在项目入口文件如main.ts或main.js中引入mock配置
// 仅在开发环境中启用mock
if (process.env.NODE_ENV === 'development') {
  require('./public/mock/mockConfig.js');
}

方法二直接修改API文件临时使用

src/api/SettingAPI.js或对应的API文件中可以临时修改API函数直接返回模拟数据例如

// 原API函数
export const getAllCourse = (month, stage, district) => {
  // 临时替换为使用模拟数据
  return Promise.resolve({
    data: require('../../public/mock/getAllCourse.json').data
  });
  
  // 原代码注释掉
  // return request({
  //   url: '/settings/getAllCourse',
  //   method: 'get',
  //   params: { month, stage, district }
  // });
};

方法三:简易版本(不需要安装额外依赖)

创建一个简单的mock服务文件

// src/mock/index.js
import { getAllCourse, getAllData /* 其他API函数 */ } from '../api/SettingAPI';

// 劫持原函数
const originalGetAllCourse = getAllCourse;
const originalGetAllData = getAllData;
// ... 其他原函数

// 替换为模拟数据版本
export function enableMock() {
  window.getAllCourse = function() {
    return Promise.resolve({ data: require('../../public/mock/getAllCourse.json').data });
  };
  window.getAllData = function() {
    return Promise.resolve({ data: require('../../public/mock/getAllData.json').data });
  };
  // ... 其他API替换
}

// 恢复原函数
export function disableMock() {
  window.getAllCourse = originalGetAllCourse;
  window.getAllData = originalGetAllData;
  // ... 恢复其他API
}

然后在需要的地方调用enableMock()来启用模拟数据。

数据修改

您可以随时编辑JSON文件中的数据来测试不同的显示效果所有文件都位于public/mock/目录下。