123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471 |
- <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">
- <el-button @click="logout">
- 退出
- </el-button>
- </div>
- <div class="admin-wel">
- <span>您好!检测单位--{{dwname}}</span>
- </div>
- </el-header>
- <!--页面主体部分-->
- <el-container>
- <!--页面侧边栏(左边)-->
- <el-aside style="width: 13.125rem;">
- <!-- 页面左侧菜单区域-->
- <el-menu
- :default-active="$route.path"
- background-color="#EEF1F6"
- text-color="#48576a"
- active-text-color="#31B404"
- :collapse-transition="false"
- :router="true"
- >
- <!-- <el-menu-item index="/jc/workbench">
- <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-footer id="footer">
- <p>主办单位:安徽省农业农村厅</p>
- <p>技术支持:安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
- </el-footer>
- </el-container>
- </div>
- </template>
- <script>
- export default {
- name: 'jc',
- data () {
- return {
- lastTime: null, // 最后一次点击的时间
- currentTime: null, // 当前点击的时间
- timeOut: 30 * 60 * 1000, // 设置超时时间: 30分钟
- /** tabs标签相关属性 */
- // 当前打开的tabs名称
- activeTabas: '/jc',
- Tabs: [],
- // 左侧菜单数据
- menuList: [],
- dwname:''//账户名称
- }
- },
- watch: {
- /** 监听,当路由发生变化的时候执行(防止用户手动更换地址导致tabs的面板变动却不切换相应的tabs) */
- // '$route.path': function () {
- // var iindex = -1
- // var jindex = -1
- // for (let i = 0; i < this.menuList.length; i++) {
- // for (let j = 0; j < this.menuList[i].children.length; j++) {
- // if (this.menuList[i].children[j].path == this.$route.path) {
- // iindex = i
- // jindex = j
- // break
- // }
- // }
- // }
- // this.addTab(this.menuList[iindex].children[jindex].subMenuName, this.$route.path)
- // }
- },
- created () {
- this.lastTime = new Date().getTime() // 网页第一次打开时,记录当前时间
- // 保证admin中的页面刷新后重置到/admin路由下
- if (this.$route.path !== '/jc/workbench') this.$router.push('/jc/workbench')
- let groupname = window.sessionStorage.getItem('groupname')
- let data1 = []
- let data = [
- {
- subMenuName: '首页',
-
- children: [{
- id: '7-1',
- subMenuName: '控制台',
- path: '/jc/workbench'
- }
- ]
- },
- {
-
- subMenuName: '主体信息',
- children: [{
- id: '1-1',
- subMenuName: '信息维护',
- path: '/jc/subjectInformation'
- }
- ]
- },
- // {
- // // icon: 'el-icon-s-custom',
- // subMenuName: '牵头单位',
- // children: [
- // // {
- // // id: '2-1',
- // // subMenuName: '退回任务',
- // // path: '/admin/'
- // // },
- // {
- // id: '2-2',
- // subMenuName: '例行监测',
- // path: '/jc/routineMonitorqt'
- // }
- // ,{
- // id: '2-3',
- // subMenuName: '专项监测',
- // path: '/jc/specialMonitorqt'
- // },
- // // {
- // // id: '2-5',
- // // subMenuName: '监测信息汇总',
- // // path: '/admin/'
- // // },{
- // // id: '2-6',
- // // subMenuName: '承担任务报告下载',
- // // path: '/admin/'
- // // },{
- // // id: '2-7',
- // // subMenuName: '项目总结报告上传',
- // // path: '/admin/'
- // // },{
- // // id: '2-8',
- // // subMenuName: '项目总结报告管理',
- // // path: '/admin/'
- // // },{
- // // id: '2-9',
- // // subMenuName: '系统报表',
- // // path: '/admin/'
- // // }
- // ]
- // },
- {
- // icon: 'el-icon-s-data',
- subMenuName: '承担单位',
- children: [
- // {
- // id: '3-1',
- // subMenuName: '退回任务',
- // path: '/admin/'
- // },
- // {
- // id: '3-2',
- // subMenuName: '抽样计划',
- // path: '/admin/'
- // },
- {
- id: '3-3',
- subMenuName: '例行监测',
- path: '/jc/routineMonitor'
- },
- {
- id: '3-4',
- subMenuName: '专项监测',
- path: '/jc/specialMonitorcd'
- }
- ,{
- id: '3-5',
- subMenuName: '退回任务',
- path: '/jc/returnTaskcd'
- },
- //{
- // id: '3-6',
- // subMenuName: '报告汇总',
- // path: '/admin/'
- // },{
- // id: '3-7',
- // subMenuName: '问题单据',
- // path: '/admin/'
- // },{
- // id: '3-8',
- // subMenuName: '委托检测',
- // path: '/admin/'
- // },{
- // id: '3-9',
- // subMenuName: '复检任务',
- // path: '/admin/'
- // },
- ]
- },]
- this.menuList = data
- this.getOrganization()
- },
- mounted:function(){
- this.addTab("首页",'/jc/workbench')
- this.getOrganization()
- },
- methods: {
- async getOrganization() {
- const result = await this.$http.post('getOrganization')
-
- this.dwname = result.data.data.user_id.name
- console.log(this.dwname)
- },
- 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;
- // }
-
- // .admin-logo-container {
- // // 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: 15px;
- }
- }
- .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;
- }
- .admin-wel{
- display:flex
- }
- /deep/ #footer {
- // display: flex;
- // flex-direction: row;
- // position: absolute;
- // bottom: 0px;
- // background-color: #5087bd;
- color: #413b3b;
- width: 100%;
- text-align: center;
- font-size: .875rem;
- // height: 6.25rem;
- // // padding-top: 5px;
- // // opacity: 0.6;
- font-weight: 550;
- margin-bottom: 1%;
- // font: 24px bold #0055ff;
- }
- </style>
|