298 lines
12 KiB
Vue
298 lines
12 KiB
Vue
<template>
|
|
<div class="project-engin-index">
|
|
<div class="screen-content">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<module-one-1-1 label="现场管理标准化" style="position: relative;">
|
|
<imageItem :images="list1" v-if="list1.length>0 && !loading"></imageItem>
|
|
<div v-if="list1.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="作业标准" style="position: relative;">
|
|
<imageItem :images="list2" v-if="list2.length>0 && !loading"></imageItem>
|
|
<div v-if="list2.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="安全技术标准" style="position: relative;">
|
|
<imageItem :images="list3" v-if="list3.length>0 && !loading"></imageItem>
|
|
<div v-if="list3.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<module-one-1-1 label="审批进度" :border="1" style="position: relative;">
|
|
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;" @click="doStateDlg">
|
|
<chart-bar :height="280" :optData="chart1Data" :fn="changeChart1" :key="elChart2"></chart-bar>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="待审批" :border="1" class="chart2" style="position: relative;">
|
|
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index:9;" @click="doUnitDlg">
|
|
<project-overview-chart :key="elChart2" :fn="changeChart2" :sp="'\n'" :maintitle="flowTotal" :legend-opt="legendOpt2"
|
|
:typedata="chart2Data" :text="flowTitle" :height="280"
|
|
txtTop="52" gifTop="90px" style="top:0px"></project-overview-chart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="集团期刊" style="position: relative;">
|
|
<imageItem :images="periodicalList" v-if="periodicalList.length>0 && !loading" mode="periodical"></imageItem>
|
|
<div v-if="periodicalList.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<module-one-1-1 label="设备管理标准" style="position: relative;">
|
|
<imageItem :images="list4" v-if="list4.length>0 && !loading"></imageItem>
|
|
<div v-if="list4.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="文明施工标准" style="position: relative;">
|
|
<imageItem :images="list5" v-if="list5.length>0 && !loading"></imageItem>
|
|
<div v-if="list5.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="环境保护标准" style="position: relative;">
|
|
<imageItem :images="list6" v-if="list6.length>0 && !loading"></imageItem>
|
|
<div v-if="list6.length==0 && !loading" style="text-align: center;margin-top: 40px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<unitDialog ref="unitDlg"></unitDialog>
|
|
<stateDialog ref="stateDlg"></stateDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import '../components/module/module-one-1-2'
|
|
import '../components/staff-survey-chart'
|
|
import '../components/chart-bar'
|
|
import BorderBox6 from './components/BorderBox6.vue'
|
|
import debounce from 'lodash.debounce'
|
|
import imageItem from './engin/enginImageItems.vue'
|
|
import unitDialog from './engin/flowDetailByUnitDialog.vue'
|
|
import stateDialog from './engin/flowDetailByStateDialog.vue'
|
|
export default {
|
|
name: 'JhbigscreenProjectEngin',
|
|
components: {
|
|
BorderBox6,
|
|
imageItem,unitDialog,stateDialog
|
|
},
|
|
data() {
|
|
return {
|
|
elChart2:0,
|
|
loading:true,
|
|
index1:0,
|
|
index2:0,
|
|
index3:0,
|
|
index4:0,
|
|
index5:0,
|
|
index6:0,
|
|
list1:[],
|
|
list2:[],
|
|
list3:[],
|
|
list4:[],
|
|
list5:[],
|
|
list6:[],
|
|
chart1Data:[],
|
|
chart2Data:[],
|
|
legendOpt2:{
|
|
icon: "rect",
|
|
orient: "vertical",
|
|
left: '70%',
|
|
top: '0',
|
|
itemGap: 10,
|
|
itemWidth:20,
|
|
itemHeight:40,
|
|
textStyle: {
|
|
color: "#c3dbfd",
|
|
fontSize: 14,
|
|
rich: {
|
|
name: {
|
|
color: "#c3dbfd",
|
|
padding: [0, 2, 10, 2],
|
|
},
|
|
value: {
|
|
color: "#ffffff",
|
|
fontSize: 16,
|
|
},
|
|
percent: {
|
|
color: "#4676FD",
|
|
fontSize: 16,
|
|
padding: [0, 2, 0, 2],
|
|
},
|
|
},
|
|
}
|
|
},
|
|
flowTitle:'待审批',
|
|
flowTotal:0,
|
|
periodicalList:[]
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.$bus.$on("headerChange",()=>{
|
|
this.initMe();
|
|
});
|
|
this.loadPeriodical();
|
|
if(this.$root.hasInitHeader){
|
|
this.initMe();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
initMe(){
|
|
this.project=this.$root.project||{};
|
|
this.dept=this.$root.dept||{};
|
|
this.prjs=this.$root.projects||[];
|
|
this.loadData();
|
|
},
|
|
doStateDlg(){
|
|
this.$refs.stateDlg.showDialog({
|
|
deptId:this.dept?.id||0,
|
|
projectId:this.project?.id||0
|
|
});
|
|
},
|
|
doUnitDlg(){
|
|
this.$refs.unitDlg.showDialog({
|
|
deptId:this.dept?.id||0,
|
|
projectId:this.project?.id||0
|
|
});
|
|
},
|
|
loadPeriodical(){
|
|
this.$api.periodical.getList().then(d=>{
|
|
this.periodicalList=(d.data||[]).map(it=>{
|
|
it.fileUrl=JSON.parse(it.fileUrl);
|
|
it.imageFile=it.imageUrl;
|
|
it.standardDesc=it.name;
|
|
return it;
|
|
})
|
|
});
|
|
},
|
|
changeChart1(opt){
|
|
return opt;
|
|
},
|
|
changeChart2(opt){
|
|
opt.title.left=135;
|
|
opt.title.top=20;
|
|
opt.series[0].center=["40%","50%"];
|
|
opt.series[1].center=["40%","50%"];
|
|
return opt;
|
|
},
|
|
getProjectId(cb) {
|
|
let func = () => {
|
|
let prjId = this.project?.id||0;
|
|
if (prjId == 0) {
|
|
if (!this.prjs||this.prjs.length == 0) {
|
|
setTimeout(func, 100);
|
|
} else {
|
|
if(this.prjs.length>1){
|
|
cb && cb(this.prjs[1].id);
|
|
}else{
|
|
cb(0);
|
|
}
|
|
}
|
|
} else {
|
|
cb && cb(prjId);
|
|
}
|
|
}
|
|
func();
|
|
},
|
|
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;
|
|
},
|
|
loadData(){
|
|
this.getProjectId(id => {
|
|
let ajaxs=[
|
|
this.$api.standard.getList(id,this.dept?.id||0),
|
|
this.$api.flow.groupByCategory(this.project?.id||0,this.dept?.id||0),
|
|
this.$api.flow.groupByUnit(this.project?.id||0,this.dept?.id||0),
|
|
];
|
|
this.$api.http.all(ajaxs).then(res=>{
|
|
let d=res[0];
|
|
let tmps=d.data||[];
|
|
this.list1=tmps.filter(it=>it.standardType==1);
|
|
this.list2=tmps.filter(it=>it.standardType==2);
|
|
this.list3=tmps.filter(it=>it.standardType==3);
|
|
this.list4=tmps.filter(it=>it.standardType==4);
|
|
this.list5=tmps.filter(it=>it.standardType==5);
|
|
this.list6=tmps.filter(it=>it.standardType==6);
|
|
this.loading=false;
|
|
let chartData=[ ['分类', '总计', '审批中', '已完成']];
|
|
this.chartInfo=[];
|
|
(res[1].data||[]).forEach(it=>{
|
|
let o= {
|
|
title:it.taskName,
|
|
comp:it.assigneeId||0,
|
|
uncomp:it.procDefVersion||0,
|
|
total:0
|
|
}
|
|
o.total=o.comp+o.uncomp;
|
|
chartData.push([this.addBr(o.title),o.total,o.uncomp,o.comp])
|
|
})
|
|
this.chart1Data=chartData;
|
|
let tmps2=[{title:'总包单位',count:0},
|
|
{title:'监理单位',count:0},
|
|
{title:'设计单位',count:0},
|
|
{title:'甲方代表',count:0},
|
|
{title:'子公司',count:0},
|
|
];
|
|
let objs=res[2].data||[];
|
|
this.flowTotal=0;
|
|
tmps2.forEach(it=>{
|
|
let o=objs.find(item=>it.title==item.taskName);
|
|
if(o){
|
|
it.count=o.assigneeId
|
|
this.flowTotal+=o.assigneeId;
|
|
}
|
|
it.name=it.title;
|
|
it.value=it.count;
|
|
});
|
|
this.chart2Data=tmps2;
|
|
|
|
this.elChart2++;
|
|
});
|
|
});
|
|
},
|
|
onItemData(e) {
|
|
if (e.type == 1) {
|
|
location.href = 'index.html'
|
|
}
|
|
this.getProjectOverview(e.id)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.project-engin-index{
|
|
/deep/ .border-1{
|
|
padding-left:0px;
|
|
}
|
|
.chart2{
|
|
/deep/ .chart-gif{
|
|
top:89px;
|
|
left:196px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|