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

<template>
  <div class="content-container">
    <el-row class="list-group">
      <div>
        <el-row class="sub-title-bar">
          <p class="sub-title">按状态</p>
        </el-row>

        <div :class="curSel === 'status0' ? 'list-item active' : 'list-item'" @click="selectItem('status',0)">
          <el-col :span="18">
            <p class="title">未提交</p>
          </el-col>
        </div>

        <div :class="curSel === 'status1' ? 'list-item active' : 'list-item'" @click="selectItem('status',1)">
          <el-col :span="18">
            <p class="title">处理中</p>
          </el-col>
        </div>

        <div :class="curSel === 'status2' ? 'list-item active' : 'list-item'" @click="selectItem('status',2)">
          <el-col :span="18">
            <p class="title">完成</p>
          </el-col>
        </div>
        <div :class="curSel === 'status-1' ? 'list-item active' : 'list-item'" @click="selectItem('status',-1)">
          <el-col :span="18">
            <p class="title">撤销</p>
          </el-col>
        </div>
      </div>

      <div>
        <el-row class="sub-title-bar">
          <p class="sub-title">按等级</p>
        </el-row>
        <div :class="curSel === 'hdangerLevel0' ? 'list-item active' : 'list-item'" @click="selectItem('hdangerLevel',0)">
          <el-col :span="18">
            <p class="title">较低</p>
          </el-col>
        </div>
        <div :class="curSel === 'hdangerLevel1' ? 'list-item active' : 'list-item'" @click="selectItem('hdangerLevel',1)">
          <el-col :span="18">
            <p class="title">一般</p>
          </el-col>
        </div>

        <div :class="curSel === 'hdangerLevel2' ? 'list-item active' : 'list-item'" @click="selectItem('hdangerLevel',2)">
          <el-col :span="18">
            <p class="title">较大</p>
          </el-col>
        </div>

        <div :class="curSel === 'hdangerLevel3' ? 'list-item active' : 'list-item'" @click="selectItem('hdangerLevel',3)">
          <el-col :span="18">
            <p class="title">重大</p>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'AlertCounter',
  components: { },
  data() {
    return {
      title: '预警中心',
      listLoading: false,
      curSel: ''
    }
  },
  methods: {
    // 选中事件
    selectItem(type, val) {
      this.curSel = `${type}${val}`
      this.$emit('selectItem', {
        type, val
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container {
  height: calc(100vh - 145px);
  padding-bottom: 0;
  margin: 10px 10px 0 0;

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

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

  .btn-group {
    margin-top: 25px;
    margin-bottom: 10px;
    .send-menu {
      width: 90%;
      background: #3D5F76;
      color: #FFF;
      border-color: #3D5F76;

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

  .list-group {
    margin-top: 0;
    padding-top: 0;
    background: #193142;

    p {
      margin: 0;
      padding: 0;
    }

    .count {
      text-align: right;
    }

    .list-item {
      height: 40px;
      line-height: 40px;
      color: #FFF;
      padding: 0 10px;
      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>
<style lang="scss">
  .vue-treeselect{
    .vue-treeselect__control{
      background-color: inherit;
      border: 1px solid rgba(255, 255, 255, 0.1);
      .vue-treeselect__single-value{
        color: #fff;
      }
    }
  }
</style>