CKQ/src/views/goaf/alert/components/LeftCounter.vue

<template>
  <div class="content-container">
    <el-row class="content-title">
      <span>{{ title }}</span>
    </el-row>

    <el-row class="btn-group">
      <el-button class="send-menu" @click="handleSubmitTask">登记预警</el-button>
    </el-row>

    <!-- <el-row class="list-group">
      <div>
        <div :class="curSel === 1 ? 'list-item active' : 'list-item'" @click="selectItem(1)">
          <el-col :span="18">
            <p class="title">处理中</p>
          </el-col>
        </div>
        <div :class="curSel === 2 ? 'list-item active' : 'list-item'" @click="selectItem(2)">
          <el-col :span="18">
            <p class="title">完成</p>
          </el-col>
        </div>
        <div :class="curSel === -1 ? 'list-item active' : 'list-item'" @click="selectItem(-1)">
          <el-col :span="18">
            <p class="title">撤销</p>
          </el-col>
        </div>
        <div :class="curSel === 0 ? 'list-item active' : 'list-item'" @click="selectItem(0)">
          <el-col :span="18">
            <p class="title">未提交</p>
          </el-col>
        </div>
      </div>
    </el-row> -->
    <submit-task ref="SubmitTask" title="预警登记" @formSuccess="selectItem(curSel)" />
  </div>
</template>
<script>

import SubmitTask from '../activity/Submit'
import { getDangerCounter } from '@/api/goaf/dangerStatisApi'

export default {
  components: {
    SubmitTask
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '预警管理',
      dangerCounter: {
        myCreatedCount: 0,
        myHandlingCount: 0,
        myHandledCount: 0,
        myCanceledCount: 0,
        groupHandlingCount: 0,
        groupSubmitCount: 0,
        groupReviewCount: 0,
        groupRectifyCount: 0,
        groupAcceptCount: 0
      },
      curSel: 1
    }
  },

  mounted() {
    // this.loadData()
    // this.selectItem(this.curSel)
  },
  methods: {
    // 加载数据
    loadData() {
      this.getData()
    },

    // 添加
    handleSubmitTask() {
      this.$refs['SubmitTask'].start()
    },

    // 初始化
    getData() {
      getDangerCounter().then((resp) => {
        const { code, data, msg } = resp
        if (code === 0) {
          this.dangerCounter = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // “选择” 处理
    selectItem(val) {
      this.curSel = val
      this.$emit('selectItem', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container {
  margin: 10px;
  padding: 10px;
  height: calc(100vh - 95px);

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

    .content-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-top: 10px;
    margin-bottom: 5px;

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

  .btn-group {
    margin-top: 20px;

    .send-menu {
      width: 90%;
      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>