mec_oa_html/src/views/dashboard/admin/index.vue

<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="12">
      <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
        <chart-card>
          <template #title>
            <span style="color: #1890ff;position: relative;">我的待办 <i :class="dashboardValue.count.upcoming > 0 ? 'myUpcoming' : null" class="dot"></i></span>
          </template>
          <template #total>
            <router-link to="/process/upcoming">{{ dashboardValue.count.upcoming }}</router-link>
          </template>
          <!-- <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
            <i class="el-icon-warning-outline" />
          </el-tooltip> -->
        </chart-card>
      </el-col>
      <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
        <chart-card title="工单总数" :total="dashboardValue.count.all">
          <!-- <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
            <i class="el-icon-warning-outline" />
          </el-tooltip> -->
        </chart-card>
      </el-col>
      <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
        <chart-card title="我创建的" :total="dashboardValue.count.my_create">
          <!-- <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
            <i class="el-icon-warning-outline" />
          </el-tooltip> -->
        </chart-card>
      </el-col>
      <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
        <chart-card title="我相关的" :total="dashboardValue.count.related">
          <!-- <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
            <i class="el-icon-warning-outline" />
          </el-tooltip> -->
        </chart-card>
      </el-col>
    </el-row>

    <el-card :bordered="false" :body-style="{padding: '5'}" :style="{ marginBottom: '12px', textAlign: 'center' }">
      <el-date-picker
        v-model="querys"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="timeScreening"
      />
    </el-card>

    <el-card :bordered="false" :body-style="{padding: '0'}" :style="{ marginBottom: '12px' }">
      <div class="salesCard">
        <div>
          <h4 :style="{ marginBottom: '20px' }" style="margin-left: 20px;">提交工单统计</h4>
          <RangeSubmit :statistics-data="dashboardValue.submit" />
        </div>
      </div>
    </el-card>

    <el-row>
      <el-col :span="8">
        <el-card :bordered="false" :body-style="{padding: '0'}">
          <div class="salesCard leaderboard">
            <rank-list title="热门流程排行榜 Top 10" :list="dashboardValue.ranks" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 12px;">
        <el-card :bordered="false" :body-style="{padding: '0'}">
          <div class="salesCard leaderboard">
            <HandleRank title="处理工单人员排行榜" :list="dashboardValue.handle" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 12px;">
        <el-card :bordered="false" :body-style="{padding: '0'}">
          <div class="salesCard leaderboard">
            <HandlePeriod title="工单处理耗时排行榜" :list="dashboardValue.period" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ChartCard from './components/ChartCard'
import RankList from './components/RankList/index'
import RangeSubmit from './components/RangeSubmit'
import HandleRank from './components/HandleRank'
import HandlePeriod from './components/HandlePeriod'
import { initNumberHtml } from '@/utils/costum'

import { initData } from '@/api/dashboard'

export default {
  name: 'DashboardAdmin',
  components: {
    ChartCard,
    RankList,
    RangeSubmit,
    HandleRank,
    HandlePeriod
  },
  data() {
    return {
      dashboardValue: {
        count: {}
      },
      rankList: [],
      submitData: [],
      querys: '',
      queryList: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getInitData()
  },
  methods: {
    async getInitData() {
      await initData(this.queryList).then(response => {
        this.dashboardValue = response.data
      })
      // 添加我的代办显示数据
      if(this.dashboardValue.count.upcoming && this.dashboardValue.count.upcoming > 0) {
        initNumberHtml(this.dashboardValue.count.upcoming)
      }
    },
    timeScreening() {
      if (this.querys && this.querys.length > 1) {
        this.queryList.start_time = this.querys[0]
        this.queryList.end_time = this.querys[1]
      } else {
        this.queryList.start_time = null
        this.queryList.end_time = null
      }
      this.getInitData()
    }
  }
}
</script>

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

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

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

/deep/ .el-tabs__item{
   padding-left: 16px!important;
   height: 50px;
   line-height: 50px;
}

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

.leaderboard {
  height: 448px;
  overflow: auto;
}

.myUpcoming {
  animation: flash 2s ease infinite;
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
}
.dot {
}
@keyframes flash{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

</style>