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.
345 lines
8.9 KiB
345 lines
8.9 KiB
<template>
|
|
<div class="navbar">
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
|
@toggleClick="toggleSideBar" />
|
|
|
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
|
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
|
|
|
|
<div class="right-menu">
|
|
<template v-if="device !== 'mobile'">
|
|
|
|
<el-button
|
|
v-hasPermi="['system:merchant:onLineMerchant']"
|
|
type="primary" icon="" size="small" style="margin-right:24px" @click="merchantDialogStates.visible = true">
|
|
商户余额
|
|
</el-button>
|
|
|
|
<el-button
|
|
v-hasPermi="['carddealer:carddealer:onLineCarddealer']"
|
|
type="primary" icon="" size="small" style="margin-right:24px" @click="dialogVisible = true">
|
|
码商押金
|
|
</el-button>
|
|
|
|
<el-button type="primary" icon="" size="small" style="margin-right:24px" @click="goDataView"
|
|
v-hasPermi="['data-view']">数据看板</el-button>
|
|
|
|
<el-switch :value="autoRefresh" :inactive-text="autoRefresh ? `自动刷新: (${autoRefreshCountdown}S)` : '自动刷新: '"
|
|
@change="onAutoRefreshChanged" style="margin-right: 14px;" />
|
|
|
|
<!-- <search id="header-search" class="right-menu-item" />
|
|
|
|
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
|
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
|
</el-tooltip>
|
|
|
|
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
|
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
|
</el-tooltip> -->
|
|
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
|
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
|
</el-tooltip> -->
|
|
|
|
</template>
|
|
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
<div class="avatar-wrapper flex">
|
|
<img :src="avatar" class="user-avatar">
|
|
<span class="nickName">{{ user.nickName }}</span>
|
|
<i class="el-icon-caret-bottom" />
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<router-link to="/user/profile">
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
</router-link>
|
|
<!-- <el-dropdown-item @click.native="setting = true">
|
|
<span>布局设置</span>
|
|
</el-dropdown-item> -->
|
|
<el-dropdown-item divided @click.native="logout">
|
|
<span>退出登录</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
<el-dialog title="码商押金" :visible.sync="dialogVisible" width="20%">
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column :label="'名称'" align="center" prop="username" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span style="color:#333">{{ scope.row.username }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="'押金'" align="center" prop="margin" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span :style="{ color: scope.row.balanceWarning === 1 ? '#FF3535' : '#30C17B' }">
|
|
{{ NumberDiv(scope.row.margin, 100) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="商户余额" :visible.sync="merchantDialogStates.visible" width="20%">
|
|
<el-table :data="merchantDialogStates.data" style="width: 100%">
|
|
<el-table-column label="名称" align="center" prop="username" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span style="color:#333">{{ scope.row.username }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="余额" align="center" prop="balance" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span :style="{ color: scope.row.balanceWarning === 1 ? '#FF3535' : '#30C17B' }">
|
|
{{ NumberDiv(scope.row.balance, 100) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
import TopNav from '@/components/TopNav'
|
|
import Hamburger from '@/components/Hamburger'
|
|
import Screenfull from '@/components/Screenfull'
|
|
import SizeSelect from '@/components/SizeSelect'
|
|
import Search from '@/components/HeaderSearch'
|
|
import RuoYiGit from '@/components/RuoYi/Git'
|
|
import RuoYiDoc from '@/components/RuoYi/Doc'
|
|
import { getUserProfile } from "@/api/system/user";
|
|
import { common_api } from "@/api/form";
|
|
import { onLineMerchant } from '@/api/merchant/merchant'
|
|
|
|
export default {
|
|
components: {
|
|
Breadcrumb,
|
|
TopNav,
|
|
Hamburger,
|
|
Screenfull,
|
|
SizeSelect,
|
|
Search,
|
|
RuoYiGit,
|
|
RuoYiDoc
|
|
},
|
|
|
|
|
|
data() {
|
|
return {
|
|
user: {},
|
|
dialogVisible: false,
|
|
tableData: [],
|
|
timer: null,
|
|
// 商户余额状态
|
|
merchantDialogStates: {
|
|
// 是否可见
|
|
visible: false,
|
|
// 数据
|
|
data: [],
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'sidebar',
|
|
'avatar',
|
|
'name',
|
|
'device',
|
|
'autoRefresh',
|
|
'autoRefreshCountdown',
|
|
]),
|
|
setting: {
|
|
get() {
|
|
return this.$store.state.settings.showSettings
|
|
},
|
|
set(val) {
|
|
this.$store.dispatch('settings/changeSetting', {
|
|
key: 'showSettings',
|
|
value: val
|
|
})
|
|
}
|
|
},
|
|
topNav: {
|
|
get() {
|
|
return this.$store.state.settings.topNav
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getUser();
|
|
this.getList();
|
|
this.secondMethod()
|
|
},
|
|
methods: {
|
|
goDataView() {
|
|
const href = this.$router.resolve({
|
|
path: '/data-view',
|
|
params: {
|
|
fullscreen: true,
|
|
}
|
|
})
|
|
window.open(href.href, '_blank')
|
|
},
|
|
secondMethod() {
|
|
// this.timer = setInterval(() => {
|
|
// this.getList();
|
|
// }, 30000)
|
|
},
|
|
getList() {
|
|
common_api.onLineCarddealer().then((response) => {
|
|
this.tableData = response.data
|
|
});
|
|
onLineMerchant()
|
|
.then(res => {
|
|
this.merchantDialogStates.data = res.data
|
|
})
|
|
},
|
|
// 改变自动刷新的状态
|
|
onAutoRefreshChanged(value) {
|
|
if (value) {
|
|
this.secondMethod()
|
|
} else {
|
|
clearInterval(this.timer)
|
|
}
|
|
this.$store.commit('app/SET_AUTO_REFRESH', value)
|
|
|
|
},
|
|
getUser() {
|
|
getUserProfile().then(response => {
|
|
this.user = response.data;
|
|
});
|
|
},
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
async logout() {
|
|
this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
location.href = '/login';
|
|
})
|
|
}).catch(() => { });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-dialog:not(.is-fullscreen) {
|
|
margin-top: 21vh !important;
|
|
}
|
|
|
|
::v-deep .el-dialog {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
padding-top: 0;
|
|
overflow-y: scroll;
|
|
max-height: 360px;
|
|
}
|
|
|
|
.navbar {
|
|
height: 50px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
|
|
.hamburger-container {
|
|
line-height: 46px;
|
|
height: 100%;
|
|
float: left;
|
|
cursor: pointer;
|
|
transition: background .3s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .025)
|
|
}
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
float: left;
|
|
}
|
|
|
|
.topmenu-container {
|
|
position: absolute;
|
|
left: 50px;
|
|
}
|
|
|
|
.errLog-container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.right-menu {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.right-menu-item {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
color: #5a5e66;
|
|
vertical-align: text-bottom;
|
|
|
|
&.hover-effect {
|
|
cursor: pointer;
|
|
transition: background .3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .025)
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 30px;
|
|
|
|
.nickName {
|
|
font-size: 13px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
margin-top: 5px;
|
|
position: relative;
|
|
|
|
.user-avatar {
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 20px;
|
|
font-size: 12px;
|
|
color: #C0C8D3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|