545 lines
20 KiB
Vue
545 lines
20 KiB
Vue
<template>
|
|
<div class="project-quality-checking">
|
|
<module-one-1-1 label="举牌验收">
|
|
<div class="checking-row1" style="position: relative;height: 310px;overflow: hidden;">
|
|
<div class="checking-chart-nav">
|
|
<span class="chart-nv-item" @click="showChart1 = true"
|
|
:class="showChart1 ? 'active' : ''">常规验收</span>
|
|
<span class="chart-nv-item" @click="showChart1 = false"
|
|
:class="!showChart1 ? 'active' : ''">隐蔽验收</span>
|
|
</div>
|
|
<div v-if="chart">
|
|
<enginChart :class="showChart1 ? 'show-chart' : 'hide-chart'" ref="chart1" :height="300">
|
|
</enginChart>
|
|
<enginChart :class="!showChart1 ? 'show-chart' : 'hide-chart'" ref="chart2" :height="300">
|
|
</enginChart>
|
|
</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="常规验收" class="scroll checking-row2" style="position: relative;">
|
|
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 12px;top: 12px;"
|
|
@click="doShowCheckingListDlg(1)" v-if="prjs.length>1">
|
|
<div class="checking-group-nav warning-info-title" style="padding-left: 20px;">
|
|
<div class="nav-item" :class="nav1 == it.dictValue ? 'active' : ''"
|
|
@click="doQueryGroup(it.dictValue, 'a')" v-for="(it, idx) in dict1" :key="it.dictValue">{{
|
|
it.dictLabel }}</div>
|
|
</div>
|
|
<div v-if="!projectInfo || projectInfo.id == 0">
|
|
<div class="idle-list problemmodify_list" style="padding:0px 10px">
|
|
<el-table style="width: 100%" ref="wgzp" :row-style="rowStyle" :data="dataList1" height="233"
|
|
class="el-table">
|
|
|
|
<el-table-column type="index" width="40">
|
|
<template slot-scope="scope">
|
|
<div :class="scope.$index < 3 && +scope.row.value > 0 ? 'idle-list-color' : ''">
|
|
{{ scope.$index + 1 }} </div>
|
|
</template></el-table-column>
|
|
<el-table-column prop="name" label="项目名称" class-name="text-left" :show-overflow-tooltip="true">
|
|
</el-table-column>
|
|
<el-table-column prop="id" label="验收数量" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.count }} </div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="id" label="占比" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.percent ? scope.row.percent.toFixed(2) + '%' : '' }} </div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div v-else style="padding:0px 2px;">
|
|
<div v-if="dataList1.length == 0" style="text-align: center;padding-top:20px" class="div-no-data">
|
|
<img src="images/nodata.png" style="width: 120px;">
|
|
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
|
</div>
|
|
<div v-else class="acceptance-list scroll">
|
|
<div class="acceptance-item" v-for="(it, idx) in dataList1" :key="idx" style="cursor: pointer;">
|
|
<div class="row-1">
|
|
<div class="div-img">
|
|
<el-image :src="getProfileImage(it.mainImage)"
|
|
:preview-src-list="getBigProfileImage(it)" />
|
|
</div>
|
|
<div class="div-text" style="width: 65%;" @click="doShowChecking(it)">
|
|
<div class="row-3">
|
|
<div v-if="it.checkResult == '1'" class="sp-lbl">验收合格</div>
|
|
<div v-if="it.checkResult == '2'" class="sp-err">验收不合格</div>
|
|
<div class="sp-date">{{ it.checkingDate | formatDate }}</div>
|
|
</div>
|
|
<div class="row-3">
|
|
<span class="sp-label">项目:</span>
|
|
<span class="sp-text">{{ it.projectName }}</span>
|
|
</div>
|
|
<div class="row-3">
|
|
<span class="sp-label">区域:</span>
|
|
<span class="sp-text">{{ it.checkWorkingPosition }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-5" @click="doShowChecking(it)">
|
|
验收描述:{{ it.intro }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="隐蔽验收" class="scroll checking-row3" style="position: relative;">
|
|
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 12px;top: 12px;"
|
|
@click="doShowCheckingListDlg(2)" v-if="prjs.length>1">
|
|
<div class="checking-group-nav warning-info-title" style="padding-left: 20px;">
|
|
<div class="nav-item" :class="nav2 == it.dictValue ? 'active' : ''"
|
|
@click="doQueryGroup(it.dictValue, 'b')" v-for="(it, idx) in dict2" :key="it.dictValue">{{
|
|
it.dictLabel }}</div>
|
|
</div>
|
|
<div v-if="!projectInfo || projectInfo.id == 0">
|
|
<div class="idle-list problemmodify_list" style="padding:0px 10px">
|
|
<el-table style="width: 100%" ref="wgzp" :row-style="rowStyle" :data="dataList2" height="233"
|
|
class="el-table">
|
|
|
|
<el-table-column type="index" width="40">
|
|
<template slot-scope="scope">
|
|
<div :class="scope.$index < 3 && +scope.row.value > 0 ? 'idle-list-color' : ''">
|
|
{{ scope.$index + 1 }} </div>
|
|
</template></el-table-column>
|
|
<el-table-column prop="name" label="项目名称" class-name="text-left" :show-overflow-tooltip="true">
|
|
</el-table-column>
|
|
<el-table-column prop="id" label="验收数量" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.count }} </div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="id" label="占比" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.percent ? scope.row.percent.toFixed(2) + '%' : '' }} </div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div v-else style="padding:0px 2px;">
|
|
<div v-if="dataList2.length == 0" style="text-align: center;padding-top:20px" class="div-no-data">
|
|
<img src="images/nodata.png" style="width: 120px;">
|
|
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
|
</div>
|
|
<div v-else class="acceptance-list scroll">
|
|
<div class="acceptance-item" v-for="(it, idx) in dataList2" :key="idx" style="cursor: pointer;">
|
|
<div class="row-1">
|
|
<div class="div-img">
|
|
<el-image :src="getProfileImage(it.mainImage)"
|
|
:preview-src-list="getBigProfileImage(it)" />
|
|
</div>
|
|
<div class="div-text" style="width: 65%;" @click="doShowChecking(it)">
|
|
<div class="row-3">
|
|
<div v-if="it.checkResult == '1'" class="sp-lbl">验收合格</div>
|
|
<div v-if="it.checkResult == '2'" class="sp-err">验收不合格</div>
|
|
<div class="sp-date">{{ it.checkingDate | formatDate }}</div>
|
|
</div>
|
|
<div class="row-3">
|
|
<span class="sp-label">项目:</span>
|
|
<span class="sp-text">{{ it.projectName }}</span>
|
|
</div>
|
|
<div class="row-3">
|
|
<span class="sp-label">区域:</span>
|
|
<span class="sp-text">{{ it.checkWorkingPosition }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-5" @click="doShowChecking(it)">
|
|
验收描述:{{ it.intro }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<showCheckingDlg ref="checkDlg"></showCheckingDlg>
|
|
<listDlg ref="listDlg"></listDlg>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from "lodash.debounce";
|
|
import throttle from 'lodash.throttle'
|
|
import enginChart from '../engin/enginChart.vue'
|
|
import showCheckingDlg from './showCheckingDlg.vue'
|
|
import listDlg from './projectCheckingListDlg.vue'
|
|
export default {
|
|
name: 'JhbigscreenProjectChecking',
|
|
components: {
|
|
enginChart, showCheckingDlg, listDlg
|
|
},
|
|
data() {
|
|
return {
|
|
rowStyle: {
|
|
color: '#B6CFEF',
|
|
fontSize: '12px',
|
|
height: '32px'
|
|
},
|
|
showChart1: true,
|
|
dept: null,
|
|
projectInfo: null,
|
|
dict1: [],
|
|
dict2: [],
|
|
nav1: 1,
|
|
nav2: 1,
|
|
chart: true,
|
|
dataList1: [],
|
|
dataList2: [],
|
|
prjs:[],
|
|
};
|
|
},
|
|
created() {
|
|
this.$api.dict('project_checking_data_type_lvl2').then(d => {
|
|
let tmps = d || [];
|
|
this.dict1 = tmps.filter(it => it.cssClass == 'a');
|
|
this.dict2 = tmps.filter(it => it.cssClass == 'b');
|
|
if (this.dict1.length > 0) {
|
|
this.nav1 = this.dict1[0].dictValue;
|
|
this.doQueryGroup(this.nav1, "a");
|
|
}
|
|
if (this.dict2.length > 0) {
|
|
this.nav2 = this.dict2[0].dictValue;
|
|
this.doQueryGroup(this.nav2, "b");
|
|
}
|
|
});
|
|
},
|
|
mounted() {
|
|
this.$bus.$on(
|
|
"loadProjects",
|
|
debounce((prjs) => {
|
|
this.prjs = prjs;
|
|
})
|
|
);
|
|
this.$bus.$on("projectChange", throttle((res) => {
|
|
this.projectInfo = res;
|
|
this.loadData();
|
|
}));
|
|
this.$bus.$on("deptChange", throttle((dept) => {
|
|
this.dept = dept;
|
|
this.loadData();
|
|
}));
|
|
if (this.$root.hasInitHeader) {
|
|
this.initMe();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
doShowCheckingListDlg(lvl1) {
|
|
this.$refs.listDlg.showDialog({
|
|
lvl1: lvl1,
|
|
deptId: this.dept?.id || 0,
|
|
projectInfo: this.projectInfo,
|
|
dicts: lvl1 == 1 ? this.dict1 : this.dict2
|
|
});
|
|
},
|
|
doShowChecking(it) {
|
|
this.$refs.checkDlg.showDialog(it);
|
|
},
|
|
// 获取图片映射
|
|
getProfileImage(url) {
|
|
if (url) {
|
|
return '/jhapi' + url + ".min.jpg";
|
|
}
|
|
return url;
|
|
},
|
|
getBigProfileImage(it) {
|
|
if (it.imageUrls) {
|
|
let tmps = it.imageUrls.split(",").filter(d => d).map(it => {
|
|
return '/jhapi' + it;
|
|
})
|
|
if (tmps.length > 0) {
|
|
return tmps;
|
|
}
|
|
}
|
|
if (it.mainImage && it.mainImage.trim()) {
|
|
return ['/jhapi' + it.mainImage];
|
|
}
|
|
return [];
|
|
},
|
|
doQueryGroup(nav, t) {
|
|
if (t == 'a') {
|
|
this.nav1 = nav;
|
|
} else {
|
|
this.nav2 = nav;
|
|
}
|
|
if (!this.projectInfo || this.projectInfo.id == 0) {
|
|
this.loadGroupData(nav, t);
|
|
} else {
|
|
this.queryDataList(nav, t);
|
|
}
|
|
|
|
},
|
|
queryDataList(nav, t) {
|
|
let postData = {
|
|
projectId: this.projectInfo.id,
|
|
dataTypeLvl2:nav
|
|
}
|
|
this.$api.projectChecking.queryProjectCheckingList(1, 20, postData).then(d => {
|
|
if (t == "a") {
|
|
this.dataList1 = d.rows || [];
|
|
} else {
|
|
this.dataList2 = d.rows || [];
|
|
}
|
|
});
|
|
},
|
|
loadGroupData(nav, t) {
|
|
this.$api.projectChecking.groupCheckingByProjectId(nav, this.dept?.id || 0, this.projectInfo?.id || 0).then(d => {
|
|
let tmps = (d.data || []).map(it => {
|
|
return {
|
|
name: it.projectName,
|
|
count: it.id || 0,
|
|
percent: 0
|
|
}
|
|
});
|
|
let sum = 0;
|
|
tmps.forEach(it => {
|
|
sum += it.count;
|
|
})
|
|
if (sum > 0) {
|
|
tmps.forEach(it => {
|
|
it.percent = it.count * 100.0 / sum
|
|
})
|
|
}
|
|
if (t == "a") {
|
|
this.dataList1 = tmps;
|
|
} else {
|
|
this.dataList2 = tmps;
|
|
}
|
|
});
|
|
},
|
|
initMe() {
|
|
this.projectInfo = this.$root.project || {};
|
|
this.dept = this.$root.dept || {};
|
|
this.loadData();
|
|
},
|
|
loadData: throttle(function () {
|
|
this.doGetProjectCheckingChart();
|
|
if (this.dict1.length > 0) {
|
|
this.nav1 = this.dict1[0].dictValue;
|
|
this.doQueryGroup(this.nav1, "a");
|
|
}
|
|
if (this.dict2.length > 0) {
|
|
this.nav2 = this.dict2[0].dictValue;
|
|
this.doQueryGroup(this.nav2, "b");
|
|
}
|
|
}),
|
|
initChartData(d) {
|
|
let tmp1 = (d.data || []).filter(it => it.checkType == 'a').map(it => {
|
|
return { name: it.mainImage, value: it.id || 0 };
|
|
});
|
|
let tmp2 = (d.data || []).filter(it => it.checkType == 'b').map(it => {
|
|
return { name: it.mainImage, value: it.id || 0 };
|
|
});
|
|
let opt = {
|
|
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [{
|
|
top: 10,
|
|
type: 'pie',
|
|
radius: '60%',
|
|
data: tmp1,
|
|
label: {
|
|
alignTo: 'edge',
|
|
edgeDistance: "10%",
|
|
color: "#fff",
|
|
formatter: '{name|{b}}\n{cnt|{c}}',
|
|
rich: {
|
|
cnt: {
|
|
fontSize: 10,
|
|
color: '#eee',
|
|
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
]
|
|
};
|
|
if (this.$refs.chart1 && this.$refs.chart1.init) {
|
|
this.$refs.chart1.init(opt);
|
|
}
|
|
let opt2 = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [{
|
|
top: 10,
|
|
type: 'pie',
|
|
radius: '60%',
|
|
data: tmp2,
|
|
label: {
|
|
alignTo: 'edge',
|
|
edgeDistance: "10%",
|
|
color: "#fff",
|
|
formatter: '{name|{b}}\n{cnt|{c}}',
|
|
rich: {
|
|
cnt: {
|
|
fontSize: 10,
|
|
color: '#eee'
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
]
|
|
};
|
|
if (this.$refs.chart2 && this.$refs.chart2.init) {
|
|
this.$refs.chart2.init(opt2);
|
|
}
|
|
},
|
|
doGetProjectCheckingChart() {
|
|
this.chart = false;
|
|
this.$api.projectChecking.getProjectCheckingGroupFoChart(this.dept?.id || 0, this.projectInfo?.id || 0).then(d => {
|
|
this.chart = true;
|
|
setTimeout(() => {
|
|
this.initChartData(d);
|
|
}, 400);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.project-quality-checking {
|
|
.checking-row1 {
|
|
position: relative;
|
|
|
|
.checking-chart-nav {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 12px;
|
|
text-align: center;
|
|
z-index: 10;
|
|
|
|
.chart-nv-item {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
background-color: #fff;
|
|
color: #000;
|
|
|
|
&.active {
|
|
background-color: #68BBC4;
|
|
color: #fff;
|
|
}
|
|
|
|
&:first-child {
|
|
border-radius: 4px 0px 0px 4px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0px 4px 4px 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.engin-chart1 {
|
|
&.hide-chart {
|
|
left: -100000px;
|
|
top: -100000px;
|
|
}
|
|
|
|
&.show-chart {
|
|
position: relative;
|
|
left: unset;
|
|
}
|
|
|
|
&:last-child {
|
|
&.show-chart {
|
|
top: -300px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.problemmodify_list {
|
|
&.idle-list {
|
|
.el-table__body .el-table__row {
|
|
line-height: 36px;
|
|
height: 36px !important;
|
|
}
|
|
|
|
.el-table td {
|
|
height: 36px;
|
|
}
|
|
}
|
|
|
|
.el-table__body-wrapper {
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: rgb(1, 169, 255);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
tr {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.material-seal-list {
|
|
.material-seal-item {
|
|
padding: 8px;
|
|
display: flex;
|
|
border-bottom: solid 1px #fff;
|
|
box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.material-seal-left {
|
|
width: 40%;
|
|
}
|
|
|
|
.material-seal-right {
|
|
width: 60%;
|
|
padding-left: 12px;
|
|
line-height: 24px;
|
|
|
|
img {
|
|
width: 8px;
|
|
position: relative;
|
|
;
|
|
top: 3px;
|
|
}
|
|
|
|
.sp-lbl {
|
|
color: aquamarine;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.div-text {
|
|
margin-left: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.acceptance-list {
|
|
margin-top: 0px;
|
|
max-height: 230px;
|
|
overflow-y: auto;
|
|
|
|
.acceptance-item {
|
|
&:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.row-3 {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |