update code
parent
8b66eee585
commit
b91ab2b7c6
|
|
@ -0,0 +1,20 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const projectFunVerifyGroupByCheckType=(deptId,projectId)=>{
|
||||
return request({
|
||||
url: `/project/projectFunVerify/groupByCheckType?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const listFunVerify=data=>{
|
||||
return request({
|
||||
url: `/project/projectFunVerify/list`,
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
export default{
|
||||
projectFunVerifyGroupByCheckType,
|
||||
listFunVerify
|
||||
}
|
||||
|
|
@ -321,7 +321,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
dtChange() {
|
||||
debugger
|
||||
this.commChange();
|
||||
this.getCommList({ value: this.selType })
|
||||
},
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@
|
|||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="工程功能检验">
|
||||
<module-one-1-1 label="工程功能检验" style="position: relative">
|
||||
<funVerifyGroupByCheckType ref="funGroupByCheckType"/>
|
||||
</module-one-1-1>
|
||||
<projectChecking></projectChecking>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<div class="fun-verify-group-check-type">
|
||||
<img src="images/icon2001.png" v-if="total > 1"
|
||||
style="position: absolute; cursor: pointer; right: 12px; top: 12px" @click="showFunVerifyDlg" />
|
||||
<project-overview-chart :key="'ai1' + elKey" :sp="''" txtTop="0" gifTop="8px"
|
||||
:maintitle="total" :legend-opt="legendOpt2" :typedata="dataList"
|
||||
:text="showText" :height="180" :width="450" :fn="changeChart1"></project-overview-chart>
|
||||
<div class="div-legend">
|
||||
<div v-for="(it,idx) in showList" :key="idx" class="legend-item">
|
||||
<span class="item-no" :style="'background:'+it.color">{{idx+1 }}</span>
|
||||
<span class="item-name">{{ it.name }}</span>
|
||||
<span class="item-value">{{ it.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<funVerifyGroupDlg ref="dlg"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import throttle from 'lodash.throttle'
|
||||
import funVerifyGroupDlg from './funVerifyGroupDlg.vue'
|
||||
export default {
|
||||
components:{
|
||||
funVerifyGroupDlg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showText:'汇总总数',
|
||||
dept: null,
|
||||
projectInfo: null,
|
||||
prjs:[],
|
||||
dataList:[],
|
||||
showList:[],
|
||||
total:0,
|
||||
elKey:0,
|
||||
legendOpt2: {
|
||||
icon: "rect",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#c3dbfd",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
padding: [0, 20, 0, 0],
|
||||
},
|
||||
val: {
|
||||
color: "#63f8bc",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$bus.$on("projectChange", throttle((res) => {
|
||||
this.projectInfo = res;
|
||||
this.dept = this.$root.dept || this.dept||{};
|
||||
this.prjs=this.$root.projects || this.prjs||[];
|
||||
this.loadData();
|
||||
}));
|
||||
if (this.$root.hasInitHeader) {
|
||||
this.initMe();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showFunVerifyDlg(){
|
||||
this.$refs.dlg.showDialog({
|
||||
dataList:this.dataList,
|
||||
deptId:this.dept?.id || 0,
|
||||
projectId:this.projectInfo?.id||0
|
||||
})
|
||||
},
|
||||
changeChart1(opt){
|
||||
let colors=["#D50000","#AA00FF","#304FFE","#0091EA","#00B8D4","#00C853","#AEEA00","#FFAB00","#5D4037","#F06292","#4A148C","##F9FBE7","#311B92","#004D40","#1A237E","#795548","#FF8A80"];
|
||||
opt.legend[0].formatter= (name) =>{
|
||||
let res = this.dataList.filter((v) => v.name === name);
|
||||
return "{name| " + name + "}"+ " {val|" + res[0].value + "} ";
|
||||
}
|
||||
opt.series[0].data.forEach((it,idx)=>{
|
||||
it.itemStyle.color=colors[idx];
|
||||
});
|
||||
this.showList=opt.series[0].data.map(it=>{
|
||||
return {
|
||||
name:it.name,
|
||||
value:it.value,
|
||||
color:it.itemStyle.color
|
||||
};
|
||||
})
|
||||
if(opt.legend){
|
||||
delete opt.legend
|
||||
}
|
||||
opt.series[0].center=["50%", "40%"];
|
||||
opt.series[0].radius=["40%", "56%"];
|
||||
|
||||
opt.series[1].center=["50%", "40%"];
|
||||
opt.series[1].radius=["40%", "40%"];
|
||||
opt.title.padding=[50,0,0,224];
|
||||
return opt;
|
||||
},
|
||||
initMe() {
|
||||
this.projectInfo = this.$root.project || {};
|
||||
this.dept = this.$root.dept || {};
|
||||
this.loadData();
|
||||
},
|
||||
loadData: throttle(function () {
|
||||
this.$api.quality.projectFunVerifyGroupByCheckType(this.dept?.id || 0,this.projectInfo?.id||0).then(d=>{
|
||||
this.dataList=(d.data||[]).map(it=>{
|
||||
return {
|
||||
name:it.checkName,
|
||||
value:it.id,
|
||||
checkType:it.checkType
|
||||
}
|
||||
});
|
||||
this.total=0;
|
||||
this.dataList.forEach(it=>{
|
||||
this.total+=it.value;
|
||||
});
|
||||
this.elKey++;
|
||||
})
|
||||
})
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.fun-verify-group-check-type{
|
||||
.chart-gif.chart-overview-gif{
|
||||
width:85px;
|
||||
height: 85px;
|
||||
left:182px;
|
||||
top:28px !important;
|
||||
}
|
||||
.div-legend{
|
||||
position: relative;
|
||||
top:-20px;
|
||||
font-size:12px;
|
||||
padding:0px 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.legend-item{
|
||||
width:48%;
|
||||
flex-direction: column;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
.item-no{
|
||||
display: inline-block;
|
||||
height:18px;
|
||||
width: 18px;
|
||||
text-align:center;
|
||||
border-radius: 5px;
|
||||
margin-right:5px;
|
||||
}
|
||||
.item-name{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top:-3px;
|
||||
}
|
||||
.item-value{
|
||||
position:absolute;
|
||||
right:10px;
|
||||
font-size:12px;
|
||||
font-weight: bold;
|
||||
color: #63f8bc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
<template>
|
||||
<MyDialog v-if="show" v-model="show" :width="'1200px'" height="800px" :class="'font-size-' + fontSize"
|
||||
class="fun-verify-group-dlg">
|
||||
<template slot="title">
|
||||
<div style="display: flex; align-items: center;justify-content: space-between;">
|
||||
<div :key="elKey" class="header-title">
|
||||
工程功能检验
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<div class="fun-main">
|
||||
<div class="fun-nav">
|
||||
<div v-for="(it, idx) in dataList" :key="idx" class="fun-nav-item"
|
||||
:class="nav == it.checkType ? 'active' : ''" @click="doNav(it)">
|
||||
{{ it.name }}({{ it.value }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="fun-list">
|
||||
<div v-if="selFun.value == 0" class="div-no-data" style="margin-top:200px;">
|
||||
<img src="images/nodata.png" style="width: 120px;">
|
||||
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="fun-data-list">
|
||||
<div v-for="(it, idx) in datas" :key="idx" class="fun-data-item">
|
||||
<div class="data-row1">
|
||||
<el-image style="width: 180px; height: 100px" :src="it.mainImage + '.min.jpg'"
|
||||
:preview-src-list="it.images">
|
||||
</el-image>
|
||||
<div class="data-info">
|
||||
<span class="data-state"
|
||||
:class="it.checkResult ? it.checkResult == 1 ? 'is-ok' : 'is-fail' : 'is-progress'">
|
||||
{{ it.checkResult ? it.checkResult == 1 ? '检验合格' : '检验不合格' : '检验进行中' }}
|
||||
</span>
|
||||
<div class="data-item">
|
||||
<span class="data-label">项目名称:</span>
|
||||
<el-popover placement="bottom" trigger="hover"
|
||||
popper-class="engin-image-item-pop">
|
||||
{{ it.projectName }}
|
||||
<span slot="reference" class="data-text">{{ it.projectName }}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="data-label">总包单位:</span>
|
||||
<el-popover placement="bottom" trigger="hover"
|
||||
popper-class="engin-image-item-pop">
|
||||
{{ it.deptName }}
|
||||
<span slot="reference" class="data-text">{{ it.deptName }}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="data-label">检验标题:</span>
|
||||
<el-popover placement="bottom" trigger="hover"
|
||||
popper-class="engin-image-item-pop">
|
||||
{{ it.checkName }}
|
||||
<span slot="reference" class="data-text">{{ it.checkName }}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="data-item date-time" style="margin-top:4px;">
|
||||
<span class="data-label">检验时间:</span>
|
||||
<span class="data-text">{{ it.checkDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-detail">
|
||||
<el-popover placement="bottom" trigger="hover" popper-class="engin-image-item-pop">
|
||||
{{ it.checkName }}
|
||||
<span slot="reference" class="state-content">
|
||||
<span class="data-label">检验描述:</span>
|
||||
<span class="data-text">{{ it.intro }}</span>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-pagination layout="total,prev, pager, next" @current-change="handleCurrentChange" :total="total"
|
||||
:page-size="size" :current-page.sync="index" class="bg-pagination"></el-pagination>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</MyDialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyDialog from "../components/MyDialog";
|
||||
export default {
|
||||
components: {
|
||||
MyDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elKey: 0,
|
||||
fontSize: 0,
|
||||
show: false,
|
||||
dataList: [],
|
||||
nav: 0,
|
||||
selFun: null,
|
||||
deptId: 0,
|
||||
projectId: 0,
|
||||
total: 0,
|
||||
size: 6,
|
||||
index: 1,
|
||||
datas: [],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
handledownload(it) {
|
||||
window.open(it.url);
|
||||
},
|
||||
showDialog(opt) {
|
||||
this.index = 1;
|
||||
this.dataList = opt.dataList;
|
||||
this.deptId = opt.deptId;
|
||||
this.projectId = opt.projectId;
|
||||
this.nav = this.dataList[0].checkType;
|
||||
this.selFun = this.dataList[0];
|
||||
this.show = true;
|
||||
this.loadData();
|
||||
},
|
||||
doNav(o) {
|
||||
this.selFun = o;
|
||||
this.index = 1;
|
||||
this.nav = o.checkType;
|
||||
this.loadData();
|
||||
},
|
||||
handleCurrentChange(n) {
|
||||
this.index = n;
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
let postData = {
|
||||
checkType: this.nav,
|
||||
activeName: "all",
|
||||
pageNum: this.index,
|
||||
pageSize: this.size,
|
||||
};
|
||||
if (this.projectId && this.projectId > 0) {
|
||||
postData.projectId = this.projectId;
|
||||
}
|
||||
if (this.deptId && this.deptId > 0) {
|
||||
postData.projectDeptId = this.deptId;
|
||||
}
|
||||
this.$api.quality.listFunVerify(postData).then((d) => {
|
||||
this.total = d.total || 0;
|
||||
this.datas = (d.rows || []).map((it) => {
|
||||
it.images = (it.imageUrls || it.mainImage || "")
|
||||
.split(",")
|
||||
.filter((it) => it);
|
||||
return it;
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.fun-verify-group-dlg {
|
||||
.popup-project-introduction-min {
|
||||
transform: translateY(150px);
|
||||
}
|
||||
|
||||
.popup-project-introduction-details {
|
||||
padding: 0px !important;
|
||||
position: relative;
|
||||
|
||||
.quality-table {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.fun-main {
|
||||
display: flex;
|
||||
|
||||
.fun-nav {
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
height: 505px;
|
||||
border-right: solid 1px #dddddd55;
|
||||
padding: 20px 10px;
|
||||
|
||||
.fun-nav-item {
|
||||
line-height: 30px;
|
||||
color: #ddddddba;
|
||||
cursor: pointer;
|
||||
padding-left: 20px;
|
||||
|
||||
&.active {
|
||||
background: #36607d;
|
||||
border-radius: 4px;
|
||||
color: #63f8bc;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fun-list {
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
|
||||
.fun-data-list {
|
||||
.fun-data-item {
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
width: calc(50% - 20px);
|
||||
font-size: 12px;
|
||||
|
||||
.data-row1 {
|
||||
display: flex;
|
||||
|
||||
.el-image {
|
||||
width: 150px !important;
|
||||
height: 130px !important;
|
||||
max-width: 150px !important;
|
||||
}
|
||||
|
||||
.data-info {
|
||||
padding-left: 8px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.data-state {
|
||||
display: inline-block;
|
||||
padding: 0px 10px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.is-ok {
|
||||
background: #27771d6b;
|
||||
color: #63f8bc;
|
||||
}
|
||||
|
||||
&.is-fail {
|
||||
background: #ff2d2d33;
|
||||
color: #ff0505;
|
||||
}
|
||||
|
||||
&.is-progress {
|
||||
background: #034ef1a3;
|
||||
color: #a8d6ed;
|
||||
}
|
||||
}
|
||||
|
||||
.data-item {
|
||||
line-height: 20px;
|
||||
color:#00aaff;
|
||||
&.date-time{
|
||||
color:#868b93;
|
||||
}
|
||||
.data-text.el-popover__reference {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
&:first-child {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
display: inline-block;
|
||||
width: calc(100% - 80px);
|
||||
|
||||
.el-popover__reference-wrapper {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-detail{
|
||||
margin-top:10px;
|
||||
&>span{
|
||||
width:100%;
|
||||
.el-popover__reference-wrapper{
|
||||
width:100%;
|
||||
.state-content{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue