open-platform-admin-ui/src/views/bz/consume/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/api/docs`)">
          <div class="card-panel-icon-wrapper icon-people">
            <el-image src="/images/016537@2x.png" class="card-panel-icon" style="height: 60px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              月消费总额（元）
            </div>
            <count-to :start-val="0" :end-val="78956" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/appKey/index`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/016535@2x.png" class="card-panel-icon" style="height: 60px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              月消费次数
            </div>
            <count-to :start-val="0" :end-val="15462" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/016536@2x.png" class="card-panel-icon" style="height: 60px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              人均消费（元）
            </div>
            <count-to :start-val="0" :end-val="2036" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>消费监测</span>
            </div>
            <div id="chart1" style="height: 150px;width: 100%"></div>
          </el-card>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>舆情监测</span>
            </div>
            <div id="chart2" style="height: 150px;width: 100%"></div>
          </el-card>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>应急指挥调度</span>
            </div>
            <div id="chart3" style="height: 150px;width: 100%"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div style="height: 32px"/>
    <div class="bz-card">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>消费监测</span>
        </div>
        <div id="chart4" style="height: 150px;width: 100%"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'

export default {
  components: { CountTo },
  data() {
    return {}
  },
  computed: {},
  created() {
  },
  mounted() {
    const xAxis = []
    for (let i = 7; i > 0; i--) {
      console.log(this.addDays(new Date(), i * -1))
      xAxis.push(this.addDays(new Date(), i * -1))
    }
    this.buildBar('chart1', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
    this.buildBar('chart2', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
    this.buildBar('chart3', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
    this.buildBar('chart4', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
  },
  methods: {
    addDays(nd, days) {
      nd = nd.valueOf()
      nd = nd + days * 24 * 60 * 60 * 1000
      nd = new Date(nd)
      var y = nd.getFullYear()
      var m = nd.getMonth() + 1
      var d = nd.getDate()
      if (m <= 9) m = '0' + m
      if (d <= 9) d = '0' + d
      return y + '-' + m + '-' + d
    },
    buildBar(elementId, xAxis, seriesData) {

      const chart = echarts.init(document.getElementById(elementId))
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: { top: '0', right: '1%' },
        grid: { left: 25, right: 0, bottom: 35, top: 25 },
        xAxis: { type: 'category', data: xAxis },
        yAxis: { type: 'value' },
        series: seriesData
      })
    }
  }
}
</script>