| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nexport default {\n name: 'ScreenHeader',\n data() {\n return {\n tabs: [{\n label: '实验室情况',\n path: '/lab-status'\n }, {\n label: '视频监控',\n path: '/video-monitor'\n }],\n dateStr: '',\n timeStr: ''\n };\n },\n computed: {\n currentPath() {\n return this.$route.path;\n },\n userName() {\n return this.$store.state.userInfo.name || '管理员';\n }\n },\n mounted() {\n this.updateTime();\n this.timer = setInterval(this.updateTime, 1000);\n },\n beforeDestroy() {\n clearInterval(this.timer);\n },\n methods: {\n updateTime() {\n const now = new Date();\n const pad = n => String(n).padStart(2, '0');\n const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];\n this.dateStr = `${weekDays[now.getDay()]}`;\n this.timeStr = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;\n },\n handleTabClick(tab) {\n if (this.$route.path !== tab.path) {\n this.$router.push(tab.path);\n }\n }\n }\n};","map":{"version":3,"names":["name","data","tabs","label","path","dateStr","timeStr","computed","currentPath","$route","userName","$store","state","userInfo","mounted","updateTime","timer","setInterval","beforeDestroy","clearInterval","methods","now","Date","pad","n","String","padStart","weekDays","getDay","getHours","getMinutes","getSeconds","handleTabClick","tab","$router","push"],"sources":["src/components/Header.vue"],"sourcesContent":["<template>\n <div class=\"screen-header\">\n <div class=\"header-left\">\n <span class=\"header-title\">中国安全生产科学研究院实验室安全智慧化管控中心</span>\n </div>\n <div class=\"header-center\">\n <div class=\"nav-tabs\">\n <div\n v-for=\"tab in tabs\"\n :key=\"tab.path\"\n class=\"nav-tab\"\n :class=\"{ active: currentPath === tab.path }\"\n @click=\"handleTabClick(tab)\"\n >\n {{ tab.label }}\n </div>\n </div>\n </div>\n <div class=\"header-right\">\n <span class=\"user-info\">\n <i class=\"el-icon-user\"></i>\n {{ userName }}\n </span>\n <span class=\"header-date\">{{ dateStr }}</span>\n <span class=\"header-time\">{{ timeStr }}</span>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ScreenHeader',\n data() {\n return {\n tabs: [\n { label: '实验室情况', path: '/lab-status' },\n { label: '视频监控', path: '/video-monitor' }\n ],\n dateStr: '',\n timeStr: ''\n }\n },\n computed: {\n currentPath() {\n return this.$route.path\n },\n userName() {\n return this.$store.state.userInfo.name || '管理员'\n }\n },\n mounted() {\n this.updateTime()\n this.timer = setInterval(this.updateTime, 1000)\n },\n beforeDestroy() {\n clearInterval(this.timer)\n },\n methods: {\n updateTime() {\n const now = new Date()\n const pad = n => String(n).padStart(2, '0')\n const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']\n this.dateStr = `${weekDays[now.getDay()]}`\n this.timeStr = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`\n },\n handleTabClick(tab) {\n if (this.$route.path !== tab.path) {\n this.$router.push(tab.path)\n }\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.screen-header {\n width: 100%;\n height: $header-height;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 30px;\n background: linear-gradient(180deg, rgba(10, 26, 58, 0.95) 0%, rgba(10, 26, 58, 0.75) 100%);\n border-bottom: 1px solid rgba(30, 144, 255, 0.15);\n position: relative;\n z-index: 10;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(30,144,255,0.6), transparent);\n }\n}\n\n.header-left {\n flex: 1;\n}\n\n.header-title {\n font-size: 24px;\n font-weight: bold;\n color: #fff;\n letter-spacing: 4px;\n text-shadow: 0 0 15px rgba(30, 144, 255, 0.4);\n}\n\n.header-center {\n flex: 0 0 auto;\n}\n\n.nav-tabs {\n display: flex;\n gap: 4px;\n background: rgba(13, 34, 71, 0.8);\n border: 1px solid rgba(30, 144, 255, 0.3);\n border-radius: 4px;\n padding: 4px;\n}\n\n.nav-tab {\n padding: 8px 24px;\n font-size: 14px;\n color: $text-secondary;\n cursor: pointer;\n border-radius: 3px;\n transition: all 0.3s;\n white-space: nowrap;\n\n &:hover {\n color: #fff;\n background: rgba(30, 144, 255, 0.15);\n }\n\n &.active {\n color: #fff;\n background: linear-gradient(135deg, #1565c0, #1e88e5);\n box-shadow: 0 0 10px rgba(30, 144, 255, 0.3);\n }\n}\n\n.header-right {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 20px;\n}\n\n.user-info {\n font-size: 14px;\n color: $text-secondary;\n\n i {\n margin-right: 4px;\n }\n}\n\n.header-date {\n font-size: 14px;\n color: $text-secondary;\n}\n\n.header-time {\n font-size: 22px;\n color: $accent-cyan;\n font-family: 'Courier New', monospace;\n letter-spacing: 2px;\n font-weight: bold;\n text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);\n}\n</style>\n"],"mappings":";AA8BA;EACAA,IAAA;EACAC,KAAA;IACA;MACAC,IAAA,GACA;QAAAC,KAAA;QAAAC,IAAA;MAAA,GACA;QAAAD,KAAA;QAAAC,IAAA;MAAA,EACA;MACAC,OAAA;MACAC,OAAA;IACA;EACA;EACAC,QAAA;IACAC,YAAA;MACA,YAAAC,MAAA,CAAAL,IAAA;IACA;IACAM,SAAA;MACA,YAAAC,MAAA,CAAAC,KAAA,CAAAC,QAAA,CAAAb,IAAA;IACA;EACA;EACAc,QAAA;IACA,KAAAC,UAAA;IACA,KAAAC,KAAA,GAAAC,WAAA,MAAAF,UAAA;EACA;EACAG,cAAA;IACAC,aAAA,MAAAH,KAAA;EACA;EACAI,OAAA;IACAL,WAAA;MACA,MAAAM,GAAA,OAAAC,IAAA;MACA,MAAAC,GAAA,GAAAC,CAAA,IAAAC,MAAA,CAAAD,CAAA,EAAAE,QAAA;MACA,MAAAC,QAAA;MACA,KAAAtB,OAAA,MAAAsB,QAAA,CAAAN,GAAA,CAAAO,MAAA;MACA,KAAAtB,OAAA,MAAAiB,GAAA,CAAAF,GAAA,CAAAQ,QAAA,OAAAN,GAAA,CAAAF,GAAA,CAAAS,UAAA,OAAAP,GAAA,CAAAF,GAAA,CAAAU,UAAA;IACA;IACAC,eAAAC,GAAA;MACA,SAAAxB,MAAA,CAAAL,IAAA,KAAA6B,GAAA,CAAA7B,IAAA;QACA,KAAA8B,OAAA,CAAAC,IAAA,CAAAF,GAAA,CAAA7B,IAAA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
