{"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":[]}