TaskStatistics.vue

<template>
  <CellWrapper title="任务统计" :cellContentHeight="cellContentHeight">
    <template v-slot:header>
      <span class="el-icon-refresh" title="刷新"></span>
      <!-- <span class="el-icon-more" title="操作"></span> -->
    </template>

    <div class="statistics-container">
      <div class="task-stat-display total">
        <div class="display-wrapper">
          <div
            class="stat-item"
            v-for="(item, idx) in total"
            :key="idx"
            :style="{ width: item.name === '来报待处理' ? '20%' : 'unset' }"
          >
            <div class="stat-name" @click="goToTaskPage(item.name)">{{ item.name }}</div>
            <div class="stat-count">{{ item.count }}</div>
          </div>
        </div>
      </div>
      <div class="task-sign mime">
        <span class="el-icon-s-custom"></span>
        我的工作
      </div>
      <div class="task-stat-display mime">
        <div class="display-wrapper">
          <div class="stat-item" v-for="(item, idx) in mime" :key="idx">
            <div class="stat-name" @click="goToTaskPage(item.name)">{{ item.name }}</div>
            <div class="stat-count">{{ item.count }}</div>
          </div>
        </div>
      </div>
      <div class="task-sign pty">
        <span class="el-icon-s-platform"></span>
        机构工作
      </div>
      <div class="task-stat-display pty">
        <div class="display-wrapper">
          <div class="stat-item" v-for="(item, idx) in pty" :key="idx">
            <div class="stat-name" @click="goToTaskPage(item.name)">{{ item.name }}</div>
            <div class="stat-count">{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
  </CellWrapper>
</template>

<script>
import CellHeader from "../common/CellHeader.vue";
import CellWrapper  from "../common/CellWrapper.vue";
import { all,my,ins } from "~/service/report";


export default {
  name: "TaskStatistics",
  props: ["cellContentHeight"],
  components: { CellWrapper },
  data() {
    return {
      total: [
        // { name: "待经办", count: "5454" },
        // { name: "来报待处理", count: "4231" },
        // { name: "待复核", count: "652" },
        // { name: "待授权", count: "2" },
        // { name: "待匹配", count: "5" },
        // { name: "待打印", count: "1235" },
      ],
      mime: [
        // { name: "待经办", count: "154" },
        // { name: "待修改", count: "1254" },
        // { name: "待复核", count: "5" },
        // { name: "待授权", count: "0" },
        // { name: "待回复", count: "0" },
        // { name: "待打印", count: "4564" },
        // { name: "已完结", count: "3212" },
      ],
      pty: [

      ],
      mapping: {
        '待经办': 'sptsel',
        '来报待处理': 'sptsel',
        '待复核': 'trnrel',
        '待授权': 'trnrel',
        '待匹配': 'sptsel',
        '待打印': 'trnfnd',
        '待修改': 'sptsel',
        '待回复': '',
        '已完结': 'trnfnd',
      }
    };
  },
  created() {
      all().then(res => {
          this.total=res;
      }),
      my().then(res =>{
         this.mime = res;
      }),
      ins().then(res =>{
        this.pty = res;
      })
  },
  //点击对应的文字 跳转
  methods: {
    goToTaskPage(name) {
      if(!this.mapping[name]) {
        return;
      }
      this.$router.push('/taskList').then(() => {
        this.$store.commit('setTaskListTabVal', this.mapping[name])
      })
    }
  }
};
</script>

<style scoped>
.statistics-container {
  height: 100%;
  padding: 0px 8px;
}
.task-stat-display {
  height: 25%;
  /* max-height: 90px; */
  display: flex;
  justify-content: space-around;
  color: #f3f3f3;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 8px;
  background-color: #e7eaef;
}
.task-stat-display .display-wrapper {
  width: 100%;
  display: flex;
}
.task-stat-display .display-wrapper .stat-item {
  flex: auto;
}
.task-stat-display.total .display-wrapper {
  border: 1px solid rgb(17 106 153 / 60%);
}
.task-stat-display.mime .display-wrapper {
  border: 1px solid rgb(215 40 40 / 60%);
}
.task-stat-display.pty .display-wrapper {
  border: 1px solid rgb(17 124 74 / 60%);
}
.task-stat-display.total .stat-name {
  background-color: rgb(17 106 153 / 60%);
}
.task-stat-display.mime .stat-name {
  background-color: rgb(215 40 40 / 60%);
}
.task-stat-display.pty .stat-name {
  background-color: rgb(17 124 74 / 60%);
}
.task-stat-display .stat-count {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #606266;
}
.task-stat-display.total .display-wrapper .stat-item .stat-count {
  border-right: 1px solid rgb(17 106 153 / 60%);
}
.task-stat-display.mime .display-wrapper .stat-item .stat-count {
  border-right: 1px solid rgb(215 40 40 / 60%);
}
.task-stat-display.pty .display-wrapper .stat-item .stat-count {
  border-right: 1px solid rgb(17 124 74 / 60%);
}
.task-stat-display .stat-name {
  border-bottom: 1px solid;
  font-size: 14px;
  font-weight: 400;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid;
  /* 鼠标改为指针可以跳转 */
  cursor: pointer;
}
.task-stat-display.total .display-wrapper .stat-item:last-child .stat-count {
  border-right: 0;
}
.task-stat-display.total .display-wrapper .stat-item:last-child .stat-name {
  border-right: 0;
}
.task-stat-display.mime .display-wrapper .stat-item:last-child .stat-count {
  border-right: 0;
}
.task-stat-display.mime .display-wrapper .stat-item:last-child .stat-name {
  border-right: 0;
}
.task-stat-display.pty .display-wrapper .stat-item:last-child .stat-count {
  border-right: 0;
}
.task-stat-display.pty .display-wrapper .stat-item:last-child .stat-name {
  border-right: 0;
}
.task-sign {
  height: 12.5%;
  display: flex;
  align-items: center;
  padding-left: 15px;
  font-size: 14px;
  font-weight: 400;
}
.task-sign [class^="el-icon-"] {
  font-size: 25px;
  margin-right: 10px;
}
.task-sign.mime [class^="el-icon-"] {
  color: #e56649;
}
.task-sign.pty [class^="el-icon-"] {
  color: #0e63a2;
}
</style>