You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
17 KiB
420 lines
17 KiB
<template>
|
|
<div id="monitorCenter" class="monitor-center-style">
|
|
<img :src="topImgUrl"/>
|
|
<div class="page-left-style" :style="{width:leftWidth + '%'}">
|
|
<!--<div class="page-left-style">-->
|
|
<div class="page-title-style" :class="{'party-page-title-style':isPartyCenter}">
|
|
<span class="text">{{title}}</span>
|
|
</div>
|
|
<div class="page-menu-style">
|
|
<template v-for="menu in menuAry">
|
|
<div v-if="menu.title !== ''"
|
|
:class="'menu-item-style' + (!menu.disable && menuPath === menu.path?' menu-select-style':'') + (menu.disable?' disable-menu-style':'')"
|
|
@click="menuClick(menu)" :key="menu.path"
|
|
>
|
|
<span class="menu-title-style">{{menu.title}}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="page-right-style" :style="{width:rightWidth + '%'}">
|
|
<!--<div class="page-right-style">-->
|
|
<div v-if="showWorkBenchButton" class="bench-top-btn-box-style">
|
|
<BenchBtnBox iconType="icon-lingdangxiaoxi" title="消息处理" :count="msgCount"
|
|
@btnClick="onBtnClick('noticeRemind')"/>
|
|
<BenchBtnBox iconType="icon-youjian" title="邮件查看" :count="mailCount" @btnClick="onBtnClick('mail')"/>
|
|
<BenchBtnBox iconType="icon-caidan" title="更多应用" btnType="popover" ref="systemListRef">
|
|
<system-list
|
|
:crmData="systemData"
|
|
@accessSubsystem="onAccessSubsystem"
|
|
@servicePlatform="servicePlatform"
|
|
/>
|
|
</BenchBtnBox>
|
|
<BenchBtnBox iconType="icon-huanfu" title="版面设置" @btnClick="onBtnClick('setting')"/>
|
|
</div>
|
|
<span class="text"><Time/></span>
|
|
<span class="text">
|
|
<!-- <div class="back-style" title="回到首页" @click="toMainPage"><a-icon type="home" theme="filled" /></div>-->
|
|
<PersonInfo :operateType="2"/>
|
|
</span>
|
|
</div>
|
|
<FusionModalPanel v-bind="modalProps" @callback="onModalCallback">
|
|
<component
|
|
v-if="modalProps.show === true && modalUrl !== ''"
|
|
:is="com"
|
|
v-bind="params"
|
|
ref="modalPanel"
|
|
></component>
|
|
</FusionModalPanel>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Time from '../homePages/menuTop/time.vue';
|
|
import {Icon, Select} from 'ant-design-vue';
|
|
import {menuConfig} from '../../menuConfig';
|
|
import PersonInfo from '../homePages/menuTop/personInfo.vue';
|
|
import BenchBtnBox from './benchBtnBox.vue';
|
|
import GlobalParams from '../adminCenter/global_params';
|
|
const topImg01 = require('../../assets/images/secondPageTop01.png');
|
|
const topImg02 = require('../../assets/images/secondPageTop02.png');
|
|
const topImgPartyBuild = require('../../assets/images/topImgPartyBuild.png');
|
|
import FusionModalPanel from "../../../../components/common/fusionModal/FusionModalPanel";
|
|
import SystemList from "../adminCenter/SystemList";
|
|
export default{
|
|
data(){
|
|
return {
|
|
loading: true,
|
|
// menuAry: [{id: 1, value: "校园日常情况",path:"/monitorCenter/daily"}, {id: 2, value: "信息化应用情况",path:"/monitorCenter/information"}],
|
|
menuAry: [],
|
|
menuPath: "",
|
|
title: "",
|
|
rightWidth: 40,
|
|
screenWidth: document.body.clientWidth,
|
|
topImgUrl: "",
|
|
msgCount: 0,//消息徽标数
|
|
totalCount: 0,//总待办数量
|
|
mailCount: 0,//邮件徽标数
|
|
clickItem: "",
|
|
modalUrl: "",
|
|
params: null,
|
|
modalProps: {
|
|
modalTitle: "",
|
|
show: false,
|
|
CancelButton: true,
|
|
OKButton: true,
|
|
},
|
|
systemData: [],
|
|
layoutData: {},
|
|
showWorkBenchButton: true,//是否展示工作台顶部操作按钮
|
|
isPartyCenter: false,
|
|
}
|
|
},
|
|
computed: {
|
|
leftWidth: function () {
|
|
return 100 - this.rightWidth;
|
|
},
|
|
com: function () {
|
|
let url = this.modalUrl;
|
|
return () => import(`@/views/screenAdaptation/pages/adminCenter/${url}`);
|
|
},
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler(val, oldval){
|
|
this.emitRouteChange(val.path);
|
|
if (val.path === '/partyCenter/party') {
|
|
this.topImgUrl = topImgPartyBuild
|
|
this.isPartyCenter = true
|
|
} else {
|
|
this.isPartyCenter = false
|
|
}
|
|
},
|
|
// 深度观察监听
|
|
deep: true
|
|
}
|
|
},
|
|
beforeMount(){
|
|
//解决二级页面刷新后，顶部导航菜单消失问题
|
|
let menuOptions = this.$store.state.userStore.menuOptions;
|
|
if (menuOptions) {
|
|
this.title = menuOptions.title;
|
|
this.menuAry = menuOptions.menuAry;
|
|
this.menuPath = menuOptions.menuPath;
|
|
}
|
|
},
|
|
mounted(){
|
|
this.getHref()
|
|
this.emitRouteChange(this.$route.path);
|
|
this.$bus.on("topCountChange", this.changeCount);
|
|
this.$bus.on("totalCountChange", this.changeTotalCount);
|
|
this.$bus.on("systemDataChange", this.changeSystemData);
|
|
this.$bus.on("layOutSettingChange", this.changeLayOutSetting);
|
|
this.$bus.on("toDoBtnClick", this.toDoBtnClick);
|
|
},
|
|
methods: {
|
|
getHref(){
|
|
let href = window.location.href
|
|
href = window.location.href.slice(window.location.href.indexOf('#') + 1)
|
|
if (href === '/partyCenter/party') {
|
|
this.topImgUrl = topImgPartyBuild
|
|
this.isPartyCenter = true
|
|
} else {
|
|
this.isPartyCenter = false
|
|
}
|
|
},
|
|
filterMenuAry: function (path) {
|
|
const menuAry = menuConfig.filter(item => {
|
|
return item.path === path;
|
|
});
|
|
let childrenMenu = [];
|
|
if (menuAry && menuAry.length > 0) {
|
|
this.title = menuAry[0].title;
|
|
childrenMenu = menuAry[0].children && menuAry[0].children.length > 0 ? menuAry[0].children : [];
|
|
}
|
|
return childrenMenu;
|
|
},
|
|
//顶部子路由地址跳转
|
|
emitRouteChange: function (routePath) {
|
|
//let routePath = this.$route.path;
|
|
if (routePath && routePath !== "") {
|
|
let routePathAry = routePath.split("/");
|
|
if (routePathAry.length > 0) {
|
|
//过滤掉空元素
|
|
routePathAry = routePathAry.filter(path => {
|
|
return path !== ""
|
|
})
|
|
}
|
|
if (routePathAry.length > 1) {
|
|
//子路由
|
|
this.menuPath = routePath;
|
|
this.changeBackImg(this.menuPath);
|
|
this.$emit("modelChange", this.menuPath);
|
|
return;
|
|
}
|
|
|
|
//二级菜单路由重组
|
|
routePath = "/" + routePathAry[0];
|
|
}
|
|
this.menuAry = this.filterMenuAry(routePath);
|
|
this.menuPath = this.menuAry && this.menuAry.length > 0 ? this.menuAry[0].path : "";
|
|
this.$store.commit('userStore/setMenuOptions', {
|
|
title: this.title,
|
|
menuAry: this.menuAry,
|
|
menuPath: this.menuPath
|
|
});
|
|
this.changeBackImg(this.menuPath);
|
|
this.$emit("modelChange", this.menuPath);
|
|
},
|
|
menuClick: function (menu) {
|
|
if (!menu.disable) {
|
|
this.menuPath = menu.path;
|
|
this.changeBackImg(this.menuPath);
|
|
this.$emit("modelChange", this.menuPath);
|
|
}
|
|
},
|
|
changeBackImg: function (path) {
|
|
if (path.indexOf("workBench") > 0) {
|
|
//工作台
|
|
if (path === "/workBench/application") {
|
|
//更多应用
|
|
this.rightWidth = 30;
|
|
this.topImgUrl = topImg01;
|
|
this.showWorkBenchButton = false;
|
|
} else {
|
|
this.rightWidth = 40;
|
|
this.topImgUrl = topImg02;
|
|
this.showWorkBenchButton = true;
|
|
}
|
|
} else {
|
|
this.rightWidth = 30;
|
|
this.topImgUrl = topImg01;
|
|
this.showWorkBenchButton = false;
|
|
}
|
|
},
|
|
toMainPage: function () {
|
|
this.$router.replace({path: '/dynamic'});
|
|
},
|
|
//改变顶部按钮徽标数量
|
|
changeCount: function (config) {
|
|
this.msgCount = config[0].count;
|
|
this.mailCount = config[0].count;
|
|
},
|
|
//总待办数
|
|
changeTotalCount: function (totalCount) {
|
|
this.totalCount = totalCount;
|
|
},
|
|
//配置更多应用
|
|
changeSystemData: function (config) {
|
|
this.systemData = config;
|
|
},
|
|
//版面设置信息
|
|
changeLayOutSetting: function (config) {
|
|
this.layoutData = config;
|
|
},
|
|
//待办点击回调
|
|
toDoBtnClick: function (config) {
|
|
this.onBtnClick("noticeRemind", config)
|
|
},
|
|
//导航菜单点击回调
|
|
onBtnClick: function (type, extraParams = null) {
|
|
this.clickItem = type;
|
|
switch (type) {
|
|
case "noticeRemind":
|
|
this.params = {message: this.msgCount, todo: this.totalCount};
|
|
if (extraParams !== null) {
|
|
this.params.messageType = extraParams.messageType;
|
|
this.params.todoType = extraParams.todoType;
|
|
}
|
|
this.$set(this.modalProps, "modalTitle", "消息");
|
|
this.$set(this.modalProps, "modalWidth", "800px");
|
|
this.$set(this.modalProps, "modalClassName", "notice-style");
|
|
this.$set(this.modalProps, "OKButton", false);
|
|
this.$set(this.modalProps, "show", true);
|
|
this.modalUrl = "messageProcessing/MessageProcessingMain.vue";
|
|
break;
|
|
case "mail":
|
|
this.params = {mailCount: this.mailCount};
|
|
this.$set(this.modalProps, "modalTitle", "邮件");
|
|
this.$set(this.modalProps, "modalWidth", "794px");
|
|
this.$set(this.modalProps, "OKButton", false);
|
|
this.$set(this.modalProps, "show", true);
|
|
this.modalUrl = "mail/MailMain.vue";
|
|
break;
|
|
case "setting":
|
|
this.$set(this.modalProps, "modalTitle", "版面设置");
|
|
this.$set(this.modalProps, "modalWidth", "772px");
|
|
this.$set(this.modalProps, "modalClassName", "");
|
|
this.$set(this.modalProps, "OKButton", true);
|
|
this.$set(this.modalProps, "show", true);
|
|
this.params = {layout: this.layoutData};
|
|
this.modalUrl =
|
|
"ModuleAndLaySetting.vue";
|
|
break;
|
|
case "driver":
|
|
break;
|
|
}
|
|
},
|
|
onModalCallback: function (type) {
|
|
if (type === "ok") {
|
|
if (this.clickItem === "setting" && this.$refs.modalPanel) {
|
|
this.$refs.modalPanel.getModuleAndLayoutAndTheme();
|
|
}
|
|
this.$set(this.modalProps, "show", false);
|
|
} else {
|
|
this.clickItem = "";
|
|
this.$set(this.modalProps, "show", false);
|
|
}
|
|
},
|
|
onAccessSubsystem: function (systemData) {
|
|
this.$refs.systemListRef.clicked = false;
|
|
this.$bus.emit("accessSubsystem", systemData);
|
|
},
|
|
//跳转综合服务平台管理中心
|
|
servicePlatform: function (systemData) {
|
|
this.$refs.systemListRef.clicked = false;
|
|
//this.$router.replace({name:"servicePlatform",params:{id:systemData.id,name:systemData.title}});
|
|
this.$router.push({
|
|
path: '/workBench/servicePlatform/:id/:name',
|
|
name: 'servicePlatform',
|
|
params: {id: systemData.id, name: systemData.title}
|
|
});
|
|
}
|
|
},
|
|
beforeDestroy(){
|
|
this.$bus.off("topCountChange", this.changeCount)
|
|
this.$bus.off("totalCountChange", this.changeTotalCount)
|
|
this.$bus.off("systemDataChange", this.changeSystemData)
|
|
this.$bus.off("layOutSettingChange", this.changeLayOutSetting)
|
|
this.$bus.off("toDoBtnClick", this.toDoBtnClick)
|
|
},
|
|
components: {
|
|
AIcon: Icon,
|
|
ASelect: Select,
|
|
ASelectOption: Select.Option,
|
|
Time,
|
|
PersonInfo,
|
|
BenchBtnBox,
|
|
FusionModalPanel,
|
|
SystemList
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "../../assets/scss/style";
|
|
|
|
.monitor-center-style {
|
|
width: 100%;
|
|
height: 130px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
/*background-image: url('../../assets/images/secondPageTop01.png');*/
|
|
.page-left-style {
|
|
/*width: calc(100% - 480px);*/
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
.page-title-style {
|
|
font-size: 18px;
|
|
width: 450px;
|
|
height: 126px;
|
|
line-height: 126px;
|
|
text-align: center;
|
|
color: white;
|
|
.text {
|
|
display: inline-block;
|
|
font-family: "Microsoft YaHei";
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
.party-page-title-style {
|
|
font-weight: 550;
|
|
color: #FFF799 !important;
|
|
}
|
|
.page-menu-style {
|
|
font-size: 18px;
|
|
width: calc(100% - 450px);
|
|
height: 96px;
|
|
line-height: 96px;
|
|
text-align: center;
|
|
transform: skewX(-35deg);
|
|
margin-left: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
.menu-item-style {
|
|
padding: 20px 20px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
.menu-title-style {
|
|
transform: skewX(35deg);
|
|
}
|
|
}
|
|
.menu-select-style {
|
|
background-color: #227cb5;
|
|
border: 1px solid $color-default-bright;
|
|
cursor: default;
|
|
}
|
|
.disable-menu-style {
|
|
cursor: auto;
|
|
}
|
|
}
|
|
}
|
|
.page-right-style {
|
|
position: absolute;
|
|
right: 0;
|
|
font-size: 18px;
|
|
/*width: 450px;*/
|
|
height: 66px;
|
|
line-height: 66px;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 10px;
|
|
.bench-top-btn-box-style {
|
|
display: flex;
|
|
height: 54px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
.text {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|