数据大屏项目开发中，我们需要使用mockjs返回四组数据，分别为本周 本月 上月 本年。

项目框架

vue3 vite js

请求接口

我们监听active的变化，并将数据传值给接口。

export default {
  name: "item",
  components: {echarts, tab, numcard},
  data() {
    return {
      list: [],
      active: '本周',
      tabList: [ {
        title: '本周',
        id: '本周',
      }, {
        title: '本月',
        id: '本月',
      },{
        title: '上月',
        id: '上月',
      }, {
        title: '本年',
        id: '本年',
      }],
    }
  },
  watch: {
    active() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const res = await deviceEnergy({type: this.active});
        this.list = res.data;
        console.log(this.list)
      } catch (err) {
        console.error(err);
      }
    },
  },
}

接口封装

export function deviceEnergy(data) {
    return request({
        url: '/api/device-energy?' + qs.stringify(data),
        method: 'get',
        data
    })
}

mockjs接口模拟

我们使用dayjs来处理日期，通过mockjs来前端传过来type类型，根据type类型返回不同的数据。

封装四个方法

getThisWeek返回本周模拟数据
getThisMonth返回本月模拟数据
getLastMonth返回上月模拟数据
getThisYear返回本年月份模拟数据

import dayjs from 'dayjs'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import isBetween from 'dayjs/plugin/isBetween'
import advancedFormat from 'dayjs/plugin/advancedFormat'  // To support 'Do' format

dayjs.extend(weekOfYear)
dayjs.extend(isBetween)
dayjs.extend(advancedFormat)

function getThisWeek() {
    const startOfWeek = dayjs().startOf('week');
    const endOfWeek = dayjs().endOf('week');
    let current = startOfWeek;
    let days = [];

    while (current.isBefore(endOfWeek) || current.isSame(endOfWeek)) {
        days.push(current.format('MM-DD'));
        current = current.add(1, 'day');
    }
    return days;
}

function getThisMonth() {
    const startOfMonth = dayjs().startOf('month');
    const endOfMonth = dayjs().endOf('month');
    let current = startOfMonth;
    let days = [];

    while (current.isBefore(endOfMonth) || current.isSame(endOfMonth)) {
        days.push(current.format('MM-DD'));
        current = current.add(1, 'day');
    }
    return days;
}

function getLastMonth() {
    const startOfLastMonth = dayjs().subtract(1, 'month').startOf('month');
    const endOfLastMonth = dayjs().subtract(1, 'month').endOf('month');
    let current = startOfLastMonth;
    let days = [];

    while (current.isBefore(endOfLastMonth) || current.isSame(endOfLastMonth)) {
        days.push(current.format('MM-DD'));
        current = current.add(1, 'day');
    }
    return days;
}

function getThisYear() {
    let months = [];
    for (let i = 1; i <= 12; i++) {
        months.push(i);
    }
    return months;
}
{
    url: '/api/device-energy',
    method: 'get',
    response: (options) => {
        let dateList = [];
        var dateType = options.query.type;
        switch (dateType) {
            case '本周':
                dateList = getThisWeek();
                break;
            case '本月':
                dateList = getThisMonth();
                break;
            case '上月':
                dateList = getLastMonth();
                break;
            case '本年':
                dateList = getThisYear().map(month => `${month}`);  // Convert month number to string like "1-01"
                break;
        }

        var dataList = dateList.map(date => {
            return {
                name: date,
                value: Mock.Random.integer(10, 100)
            };
        });
        return {
            status: 200,
            message: 'success',
            data: dataList,
        };
    },
},

项目应用

vue3 可视化数据大屏 智慧照明数据大屏