feat: 完成头部天气显示模块以及地址跳转控制

src/layouts/default/modules/AddressComponent.js

@@ -0,0 +1,54 @@
+export default  {
+  props: {
+    activeStyle: {
+      type: Object,
+      default: () => ({ color: '#A8D7E7' })
+    },
+    otherStyle: {
+      type: Object,
+      default: () => ({ color: "#85e9ff" })
+    },
+    separator: {
+      type: String,
+      default: '>'
+    }
+  },
+  methods: {
+    createPathNodes(path, h, style = null) {
+      const otherNodes = []
+      const { $router, $route } = this
+      path.forEach((item, index) => {
+        otherNodes.push(h('span', { 
+          style: { ...style, cursor: "pointer" }, 
+          on: {
+            click: () => {  
+              if ($route.path !== item.path) {
+                $router.push(item.path)
+              }
+            }  
+          }  
+        }, item.label))
+        
+        if (index !== path.length - 1) {
+          otherNodes.push(h('span', { style }, ` ${this.separator} `))
+        }
+      })
+      return otherNodes;
+    }
+  },
+  render (h) {
+    const { address, index  } = this.$route.meta
+    const children = []
+
+    const currentNodes = this.createPathNodes(address.slice(0, index + 1), h, this.activeStyle)
+    children.push(...currentNodes)
+
+    if (index !== address.length - 1) {
+      const otherNodes = this.createPathNodes(address.slice(index + 1), h, this.otherStyle)
+      children.push(h('span', { style: this.otherStyle }, ` ${this.separator} `))
+      children.push(...otherNodes)
+    }
+
+    return h('div', null, children)
+  }
+}

src/layouts/default/modules/Header.vue

@@ -1,24 +1,33 @@
 <template>
   <div :class="`${namespace}-header`">
-    <div class="title-wrapper">
-      <!-- <div class="title">
-        {{title}}
-      </div> -->
+    <div class="title">
+      <AddressComponent/>
     </div>
-    <div>
-      天气信息
+    <div class="weather">
+      <WeatherComponent />
     </div>
   </div>
 </template>
 
 <script>
+import AddressComponent from './AddressComponent'
+import WeatherComponent from './WeatherComponent.vue'
+
 export default {
   inject: ['namespace'],
+  components: {
+    AddressComponent,
+    WeatherComponent
+  },
   props: {
     title: {
       type: String,
       default: '重庆市消防远程监控',
     },
+  },
+  created() {
+  },
+  methods: {
   }
 }
 </script>
@@ -35,21 +44,13 @@ export default {
     background: url("@/assets/images/header-bg.png") no-repeat;
     background-size: 100% 100%;
     height: 112px;
-
-
-    .title-wrapper {
-      // padding: 21px 24px 38px 24px;
-      // background-size: 715px 195px; 
-      // background-position: -98px -13px;
-      // margin-left: 19px;
-      
-      // .title {
-      //   font-family: DataFont;
-      //   font-size: 48px;
-      //   background-image:-webkit-linear-gradient(bottom,#46b4d6,#f0ffff); 
-      //   -webkit-background-clip:text; 
-      //   -webkit-text-fill-color:transparent;
-      // }
+    .title {
+      height: 100%;
+      font-size: 23px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 500px;
     }
   }
 </style>

src/layouts/default/modules/WeatherComponent.vue

@@ -0,0 +1,140 @@
+<template >
+  <div class="weatherComponent">
+    <div class="left">
+      <div class="address">{{location}}</div>
+      <div class="temp">{{currentTemp}}°</div>
+    </div>
+    <div class="center">
+      <div>{{desc}}</div>
+      <div class="weather-temp"><img :src="require(`@/assets/images/weather-icon/${weatherImage}.png`)" />  {{tempRange}}</div>
+      <div class="date-time">
+        <span>{{currentDate}}</span>
+        <span>{{currentTime}}</span>
+      </div>
+    </div>
+    <div class="right">
+      <img :src="require(`@/assets/images/icon/${disasterImage}.png`)" />
+      <span>{{disasterData[disasterImage]}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+const disasterData = {
+  'yl': '雨涝',
+  'nw': '浓雾',
+  'xz': '雪灾',
+  'gw': '高温',
+  'gh': '干旱',
+  'gby': '大暴雨'
+}
+
+export default {
+  name: 'WeatherComponent',
+  data() {
+    return {
+      timer: null,
+      // 当前时间
+      currentDateTime: new Date(),
+      // 天气图片
+      weatherImage: '1',
+      // 描述
+      desc: '晴转多云 降雨量 6mm',
+      // 当前温度
+      currentTemp: '24',
+      // 位置
+      location: '北碚区',
+      // 温度范围
+      tempRange: '18~26°C',
+      // 灾害图片
+      disasterImage: 'yl',
+      disasterData
+    }
+  },
+  computed: {
+    currentDate() {
+      const month = this.checkNumber(this.currentDateTime.getMonth() + 1)
+      const day = this.checkNumber(this.currentDateTime.getDate())
+      return `${this.currentDateTime.getFullYear()}${month}${day}`
+    },
+    currentTime() {
+      const hour = this.checkNumber(this.currentDateTime.getHours())
+      const minute = this.checkNumber(this.currentDateTime.getMinutes())
+      const second = this.checkNumber(this.currentDateTime.getSeconds())  
+      return `${hour}:${minute}:${second}`
+    }
+  },
+  methods: {
+    checkNumber(ch) {
+      if (ch < 10) {
+        return '0' + ch;
+      }
+      return ch
+    },
+    loadData() {
+      this.currentDateTime = new Date();
+    }
+  },
+  mounted() {
+    const {loadData} = this
+    this.timer = setInterval(() => {
+      loadData();
+    }, 1000);
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.weatherComponent {
+  font-size: 15px;
+  width: 362px;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  & > div {
+    margin: 0px 10px;
+  }
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .temp {
+      font-size: 39px;
+    }
+  }
+  .center {
+    .date-time {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .weather-temp {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-start;
+    align-items: center;
+    img {
+      width: 35px;
+      height: 35px;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -5,15 +5,38 @@ import Detail from '@/views/detail/index.vue'
 
 Vue.use(VueRouter)
 
+const address = [
+  {
+    label: '重庆市',
+    path: '/'
+  },
+  {
+    label: '北碚区',
+    path: '/detail'
+  },
+  {
+    label: '北碚区万达广场',
+    path: '/detail'
+  }
+]
+
 const routes = [
   {
     path: '/',
     name: 'Main',
-    component: Main
+    component: Main,
+    meta: {
+      address,
+      index: 0
+    }
   },
   {
-    path: '/detail/:id',
+    path: '/detail',
     name: 'Detail',
+    meta: {
+      address,
+      index: 1
+    },
     component: Detail
   }
 ]

src/views/main/right/FireLog/index.vue

@@ -49,10 +49,9 @@ export default {
       color: #85e9ff;
       gap: 20px;
       cursor: pointer;
-      
     .active {
       color: #ffd169;
     }
-    }
+  }
 }
 </style>