技術標籤：javajava

一API

import request from '@/utils/request'
export default {
  createStatistics(day) {
    return request({
      // baseURL: 'http://127.0.0.1:8180',
      url: `/admin/statistics/daily/create/${day}`,
      method: 'post'
    })
  }
}

二路由

1新建頁面元件

statistics
-- chart.vue
-- create.vue

2路由配置

  {
    path: '/statistics',
    component: Layout,
    redirect: '/statistics/create',
    name: 'Statistics',
    meta: { title: '統計分析' },
    children: [
      {
        path: 'create',
        name: 'StatisticsCreate',
        component: () => import('@/views/statistics/create'),
        meta: { title: '生成統計' }
      },
      {
        path: 'chart',
        name: 'StatisticsChart',
        component: () => import('@/views/statistics/chart'),
        meta: { title: '統計圖表' }
      }
    ]
  },
 

三頁面元件

1html

<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="genarateData()">生成</el-button>
    </el-form>
  </div>
</template>
 

2script

<script>
import statisticsApi from '@/api/statistics'

export default {
  data() {
    return {
      day: '',
      btnDisabled: false // 按鈕禁用狀態
    }
  },

  methods: {
    // 生成統計資料
    genarateData() {
      this.btnDisabled = true
      statisticsApi.createStatistics(this.day).then(response => {
        this.btnDisabled = false
        this.$message.success(response.message)
      })
    }
  }
}
</script>
 

四後端閘道器配置

- id: service-statistics
  uri: lb://service-statistics
  predicates:
  - Path=/*/statistics/**

五測試