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 }}%</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>
</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,
        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>