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