vis389/src/views/bigScreen/qualityManage/center.vue

<template>
  <div>
    <center1>
      <div class="data">
        <div class="data-item">
          <div><span style="font-weight: bold">质量体系整改率</span></div>
          <div class="box">
            <span>{{ percentage }}%</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar :percentage="percentage" />
          </div> -->
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">产品合格率</span></div>
          <div class="box">
            <span>{{ dataInfo.productCate || 0 }}%</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar :percentage="dataInfo.productCate" />
          </div> -->
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">一般性质量问题数量</span></div>
          <div class="box" style="font-size: 18px">
            <span style="color: #55c5a2; margin: 0 5px">↓</span>20%
          </div>
          <div class="box">
            <i>{{ dataInfo.commonlyProblemTotal }}</i
            ><span class="num2"></span>
          </div>
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">低层次问题数</span></div>
          <div class="box">
            <i>{{ dataInfo.lowProblemTotal }}</i
            ><span class="num2"></span>
          </div>
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">小型产品合格率</span></div>
          <div class="box">
            <span>{{ dataInfo.smallProductCate || 0 }}</span
            >%
          </div>
          <!-- <div style="width: 100%">
            <progressBar :percentage="dataInfo.smallProductCate" />
          </div> -->
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">产品错、漏检率</span></div>
          <div class="box">
            <span>
              {{ dataInfo.realErrorCheckRate.toFixed(2) }}%
              <!-- /{{dataInfo.targetErrorCheckRate}}% -->
            </span>
          </div>
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">质量计划完成率</span></div>
          <div class="box">
            <span>{{ dataInfo.planCompleteRate.toFixed(2) }}</span
            >%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
              dataInfo.qualityPlanCompleteTotal
            }}</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar :percentage="dataInfo.planCompleteRate" />
          </div> -->
        </div>
        <div class="data-item">
          <div><span style="font-weight: bold">质量检查完成率</span></div>
          <div class="box">
            <span>{{ dataInfo.checkCompleteRate.toFixed(2) }}</span
            >%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
              dataInfo.qualityNotificationCompleteTotal
            }}</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar :percentage="dataInfo.checkCompleteRate" />
          </div> -->
        </div>
      </div>
    </center1>
  </div>
</template>

<script>
import center1 from "./components/center1/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import progressBar from "./../components/progress/index.vue";

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
  mixins: [resize],
  name: "left1",
  components: {
    center1,
    rocketTit,
    progressBar,
  },
  data() {
    return {
      dataInfo: {
        rectificationRate: 0,
        productCate: 0,
        commonlyProblemTotal: 0,
        lowProblemTotal: 0,
        smallProductCate: 0,
        realErrorCheckRate: 0,
        targetErrorCheckRate: 0,
        errorCheckRate: 0,
        leakCheckRate: 0,
        planCompleteRate: 0,
        qualityPlanCompleteTotal: 0,
        planCompleteRate: 0,
        checkCompleteRate: 0,
        qualityNotificationCompleteTotal: 0,
      },
    };
  },
  computed: {
    percentage() {
      return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0;
    },
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    getData() {
      this.request({
        url: "/hx/qualityAssurance/getQualityManage",
        method: "get",
      }).then(({ data }) => {
        this.dataInfo = data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tit {
  padding: 16px 24px;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.data {
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
  background: rgba(2, 18, 63, 0.33);
  color: #ffffff;
  font-size: 18px;
  .data-item {
    width: 24%;
    height: 147px;
    padding: 10px;
    margin: 7px 7px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background-color: rgba(145, 213, 254, 0.09);
    > div {
      margin: 5px 0;
      text-align: center;
      font-size: 16px;
      img {
        // width: 10px;
        // height: 10px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .box {
      font-size: 26px;
      font-family: Roboto-BlackItalic, Roboto;
      font-weight: 600;
      color: #91d5fe;
    }
    .num {
      font-size: 14px;
    }
    .num2 {
      font-size: 16px;
      margin-left: 5px;
      color: #fff;
    }
  }
}

.center1 {
  position: relative;
  .con_right {
    width: 138px;
    position: absolute;
    top: 41%;
    right: 43%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .con_title {
      width: 100%;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
        margin-right: 3px;
      }
    }
    .con_title_bg1 {
      background: url("./img/left1/1.png") no-repeat;
    }
    .con_title_bg2 {
      background: url("./img/left1/2.png") no-repeat;
    }
    .con_title_bg3 {
      background: url("./img/left1/3.png") no-repeat;
    }
    .com_img {
      margin-top: 5px;
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .con_two {
    top: 37%;
    left: 13%;
  }
  .con_three {
    top: 70%;
    right: 16%;
  }
}
</style>