337 lines
6.8 KiB
Vue
337 lines
6.8 KiB
Vue
<template>
|
|
<!-- 质量管理 -->
|
|
<view class="qualityManage">
|
|
<headers class="fixedheader" :showBack="true">
|
|
<view class="headerName">
|
|
质量管理
|
|
</view>
|
|
</headers>
|
|
<scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }" scroll-y>
|
|
<view class="chart_wrap">
|
|
<!-- <view class="chart_box">
|
|
<view class="chart_title">
|
|
<span>{{totalNum}}</span>
|
|
质量检查总数
|
|
</view>
|
|
<u-charts canvas-id="pieChart" chartType="ring" :opts="pieChartData" ref="pieChart" cWidth="150" cHeight="150"></u-charts>
|
|
</view> -->
|
|
<view class="chart_message" >
|
|
<view class="flex" v-for="(item,index) in manageTypeList" :key="index">
|
|
<view class="name flex">
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view> {{item.typeName}}
|
|
</view>
|
|
<view class="num">{{item.num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="item flex2" @click="goList(1)">
|
|
<view class="flex">
|
|
<image class="icon" style="width: 38rpx; height: 22px; margin-right: 7px;"
|
|
src="../../../static/icon1.png"></image>
|
|
<text>质量检查记录</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="item flex2">
|
|
<view class="flex">
|
|
<image class="icon" style="width: 44rpx; height: 21px;margin-right: 7px;"
|
|
src="../../../static/icon2.png"></image>
|
|
<text>检查项管理</text>
|
|
</view>
|
|
</view> -->
|
|
<view>
|
|
<view class="addBtn" @click="addBtn">新增质量检查</view>
|
|
</view>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from "../../../components/headers/headers.vue"
|
|
import uCharts from '@/components/u-charts/component.vue';
|
|
var _self;
|
|
export default {
|
|
components:{
|
|
uCharts
|
|
},
|
|
data() {
|
|
return {
|
|
mendNumber: 0,
|
|
submitNumber: 0,
|
|
totalNum: 0,
|
|
pieChartData: {
|
|
title: {
|
|
name: "1",
|
|
color: '#7cb5ec',
|
|
fontSize: 12,
|
|
offsetY: 0,
|
|
background:'rgba(0,0,0,0)'
|
|
},
|
|
series: [{
|
|
"data": 0,
|
|
color: '#FA5C53'
|
|
},
|
|
{
|
|
"data": 0,
|
|
color: '#FFCC00'
|
|
},
|
|
{
|
|
"data": 0,
|
|
color: '#6DD400'
|
|
},
|
|
{
|
|
"data": 0,
|
|
color: '#44C5D7'
|
|
},
|
|
]
|
|
},
|
|
manageTypeList:[{
|
|
typeName: '待整改数',
|
|
totalNum: 26
|
|
},
|
|
{
|
|
typeName: '待审核数',
|
|
totalNum: 12
|
|
},
|
|
{
|
|
typeName: '无需整改数',
|
|
totalNum: 20
|
|
},
|
|
{
|
|
typeName: '已闭合数',
|
|
totalNum: 10
|
|
}],
|
|
colorList:['#FA5C53','#FFCC00','#6DD400','#44C5D7'],
|
|
statusBarHeight: 0
|
|
}
|
|
},
|
|
mounted(){
|
|
// this.getListData();
|
|
// this.loadData();
|
|
},
|
|
onShow(){
|
|
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
|
this.getListData();
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData(){
|
|
if(this.manageTypeList.length>0){
|
|
let arr = [];
|
|
this.manageTypeList.forEach((item,index)=>{
|
|
let json = {
|
|
"data": item.totalNum,
|
|
color: this.colorList[index]
|
|
};
|
|
arr.push(json)
|
|
});
|
|
this.pieChartData.series = arr;
|
|
};
|
|
},
|
|
//获取记录
|
|
getListData() {
|
|
let that = this;
|
|
let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
|
|
let projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|
//获取我整改的巡查记录数量
|
|
this.sendRequest({
|
|
url: 'xmgl/qualityInspectionRecord/selectQualityStatistics',
|
|
method: 'post',
|
|
data: {
|
|
projectSn: projectSn
|
|
},
|
|
success: res => {
|
|
console.log(res)
|
|
this.totalNum = res.result.total.totalNum
|
|
let data = res.result
|
|
let arr = [
|
|
{
|
|
typeName: '待整改数',
|
|
num: data.total.rectificationNum
|
|
},
|
|
{
|
|
typeName: '待审核数',
|
|
num: data.total.reviewNum
|
|
},
|
|
{
|
|
typeName: '无需整改数',
|
|
num: data.total.totalNum-data.total.rectificationNum
|
|
},
|
|
{
|
|
typeName: '已闭合数',
|
|
num: data.total.closeNum
|
|
}
|
|
]
|
|
this.manageTypeList = arr
|
|
let arr2 = []
|
|
this.manageTypeList.forEach((item, index)=>{
|
|
let json = {
|
|
"data": item.num,
|
|
color: this.colorList[index]
|
|
};
|
|
arr2.push(json);
|
|
});
|
|
this.pieChartData.series = arr2;
|
|
}
|
|
})
|
|
|
|
},
|
|
//列表页
|
|
goList(type) {
|
|
uni.navigateTo({
|
|
url: "./list?type=" + type
|
|
})
|
|
},
|
|
//新增按钮
|
|
addBtn() {
|
|
uni.navigateTo({
|
|
url: "./addIssue?type=add"
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fixedheader{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
/deep/.headerBox{
|
|
background: #13b98c;
|
|
}
|
|
}
|
|
.smallHeight{
|
|
// height: calc(100% - 45px);
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background: #F6F6F6;
|
|
}
|
|
.qualityManage{
|
|
height: 100%;
|
|
}
|
|
.qualityManage >>> .headerBox {
|
|
background-color: #13b98c;
|
|
}
|
|
.chart_wrap .chart_box{
|
|
width: 60%;
|
|
position: relative;
|
|
}
|
|
.chart_wrap{
|
|
display: flex;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.chart_box #pieChart{
|
|
margin-left: 76rpx !important;
|
|
margin-top: 56rpx !important;
|
|
}
|
|
.chart_message{
|
|
margin-left: 60rpx;
|
|
padding-top: 60rpx;
|
|
}
|
|
.chart_wrap .flex{
|
|
width: 240rpx;
|
|
margin: 8rpx 0;
|
|
}
|
|
.chart_wrap .num {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.chart_title{
|
|
background: #0f9c75;
|
|
width: 216rpx;
|
|
height: 216rpx;
|
|
position: absolute;
|
|
z-index: 1;
|
|
border-radius: 50%;
|
|
left: 116rpx;
|
|
top: 96rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.chart_title span{
|
|
font-size: 24px;
|
|
}
|
|
.chart_wrap .bg_color{
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
margin: 0 16px 0 10px;
|
|
}
|
|
.qualityManage .content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0px 30rpx 0;
|
|
box-sizing: border-box;
|
|
margin-top: -30px;
|
|
z-index: 99;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 14px 30rpx;
|
|
box-shadow: 0 0 10px #d3d3d3;
|
|
margin-bottom: 18px;
|
|
border-radius: 4px;
|
|
color: rgba(51, 51, 51, 100);
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Regular;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.value {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.num {
|
|
margin-right: 5px;
|
|
font-size: 37rpx;
|
|
color: #4181FE;
|
|
}
|
|
|
|
.addBtn {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
left: 0;
|
|
right: 0;
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
border-radius: 30px;
|
|
background-color: rgba(65, 129, 254, 0.9);
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
box-shadow: 0 0 5px rgba(65, 129, 254, 0.7);
|
|
}
|
|
|
|
.addBtn:active {
|
|
background-color: #4181FE;
|
|
}
|
|
.chart_wrap{
|
|
width: 100%;
|
|
height: 480rpx;
|
|
background-image: url(../../../static/titleBg2.png);
|
|
background-size: cover;
|
|
}
|
|
</style>
|