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

<template>
  <div class="subPage">
    <div class="selectCase">
      <el-select v-model="postData.caseid" placeholder="请选择" @change="caseChange">
        <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" v-if="pageData.length" :key="index">
      <div class="flex-item" v-for="(subItem,subIndex) in item" :key="subIndex" :class="{'listMargin' : subItem.type === 'dashboardList'}">
        <div v-if="subItem.type === 'dashboardList'">
          <dashboardList :data="subItem" :index="subIndex"></dashboardList>
        </div>
        <div v-if="subItem.type === 'histogram' && typeof(subItem.value) === 'object' && subItem.value.length">
          <histogram :data="subItem" :index="index + '-' + subIndex"></histogram>
        </div>
        <div v-if="subItem.type === 'pieDiagram' && typeof(subItem.value) === 'object' && subItem.value.length">
          <pieDiagram :data="subItem" :index="index + '-' + subIndex"></pieDiagram>
        </div>
        <div v-if="subItem.type === 'brokenLineGraph' && typeof(subItem.value) === 'object' && subItem.value.length">
          <brokenLineGraph :data="subItem" :index="index + '-' + subIndex"></brokenLineGraph>
        </div>
        <div v-if="subItem.type === 'ringChart' && typeof(subItem.value) === 'object' && subItem.value.length">
          <ringChart :data="subItem" :index="index + '-' + subIndex"></ringChart>
        </div>
        <div v-if="subItem.type === 'dashboard' && typeof(subItem.value) === 'object' && subItem.value.length">
          <dashboard :data="subItem" :index="index + '-' + subIndex"></dashboard>
        </div>
        <div v-if="subItem.type === 'brokenLineGraphGroup' && typeof(subItem.value) === 'object' && subItem.value.length">
          <brokenLineGraphGroup :data="subItem" :index="index + '-' + subIndex"></brokenLineGraphGroup>
        </div>
      </div>
    </div>
    <div class="bottomData">
      <div class="flex-h">
        <div class="flex-item">
          <h1>数据统计</h1>
        </div>
        <el-select v-model="bottomSelectValue" placeholder="请选择" @change="bottomChange">
          <el-option
            v-for="item in bottomSelect"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <ul>
        <li v-for="(item,index) in bottomNav" :key="index" :class="{'active': bottomActive === index}" @click="bottomActive = index">{{item}}</li>
      </ul>
      <div style="height: 400px;" v-if="bottomData.length">
        <div v-for="(item,index) in bottomData" :key="index" v-if="bottomActive === index && bottomData.length">
          <brokenLineGraph :data="item.data" :index="'bottomData-' + index"></brokenLineGraph>
        </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: ''
      },
      bottomSelect: [{
        value: '最近一周',
        id: 'week'
      }, {
        value: '最近一个月',
        id: 'month'
      }],
      bottomSelectValue: 'week',
      bottomActive: 0,
      bottomNav: ['推荐会员新增', '排课数', '课程预约量', '饮品下单量', '到场人次'],
      bottomData: [],
      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.belongCase,
      user: x => x.app.user
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId || this.cases[0].CaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  watch: {
    defaultCaseId: function (val) {
      if (!this.postData.caseid) {
        this.postData.caseid = val
      }
      this.getData(val)
      this.getBottomData(val, this.bottomSelectValue)
    },
  },
  mounted () {
    this.$nextTick(function () {
      if (this.defaultCaseId !== null) {
        this.getData(this.defaultCaseId)
        this.getBottomData(this.defaultCaseId, this.bottomSelectValue)
      }
    })
  },
  methods: {
    ...mapStaActions([
      'getDashboardData',
      'getDashboardBottomData',
    ]),
    bottomChange () {
      this.getBottomData(this.postData.caseid, this.bottomSelectValue)
    },
    caseChange () {
      this.getData(this.postData.caseid)
      this.getBottomData(this.postData.caseid, this.bottomSelectValue)
    },
    getData (id) {
      this.pageData = []
      this.getDashboardData({
        caseid: id
      }).then((res) => {
        res = res || []
        for (var n = 0; n < res.length; n++) {
          this.pageData.push([])
          for (var a = 0; a < res[n].length; a++) {
            if (res[n][a].type !== 'dashboardList' && res[n][a].value === null) res[n][a].value = []
            this.pageData[n].push(res[n][a])
          }
        }
        console.log(JSON.stringify(this.pageData))
      })
    },
    getBottomData (id, type) {
      this.bottomData = []
      this.getDashboardBottomData({
        caseid: id,
        statype: type
      }).then((res) => {
        for (var n = 0; n < res.length; n++) {
          this.bottomData.push({
            type: 'brokenLineGraph',
            remark: '折线图',
            data: {
              title: '',
              value: res[n]
            }
          })
        }
        console.log(JSON.stringify(this.bottomData))
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
.listMargin {
  margin-left: 20px;
  &:first-child {
    margin-left: 0;
  }
}
</style>