585 lines
21 KiB
Vue
585 lines
21 KiB
Vue
<template>
|
|
<div class="project-engin-index">
|
|
<div class="screen-content">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<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="doStandardDlg">
|
|
<enginChart ref="chart1" :height="300"></enginChart>
|
|
</module-one-1-1>
|
|
<module-one-2-1 label="项目标准化管理排名" style="position: relative;">
|
|
<div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
|
|
<table class="tb-list1">
|
|
<tr>
|
|
<th>排名</th>
|
|
<th>项目名称</th>
|
|
<th>上传数量</th>
|
|
<th>上传占比</th>
|
|
</tr>
|
|
<tr v-for="(it, idx) in list1" :key="idx">
|
|
<td>{{ it.no }}</td>
|
|
<td>{{ it.name }}</td>
|
|
<td>{{ it.value }}</td>
|
|
<td>{{ it.percent }}%</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</module-one-2-1>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<module-one-1-1 :label="label3" :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="label4" :border="1" class="chart2" style="position: relative;">
|
|
<div class="scroll" style="margin-top: 30px;max-height: 240px;overflow-y: auto;">
|
|
<table class="tb-list1">
|
|
<tr>
|
|
<th>排名</th>
|
|
<th>申请项目</th>
|
|
<th>申请数量</th>
|
|
<th>申请占比</th>
|
|
</tr>
|
|
<tr v-for="(it, idx) in list2" :key="idx">
|
|
<td>{{ it.no }}</td>
|
|
<td>{{ it.name }}</td>
|
|
<td>{{ it.value }}</td>
|
|
<td>{{ it.percent }}%</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</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;"
|
|
:key="elList4">
|
|
<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="label6" style="position: relative;">
|
|
<enginChart ref="chart3" :height="300"></enginChart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 :label="label7" style="position: relative;">
|
|
<enginChart ref="chart4" :height="300"></enginChart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 :label="label8" style="position: relative;">
|
|
<img src="images/icon2001.png"
|
|
style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
|
|
@click="doUnitDlg">
|
|
<enginChart ref="chart5" :height="300"></enginChart>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<unitDialog ref="unitDlg"></unitDialog>
|
|
<stateDialog ref="stateDlg"></stateDialog>
|
|
<projectStandardDialog ref="standardDlg"></projectStandardDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import '../components/module/module-one-1-2'
|
|
import '../components/module/module-one-2-1'
|
|
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'
|
|
import projectStandardDialog from './engin/projectStandardDialog.vue'
|
|
import enginChart from './engin/enginChart.vue'
|
|
import { tryToJson } from '@/utils/tools'
|
|
export default {
|
|
name: 'JhbigscreenProjectEngin',
|
|
components: {BorderBox6,imageItem, unitDialog, stateDialog, enginChart,projectStandardDialog},
|
|
data() {
|
|
return {
|
|
label1: '项目标准化管理',
|
|
label3: '审批进度',
|
|
label4:'项目审批排名',
|
|
label6: '审批总数',
|
|
label7: '已完成审批',
|
|
label8: '待审批',
|
|
elChart2: 0,
|
|
elChart3: 0,
|
|
elList4: 0,
|
|
loading: true,
|
|
index1: 0,
|
|
index2: 0,
|
|
index3: 0,
|
|
index4: 0,
|
|
index5: 0,
|
|
index6: 0,
|
|
list1: [],
|
|
list2: [],
|
|
list3: [],
|
|
list4: [],
|
|
list5: [],
|
|
list6: [],
|
|
chart1Data: [],
|
|
chart2Data: [],
|
|
flowTitle: '待审批',
|
|
flowTotal: 0,
|
|
periodicalList: []
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.$bus.$on("loadProjects", debounce(prjs => {
|
|
this.prjs = prjs;
|
|
}));
|
|
this.$bus.$on("projectChange", debounce(res => {
|
|
this.project = res;
|
|
this.loadData();
|
|
}));
|
|
this.$bus.$on("deptChange", debounce(dept => {
|
|
this.dept = dept;
|
|
this.loadData();
|
|
}));
|
|
this.loadPeriodical();
|
|
if (this.$root.hasInitHeader) {
|
|
this.initMe();
|
|
}
|
|
},
|
|
methods: {
|
|
doStandardDlg(){
|
|
this.$refs.standardDlg.showDialog({
|
|
deptId: this.dept?.id || 0,
|
|
projectId: this.project?.id || 0
|
|
});
|
|
},
|
|
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) {
|
|
opt.legend = {
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
};
|
|
return opt;
|
|
},
|
|
changeChart2(opt) {
|
|
opt.title.left = 135;
|
|
opt.title.top = 20;
|
|
opt.legend = {};
|
|
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 {
|
|
cb && cb(this.prjs[1].id);
|
|
}
|
|
} 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;
|
|
},
|
|
showChart1(data) {
|
|
let tmps = data.data || [];
|
|
let datas = tmps.map(d => (d.status || 0) * 1);
|
|
let sum = 0;
|
|
datas.forEach(d => {
|
|
sum += d;
|
|
});
|
|
this.label1 = `项目标准化管理(${sum})`
|
|
let lbls = tmps.map(d => d.dictLabel);
|
|
let opt = {
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: lbls,
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
color: "#fff"
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: datas,
|
|
type: 'line',
|
|
smooth: true,
|
|
areaStyle: {
|
|
color: "rgba(58, 145, 227, 0.68)"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
this.$refs.chart1.init(opt);
|
|
},
|
|
showList1(res) {
|
|
let tmps = (res.data || []).map((d, i) => {
|
|
return {
|
|
id: d.projectId,
|
|
no: i + 1,
|
|
name: d.standardDesc,
|
|
value: d.deptId || 0,
|
|
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);
|
|
});
|
|
}
|
|
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.list1 = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
|
|
} else {
|
|
this.list1 = out;
|
|
}
|
|
} else {
|
|
this.list1 = objs;
|
|
}
|
|
},
|
|
showChart2(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.label3 = `审批进度 (${sum})`;
|
|
this.elChart2++;
|
|
},
|
|
showList2(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.label4=`项目审批排名 (${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.list2 = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
|
|
} else {
|
|
this.list2 = out;
|
|
}
|
|
} else {
|
|
this.list2 = objs;
|
|
}
|
|
},
|
|
showList3(res) {
|
|
this.periodicalList = (res.data || []).map(it => {
|
|
it.fileUrl = JSON.parse(it.fileUrl);
|
|
it.imageFile = it.imageUrl;
|
|
it.standardDesc = it.name;
|
|
return it;
|
|
})
|
|
this.elList4++;
|
|
},
|
|
showChart3(res) {
|
|
let tmps = (res.data || []).map(d => {
|
|
return {
|
|
name: d.taskName,
|
|
value: (d.assigneeId || 0) * 1
|
|
}
|
|
})
|
|
let sum = 0;
|
|
tmps.forEach(it => {
|
|
sum += it.value;
|
|
})
|
|
let opt = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: 'middle',
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: tmps,
|
|
label: {
|
|
color: "#fff"
|
|
}
|
|
|
|
}
|
|
]
|
|
};
|
|
this.label6 = `审批总数 (${sum})`
|
|
this.$refs.chart3.init(opt);
|
|
},
|
|
showChart4(res) {
|
|
let tmps = (res.data || []).map(d => {
|
|
return {
|
|
name: d.taskName,
|
|
value: (d.assigneeId || 0) * 1
|
|
}
|
|
})
|
|
let sum = 0;
|
|
tmps.forEach(it => {
|
|
sum += it.value;
|
|
})
|
|
this.label7 = `已完成审批 (${sum})`
|
|
let opt = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
color: ['#409eff'],
|
|
xAxis: {
|
|
type: 'category',
|
|
data: tmps.map(d => d.name),
|
|
axisLabel: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
data: tmps.map(d => d.value),
|
|
type: 'bar'
|
|
|
|
}
|
|
]
|
|
};
|
|
this.$refs.chart4.init(opt);
|
|
},
|
|
showChart5(res) {
|
|
let tmps = (res.data || []).map(d => {
|
|
return {
|
|
name: d.taskName,
|
|
value: (d.assigneeId || 0) * 1,
|
|
max: 0
|
|
}
|
|
})
|
|
let sum = 0;
|
|
let max = 10;
|
|
tmps.forEach(it => {
|
|
sum += it.value;
|
|
if (it.value > max) {
|
|
max = it.value;
|
|
}
|
|
})
|
|
max = (max / 5 + 1) * 5;
|
|
tmps.forEach(it => {
|
|
it.max = max;
|
|
});
|
|
this.label8 = `待审批 (${sum})`
|
|
let opt = {
|
|
radar: {
|
|
indicator: tmps,
|
|
},
|
|
series: [
|
|
{
|
|
type: 'radar',
|
|
data: [
|
|
{
|
|
value: tmps.map(d=>d.max-5),
|
|
symbol: 'rect',
|
|
symbolSize: 12,
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
},
|
|
label: {
|
|
show: true,
|
|
color:"#409eff"
|
|
}
|
|
},
|
|
{
|
|
value: tmps.map(d=>d.value),
|
|
label: {
|
|
show: true,
|
|
color:"#fff"
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
|
{
|
|
color: 'rgba(255, 145, 124, 0.1)',
|
|
offset: 0
|
|
},
|
|
{
|
|
color: 'rgba(255, 145, 124, 0.9)',
|
|
offset: 1
|
|
}
|
|
])
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.$refs.chart5.init(opt);
|
|
},
|
|
loadData() {
|
|
this.getProjectId(id => {
|
|
let ajaxs = [
|
|
this.$api.standard.groupByType({ projectId: this.project?.id || 0, deptId: this.dept?.id || 0 }),
|
|
this.$api.standard.groupByProject(),
|
|
this.$api.flow.groupByCategory(this.project?.id || 0, this.dept?.id || 0),
|
|
this.$api.flow.groupByProject(),
|
|
this.$api.periodical.getList(),
|
|
this.$api.flow.groupByUnitTotal(this.project?.id || 0, this.dept?.id || 0),
|
|
this.$api.flow.groupByUnitFinish(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 => {
|
|
this.showChart1(res[0]);
|
|
this.showList1(res[1]);
|
|
this.showChart2(res[2]);
|
|
this.showList2(res[3]);
|
|
this.showList3(res[4]);
|
|
this.showChart3(res[5]);
|
|
this.showChart4(res[6]);
|
|
this.showChart5(res[7]);
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
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;
|
|
}
|
|
}
|
|
|
|
.tb-list1 {
|
|
margin: 12px;
|
|
width: calc(100% - 24px);
|
|
border-collapse: collapse;
|
|
border: solid 1px #ffffff52;
|
|
|
|
th {
|
|
font-size: 14px;
|
|
border: solid 1px #ffffff52;
|
|
line-height: 60px;
|
|
}
|
|
|
|
td {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
border: solid 1px #ffffff52;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|