CKQ/src/views/goaf/checkTask/manage/LeftCounter.vue

<template>
  <div class="content-container">
    <el-row class="title-bar">
      <p class="page-title">巡检任务</p>
    </el-row>

    <el-row class="btn-group">
      <el-button class="send-menu" @click="handleAdd">创建任务</el-button>
    </el-row>

    <el-row class="list-group">
      <div>
        <div :class="currentSelect === 0 ? 'list-item active' : 'list-item'" @click="selectItem(0)">
          <el-col :span="18">
            <p class="title">待处理</p>
          </el-col>
        </div>
        <div :class="currentSelect === 1 ? 'list-item active' : 'list-item'" @click="selectItem(1)">
          <el-col :span="18">
            <p class="title">处理完成</p>
          </el-col>
        </div>

        <div :class="currentSelect === 2 ? 'list-item active' : 'list-item'" @click="selectItem(2)">
          <el-col :span="18">
            <p class="title">逾期</p>
          </el-col>
        </div>
      </div>
    </el-row>
    <task ref="AddCheckTask" title="新增检查任务" @formSuccess="loadData" />
  </div>
</template>
<script>

import Task from './CheckTask.vue'
import { getCheckTaskCounter } from '@/api/aqpt/checkTaskStatisApi'

export default {
  name: 'CheckTaskCounter',
  components: {
    Task
  },
  data() {
    return {
      currentSelect: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {

    // Load Data
    loadData() {
      this.getData()
      this.setItem(this.currentSelect)
    },

    // Add Action
    handleAdd() {
      this.$refs['AddCheckTask'].showAddModel()
    },

    // fetch data
    getData() {
      getCheckTaskCounter().then((resp) => {
        const { code, data, msg } = resp
        if (code === 0) {
          this.counter = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 选中事件
    selectItem(ival) {
      this.currentSelect = ival
      this.$emit('selectItem', ival)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container {
  margin: 10px;
  height: calc(100vh - 90px);

  .title-bar {
    height: 40px;
    line-height: 40px;
    text-indent: 15px;
    background: #113849;
    margin-bottom: 15px;

    .page-title {
      font-size: 16px;
      color: #FFF;
      margin: 0;
      font-weight: bold;
    }
  }

  .sub-title-bar {
    height: 40px;
    line-height: 40px;
    text-indent: 15px;
    background: #113849;
    margin-bottom: 15px;

    .sub-title {
      font-size: 16px;
      color: #FFF;
      margin: 0;
    }
  }

  .btn-group {
    margin-bottom: 10px;
    padding-right: 15px;
    .send-menu {
      width: 100%;
      background: #3D5F76;
      color: #FFF;
      border-color: #3D5F76;

      &:hover {
        background: #283c4c;
        color: #FFF;
        border-color: #283c4c;
      }
    }
  }

  .list-group {
    background: #193142;

    p {
      margin: 0;
      padding: 0;
    }

    .count {
      text-align: right;
    }

    .list-item {
      height: 40px;
      line-height: 40px;
      color: #FFF;
      padding: 0 30px;
      font-size: 14px;

      &.active {
        color: #08A6DC;
        position: relative;

        &::after {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: calc(50% - 3.5px);
          right: -3px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #08A6DC;
          transform: rotate(270deg);
        }
      }
    }
  }
}
</style>