jhbigscreen/src/pages/components/MonitAndWarning.vue

<template>
  <el-row :key="elKey">
    <el-col :span="8">
      <div class="time-study-value">
        <p>今日预警数</p>
        <div class="analyse-num">
          <span>{{ todayCnt }}</span> 个
        </div>
      </div>
      <div class="time-study-value">
        <p>本周预警数</p>
        <div class="analyse-num">
          <span>{{ weekCnt }}</span> 个
        </div>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="survey-oil-title">
        <div class="survey-oil-hr"></div>
        <div class="survey-oil-text">预警类型</div>
        <div class="survey-oil-summary" style="
            position: absolute;
            right: 0px;
            top: 8px;
            font-size: 15px;
            padding: 0 15px;
            background: #000b25;
          ">
          <span style="font-weight: 800; color: red">未完成</span>/<span style="color: #c0dafb">总数</span>
        </div>
      </div>
      <div class="analyse-number-max" id="afootOverflowType" style="height: unset">
        <div class="glr-login-number-max analyse-num-max" v-for="(item, idx) in warningType" @click="doShowDetail(item)"
          v-if="type != 'detail' || (type == 'detail' && item.name != '劳资预警')" style="height: unset;cursor: pointer;" :key="idx">
          <div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
          <div class="glr-login-number analyse-login-numbe" >
            <div><img src="images/text_red_spot.png" />{{ item.name }}</div>
            <div class="glr-rate-value glr-rate-red-value">
              <template v-if="idx == 0">
                <span style="color: #c0dafb">{{ item.total }}</span>
              </template>
              <template v-else>                
                <span>{{ item.data }}</span>/
                <span style="color: #c0dafb">{{ item.total }}</span>
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <flowLabourDlg ref="flowLabourDlg"></flowLabourDlg>
  </el-row>
</template>

<script>
import flowLabourDlg from "../dlg/flowLabourDlg";
export default {
  name: "JhbigscreenMonitAndWarning",
  components: {    
    flowLabourDlg,
  },
  props: {
    type: {
      type: String,
      default: "index",
    },
  },
  data() {
    return {
      elKey: 0,
      prjInfo: {},
      deptInfo: {},
      todayCnt: 0,
      weekCnt: 0,
      warningType: [
        {
          name: "AI预警",
          data: 0,
          total: 0,
        },
        {
          name: "安全预警",
          data: 0,
          total: 0,
        },
        {
          name: "质量预警",
          data: 0,
          total: 0,
        },
        {
          name: "劳资预警",
          data: 0,
          total: 0,
        },
      ],
    };
  },
  mounted() {
    this.$bus.$on("projectChange", (res) => {
      this.prjInfo = res;
      if (this.deptInfo.text) {
        this.getMonitAndWarning();
      }
    });
    this.$bus.$on("deptChange", (dept) => {
      this.deptInfo = dept;
      if (this.prjInfo.id) {
        this.getMonitAndWarning();
      }
    });
    if (this.$root.hasInitHeader) {
      this.initMe();
    }
  },
  created() {
    this.initMe();
  },
  methods: {
    doShowDetail(item){
      if(item.name == '劳资预警'){
        if(this.type=="detail"){
          this.$refs.flowLabourDlg.showDialog(this.prjInfo);
        }else{
          this.$refs.flowLabourDlg.showDialog({id:0});
        }
      }
    },
    initMe() {
      this.prjInfo = this.$root.project || {};
      this.deptInfo = this.$root.dept || {};
      this.getMonitAndWarning();
    },
    getMonitAndWarning() {
      let prjId = 0;
      if (this.type == "detail") {
        prjId = this.prjInfo.id;
      }
      this.$api.problemmodify
        .getMonitAndWarning(this.deptInfo.id || 0, prjId)
        .then((d) => {
          let tmps = d.data?.today || [];
          let sum = 0;
          tmps.forEach((it) => {
            sum += it.total;
          });
          this.todayCnt = sum;
          sum = 0;
          tmps = d.data?.week || [];
          tmps.forEach((it) => {
            sum += it.total;
          });
          this.weekCnt = sum;
          let data = 0;
          sum = 0;
          tmps = d.data?.group || [];
          let objs = tmps.filter((it) => it.infotype == "0");
          objs.forEach((it) => {
            sum += it.total;
            if (it.checkState != "4") {
              data += it.total;
            }
          });
          this.warningType[1].data = data;
          this.warningType[1].total = sum;
          data = 0;
          sum = 0;
          tmps = d.data?.group || [];
          objs = tmps.filter((it) => it.infotype == "1");
          objs.forEach((it) => {
            sum += it.total;
            if (it.checkState != "4") {
              data += it.total;
            }
          });
          this.warningType[2].data = data;
          this.warningType[2].total = sum;
          data = 0;
          sum = 0;
          tmps = d.data?.group || [];
          objs = tmps.filter((it) => it.infotype == "96");
          objs.forEach((it) => {
            sum += it.total;
            if (it.checkState != "4") {
              data += it.total;
            }
          });
          this.warningType[0].data = data;
          this.warningType[0].total = sum;
          data = 0;
          sum = 0;
          tmps = d.data?.group || [];
          objs = tmps.filter((it) => it.infotype == "97");
          objs.forEach((it) => {
            sum += it.total;
            if (it.checkState != "100") {
              data += it.total;
            }
          });
          this.warningType[3].data = data;
          this.warningType[3].total = sum;
          this.elKey++;
        });
    },
  },
};
</script>