dangxingjiaoyujidi-web/src/views/dashboard/index.vue

<template>
  <div class="dashboard-editor-container">

    <panel-group :countsData="countsData" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/report/visit/sexRpt">观众性别</router-link>
            <!-- <div>
              <el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
                {{item.name}}
              </el-tag>
            </div> -->
          </div>
          <pie-chart :chartData="stat.warning" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">观众年龄</router-link>
            <!-- <div>
              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                {{item.name}}
              </el-tag>
            </div> -->
          </div>
          <pie-chart :chartData="stat.exception" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">城市分布</router-link>
            <!-- <div>
              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                {{item.name}}
              </el-tag>
            </div> -->
          </div>
          <pie-chart :chartData="stat.times" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">团体与个人统计</router-link>
          </div>
          <line-chart :chartData="lineArr" />
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  // import BarChart from './components/BarChart'
  import PieChart from './components/PieChart'
  import LineChart from './components/LineChart'
  import {
    getChartsData,
    getCounts
  } from "../../api/dashboard.js"
  import {
    ageRpt
  } from "@/api/report/visit.js";
  import {
    sexRpt
  } from "@/api/report/visit.js";
  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      PieChart,
      LineChart
    },
    data() {
      return {
        countsData: {
          client_count: 0,
          tool_count: 0,
          user_count: 0
        },
        stat: {
          warning: {
            // xArr: ["一","二","三","四","五"],
            // yArr: [200,300,400,500,330],
            yArr: [],
            radiusArr: "50%",
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          exception: {
            yArr: [],
            radiusArr: ['30%', '50%'],
            // dateRange: [{
            //   checked: true,
            //   type: "week",
            //   name: "本周"
            // }, {
            //   checked: false,
            //   type: "month",
            //   name: "本月"
            // }]
          },
          times: {
            radiusArr: "50%",
            yArr: [{
                value: 240,
                name: '苏州'
              },
              {
                value: 20,
                name: '无锡'
              },
              {
                value: 130,
                name: '常州'
              },
              {
                value: 120,
                name: '泰州'
              },
              {
                value: 120,
                name: '宿迁'
              }
            ],
          }
        },
        lineArr: {
          xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
          legendArr: ["团队预约人数", "团队预约实际入场人数", "个人预约人数", "个人预约实际入场人数"],
          series: [{
              name: '团队预约人数',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,124]
            },
            {
              name: '团队预约实际入场人数',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,234]
            },
            {
              name: '个人预约人数',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 210,150, 232, 201, 154, 190, 330, 210,189]
            },
            {
              name: '个人预约实际入场人数',
              type: 'line',
              stack: 'Total',
              data: [50, 132, 101, 104, 180, 230, 110,50, 132, 101, 104, 180, 230, 110,167]
            }
          ]
        }
      }
    },
    created: function() {
      this.lineArrDate();
      this.load();
    },
    methods: {
      load() {
        // this.showData = true;
        var agearr = [];
        var sexarr = [];
        ageRpt().then((res) => {
          for (var m of res) {
            agearr.push({
              name: m.name,
              value: m.plan_total
            })
          }
          this.stat.exception.yArr = agearr;
        }).catch((res) => {})
        
        sexRpt().then((res) => {
          for (var m of res) {
            sexarr.push({
              name: m.sex_name,
              value: m.plan_total
            })
          }
        
          this.stat.warning.yArr = sexarr;
        }).catch((res) => {})
      },
      lineArrDate(){
        let arr=[]
        for(var i=0;i<15;i++){
          arr.push(this.showDate(i))
        }
        this.lineArr.xArr = arr;
      },
      showDate(date){
          var num = date
          let n = num;
          let d = new Date();
          let year = d.getFullYear();
          let mon = d.getMonth() + 1;
          let day = d.getDate();
          if(day <= n) {
              if(mon > 1) {
                  mon = mon - 1;
              } else {
                  year = year - 1;
                  mon = 12;
              }
          }
          d.setDate(d.getDate() - n);
          year = d.getFullYear();
          mon = d.getMonth() + 1;
          day = d.getDate();
          let s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
          return s;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;

      .chart-title {
        font-size: 16px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>