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

update code

dev-login
haha 2023-09-23 00:06:58 +08:00
parent 44ea12c84f
commit 4b0f1adb85
3 changed files with 165 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/chart-bar.js 100644
View File

@ -0,0 +1,71 @@
import Vue from 'vue'
Vue.component("chart-bar", {
template: `
<div class='chart-bar' style="position: relative" @click="doClick">
<div :style="{'height': height+'px'}" ref="warningPieChart">
</div>
</div>
`,
props: {
fn:{
type:Function
},
height:{
type:Number
},
optData:{
type:Array,
default:()=>[]
}
},
data() {
return {
}
},
mounted(){
this.init()
},
methods: {
doClick(){
this.$emit("clickme");
},
init(){
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 = {
legend: {
show:false
},
tooltip: { trigger: 'axis',
},
dataset: {
source: this.optData
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
if(this.fn){
this.option=this.fn(this.option);
}
chChart.setOption(this.option);
window.onresize = chChart.resize;
})
},
},
})

9
src/components/project-overview-chart.js
View File

@ -10,6 +10,9 @@ Vue.component("project-overview-chart", {
`, `,
props: { props: {
fn:{
type:Function
},
typedata:{ typedata:{
type: Array, type: Array,
}, },
@ -115,12 +118,11 @@ Vue.component("project-overview-chart", {
if(total_datas==0){ if(total_datas==0){
percent=0; percent=0;
} }
return "{name| " + name + "}"+this.sp+"{percent|" + res[0].value + "}{percent|" + percent + "%}"; return "{name| " + name + "}"+this.sp+"{value|" + res[0].value + "} {percent|" + percent + "%}";
}, },
}; };
let opt={...legendOption,...(this.legendOpt||{})}; let opt={...legendOption,...(this.legendOpt||{})};
this.option = { this.option = {
title: { title: {
text: this.maintitle||total_datas, text: this.maintitle||total_datas,
subtext: this.text, subtext: this.text,
@ -201,6 +203,9 @@ Vue.component("project-overview-chart", {
}, },
], ],
} }
if(this.fn){
this.option=this.fn(this.option);
}
chChart.setOption(this.option); chChart.setOption(this.option);
window.onresize = chChart.resize; window.onresize = chChart.resize;
}) })

95
src/pages/projectEngin.vue
View File

@ -24,6 +24,7 @@
</div> </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="list3" v-if="list3.length>0 && !loading"></imageItem>
<div v-if="list3.length==0 && !loading" style="text-align: center;margin-top: 40px;"> <div v-if="list3.length==0 && !loading" style="text-align: center;margin-top: 40px;">
<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>
@ -32,10 +33,12 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<module-one-1-1 label="审批进度" :border="1"> <module-one-1-1 label="审批进度" :border="1">
<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"> <module-one-1-1 label="待审批" :border="1" class="chart2">
<project-overview-chart :key="elChart2" :fn="changeChart2" :sp="'\n'" :maintitle="flowTotal" :legend-opt="legendOpt2"
:typedata="chart2Data" :text="flowTitle" :height="280"
style="top:0px"></project-overview-chart>
</module-one-1-1> </module-one-1-1>
<module-one-1-1 label="集团期刊" :border="1"> <module-one-1-1 label="集团期刊" :border="1">
@ -43,18 +46,21 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<module-one-1-1 label="设备管理标准"> <module-one-1-1 label="设备管理标准">
<imageItem :images="list4" v-if="list4.length>0 && !loading"></imageItem>
<div v-if="list4.length==0 && !loading" style="text-align: center;margin-top: 40px;"> <div v-if="list4.length==0 && !loading" style="text-align: center;margin-top: 40px;">
<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>
<module-one-1-1 label="文明施工标准"> <module-one-1-1 label="文明施工标准">
<imageItem :images="list5" v-if="list5.length>0 && !loading"></imageItem>
<div v-if="list5.length==0 && !loading" style="text-align: center;margin-top: 40px;"> <div v-if="list5.length==0 && !loading" style="text-align: center;margin-top: 40px;">
<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>
<module-one-1-1 label="环境保护标准"> <module-one-1-1 label="环境保护标准">
<imageItem :images="list6" v-if="list6.length>0 && !loading"></imageItem>
<div v-if="list6.length==0 && !loading" style="text-align: center;margin-top: 40px;"> <div v-if="list6.length==0 && !loading" style="text-align: center;margin-top: 40px;">
<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>
@ -72,6 +78,8 @@ import '../components/module/module-one-1-2'
import '../components/background_video' import '../components/background_video'
import '../components/header' import '../components/header'
import '../components/staff-survey-chart' import '../components/staff-survey-chart'
import '../components/chart-bar'
import '../components/project-overview-chart'
import BorderBox6 from './components/BorderBox6.vue' import BorderBox6 from './components/BorderBox6.vue'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import imageItem from './engin/enginImageItems.vue' import imageItem from './engin/enginImageItems.vue'
@ -83,6 +91,7 @@ export default {
}, },
data() { data() {
return { return {
elChart2:0,
loading:true, loading:true,
index1:0, index1:0,
index2:0, index2:0,
@ -97,7 +106,36 @@ export default {
list5:[], list5:[],
list6:[], list6:[],
chart1Data:[], chart1Data:[],
chart2Data:[] chart2Data:[],
legendOpt2:{
icon: "rect",
orient: "vertical",
left: '70%',
top: '0',
itemGap: 10,
itemWidth:20,
itemHeight:40,
textStyle: {
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,
}; };
}, },
@ -116,6 +154,19 @@ export default {
}, },
methods: { methods: {
changeChart1(opt){
console.log("--opt->",opt)
//opt.xAxis.axisLabel={width:50}
//opt.xAxis.data=this.chartInfo;
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) { getProjectId(cb) {
let func = () => { let func = () => {
let prjId = this.project?.id||0; let prjId = this.project?.id||0;
@ -131,12 +182,22 @@ export default {
} }
func(); 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(){ loadData(){
this.getProjectId(id => { this.getProjectId(id => {
let ajaxs=[ let ajaxs=[
this.$api.standard.getList(id,this.dept.id), this.$api.standard.getList(id,this.dept?.id||0),
this.$api.flow.groupByCategory(this.project.id,this.dept.id), this.$api.flow.groupByCategory(this.project?.id||0,this.dept?.id||0),
this.$api.flow.groupByUnit(this.project.id,this.dept.id), this.$api.flow.groupByUnit(this.project?.id||0,this.dept?.id||0),
]; ];
this.$api.http.all(ajaxs).then(res=>{ this.$api.http.all(ajaxs).then(res=>{
let d=res[0]; let d=res[0];
@ -148,7 +209,9 @@ export default {
this.list5=tmps.filter(it=>it.standardType==5); this.list5=tmps.filter(it=>it.standardType==5);
this.list6=tmps.filter(it=>it.standardType==6); this.list6=tmps.filter(it=>it.standardType==6);
this.loading=false; this.loading=false;
this.chart1Data=(res[1].data||[]).map(it=>{ let chartData=[ ['分类', '总计', '审批中', '已完成']];
this.chartInfo=[];
(res[1].data||[]).forEach(it=>{
let o= { let o= {
title:it.taskName, title:it.taskName,
comp:it.assigneeId||0, comp:it.assigneeId||0,
@ -156,9 +219,9 @@ export default {
total:0 total:0
} }
o.total=o.comp+o.uncomp; o.total=o.comp+o.uncomp;
return o; chartData.push([this.addBr(o.title),o.total,o.uncomp,o.comp])
}) })
console.log("-1->",this.chart1Data); this.chart1Data=chartData;
let tmps2=[{title:'总包单位',count:0}, let tmps2=[{title:'总包单位',count:0},
{title:'监理单位',count:0}, {title:'监理单位',count:0},
{title:'设计单位',count:0}, {title:'设计单位',count:0},
@ -166,13 +229,19 @@ export default {
{title:'子公司',count:0}, {title:'子公司',count:0},
]; ];
let objs=res[2].data||[]; let objs=res[2].data||[];
this.flowTotal=0;
tmps2.forEach(it=>{ tmps2.forEach(it=>{
let o=objs.find(item=>it.title==item.taskName); let o=objs.find(item=>it.title==item.taskName);
if(o){ if(o){
it.count=o.assigneeId it.count=o.assigneeId
this.flowTotal+=o.assigneeId;
} }
it.name=it.title;
it.value=it.count;
}); });
this.chart2Data=tmps2; this.chart2Data=tmps2;
this.elChart2++;
console.log("-2->",this.chart2Data); console.log("-2->",this.chart2Data);
}); });
}); });
@ -192,5 +261,11 @@ export default {
/deep/ .border-1{ /deep/ .border-1{
padding-left:0px; padding-left:0px;
} }
.chart2{
/deep/ .chart-gif{
top:89px;
left:196px;
}
}
} }
</style> </style>