318 lines
8.0 KiB
Vue
318 lines
8.0 KiB
Vue
<template>
|
||
<Card title="质量管理">
|
||
<div class="container">
|
||
<div class="left">
|
||
<div class="image">
|
||
<img src="../assets/images/common/quality.gif" alt="">
|
||
<div class="value">
|
||
<span class="number">{{ qualityProblem.totalNum || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="unit">
|
||
<span>质量管理总数</span>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="left" ref="chart" style="transform: translateY(5px)"></div> -->
|
||
<div class="right">
|
||
<div class="top">
|
||
<div class="left" :class=" tab==2 ? 'click' : ''" >
|
||
<span class="label" @click="already(2)">已整改</span>
|
||
<span class="value"
|
||
>({{ qualityProblem.rectificationNum || 0 }})</span
|
||
>
|
||
</div>
|
||
<div class="right" :class=" tab==5 ? 'click' : ''">
|
||
<span class="label" @click="already(5)">未整改</span>
|
||
<span class="value"
|
||
>({{ qualityProblem.noRectificationNum || 0 }})</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<vue-scroll style="flex: 1; position: relative">
|
||
<div class="list" v-if="list.length">
|
||
<div class="list-item" v-for="(item, index) in list" :key="index">
|
||
<span class="label">{{ branchNewItem(item.dangerName) }}</span>
|
||
<!-- <span class="value">{{ item.content }}</span> -->
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
class="empty"
|
||
style="
|
||
position: absolute;
|
||
left: 55%;
|
||
top: 40%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
>
|
||
<img src="@/assets/images/noData3.png" />
|
||
<div style="text-align: center; color: #5b626b; font-size: 14px">
|
||
暂无数据
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from "../components/Card";
|
||
import JNestedRingChart from "../../common/jChart/pie/JNestedRingChart.vue";
|
||
import { getInspectionRecordListApi } from "@/assets/js/api/quality.js";
|
||
import {
|
||
qualityManagement,
|
||
} from "@/assets/js/api/zhongjianFourth";
|
||
|
||
import { mapState } from "vuex";
|
||
|
||
export default {
|
||
components: { Card, JNestedRingChart },
|
||
data() {
|
||
return {
|
||
projectSn:"",
|
||
tab : 2,
|
||
show:true,
|
||
recordStatus: 2, // 整改状态 2已整改（已闭合） 5待整改
|
||
// 质量问题
|
||
qualityProblem: {
|
||
rectificationNum: undefined, // 整改数量
|
||
noRectificationNum: undefined, // 未整改数量
|
||
totalNum: undefined, // 总数量
|
||
},
|
||
list: [],
|
||
titObj: {
|
||
text: 0,
|
||
y: "30%",
|
||
subTitle: "质量问题数",
|
||
color1: "#FFC303",
|
||
size1: "38",
|
||
size2: "14",
|
||
},
|
||
series: [
|
||
{
|
||
radius: ["0%", "60%"],
|
||
color: "#070a16",
|
||
startAngle: 90,
|
||
data: [100],
|
||
},
|
||
{
|
||
roseType: "area",
|
||
radius: ["60%", "65%"],
|
||
color: ["#66d4d9", "#47939a"],
|
||
data: [50, 50],
|
||
startAngle: 90,
|
||
},
|
||
{
|
||
radius: ["65%", "73%"],
|
||
color: "#070a16",
|
||
startAngle: 90,
|
||
data: [100],
|
||
},
|
||
{
|
||
radius: ["73%", "85%"],
|
||
color: ["#65d3d8", "#e5612a"],
|
||
startAngle: 90,
|
||
data: [
|
||
{ value: 0, name: "未整改质量问题" },
|
||
{ value: 0, name: "已整改质量问题" },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
},
|
||
mounted() {
|
||
this.getQualityProblem();
|
||
this.getQuality();
|
||
},
|
||
watch: {
|
||
recordStatus: {
|
||
deep: true,
|
||
handler(n, o) {
|
||
if (n != o) {
|
||
this.getQuality();
|
||
}
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
branchNewItem(val){
|
||
var item = val.split('/')
|
||
var ind = item.length - 1
|
||
console.log("6666666666666",item);
|
||
console.log("6666666666666",ind);
|
||
console.log("6666666666666",item[ind]);
|
||
return item[ind]
|
||
},
|
||
/** 查询列表 */
|
||
getQualityProblem() {
|
||
this.show = false
|
||
qualityManagement({ projectSn: this.projectSn }).then((res) => {
|
||
console.log("质量管理: ", res);
|
||
if (res.code == 200) {
|
||
this.titObj.text = res.result.totalNum;
|
||
console.log('this.titObj.text',this.titObj.text)
|
||
this.show = true
|
||
this.series[3].data[0].value = res.result.noRectificationNum;
|
||
this.series[3].data[1].value = res.result.rectificationNum;
|
||
const qualityProblem = this.qualityProblem;
|
||
Object.keys(qualityProblem).forEach((key) => {
|
||
qualityProblem[key] = toString(res.result[key]);
|
||
});
|
||
function toString(value) {
|
||
if (typeof value === "string") return value;
|
||
return value.toString();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
already(val) {
|
||
this.recordStatus = val;
|
||
this.tab = val
|
||
},
|
||
getQuality() {
|
||
getInspectionRecordListApi({
|
||
projectSn: this.projectSn,
|
||
recordStatus: this.recordStatus,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log("查看整改问题", res);
|
||
this.list = res.result.page.records.map((item) => {
|
||
return { dangerName: item.dangerItemContent };
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 10px 0;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
> .left {
|
||
width: 40%;
|
||
height: 100%;
|
||
}
|
||
|
||
> .right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 50%;
|
||
.top {
|
||
cursor: pointer;
|
||
display: flex;
|
||
padding: 5px 0;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
line-height: 25px;
|
||
margin-left: 55px;
|
||
// .left {
|
||
// color: #af5320;
|
||
// transform: translateX(-10%);
|
||
// }
|
||
.click{
|
||
color: #af5320;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
overflow-y: scroll;
|
||
|
||
.list-item {
|
||
position: relative;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
border-left: 4px solid #66d3d8;
|
||
margin-bottom: 2px;
|
||
padding: 6px 0;
|
||
width: 100%;
|
||
background-image: linear-gradient(to right, #3b7589, #182337);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
white-space: nowrap;
|
||
|
||
&:hover {
|
||
// padding: 15px 0;
|
||
// margin-top: 2px;
|
||
// margin-bottom: 4px;
|
||
// &::before {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// left: 6px;
|
||
// display: inline-block;
|
||
// transform: translate(0, -50%);
|
||
// width: 6.6px;
|
||
// height: 11.6px;
|
||
// background-image: url("../assets/images/command-center/triangle.png");
|
||
// background-size: 100% 100%;
|
||
// transition: all 0.3s;
|
||
// }
|
||
// .value {
|
||
// color: #c2805f;
|
||
// }
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label,
|
||
.value {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.label {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.value {
|
||
width: 60%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.image {
|
||
display: grid;
|
||
place-items: center;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
img {
|
||
height: 140px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.value {
|
||
position: absolute;
|
||
font-size: 23px;
|
||
margin: 0px 0 30px 0;
|
||
}
|
||
}
|
||
.unit{
|
||
margin: -20px 0 0px 36px;
|
||
}
|
||
}
|
||
</style>
|