aivfo-oa-web/src/views/dashboard/index.vue

<template>
  <div class="app-container">
    <div class="head-tips">
      <el-card class="card">
        <div class="card-text" @click="">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待进行会议</div>
            <div class="card-text-val">3</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待确认会议</div>
            <div class="card-text-val">3</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="newTaskOpen=!newTaskOpen">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">新任务</div>
            <div class="card-text-val">{{ newTaskNum }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card" v-hasPermi="['task:task:audit']">
        <div class="card-text" @click="auditTaskOpen=!auditTaskOpen">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">待审核任务</div>
            <div class="card-text-val">{{ auditTaskNum }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-text" @click="">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">实施待办</div>
            <div class="card-text-val">3</div>
          </div>
        </div>
      </el-card>

      <el-card class="card">
        <div class="card-text" @click="">
          <div class="card-left"><i class="el-icon-s-order"></i></div>
          <div class="card-right">
            <div class="card-text-title">运维提醒</div>
            <div class="card-text-val">3</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog title="新任务" :visible.sync="newTaskOpen" append-to-body :close-on-click-modal="false">
      <el-table :data="newTasks" size="mini">
        <el-table-column label="任务名称" prop="taskName" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="执行(负责)人" prop="executorName"/>
        <el-table-column label="任务起止时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.beginDate + ' 至 ' + scope.row.endDate }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="待审核任务" :visible.sync="auditTaskOpen" append-to-body :close-on-click-modal="false">
      <el-table :data="auditTasks" size="mini">
        <el-table-column label="任务名称" prop="taskName" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="执行(负责)人" prop="executorName"/>
        <el-table-column label="任务起止时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.beginDate + ' 至 ' + scope.row.endDate }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--        <meeting-detail :detail-form="meetingForm" @getTodoMeetingList="getTodoMeetingList"></meeting-detail>-->
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import Pagination from '@/components/Page/Pagination'
import {toDoTaskList} from "@/api/task/task";
// import {completeTask, getPersonalTaskList} from '@/api/meeting/enforce'
// import {confirmMeetings, getTodoMeetings} from '@/api/meeting/meeting'

export default {
  name: 'Dashboard',
  components: {},
  computed: {
    ...mapGetters([
      'name'
    ]),
    newTaskNum() {
      return this.newTasks.length
    },
    auditTaskNum() {
      return this.auditTasks.length
    }
  },
  data() {
    return {
      newTasks: [],
      auditTasks: [],
      newTaskOpen: false,
      auditTaskOpen: false,

    }
  },
  mounted() {
    this.getTodoTask();
  },
  methods: {
    getTodoTask() {
      toDoTaskList().then(res => {
        this.newTasks = res.data.newTasks
        this.auditTasks = res.data.auditTasks
      })

    },

    getTodoMeetingList() {
      getTodoMeetings().then(res => {
        this.todoMeetings = res.data
      })
    },

    confirmMeeting(row) {
      if (row.meetingType === 1) {
        let params = {
          meetingId: row.id,
          weeks: row.weeks
        }
        this.$router.push({path: '/meeting/weeklyRecords', query: params});
        return
      }
      this.meetingForm = row

    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.head-tips {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 200px;
  height: 100px;
  //background-color: #3F71A4;
  margin: 10px;
  display: flex;

  .card-text {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-left {
      font-size: 60px;
      text-align: left;
      color: #f7b51c;
    }

    .card-right {
      margin-left: 20px;
      text-align: center;
    }

    .card-text-title {
      font-size: 13px;
      margin-bottom: 10px;
    }

    .card-text-val {
      font-size: 28px;
      color: #9da0a3;
    }
  }
}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>