[mod]超融合-无数据时增加默认显示

init
wangxi 4 years ago
parent f1646e7ec6
commit 526ce5c6ec

@ -4,7 +4,7 @@
<a-tabs default-active-key="1" class="tab-style" @change="handleTabsChange" > <a-tabs default-active-key="1" class="tab-style" @change="handleTabsChange" >
<a-tab-pane key="1" tab="行政班概况"> <a-tab-pane key="1" tab="行政班概况">
<div style="width:100%"> <div v-if="getData" style="width:100%">
<div class="leftContent"> <div class="leftContent">
<div style="text-align: center;font-weight: bold">行政班类别统计汇总</div> <div style="text-align: center;font-weight: bold">行政班类别统计汇总</div>
<m-echarts <m-echarts
@ -22,9 +22,10 @@
</div> </div>
</div> </div>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="教学班概况"> <a-tab-pane key="2" tab="教学班概况">
<table border="1" class="table-style" > <table v-if="getData" border="1" class="table-style" >
<thead> <thead>
<tr style="background:#E8F3FF;"> <tr style="background:#E8F3FF;">
<th style="text-align:center;">学科</th> <th style="text-align:center;">学科</th>
@ -51,9 +52,10 @@
</tbody> </tbody>
</table> </table>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="走班概况" > <a-tab-pane key="3" tab="走班概况" >
<div class="go-class"> <div v-if="getData" class="go-class">
<div class="top-content"> <div class="top-content">
<div class="left-line"></div> <div class="left-line"></div>
<div class="text">学生走班情况汇总</div> <div class="text">学生走班情况汇总</div>
@ -102,18 +104,20 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="4" tab="男女比例" > <a-tab-pane key="4" tab="男女比例" >
<div style="width:50%;display: inline-block;height:370px"> <div v-if="getData">
<m-echarts <div style="width:50%;display: inline-block;height:370px">
v-if="sexPieFlag" <m-echarts
:echartStyle="sexPieData.style" v-if="sexPieFlag"
:opinion="sexPieData.c" :echartStyle="sexPieData.style"
:opinionData="sexPieData.e" :opinion="sexPieData.c"
v-on:currentEchartData="getSexStatic" :opinionData="sexPieData.e"
></m-echarts> v-on:currentEchartData="getSexStatic"
</div> ></m-echarts>
<div style="width:50%;display: inline-block;height:370px"> </div>
<div style="width:50%;display: inline-block;height:370px">
<m-bar-echarts <m-bar-echarts
v-if="sexLineFlag" v-if="sexLineFlag"
:echartStyle="sexData.style" :echartStyle="sexData.style"
@ -124,7 +128,9 @@
:yAxisName="sexData.yAxisName" :yAxisName="sexData.yAxisName"
> >
</m-bar-echarts> </m-bar-echarts>
</div>
</div> </div>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
<div class="select-style" > <div class="select-style" >
@ -256,7 +262,8 @@
], ],
xAxisName:"", xAxisName:"",
yAxisName:"人数", yAxisName:"人数",
} },
getData:true,
} }
}, },
@ -267,34 +274,46 @@
methods:{ methods:{
handleTaskChange:function (key) { handleTaskChange:function (key) {
this.task_id=key; this.task_id=key;
if(this.type==='1'){ if(key!==''){
this.administrativeTable=false; this.getData=true;
this.pieFlag=false; if(this.type==='1'){
this.getClassCountCompareByType(); this.administrativeTable=false;
this.getClassCountCompareByTypeDetail(); this.pieFlag=false;
}else if(this.type==='2'){ this.getClassCountCompareByType();
this.getClassComprehensiveInfo(); this.getClassCountCompareByTypeDetail();
}else if(this.type==='3'){ }else if(this.type==='2'){
this.goClassPieFlag=false; this.getClassComprehensiveInfo();
this.getStudentTeachingClassInfo(); }else if(this.type==='3'){
this.goClassPieFlag=false;
this.getStudentTeachingClassInfo();
}else {
this.sexPieFlag=false;
this.sexLineFlag=false;
this.getSexStatic()
}
}else { }else {
this.sexPieFlag=false; this.getData=false;
this.sexLineFlag=false;
this.getSexStatic()
} }
}, },
handleTabsChange:function (key) { handleTabsChange:function (key) {
this.type=key; this.type=key;
if(key==='1'){ if(this.task_id!==''){
this.getClassCountCompareByType(); this.getData=true;
this.getClassCountCompareByTypeDetail(); if(key==='1'){
}else if(key==='2'){ this.getClassCountCompareByType();
this.getClassComprehensiveInfo(); this.getClassCountCompareByTypeDetail();
}else if(key==='3'){ }else if(key==='2'){
this.getStudentTeachingClassInfo(); this.getClassComprehensiveInfo();
}else if(key==='3'){
this.getStudentTeachingClassInfo();
}else {
this.getSexStatic()
}
}else { }else {
this.getSexStatic() this.getData=false;
} }
}, },
// //
getClassCountCompareByType:function () { getClassCountCompareByType:function () {
@ -503,13 +522,15 @@
if(result[0].data.success === true){ if(result[0].data.success === true){
this.taskFlag=true; this.taskFlag=true;
if(result[0].data.list.length!==0){ if(result[0].data.list.length!==0){
this.getData=true;
this.taskList=result[0].data.list; this.taskList=result[0].data.list;
this.task_id=result[0].data.list[0].divide_id; this.task_id=result[0].data.list[0].divide_id;
this.getClassCountCompareByType(); this.getClassCountCompareByType();
this.getClassCountCompareByTypeDetail(); this.getClassCountCompareByTypeDetail();
}else { }else {
this.stageList=[{stage_name:'暂无数据',stage_id:''}]; this.getData=false;
this.taskList=[{divide_name:'暂无数据',divide_id:''}];
} }
} }

@ -12,46 +12,50 @@
</div> </div>
<a-tabs default-active-key="1" class="tab-style" @change="handleTabsChange" > <a-tabs default-active-key="1" class="tab-style" @change="handleTabsChange" >
<a-tab-pane key="1" tab="行政班概况"> <a-tab-pane key="1" tab="行政班概况">
<div style="height:3rem;overflow: hidden"> <div v-if="getData">
<img src="./image/u5561.svg" class="img-style" @click="administrativeImgClick('table')"/> <div style="height:3rem;overflow: hidden">
<img src="./image/u5560.svg" class="img-style" @click="administrativeImgClick('pie')" /> <img src="./image/u5561.svg" class="img-style" @click="administrativeImgClick('table')"/>
</div> <img src="./image/u5560.svg" class="img-style" @click="administrativeImgClick('pie')" />
<div v-if="showPie">
<div style="height:370px">
<m-echarts
v-if="pieFlag"
:echartStyle="administrativeClassData.style"
:opinion="administrativeClassData.c"
:opinionData="administrativeClassData.e"
:isRing=true
v-on:currentEchartData="getClassCountCompareByType"
></m-echarts>
</div> </div>
<div v-if="showPie">
<div style="height:370px">
<m-echarts
v-if="pieFlag"
:echartStyle="administrativeClassData.style"
:opinion="administrativeClassData.c"
:opinionData="administrativeClassData.e"
:isRing=true
v-on:currentEchartData="getClassCountCompareByType"
></m-echarts>
</div>
</div>
<div v-else>
<a-table v-if="administrativeTable" style="min-height: 10rem;margin-bottom:2rem" :columns="columns" :data-source="tableData" size="small" :pagination="false" rowKey='class_id'>
</a-table>
</div>
</div> </div>
<div v-else> <div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
<a-table v-if="administrativeTable" style="min-height: 10rem;margin-bottom:2rem" :columns="columns" :data-source="tableData" size="small" :pagination="false" rowKey='class_id'>
</a-table>
</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="教学班概况"> <a-tab-pane key="2" tab="教学班概况">
<div class="class-style"> <div v-if="getData">
<div class="block-style" :style="{background:index===type?'#00A4FF':'#C6D7F2'}" v-for="(item,type) in this.administrativeClass" :key="item.subject_id" @click="handleCardClick(item.subject_id,type)"> <div class="class-style">
<img :src="require('./image/'+item.imgsrc+'.svg')" style="margin-bottom: .4rem" /> <div class="block-style" :style="{background:index===type?'#00A4FF':'#C6D7F2'}" v-for="(item,type) in this.administrativeClass" :key="item.subject_id" @click="handleCardClick(item.subject_id,type)">
<span style="margin-left: .5rem">{{item.subject_name}}</span> <img :src="require('./image/'+item.imgsrc+'.svg')" style="margin-bottom: .4rem" />
<span class="count">{{item.total_count}}</span> <span style="margin-left: .5rem">{{item.subject_name}}</span>
<span class="count">{{item.total_count}}</span>
</div>
</div> </div>
</div> <table class="class-table" v-if="classTable">
<table class="class-table" v-if="classTable"> <thead>
<thead>
<tr> <tr>
<th></th> <th></th>
<th>选考<span class="num-style">{{subjectData[0].count+subjectData[0].teaching_count}}</span></th> <th>选考<span class="num-style">{{subjectData[0].count+subjectData[0].teaching_count}}</span></th>
<th>学考<span class="num-style">{{subjectData[1].count+subjectData[1].teaching_count}}</span></th> <th>学考<span class="num-style">{{subjectData[1].count+subjectData[1].teaching_count}}</span></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td style="font-weight: bold">行政班<span class="num-style">{{subjectData[0].count+subjectData[1].count}}</span></td> <td style="font-weight: bold">行政班<span class="num-style">{{subjectData[0].count+subjectData[1].count}}</span></td>
<td>{{subjectData[0].count}}</td> <td>{{subjectData[0].count}}</td>
@ -62,11 +66,13 @@
<td>{{subjectData[0].teaching_count}}</td> <td>{{subjectData[0].teaching_count}}</td>
<td>{{subjectData[1].teaching_count}}</td> <td>{{subjectData[1].teaching_count}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="走班概况" > <a-tab-pane key="3" tab="走班概况" >
<div class="goClass"> <div v-if="getData" class="goClass">
<div class="left-con"> <div class="left-con">
<div style="height:370px"> <div style="height:370px">
<m-echarts <m-echarts
@ -99,33 +105,37 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="4" tab="男女比例" > <a-tab-pane key="4" tab="男女比例" >
<div style="height:3rem;overflow: hidden"> <div v-if="getData">
<img src="./image/u5729.svg" class="img-style" @click="sexImgClick('pie')"/> <div style="height:3rem;overflow: hidden">
<img src="./image/u5560.svg" class="img-style" @click="sexImgClick('line')" /> <img src="./image/u5729.svg" class="img-style" @click="sexImgClick('pie')"/>
</div> <img src="./image/u5560.svg" class="img-style" @click="sexImgClick('line')" />
<div v-if="showLine" style="height:370px"> </div>
<m-echarts <div v-if="showLine" style="height:370px">
v-if="sexPieFlag" <m-echarts
:echartStyle="sexPieData.style" v-if="sexPieFlag"
:opinion="sexPieData.c" :echartStyle="sexPieData.style"
:opinionData="sexPieData.e" :opinion="sexPieData.c"
v-on:currentEchartData="getSexStatic" :opinionData="sexPieData.e"
></m-echarts> v-on:currentEchartData="getSexStatic"
</div> ></m-echarts>
<div v-else style="height:370px"> </div>
<m-bar-echarts <div v-else style="height:370px">
v-if="sexLineFlag" <m-bar-echarts
:echartStyle="sexData.style" v-if="sexLineFlag"
:xAxisData="sexData.xAxisData" :echartStyle="sexData.style"
:legendData="sexData.legendData" :xAxisData="sexData.xAxisData"
:seriesData="sexData.seriesData" :legendData="sexData.legendData"
:xAxisName="sexData.xAxisName" :seriesData="sexData.seriesData"
:yAxisName="sexData.yAxisName" :xAxisName="sexData.xAxisName"
> :yAxisName="sexData.yAxisName"
</m-bar-echarts> >
</m-bar-echarts>
</div>
</div> </div>
<div v-else style="text-align: center;margin: 4rem 0">暂无数据</div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
@ -257,7 +267,8 @@
], ],
xAxisName:"", xAxisName:"",
yAxisName:"人数", yAxisName:"人数",
} },
getData:true,
} }
}, },
@ -276,35 +287,43 @@
}, },
handleTaskChange:function (key) { handleTaskChange:function (key) {
this.task_id=key; this.task_id=key;
if(this.type==='1'){ if(key!==''){
this.administrativeTable=false; this.getData=true;
this.pieFlag=false; if(this.type==='1'){
this.getClassCountCompareByType(); this.administrativeTable=false;
this.getClassCountCompareByTypeDetail(); this.pieFlag=false;
}else if(this.type==='2'){ this.getClassCountCompareByType();
this.getClassComprehensiveInfo(); this.getClassCountCompareByTypeDetail();
}else if(this.type==='3'){ }else if(this.type==='2'){
this.goClassPieFlag=false; this.getClassComprehensiveInfo();
this.getStudentTeachingClassInfo(); }else if(this.type==='3'){
this.goClassPieFlag=false;
this.getStudentTeachingClassInfo();
}else {
this.sexPieFlag=false;
this.sexLineFlag=false;
this.getSexStatic()
}
}else { }else {
this.sexPieFlag=false; this.getData=false;
this.sexLineFlag=false;
this.getSexStatic()
} }
}, },
handleTabsChange:function (key) { handleTabsChange:function (key) {
this.type=key; this.type=key;
if(key==='1'){ if(this.task_id!==''){
this.showPie=true; this.getData=true;
this.getClassCountCompareByType(); if(key==='1'){
this.getClassCountCompareByTypeDetail(); this.getClassCountCompareByType();
}else if(key==='2'){ this.getClassCountCompareByTypeDetail();
this.index=0; }else if(key==='2'){
this.getClassComprehensiveInfo(); this.getClassComprehensiveInfo();
}else if(key==='3'){ }else if(key==='3'){
this.getStudentTeachingClassInfo(); this.getStudentTeachingClassInfo();
}else {
this.getSexStatic()
}
}else { }else {
this.getSexStatic() this.getData=false;
} }
}, },
administrativeImgClick:function (key) { administrativeImgClick:function (key) {
@ -336,13 +355,15 @@
if(result[0].data.success === true){ if(result[0].data.success === true){
this.taskFlag=true; this.taskFlag=true;
if(result[0].data.list.length!==0){ if(result[0].data.list.length!==0){
this.getData=true;
this.taskList=result[0].data.list; this.taskList=result[0].data.list;
this.task_id=result[0].data.list[0].divide_id; this.task_id=result[0].data.list[0].divide_id;
this.getClassCountCompareByType(); this.getClassCountCompareByType();
this.getClassCountCompareByTypeDetail(); this.getClassCountCompareByTypeDetail();
}else { }else {
this.stageList=[{stage_name:'暂无数据',stage_id:''}]; this.getData=false;
this.taskList=[{divide_name:'暂无数据',divide_id:''}];
} }
} }

@ -4,8 +4,7 @@
<div > <div >
<div class="left-content"> <div class="left-content">
<div style="font-size: 18px;margin-bottom:1rem">异动数据统计分析</div> <div style="font-size: 18px;margin-bottom:1rem">异动数据统计分析</div>
<div></div> <div style="height:370px;width:100%;margin:0 auto" v-if="getData">
<div style="height:370px;width:100%;margin:0 auto">
<m-bar-echarts <m-bar-echarts
v-if="classesFlag" v-if="classesFlag"
:echartStyle="classesSubstituteData.style" :echartStyle="classesSubstituteData.style"
@ -20,6 +19,7 @@
</m-bar-echarts> </m-bar-echarts>
</div> </div>
<div style="margin-top: 8rem;" v-else></div>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="module" style="background: #F4593A"> <div class="module" style="background: #F4593A">
@ -77,7 +77,8 @@
], ],
xAxisName:"日期", xAxisName:"日期",
yAxisName:"异动课节", yAxisName:"异动课节",
} },
getData:true,
} }
}, },
@ -124,6 +125,7 @@
}],(result)=>{ }],(result)=>{
if(result[0].data.success === true){ if(result[0].data.success === true){
this.classesFlag=true; this.classesFlag=true;
this.getData=true;
let nameList=[]; let nameList=[];
let classes=[]; let classes=[];
let substitute=[]; let substitute=[];
@ -143,6 +145,8 @@
this.classesSubstituteData.seriesData[1].data=substitute; this.classesSubstituteData.seriesData[1].data=substitute;
this.classesSubstituteData.seriesData[1].name=nameList[1]; this.classesSubstituteData.seriesData[1].name=nameList[1];
}else {
this.getData=false;
} }
}) })
} }

@ -20,7 +20,7 @@
</div> </div>
<div> <div>
<div style="height:370px;width:96%;margin:1rem auto;"> <div style="height:370px;width:96%;margin:1rem auto;" v-if="getData">
<m-bar-echarts <m-bar-echarts
v-if="classesFlag" v-if="classesFlag"
:echartStyle="classesSubstituteData.style" :echartStyle="classesSubstituteData.style"
@ -35,6 +35,7 @@
</m-bar-echarts> </m-bar-echarts>
</div> </div>
<div v-else style="margin: 5rem 0;text-align: center">暂无数据</div>
</div> </div>
</div> </div>
@ -77,7 +78,8 @@
], ],
xAxisName:"日期", xAxisName:"日期",
yAxisName:"异动课节", yAxisName:"异动课节",
} },
getData:true
} }
}, },
@ -124,6 +126,7 @@
}],(result)=>{ }],(result)=>{
if(result[0].data.success === true){ if(result[0].data.success === true){
this.classesFlag=true; this.classesFlag=true;
this.getData=true;
let nameList=[]; let nameList=[];
let classes=[]; let classes=[];
let substitute=[]; let substitute=[];
@ -143,6 +146,8 @@
this.classesSubstituteData.seriesData[1].data=substitute; this.classesSubstituteData.seriesData[1].data=substitute;
this.classesSubstituteData.seriesData[1].name=nameList[1]; this.classesSubstituteData.seriesData[1].name=nameList[1];
}else{
this.getData=false;
} }
}) })
} }

@ -30,7 +30,7 @@
</div> </div>
<div class="right-content"> <div class="right-content">
<div>听评课趋势统计</div> <div>听评课趋势统计</div>
<div v-if="this.trendStatistical.yAxis.length!==0">
<div style="width:100%;overflow: hidden"> <div style="width:100%;overflow: hidden">
<a-select style="width:6rem;float: right" v-if="stageFlag" value-key="item.stage_name" :default-value=this.stageList[0].stage_name <a-select style="width:6rem;float: right" v-if="stageFlag" value-key="item.stage_name" :default-value=this.stageList[0].stage_name
@change="handleSelectStage($event,'line')"> @change="handleSelectStage($event,'line')">
@ -39,6 +39,7 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> </div>
<div v-if="this.trendStatistical.yAxis.length!==0">
<l-echarts <l-echarts
v-if="lineFlag" v-if="lineFlag"
:echartStyle="trendStatistical.style" :echartStyle="trendStatistical.style"

@ -11,14 +11,21 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> </div>
<m-echarts <div v-if="this.courseDistribution.e.length!==0">
v-if="pieFlag" <m-echarts
:echartStyle="courseDistribution.s" v-if="pieFlag"
:opinion="courseDistribution.c" :echartStyle="courseDistribution.s"
:opinionData="courseDistribution.e" :opinion="courseDistribution.c"
:isRing=true :opinionData="courseDistribution.e"
v-on:currentEchartData="getCourseProgressPie" :isRing=true
></m-echarts> v-on:currentEchartData="getCourseProgressPie"
></m-echarts>
</div>
<div v-else="">
<div>
<div class="bgImg"></div>
</div>
</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="听评课趋势统计" > <a-tab-pane key="2" tab="听评课趋势统计" >
<div style="width:100%;overflow: hidden"> <div style="width:100%;overflow: hidden">
@ -29,14 +36,21 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> </div>
<l-echarts <div v-if="this.trendStatistical.yAxis.length!==0">
v-if="lineFlag" <l-echarts
:echartStyle="trendStatistical.style" v-if="lineFlag"
:xAxisData="trendStatistical.xAxis" :echartStyle="trendStatistical.style"
:yAxisData="trendStatistical.yAxis" :xAxisData="trendStatistical.xAxis"
:isType="trendStatistical.type" :yAxisData="trendStatistical.yAxis"
v-on:trendStatistical="getCourseProgressLine" :isType="trendStatistical.type"
></l-echarts> v-on:trendStatistical="getCourseProgressLine"
></l-echarts>
</div>
<div v-else="">
<div>
<div class="bgImg"></div>
</div>
</div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
@ -221,6 +235,13 @@
text-align: center; text-align: center;
} }
} }
.bgImg{
text-align: center;
margin: 0 auto;
width:16rem;
height:16rem;
background: url('./image/bgImg.png') center center no-repeat;
}
} }

Loading…
Cancel
Save