平台模块加载优化

init
gongdi 4 years ago
parent a13f33544e
commit cf17a4cd50

@ -48,7 +48,9 @@
document.onkeydown = function (e) { document.onkeydown = function (e) {
let key = window.event.keyCode; let key = window.event.keyCode;
if(key == 13){ if(key == 13){
_this.loginAccount(); if(StaticParams.trim(_this.account) !== "" || StaticParams.trim(_this.password) !== ""){
_this.loginAccount();
}
} }
} }
}, },

@ -4,7 +4,7 @@
<template v-else> <template v-else>
<top-bar :total_notice="totalNotice" :total_todo="todo_count" :unread_mail="mailCount" :crmData="crmData" :moduleAndLayoutData="moduleLayout" <top-bar :total_notice="totalNotice" :total_todo="todo_count" :unread_mail="mailCount" :crmData="crmData" :moduleAndLayoutData="moduleLayout"
ref="topBarRef" @accessSubsystem="onAccessSubsystem" @returnToMain="onReturnToMain"/> ref="topBarRef" @accessSubsystem="onAccessSubsystem" @returnToMain="onReturnToMain"/>
<div class="content-style" ref="contentRef" :style="{display:showMainContent === true?'block':'none'}"> <div id="moduleContent" class="content-style" ref="contentRef" :style="{display:showMainContent === true?'block':'none'}">
<div class="deal-and-notice-style"> <div class="deal-and-notice-style">
<Message class="content-child-style" style="width:calc(100% * 460 / 1680);background-color: #4baafe"/> <Message class="content-child-style" style="width:calc(100% * 460 / 1680);background-color: #4baafe"/>
<Deal class="content-child-style" style="width:calc(100% * 642 / 1680);background-color: white" :countData="todoCount" @btnClick="onDealBtnClick"/> <Deal class="content-child-style" style="width:calc(100% * 642 / 1680);background-color: white" :countData="todoCount" @btnClick="onDealBtnClick"/>
@ -604,7 +604,7 @@
.content-style{ .content-style{
height: calc(100% - 100px); height: calc(100% - 100px);
padding: 14px 28px; padding: 14px 28px;
overflow-y: auto; overflow-y: scroll;
background-color: #F8F9FB; background-color: #F8F9FB;
.deal-and-notice-style{ .deal-and-notice-style{
width: 100%; width: 100%;

@ -1,5 +1,5 @@
<template> <template>
<div class="module-style"> <div class="module-style" ref="moduleRef">
<div class="module-title-style"> <div class="module-title-style">
<span>{{getModuleName()}}</span> <span>{{getModuleName()}}</span>
<div class="icon-container-style"> <div class="icon-container-style">
@ -16,83 +16,131 @@
</template> </template>
<script> <script>
import {moduleData} from './moduleAndLaySettingConfig' import {moduleData} from './moduleAndLaySettingConfig';
export default { export default {
name: "ModuleBase", name: "ModuleBase",
props:{ props: {
moduleData:{ moduleData: {
type:Object, type: Object,
default:function () { default: function () {
return{ return {
module_type_id:'', module_type_id: '',
module_id:'', module_id: '',
size:'' size: '',
} }
} }
} }
}, },
data:function(){ data: function () {
return{ return {
type_id:this.moduleData.module_type_id, type_id: this.moduleData.module_type_id,
id:this.moduleData.module_id, id: this.moduleData.module_id,
module_size:this.moduleData.size, module_size: this.moduleData.size,
url: this.initModuleUrl() //url: this.initModuleUrl(),
url: "",
} }
}, },
computed:{ mounted(){
getCom: function (){ //
this.initLoadModule();
//
let moduleContent = document.getElementById("moduleContent");
moduleContent.addEventListener("scroll", () => {
let scrollTop = moduleContent.scrollTop;
// = +
let visibleBottom = scrollTop + document.documentElement.clientHeight - 100;
//
let moduleTop = this.$refs.moduleRef ? this.$refs.moduleRef.offsetTop : 0;
//
if (moduleTop + 100 < visibleBottom) {
//
this.url = this.getModuleUrl();
}
})
},
computed: {
getCom: function () {
return () => import(`@/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/${this.url}`) return () => import(`@/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/${this.url}`)
}, },
}, },
methods:{ methods: {
accessSubsystem:function(){ initLoadModule: function () {
let moduleTop = this.$refs.moduleRef ? this.$refs.moduleRef.offsetTop : 0;
let initVisibleBottom = document.documentElement.clientHeight;
if (moduleTop < initVisibleBottom) {
//
this.url = this.getModuleUrl();
}
},
accessSubsystem: function () {
debugger; debugger;
let type = (moduleData.filter((type)=>{return type.module_type_id === this.type_id})[0]); let type = (moduleData.filter((type) => {
let module = type.module_list.filter((module)=>{return module.module_id === this.id})[0]; return type.module_type_id === this.type_id
this.$emit('accessSubsystem',module); })[0]);
let module = type.module_list.filter((module) => {
return module.module_id === this.id
})[0];
this.$emit('accessSubsystem', module);
}, },
hideModule:function(){ hideModule: function () {
this.$emit('hideModule') this.$emit('hideModule')
}, },
initModuleUrl:function(){ initModuleUrl: function () {
let type = (moduleData.filter((type)=>{return type.module_type_id === this.moduleData.module_type_id})[0]) let type = (moduleData.filter((type) => {
if (this.moduleData.size === 'small'){ return type.module_type_id === this.moduleData.module_type_id
return type.module_list.filter((module)=>{return module.module_id === this.moduleData.module_id})[0].module_url_small })[0])
}else{ if (this.moduleData.size === 'small') {
return type.module_list.filter((module)=>{return module.module_id === this.moduleData.module_id})[0].module_url_large return type.module_list.filter((module) => {
return module.module_id === this.moduleData.module_id
})[0].module_url_small
} else {
return type.module_list.filter((module) => {
return module.module_id === this.moduleData.module_id
})[0].module_url_large
} }
}, },
getModuleUrl:function(){ getModuleUrl: function () {
let type = (moduleData.filter((type)=>{return type.module_type_id === this.type_id})[0]) let type = (moduleData.filter((type) => {
if (this.module_size === 'small'){ return type.module_type_id === this.type_id
return type.module_list.filter((module)=>{return module.module_id === this.id})[0].module_url_small })[0])
}else{ if (this.module_size === 'small') {
return type.module_list.filter((module)=>{return module.module_id === this.id})[0].module_url_large return type.module_list.filter((module) => {
return module.module_id === this.id
})[0].module_url_small
} else {
return type.module_list.filter((module) => {
return module.module_id === this.id
})[0].module_url_large
} }
}, },
getModuleName:function(){ getModuleName: function () {
return (moduleData.filter((type)=>{return type.module_type_id === this.type_id})[0]). return (moduleData.filter((type) => {
module_list.filter((module)=>{return module.module_id === this.id})[0].module_name return type.module_type_id === this.type_id
})[0]).module_list.filter((module) => {
return module.module_id === this.id
})[0].module_name
}, },
}, },
watch:{ watch: {
moduleData:function (newData) { moduleData: function (newData) {
this.type_id = newData.module_type_id this.type_id = newData.module_type_id
this.id = newData.module_id this.id = newData.module_id
this.module_size = newData.size this.module_size = newData.size
this.url = this.getModuleUrl() this.showIndex = newData.showIndex
//this.url = this.getModuleUrl()
this.initLoadModule();
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.module-style{ .module-style {
/*float: left;*/ /*float: left;*/
min-height: 10rem; min-height: 10rem;
background-color: white; background-color: white;
margin-bottom: 14px; margin-bottom: 14px;
.module-title-style{ .module-title-style {
display: flex; display: flex;
width: 100%; width: 100%;
height: 40px; height: 40px;
@ -101,24 +149,24 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 16px; font-size: 16px;
color:white; color: white;
/*justify-items: space-around;*/ /*justify-items: space-around;*/
background:linear-gradient(to bottom right,var(--modTitleTwo),var(--modTitleOne)); background: linear-gradient(to bottom right, var(--modTitleTwo), var(--modTitleOne));
background:-moz-linear-gradient(to bottom right,var(--modTitleTwo),var(--modTitleOne)); background: -moz-linear-gradient(to bottom right, var(--modTitleTwo), var(--modTitleOne));
background:-webkit-linear-gradient(bottom right,var(--modTitleTwo),var(--modTitleOne)); background: -webkit-linear-gradient(bottom right, var(--modTitleTwo), var(--modTitleOne));
.icon-style{ .icon-style {
font-size: 18px; font-size: 18px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
&:nth-last-of-type(1){ &:nth-last-of-type(1) {
margin-right: 0; margin-right: 0;
} }
} }
} }
.no-module-tip-style{ .no-module-tip-style {
display: flex; display: flex;
width: 100%; width: 100%;
height:120px; height: 120px;
align-items: center; align-items: center;
align-content: center; align-content: center;
justify-items: center; justify-items: center;

@ -1,13 +0,0 @@
<template>
<div>111</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>

@ -1,13 +1,14 @@
<template> <template>
<div class="class-evaluation-large-div"> <div class="class-evaluation-large-div">
<TabComp :tabArr="tabArr" showName="title" @tabChange="tabChange"></TabComp> <TabComp :tabArr="tabArr" showName="title" @tabChange="tabChange" cbName="type"></TabComp>
<TotalEvaluation v-if="tabIndex == 0"/> <TotalEvaluation v-if="pageType == 'whole'"/>
<ClassEvaluation v-if="tabIndex == 1"/> <ClassEvaluation v-if="pageType == 'class'"/>
<ScoreRecord v-if="tabIndex == 2"/> <ScoreRecord v-if="pageType == 'record'"/>
<SummaryEva v-if="tabIndex == 3"/> <SummaryEva v-if="pageType == 'summary'"/>
</div> </div>
</template> </template>
<script> <script>
import OfficeMenuConfig from '../../../../../../../../src/utils/officeMenuConfig';
import TabComp from '../common/tabComp.vue'; import TabComp from '../common/tabComp.vue';
import TotalEvaluation from './totalEva.vue'; import TotalEvaluation from './totalEva.vue';
import ClassEvaluation from './classEva.vue'; import ClassEvaluation from './classEva.vue';
@ -18,18 +19,43 @@
return { return {
showLoading:true, showLoading:true,
tabIndex:0, tabIndex:0,
tabArr: [ pageType:"",
{title: "整体评价"}, wholeAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSearch", "wholeEvaluationResult"]),
{title: "班级评价"}, classAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSearch", "classEvaluationResult"]),
{title: "打分记录"}, recordAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSearch", "ratingScoringRecord"]),
{title: "汇总评价"}, summaryAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSum"]),
], tabArr: [],
}
},
created(){
if(this.wholeAdmin){
this.tabArr.push(
{title: "整体评价",type:"whole"}
)
}
if(this.classAdmin){
this.tabArr.push(
{title: "班级评价",type:"class"}
)
}
if(this.recordAdmin){
this.tabArr.push(
{title: "打分记录",type:"record"}
)
}
if(this.summaryAdmin){
this.tabArr.push(
{title: "汇总评价",type:"summary"}
)
}
if(this.tabArr.length > 0){
this.pageType = this.tabArr[0].type;
} }
}, },
methods:{ methods:{
tabChange:function (param) { tabChange:function (param) {
if (this.tabIndex != param.index) { if (this.pageType != param.cbName) {
this.tabIndex = param.index; this.pageType = param.cbName;
} }
} }
}, },

Loading…
Cancel
Save