| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport { getWeather } from '@/api';\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 weather: '北京·晴 18°C'\n };\n },\n computed: {\n currentPath() {\n return this.$route.path;\n }\n },\n mounted() {\n this.updateTime();\n this.timer = setInterval(this.updateTime, 1000);\n this.fetchWeather();\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 async fetchWeather() {\n try {\n const res = await getWeather();\n const d = res.data;\n this.weather = `${d.city}·${d.weather} ${d.temp}°C`;\n } catch (e) {\n this.weather = '北京·晴 18°C';\n }\n }\n }\n};","map":{"version":3,"names":["getWeather","name","data","tabs","label","path","dateStr","timeStr","weather","computed","currentPath","$route","mounted","updateTime","timer","setInterval","fetchWeather","beforeDestroy","clearInterval","methods","now","Date","pad","n","String","padStart","weekDays","getDay","getHours","getMinutes","getSeconds","handleTabClick","tab","$router","push","res","d","city","temp","e"],"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=\"header-weather\">{{ weather }}</span>\n <span class=\"header-date\">{{ dateStr }}</span>\n <span class=\"header-time\">{{ timeStr }}</span>\n </div>\n </div>\n</template>\n\n<script>\nimport { getWeather } from '@/api'\n\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 weather: '北京·晴 18°C'\n }\n },\n computed: {\n currentPath() {\n return this.$route.path\n }\n },\n mounted() {\n this.updateTime()\n this.timer = setInterval(this.updateTime, 1000)\n this.fetchWeather()\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 async fetchWeather() {\n try {\n const res = await getWeather()\n const d = res.data\n this.weather = `${d.city}·${d.weather} ${d.temp}°C`\n } catch (e) {\n this.weather = '北京·晴 18°C'\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: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent 0%, #3BAFD6 50%, transparent 100%);\n background-size: 200% 100%;\n animation: headerGlow 3s linear infinite;\n }\n}\n\n@keyframes headerGlow {\n 0% { background-position: 100% 0; }\n 100% { background-position: -100% 0; }\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.header-weather {\n font-size: 14px;\n color: $text-secondary;\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":";AA2BA,SAAAA,UAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,IAAA,GACA;QAAAC,KAAA;QAAAC,IAAA;MAAA,GACA;QAAAD,KAAA;QAAAC,IAAA;MAAA,EACA;MACAC,OAAA;MACAC,OAAA;MACAC,OAAA;IACA;EACA;EACAC,QAAA;IACAC,YAAA;MACA,YAAAC,MAAA,CAAAN,IAAA;IACA;EACA;EACAO,QAAA;IACA,KAAAC,UAAA;IACA,KAAAC,KAAA,GAAAC,WAAA,MAAAF,UAAA;IACA,KAAAG,YAAA;EACA;EACAC,cAAA;IACAC,aAAA,MAAAJ,KAAA;EACA;EACAK,OAAA;IACAN,WAAA;MACA,MAAAO,GAAA,OAAAC,IAAA;MACA,MAAAC,GAAA,GAAAC,CAAA,IAAAC,MAAA,CAAAD,CAAA,EAAAE,QAAA;MACA,MAAAC,QAAA;MACA,KAAApB,OAAA,MAAAoB,QAAA,CAAAN,GAAA,CAAAO,MAAA;MACA,KAAApB,OAAA,MAAAe,GAAA,CAAAF,GAAA,CAAAQ,QAAA,OAAAN,GAAA,CAAAF,GAAA,CAAAS,UAAA,OAAAP,GAAA,CAAAF,GAAA,CAAAU,UAAA;IACA;IACAC,eAAAC,GAAA;MACA,SAAArB,MAAA,CAAAN,IAAA,KAAA2B,GAAA,CAAA3B,IAAA;QACA,KAAA4B,OAAA,CAAAC,IAAA,CAAAF,GAAA,CAAA3B,IAAA;MACA;IACA;IACA;IACA,MAAAW,aAAA;MACA;QACA,MAAAmB,GAAA,SAAAnC,UAAA;QACA,MAAAoC,CAAA,GAAAD,GAAA,CAAAjC,IAAA;QACA,KAAAM,OAAA,MAAA4B,CAAA,CAAAC,IAAA,IAAAD,CAAA,CAAA5B,OAAA,IAAA4B,CAAA,CAAAE,IAAA;MACA,SAAAC,CAAA;QACA,KAAA/B,OAAA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
