jc.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. <template>
  2. <div
  3. style="height: 100%; width: 100%;"
  4. @click="checkTimeOut()"
  5. @mouseenter="checkTimeOut()"
  6. @mousemove="checkTimeOut()"
  7. >
  8. <el-container class="admin-container">
  9. <!--页面头部(上边)-->
  10. <el-header>
  11. <div class="admin-logo-container">
  12. <!-- <img
  13. class="admin-logo"
  14. src="../assets/img/admin.jpg"
  15. alt=""
  16. > -->
  17. <span >安徽省农产品质量安全监测系统—检测平台</span>
  18. </div>
  19. <div class="right-function-container">
  20. <el-button @click="logout">
  21. 退出
  22. </el-button>
  23. </div>
  24. <div class="admin-wel">
  25. <span>您好!检测单位--{{dwname}}</span>
  26. </div>
  27. </el-header>
  28. <!--页面主体部分-->
  29. <el-container>
  30. <!--页面侧边栏(左边)-->
  31. <el-aside style="width: 13.125rem;">
  32. <!-- 页面左侧菜单区域-->
  33. <el-menu
  34. :default-active="$route.path"
  35. background-color="#EEF1F6"
  36. text-color="#48576a"
  37. active-text-color="#31B404"
  38. :collapse-transition="false"
  39. :router="true"
  40. >
  41. <!-- <el-menu-item index="/jc/workbench">
  42. <span slot="title">系统首页</span>
  43. </el-menu-item> -->
  44. <!-- 一级菜单-->
  45. <el-submenu
  46. :index="index+''"
  47. v-for="(item, index) in menuList"
  48. :key="index"
  49. >
  50. <!-- 一级菜单模板区-->
  51. <template slot="title">
  52. <!-- 图标-->
  53. <i :class="item.icon" />
  54. <!-- 文本-->
  55. <span>{{ item.subMenuName }}</span>
  56. </template>
  57. <!-- 二级菜单-->
  58. <el-menu-item
  59. :index="subItem.path+''"
  60. v-for="subItem in item.children"
  61. :key="subItem.id"
  62. @click="addTab(subItem.subMenuName, subItem.path)"
  63. >
  64. <!-- 二级菜单模板区-->
  65. <template slot="title">
  66. <!-- 图标-->
  67. <i class="el-icon-bangzhu" />
  68. <!-- 文本-->
  69. <span>{{ subItem.subMenuName }}</span>
  70. </template>
  71. </el-menu-item>
  72. </el-submenu>
  73. </el-menu>
  74. </el-aside>
  75. <!-- 页面主内容(右边)-->
  76. <el-main>
  77. <el-tabs
  78. v-model="activeTabas"
  79. type="card"
  80. @tab-remove="removeTab"
  81. @tab-click="tabClick"
  82. >
  83. <el-tab-pane
  84. v-for="item in Tabs"
  85. :key="item.name"
  86. :label="item.title"
  87. :name="item.name"
  88. :closable="item.isClose"
  89. >
  90. <el-container>
  91. <el-main>
  92. <el-card shadow="always">
  93. <!-- 内容显示-->
  94. <router-view :key="item.name" />
  95. </el-card>
  96. </el-main>
  97. </el-container>
  98. </el-tab-pane>
  99. </el-tabs>
  100. </el-main>
  101. </el-container>
  102. <el-footer id="footer">
  103. <p>主办单位:安徽省农业农村厅</p>
  104. <p>技术支持:安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
  105. </el-footer>
  106. </el-container>
  107. </div>
  108. </template>
  109. <script>
  110. export default {
  111. name: 'jc',
  112. data () {
  113. return {
  114. lastTime: null, // 最后一次点击的时间
  115. currentTime: null, // 当前点击的时间
  116. timeOut: 30 * 60 * 1000, // 设置超时时间: 30分钟
  117. /** tabs标签相关属性 */
  118. // 当前打开的tabs名称
  119. activeTabas: '/jc',
  120. Tabs: [],
  121. // 左侧菜单数据
  122. menuList: [],
  123. dwname:''//账户名称
  124. }
  125. },
  126. watch: {
  127. /** 监听,当路由发生变化的时候执行(防止用户手动更换地址导致tabs的面板变动却不切换相应的tabs) */
  128. // '$route.path': function () {
  129. // var iindex = -1
  130. // var jindex = -1
  131. // for (let i = 0; i < this.menuList.length; i++) {
  132. // for (let j = 0; j < this.menuList[i].children.length; j++) {
  133. // if (this.menuList[i].children[j].path == this.$route.path) {
  134. // iindex = i
  135. // jindex = j
  136. // break
  137. // }
  138. // }
  139. // }
  140. // this.addTab(this.menuList[iindex].children[jindex].subMenuName, this.$route.path)
  141. // }
  142. },
  143. created () {
  144. this.lastTime = new Date().getTime() // 网页第一次打开时,记录当前时间
  145. // 保证admin中的页面刷新后重置到/admin路由下
  146. if (this.$route.path !== '/jc/workbench') this.$router.push('/jc/workbench')
  147. let groupname = window.sessionStorage.getItem('groupname')
  148. let data1 = []
  149. let data = [
  150. {
  151. subMenuName: '首页',
  152. children: [{
  153. id: '7-1',
  154. subMenuName: '控制台',
  155. path: '/jc/workbench'
  156. }
  157. ]
  158. },
  159. {
  160. subMenuName: '主体信息',
  161. children: [{
  162. id: '1-1',
  163. subMenuName: '信息维护',
  164. path: '/jc/subjectInformation'
  165. }
  166. ]
  167. },
  168. // {
  169. // // icon: 'el-icon-s-custom',
  170. // subMenuName: '牵头单位',
  171. // children: [
  172. // // {
  173. // // id: '2-1',
  174. // // subMenuName: '退回任务',
  175. // // path: '/admin/'
  176. // // },
  177. // {
  178. // id: '2-2',
  179. // subMenuName: '例行监测',
  180. // path: '/jc/routineMonitorqt'
  181. // }
  182. // ,{
  183. // id: '2-3',
  184. // subMenuName: '专项监测',
  185. // path: '/jc/specialMonitorqt'
  186. // },
  187. // // {
  188. // // id: '2-5',
  189. // // subMenuName: '监测信息汇总',
  190. // // path: '/admin/'
  191. // // },{
  192. // // id: '2-6',
  193. // // subMenuName: '承担任务报告下载',
  194. // // path: '/admin/'
  195. // // },{
  196. // // id: '2-7',
  197. // // subMenuName: '项目总结报告上传',
  198. // // path: '/admin/'
  199. // // },{
  200. // // id: '2-8',
  201. // // subMenuName: '项目总结报告管理',
  202. // // path: '/admin/'
  203. // // },{
  204. // // id: '2-9',
  205. // // subMenuName: '系统报表',
  206. // // path: '/admin/'
  207. // // }
  208. // ]
  209. // },
  210. {
  211. // icon: 'el-icon-s-data',
  212. subMenuName: '承担单位',
  213. children: [
  214. // {
  215. // id: '3-1',
  216. // subMenuName: '退回任务',
  217. // path: '/admin/'
  218. // },
  219. // {
  220. // id: '3-2',
  221. // subMenuName: '抽样计划',
  222. // path: '/admin/'
  223. // },
  224. {
  225. id: '3-3',
  226. subMenuName: '例行监测',
  227. path: '/jc/routineMonitor'
  228. },
  229. {
  230. id: '3-4',
  231. subMenuName: '专项监测',
  232. path: '/jc/specialMonitorcd'
  233. }
  234. ,{
  235. id: '3-5',
  236. subMenuName: '退回任务',
  237. path: '/jc/returnTaskcd'
  238. },
  239. //{
  240. // id: '3-6',
  241. // subMenuName: '报告汇总',
  242. // path: '/admin/'
  243. // },{
  244. // id: '3-7',
  245. // subMenuName: '问题单据',
  246. // path: '/admin/'
  247. // },{
  248. // id: '3-8',
  249. // subMenuName: '委托检测',
  250. // path: '/admin/'
  251. // },{
  252. // id: '3-9',
  253. // subMenuName: '复检任务',
  254. // path: '/admin/'
  255. // },
  256. ]
  257. },]
  258. this.menuList = data
  259. this.getOrganization()
  260. },
  261. mounted:function(){
  262. this.addTab("首页",'/jc/workbench')
  263. this.getOrganization()
  264. },
  265. methods: {
  266. async getOrganization() {
  267. const result = await this.$http.post('getOrganization')
  268. this.dwname = result.data.data.user_id.name
  269. console.log(this.dwname)
  270. },
  271. handleOpen (index) {
  272. console.log(index)
  273. },
  274. /** tabs标签相关函数 */
  275. // tab切换时,动态的切换路由
  276. tabClick (tab) {
  277. if (this.$route.path == tab.name) return
  278. this.$router.push(tab.name)
  279. },
  280. addTab (title, name) {
  281. for (let i = 0; i < this.Tabs.length; i++) {
  282. if (this.Tabs[i].name == name) {
  283. this.activeTabas = name
  284. return
  285. }
  286. }
  287. this.Tabs.push({
  288. title: title,
  289. name: name,
  290. isClose: 'closable'
  291. })
  292. this.activeTabas = name
  293. },
  294. removeTab (targetName) {
  295. const tabs = this.Tabs
  296. let activeName = this.activeTabas
  297. if (activeName == targetName) {
  298. tabs.forEach((tab, index) => {
  299. if (tab.name == targetName) {
  300. const nextTab = tabs[index + 1] || tabs[index - 1]
  301. if (nextTab) {
  302. activeName = nextTab.name
  303. }
  304. }
  305. })
  306. }
  307. this.activeTabas = activeName
  308. this.$router.push(activeName)
  309. this.Tabs = tabs.filter(tab => tab.name !== targetName)
  310. },
  311. /** 设置用户为登出状态 */
  312. async logout () {
  313. // const formData = { 'token': window.sessionStorage.getItem('token') }
  314. // // 提交登出请求
  315. // const result = await this.$http.post('/loginOut', formData)
  316. // if (result.data.code == 0) {
  317. // 清除seesion信息
  318. window.sessionStorage.clear()
  319. this.$router.push('/login')
  320. // }
  321. },
  322. async checkTimeOut () {
  323. this.currentTime = new Date().getTime() // 记录这次点击的时间
  324. // 如果当前页面不是登录,初始化界面就可以执行是否退出
  325. if (!(this.$route.path == '/login')) {
  326. /** 判断是否因为超时可以退出 */
  327. // 判断时间是否过期(判断上次最后一次点击的时间和这次点击的时间间隔是否大于10分钟)
  328. var isExit = this.currentTime - this.lastTime > this.timeOut
  329. if (isExit) {
  330. isExit = false
  331. // 这里写状态已过期后执行的操作
  332. this.lastTime = new Date().getTime() // 如果在10分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  333. this.$router.push('/login')
  334. // 设置用户为登出状态
  335. // const formData = {
  336. // 'token': window.sessionStorage.getItem('token')
  337. // }
  338. // 提交登出请求
  339. // const result = await this.$http.post('login_out', formData)
  340. // if (result.data.code == 0) {
  341. // // 清除seesion信息
  342. // window.sessionStorage.removeItem('token')
  343. // }
  344. // this.$message({
  345. // message: '长时间未操作,请重新登录',
  346. // type: 'warning',
  347. // showClose: true,
  348. // center: true
  349. // })
  350. } else {
  351. /** 判断是否因为用户未登录可以退出 */
  352. // const token = window.sessionStorage.getItem('token')
  353. // if (token == null || token == undefined || token == '') {
  354. // this.$router.push('/login')
  355. // this.$message({
  356. // message: '用户未登录,请重新登录',
  357. // type: 'warning',
  358. // showClose: true,
  359. // center: true
  360. // })
  361. // }
  362. this.lastTime = new Date().getTime() // 如果在10分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  363. }
  364. } else {
  365. this.lastTime = new Date().getTime() // 如果在10分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  366. }
  367. }
  368. }
  369. }
  370. </script>
  371. <style lang="less" scoped>
  372. .admin-container {
  373. height: 100%;
  374. // overflow: hidden;
  375. }
  376. .el-main {
  377. padding-top: 8px !important;
  378. }
  379. // .el-menu-item.is-active {
  380. // // background-color: #3ace04 !important;
  381. // }
  382. // .admin-logo-container {
  383. // // border-color: #5EB9DE;
  384. // // border-right-width: 1px;
  385. // // border-right-style: solid;
  386. // }
  387. .admin-logo {
  388. margin-left: 5px;
  389. height: 55px;
  390. width: 55px;
  391. /*自动等比缩放*/
  392. background-size: 100% 100%;
  393. }
  394. .el-header {
  395. background-color: #145faa;
  396. width: 100%;
  397. color: white;
  398. font-size: 25px;
  399. display: flex;
  400. padding-left: 0;
  401. }
  402. .admin-logo-container {
  403. display: flex;
  404. align-items: center;
  405. span {
  406. margin-left: 15px;
  407. }
  408. }
  409. .el-aside {
  410. // width: 200px;
  411. background-color: #EEF1F6;
  412. }
  413. .toggle-button-container {
  414. width: 180px;
  415. display: flex;
  416. justify-content: left;
  417. }
  418. // .toggle-button {
  419. // width: 50px;
  420. // line-height: 60px;
  421. // color: #fff;
  422. // text-align: center;
  423. // cursor: pointer;
  424. // }
  425. .right-function-container {
  426. width: 400px;
  427. line-height: 50px;
  428. text-align: right;
  429. position: absolute;
  430. right: 15px;
  431. }
  432. .admin-wel{
  433. display:flex
  434. }
  435. /deep/ #footer {
  436. // display: flex;
  437. // flex-direction: row;
  438. // position: absolute;
  439. // bottom: 0px;
  440. // background-color: #5087bd;
  441. color: #413b3b;
  442. width: 100%;
  443. text-align: center;
  444. font-size: .875rem;
  445. // height: 6.25rem;
  446. // // padding-top: 5px;
  447. // // opacity: 0.6;
  448. font-weight: 550;
  449. margin-bottom: 1%;
  450. // font: 24px bold #0055ff;
  451. }
  452. </style>