jihe-dc/ruoyi-ui/src/views/index.vue

<template>
  <div class="app-container">

    <div>
      <el-row>

        <!-- CPU使用率 -->
        <el-col :span="6" class="card-box">
          <el-card>
            <div>
              <span class="meter-title">
                <i class="el-icon-odometer"></i>
                CPU使用率
              </span>
            </div>
            <div ref="systemCpuMeter" class="meter-chart"/>
          </el-card>
        </el-col>

        <!-- JVM CPU使用率 -->
        <el-col :span="6" class="card-box">
          <el-card>
            <div>
              <span class="meter-title">
                <i class="el-icon-odometer"></i>
                JVM CPU使用率
              </span>
            </div>
            <div ref="jvmCpuMeter" class="meter-chart"/>
          </el-card>
        </el-col>

        <!-- 系统内存占用 -->
        <el-col :span="6" class="card-box">
          <el-card>
            <div>
              <span class="meter-title">
                <i class="el-icon-odometer"></i>
                系统内存
              </span>
            </div>
            <div ref="systemMemoryMeter" class="meter-chart"/>
          </el-card>
        </el-col>

        <!-- JVM内存占用 -->
        <el-col :span="6" class="card-box">
          <el-card>
            <div>
              <span class="meter-title">
                <i class="el-icon-odometer"></i>
                JVM内存
              </span>
            </div>
            <div ref="jvmMemoryMeter" class="meter-chart"/>
          </el-card>
        </el-col>

      </el-row>
    </div>

    <!-- 设备消息 -->
    <div style="margin-top: 10px">
      <el-row>
        <el-col :span="24" class="card-box">
          <el-card>
            <div style="height: 60px">
              <span>设备消息</span>
              <div style="float: right">
                <el-radio-group v-model="messageMonitorTimeDimension">
                  <el-radio-button label="day">今日</el-radio-button>
                  <el-radio-button label="week">近一周</el-radio-button>
                  <el-radio-button label="month">近一月</el-radio-button>
                  <el-radio-button label="year">近一年</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  style="margin-left: 10px;"
                  v-model="messageMonitorTimePick"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="messageMonitorDateChange"
                >
                </el-date-picker>
              </div>
            </div>
            <div>
              <div ref="messageMonitor" style="height: 415px"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!--  TODO 暂时注释：没有响应的历史数据  -->
    <!-- JVM CPU 使用率趋势  -->
    <!-- <div style="margin-top: 10px">
      <el-row>
        <el-col :span="12" class="card-box">
          <el-card>
            <div style="height: 40px">
              <span>JVM CPU使用率趋势</span>
              <div style="float: right">
                <el-date-picker
                  v-model="cpuUsageTrend"
                  :picker-options="jvmCpuPickerOptions()"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="jvmCpuTrendsChange"
                >
                </el-date-picker>
              </div>
            </div>
            <div ref="jvmCpuTrends" style="height: 300px"/>
          </el-card>
        </el-col>
        <el-col :span="12" class="card-box">
          <el-card>
            <div style="height: 40px">
              <span>JVM内存使用趋势</span>
              <div style="float: right">
                <el-date-picker
                  v-model="jvmUsageTrend"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
              <div ref="jvmMemoryTrends" style="height: 300px"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDashboardData } from '@/api/dashboard'
import { formatDate } from '@/utils'

export default {
  name: 'Dashboard',
  data() {

    return {
      // 系统cpu使用率chart对象
      systemCpuChartMeter: undefined,
      // jvm cpu使用率chart对象
      jvmCpuChartMeter: undefined,
      // 系统内存chart对象
      systemMemoryChartMeter: undefined,
      // jvm内存chart对象
      jvmMemoryChartMeter: undefined,
      // 时间按钮选项
      messageMonitorTimeDimension: 'day',
      // 消息的开始时间与结束时间选择
      messageMonitorTimePick: [],
      // 设备消息趋势统chart对象
      messageMonitorChart: undefined,

      // 上行设备消息监控数据
      receivedMessageMonitor: [],
      // 下行设备消息监控数据
      sentMessageMonitor: [],

      // jvm cpu趋势chart对象
      jvmCpuTrendsChart: undefined,

      /*jvmUsageTrend: null,
      cpuUsageTrend: null*/

    }
  },
  watch: {
    messageMonitorTimeDimension: {
      immediate: true,
      handler() {
        this.timeDimensionChange()
      }
    },

    receivedMessageMonitor() {
      this.updateMessageMonitorChart('received_message')
    },
    sentMessageMonitor() {
      this.updateMessageMonitorChart('sent_message')
    },
  },
  mounted() {
    // 系统cpu使用率仪表初始化
    this.systemCpuChartMeterInit()
    // 订阅系统cpu使用率实时数据
    this.subCpuRealTimeData()

    // jvm cpu使用率仪表初始化
    this.jvmCpuChartMeterInit()
    // 订阅jvm cpu使用率实时数据
    this.subJvmCpuRealTimeData()

    // 系统内存使用率仪表初始化
    this.systemMemoryChartMeterInit()
    // 订阅系统内存实时数据
    this.subSystemMemoryRealTimeData()

    // jvm内存使用率仪表初始化
    this.jvmMemoryChartMeterInit()
    // 订阅jvm内存实时数据
    this.subJvmMemoryRealTimeData()

    // 设备消息char初始化
    this.messageMonitorChartInit()

    //  初始jvm cup趋势chart
    // this.jvmCpuTrendsChartInit()
  },
  destroyed() {
    // 取消系统cpu使用率实时数据订阅
    this.unsubCpuRealTimeData()
    // 取消jvm cpu使用率实时数据订阅
    this.unsubJvmCpuRealTimeData()
    // 取消系统内存实时数据订阅
    this.unsubSystemMemoryRealTimeData()
    // 取消jvm内存实时数据订阅
    this.unsubJvmMemoryRealTimeData()
  },
  methods: {

    /** 获取最近一小时开始时间与结束时间 */
    getLastHour() {
      const now = new Date()
      const start = new Date();
      start.setHours(start.getHours() - 1);
      return [start, now]
    },
    /** 获取今日的开始时间与结束时间 */
    getTodayTime() {
      const now = new Date()
      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      return [start, now]
    },
    /** 获取最近一周开始时间与结束时间 */
    getLastWeek() {
      const now = new Date()
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, now]
    },
    /** 获取最近一月开始时间与结束时间 */
    getLastMonth() {
      const now = new Date()
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, now]
    },
    /** 获取最近一年开始时间与结束时间 */
    getLastYear() {
      const now = new Date()
      const start = new Date();
      start.setFullYear(start.getFullYear() - 1);
      return [start, now]
    },

    /************************************ 仪表盘 **************************************/
    /** 系统cpu使用率仪表初始化 */
    systemCpuChartMeterInit() {
      this.systemCpuChartMeter = echarts.init(this.$refs.systemCpuMeter)
      this.systemCpuChartMeter.setOption({
        series: [
          {
            name: '百分之',
            radius: '100%',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 5,
            detail: {
              show: true,
              formatter: '{value}%',
              textStyle: {
                fontSize: 20
              }
            },
            data: [
              {
                value: 0
              }
            ],
            center: ['50%', '60%'],
            axisTick: { // 短刻度样式
              distance: -5, // 位置
              lineStyle: {
                width: 1,
                color: '#0063bb'
              },
              show: true // false表示不显示
            },
            // 坐标轴线
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                width: 20
              }
            },
            // 进度条
            progress: {
              show: true,
              width: 5,
              roundCap: true
            },
            splitLine: { // 长刻度设置
              distance: -15, // 位置
              length: 10,
              lineStyle: {
                width: 3,
                color: '#0063bb'
              }
            },
            axisLabel: { // 刻度值
              show: true,
              distance: 30, // 位置
              color: '#5d0caa',
              fontSize: 12
            }
          }
        ]
      })
    },
    /** 订阅系统cpu使用率实时数据 */
    subCpuRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'sub',
          content: {
            type: 'sub',
            id: 'home-page-statistics-cpu-realTime',
            topic: '/dashboard/systemMonitor/cpu/usage/realTime',
            parameter: {
              params: {
                history: 1
              }
            },
          }
        }
      }).then(data => {
        this.systemCpuChartMeter.setOption({
          series: [{
            data: [{
              value: data.payload.value
            }]
          }]
        })
      })
    },
    /** 取消cpu使用率实时数据订阅 */
    unsubCpuRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'unsub',
          content: {
            type: 'unsub',
            id: 'home-page-statistics-cpu-realTime',
          }
        }
      })
    },

    /** jvm cpu使用率仪表初始化 */
    jvmCpuChartMeterInit() {
      this.jvmCpuChartMeter = echarts.init(this.$refs.jvmCpuMeter)
      this.jvmCpuChartMeter.setOption({
        series: [
          {
            name: '百分之',
            radius: '100%',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 5,
            detail: {
              show: true,
              formatter: '{value}%',
              textStyle: {
                fontSize: 20
              }
            },
            data: [
              {
                value: 0
              }
            ],
            center: ['50%', '60%'],
            axisTick: { // 短刻度样式
              distance: -5, // 位置
              lineStyle: {
                width: 1,
                color: '#0063bb'
              },
              show: true // false表示不显示
            },
            // 坐标轴线
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                width: 20
              }
            },
            // 进度条
            progress: {
              show: true,
              width: 5,
              roundCap: true
            },
            splitLine: { // 长刻度设置
              distance: -15, // 位置
              length: 10,
              lineStyle: {
                width: 3,
                color: '#0063bb'
              }
            },
            axisLabel: { // 刻度值
              show: true,
              distance: 30, // 位置
              color: '#5d0caa',
              fontSize: 12
            }
          }
        ]
      })
    },
    /** 订阅jvm cpu使用率实时数据 */
    subJvmCpuRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'sub',
          content: {
            type: 'sub',
            id: 'home-page-statistics-jvm-cpu-realTime',
            topic: '/dashboard/jvmMonitor/cpu/usage/realTime',
            parameter: {
              params: {
                history: 1
              }
            },
          }
        }
      }).then(data => {
        this.jvmCpuChartMeter.setOption({
          series: [{
            data: [{
              value: data.payload.value
            }
            ]
          }]
        })
      })
    },
    /** 取消jvm cpu使用率实时数据订阅 */
    unsubJvmCpuRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'unsub',
          content: {
            type: 'unsub',
            id: 'home-page-statistics-jvm-cpu-realTime',
          }
        }
      })
    },

    /** 系统内存使用率仪表初始化 */
    systemMemoryChartMeterInit() {
      this.systemMemoryChartMeter = echarts.init(this.$refs.systemMemoryMeter)
      this.systemMemoryChartMeter.setOption({
        series: [
          {
            radius: '100%',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 5,
            detail: {
              formatter: '{value}G',
              textStyle: {
                fontSize: 20
              }
            },
            // 进度条
            progress: {
              show: true,
              width: 5,
              roundCap: true
            },
            data: [
              {
                value: 0
              }
            ],
            center: ['50%', '60%'],
            axisTick: { // 短刻度样式
              distance: -5, // 位置
              lineStyle: {
                width: 1,
                color: '#0063bb'
              },
              show: true // false表示不显示
            },
            // 坐标轴线
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                width: 20
              }
            },
            splitLine: { // 长刻度设置
              distance: -15, // 位置
              length: 10,
              lineStyle: {
                width: 3,
                color: '#0063bb'
              }
            },
            axisLabel: { // 刻度值
              // show:false
              distance: 30, // 位置
              color: '#5d0caa',
              fontSize: 12
            }
          }
        ]
      })
    },
    /** 订阅系统内存实时数据 */
    subSystemMemoryRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'sub',
          content: {
            type: 'sub',
            id: 'home-page-statistics-system-realTime',
            topic: '/dashboard/systemMonitor/memory/info/realTime',
            parameter: {
              params: {
                history: 1
              }
            },
          }
        }
      }).then(data => {
        const value = data.payload.value
        this.systemMemoryChartMeter.setOption({
          series: [{
            max: Math.round(value.max / 1000),
            data: [{
              value: (value.used / 1000).toFixed(1)
            }
            ]
          }]
        })
      })
    },
    /** 取消系统内存实时数据订阅  */
    unsubSystemMemoryRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'unsub',
          content: {
            type: 'unsub',
            id: 'home-page-statistics-system-realTime',
          }
        }
      })
    },

    /** jvm内存使用率仪表初始化 */
    jvmMemoryChartMeterInit() {
      this.jvmMemoryChartMeter = echarts.init(this.$refs.jvmMemoryMeter)
      this.jvmMemoryChartMeter.setOption({
        series: [
          {
            radius: '100%',
            type: 'gauge',
            min: 0,
            max: 0,
            splitNumber: 5,
            detail: {
              formatter: '{value}G',
              textStyle: {
                fontSize: 20
              }
            },
            // 进度条
            progress: {
              show: true,
              width: 5,
              roundCap: true
            },
            data: [
              {
                value: 0
              }
            ],
            center: ['50%', '60%'],
            axisTick: { // 短刻度样式
              distance: -5, // 位置
              lineStyle: {
                width: 1,
                color: '#0063bb'
              },
              show: true // false表示不显示
            },
            // 坐标轴线
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                width: 20
              }
            },
            splitLine: { // 长刻度设置
              distance: -15, // 位置
              length: 10,
              lineStyle: {
                width: 3,
                color: '#0063bb'
              }
            },
            axisLabel: { // 刻度值
              // show:false
              distance: 30, // 位置
              color: '#5d0caa',
              fontSize: 12
            }
          }
        ]
      })
    },
    /** 订阅jvm内存实时数据 */
    subJvmMemoryRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'sub',
          content: {
            type: 'sub',
            id: 'home-page-statistics-jvm-realTime',
            topic: '/dashboard/jvmMonitor/memory/info/realTime',
            parameter: {
              params: {
                history: 1
              }
            },
          }
        }
      }).then(data => {
        const value = data.payload.value
        this.jvmMemoryChartMeter.setOption({
          series: [{
            max: Math.round(value.max / 1000),
            data: [{
              value: (value.used / 1000).toFixed(1)
            }
            ]
          }]
        })
      })
    },
    /** 取消jvm内存实时数据订阅 */
    unsubJvmMemoryRealTimeData() {
      this.socket.send({
        method: 'event',
        params: {
          subEvent: 'unsub',
          content: {
            type: 'unsub',
            id: 'home-page-statistics-jvm-realTime',
          }
        }
      })
    },

    /************************************ 设备消息 **************************************/
    /** 时间按钮选项 */
    timeDimensionChange() {
      /*if (this.messageMonitorTimeDimension === 'day') {
        this.messageMonitorTimePick = this.getTodayTime()
        const params = {
          time: '1h',
          format: 'HH',
          limit: 24,
          from: formatDate(this.messageMonitorTimePick[0]),
          to: formatDate(this.messageMonitorTimePick[1])
        }

        this.getMessageMonitorData(params, 'received_message')
        this.getMessageMonitorData(params, 'sent_message')
        return
      }

      if (this.messageMonitorTimeDimension === 'week') {
        this.messageMonitorTimePick = this.getLastWeek()
        const params = {
          time: '1d',
          format: 'M月dd日',
          limit: 7,
          from: formatDate(this.messageMonitorTimePick[0]),
          to: formatDate(this.messageMonitorTimePick[1])
        }

        this.getMessageMonitorData(params, 'received_message')
        this.getMessageMonitorData(params, 'sent_message')
        return
      }

      if (this.messageMonitorTimeDimension === 'month') {

        this.messageMonitorTimePick = this.getLastMonth()
        const start = this.messageMonitorTimePick[0]
        const now = this.messageMonitorTimePick[1]

        const params = {
          time: '1d',
          format: 'M月dd日',
          limit: Math.ceil((now - start)/ (1000 * 60 * 60 * 24)),
          from: formatDate(start),
          to: formatDate(now)
        }

        this.getMessageMonitorData(params, 'received_message')
        this.getMessageMonitorData(params, 'sent_message')
        return
      }

      if (this.messageMonitorTimeDimension === 'year') {
        this.messageMonitorTimePick = this.getLastYear()

        const params = {
          time: '1M',
          format: 'yyyy年-M月',
          limit: 12,
          from: formatDate(this.messageMonitorTimePick[0]),
          to: formatDate(this.messageMonitorTimePick[1])
        }

        this.getMessageMonitorData(params, 'received_message')
        this.getMessageMonitorData(params, 'sent_message')
      }*/

    },
    /** 设备消息char初始化 */
    messageMonitorChartInit() {
      this.messageMonitorChart = echarts.init(this.$refs.messageMonitor)
      this.messageMonitorChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上行', '下行']
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: false
            },
            dataView: {
              show: false,
              readOnly: true
            },
            magicType: {
              show: false,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：个',
            nameTextStyle: {
              color: 'rgb(127, 63, 0)',
              fontStyle: 'normal',
              align: 'center',
              baseline: 'middle'
            },
            scale: true,
            boundaryGap: true
          }
        ],
        series: [
          {
            name: '上行',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default'
                }
              }
            },
            data: []
          },
          {
            name: '下行',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default'
                }
              }
            },
            data: []
          }
        ],
        grid: {
          height: '80%',
          width: '90%',
          x: '5%',
          y: '10%'
        }
      })
    },
    /** 获取设备消息指标数据 */
    getMessageMonitorData(params, measurement) {
      getDashboardData([{
          dashboard: 'gatewayMonitor',
          object: 'deviceGateway',
          measurement: measurement,
          dimension: 'agg',
          group: 'device_msg',
          params
        }],
        {
          repeatSubmit: false
        })
        .then(({ data }) => {
          if (measurement === 'received_message') {
            this.receivedMessageMonitor = data || []
          } else if (measurement === 'sent_message') {
            this.sentMessageMonitor = data || []
          }
        })
    },
    /** 更新设备消息趋势图 */
    updateMessageMonitorChart(measurement) {
      let xAxisData = []
      let yAxisData = []
      let chartOption = this.messageMonitorChart.getOption()
      if (measurement === 'received_message') {
        this.receivedMessageMonitor.forEach(({ data = {} }) => {
          xAxisData.push(data.timeString)
          yAxisData.push(data.value)
        })
        chartOption.xAxis[0].data = xAxisData
        chartOption.series[0].data = yAxisData
        this.messageMonitorChart.setOption(chartOption)
      } else if (measurement === 'sent_message') {
        this.sentMessageMonitor.forEach(({ data = {} }) => {
          xAxisData.push(data.timeString)
          yAxisData.push(data.value)
        })
        chartOption.series[1].data = yAxisData
        this.messageMonitorChart.setOption(chartOption)
      }
    },

    /** 设备消息日期控件选择事件 */
    messageMonitorDateChange(date) {
      const start = date[0]
      const end = date[1]
      const params = {
        time: '1d',
        format: 'M月dd日',
        limit: Math.ceil((end - start)/ (1000 * 60 * 60 * 24)),
        from: start,
        to: end
      }

      this.getMessageMonitorData(params, 'received_message')
      this.getMessageMonitorData(params, 'sent_message')
    },

    /************************************ jvm cpu使用率趋势 **************************************/
    /*handleDisabledDate (time, selectTime) {
      // 是否限制的判断条件
      if (selectTime) {
        // 这里就是限制的关键，大于或者小于选择的时间
        let maxDate = new Date(selectTime)
        maxDate.setMonth(maxDate.getMonth() + 1)

        let minDate = new Date(selectTime)
        minDate.setMonth(minDate.getMonth() - 1)

        return time > maxDate || time < minDate
      } else {
        return false
      }
    },

    jvmCpuPickerOptions () {
      const handleDisabledDate = this.handleDisabledDate
      const getLastHour = this.getLastHour
      const getTodayTime = this.getTodayTime
      const getLastWeek = this.getLastWeek
      let selectTime;
      return {
        // 点击时，选择的是开始时间，也就是minDate
        onPick: ({ maxDate, minDate }) => {
          selectTime = minDate.getTime()
          if (maxDate) {
            // 解除限制
            selectTime = undefined
          }
        },
        disabledDate(time) {
          return handleDisabledDate(time, selectTime)
        },
        shortcuts: [{
          text: '最近一小时',
          onClick(picker) {
            picker.$emit('pick', getLastHour());
          }
        }, {
          text: '今日',
          onClick(picker) {
            picker.$emit('pick', getTodayTime());
          }
        }, {
          text: '近一周',
          onClick(picker) {
            picker.$emit('pick', getLastWeek());
          }
        }]
      }
    },

    /!** 初始jvm cup趋势chart *!/
    jvmCpuTrendsChartInit() {
      this.jvmCpuTrendsChart = echarts.init(this.$refs.jvmCpuTrends)
      this.jvmCpuTrendsChart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: '{b}  <br/>{a} : ' + '{c}' + 'MB'
        },
        calculable: false,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：%',
            nameTextStyle: {
              color: 'rgb(127, 63, 0)',
              fontStyle: 'normal',
              align: 'center',
              baseline: 'middle'
            },
            scale: true,
            boundaryGap: true
          }
        ],
        series: [
          {
            name: 'JVM使用',
            type: 'line',
            stack: '总量',
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default'
                }
              }
            },
            data: [],
            smooth: true
          }
        ],
        grid: {
          height: '80%',
          width: '90%',
          x: '5%',
          y: '10%'
        }
      })
    },

    /!** jvm cpu使用率日期控件选择事件 *!/
    jvmCpuTrendsChange(date) {
      getDashboardData([{
          dashboard: 'jvmMonitor',
          object: 'stats',
          measurement: 'info',
          dimension: 'history',
          group: 'jvm',
          params: {
            from: date[0],
            to: date[1],
            format: 'YYYY-MM-dd HH:mm'
          }
        }],
        {
          repeatSubmit: false
        })
        .then(({ data }) => {
          console.log(data)
        })

    },*/

  }
}
</script>

<style lang="scss" scoped>
.meter-chart {
  height: 200px;
}

.meter-title {
  font-size: 20px
}
</style>