weiyuan-document-web/src/views/dashboard/index.vue

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

    <panel-group @handleRoute="handleRoute" :countsData="countsData" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/warning">预警统计</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>
          <bar-chart :chartData="stat.warning" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <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>
          <bar-chart :chartData="stat.exception" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">

            <router-link to="/toolbox/log">工具箱操作统计</router-link>
            <div>
              <el-tag @click="changeDate('client_touch',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.client_touch.dateRange">
                {{item.name}}
              </el-tag>
            </div>
          </div>
          <bar-chart :chartData="stat.client_touch" />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/tool/log">工具操作统计</router-link>
            <div>
              <el-tag @click="changeDate('tool_operation',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.tool_operation.dateRange">
                {{item.name}}
              </el-tag>
            </div>
          </div>
          <bar-chart :chartData="stat.tool_operation" />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import BarChart from './components/BarChart'
  import {
    getChartsData,
    getCounts
  } from "../../api/dashboard.js"
  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      BarChart
    },
    data() {
      return {
        countsData: {
          client_count: 0,
          tool_count: 0,
          user_count: 0
        },
        stat: {
          warning: {
            xArr: [],
            yArr: [],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          exception: {
            xArr: [],
            yArr: [],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          tool_operation: {
            xArr: [],
            yArr: [],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          client_touch: {
            xArr: [],
            yArr: [],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          }
        }
      }
    },
    created: function() {
      this.loadCounts();
      this.loadStat("warning", "week");
      this.loadStat("exception", "week");
      this.loadStat("tool_operation", "week");
      this.loadStat("client_touch", "week");
    },
    methods: {
      changeDate: function(type, date, index) {

        for (var m of this.stat[type].dateRange) {
          m.checked = false;
        }
        this.stat[type].dateRange[index].checked = true;
        this.loadStat(type, date);
      },
      loadCounts() {
        getCounts().then(res => {
          this.countsData = res;
        }).catch(error => {

        })
      },
      loadStat(type, range) {
        getChartsData({
          type: type,
          date_range: range
        }).then(res => {
          let xArr = [];
          let yArr = [];
          for (var mod of res) {
            xArr.push(mod.name);
            if (type == "warning")
              yArr.push(mod.maintain_tool_count);
            if (type == "exception")
              yArr.push(mod.no_return_tool_count);
            if (type == "tool_operation")
              yArr.push(mod.record_count);
            if (type == "client_touch")
              yArr.push(mod.client_touch_count);
          }
          this.stat[type].xArr = xArr;
          this.stat[type].yArr = yArr;
        }).catch(error => {

        })
      },
      handleRoute(type) {
        switch (type) {
          case "box":
            this.$router.push({
              path: "/toolbox/list"
            })
            break
          case "tool":
            this.$router.push({
              path: "/tool/list"
            })
            break
          case "user":
            this.$router.push({
              path: "/toolbox/user"
            })
            break
        }
      }
    }
  }
</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>