YZProjectCloud/yanzhu-bigscreen/src/views/components/MonitAndWarning.vue

<template>
  <el-row :key="elKey" class="monit-and-warning" :class="'is-' + type">
    <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" :key="idx"
          @click="doShowDetail(item)" v-if="type != 'detail' || (type == 'detail' && item.name != '劳资预警')"
          style="height: unset;cursor: pointer;">
          <div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
          <div class="glr-login-number analyse-login-numbe">
            <div><img src="/cdn/bsimages/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>
  </el-row>
</template>

<script>
import testData from '../test/detail'
import debounce from 'lodash.debounce'
export default {
  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,
        },
      ],
    };
  },
  created() {
    this.$bus.$on('projectChange', debounce(res => {
      this.prjInfo = res;
      this.getMonitAndWarning();
    }));
  },
  methods: {
    doShowDetail(item) {
      if (item.name == '劳资预警') {
        if (this.type == "detail") {
          this.$refs.flowLabourDlg.showDialog(this.prjInfo);
        } else {
          this.$refs.flowLabourDlg.showDialog({ id: 0 });
        }
      }
    },
    getMonitAndWarning() {
      let prjId = 0;
      if (this.type == "detail") {
        prjId = this.prjInfo.id;
      }
      let d = testData.monitAndWarning;
      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>
<style lang="less">
.monit-and-warning {
  .time-study-value {
    margin-bottom: 10px;
  }

  .analyse-number-max {
    .analyse-num-max {
      margin-top: 10px;
    }
  }
}

@media (min-width: 1921px) and (max-width: 2560px) {
  .monit-and-warning {
    .time-study-value {
      margin-bottom: 40px !important;
      margin-top: 20px !important;

      p {
        font-size: 24px;
      }

      .analyse-num {
        font-size: 18px;

        span {
          font-size: 40px;
        }
      }
    }
  }

  .survey-oil-title {
    .survey-oil-text {
      font-size: 20px;
      background-size: 12px 24px;
    }
    .survey-oil-summary{
      font-size:30px !important;
    }
  }

  .analyse-number-max {
    .analyse-num-max {
      margin-top: 30px !important;

      .glr-login-number-red-bgd {
        background-size: 100% 45px;
        height: 45px;
        ;
      }

      .analyse-login-numbe {
        font-size: 24px;
        top: 20px;

        img {
          width: 10px;
          height: 10px;
          margin-right: 8px;
        }
        .glr-rate-value{
          span{
            font-size:30px;
          }
        }
      }
    }
  }
}

@media (min-width: 2561px) {
  .monit-and-warning {
    .time-study-value {
      margin-bottom: 80px !important;
      margin-top: 30px !important;

      p {
        font-size: 36px;
      }

      .analyse-num {
        font-size: 24px;

        span {
          font-size: 54px;
        }
      }
    }
  }

  .survey-oil-title {
    .survey-oil-text {
      padding-left: 30px;
      font-size: 30px;
      background-size: 18px 36px;
    }
    .survey-oil-summary{
      font-size:40px !important;
    }
  }

  .analyse-number-max {
    .analyse-num-max {
      margin-top: 60px !important;

      .glr-login-number-red-bgd {
        background-size: 100% 80px;
        height: 80px;
      }

      .analyse-login-numbe {
        font-size: 36px;
        top: 30px;

        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        .glr-rate-value{
          span{
            font-size:40px;
          }
        }
      }
    }
  }
}
</style>