welcome

config/index.js

@@ -19,14 +19,14 @@ module.exports = {
         },
       },
       '/api': {
-        target: 'http://192.168.0.11:8080', 
+        target: 'http://192.168.0.67:8080', 
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/',
         },
       },
       '/api/ws': {
-        target: 'http://192.168.0.11:8081', 
+        target: 'http://192.168.0.67:8081', 
         changeOrigin: true,
         ws: true,
         pathRewrite: {

src/pages/page3.vue

@@ -60,13 +60,13 @@
         </div>
         <div :hidden="!users.length">
           <transition-group class="centerLabel userList" tag="ul" name="fade">
-            <li v-for="(user, k) in users" :key="k" class="fade-item">
+            <li v-for="(user, k) in users" :key="k+'li'" class="fade-item">
               <!-- <span>{{user.name}}</span> -->
               <span>{{user.words}}</span>
             </li>
           </transition-group>
           <div v-if="audios.length > 0" :hidden="true">
-            <div v-for="(audio, k) in audios" :key="k">
+            <div v-for="(audio, k) in audios" :key="k+'audio'">
               <audio v-if="audio.isShow" @ended="audioEnd(k)" autoplay>
                 <source :src="audio.url">
               </audio>

src/pages/welcome.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="welcomePage">
+    <div class="welcome-con">
+          <img  v-if="!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">
+            <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">
+            <li v-for="(user, k) in users" :key="k+'li'"  class="fade-item">
+              <span>{{user.name}}</span>
+             <span>{{user.words}}</span>
+            </li>
+          </ul>
+          <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>
+      </div>
+    </div>
+    </div>
+      <x-maquee class="marquee" v-if="pageDetail !== null && (pageDetail.detail.noticeShow || pageDetail.detail.weatherShow)">
+        <ul>
+          <li v-if="weatherDetail">
+            <span class="shares-name font24">{{currentDate}}</span>
+            <span class="shares-price font24">{{currentWeek}}</span>
+            <span class="shares-price font24">{{currentChineseDate}}</span>
+            <span class="shares-price font24">{{tempRange}}</span>
+            <span class="shares-price font24">今日 {{ weatherDetail.day_weather }} {{weatherDetail.index.gj.title}}外出</span>
+            <span class="shares-price font24">{{weatherDetail.wind_direction}}{{weatherDetail.wind_power}}</span>
+            <span class="shares-price font24">空气湿度: {{weatherDetail.sd}}</span>
+            <span class="shares-price font24">体感温度: {{weatherDetail.temperature}}</span>
+            <span class="shares-price font24">空气指数: {{weatherDetail.aqi}}</span>
+            <span class="shares-price font24">PM2.5: {{weatherDetail.aqiDetail.pm2_5}}</span>
+            <span class="shares-price font24">穿衣指数: {{weatherDetail.index.clothes.title}}</span>
+          </li>
+        </ul>
+      </x-maquee>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import solarLunar from 'solarLunar'
+import XWebSocket from '../util/websocket'
+import getShares from '../util/shares'
+
+const { mapState: mapPageState, mapActions: mapPageActions, mapMutations: mapPageMutations } = createNamespacedHelpers('newIndex')
+export default {
+  name: 'welcomePage',
+  data () {
+    return {
+      ws: null,
+      users: [],
+      audios: [],
+      diffM: 5000,
+      currentDate: '',
+      currentWeek: '',
+      currentChineseDate: '',
+      showSlide: false,
+      currentTimeTamp: Date.now(),
+      activeIndex: 0,
+      timer: null,
+      timeNum: 0,
+      swiperOption: {
+        speed: 1000,
+        autoplay: {
+          delay: 6000,
+          disableOnInteraction: false
+        }
+      },
+      num: 1,
+      personDelay: null,
+      pageTimer: null,
+      assetdir: undefined,
+      city: '',
+      sharesData: []
+    }
+  },
+  computed: {
+    ...mapPageState({
+      pageDetail: x => x.pageDetail
+    }),
+    weatherDetail () {
+      let target = this.pageDetail.weather ? JSON.parse(this.pageDetail.weather) : undefined
+
+      if (!target) return undefined
+
+      const { f1, now } = target.showapi_res_body
+      return { ...f1, ...now }
+    },
+    tempRange () {
+      if (!this.weatherDetail) return ''
+      let min, max
+      const f = () => (this.weatherDetail.day_air_temperature) - 0 > (this.weatherDetail.night_air_temperature - 0)
+        ? ((min = this.weatherDetail.night_air_temperature) | (max = this.weatherDetail.day_air_temperature))
+        : ((max = this.weatherDetail.night_air_temperature) | (min = this.weatherDetail.day_air_temperature))
+      f()
+      return `${min}℃ ~ ${max}℃`
+    }
+  },
+  components: {
+    XMaquee: () => import('../components/XMaquee')
+  },
+  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))
+    }, 60000)
+
+    // const _that = this
+    window.setInterval(() => {
+      let dels = this.users.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
+      dels.forEach(x => {
+        const inx = this.users.findIndex(i => i.createdata === x.createdata)
+        this.users.splice(inx, 1)
+      })
+      let delaudios = this.audios.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
+      delaudios.forEach(x => {
+        const inx = this.audios.findIndex(i => i.createdata === x.createdata)
+        this.audios.splice(inx, 1)
+      })
+    }, 100)
+    this.ws = new XWebSocket({
+      message: this.receviedMsg.bind(this),
+      delay: 10,
+      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(wsURI)
+    this.init()
+    this.pageTimer = window.setInterval(() => {
+      let curMin = new Date().getMinutes() - 0
+      let curHour = new Date().getHours() - 0
+      let curSec = new Date().getSeconds() - 0
+      if (!curMin && !curSec) { // 整点刷新请求
+        if (curHour === 1 && !curSec) { // 1点刷新页面
+          window.clearInterval(this.pageTimer)
+          window.location.reload()
+        }
+        // this.init()
+      }
+    }, 1000)
+  },
+  mounted () {
+    console.log(this.users, 'this.users')
+  },
+  updated () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapPageActions([
+      'getNewIndex'
+    ]),
+    ...mapPageMutations([
+      'emptyPageDetail'
+    ]),
+    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) {
+          x.isShow = false
+        }
+        return x
+      })
+    },
+    receviedMsg (e) {
+      const msg = e.data
+      if (!msg) {
+        return
+      }
+
+      const res = JSON.parse(e.data)
+      if (res.type && res.type === 'cmd') {
+        // 如果这种类型的消息, 说明是行为控制
+        switch (res.data) {
+          // 刷新数据
+          case 'refresh':
+            window.location.reload()
+            break
+          default:
+            break
+        }
+      } else {
+        this.newData({
+          name: !res.person.name ? '' : res.person.name,
+          classId: res.person.typeId,
+          words: res.taVisitingWords.words,
+          url: res.audio
+        })
+      }
+    },
+    init () { // 初始化
+      this.emptyPageDetail()
+      this.getDate()
+      this.getNewIndex({ id: this.$route.query.id, city: this.city })
+    },
+    getDate () { // 获取当前时间
+      let currentTime = Date.now()
+      let weekday = ['日', '一', '二', '三', '四', '五', '六']
+      let ChineseDate = solarLunar.lunar2solar(new Date(currentTime).getFullYear(), new Date(currentTime).getMonth(), new Date(currentTime).getDate())
+      this.currentWeek = `星期${weekday[new Date(currentTime).getDay()]}`
+      this.currentTime = `${new Date(currentTime).getHours().toString().padStart(2, '0')} : ${new Date(currentTime).getMinutes().toString().padStart(2, '0')} : ${new Date(currentTime).getSeconds().toString().padStart(2, '0')}`
+      this.currentDate = `${new Date(currentTime).getFullYear()}年${(new Date(currentTime).getMonth() + 1).toString().padStart(2, '0')}月${new Date(currentTime).getDate().toString().padStart(2, '0')}日`
+      this.currentChineseDate = `${ChineseDate.monthCn}${ChineseDate.dayCn}`
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.welcomePage {
+  $mainfontcolor: #000;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url('../assets/images/welcome/bg.jpg') no-repeat center ;
+  background-size: 100% 100%;
+   .fade-item {
+    transition: all 1s;
+    display: inline-block;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  .fade-leave-active {
+    position: absolute;
+  }
+  .welcome-con{
+   width: 100%;
+   height: 100%;
+   position: relative;
+    .welcome-img{
+      position: absolute;
+      width: 40vw;
+      height: 30vh;
+      top:40%;
+      margin-left: 12%;
+    }
+    .content{
+      width: 100%;
+      height: 100%;
+       .userList{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top:88vh;
+        margin-left: 5vw;
+        li{
+          span{
+            width: 60%;
+            font-size: 6vw;
+            display: block;
+            text-align: center;
+          }
+        }
+    }
+    }
+  }
+}
+
+.marquee {
+  width: 100%;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  height: 48px !important;
+  z-index: 999 !important;
+  color: #fff;
+  letter-spacing: 0.05em;
+  line-height: 48px;
+  background-color: rgba(0, 0, 0, 0.7);
+  font-weight: 700;
+  border: none !important;
+  li{
+    span{
+      margin-right: 15px;
+    }
+  }
+
+  .font24 {
+    font-size: 24px;
+  }
+
+  ul {
+    list-style: none;
+    background: transparent;
+    width: max-content;
+  }
+
+  li {
+    display: inline;
+    & + li {
+      margin-left: 20px;
+      padding-left: 20px;
+      border-left: 1px solid #fff;
+    }
+  }
+
+  .shares-name {
+    color: #b49076;
+  }
+
+}
+</style>

src/router/index.js

@@ -3,16 +3,25 @@ import Vue from 'vue'
 import Router from 'vue-router'
 // import test from '../pages/test'
 import page3 from '../pages/page3'
+import welcome from '../pages/welcome'
 
 Vue.use(Router)
 
 let router = new Router({
-  routes: [{
+  routes: [
+    {
     path: '/',
     name: 'index',
     component: page3,
     children: []
-  }]
+  },
+    {
+    path: '/welcome',
+    name: 'welcome',
+    component: welcome,
+    children: []
+  },
+]
 })
 
 router.beforeEach((to, from, next) => {