zoukankan      html  css  js  c++  java
  • 在线教育项目-day17【统计分析前端实现】

    1.新建路由

     {
        path: '/sta',
        component: Layout,
        redirect: '/sta/create',
        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.在api创建sta.js

    import request from '@/utils/request'
    export default {
        //1 生成统计数据
        createData(day) {
            return request({
                url: '/edustatistics/statistics-daily/'+day,
                method: 'get'
              })
        }
    }

    3、页面及方法

    <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>
    <script>
    import daily from '@/api/sta/sta'
    export default {
        data(){
            return {
                day: '',
                btnDisabled: false
    
            }
        },
        created(){
    
        },
        methods:{
            create(){
                this.btnDisabled = true
                daily.createData(this.day)
                    .then(response => {
                        
                        this.$message({
                            type: 'success',
                            message: '生成成功'
                        })
                    })
            }
        }
    }
    </script>

    效果:

  • 相关阅读:
    第十七节--Hystrix服务熔断
    第十六节--Hystrix之服务降级全局配置
    第十五节--Hystrix之服务降级
    第十四节--Hystrix断路器
    第十三节--OpenFeign服务接口调用
    第十二节--Ribbon
    第十一节--三个注册中心对比
    uni-app开发小说阅读器
    H5+微信朋友、朋友圈分享
    uni-app开发音乐电子书库
  • 原文地址:https://www.cnblogs.com/dmzna/p/12887801.html
Copyright © 2011-2022 走看看