Index: src/views/board/index.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/views/board/index.vue	(date 1673333434525)
+++ src/views/board/index.vue	(date 1673333434525)
@@ -1,0 +1,362 @@
+<template>
+  <div>
+    <div v-show="hasRegister">
+      <el-header>
+        <el-image :src="logo" style="width: 50px; height: 50px" fit="fill" />
+        <div class="title">{{ title }}</div>
+        <!--        <div class="time">{{ currentTime }}</div>-->
+      </el-header>
+
+      <el-main>
+        <my-carousel ref="carousel" :height="mainAreaHeight+'px'" :interval.sync="swiperInterval" indicator-position="none" arrow="never" :autoplay="autoplay" @change="swiperChange">
+          <el-carousel-item>
+            <sick-bed-board :bed-info-array="bedInfoArray" :height="mainAreaHeight" :interval="subInterval" :auto-play="carouselCurrentIndex===0" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <calling-list-board :call-data="callData" :nurse-info-data="nurseInfoData" />
+          </el-carousel-item>
+          <el-carousel-item v-for="(bt,index) in boardData" :key="index">
+            <work-info-display :board-title="bt" :work-infos="boardData[index].contents" :height="mainAreaHeight" :interval="subInterval" :auto-play="carouselCurrentIndex===3" />
+          </el-carousel-item>
+        </my-carousel>
+
+      </el-main>
+    </div>
+    <div v-show="!hasRegister">
+      <div class="bullshit">
+        <div class="bullshit__oops text-lg text-cyan margin-top-lg">这是一台新的看板设备，请在呼叫中心管理后台设置该设备的所属科室。</div>
+        <div class="bullshit__info text-lg text-cyan margin-top-lg">
+          该设备MAC地址为:<span class="text-red">{{ deviceMAC }}</span> ,ID号为:<span class="text-red">{{ deviceId }}</span>
+        </div>
+        <div class="bullshit__headline" />
+        <div class="bullshit__info text-lg text-cyan margin-top-lg">如有疑问，请联系管理员，谢谢！</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import logo from '@/assets/logo.png'
+  import * as API_Board from '@/api/board'
+  import SickBedBoard from './components/sickBedBoard'
+  import CallingListBoard from './components/callingListBoard'
+  import WorkInfoDisplay from './components/workInfoDisplay'
+  import MyCarousel from '../../components/MyCarousel/index'
+  // import { deviceUrl } from '@/utils/domain'
+  const deviceUrl = domain.deviceUrl
+  export default {
+    name: 'Index',
+    components: { MyCarousel, WorkInfoDisplay, CallingListBoard, SickBedBoard },
+    data() {
+      return {
+        logo: logo,
+        currentTime: '',
+        title: '', // 顶部标题
+        titles: [], // 标题数组
+        timeStr: '',
+        swiperInterval: 5000,
+        subInterval: 5000,
+        stayIndex: 1,
+        staySeconds: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+        showModal: false,
+        modalContent: '',
+        serverTitle: '',
+        bedInfoArray: [], // 床位二维数组
+        callData: [],
+        nurseInfoData: [],
+        boardRowsQty: 10,
+        boardData: {},
+        carouselCurrentIndex: 0,
+        autoplay: true,
+        deviceMAC: this.$route.query.mac,
+        websock: null,
+        hasRegister: false,
+        deviceId: ''
+      }
+    },
+    computed: {
+      mainAreaHeight() {
+        return Number(document.documentElement.clientHeight) - 60
+      }
+    },
+    mounted() {
+      // Message({
+      //   message: '设备宽度' + document.documentElement.clientWidth,
+      //   duration: 100000
+      // })
+      if (this.$route.query.mac !== undefined && this.$route.query.mac !== '') {
+        // 保存mac地址
+        this.$store.dispatch('user/setDeviceMAC', this.$route.query.mac)
+        // 初始化websocket
+        this.initWebSocket()
+      }
+      const _this = this
+      // 每分钟检查一次websocket状态，如果掉线，则重连
+      setInterval(function() {
+        if (_this.websock === null || _this.websock.readyState !== 1) {
+          _this.initWebSocket()
+        }
+      }, 60000)
+
+      // this.start()
+    },
+    methods: {
+      getBedInfo() {
+        API_Board.getBedInfo(this.$store.getters.partid).then(res => {
+          const json = res
+          this.serverTitle = (json['hospital_name'] || '') + json['part_name']
+          if (this.title === '') {
+            this.title = this.serverTitle
+          }
+          this.titles = []
+          this.titles.push({
+            index: 1,
+            title: this.serverTitle
+          })
+          this.titles.push({
+            index: 2,
+            title: this.serverTitle
+          })
+          this.getBoardInfo()
+          const itemRows = Math.floor(this.mainAreaHeight / 230)
+          const itemColumns = document.documentElement.clientWidth > 1200 ? 6 : 3
+          const itemCountPerScreen = itemRows * itemColumns
+          const mock = [...json['items']]
+          const screens = Math.ceil(mock.length / itemCountPerScreen)
+          this.bedInfoArray = []
+          for (var i = 1; i <= screens; i++) {
+            this.bedInfoArray.push(mock.slice((i - 1) * itemCountPerScreen, i * itemCountPerScreen >= mock.length
+              ? mock.length : i * itemCountPerScreen))
+          }
+        })
+      },
+      getBoardInfo() {
+        API_Board.getBoardInfo(this.$store.getters.partid).then(res => {
+          this.boardData = [...res]
+          res.forEach((bt, index) => {
+            this.titles.push({
+              index: bt.screen_title.board_index,
+              title: bt.screen_title.board_title
+            })
+          })
+
+          this.$nextTick(() => { // 加载完成自定义项之后，设置到固定屏幕.
+            if (this.stayIndex !== 0) {
+              this.$refs.carousel.setActiveItem(this.stayIndex - 1)
+            }
+          })
+        })
+      },
+      getTime() {
+        var date = new Date()
+        var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+        var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+        var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+        var timer = hour + ':' + minute + ':' + second
+        this.currentTime = timer
+      },
+      getCallList() {
+        API_Board.getCallingList(this.$store.getters.partid).then(res => {
+          this.callData = [...res]
+        })
+      },
+      getNurseInfoArray() {
+        API_Board.getNurseInfoArray(this.$store.getters.partid).then(res => {
+          this.nurseInfoData = [...res]
+        })
+      },
+      changeTitle(index) {
+        if (this.titles.length === 0) {
+          this.title = this.serverTitle
+        } else {
+          this.$set(this, 'title', this.titles[index].title)
+        }
+      },
+      swiperChange: function(index) {
+        if (this.staySeconds.length > 0) {
+          if (index === 0) { // 第一屏停留时间要算上子swiper项数停留时间
+            this.swiperInterval = Number(this.staySeconds[index]) * 1000 * (this.bedInfoArray.length + 1) // 此屏停留时间要根据子项数量来计算，加入子项有2屏，停留时间设置为3倍
+            this.subInterval = Number(this.staySeconds[index]) * 1000 // 子项轮换间隔时间
+          } else {
+            this.swiperInterval = Number(this.staySeconds[index]) * 1000
+          }
+          this.carouselCurrentIndex = index
+          if (this.titles.length > 0) {
+            this.changeTitle(index)
+          }
+        }
+      },
+      initWebSocket: function() {
+        var stockbase = deviceUrl.replace('http', 'ws')
+        this.websock = new WebSocket(stockbase + '/boardinfo/1/' + this.$store.getters.token)
+        this.websock.onopen = this.websocketonopen
+        this.websock.onerror = this.websocketonerror
+        this.websock.onmessage = this.websocketonmessage
+        this.websock.onclose = this.websocketclose
+      },
+      websocketonopen: function() {
+        console.log('WebSocket连接成功')
+        this.getBedInfo()
+        this.getCallList()
+        this.getNurseInfoArray()
+      },
+      websocketonerror: function(e) {
+        console.log('WebSocket连接发生错误')
+      },
+      websocketonmessage: function(e) {
+        const boardObj = JSON.parse(e.data)
+        if (boardObj.partId !== undefined && boardObj.partId > 0) { // 返回了partid,说明设备已注册
+          // 把科室Id设置到store
+          this.hasRegister = true
+          this.$store.dispatch('user/setPartId', boardObj.partId)
+          this.deviceId = boardObj.id
+          // 展示看板内容
+          new Promise((resolve, reject) => {
+            this.getBedInfo()
+            this.getCallList()
+            this.getNurseInfoArray()
+            resolve()
+          }).then(() => {
+            if (boardObj.config !== null && boardObj.config !== '') {
+              const boardconfig = JSON.parse(boardObj.config)
+              this.staySeconds = boardconfig.staySeconds // 轮换时间间隔
+              // 固定在某一屏
+              this.stayIndex = boardconfig.stayIndex
+              if (this.stayIndex === 1) {
+                this.swiperInterval = Number(this.staySeconds[this.stayIndex - 1]) * 1000 * (this.bedInfoArray.length + 1) // 此屏停留时间要根据子项数量来计算，加入子项有2屏，停留时间设置为3倍
+                this.subInterval = Number(this.staySeconds[this.stayIndex - 1 ]) * 1000 // 子项轮换间隔时间
+              }
+              if (this.stayIndex === 0) { // 0代表不固定 其他数字为固定屏幕序号
+                this.autoplay = true
+              } else {
+                this.autoplay = false
+              }
+              this.$refs.carousel.setActiveItem(this.stayIndex - 1)
+            } else {
+              this.autoplay = true
+            }
+          })
+        } else {
+          this.deviceId = boardObj.id
+          this.hasRegister = false
+        }
+      },
+      websocketclose: function(e) {
+        console.log('connection closed (' + e.code + ')')
+      },
+      unixToDate(unix, format) {
+        if (!unix) return unix
+        let _format = format || 'yyyy-MM-dd hh:mm:ss'
+        const d = new Date(unix * 1000)
+        const o = {
+          'M+': d.getMonth() + 1,
+          'd+': d.getDate(),
+          'h+': d.getHours(),
+          'm+': d.getMinutes(),
+          's+': d.getSeconds(),
+          'q+': Math.floor((d.getMonth() + 3) / 3),
+          S: d.getMilliseconds()
+        }
+        if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
+        for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+        return _format
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+  .el-main{
+    background: #fff;
+    padding: 5px;
+  }
+  .el-header{
+    background: #1cbbb4;
+    color: #ffffff;
+    text-align: center;
+    line-height: 60px;
+    font-size: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .el-main{
+    height:calc(100vh - 60px);
+  }
+  .el-carousel{
+    height:calc(100vh - 60px);;
+  }
+  .el-carousel-item{
+    background: #1cbbb4;
+  }
+  .bullshit {
+    position: relative;
+    text-align: center;
+    padding: 30px 0;
+    overflow: hidden;
+  &__oops {
+     font-size: 32px;
+     font-weight: bold;
+     line-height: 40px;
+     color: #1482f0;
+     opacity: 0;
+     margin-bottom: 20px;
+     animation-name: slideUp;
+     animation-duration: 0.5s;
+     animation-fill-mode: forwards;
+   }
+  &__headline {
+     font-size: 20px;
+     line-height: 24px;
+     color: #222;
+     font-weight: bold;
+     opacity: 0;
+     margin-bottom: 10px;
+     animation-name: slideUp;
+     animation-duration: 0.5s;
+     animation-delay: 0.1s;
+     animation-fill-mode: forwards;
+   }
+  &__info {
+     font-size: 13px;
+     line-height: 21px;
+     color: grey;
+     opacity: 0;
+     margin-bottom: 30px;
+     animation-name: slideUp;
+     animation-duration: 0.5s;
+     animation-delay: 0.2s;
+     animation-fill-mode: forwards;
+   }
+  &__return-home {
+     display: block;
+     float: left;
+     width: 110px;
+     height: 36px;
+     background: #1482f0;
+     border-radius: 100px;
+     text-align: center;
+     color: #ffffff;
+     opacity: 0;
+     font-size: 14px;
+     line-height: 36px;
+     cursor: pointer;
+     animation-name: slideUp;
+     animation-duration: 0.5s;
+     animation-delay: 0.3s;
+     animation-fill-mode: forwards;
+   }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(60px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  }
+
+</style>