admin.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <div style="height: 100%; width: 100%;" @click="checkTimeOut()" @mouseenter="checkTimeOut()"
  3. @mousemove="checkTimeOut()">
  4. <el-container class="admin-container">
  5. <!--页面头部(上边)-->
  6. <el-header>
  7. <div class="admin-logo-container">
  8. <!-- <img
  9. class="admin-logo"
  10. src="../assets/img/admin.jpg"
  11. alt=""
  12. > -->
  13. <span>安徽省农产品质量安全监测系统</span>
  14. </div>
  15. <div class="right-function-container">
  16. <el-button @click="logout">
  17. 退 出
  18. </el-button>
  19. </div>
  20. </el-header>
  21. <!--页面主体部分-->
  22. <el-container>
  23. <!--页面侧边栏(左边)-->
  24. <el-aside style="width: 210px;">
  25. <!-- 页面左侧菜单区域-->
  26. <el-menu :default-active="$route.path" background-color="#EEF1F6" text-color="#48576a"
  27. active-text-color="#31B404" :unique-opened="true" :collapse-transition="false" :router="true">
  28. <!-- <el-menu-item
  29. index="/admin"
  30. @click="addTab('系统首页', '/admin')"
  31. >
  32. <i class="el-icon-s-home" />
  33. <span slot="title">系统首页</span>
  34. </el-menu-item> -->
  35. <!-- 一级菜单-->
  36. <el-submenu :index="index+''" v-for="(item, index) in menuList" :key="index">
  37. <!-- 一级菜单模板区-->
  38. <template slot="title">
  39. <!-- 图标-->
  40. <i :class="item.icon" />
  41. <!-- 文本-->
  42. <span>{{ item.subMenuName }}</span>
  43. </template>
  44. <!-- 二级菜单-->
  45. <el-menu-item :index="subItem.path+''" v-for="subItem in item.children" :key="subItem.id"
  46. @click="addTab(subItem.subMenuName, subItem.path)">
  47. <!-- 二级菜单模板区-->
  48. <template slot="title">
  49. <!-- 图标-->
  50. <i class="el-icon-bangzhu" />
  51. <!-- 文本-->
  52. <span>{{ subItem.subMenuName }}</span>
  53. </template>
  54. </el-menu-item>
  55. </el-submenu>
  56. </el-menu>
  57. </el-aside>
  58. <!-- 页面主内容(右边)-->
  59. <el-main>
  60. <el-tabs v-model="activeTabas" type="card" @tab-remove="removeTab" @tab-click="tabClick">
  61. <el-tab-pane v-for="item in Tabs" :key="item.name" :label="item.title" :name="item.name"
  62. :closable="item.isClose">
  63. <el-container>
  64. <el-main>
  65. <el-card shadow="always">
  66. <!-- 内容显示-->
  67. <router-view :key="item.name" />
  68. </el-card>
  69. </el-main>
  70. </el-container>
  71. </el-tab-pane>
  72. </el-tabs>
  73. </el-main>
  74. </el-container>
  75. </el-container>
  76. </div>
  77. </template>
  78. <script>
  79. export default {
  80. name: 'Admin',
  81. data() {
  82. return {
  83. lastTime: null, // 最后一次点击的时间
  84. currentTime: null, // 当前点击的时间
  85. timeOut: 30 * 60 * 1000, // 设置超时时间: 30分钟
  86. /** tabs标签相关属性 */
  87. // 当前打开的tabs名称
  88. activeTabas: '/admin',
  89. Tabs: [],
  90. // 左侧菜单数据
  91. menuList: []
  92. }
  93. },
  94. watch: {
  95. /** 监听,当路由发生变化的时候执行(防止用户手动更换地址导致tabs的面板变动却不切换相应的tabs) */
  96. '$route.path': function() {
  97. var iindex = -1
  98. var jindex = -1
  99. for (let i = 0; i < this.menuList.length; i++) {
  100. for (let j = 0; j < this.menuList[i].children.length; j++) {
  101. if (this.menuList[i].children[j].path == this.$route.path) {
  102. iindex = i
  103. jindex = j
  104. break
  105. }
  106. }
  107. }
  108. this.addTab(this.menuList[iindex].children[jindex].subMenuName, this.$route.path)
  109. }
  110. },
  111. created() {
  112. this.lastTime = new Date().getTime() // 网页第一次打开时,记录当前时间
  113. // 保证admin中的页面刷新后重置到/admin路由下
  114. if (this.$route.path !== '/admin/routineMonitor') this.$router.push('/admin/routineMonitor')
  115. let groupname = window.sessionStorage.getItem('groupname')
  116. let data1 = []
  117. let data = [
  118. // {
  119. // // icon: 'el-icon-user-solid',
  120. // subMenuName: '监测模型',
  121. // children: [{
  122. // id: '1-1',
  123. // subMenuName: '模型配置',
  124. // path: '/admin/'
  125. // }]
  126. // },
  127. {
  128. // icon: 'el-icon-user-solid',
  129. subMenuName: '监测任务',
  130. children: [{
  131. id: '5-1',
  132. subMenuName: '例行监测',
  133. path: '/admin/routineMonitor'
  134. }, {
  135. id: '5-2',
  136. subMenuName: '专项监测',
  137. path: '/admin/specialMonitor'
  138. }
  139. // ,{
  140. // id: '5-3',
  141. // subMenuName: '监测抽查',
  142. // path: '/admin/checkMonitor'
  143. // },{
  144. // id: '5-4',
  145. // subMenuName: '复检任务',
  146. // path: '/admin/'
  147. // },
  148. ]
  149. },
  150. ]
  151. this.menuList = data
  152. },
  153. methods: {
  154. handleOpen(index) {
  155. console.log(index)
  156. },
  157. /** tabs标签相关函数 */
  158. // tab切换时,动态的切换路由
  159. tabClick(tab) {
  160. if (this.$route.path == tab.name) return
  161. this.$router.push(tab.name)
  162. },
  163. addTab(title, name) {
  164. for (let i = 0; i < this.Tabs.length; i++) {
  165. if (this.Tabs[i].name == name) {
  166. this.activeTabas = name
  167. return
  168. }
  169. }
  170. this.Tabs.push({
  171. title: title,
  172. name: name,
  173. isClose: 'closable'
  174. })
  175. this.activeTabas = name
  176. },
  177. removeTab(targetName) {
  178. const tabs = this.Tabs
  179. let activeName = this.activeTabas
  180. if (activeName == targetName) {
  181. tabs.forEach((tab, index) => {
  182. if (tab.name == targetName) {
  183. const nextTab = tabs[index + 1] || tabs[index - 1]
  184. if (nextTab) {
  185. activeName = nextTab.name
  186. }
  187. }
  188. })
  189. }
  190. this.activeTabas = activeName
  191. this.$router.push(activeName)
  192. this.Tabs = tabs.filter(tab => tab.name !== targetName)
  193. },
  194. /** 设置用户为登出状态 */
  195. async logout() {
  196. // const formData = { 'token': window.sessionStorage.getItem('token') }
  197. // // 提交登出请求
  198. // const result = await this.$http.post('/loginOut', formData)
  199. // if (result.data.code == 0) {
  200. // 清除seesion信息
  201. window.sessionStorage.clear()
  202. this.$router.push('/login')
  203. // }
  204. },
  205. async checkTimeOut() {
  206. this.currentTime = new Date().getTime() // 记录这次点击的时间
  207. // 如果当前页面不是登录,初始化界面就可以执行是否退出
  208. if (!(this.$route.path == '/login')) {
  209. /** 判断是否因为超时可以退出 */
  210. // 判断时间是否过期(判断上次最后一次点击的时间和这次点击的时间间隔是否大于10分钟)
  211. var isExit = this.currentTime - this.lastTime > this.timeOut
  212. if (isExit) {
  213. isExit = false
  214. // 这里写状态已过期后执行的操作
  215. this.lastTime = new Date().getTime() // 如果在10分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  216. this.$router.push('/login')
  217. // 设置用户为登出状态
  218. // const formData = {
  219. // 'token': window.sessionStorage.getItem('token')
  220. // }
  221. // 提交登出请求
  222. // const result = await this.$http.post('login_out', formData)
  223. // if (result.data.code == 0) {
  224. // // 清除seesion信息
  225. // window.sessionStorage.removeItem('token')
  226. // }
  227. // this.$message({
  228. // message: '长时间未操作,请重新登录',
  229. // type: 'warning',
  230. // showClose: true,
  231. // center: true
  232. // })
  233. } else {
  234. /** 判断是否因为用户未登录可以退出 */
  235. // const token = window.sessionStorage.getItem('token')
  236. // if (token == null || token == undefined || token == '') {
  237. // this.$router.push('/login')
  238. // this.$message({
  239. // message: '用户未登录,请重新登录',
  240. // type: 'warning',
  241. // showClose: true,
  242. // center: true
  243. // })
  244. // }
  245. this.lastTime = new Date().getTime() // 如果在10分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  246. }
  247. } else {
  248. this.lastTime = new Date().getTime() // 如果在10分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  249. }
  250. }
  251. }
  252. }
  253. </script>
  254. <style lang="less" scoped>
  255. .admin-container {
  256. height: 100%;
  257. // overflow: hidden;
  258. }
  259. .el-main {
  260. padding-top: 8px !important;
  261. }
  262. .el-menu-item.is-active {
  263. // background-color: #3ace04 !important;
  264. }
  265. .admin-logo-container {
  266. // border-color: #5EB9DE;
  267. // border-right-width: 1px;
  268. // border-right-style: solid;
  269. }
  270. .admin-logo {
  271. margin-left: 5px;
  272. height: 55px;
  273. width: 55px;
  274. /*自动等比缩放*/
  275. background-size: 100% 100%;
  276. }
  277. .el-header {
  278. background-color: #31B404;
  279. width: 100%;
  280. color: white;
  281. font-size: 25px;
  282. display: flex;
  283. padding-left: 0;
  284. }
  285. .admin-logo-container {
  286. display: flex;
  287. align-items: center;
  288. span {
  289. margin-left: 15px;
  290. }
  291. }
  292. .el-aside {
  293. // width: 200px;
  294. background-color: #EEF1F6;
  295. }
  296. .toggle-button-container {
  297. width: 180px;
  298. display: flex;
  299. justify-content: left;
  300. }
  301. // .toggle-button {
  302. // width: 50px;
  303. // line-height: 60px;
  304. // color: #fff;
  305. // text-align: center;
  306. // cursor: pointer;
  307. // }
  308. .right-function-container {
  309. width: 400px;
  310. line-height: 50px;
  311. text-align: right;
  312. position: absolute;
  313. right: 15px;
  314. }
  315. </style>