<template>
  <div class="container">
      <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
      <div class="title-pack">{{timmingData.name}}</div>
      <div class="table-pack">
          <div class="tr">
              <div class="th-l">进车数</div>
              <div class="th-r">{{timmingData.busIn}}</div>
          </div>
          <div class="tr">
              <div class="th-l">出车数</div>
              <div class="th-r">{{timmingData.busOut}}</div>
          </div>
          <div class="info">
              设备报警信息：
              <div>&nbsp;</div>
              <swiper :options="swiperOption" ref="mySwiper">
                   <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
              </swiper>
          </div>
          <div class="time">时间：{{ timeNow }}</div>
      </div>
  </div>
  </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import Moment from 'moment'
    export default {
        name: 'StationInsulatingAnticorrosive',
        components: {
            swiper,
            swiperSlide
        },
        data () {
            return {
                width: 0,
                height: 0,
                zoom: 'scale(0)',
                // 工位实时数据
                timmingData: {},
                // 报警数据
                warningList: {},
                // 屏幕显示当前时间
                timeNow: '',
                // 定时器
                timer: '',
                // Data轮询定时器
                dataTimer: '',
                // swiper配置信息
                swiperOption: {
                    autoplay: {
                        delay: 5000 //轮播频率 5s
                    }
                }
            }
        },
        methods: {
            // 实时时间
            judgeTimeNow () {
                this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                this.timer = setInterval(() => {
                    this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                }, 1000)
            },
            //获取工位实时信息
            getData () {
                this.$fetch('led-controller/ledInfo-get', {ledNo: '4'}).then(res => {
                    console.log(res)
                    this.timmingData = res;
                    this.warningList = res.warningList;
                    console.log(this.warningList)
                })
            }
        },
        mounted () {
            setTimeout(() => {
                this.getData()
                // 实时时间
                this.judgeTimeNow()
                this.dataTimer = setInterval(() => {
                    this.getData()
                }, 60000)
                this.width = document.body.offsetWidth
                this.height = document.body.offsetHeight
                this.zoom = `scale(${this.width / 1710})`
                console.log(this.zoom)
            }, 0)
        },
        beforeDestroy () {
            if (this.timer) {
                clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
            }
            if (this.dataTimer) {
                clearInterval(this.dataTimer);  //在Vue实例销毁前，清除定时器
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        background-color: #111;
            .page-pack {
            width: 1710px;
            height: 860px;
            background-color: #111;

            .title-pack {
                width: 1710px;
                height: 100px;
                text-align: center;
                color: yellow;
                line-height: 100px;
                font-weight: bold;
                font-size: 60px;
            }

            .table-pack {
                overflow: hidden;

                .tr {
                    width: 1710px;
                    height: 102px;

                    .th-l {
                        width: 853px;
                        height: 100px;
                        border-top: 2px solid yellow;
                        border-right: 2px solid yellow;
                        float: left;
                        text-align: center;
                        color: yellow;
                        line-height: 100px;
                        font-weight: bold;
                        font-size: 60px;
                    }

                    .th-r {
                        width: 855px;
                        height: 100px;
                        border-top: 2px solid yellow;
                        float: left;
                        text-align: center;
                        color: yellow;
                        line-height: 100px;
                        font-weight: bold;
                        font-size: 60px;
                    }

                }

                .info {
                    width: 1710px;
                    height: 454px;
                    border-top: 2px solid yellow;
                    color: yellow;
                    font-weight: bold;
                    font-size: 60px;
                    .swiper-slide{
                        word-wrap: break-word;
                        word-break: break-all;
                    }
                }

                .time {
                    width: 1710px;
                    height: 100px;
                    border-top: 2px solid yellow;
                    color: yellow;
                    font-weight: bold;
                    line-height: 100px;
                    font-size: 60px;
                }
            }
        }
    }
</style>