|
|
<template>
|
|
|
<div class="data-analysis-main-style" v-if="showType === 'condition'" ref="main">
|
|
|
<div v-for="item,index in dataAnalysisCondition" class="condition-container-style" :key="item.id"
|
|
|
:style="{width:item.id === 'school'?'360px':(item.id === 'report'?'calc(100% - ' + (index * 260 +
|
|
|
(role !== 'school' && analysisType === 'schoolAnalysis'? 110 : 0)) +'px)':'250px')}">
|
|
|
<div class="title-style">
|
|
|
{{item.title}}
|
|
|
</div>
|
|
|
<vue-scroll :ops="ops" style="height: calc(100% - 30px)">
|
|
|
<a-spin :spinning="item.isLoading === true" style="height:100%">
|
|
|
<ul class="year-list-style">
|
|
|
<li v-for="d,dIndex in item.data" :key="d.id" class="year-li-style" @click="onItemClick(item,index,d,dIndex)"
|
|
|
:style="{color:index !== dataAnalysisCondition.length - 1 && d.id === item.selectedId?'#31a8fa':null}"
|
|
|
:data-report="index === dataAnalysisCondition.length - 1" :title="d.value">
|
|
|
{{d.value}}
|
|
|
<a-icon v-if="index !== dataAnalysisCondition.length - 1 && d.id === item.selectedId" type="right" class="icon-style"/>
|
|
|
<span v-else-if="index === dataAnalysisCondition.length - 1" style="font-size: 14px;top:0;right:10px"
|
|
|
class="icon-style" @click.stop="onDownload()">
|
|
|
下载报表
|
|
|
</span>
|
|
|
</li>
|
|
|
<div v-if="item.data.length === 0 && item.isLoading === false" class="no-data-style">暂无相关数据</div>
|
|
|
</ul>
|
|
|
<div v-if="index === dataAnalysisCondition.length - 1 && item.data.length > 0" class="download-all-style">下载全部报表</div>
|
|
|
</a-spin>
|
|
|
</vue-scroll>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 市级总体分析 -->
|
|
|
<City_County_01 v-else-if="reportData.id === 'city_01' || reportData.id === 'county_01'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<City_02 v-else-if="reportData.id === 'city_02'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<City_03 v-else-if="reportData.id === 'city_03'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<City_04 v-else-if="reportData.id === 'city_04'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<City_05 v-else-if="reportData.id === 'city_05'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<!-- 县域分析 -->
|
|
|
<District_02 v-else-if="reportData.id === 'county_02'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<District_03 v-else-if="reportData.id === 'county_03'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<District_04 v-else-if="reportData.id === 'county_04'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<District_05 v-else-if="reportData.id === 'county_05'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<District_06 v-else-if="reportData.id === 'county_06'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData"/>
|
|
|
<!-- 学校分析 -->
|
|
|
<School_01_02 v-else-if="reportData.id === 'school_01' || reportData.id === 'school_02'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData" :schoolData="schoolData"/>
|
|
|
<School_03 v-else-if="reportData.id === 'school_03'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData" :schoolData="schoolData"/>
|
|
|
<School_04 v-else-if="reportData.id === 'school_04'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData" :schoolData="schoolData"/>
|
|
|
<School_05 v-else-if="reportData.id === 'school_05'" :countyData="countyData"
|
|
|
:yearData="yearData" :reportData="reportData" :schoolData="schoolData"/>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {Icon,Spin} from 'ant-design-vue';
|
|
|
import {mapState} from 'vuex';
|
|
|
import Interface from '../../../global-llibs/axios-config';
|
|
|
import InterfaceConfig from './interfaceConfig';
|
|
|
import _ from 'lodash';
|
|
|
let pageType = "";
|
|
|
export default {
|
|
|
name: "DataAnalysisMain",
|
|
|
data:function () {
|
|
|
return {
|
|
|
dataAnalysisCondition:[],
|
|
|
ops:{
|
|
|
vuescroll: {},
|
|
|
scrollPanel: {},
|
|
|
rail: {
|
|
|
keepShow: true
|
|
|
},
|
|
|
bar: {
|
|
|
hoverStyle: true,
|
|
|
onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
|
|
|
background: "#999999",//滚动条颜色
|
|
|
opacity: 0.5,//滚动条透明度
|
|
|
"overflow-x": "hidden"
|
|
|
}
|
|
|
},
|
|
|
analysisType:pageType,
|
|
|
showType:'condition',
|
|
|
reportData:null,
|
|
|
yearData:null,//选择的年度数据
|
|
|
countyData:null,//选择的县域数据
|
|
|
schoolData:null,//选择的学校数据
|
|
|
loadData:true,
|
|
|
}
|
|
|
},
|
|
|
components:{
|
|
|
AIcon:Icon,
|
|
|
ASpin:Spin,
|
|
|
City_County_01:()=>import('./cityAnalysis/City_County_01.vue'),
|
|
|
City_02:()=>import('./cityAnalysis/City_02.vue'),
|
|
|
City_03:()=>import('./cityAnalysis/City_03.vue'),
|
|
|
City_04:()=>import('./cityAnalysis/City_04.vue'),
|
|
|
City_05:()=>import('./cityAnalysis/City_05.vue'),
|
|
|
District_02:()=>import('./districtAnalysis/District_02.vue'),
|
|
|
District_03:()=>import('./districtAnalysis/District_03.vue'),
|
|
|
District_04:()=>import('./districtAnalysis/District_04.vue'),
|
|
|
District_05:()=>import('./districtAnalysis/District_05.vue'),
|
|
|
District_06:()=>import('./districtAnalysis/District_06.vue'),
|
|
|
School_01_02:()=>import('./schoolAnalysis/School_01_02.vue'),
|
|
|
School_03:()=>import('./schoolAnalysis/School_03.vue'),
|
|
|
School_04:()=>import('./schoolAnalysis/School_04.vue'),
|
|
|
School_05:()=>import('./schoolAnalysis/School_05.vue'),
|
|
|
},
|
|
|
mounted(){
|
|
|
this.$bus.on("ANALYSISRETURN",this.returnBack);
|
|
|
},
|
|
|
updated(){
|
|
|
if (this.loadData === false){//是否加载过数据
|
|
|
this.loadData = true;
|
|
|
if(this.role === 'city'){//市教育局角色
|
|
|
this.getCountyData();
|
|
|
}else if (this.role === 'county'){//县域角色
|
|
|
this.getSchoolData();
|
|
|
}else{//学校角色
|
|
|
this.isHasReportData();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy(){
|
|
|
this.$bus.off("ANALYSISRETURN",this.returnBack)
|
|
|
},
|
|
|
methods:{
|
|
|
/*
|
|
|
* 获取某年度的县域列表
|
|
|
* */
|
|
|
getCountyData:function(){
|
|
|
Interface.callInterface([{
|
|
|
url:InterfaceConfig.getCityBureauList.url,
|
|
|
params:{
|
|
|
report_year:this.yearData.id,
|
|
|
city_id:1
|
|
|
},
|
|
|
method:InterfaceConfig.getCityBureauList.method,
|
|
|
isTestLogin:InterfaceConfig.getCityBureauList.isTestLogin
|
|
|
}],(result)=>{
|
|
|
if (result[0].data.code === 2000){
|
|
|
let data = result[0].data.data;
|
|
|
if (data && Array.isArray(data) && data.length > 0){//存在县域
|
|
|
if(this.analysisType === 'overallAnalysis'){//总体分析
|
|
|
this.getReportData();
|
|
|
}else{
|
|
|
let d = [];
|
|
|
data.forEach((item)=>{
|
|
|
d.push({
|
|
|
id:item.bureau_id,
|
|
|
value:item.bureau_name,
|
|
|
})
|
|
|
});
|
|
|
this.countyData = {id:d[0].id,value:d[0].value};
|
|
|
let dataCopy = _.cloneDeep(this.dataAnalysisCondition[1]);
|
|
|
dataCopy.data = d;
|
|
|
dataCopy.isLoading = false;
|
|
|
dataCopy.selectedId = d[0].id;
|
|
|
this.$set(this.dataAnalysisCondition,1,dataCopy);
|
|
|
if (this.analysisType === 'countyAnalysis'){
|
|
|
this.getReportData();
|
|
|
}else{
|
|
|
this.getSchoolData();
|
|
|
}
|
|
|
}
|
|
|
}else{//不存在县域
|
|
|
for(let i = 1; i < this.dataAnalysisCondition.length; i++){
|
|
|
let data = _.cloneDeep(this.dataAnalysisCondition[i]);
|
|
|
data.isLoading = false;
|
|
|
data.data = [];
|
|
|
this.$set(this.dataAnalysisCondition,i,data);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/*
|
|
|
* 获取某年度某县域的学校列表
|
|
|
* */
|
|
|
getSchoolData:function(){
|
|
|
Interface.callInterface([{
|
|
|
url:InterfaceConfig.getBureauSchoolList.url,
|
|
|
params:{
|
|
|
report_year:this.yearData.id,
|
|
|
bureau_id:this.countyData && this.countyData.id?this.countyData.id:this.org_id,
|
|
|
},
|
|
|
method:InterfaceConfig.getBureauSchoolList.method,
|
|
|
isTestLogin:InterfaceConfig.getBureauSchoolList.isTestLogin
|
|
|
}],(result)=>{
|
|
|
if (result[0].data.code === 2000){
|
|
|
let data = result[0].data.data;
|
|
|
if (data && Array.isArray(data) && data.length > 0){//存在学校
|
|
|
if (this.role === 'county' && this.analysisType === 'countyAnalysis'){
|
|
|
this.getReportData();
|
|
|
}else{
|
|
|
let d = [];
|
|
|
data.forEach((item)=>{
|
|
|
d.push({
|
|
|
id:item.school_id,
|
|
|
value:item.school_name,
|
|
|
})
|
|
|
});
|
|
|
this.schoolData = {id:d[0].id,value:d[0].value};
|
|
|
let index = this.role === 'county'?1:2
|
|
|
let dataCopy = _.cloneDeep(this.dataAnalysisCondition[index]);
|
|
|
dataCopy.data = d;
|
|
|
dataCopy.isLoading = false;
|
|
|
dataCopy.selectedId = d[0].id;
|
|
|
this.$set(this.dataAnalysisCondition,index,dataCopy);
|
|
|
this.getReportData();
|
|
|
}
|
|
|
}else{//不存在学校
|
|
|
let index = this.role === 'county'?1:2;
|
|
|
for(let i = index; i < this.dataAnalysisCondition.length; i++){
|
|
|
let data = _.cloneDeep(this.dataAnalysisCondition[i]);
|
|
|
data.isLoading = false;
|
|
|
data.data = [];
|
|
|
this.$set(this.dataAnalysisCondition,i,data);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/*
|
|
|
* 学校角色 获取当前学校是否有数据分析
|
|
|
* */
|
|
|
isHasReportData:function(){
|
|
|
Interface.callInterface([{
|
|
|
url:InterfaceConfig.getSchoolIsExistStatisticReport.url,
|
|
|
params:{
|
|
|
report_year:this.yearData.id,
|
|
|
school_id:this.org_id,
|
|
|
},
|
|
|
method:InterfaceConfig.getSchoolIsExistStatisticReport.method,
|
|
|
isTestLogin:InterfaceConfig.getSchoolIsExistStatisticReport.isTestLogin
|
|
|
}],(result)=>{
|
|
|
if (result[0].data.code === 2000){
|
|
|
let data = result[0].data.data;
|
|
|
if (parseInt(data.isExist) === 1){//有数据分析数据
|
|
|
this.getReportData();
|
|
|
}else{//没有数据分析数据
|
|
|
let data = _.cloneDeep(this.dataAnalysisCondition[this.dataAnalysisCondition.length - 1]);
|
|
|
data.isLoading = false;
|
|
|
data.data = [];
|
|
|
this.$set(this.dataAnalysisCondition,this.dataAnalysisCondition.length - 1,data);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
getReportData:function(){
|
|
|
let reportData = _.cloneDeep(this.dataAnalysisCondition[this.dataAnalysisCondition.length - 1]);
|
|
|
reportData.isLoading = false;
|
|
|
if (this.analysisType === 'overallAnalysis'){
|
|
|
reportData.data = [{id:'city_01',value:'01.全市样本、平均分、等级分布对比分析报告'},{id:'city_02',value:'02.全市各县域样本、平均分、等级对比分析报告'},
|
|
|
{id:'city_03',value:'03.全市各学校样本、平均分、等级分布对比分析报告'},{id:'city_04',value:'04.全市各学段学年样本、平均分、等级分布对比分析报告'},
|
|
|
{id:'city_05',value:'05.全市的单项样本、平均分、等级分布对比分析报告'},{id:'city_06',value:'06.全市各县域的单项样本、平均分、等级分布对比分析报告'},
|
|
|
{id:'city_07',value:'07.全市各学校的单项样本、平均分、等级分布对比分析报告'},{id:'city_08',value:'08.单项横、纵对比分析报告'}];
|
|
|
}else if (this.analysisType === 'countyAnalysis'){
|
|
|
reportData.data = [
|
|
|
{id:'county_01',value:'01.县域样本、平均分、等级分布对比分析报告'},{id:'county_02',value:'02.县域各校样本、平均分、等级对比分析报告'},
|
|
|
{id:'county_03',value:'03.县域各学段学年样本、平均分、等级分布对比分析报告'},{id:'county_04',value:'04.县域的单项样本、平均分、等级分布对比分析报告'},
|
|
|
{id:'county_05',value:'05.县域各学校的单项样本、平均分、等级分布对比分析报告'},{id:'county_06',value:'06.单项横、纵对比分析报告'}
|
|
|
];
|
|
|
}else{
|
|
|
reportData.data = [
|
|
|
{id:'school_01',value:'01.学校学年样本、平均分、等级分布对比分析报告'},{id:'school_02',value:'02.各学年班级样本、平均分、等级对比分析报告'},
|
|
|
{id:'school_03',value:'03.学校的单项样本、平均分、等级分布对比分析报告'},{id:'school_04',value:'04.各班级的单项样本、平均分、等级分布对比分析报告'},
|
|
|
{id:'school_05',value:'05.单项横、纵对比分析报告'},{id:'school_06',value:'06.学生体质健康分析报告'}
|
|
|
]
|
|
|
}
|
|
|
|
|
|
this.$set(this.dataAnalysisCondition,this.dataAnalysisCondition.length - 1,reportData);
|
|
|
},
|
|
|
/*
|
|
|
* parent 点击目标的父数据
|
|
|
* parentIndex 父数据索引
|
|
|
* clickItem 点击目标
|
|
|
* clickItemIndex 点击目标索引
|
|
|
* */
|
|
|
onItemClick:function (parent,parentIndex,clickItem,clickItemIndex) {
|
|
|
if(parent.id === 'report'){//点击某个报告分析
|
|
|
this.showType = 'report';
|
|
|
this.reportData = clickItem;
|
|
|
if(clickItem.id.indexOf('county') !== -1){//点击的县域分析报告
|
|
|
if(this.role === 'county'){//当前是区角色
|
|
|
this.countyData={id:this.district_id,value:this.district_name};
|
|
|
}
|
|
|
}else if(clickItem.id.indexOf('school') !== -1){//点击的是学校分析的报告
|
|
|
if(this.role === 'school'){
|
|
|
this.countyData={id:this.district_id,value:this.district_name};
|
|
|
this.schoolData={id:this.org_id,value:this.org_name};
|
|
|
}
|
|
|
}
|
|
|
let breadCrumb = this.$store.state.breadCrumb;
|
|
|
breadCrumb.push(clickItem.value)
|
|
|
this.$store.commit('setSingleParam',{key:'breadCrumb',value:breadCrumb})
|
|
|
}else if (parent.selectedId !== clickItem.id){//点击其它筛选条件
|
|
|
for(let i = parentIndex + 1; i < this.dataAnalysisCondition.length; i ++){
|
|
|
let data = _.cloneDeep(this.dataAnalysisCondition[i]);
|
|
|
data.isLoading = true;
|
|
|
data.data = [];
|
|
|
this.$set(this.dataAnalysisCondition,i,data);
|
|
|
}
|
|
|
if (parent.id === 'year'){
|
|
|
this.yearData = _.cloneDeep(clickItem);
|
|
|
if (this.role === 'city'){
|
|
|
this.getCountyData();
|
|
|
}else if (this.role === 'county'){
|
|
|
this.getSchoolData();
|
|
|
}else{
|
|
|
this.isHasReportData();
|
|
|
}
|
|
|
}else if (parent.id === 'county'){
|
|
|
this.countyData = _.cloneDeep(clickItem);
|
|
|
if (this.analysisType === 'countyAnalysis'){
|
|
|
this.getReportData();
|
|
|
}else{
|
|
|
this.getSchoolData();
|
|
|
}
|
|
|
}else if (parent.id === 'school'){
|
|
|
this.schoolData = _.cloneDeep(clickItem);
|
|
|
this.getReportData();
|
|
|
}
|
|
|
this.$set(parent,'selectedId',clickItem.id);
|
|
|
}
|
|
|
console.log(clickItemIndex)
|
|
|
},
|
|
|
|
|
|
onDownload:function(){
|
|
|
console.log('下载报告')
|
|
|
},
|
|
|
returnBack:function () {
|
|
|
this.showType = 'condition';
|
|
|
let breadCrumb = this.$store.state.breadCrumb;
|
|
|
breadCrumb.pop();
|
|
|
this.$store.commit('setSingleParam',{key:'breadCrumb',value:breadCrumb});
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
...mapState(['role','district_id','district_name','org_id','org_name'])
|
|
|
},
|
|
|
beforeRouteEnter(to,from,next){
|
|
|
pageType = to.name;
|
|
|
next(vm=>{
|
|
|
vm.analysisType = to.name;
|
|
|
vm.showType = 'condition';
|
|
|
let condition = [{
|
|
|
id:'year',
|
|
|
title:'选择年度',
|
|
|
selectedId:"20202021",
|
|
|
data:[{id:"20202021",value:"2020～2021年度"},{id:"20212022",value:"2021～2022年度"}, {id:"20222023",value:"2022～2023年度"}, {id:"20232024",value:"2023～2024年度"},
|
|
|
{id:"20242025",value:"2024～2025年度"}, {id:"20252026",value:"2025～2026年度"},{id:"20262027",value:"2026～2027年度"}, {id:"20272028",value:"2027～2028年度"},
|
|
|
{id:"20282029",value:"2028～2029年度"},{id:"20292030",value:'2029～2030年度'},{id:"20302031",value:"2030～2031年度"}]
|
|
|
}];
|
|
|
|
|
|
vm.yearData = {id:"20202021",value:"2020～2021年度"};
|
|
|
|
|
|
|
|
|
if ((pageType === 'countyAnalysis' || pageType === 'schoolAnalysis') && vm.$store.state.role === 'city'){
|
|
|
//data中的数据需要从接口获取
|
|
|
condition.push({id:"county",title:'选择县域',selectedId:"",isLoading:true,data:[]})
|
|
|
}
|
|
|
if ( pageType === 'schoolAnalysis' && vm.$store.state.role !== 'school'){
|
|
|
//data中的数据需要从接口获取
|
|
|
condition.push({id:"school",title:'选择学校',selectedId:'',isLoading:true,data:[]})
|
|
|
}
|
|
|
|
|
|
condition.push({id:'report',title:'选择分析报告',isLoading:true,selectedId:'',data:[]});
|
|
|
|
|
|
if(vm.$store.state.role === 'county'){//
|
|
|
vm.countyData = {id:vm.$store.state.org_id,value:vm.$store.state.org_name}
|
|
|
}else if(vm.$store.state.role === 'school'){
|
|
|
vm.countyData = {id:vm.$store.state.district_id,value:vm.$store.state.district_name}
|
|
|
vm.schoolData = {id:vm.$store.state.org_id,value:vm.$store.state.org_name}
|
|
|
}
|
|
|
vm.dataAnalysisCondition = condition
|
|
|
vm.loadData = false;
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.data-analysis-main-style{
|
|
|
height: calc(100vh - 136px);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.condition-container-style{
|
|
|
width: 200px;
|
|
|
background-color: white;
|
|
|
padding: 20px 0 20px 10px;
|
|
|
height: 100%;
|
|
|
.title-style{
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
font-size: 16px;
|
|
|
border-left: 10px solid #31a8fa;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
.year-list-style{
|
|
|
margin-bottom: 0!important;
|
|
|
padding-left: 0!important;
|
|
|
/*min-height: 600px;*/
|
|
|
padding-right: 10px;
|
|
|
/*padding-top: 20px;*/
|
|
|
.year-li-style{
|
|
|
list-style: none;
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
/*text-align: center;*/
|
|
|
padding-left: 30px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
padding-right: 20px;
|
|
|
overflow: hidden;
|
|
|
word-break: keep-all;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
&:hover{
|
|
|
background-color: #f2f2f2;
|
|
|
}
|
|
|
.icon-style{
|
|
|
position: absolute;
|
|
|
font-size: 16px;
|
|
|
color:#31a8fa;
|
|
|
right: 0;
|
|
|
top: 17px;
|
|
|
}
|
|
|
}
|
|
|
.year-li-style[data-report=true]{
|
|
|
height: 75px;
|
|
|
line-height: 75px;
|
|
|
}
|
|
|
}
|
|
|
.download-all-style{
|
|
|
width: 8rem;
|
|
|
margin-top: 20px;
|
|
|
padding-left: 30px;
|
|
|
color: #31a8fa;
|
|
|
cursor:pointer;
|
|
|
}
|
|
|
.no-data-style{
|
|
|
width: 100%;
|
|
|
height: 10rem;
|
|
|
line-height: 10rem;
|
|
|
text-align: center;
|
|
|
color:#999999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.analysis-container-style{
|
|
|
position: relative;
|
|
|
.back-btn-style{
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: -5px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
