<template>
|
<!-- <div
|
class="demo-navbar-user pl10 ml10 border-left pr"
|
@mouseenter="openQuick"
|
@mouseleave="closeQuick"
|
v-show="newList.length"
|
>
|
<span class="cursor-pointer">应用中心</span>
|
<div
|
class="border-left quick-menu"
|
:style="isOpenQuick?'height:100%;':'height:0%;'"
|
>
|
<perfect-scrollbar :options="{ suppressScrollX: true, wheelPropagation: true }" class="clients-scroll">
|
<div class="quick-btn" :class="isOpenQuick?'active':''" >应用中心</div>
|
<ul>
|
<li
|
class="quick-item"
|
v-for="(iteam,index) in newList"
|
:key="index"
|
>
|
<a href="javascript:void(0)"
|
@click="openModule(iteam)"
|
class="card card-hover text-dark my-2 pt5"
|
>
|
<img
|
:src="`/static/img/application_center_icon/${iteam.state === 1?iteam.module:iteam.module+'_disabled'}.png`"
|
:alt="iteam.module"
|
:onerror="noneImg"
|
width="50px"
|
/>
|
<h5 class="mt-2 mb-2" :title="iteam.module">{{iteam.name}}</h5>
|
</a>
|
</li>
|
</ul>
|
</perfect-scrollbar>
|
</div>
|
</div>-->
|
<b-nav-item-dropdown no-caret :right="!isRTL" class="demo-navbar-notifications mr-lg-2">
|
<template slot="button-content">
|
<!-- <i class="ion ion-md-notifications-outline navbar-icon align-middle"></i> -->
|
<i class="ion ion-md-apps navbar-icon align-middle f22"></i>
|
<!-- <span class="badge badge-danger badge-dot indicator"></span> -->
|
<span class="d-lg-none align-middle"> 应用中心</span>
|
</template>
|
|
<!-- <div class="bg-primary text-center text-white font-weight-bold p-3">
|
快捷跳转
|
</div>-->
|
<div class="row p-2 pt-3">
|
<div class="col-4 p-2" v-for="(iteam,index) in applicationList" :key="index">
|
<a
|
href="javascript:void(0)"
|
class="quick-item align-items-center"
|
@click="openModule(iteam)"
|
>
|
<div>
|
<img
|
style="height:30%;width:30%;"
|
:src="`/static/img/application_center_icon/${iteam.module+'_s'}.png`"
|
>
|
</div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">{{iteam.name}}</div>
|
</div>
|
</a>
|
</div>
|
<!-- <div class="col-4 p-2">
|
<a href="javascript:void(0)" class="quick-item align-items-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">考勤系统</div>
|
</div>
|
</a>
|
</div>-->
|
<!-- <div class="col-4 p-2">
|
<div href="javascript:void(0)" class="align-items-center text-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">统计分析</div>
|
</div>
|
</div>
|
</div>-->
|
<!-- <div class="col-4 p-2">
|
<div href="javascript:void(0)" class="align-items-center text-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">地图检索</div>
|
</div>
|
</div>
|
</div>-->
|
<!-- <div class="col-4 p-2">
|
<div href="javascript:void(0)" class="align-items-center text-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">特征检索</div>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
<hr>
|
<!-- <div class="row p-2 pb-3">
|
<div class="col-4 p-2">
|
<a href="javascript:void(0)" class="quick-item align-items-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">人员管理</div>
|
</div>
|
</a>
|
</div>
|
<div class="col-4 p-2">
|
<div href="javascript:void(0)" class="align-items-center text-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">设备管理</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-4 p-2">
|
<div href="javascript:void(0)" class="align-items-center text-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced pt10">
|
<div class="text-dark">系统管理</div>
|
</div>
|
</div>
|
</div>
|
</div>-->
|
<!-- <b-list-group >
|
<b-list-group-item href="javascript:void(0)" class="media d-flex align-items-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-power bg-danger border-0 text-white"></div>
|
<div class="media-body line-height-condenced">
|
<div class="text-dark">Server restarted</div>
|
<div class="text-light small mt-1">
|
19h ago
|
</div>
|
</div>
|
</b-list-group-item>
|
|
<b-list-group-item href="javascript:void(0)" class="media d-flex align-items-center">
|
<div class="ui-icon ui-icon-sm ion ion-md-warning bg-warning border-0 text-dark"></div>
|
<div class="media-body line-height-condenced ml-3">
|
<div class="text-dark">99% server load</div>
|
<div class="text-light small mt-1">
|
Etiam nec fringilla magna. Donec mi metus.
|
</div>
|
<div class="text-light small mt-1">
|
20h ago111111111111111111
|
</div>
|
</div>
|
</b-list-group-item>
|
</b-list-group>-->
|
<!-- <a href="javascript:void(0)" class="d-block text-center text-light small p-2 my-1">Show all notifications</a> -->
|
<!-- <div class="bg-primary text-center text-white font-weight-bold">
|
<a href="javascript:void(0)" class="d-block text-white text-center p-2">更多</a>
|
</div>-->
|
</b-nav-item-dropdown>
|
</template>
|
<style src="@/vendor/styles/pages/clients.scss" lang="scss"></style>
|
<script>
|
import { mapActions } from 'vuex'
|
import { getApplicationList } from '@/server/common'
|
import PerfectScrollbar from '@/vendor/libs/perfect-scrollbar/PerfectScrollbar'
|
export default {
|
name: 'quick-menu-button',
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
applicationList: [],
|
isOpenQuick: false,
|
timer: null
|
}
|
},
|
computed: {
|
newList() {
|
return this.applicationList.reduce((list, item) => {
|
if (item.state === 1 && item.module !== this.$store.state.menuName) {
|
list.push(item)
|
}
|
return list
|
}, [])
|
}
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
/* 获取应用列表 */
|
async getApplicationList() {
|
let result = await getApplicationList({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id
|
})
|
if (result && !result.error) {
|
// this.applicationList = result
|
|
let nums = new Array(99)
|
for (let mm = 0; mm < result.length; mm++) {
|
if (result[mm].state === 1) {
|
if (nums[result[mm].id] === result[mm].id) {
|
} else {
|
this.applicationList.push(result[mm])
|
nums[result[mm].id] = result[mm].id
|
}
|
}
|
}
|
//
|
} else if (result && result.msg) {
|
this.$toast({
|
message: result.msg ? result.msg : '报错了',
|
type: 'error'
|
})
|
}
|
},
|
openModule(data) {
|
if (!data || data.state !== 1) {
|
return false
|
}
|
this.openNewWindowtab(data.url)
|
},
|
openQuick() {
|
let count = 0
|
clearInterval(this.timer)
|
this.timer = setInterval(() => {
|
count++
|
if (count > 3) {
|
if (!this.isOpenQuick && this.newList.length) {
|
this.isOpenQuick = true
|
}
|
}
|
}, 100)
|
},
|
closeQuick() {
|
clearInterval(this.timer)
|
if (this.isOpenQuick && this.newList.length) {
|
this.isOpenQuick = false
|
}
|
}
|
},
|
created() {
|
this.getApplicationList()
|
},
|
components: {
|
PerfectScrollbar
|
}
|
}
|
</script>
|
<style lang="scss" scoped >
|
.quick-btn {
|
height: 65px;
|
line-height: 50px;
|
padding: 8px 10px;
|
transition: all 0.5s;
|
cursor: pointer;
|
}
|
.quick-btn.active {
|
color: #fff;
|
background-color: #28c3d7 !important;
|
}
|
.quick-menu {
|
position: fixed;
|
width: 100px;
|
right: 0;
|
top: 0px;
|
transition: all 0.5s;
|
height: 0;
|
background: #f8f8f8;
|
overflow: hidden;
|
}
|
.quick-menu ul,
|
li.quick-item {
|
list-style: none;
|
padding: 2px;
|
margin: 0px;
|
}
|
a.quick-item {
|
text-align: center;
|
display: block;
|
}
|
</style>
|
