admin/src/pages/system/dashboard/index.vue

<template>
  <div class="subPage">
    <div class="selectCase">
      <el-select v-model="postData.caseid" placeholder="请选择">
        <el-option
          v-for="item in cases"
          :key="item.CaseId"
          :label="item.CaseName"
          :value="item.CaseId">
        </el-option>
      </el-select>
    </div>
    <div class="flex-h" v-for="(item,index) in pageData" :key="index">
      <div class="flex-item" v-for="(subItem,subIndex) in item" :key="subIndex">
        <div v-if="subItem.type === 'dashboardList'">
          <dashboardList :data="subItem.data" :index="index + '-' + subIndex"></dashboardList>
        </div>
        <div v-if="subItem.type === 'histogram'">
          <histogram :data="subItem.data" :index="index + '-' + subIndex"></histogram>
        </div>
        <div v-if="subItem.type === 'pieDiagram'">
          <pieDiagram :data="subItem.data" :index="index + '-' + subIndex"></pieDiagram>
        </div>
        <div v-if="subItem.type === 'brokenLineGraph'">
          <brokenLineGraph :data="subItem.data" :index="index + '-' + subIndex"></brokenLineGraph>
        </div>
        <div v-if="subItem.type === 'ringChart'">
          <ringChart :data="subItem.data" :index="index + '-' + subIndex"></ringChart>
        </div>
        <div v-if="subItem.type === 'dashboard'">
          <dashboard :data="subItem.data" :index="index + '-' + subIndex"></dashboard>
        </div>
        <div v-if="subItem.type === 'brokenLineGraphGroup'">
          <brokenLineGraphGroup :data="subItem.data" :index="index + '-' + subIndex"></brokenLineGraphGroup>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
import dashboardList from '../../../components/dashboardList/index'
import histogram from '../../../components/histogram/index'
import pieDiagram from '../../../components/pieDiagram/index'
import brokenLineGraph from '../../../components/brokenLineGraph/index'
import ringChart from '../../../components/ringChart/index'
import dashboard from '../../../components/dashboard/index'
import brokenLineGraphGroup from '../../../components/brokenLineGraphGroup/index'
const { mapActions: mapStaActions } = createNamespacedHelpers('sta')

export default {
  name: '',
  data () {
    return {
      postData: {
        caseid: ''
      },
      pageData: [
        [
          { type: 'dashboardList', remark: '列表面板', data: { title: '', list: [{ name: '会员总数', value: '1000', }, { name: '课程预约总量', value: '1000', }, { name: '饮品下单总量', value: '1000', }] } }
        ],
        [
          { type: 'histogram', remark: '柱状图', data: { title: '今日数据', list: [{ x: '推荐会员新增', y: 38 }, { x: '课程数', y: 52 }, { x: '预约数', y: 61 }, { x: '到场人次', y: 145 }] } },
          { type: 'pieDiagram', remark: '扇形图', data: { title: '明日课程预约数据', list: [{ item: '小小体验官', count: 40, percent: 0.4 }, { item: '哈他瑜伽', count: 52, percent: 0.52 }, { item: '小小飞行家', count: 8, percent: 0.08 }] } }
        ],
        [
          { type: 'brokenLineGraph', remark: '折线图', data: { title: '下单饮品数据', list: [{ x: '09/05', y: 3 }, { x: '09/06', y: 4 }, { x: '09/07', y: 3.5 }, { x: '09/08', y: 5 }, { x: '09/09', y: 4.9 }, { x: '09/10', y: 6 }, { x: '09/11', y: 7 }, { x: '09/12', y: 9 }, { x: '09/13', y: 13 }] } },
          { type: 'ringChart', remark: '环形图', data: { title: '本月课程预约', list: [{ item: '健身课程', count: 40, percent: 0.4 }, { item: '社交课程', count: 21, percent: 0.21 }, { item: '教育课程', count: 17, percent: 0.17 }, { item: '健康课程', count: 13, percent: 0.13 }, { item: '艺术课程', count: 9, percent: 0.09 }] } },
        ],
        [
          { type: 'dashboard', remark: '仪表盘', data: { title: '参与率', list: [{ value: 5.6 }] } },
          { type: 'dashboard', remark: '仪表盘', data: { title: '参与率', list: [{ value: 3.1 }] } },
        ],
        [
          { type: 'brokenLineGraphGroup', remark: '折线图组合', data: { title: '下单饮品数据', list: [{ month: 'Jan', city: 'Tokyo', temperature: 7 }, { month: 'Jan', city: 'London', temperature: 3.9 }, { month: 'Feb', city: 'Tokyo', temperature: 6.9 }, { month: 'Feb', city: 'London', temperature: 4.2 }, { month: 'Mar', city: 'Tokyo', temperature: 9.5 }, { month: 'Mar', city: 'London', temperature: 5.7 }, { month: 'Apr', city: 'Tokyo', temperature: 14.5 }, { month: 'Apr', city: 'London', temperature: 8.5 }, { month: 'May', city: 'Tokyo', temperature: 18.4 }, { month: 'May', city: 'London', temperature: 11.9 }, { month: 'Jun', city: 'Tokyo', temperature: 21.5 }, { month: 'Jun', city: 'London', temperature: 15.2 }, { month: 'Jul', city: 'Tokyo', temperature: 25.2 }, { month: 'Jul', city: 'London', temperature: 17 }, { month: 'Aug', city: 'Tokyo', temperature: 26.5 }, { month: 'Aug', city: 'London', temperature: 16.6 }, { month: 'Sep', city: 'Tokyo', temperature: 23.3 }, { month: 'Sep', city: 'London', temperature: 14.2 }, { month: 'Oct', city: 'Tokyo', temperature: 18.3 }, { month: 'Oct', city: 'London', temperature: 10.3 }, { month: 'Nov', city: 'Tokyo', temperature: 13.9 }, { month: 'Nov', city: 'London', temperature: 6.6 }, { month: 'Dec', city: 'Tokyo', temperature: 9.6 }, { month: 'Dec', city: 'London', temperature: 4.8 }] } },
        ],
      ],
    }
  },
  components: {
    dashboardList,
    histogram,
    pieDiagram,
    brokenLineGraph,
    ringChart,
    dashboard,
    brokenLineGraphGroup,
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId || this.cases[0].CaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.postData.caseid = this.postData.caseid || this.cases[0].CaseId
      this.getDashboardData({
        caseid: this.postData.caseid
      }).then((res) => {
        console.log(JSON.stringify(res))
      })
      this.getDashboardBottomData({
        caseid: this.postData.caseid,
        statype: 'week'
      }).then((res) => {
        console.log(JSON.stringify(res))
      })
    })
  },
  methods: {
    ...mapStaActions([
      'getDashboardData',
      'getDashboardBottomData',
    ]),
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>