sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update code

prv
haha 2023-10-22 23:46:07 +08:00
parent dd383ce608
commit 4759b3dc49
8 changed files with 596 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -9,8 +9,7 @@
<link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css"> <link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css">
<link rel="stylesheet" href="css/largeScreenLayout.css"> <link rel="stylesheet" href="css/largeScreenLayout.css">
<link rel="stylesheet" href="css/largeScreenStyle.css?v=2023101401"> <link rel="stylesheet" href="css/largeScreenStyle.css?v=2023101401">
<link rel="stylesheet" href="css/sichuanTibet.css"> <link rel="stylesheet" href="css/sichuanTibet.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=qmQNEi1qbFX628WfMt4imhdT87RbCRzK"></script>
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script> <script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script> <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script src="https://cdn.makalu.cc/js/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.makalu.cc/js/jquery/3.5.1/jquery.min.js"></script>
@ -23,7 +22,6 @@
<script src="./js/mapmodle.js"></script> <script src="./js/mapmodle.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script>
<script src="https://cdn.makalu.cc/js/echarts/china.js"></script> <script src="https://cdn.makalu.cc/js/echarts/china.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script>
<!-- 请求依赖 --> <!-- 请求依赖 -->
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script> <script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
<!-- rtmp 支持依赖 --> <!-- rtmp 支持依赖 -->

28
src/api/flow/index.js
View File

@ -13,6 +13,29 @@ const groupByUnit=(projectId,deptId)=> {
method: 'get' method: 'get'
}) })
} }
const groupByUnitFinish=(projectId,deptId)=> {
return request({
url: `bgscreen/flow/groupByUnitFinish?projectId=${projectId}&deptId=${deptId}`,
method: 'get'
})
}
const groupByUnitTotal=(projectId,deptId)=> {
return request({
url: `bgscreen/flow/groupByUnitTotal?projectId=${projectId}&deptId=${deptId}`,
method: 'get'
})
}
const groupByProject=()=> {
return request({
url: `bgscreen/flow/groupByProject`,
method: 'get'
})
}
const listByUnit=(projectId,deptId,unit,pageNum,pageSize)=>{ const listByUnit=(projectId,deptId,unit,pageNum,pageSize)=>{
return request({ return request({
url: `bgscreen/flow/listByUnit?pageNum=${pageNum}&pageSize=${pageSize}`, url: `bgscreen/flow/listByUnit?pageNum=${pageNum}&pageSize=${pageSize}`,
@ -39,6 +62,9 @@ const listByState=(projectId,deptId,state,pageNum,pageSize)=>{
export default{ export default{
groupByCategory, groupByCategory,
groupByUnit, groupByUnit,
groupByUnitFinish,
groupByUnitTotal,
listByUnit, listByUnit,
listByState listByState,
groupByProject
} }

23
src/api/standard/index.js
View File

@ -7,6 +7,25 @@ const getList=(projectId,deptId)=> {
}) })
} }
export default{ const groupByType=data=>{
getList return request({
url:'bgscreen/standard/groupByType',
method:'post',
data:data
})
}
const groupByProject=()=>{
return request({
url:'bgscreen/standard/groupByProject',
method:'get'
})
}
export default{
getList,
groupByType,
groupByProject
} }

2
src/components/chart-bar.js
View File

@ -54,7 +54,7 @@ Vue.component("chart-bar", {
dataset: { dataset: {
source: this.optData source: this.optData
}, },
xAxis: { type: 'category' }, xAxis: { type: 'category' , axisLabel: {color:"#fff"}},
yAxis: {}, yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
} }

11
src/components/header.vue
View File

@ -188,7 +188,7 @@ export default {
return it; return it;
})] })]
} }
this.deptChange(); this.deptChange((()=>{}));
}); });
} }
this.$root.isTypeBuser = this.isTypeBuser; this.$root.isTypeBuser = this.isTypeBuser;
@ -268,11 +268,11 @@ export default {
this.loadProject(true); this.loadProject(true);
} }
}, },
deptChange() { deptChange(cb) {
if(!this.dept1){ if(!this.dept1){
if(this.depts.length>0){ if(this.depts.length>0){
this.dept1=this.depts[0].text; this.dept1=this.depts[0].text;
this.loadProject(true); this.loadProject(true,cb);
} }
} }
let tmps = this.depts.filter(d => d.text == this.dept1); let tmps = this.depts.filter(d => d.text == this.dept1);
@ -331,7 +331,7 @@ export default {
this.deptChange(); this.deptChange();
this.loadProject(); this.loadProject();
}, },
loadProject(init) { loadProject(init,cb) {
if (this.isTypeBuser) { if (this.isTypeBuser) {
return; return;
} }
@ -348,6 +348,9 @@ export default {
} else { } else {
this.setScreenLiSel2(null); this.setScreenLiSel2(null);
} }
if(cb){
cb();
}
}); });
}, },
setScreenLiSel2(item, init) { setScreenLiSel2(item, init) {

57
src/pages/engin/enginChart.vue 100644
View File

@ -0,0 +1,57 @@
<template>
<div class='engin-chart1' style="position: relative" >
<div :style="{ 'height': height + 'px' }" ref="warningPieChart">
</div>
</div>
</template>
<script>
export default {
props: {
fn: {
type: Function
},
height: {
type: Number
}
},
data() {
return {
options:{},
opt:null
};
},
mounted() {
},
methods: {
init(opt) {
this.opt=opt;
this.getChartData()
},
getChartData() {
//品类金额占比 饼图
var chChartPie = echarts.init(this.$refs.warningPieChart);
this.echartPie(chChartPie)
},
echartPie(chChart) {
let newPromise = new Promise((resolve) => {
resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
this.option = {
...this.opt||{}
}
if (this.fn) {
this.option = this.fn(this.option);
}
chChart.setOption(this.option);
window.onresize = chChart.resize;
})
},
},
};
</script>

22
src/pages/photography.vue
View File

@ -5,7 +5,8 @@
<el-col :span="6"> <el-col :span="6">
<module-one-3-1 label="延时摄影列表"> <module-one-3-1 label="延时摄影列表">
<div class="left-list scroll"> <div class="left-list scroll">
<el-collapse v-model="activeNames" > <template v-if="dataList && dataList.length>0">
<el-collapse v-model="activeNames" >
<el-collapse-item v-for="(it, idx) in dataList" :key="idx" :name="it.videoDate"> <el-collapse-item v-for="(it, idx) in dataList" :key="idx" :name="it.videoDate">
<template slot="title"> <template slot="title">
<div style="position:relative;padding-left:20px;width: 100%;"> <div style="position:relative;padding-left:20px;width: 100%;">
@ -23,11 +24,17 @@
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</template>
<div v-else style="text-align: center;" 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> </div>
</module-one-3-1> </module-one-3-1>
</el-col> </el-col>
<el-col :span="18" class="no-title"> <el-col :span="18" class="no-title">
<module-one-3-3 label="" :notitle="true"> <module-one-3-3 label="" :notitle="true">
<template v-if="info">
<div class="right-title"> <div class="right-title">
<span class="sp-title">{{info.videoDate }}</span> <span class="sp-title">{{info.videoDate }}</span>
</div> </div>
@ -35,6 +42,11 @@
<source :src="info.videoUrl" type="video/mp4" /> <source :src="info.videoUrl" type="video/mp4" />
您的浏览器不支持Video标签。 您的浏览器不支持Video标签。
</video> </video>
</template>
<div v-else style="text-align: center;" class="div-no-data">
<img src="images/nodata.png" style="width: 120px;">
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
</div>
</module-one-3-3> </module-one-3-3>
</el-col> </el-col>
</el-row> </el-row>
@ -77,6 +89,7 @@ export default {
this.info=it; this.info=it;
}, },
loadData() { loadData() {
this.info=null;
this.getProjectId(id => { this.getProjectId(id => {
this.$api.project.listPhotography(id).then(d => { this.$api.project.listPhotography(id).then(d => {
this.dataList = (d.data || []).map(it => { this.dataList = (d.data || []).map(it => {
@ -117,6 +130,13 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.prj-photography-main { .prj-photography-main {
.div-no-data{
text-align: center;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.no-title { .no-title {
/deep/ .screen-one-3-3 { /deep/ .screen-one-3-3 {
background-image: none; background-image: none;

651
src/pages/projectEngin.vue
View File

@ -3,79 +3,84 @@
<div class="screen-content"> <div class="screen-content">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<module-one-1-1 label="现场管理标准化" style="position: relative;"> <module-one-1-1 :label="label1" style="position: relative;">
<imageItem :images="list1" v-if="list1.length>0 && !loading"></imageItem> <enginChart ref="chart1" :height="300"></enginChart>
<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>
<module-one-1-1 label="作业标准" style="position: relative;"> <module-one-2-1 label="作业标准" style="position: relative;">
<imageItem :images="list2" v-if="list2.length>0 && !loading"></imageItem> <div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
<div v-if="list2.length==0 && !loading" style="text-align: center;margin-top: 40px;"> <table class="tb-list1">
<img src="images/nodata.png" style="width: 240px;"> <tr>
<div style="text-align: center;">暂无数据</div> <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> </div>
</module-one-1-1> </module-one-2-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>
<el-col :span="8"> <el-col :span="8">
<module-one-1-1 label="审批进度" :border="1" style="position: relative;"> <module-one-1-1 :label="lablel3" :border="1" style="position: relative;">
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;" @click="doStateDlg"> <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> <chart-bar :height="280" :optData="chart1Data" :fn="changeChart1" :key="elChart2"></chart-bar>
</module-one-1-1> </module-one-1-1>
<module-one-1-1 label="待审批" :border="1" class="chart2" style="position: relative;"> <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"> <div class="scroll" style="margin-top: 30px;max-height: 240px;overflow-y: auto;">
<project-overview-chart :key="elChart2" :fn="changeChart2" :sp="'\n'" :maintitle="flowTotal" :legend-opt="legendOpt2" <table class="tb-list1">
:typedata="chart2Data" :text="flowTitle" :height="280" <tr>
txtTop="52" gifTop="90px" style="top:0px"></project-overview-chart> <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-1-1> </module-one-1-1>
<module-one-1-1 label="集团期刊" style="position: relative;"> <module-one-1-1 label="集团期刊" style="position: relative;">
<imageItem :images="periodicalList" v-if="periodicalList.length>0 && !loading" mode="periodical"></imageItem> <imageItem :images="periodicalList" v-if="periodicalList.length > 0 && !loading" mode="periodical">
<div v-if="periodicalList.length==0 && !loading" style="text-align: center;margin-top: 40px;"> </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;"> <img src="images/nodata.png" style="width: 240px;">
<div style="text-align: center;">暂无数据</div> <div style="text-align: center;">暂无数据</div>
</div> </div>
</module-one-1-1> </module-one-1-1>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<module-one-1-1 label="设备管理标准" style="position: relative;"> <module-one-1-1 :label="label6" style="position: relative;">
<imageItem :images="list4" v-if="list4.length>0 && !loading"></imageItem> <enginChart ref="chart3" :height="300"></enginChart>
<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>
<module-one-1-1 label="文明施工标准" style="position: relative;"> <module-one-1-1 :label="label7" style="position: relative;">
<imageItem :images="list5" v-if="list5.length>0 && !loading"></imageItem> <enginChart ref="chart4" :height="300"></enginChart>
<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>
<module-one-1-1 label="环境保护标准" style="position: relative;"> <module-one-1-1 :label="label8" style="position: relative;">
<imageItem :images="list6" v-if="list6.length>0 && !loading"></imageItem> <enginChart ref="chart5" :height="300"></enginChart>
<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> </module-one-1-1>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<unitDialog ref="unitDlg"></unitDialog> <unitDialog ref="unitDlg"></unitDialog>
<stateDialog ref="stateDlg"></stateDialog> <stateDialog ref="stateDlg"></stateDialog>
</div> </div>
</template> </template>
<script> <script>
import '../components/module/module-one-1-2' import '../components/module/module-one-1-2'
import '../components/module/module-one-2-1'
import '../components/staff-survey-chart' import '../components/staff-survey-chart'
import '../components/chart-bar' import '../components/chart-bar'
import BorderBox6 from './components/BorderBox6.vue' import BorderBox6 from './components/BorderBox6.vue'
@ -83,61 +88,42 @@ import debounce from 'lodash.debounce'
import imageItem from './engin/enginImageItems.vue' import imageItem from './engin/enginImageItems.vue'
import unitDialog from './engin/flowDetailByUnitDialog.vue' import unitDialog from './engin/flowDetailByUnitDialog.vue'
import stateDialog from './engin/flowDetailByStateDialog.vue' import stateDialog from './engin/flowDetailByStateDialog.vue'
import enginChart from './engin/enginChart.vue'
import { tryToJson } from '@/utils/tools'
export default { export default {
name: 'JhbigscreenProjectEngin', name: 'JhbigscreenProjectEngin',
components: { components: {
BorderBox6, BorderBox6,
imageItem,unitDialog,stateDialog imageItem, unitDialog, stateDialog, enginChart
}, },
data() { data() {
return { return {
elChart2:0, label1: '项目标准化管理',
loading:true, lablel3: '审批进度',
index1:0, label6: '审批总数',
index2:0, label7: '已完成审批',
index3:0, label8: '待审批',
index4:0, elChart2: 0,
index5:0, elChart3: 0,
index6:0, elList4: 0,
list1:[], loading: true,
list2:[], index1: 0,
list3:[], index2: 0,
list4:[], index3: 0,
list5:[], index4: 0,
list6:[], index5: 0,
chart1Data:[], index6: 0,
chart2Data:[], list1: [],
legendOpt2:{ list2: [],
icon: "rect", list3: [],
orient: "vertical", list4: [],
left: '70%', list5: [],
top: '0', list6: [],
itemGap: 10, chart1Data: [],
itemWidth:20, chart2Data: [],
itemHeight:40, flowTitle: '待审批',
textStyle: { flowTotal: 0,
color: "#c3dbfd", periodicalList: []
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:[]
}; };
}, },
@ -145,64 +131,70 @@ export default {
this.$bus.$on("loadProjects", debounce(prjs => { this.$bus.$on("loadProjects", debounce(prjs => {
this.prjs = prjs; this.prjs = prjs;
})); }));
this.$bus.$on("projectChange",debounce(res => { this.$bus.$on("projectChange", debounce(res => {
this.project = res; this.project = res;
this.loadData(); this.loadData();
})); }));
this.$bus.$on("deptChange",debounce(dept => { this.$bus.$on("deptChange", debounce(dept => {
this.dept = dept; this.dept = dept;
this.loadData(); this.loadData();
})); }));
this.loadPeriodical(); this.loadPeriodical();
if(this.$root.hasInitHeader){ if (this.$root.hasInitHeader) {
this.initMe(); this.initMe();
} }
}, },
methods: { methods: {
initMe(){ initMe() {
this.project=this.$root.project||{}; this.project = this.$root.project || {};
this.dept=this.$root.dept||{}; this.dept = this.$root.dept || {};
this.prjs=this.$root.projects||[]; this.prjs = this.$root.projects || [];
this.loadData(); this.loadData();
}, },
doStateDlg(){ doStateDlg() {
this.$refs.stateDlg.showDialog({ this.$refs.stateDlg.showDialog({
deptId:this.dept?.id||0, deptId: this.dept?.id || 0,
projectId:this.project?.id||0 projectId: this.project?.id || 0
}); });
}, },
doUnitDlg(){ doUnitDlg() {
this.$refs.unitDlg.showDialog({ this.$refs.unitDlg.showDialog({
deptId:this.dept?.id||0, deptId: this.dept?.id || 0,
projectId:this.project?.id||0 projectId: this.project?.id || 0
}); });
}, },
loadPeriodical(){ loadPeriodical() {
this.$api.periodical.getList().then(d=>{ this.$api.periodical.getList().then(d => {
this.periodicalList=(d.data||[]).map(it=>{ this.periodicalList = (d.data || []).map(it => {
it.fileUrl=JSON.parse(it.fileUrl); it.fileUrl = JSON.parse(it.fileUrl);
it.imageFile=it.imageUrl; it.imageFile = it.imageUrl;
it.standardDesc=it.name; it.standardDesc = it.name;
return it; return it;
}) })
}); });
}, },
changeChart1(opt){ changeChart1(opt) {
opt.legend = {
textStyle: {
color: "#fff"
}
};
return opt; return opt;
}, },
changeChart2(opt){ changeChart2(opt) {
opt.title.left=135; opt.title.left = 135;
opt.title.top=20; opt.title.top = 20;
opt.series[0].center=["40%","50%"]; opt.legend = {};
opt.series[1].center=["40%","50%"]; opt.series[0].center = ["40%", "50%"];
opt.series[1].center = ["40%", "50%"];
return opt; return opt;
}, },
getProjectId(cb) { getProjectId(cb) {
let func = () => { let func = () => {
let prjId = this.project?.id||0; let prjId = this.project?.id || 0;
if (prjId == 0) { if (prjId == 0) {
if (!this.prjs||this.prjs.length == 0) { if (!this.prjs || this.prjs.length == 0) {
setTimeout(func, 100); setTimeout(func, 100);
} else { } else {
cb && cb(this.prjs[1].id); cb && cb(this.prjs[1].id);
@ -213,66 +205,324 @@ export default {
} }
func(); func();
}, },
addBr(s){ addBr(s) {
let out=""; let out = "";
for(let i=0;i<s.length;i++){ for (let i = 0; i < s.length; i++) {
out+=s.charAt(i); out += s.charAt(i);
if((i+1)%3==0 && i<s.length-2){ if ((i + 1) % 3 == 0 && i < s.length - 2) {
out+="\n"; out += "\n";
} }
} }
return out; return out;
}, },
loadData(){ showChart1(data) {
this.getProjectId(id => { let tmps = data.data || [];
let ajaxs=[ let datas = tmps.map(d => (d.status || 0) * 1);
this.$api.standard.getList(id,this.dept?.id||0), let sum = 0;
this.$api.flow.groupByCategory(this.project?.id||0,this.dept?.id||0), datas.forEach(d => {
this.$api.flow.groupByUnit(this.project?.id||0,this.dept?.id||0), sum += d;
]; });
this.$api.http.all(ajaxs).then(res=>{ this.label1 = `项目标准化管理(${sum})`
let d=res[0]; let lbls = tmps.map(d => d.dictLabel);
let tmps=d.data||[]; let opt = {
this.list1=tmps.filter(it=>it.standardType==1); xAxis: {
this.list2=tmps.filter(it=>it.standardType==2); type: 'category',
this.list3=tmps.filter(it=>it.standardType==3); boundaryGap: false,
this.list4=tmps.filter(it=>it.standardType==4); data: lbls,
this.list5=tmps.filter(it=>it.standardType==5); axisLabel: {
this.list6=tmps.filter(it=>it.standardType==6); show: true,
this.loading=false; interval: 0,
let chartData=[ ['分类', '总计', '审批中', '已完成']]; color: "#fff"
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; yAxis: {
}); type: 'value'
this.chart2Data=tmps2; },
series: [
this.elChart2++; {
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.lablel3 = `审批进度 (${sum})`;
this.elChart2++;
},
showList2(res) {
let tmps = (res.data || []).map((it, idx) => {
return {
no: idx + 1,
id: it.businessKey,
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);
});
}
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;
}); });
}); });
}, },
@ -287,14 +537,35 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.project-engin-index{ .project-engin-index {
/deep/ .border-1{ /deep/ .border-1 {
padding-left:0px; padding-left: 0px;
} }
.chart2{
/deep/ .chart-gif{ .chart2 {
top:89px; /deep/ .chart-gif {
left:196px; 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;
} }
} }
} }