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"
          style="height: unset"
          :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">
              <span>{{ item.data }}/{{ item.total }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "JhbigscreenMonitAndWarning",
  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,
        },
      ],
    };
  },
  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();
      }
    });
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      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;
        this.elKey++;
      });
    },
  },
};
</script>