Files
2022-02-16 11:17:07 +08:00

254 lines
6.4 KiB
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>