From 4b0f1adb859302b2ba1ec6984b0235fffd942792 Mon Sep 17 00:00:00 2001 From: haha Date: Sat, 23 Sep 2023 00:06:58 +0800 Subject: [PATCH] update code --- src/components/chart-bar.js | 71 +++++++++++++++++ src/components/project-overview-chart.js | 11 ++- src/pages/projectEngin.vue | 97 +++++++++++++++++++++--- 3 files changed, 165 insertions(+), 14 deletions(-) create mode 100644 src/components/chart-bar.js diff --git a/src/components/chart-bar.js b/src/components/chart-bar.js new file mode 100644 index 0000000..e574eec --- /dev/null +++ b/src/components/chart-bar.js @@ -0,0 +1,71 @@ +import Vue from 'vue' +Vue.component("chart-bar", { + template: ` +
+
+ +
+
+ + `, + 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; + }) + }, + }, + +}) diff --git a/src/components/project-overview-chart.js b/src/components/project-overview-chart.js index 1e38c40..90c8d27 100644 --- a/src/components/project-overview-chart.js +++ b/src/components/project-overview-chart.js @@ -10,6 +10,9 @@ Vue.component("project-overview-chart", { `, props: { + fn:{ + type:Function + }, typedata:{ type: Array, }, @@ -115,12 +118,11 @@ Vue.component("project-overview-chart", { if(total_datas==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||{})}; - this.option = { - + this.option = { title: { text: this.maintitle||total_datas, 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); window.onresize = chChart.resize; }) diff --git a/src/pages/projectEngin.vue b/src/pages/projectEngin.vue index f18364d..6f4c1f4 100644 --- a/src/pages/projectEngin.vue +++ b/src/pages/projectEngin.vue @@ -24,6 +24,7 @@ +
暂无数据
@@ -32,10 +33,12 @@ - + - - + + @@ -43,18 +46,21 @@ +
暂无数据
 +
暂无数据
 +
暂无数据
@@ -72,6 +78,8 @@ import '../components/module/module-one-1-2' import '../components/background_video' import '../components/header' import '../components/staff-survey-chart' +import '../components/chart-bar' +import '../components/project-overview-chart' import BorderBox6 from './components/BorderBox6.vue' import debounce from 'lodash.debounce' import imageItem from './engin/enginImageItems.vue' @@ -83,6 +91,7 @@ export default { }, data() { return { + elChart2:0, loading:true, index1:0, index2:0, @@ -97,7 +106,36 @@ export default { list5:[], list6:[], 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: { + 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) { let func = () => { let prjId = this.project?.id||0; @@ -131,12 +182,22 @@ export default { } func(); }, + addBr(s){ + let out=""; + for(let i=0;i { let ajaxs=[ - this.$api.standard.getList(id,this.dept.id), - this.$api.flow.groupByCategory(this.project.id,this.dept.id), - this.$api.flow.groupByUnit(this.project.id,this.dept.id), + 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]; @@ -148,17 +209,19 @@ export default { this.list5=tmps.filter(it=>it.standardType==5); this.list6=tmps.filter(it=>it.standardType==6); this.loading=false; - this.chart1Data=(res[1].data||[]).map(it=>{ + 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; - 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}, {title:'监理单位',count:0}, {title:'设计单位',count:0}, @@ -166,13 +229,19 @@ export default { {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++; console.log("-2->",this.chart2Data); }); }); @@ -192,5 +261,11 @@ export default { /deep/ .border-1{ padding-left:0px; } + .chart2{ + /deep/ .chart-gif{ + top:89px; + left:196px; + } + } }