update code
parent
19c0790a94
commit
f0894ff154
|
|
@ -4,8 +4,29 @@
|
|||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 :label="label1" style="position: relative;">
|
||||
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
|
||||
@click="doStateDlg">
|
||||
<div style="padding-top:10px;">
|
||||
<chart-bar :height="280" :optData="chart1Data" :fn="changeChart1" :key="elChart2"></chart-bar>
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="项目审批排名" style="position: relative;">
|
||||
<module-one-2-1 :label="label2" style="position: relative;" class="flow-list">
|
||||
<div class="scroll" style="margin-top: 0px;max-height: calc(100% - 30px);overflow-y: auto;">
|
||||
<table class="tb-list1">
|
||||
<tr>
|
||||
<th style="width:40px;">排名</th>
|
||||
<th>申请项目</th>
|
||||
<th style="width:80px;">申请数量</th>
|
||||
<th style="width:80px;">申请占比</th>
|
||||
</tr>
|
||||
<tr v-for="(it, idx) in flowList" :key="idx" class="tr-cmd" @click="doStateDlg(it)">
|
||||
<td>{{ it.no }}</td>
|
||||
<td style="text-align:left;padding-left:8px;">{{ it.name }}</td>
|
||||
<td>{{ it.value }}</td>
|
||||
<td>{{ it.percent }}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
|
@ -46,10 +67,10 @@
|
|||
<div class="active">付款比例</div>
|
||||
</div>
|
||||
<div class="div-percent">
|
||||
<div class="percent-content" :style="'width:'+sumCost.percent+'%'">
|
||||
<span v-if="sumCost.percent>=20">{{ sumCost.percent.toFixed(2) }}%</span>
|
||||
<div class="percent-content" :style="'width:' + sumCost.percent + '%'">
|
||||
<span v-if="sumCost.percent >= 20">{{ sumCost.percent.toFixed(2) }}%</span>
|
||||
</div>
|
||||
<span style="color: #00aaff;" v-if="sumCost.percent<20">{{ sumCost.percent.toFixed(2) }}%</span>
|
||||
<span style="color: #fff;" v-if="sumCost.percent < 20">{{ sumCost.percent.toFixed(2) }}%</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -65,7 +86,7 @@
|
|||
<people-number :number="numberWithCommas((sumCost.data4 * 1.0 || 0).toFixed(2)) || '0.00'"
|
||||
unit=""></people-number>
|
||||
|
||||
<div class="warning-info-title">
|
||||
<div class="warning-info-title">
|
||||
<div class="active">安措费已支付(万元)</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -85,105 +106,139 @@
|
|||
</el-row>
|
||||
<div style="padding:0px 10px;height: calc(100% - 440px);">
|
||||
<div class="warning-info-title" style="border-bottom: dotted 1px #409effb8;">
|
||||
<div class="active">付款明细</div>
|
||||
<div class="active">付款明细</div>
|
||||
</div>
|
||||
<div class="scroll" v-if="sumList" style="max-height: calc(100% - 50px);overflow-y: auto;">
|
||||
<template v-if="sumList.names.length>0">
|
||||
<div v-for="(it,idx) in sumList.names" :key="idx">
|
||||
<div>{{it}}</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>付款项</td>
|
||||
<td>付款明细</td>
|
||||
<td>申请时间</td>
|
||||
<td>申请金额(万元)</td>
|
||||
<td>已付款金额(万元)</td>
|
||||
<td>挂账金额(万元)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" align="center">合计</td>
|
||||
<td>{{ (sumList.data[it][2].sum1*1.0).toFixed(2) }}</td>
|
||||
<td>{{ (sumList.data[it][2].sum2*1.0).toFixed(2) }}</td>
|
||||
<td>{{ (sumList.data[it][2].sum3*1.0).toFixed(2) }}</td>
|
||||
</tr>
|
||||
<template v-if="sumList.data[it][0].length>0">
|
||||
<tr v-for="(row,index) in sumList.data[it][0]" :key="'a-'+idx+'b-'+index">
|
||||
<td v-if="index==0" :rowspan="sumList.data[it][0].length">安措费</td>
|
||||
<td>第{{index+1 }}期</td>
|
||||
<td>{{ row.date1|formatDate}}</td>
|
||||
<td>{{ (row.money*1.0).toFixed(2)}}</td>
|
||||
<td>{{ (row.money2*1.0).toFixed(2)}}</td>
|
||||
<td>{{ (row.money3*1.0).toFixed(2)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td>安措费</td>
|
||||
<td colspan="5">
|
||||
<div style="text-align: center">暂无数据</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="sumList.names.length > 0">
|
||||
<div class="sum-list-item" v-for="(it, idx) in sumList.names" :key="idx">
|
||||
<div class="prj-name">{{ it }}</div>
|
||||
<table class="sum-table">
|
||||
<tr>
|
||||
<th>付款项</th>
|
||||
<th>付款明细</th>
|
||||
<th>申请时间</th>
|
||||
<th>申请金额(万元)</th>
|
||||
<th>已付款金额(万元)</th>
|
||||
<th>挂账金额(万元)</th>
|
||||
</tr>
|
||||
<tr style="background-color: #00aaff38;">
|
||||
<td colspan="3" align="center">合计</td>
|
||||
<td>{{ (sumList.data[it][2].sum1 * 1.0).toFixed(2) }}</td>
|
||||
<td>{{ (sumList.data[it][2].sum2 * 1.0).toFixed(2) }}</td>
|
||||
<td>{{ (sumList.data[it][2].sum3 * 1.0).toFixed(2) }}</td>
|
||||
</tr>
|
||||
<template v-if="sumList.data[it][0].length > 0">
|
||||
<tr v-for="(row, index) in sumList.data[it][0]" :key="'a-' + idx + 'b-' + index">
|
||||
<td v-if="index == 0" :rowspan="sumList.data[it][0].length">安措费</td>
|
||||
<td>第{{ index + 1 }}期</td>
|
||||
<td>{{ row.date1 | formatDate }}</td>
|
||||
<td>{{ (row.money * 1.0).toFixed(2) }}</td>
|
||||
<td>{{ (row.money2 * 1.0).toFixed(2) }}</td>
|
||||
<td>{{ (row.money3 * 1.0).toFixed(2) }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td>安措费</td>
|
||||
<td colspan="5">
|
||||
<div style="text-align: center">暂无数据</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="sumList.data[it][1].length>0">
|
||||
<tr v-for="(row,index) in sumList.data[it][1]" :key="'a-'+idx+'c-'+index">
|
||||
<td v-if="index==0" :rowspan="sumList.data[it][1].length">进度款</td>
|
||||
<td>第{{index+1 }}期</td>
|
||||
<td>{{ row.date1|formatDate}}</td>
|
||||
<td>{{ (row.money*1.0).toFixed(2)}}</td>
|
||||
<td>{{ (row.money2*1.0).toFixed(2)}}</td>
|
||||
<td>{{ (row.money3*1.0).toFixed(2)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td>进度款</td>
|
||||
<td colspan="5">
|
||||
<div style="text-align: center">暂无数据</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="sumList.data[it][1].length > 0">
|
||||
<tr v-for="(row, index) in sumList.data[it][1]" :key="'a-' + idx + 'c-' + index">
|
||||
<td v-if="index == 0" :rowspan="sumList.data[it][1].length">进度款</td>
|
||||
<td>第{{ index + 1 }}期</td>
|
||||
<td>{{ row.date1 | formatDate }}</td>
|
||||
<td>{{ (row.money * 1.0).toFixed(2) }}</td>
|
||||
<td>{{ (row.money2 * 1.0).toFixed(2) }}</td>
|
||||
<td>{{ (row.money3 * 1.0).toFixed(2) }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td>进度款</td>
|
||||
<td colspan="5">
|
||||
<div style="text-align: center">暂无数据</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
</table>
|
||||
<div class="div-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
暂无数据
|
||||
</div>
|
||||
</template>
|
||||
</table>
|
||||
<div class="div-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
暂无数据
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="劳务单位资质审批" style="position: relative;">
|
||||
<enginChart :class="'show-chart'" ref="chart2" :height="300">
|
||||
</enginChart>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="劳务单位资质审批明细" style="position: relative;">
|
||||
<div class="data-list3 scroll">
|
||||
<table style=" border-collapse: collapse;">
|
||||
<tr class="tr-header">
|
||||
<th>所属项目</th>
|
||||
<th style="width:95px">所属总包单位</th>
|
||||
<th>申请单位</th>
|
||||
<th style="width:60px">所属时间</th>
|
||||
<th style="width:30px">状态</th>
|
||||
</tr>
|
||||
<tr v-for="(it,idx) in dataList4" :key="idx">
|
||||
<td>泾河智谷（一期）一标段</td>
|
||||
<td>中国一冶集团有限公司</td>
|
||||
<td>陕西凯德劳务建筑有限公司</td>
|
||||
<td>2024-3-4</td>
|
||||
<td>
|
||||
<span v-if="idx<10">进行中</span>
|
||||
<span v-else style="color:green">行中</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<stateDialog ref="stateDlg"></stateDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/components/module/module-one-2-1'
|
||||
import '@/components/module/module-one-3-1'
|
||||
import '@/components/chart-bar'
|
||||
import enginChart from './enginChart.vue'
|
||||
import stateDialog from './flowDetailByStateDialog.vue'
|
||||
import debounce from 'lodash.debounce'
|
||||
export default {
|
||||
name: 'JhbigscreenAuditingPage',
|
||||
|
||||
components: {
|
||||
stateDialog, enginChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label1: "审批进度(45)",
|
||||
label1: "审批进度",
|
||||
label2: "项目审批排名",
|
||||
prjs: [],
|
||||
project: {},
|
||||
dept: {},
|
||||
sumCost: {},
|
||||
sumList:null
|
||||
sumList: null,
|
||||
chart1Data: [],
|
||||
elChart2: 0,
|
||||
flowList: [],
|
||||
dataList4:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -205,6 +260,25 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
doStateDlg(it) {
|
||||
let obj = {
|
||||
deptId: this.dept?.id || 0,
|
||||
projectId: this.project?.id || 0
|
||||
}
|
||||
if (it) {
|
||||
obj.projectId = it.id;
|
||||
obj.prj = it;
|
||||
}
|
||||
this.$refs.stateDlg.showDialog(obj);
|
||||
},
|
||||
changeChart1(opt) {
|
||||
opt.legend = {
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
};
|
||||
return opt;
|
||||
},
|
||||
numberWithCommas(x) {
|
||||
x = x.toString();
|
||||
var pattern = /(-?\d+)(\d{3})/;
|
||||
|
|
@ -221,16 +295,97 @@ export default {
|
|||
loadData() {
|
||||
this.loadSumCost();
|
||||
this.loadCostList();
|
||||
this.loadFlow();
|
||||
this.initChart2();
|
||||
},
|
||||
loadCostList(){
|
||||
initChart2() {
|
||||
let opt = { "tooltip": { "trigger": "item" }, "series": [{ "top": 10, "type": "pie", "radius": "60%",
|
||||
"data": [{ "name": "未发起", "value": 6 },
|
||||
{ "name": " 审批中", "value": 4 },
|
||||
{ "name": "审批通过", "value": 15 }
|
||||
], "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(opt);
|
||||
}
|
||||
},
|
||||
loadFlow() {
|
||||
let ajaxs = [
|
||||
this.$api.flow.groupByCategory(this.project?.id || 0, this.dept?.id || 0),
|
||||
this.$api.flow.groupByProject(this.dept?.id || 0),
|
||||
];
|
||||
this.$api.http.all(ajaxs).then(res => {
|
||||
this.showFlowChart2(res[0]);
|
||||
this.showFlowList2(res[1]);
|
||||
});
|
||||
},
|
||||
showFlowChart2(res) {
|
||||
let chartData = [['分类', '总计', '审批中', '已完成']];
|
||||
this.chartInfo = [];
|
||||
let sum = 0;
|
||||
(res.data || []).forEach(it => {
|
||||
let o = {
|
||||
title: it.taskName,
|
||||
comp: it.assigneeId || 0,
|
||||
uncomp: it.procDefVersion || 0,
|
||||
total: 0
|
||||
}
|
||||
o.total = o.comp + o.uncomp;
|
||||
sum += o.total;
|
||||
chartData.push([this.addBr(o.title), o.total, o.uncomp, o.comp])
|
||||
})
|
||||
this.chart1Data = chartData;
|
||||
this.label1 = `审批进度 (${sum})`;
|
||||
this.elChart2++;
|
||||
},
|
||||
showFlowList2(res) {
|
||||
let tmps = (res.data || []).map((it, idx) => {
|
||||
return {
|
||||
no: idx + 1,
|
||||
id: it.businessKey * 1,
|
||||
name: it.businessKeyName,
|
||||
value: it.duration * 1,
|
||||
percent: 0
|
||||
}
|
||||
});
|
||||
let sum = 0;
|
||||
tmps.forEach(d => {
|
||||
sum += d.value;
|
||||
});
|
||||
if (sum > 0) {
|
||||
tmps.forEach(d => {
|
||||
d.percent = (d.value * 100.0 / sum).toFixed(2);
|
||||
});
|
||||
}
|
||||
this.label2 = `项目审批排名 (${sum})`
|
||||
let objs = [];
|
||||
let prjIds = this.prjs.map(d => d.id).filter(d => d > 0);
|
||||
tmps.forEach(d => {
|
||||
if (prjIds.indexOf(d.id) >= 0) {
|
||||
objs.push(d);
|
||||
}
|
||||
})
|
||||
if (this.project?.id != 0) {
|
||||
let out = objs.filter(d => d.id == this.project.id);
|
||||
if (out.length == 0) {
|
||||
this.flowList = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
|
||||
this.label2 = `项目审批排名 (0)`
|
||||
} else {
|
||||
this.flowList = out;
|
||||
this.label2 = `项目审批排名 (${out[0].value})`
|
||||
}
|
||||
} else {
|
||||
this.flowList = objs;
|
||||
}
|
||||
},
|
||||
loadCostList() {
|
||||
let postData = {};
|
||||
if (this.project && this.project.id > 0) {
|
||||
postData.projectId = this.project.id;
|
||||
} else {
|
||||
postData.id = this.dept.id;
|
||||
}
|
||||
this.$api.costOut.selectForBigEnginList(postData).then(d=>{
|
||||
this.sumList=d;
|
||||
this.$api.costOut.selectForBigEnginList(postData).then(d => {
|
||||
this.sumList = d;
|
||||
});
|
||||
},
|
||||
loadSumCost() {
|
||||
|
|
@ -243,12 +398,61 @@ export default {
|
|||
this.$api.costOut.sumForBsEnginAuditing(postData).then(d => {
|
||||
this.sumCost = d;
|
||||
});
|
||||
}
|
||||
},
|
||||
addBr(s) {
|
||||
let out = "";
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
out += s.charAt(i);
|
||||
if ((i + 1) % 3 == 0 && i < s.length - 2) {
|
||||
out += "\n";
|
||||
}
|
||||
}
|
||||
return out;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.engin-auditing-page {
|
||||
.flow-list {
|
||||
.tb-list1 {
|
||||
margin: 12px;
|
||||
width: calc(100% - 24px);
|
||||
border-collapse: collapse;
|
||||
border: solid 1px #ffffff52;
|
||||
|
||||
th {
|
||||
font-size: 14px;
|
||||
color:#409eff;
|
||||
border: solid 1px #ffffff52;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border: solid 1px #ffffff52;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list3{
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
padding:4px;
|
||||
.tr-header{
|
||||
th{
|
||||
color:#409eff;
|
||||
}
|
||||
}
|
||||
td,th{
|
||||
border: solid 1px #409eff8c;
|
||||
padding: 0px 8px;
|
||||
font-size:12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.cost-sum {
|
||||
.people-number {
|
||||
height: 40px;
|
||||
|
|
@ -256,20 +460,48 @@ export default {
|
|||
position: relative;
|
||||
left: -40px;
|
||||
}
|
||||
.div-line{
|
||||
|
||||
.div-line {
|
||||
border-bottom: dotted 1px #eeeeee52;
|
||||
margin: 16px 10px 0px;
|
||||
}
|
||||
.div-percent{
|
||||
|
||||
.div-percent {
|
||||
margin: 0px 20px;
|
||||
background: #fff;
|
||||
background: #c0dafb;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
.percent-content{
|
||||
|
||||
.percent-content {
|
||||
background-color: #409eff;
|
||||
border-radius: 10px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.sum-list-item {
|
||||
padding: 0px 20px;
|
||||
|
||||
.prj-name {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sum-table {
|
||||
border-collapse: collapse;
|
||||
th{
|
||||
color:#409eff;
|
||||
}
|
||||
td,th{
|
||||
line-height: 30px;
|
||||
border: solid 1px #409eff8c;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.div-line {
|
||||
margin: 10px 0px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -358,6 +358,7 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (this.$refs.chart1 && this.$refs.chart1.init) {
|
||||
this.$refs.chart1.init(opt);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue