up
This commit is contained in:
熊丽君
@ -1,96 +1,110 @@
|
||||
<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 }}%</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 }}</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.errorCheckRate }}%/{{ dataInfo.leakCheckRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量计划完成率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.planCompleteRate }}</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 }}</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>
|
||||
<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.errorCheckRate.toFixed(2) }}%/{{
|
||||
dataInfo.leakCheckRate.toFixed(2)
|
||||
}}%</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 }}</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 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'
|
||||
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: {
|
||||
mixins: [resize],
|
||||
name: "left1",
|
||||
components: {
|
||||
center1,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: {
|
||||
rectificationRate: 0,
|
||||
productCate: 0,
|
||||
commonlyProblemTotal: 0,
|
||||
@ -104,135 +118,135 @@ export default {
|
||||
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
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
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;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
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%;
|
||||
}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user