|
|
@@ -0,0 +1,357 @@
|
|
|
+<template>
|
|
|
+ <div style="height: 100%; width: 100%;" @click="checkTimeOut()" @mouseenter="checkTimeOut()"
|
|
|
+ @mousemove="checkTimeOut()">
|
|
|
+ <el-container class="admin-container">
|
|
|
+ <!--页面头部-->
|
|
|
+ <el-header>
|
|
|
+ <div class="admin-logo-container">
|
|
|
+ <!--<img class="admin-logo" src="../assets/img/admin.jpg" alt="" > -->
|
|
|
+ <span>安徽省农产品质量安全监测系统-监管平台</span>
|
|
|
+ </div>
|
|
|
+ <div class="right-function-container"></div>
|
|
|
+ </el-header>
|
|
|
+ <!-- 页面个人中心 -->
|
|
|
+ <div class="header2">
|
|
|
+ <span class="hello">您好，监管部门！--{{name}}</span>
|
|
|
+ <el-button class="btn" @click="userInform()" size="mini">个人信息</el-button>
|
|
|
+ <el-button class="btn" @click="logout" size="mini">退出</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!--页面主体部分-->
|
|
|
+ <el-container>
|
|
|
+ <!--页面侧边栏(左边)-->
|
|
|
+ <el-aside style="width: 210px;">
|
|
|
+ <!-- 页面左侧菜单区域-->
|
|
|
+ <el-menu :default-active="$route.path" background-color="#EEF1F6" text-color="#48576a"
|
|
|
+ active-text-color="#31B404" :collapse-transition="false" :router="true">
|
|
|
+ <!-- :unique-opened="true" -->
|
|
|
+ <!-- <el-menu-item
|
|
|
+ index="/admin"
|
|
|
+ @click="addTab('系统首页', '/admin')">
|
|
|
+ <i class="el-icon-s-home" />
|
|
|
+ <span slot="title">系统首页</span>
|
|
|
+ </el-menu-item> -->
|
|
|
+ <!-- 一级菜单-->
|
|
|
+ <el-submenu :index="index+''" v-for="(item, index) in menuList" :key="index">
|
|
|
+ <!-- 一级菜单模板区-->
|
|
|
+ <template slot="title">
|
|
|
+ <!-- 图标-->
|
|
|
+ <i :class="item.icon" />
|
|
|
+ <!-- 文本-->
|
|
|
+ <span>{{ item.subMenuName }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 二级菜单-->
|
|
|
+ <el-menu-item :index="subItem.path+''" v-for="subItem in item.children" :key="subItem.id"
|
|
|
+ @click="addTab(subItem.subMenuName, subItem.path)">
|
|
|
+ <!-- 二级菜单模板区-->
|
|
|
+ <template slot="title">
|
|
|
+ <!-- 图标-->
|
|
|
+ <i class="el-icon-bangzhu" />
|
|
|
+ <!-- 文本-->
|
|
|
+ <span>{{ subItem.subMenuName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
+ </el-aside>
|
|
|
+ <!-- 页面主内容(右边)-->
|
|
|
+ <el-main>
|
|
|
+ <el-tabs v-model="activeTabas" type="card" @tab-remove="removeTab" @tab-click="tabClick">
|
|
|
+ <el-tab-pane v-for="item in Tabs" :key="item.name" :label="item.title" :name="item.name"
|
|
|
+ :closable="item.isClose">
|
|
|
+ <el-container>
|
|
|
+ <el-main>
|
|
|
+ <el-card shadow="always">
|
|
|
+ <!--内容显示-->
|
|
|
+ <router-view :key="item.name" />
|
|
|
+ </el-card>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'Admin',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ name:'',
|
|
|
+ lastTime: null, // 最后一次点击的时间
|
|
|
+ currentTime: null, // 当前点击的时间
|
|
|
+ timeOut: 30 * 60 * 1000, // 设置超时时间： 30分钟
|
|
|
+ /** tabs标签相关属性 */
|
|
|
+ // 当前打开的tabs名称
|
|
|
+ activeTabas: '/admin',
|
|
|
+ Tabs: [],
|
|
|
+ // 左侧菜单数据
|
|
|
+ menuList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getAccount()
|
|
|
+ this.lastTime = new Date().getTime() // 网页第一次打开时，记录当前时间
|
|
|
+ // 保证admin中的页面刷新后重置到/admin路由下
|
|
|
+ if (this.$route.path !== '/admin/routineMonitor') this.$router.push('/admin/routineMonitor')
|
|
|
+ let groupname = window.sessionStorage.getItem('groupname')
|
|
|
+ let data1 = []
|
|
|
+ let data = [
|
|
|
+ {
|
|
|
+ subMenuName: '系统介绍',
|
|
|
+ path: '/admin/systemIntro'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // icon: 'el-icon-user-solid',
|
|
|
+ subMenuName: '主体信息管理',
|
|
|
+ children: [{
|
|
|
+ id: '4-1',
|
|
|
+ subMenuName: '检测机构',
|
|
|
+ path: '/admin/getOrganization'
|
|
|
+ },{
|
|
|
+ id: '4-2',
|
|
|
+ subMenuName: '监管机构',
|
|
|
+ path: '/admin/getMonitor'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subMenuName: '监测任务',
|
|
|
+ children: [{
|
|
|
+ id: '5-1',
|
|
|
+ subMenuName: '例行监测',
|
|
|
+ path: '/admin/routineMonitor'
|
|
|
+ }, {
|
|
|
+ id: '5-2',
|
|
|
+ subMenuName: '专项监测',
|
|
|
+ path: '/admin/specialMonitor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5-3',
|
|
|
+ subMenuName: '监督抽查',
|
|
|
+ path: '/admin/checkMonitor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5-4',
|
|
|
+ subMenuName: '退回任务',
|
|
|
+ path: '/admin/retask'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ this.menuList = data
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getAccount() {
|
|
|
+ const result = await this.$http.post('getAccount')
|
|
|
+ this.name = result.data.data.name
|
|
|
+ console.log(this.name)
|
|
|
+ },
|
|
|
+ userInform() {
|
|
|
+ this.$router.push('getAccount')
|
|
|
+ },
|
|
|
+ handleOpen(index) {
|
|
|
+ console.log(index)
|
|
|
+ },
|
|
|
+ /** tabs标签相关函数 */
|
|
|
+ // tab切换时，动态的切换路由
|
|
|
+ tabClick(tab) {
|
|
|
+ if (this.$route.path == tab.name) return
|
|
|
+ this.$router.push(tab.name)
|
|
|
+ },
|
|
|
+ addTab(title, name) {
|
|
|
+ for (let i = 0; i < this.Tabs.length; i++) {
|
|
|
+ if (this.Tabs[i].name == name) {
|
|
|
+ this.activeTabas = name
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.Tabs.push({
|
|
|
+ title: title,
|
|
|
+ name: name,
|
|
|
+ isClose: 'closable'
|
|
|
+ })
|
|
|
+ this.activeTabas = name
|
|
|
+ },
|
|
|
+ removeTab(targetName) {
|
|
|
+ const tabs = this.Tabs
|
|
|
+ let activeName = this.activeTabas
|
|
|
+ if (activeName == targetName) {
|
|
|
+ tabs.forEach((tab, index) => {
|
|
|
+ if (tab.name == targetName) {
|
|
|
+ const nextTab = tabs[index + 1] || tabs[index - 1]
|
|
|
+ if (nextTab) {
|
|
|
+ activeName = nextTab.name
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.activeTabas = activeName
|
|
|
+ this.$router.push(activeName)
|
|
|
+ this.Tabs = tabs.filter(tab => tab.name !== targetName)
|
|
|
+ },
|
|
|
+ /** 设置用户为登出状态 */
|
|
|
+ async logout() {
|
|
|
+ // const formData = { 'token': window.sessionStorage.getItem('token') }
|
|
|
+ // // 提交登出请求
|
|
|
+ // const result = await this.$http.post('/loginOut', formData)
|
|
|
+ // if (result.data.code == 0) {
|
|
|
+ // 清除seesion信息
|
|
|
+ window.sessionStorage.clear()
|
|
|
+ this.$router.push('/login')
|
|
|
+ //}
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ async checkTimeOut() {
|
|
|
+ this.currentTime = new Date().getTime() // 记录这次点击的时间
|
|
|
+ // 如果当前页面不是登录，初始化界面就可以执行是否退出
|
|
|
+ if (!(this.$route.path == '/login')) {
|
|
|
+ /** 判断是否因为超时可以退出 */
|
|
|
+ // 判断时间是否过期（判断上次最后一次点击的时间和这次点击的时间间隔是否大于10分钟）
|
|
|
+ var isExit = this.currentTime - this.lastTime > this.timeOut
|
|
|
+ if (isExit) {
|
|
|
+ isExit = false
|
|
|
+ // 这里写状态已过期后执行的操作
|
|
|
+ this.lastTime = new Date().getTime() // 如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
|
|
|
+ this.$router.push('/login')
|
|
|
+ // 设置用户为登出状态
|
|
|
+ // const formData = {
|
|
|
+ // 'token': window.sessionStorage.getItem('token')
|
|
|
+ // }
|
|
|
+ // 提交登出请求
|
|
|
+ // const result = await this.$http.post('login_out', formData)
|
|
|
+ // if (result.data.code == 0) {
|
|
|
+ // // 清除seesion信息
|
|
|
+ // window.sessionStorage.removeItem('token')
|
|
|
+ // }
|
|
|
+ // this.$message({
|
|
|
+ // message: '长时间未操作，请重新登录',
|
|
|
+ // type: 'warning',
|
|
|
+ // showClose: true,
|
|
|
+ // center: true
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ /** 判断是否因为用户未登录可以退出 */
|
|
|
+ // const token = window.sessionStorage.getItem('token')
|
|
|
+ // if (token == null || token == undefined || token == '') {
|
|
|
+ // this.$router.push('/login')
|
|
|
+ // this.$message({
|
|
|
+ // message: '用户未登录，请重新登录',
|
|
|
+ // type: 'warning',
|
|
|
+ // showClose: true,
|
|
|
+ // center: true
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ this.lastTime = new Date().getTime() // 如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.lastTime = new Date().getTime() // 如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .admin-container {
|
|
|
+ height: 100%;
|
|
|
+ // overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main {
|
|
|
+ padding-top: 8px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .el-menu-item.is-active {
|
|
|
+
|
|
|
+ // background-color: #3ace04 !important;
|
|
|
+
|
|
|
+ // // background-color: #3ace04 !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // .admin-logo-container {
|
|
|
+ // border-color: #5EB9DE;
|
|
|
+ // border-right-width: 1px;
|
|
|
+ // border-right-style: solid;
|
|
|
+ // border-color: #5EB9DE;
|
|
|
+ // border-right-width: 1px;
|
|
|
+ // border-right-style: solid;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .admin-logo {
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 55px;
|
|
|
+ width: 55px;
|
|
|
+ /*自动等比缩放*/
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-header {
|
|
|
+ background-color: #145faa;
|
|
|
+ width: 100%;
|
|
|
+ color: white;
|
|
|
+ font-size: 25px;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .admin-logo-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-aside {
|
|
|
+ // width: 200px;
|
|
|
+ background-color: #EEF1F6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toggle-button-container {
|
|
|
+ width: 180px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .toggle-button {
|
|
|
+ // width: 50px;
|
|
|
+ // line-height: 60px;
|
|
|
+ // color: #fff;
|
|
|
+ // text-align: center;
|
|
|
+ // cursor: pointer;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .right-function-container {
|
|
|
+ width: 400px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+ .el-icon-s-custom{
|
|
|
+ padding: 5px;
|
|
|
+ float: right;
|
|
|
+ margin-top:10px;
|
|
|
+ }
|
|
|
+ .header2{
|
|
|
+ border: 0.5px solid rgb(233, 233, 233);
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .hello{
|
|
|
+ text-align:left;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ // margin-left: 5px;
|
|
|
+ // margin-top:2px;
|
|
|
+ // margin-bottom: 2px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+</style>
|
yyfang
