生成统计数据与前端整合

1、 添加路由、添加页面

1）在guli_admin/src/router/index.vue页面中添加统计数据的路由。

{
    path: '/sta',
    component: Layout,
    redirect: '/sta/table',
    name: '统计分析',
    meta: { title: '统计分析', icon: 'example' },
    children: [
      {
        path: 'create',
        name: '生成统计数据',
        component: () => import('@/views/sta/create'),
        meta: { title: '生成统计数据', icon: 'table' }
      },
      {
        path: 'show',
        name: '统计数据展示',
        component: () => import('@/views/sta/show'),
        meta: { title: '统计数据展示', icon: 'tree' }
      }
    ]
  },

2）在guli_admin/src/views/sta目录下新建create.vue页面与show.vue页面。

2、 实现api接口方法sta.js

在guli_admin/src/api下创建sta.js文件。

import request from '@/utils/request'

export default {

  //生成统计数据
  createData(day){
    return request({
      url: `/staservice/stadaily/createData/${day}`,
      method: 'post'
    })
  }
}

3、chart.veu页面实现

<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="日期">
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择要统计的日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>

      <el-button
        :disabled="btnDisabled"
        type="primary"
        @click="create()">生成</el-button>
    </el-form>

  </div>
</template>

4、chart.veu页面js实现

<script>
import sta from "@/api/sta";
export default {
  data() {
    return {
      day: "",
      btnDisabled: false
    };
  },
  created() {},
  methods: {
    create() {
      sta.createData(this.day).then(response => {
        //提示
        this.$message({
          type: "success",
          message: "生成数据成功!"
        });
      });
    }
  }
};
</script>