|
|
@@ -1,30 +1,30 @@
|
|
|
<template>
|
|
|
<!-- 创业公司登记 -->
|
|
|
- <div class="firm">
|
|
|
+ <div class="firm" v-loading="loading">
|
|
|
<div class="pAHeader">
|
|
|
<div class="pAHeader1">数据监测</div>
|
|
|
</div>
|
|
|
<hr />
|
|
|
<!-- 顶部展示信息区开始 -->
|
|
|
- <topData :data="HeaderData"/>
|
|
|
+ <topData v-if="!loading" :data="HeaderData"/>
|
|
|
<!-- 顶部展示信息区结束 -->
|
|
|
<!-- 中部大饼区开始 -->
|
|
|
<div class="midBlock">
|
|
|
<!-- 圆形图开始 -->
|
|
|
- <CircularChart :data="CircularData"/>
|
|
|
+ <CircularChart v-if="!loading" :data="CircularData"/>
|
|
|
<!-- 圆形图结束 -->
|
|
|
<!-- 横向柱状图开始 -->
|
|
|
- <HorizontalChart :data="HorizontalData"/>
|
|
|
+ <HorizontalChart v-if="!loading" :data="HorizontalData"/>
|
|
|
<!-- 横向柱状图结束 -->
|
|
|
</div>
|
|
|
<!-- 中部大饼区结束 -->
|
|
|
|
|
|
<!-- 柱状图区域开始 -->
|
|
|
- <ColumnarChart :data="ColumnarData"/>
|
|
|
+ <ColumnarChart v-if="!loading" :data="ColumnarData"/>
|
|
|
<!-- 柱状图区域结束 -->
|
|
|
|
|
|
<!-- 底部表格区域开始 -->
|
|
|
- <RankingTable :tableData="tableData"/>
|
|
|
+ <RankingTable v-if="!loading" :tableData="tableData"/>
|
|
|
<!-- 通知表格结束-->
|
|
|
<!-- 底部表格区域结束 -->
|
|
|
|
|
|
@@ -47,58 +47,123 @@
|
|
|
components:{topData,CircularChart,HorizontalChart,ColumnarChart,RankingTable},
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading:false,
|
|
|
//头部区域数据
|
|
|
HeaderData:{
|
|
|
- people:329,
|
|
|
- project:40,
|
|
|
- activity:25,
|
|
|
- budget:100,
|
|
|
- isPay:25
|
|
|
+ people:0,
|
|
|
+ project:0,
|
|
|
+ activity:0,
|
|
|
+ // budget:0,
|
|
|
+ isPay:0
|
|
|
},
|
|
|
//圆形
|
|
|
CircularData:[
|
|
|
- {value:30,name:"个人创客"},
|
|
|
- {value:70,name:"创客活动"}
|
|
|
+ {value:0,name:"个人创客"},
|
|
|
+ {value:0,name:"创客活动"}
|
|
|
],
|
|
|
//横行的柱状
|
|
|
HorizontalData:[
|
|
|
- [ '物联网激光切割器',0],
|
|
|
- [ '人工智能领跑马拉松',1000, ],
|
|
|
- [ '3D演奏智能工具', 2000],
|
|
|
- [ '人工智能分链机器',3000],
|
|
|
+ // [ '物联网激光切割器',0],
|
|
|
+ // [ '人工智能领跑马拉松',1000, ],
|
|
|
+ // [ '3D演奏智能工具', 2000],
|
|
|
+ // [ '人工智能分链机器',3000],
|
|
|
],
|
|
|
// 柱状
|
|
|
ColumnarData:[
|
|
|
- ['3D智能分链机器', 2000],
|
|
|
- ['3D智能分链机器1',3000],
|
|
|
- ['3D智能分链机器2', 2500],
|
|
|
- ['3D智能分链机器3', 1000],
|
|
|
- ['3D智能分链机器4', 2000],
|
|
|
- ['3D智能分链机器5',3000],
|
|
|
- ['3D智能分链机器6', 2500],
|
|
|
- ['3D智能分链机器7', 1000],
|
|
|
- ['3D智能分链机器8', 2000],
|
|
|
- ['3D智能分链机器9',3000],
|
|
|
- ['3D智能分链机器10', 2500],
|
|
|
- ['3D智能分链机器11', 1000],
|
|
|
- ['3D智能分链机器12', 2000],
|
|
|
- ['3D智能分链机器13',3000],
|
|
|
- ['3D智能分链机器14', 2500],
|
|
|
- ['3D智能分链机器15', 1000],
|
|
|
+ // ['3D智能分链机器', 2000],
|
|
|
+ // ['3D智能分链机器1',3000],
|
|
|
+ // ['3D智能分链机器2', 2500],
|
|
|
+ // ['3D智能分链机器3', 1000],
|
|
|
+ // ['3D智能分链机器4', 2000],
|
|
|
+ // ['3D智能分链机器5',3000],
|
|
|
+ // ['3D智能分链机器6', 2500],
|
|
|
+ // ['3D智能分链机器7', 1000],
|
|
|
+ // ['3D智能分链机器8', 2000],
|
|
|
+ // ['3D智能分链机器9',3000],
|
|
|
+ // ['3D智能分链机器10', 2500],
|
|
|
+ // ['3D智能分链机器11', 1000],
|
|
|
+ // ['3D智能分链机器12', 2000],
|
|
|
+ // ['3D智能分链机器13',3000],
|
|
|
+ // ['3D智能分链机器14', 2500],
|
|
|
+ // ['3D智能分链机器15', 1000],
|
|
|
],
|
|
|
tableData: [
|
|
|
- {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
|
|
|
- {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
|
|
|
- {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
|
|
|
- {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
|
|
|
+ // {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
|
|
|
+ // {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
|
|
|
+ // {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
|
|
|
+ // {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
- methods(){
|
|
|
-
|
|
|
+ methods:{
|
|
|
+ getData(){
|
|
|
+ this.loading = true;
|
|
|
+ this.ajax.get(this.$store.state.api+'/getEchartsData',{
|
|
|
+ uid:this.$store.state.userInfo.userid
|
|
|
+ }).then(result=>{
|
|
|
+ let data = result['data'];
|
|
|
+ console.log(data)
|
|
|
+ //创客项目人数
|
|
|
+ this.HeaderData['people']=data[0][0]['total']
|
|
|
+ //目前积累项目数量
|
|
|
+ this.HeaderData['project'] = data[1][0]['student']+data[1][0]['wordspace']
|
|
|
+ //目前积累活动数量
|
|
|
+ this.HeaderData['activity'] = data[2][0]['Maker']+data[2][0]['personal']
|
|
|
+ //已支出预算
|
|
|
+ let num = 0;
|
|
|
+ data[3].forEach(item=>{
|
|
|
+ item['isUse'] = 0;
|
|
|
+ let isUse =JSON.parse(item['actualuse']);
|
|
|
+ for(let i in isUse)item['isUse']+=Number(isUse[i]);
|
|
|
+ num+=item['isUse'];
|
|
|
+ })
|
|
|
+ this.HeaderData['isPay'] = num/10000;
|
|
|
+ //扇形图数据
|
|
|
+ this.CircularData[0]['value'] = data[2][0]['personal']
|
|
|
+ this.CircularData[1]['value'] = data[2][0]['Maker']
|
|
|
+
|
|
|
+ //创客活动资金
|
|
|
+ let MakerData = data[3].filter(item=>item.type==0);
|
|
|
+ let GroupMakerData = [];
|
|
|
+ MakerData.forEach(item=>{
|
|
|
+ let addActivity = GroupMakerData.filter(fItem=>fItem['acId']==item['acId']);
|
|
|
+ if(addActivity.length!=0){
|
|
|
+ addActivity[0]['isUse']+=item['isUse'];
|
|
|
+ }else{
|
|
|
+ GroupMakerData.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ GroupMakerData.sort((item1,item2)=>item2['isUse']-item1['isUse']).splice(0,4).sort((item1,item2)=>item1['isUse']-item2['isUse']).forEach(item=>this.HorizontalData.push([item['title'],item['isUse']]))
|
|
|
+
|
|
|
+ //个人创客资金
|
|
|
+ let personalData = data[3].filter(item=>item.type==1);
|
|
|
+ console.log(personalData)
|
|
|
+ let GroupPersonalData = [];
|
|
|
+ personalData.forEach(item=>{
|
|
|
+ let addActivity = GroupPersonalData.filter(fItem=>fItem['acId']==item['acId']);
|
|
|
+ if(addActivity.length!=0){
|
|
|
+ addActivity[0]['isUse']+=item['isUse'];
|
|
|
+ }else{
|
|
|
+ GroupPersonalData.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ GroupPersonalData.sort((item1,item2)=>item2['isUse']-item1['isUse']).splice(0,16).sort((item1,item2)=>item1['isUse']-item2['isUse']).forEach(item=>this.ColumnarData.push([item['title'],item['isUse']]))
|
|
|
+
|
|
|
+ //项目排名
|
|
|
+ this.tableData = data[4];
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.loading = false;
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
mounted(){
|
|
|
-
|
|
|
+ this.getData();
|
|
|
}
|
|
|
};
|
|
|
</script>
|
Q-ABAB