ybxf-security-ui/src/views/backend/realTime/index.vue

<template>
  <div class="app-container">
    <el-tabs
      type="border-card"
      v-model.trim="selectedTab"
      @tab-click="clickTab"
    >
      <el-tab-pane
        :label="item.deptName"
        v-for="(item, index) in brigade"
        :key="index"
        :name="item.id"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="two-line">
      <div v-for="(item, index) in scanCode" :key="index">
        <div class="total">{{ item.count }}</div>
        <div class="item-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { activetimeTongji, getDdlist } from "@/api/backend/statistics";
export default {
  data() {
    return {
      selectedTab: 0,
      scanCode: [
        { name: "已覆盖单位数统计", code: 1,count:0 },
        { name: "当日扫码检查量统计", code: 2,count:0 },
        { name: "活跃用户统计", code: 3,count:0 },
        { name: "上报隐患数统计", code: 4,count:0 },
        { name: "活跃重点单位统计", code: 5,count:0 },
        { name: "每日活跃重点单位统计", code: 6,count:0 },
        { name: "重点单位扫码量统计", code: 7,count:0 },
      ],
      deptid: 0,
      brigade: [],
    };
  },
  created() {
    this.getList();
    this.navList();
    this.$forceUpdate()
  },
  methods: {
    navList() {
      activetimeTongji({ pageNo: 1, pageSize: 9999, deptid: this.deptid }).then(
        (response) => {
          if (response.data) {
            const tongjiData = response.data.list.filter((item) => {
              return item.deptid == this.deptId;
            });
            if (tongjiData.length > 0) {
              const datas = tongjiData[0];
              this.scanCode.forEach((item) => {
                switch (item.code) {
                  case 1:
                    item.count = datas.coverorg; //
                    break;
                  case 2:
                    item.count = datas.todayscan; //
                    break;
                  case 3:
                    item.count = datas.actuser;
                    break;
                  case 4:
                    item.count = datas.dengercount;
                    break;
                  case 5:
                    item.count = datas.actimporg;
                    break;
                  case 6:
                    item.count = datas.todayactimporg;
                    break;
                  case 7:
                    item.count = datas.actimpscan;
                    break;
                  default:
                    break;
                }
              });
            } else {
              this.scanCode.forEach((item) => {
                item.count = 0;
              });
            }
          }
        }
      );
    },
    getList() {
      // 执行查询
      getDdlist().then((response) => {
        this.brigade = response.data;
        this.brigade.unshift({ deptName: "所有大队", id: "0" });
      });
    },
    //切换tab
    clickTab(e) {
      this.deptId = e.name;
      this.navList();
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  background:#EDEFF2;
  max-height: calc(100vh - 84px);
}
.two-line {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;

  & > div {
    flex-basis: 23%;
    margin-top: 16px;
    height: 200px;
    background: #fff;
    position: relative;
    .total {
      position: absolute;
      left: 50%;
      text-align: center;
      line-height: 90px;
      font-size: 30px;
      font-weight: 600;
      transform: translateX(-50%);
      top: 30px;
      width: 106px;
      height: 106px;
      opacity: 1;
      border-radius: 50%;
      box-sizing: border-box;
    }
  }
  & > div:nth-child(even) {
    color: #01bceb;
    .total {
      border: 9px solid #01bceb;
    }
  }
  & > div:nth-child(odd) {
    color: #0147eb;
    .total {
      border: 9px solid #0147eb;
    }
  }
  & > div:last-child {
    margin-right: 0;
  }
  .item-name {
    color: #657398;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 330px;
  }
}
</style>