weather

src/pages/welcome.vue

 <template>
   <div class="welcomePage">
     <div class="welcome-con">
-          <img  v-if="!users.length" class="welcome-img" src="../assets/images/welcome/text.png" alt="">
+          <img  :hidden="!!users.length" class="welcome-img" src="../assets/images/welcome/text.png" alt="">
            <div class="content flex-h">
-              <div class="flex-item">
-              <div v-if="users.length">
-          <!-- <transition-group class="centerLabel userList" tag="ul" name="fade">
+             <!-- <p class="font">黄先生，欢迎光临银城.原溪</p> -->
+          <div :hidden="!users.length" >
+          <transition-group class="centerLabel userList" tag="ul" name="fade">
             <li v-for="(user, k) in users" :key="k+'li'" class="fade-item">
               <span>{{user.name}}</span>
              <span>{{user.words}}</span>
             </li>
-          </transition-group> -->
-          <ul class="centerLabel userList">
+          </transition-group>
+          <!-- <ul class="centerLabel userList">
             <li v-for="(user, k) in users" :key="k+'li'"  class="fade-item">
               <span>{{user.name}}</span>
              <span>{{user.words}}</span>
             </li>
-          </ul>
-           </div>
-          <!-- <div v-if="audios.length > 0" :hidden="true">
-            <div v-for="(audio, k) in audios" :key="k+'audio'">
-              <audio v-if="audio.isShow" @ended="audioEnd(k)" autoplay>
-                <source :src="audio.url">
-              </audio>
-            </div>
-          </div> -->
-          <div >
+          </ul> -->
+          <div v-if="audios" :hidden="true">
             <div v-for="(audio, k) in audios" :key="k+'audio'">
               <audio  @ended="audioEnd(k)" autoplay>
                 <source :src="audio.url">
               </audio>
             </div>
-          </div>
         </div>
+      </div>
     </div>
     </div>
-      <x-maquee class="marquee" v-if="pageDetail !== null && (pageDetail.detail.noticeShow || pageDetail.detail.weatherShow)">
+      <x-maquee class="marquee" v-if="weatherInfo !== null">
         <ul>
           <li v-if="weatherDetail">
             <span class="shares-name font24">{{currentDate}}</span>
   },
   computed: {
     ...mapPageState({
-      pageDetail: x => x.pageDetail
+      weatherInfo: x => x.weatherInfo
     }),
     weatherDetail () {
-      let target = this.pageDetail.weather ? JSON.parse(this.pageDetail.weather) : undefined
+      let target = this.weatherInfo
 
       if (!target) return undefined
 
   created () {
     this.assetdir = this.$route.query.assets || this.assetdir
     this.city = this.$route.query.city || this.city
-
     getShares().then(dt => (this.sharesData = dt))
     window.setInterval(() => {
       getShares().then(dt => (this.sharesData = dt))
       autoConnect: true
     })
 
-    // window.console.log(this.$route.query.id, this.$route.query)
-
     // const wsURI = `${window.location.origin.replace('http', 'ws')}/api/ws/${this.$route.query.id}`
     this.ws.connect('ws://192.168.0.67:8080/ws/screen/113')
     this.init()
   },
   methods: {
     ...mapPageActions([
-      'getNewIndex'
+      'getWeather'
     ]),
     ...mapPageMutations([
-      'emptyPageDetail'
+      'emptyWeatherInfo'
     ]),
-    newData (info) {
-      if (info.classId - 0 === 1 && this.users.filter(x => x.classId - 0 === 1).length > 0) {
-        this.users = this.users.map((x) => {
-          if (x.classId - 0 === 1) {
-            return { ...x, createdata: Date.parse(new Date()) }
-          } else {
-            return x
-          }
-        })
-      } else {
-        if (this.users.length >= 3) {
-          this.users.splice(0, 1)
-        }
-        this.users = [...this.users, { ...info, createdata: Date.parse(new Date()) }]
-        this.audios = [...this.audios, { ...info, isShow: true, createdata: Date.parse(new Date()) }]
-      }
-    },
     audioEnd (index) {
       this.audios = this.audios.slice().map((x, i) => {
         if (i === index) {
         return
       }
       const res = JSON.parse(e.data)
+      console.log(res, 'res11111')
       if (res.type && res.type === 'cmd') {
         // 如果这种类型的消息, 说明是行为控制
         switch (res.data) {
             break
         }
       } else {
+        console.log(res, 'res2222')
         this.newData({
           name: !res.person.words ? '' : res.person.words,
           classId: res.person.typeId,
         })
       }
     },
+    newData (info) {
+      if (info.classId - 0 === 1) {
+      // if (info.classId - 0 === 1 && this.users.filter(x => x.classId - 0 === 1).length > 0) {
+        this.users = this.users.map((x) => {
+          if (x.classId - 0 === 1) {
+            return { ...x, createdata: Date.parse(new Date()) }
+          } else {
+            return x
+          }
+        })
+      } else {
+        if (this.users.length >= 3) {
+          this.users.splice(0, 1)
+        }
+        this.users = [...this.users, { ...info, createdata: Date.parse(new Date()) }]
+        this.audios = [...this.audios, { ...info, isShow: true, createdata: Date.parse(new Date()) }]
+      }
+    },
     init () { // 初始化
-      this.emptyPageDetail()
+      this.emptyWeatherInfo()
       this.getDate()
-      this.getNewIndex({ id: this.$route.query.id, city: this.city })
+      this.getWeather({ city: this.city })
     },
     getDate () { // 获取当前时间
       let currentTime = Date.now()
   background: url('../assets/images/welcome/bg.jpg') no-repeat center ;
   background-size: 100% 100%;
    .fade-item {
-    transition: all 0.5s;
     display: inline-block;
   }
-  .fade-enter,
-  .fade-leave-to {
+  .fade-enter,.fade-leave-to{
     opacity: 0;
+   }
+  .fade-enter-to,.fade-leave{
+    opacity: 1;
   }
-  .fade-leave-active {
-    position: absolute;
+  .fade-enter-active,.fade-leave-active{
+    transition: all 0.5s;
   }
   .welcome-con{
    width: 100%;
     .content{
       width: 100%;
       height: 100%;
+      .font{
+        font-size: 5vw;
+        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+        font-weight: 900;
+      }
        .userList{
         width: 100%;
         height: 100%;

src/store/newIndex/index.js

 export default {
   namespaced: true,
   state: {
-    pageDetail: null
+    pageDetail: null,
+    weatherInfo: null
   },
   mutations: {
+    updateWeatherInfo (state, payload) {
+      state.weatherInfo = JSON.parse(payload.data)
+    },
     updatePageDetail (state, payload) {
       state.pageDetail = { ...payload.data }
     },
     emptyPageDetail (state) {
       state.pageDetail = null
+    },
+    emptyWeatherInfo (state) {
+      state.weatherInfo = null
     }
   },
   actions: {
           reject(res)
         })
       })
+    },
+    getWeather ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        Ajax(api.getWeather.url, {
+          method: api.getWeather.method,
+          queryData: { city: payload.city }
+        }).then(res => {
+          commit('updateWeatherInfo', res)
+          resolve(res)
+        }).catch((res) => {
+          reject(res)
+        })
+      })
     }
   }
 }

src/util/api.js

   newIndex: {
     method: 'get',
     url: `/api/screen/fristpage/device/:id`
+  },
+  getWeather: {
+    method: 'get',
+    url: `/api/screen/weather`
   }
 }