<template>
  <div id="body"
    :style="{ 'width': `${style.width}px`, 'height': `${style.height}px`, 'transform': `${style.transform}` }"
    class="background">
    <el-row style="z-index: 999">
      <div style="height: 80px; width: 100%">
        <img style="position: absolute;top: 0;left: 0;width: 100%;height: 80px;" src="@/assets/titleImg.png" alt="">
        <div id="htmlTitleImg">
          <div style="display: flex">
            <div style="line-height: 80px;margin: 0 100px 0 590px;font-size: 43px;">数字孪生机床智能可视化监控</div>
            <div class="center-head">
              {{ year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second }}
            </div>
          </div>
        </div>
      </div>
    </el-row>
    <el-row>
      <div style="position: relative;height: 1080px;">
        <!--WEBGL渲染位置-->
        <div style="height: 100%; width: 100%;position: fixed;z-index: auto;top: 0px;left: 0px">
          <d-m-t ref="dmtCom" containerHeight="1080px" containerWidth="100%" style="z-index: 999;" />
        </div>
        <!-- 滚动列表 -->
        <div class="scroll-list">
          <div class="scroll-content">
            <div class="data-box" :key="item.Name" v-for="item in DeviceData_Config">
              <span class="borderLeft1 boxBorder"></span>
              <span class="borderLeft2 boxBorder"></span>
              <span class="borderRight1 boxBorder"></span>
              <span class="borderRight2 boxBorder"></span>
              <div style="width: 100%; height: 20px;">
                <div class="indicatorText">
                  <div class="data-title-left"></div>
                  <span>{{ item.Name }}_{{ item.Status }}</span>
                </div>
              </div>
              <div class="item-list">
                <div class="item-list-item">
                  <div class="item-list-item-name">设备模式：</div>
                  <div class="item-list-item-value">{{ item.CurMode }}</div>
                </div>
                <div class="item-list-item">
                  <div class="item-list-item-name">程序号：</div>
                  <div class="item-list-item-value">{{ item.Program }}</div>
                </div>
                <div class="item-list-item">
                  <div class="item-list-item-name">转速：</div>
                  <div class="item-list-item-value item-list-item-name-red">{{ item.Speed }}</div>
                </div>
                <div class="item-list-item">
                  <div class="item-list-item-name">报警代码：</div>
                  <div class="item-list-item-value">{{ item.AlarmNO }}</div>
                </div>
              </div>
              <table class="ZB">
                <tr>
                  <td style="width: 14%;">名称</td>
                  <td style="width: 17%;">值</td>
                </tr>
                <tr v-for="(ZBItem, index) in item.Axis" :key="index">
                  <td>{{ ZBItem.AxisName }}</td>
                  <td>{{ ZBItem.AxisValue }}</td>
                </tr>
              </table>
            </div>
            <!-- 复制一份相同的内容用于无缝滚动 -->
            <div class="data-box" :key="item.Name + '_copy'" v-for="item in DeviceData_Config">
              <span class="borderLeft1 boxBorder"></span>
              <span class="borderLeft2 boxBorder"></span>
              <span class="borderRight1 boxBorder"></span>
              <span class="borderRight2 boxBorder"></span>
              <div style="width: 100%; height: 20px;">
                <div class="indicatorText">
                  <div class="data-title-left"></div>
                  <span>{{ item.Name }}_{{ item.Status }}</span>
                </div>
              </div>
              <div class="item-list">
                <div class="item-list-item">
                  <div class="item-list-item-name">设备模式：</div>
                  <div class="item-list-item-value">{{ item.CurMode }}</div>
                </div>
                <div class="item-list-item">
                  <div class="item-list-item-name">程序号：</div>
                  <div class="item-list-item-value">{{ item.Program }}</div>
                </div>
                <div class="item-list-item">
                  <div class="item-list-item-name">转速：</div>
                  <div class="item-list-item-value item-list-item-name-red">{{ item.Speed }}</div>
                </div>
                <div class="item-list-item">
                  <div class="item-list-item-name">报警代码：</div>
                  <div class="item-list-item-value">{{ item.AlarmNO }}</div>
                </div>
              </div>
              <table class="ZB">
                <tr>
                  <td style="width: 14%;">名称</td>
                  <td style="width: 17%;">值</td>
                </tr>
                <tr v-for="(ZBItem, index) in item.Axis" :key="index">
                  <td>{{ ZBItem.AxisName }}</td>
                  <td>{{ ZBItem.AxisValue }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mqttIp, mqttPort } from '@/utils/request'
import mqtt from 'mqtt'
import DMT from '@/components/DMT/index'

export default {
  components: {
    DMT
  },
  name: 'MingLuo',
  data: function () {
    return {
      year: '',
      month: '',
      day: '',
      hour: '',
      minute: '',
      second: '',
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      DeviceData_Config: window.DeviceData_Config,
      mqttData: {
        关节位置: {
          J1: { 位置R1: 0, 位置R2: 0 },
          J2: { 位置R1: 0, 位置R2: 0 },
          J3: { 位置R1: 0, 位置R2: 0 },
          J4: { 位置R1: 0, 位置R2: 0 },
          J5: { 位置R1: 0, 位置R2: 0 },
          J6: { 位置R1: 0, 位置R2: 0 },
          J7: { 位置R1: 0, 位置R2: 0 }
        },
        关节ATI: {
          J1: { ATI力R1: 0, ATI力R2: 0 },
          J2: { ATI力R1: 0, ATI力R2: 0 },
          J3: { ATI力R1: 0, ATI力R2: 0 },
          J4: { ATI力R1: 0, ATI力R2: 0 },
          J5: { ATI力R1: 0, ATI力R2: 0 },
          J6: { ATI力R1: 0, ATI力R2: 0 }
        }
      }
    }
  },
  mounted() {
    const scope = this
    this.initMqtt()
    this.getNowTime()
    this.timer_2 = setInterval(this.getNowTime, 1000)

    scope.setScale()
    window.addEventListener('resize', () => {
      scope.setScale()
    })
  },
  beforeDestroy() {
    clearInterval(this.timer_2)
  },
  methods: {
    getNowTime() {
      const date = new Date()
      this.year = date.getFullYear()
      this.month = this.zeroFill(date.getMonth() + 1)
      this.day = this.zeroFill(date.getDate())
      this.hour = this.zeroFill(date.getHours())
      this.minute = this.zeroFill(date.getMinutes())
      this.second = this.zeroFill(date.getSeconds())
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    initMqtt() {
      const scope = this
      const connection = {
        host: mqttIp,
        port: mqttPort,
        endpoint: '/mqtt',
        clean: true,
        connectTimeout: 4000,
        reconnectPeriod: 4000,
        clientId: 'mqttjs_3be2c321' + new Date().getTime(),
        username: 'DT_WEB1',
        password: ''
      }
      const subscription = {
        topic: window.dt_Config.mqttTopic,
        qos: 0
      }
      const { host, port, endpoint, ...options } = connection
      const connectUrl = `ws://${host}:${port}${endpoint}`
      try {
        this.mqttClient = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('MQTT connect error', error)
      }

      this.mqttClient.on('connect', () => {
        this.$message.success('加载完成，连接MQTT服务器成功！')
        console.log('MQTT Connection succeeded!')
        const { topic, qos } = subscription
        this.mqttClient.subscribe(topic, { qos }, (error, res) => {
          if (error) {
            console.log('Subscribe to topics error', error)
          }
        })
      })
      this.mqttClient.on('error', error => {
        console.log('MQTT Connection failed', error)
        try {
          scope.$message.error('MQTT服务器连接失败')
          if (scope.IsAllowConnect) {
            scope.$message.warning('重新连接MQTT服务器')
            console.log('重新连接MQTT服务器')
            setTimeout(function () {
              scope.initMqtt()
            }, 5000)
          }
        } catch (exception) {
          const error = exception.toString()
          scope.$message.error('MQTT服务器出现错误,关闭连接' + error)
        }
      })
      this.mqttClient.on('message', (topic, message) => {
        try {
          scope.websocketonmessage({ data: message.toString() })
        } catch (exception) {
          console.log(exception.toString())
        }
      })
    },
    websocketonmessage(msg) {
      this.msg = msg
      var arrays_signal = msg.data.split('|')
      var interFaceType = arrays_signal[0]
      var dataType = arrays_signal[1]
      var m_data = arrays_signal[2]
      switch (interFaceType) {
        case 'MES':
          switch (dataType) {
            case 'C_B_DeviceInfo': {
              {
                const S_data = JSON.parse(m_data)
                console.log('S_data', S_data)
                if ('opName' in S_data) {
                  if (S_data.opName === 'AXIS_R01') {
                    if ('AXIS_ACT' in S_data) {
                      this.mqttData.关节位置.J1.位置R1 = S_data.AXIS_ACT[0]
                      this.mqttData.关节位置.J2.位置R1 = S_data.AXIS_ACT[1]
                      this.mqttData.关节位置.J3.位置R1 = S_data.AXIS_ACT[2]
                      this.mqttData.关节位置.J4.位置R1 = S_data.AXIS_ACT[3]
                      this.mqttData.关节位置.J5.位置R1 = S_data.AXIS_ACT[4]
                      this.mqttData.关节位置.J6.位置R1 = S_data.AXIS_ACT[5]
                      this.mqttData.关节位置.J7.位置R1 = S_data.AXIS_ACT[6]
                    }
                    if ('POS_F' in S_data) {
                      this.mqttData.关节ATI.J1.ATI力R1 = S_data.POS_F[0]
                      this.mqttData.关节ATI.J2.ATI力R1 = S_data.POS_F[1]
                      this.mqttData.关节ATI.J3.ATI力R1 = S_data.POS_F[2]
                      this.mqttData.关节ATI.J4.ATI力R1 = S_data.POS_F[3]
                      this.mqttData.关节ATI.J5.ATI力R1 = S_data.POS_F[4]
                      this.mqttData.关节ATI.J6.ATI力R1 = S_data.POS_F[5]
                    }
                  }
                  if (S_data.opName === 'AXIS_R02') {
                    if ('AXIS_ACT' in S_data) {
                      this.mqttData.关节位置.J1.位置R2 = S_data.AXIS_ACT[0]
                      this.mqttData.关节位置.J2.位置R2 = S_data.AXIS_ACT[1]
                      this.mqttData.关节位置.J3.位置R2 = S_data.AXIS_ACT[2]
                      this.mqttData.关节位置.J4.位置R2 = S_data.AXIS_ACT[3]
                      this.mqttData.关节位置.J5.位置R2 = S_data.AXIS_ACT[4]
                      this.mqttData.关节位置.J6.位置R2 = S_data.AXIS_ACT[5]
                      this.mqttData.关节位置.J7.位置R2 = S_data.AXIS_ACT[6]
                    }
                    if ('POS_F' in S_data) {
                      this.mqttData.关节ATI.J1.ATI力R2 = S_data.POS_F[0]
                      this.mqttData.关节ATI.J2.ATI力R2 = S_data.POS_F[1]
                      this.mqttData.关节ATI.J3.ATI力R2 = S_data.POS_F[2]
                      this.mqttData.关节ATI.J4.ATI力R2 = S_data.POS_F[3]
                      this.mqttData.关节ATI.J5.ATI力R2 = S_data.POS_F[4]
                      this.mqttData.关节ATI.J6.ATI力R2 = S_data.POS_F[5]
                    }
                  }
                }
              }
              break
            }
          }
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  font-family: "Microsoft YaHei", sans-serif;
}

HTML {
  overflow: auto;
}

body {
  margin: 0;
  padding: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
  font-family: MiSans Bold, serif;
}

// 晶体管字体
@font-face {
  font-family: electronicFont;
  src: url('../assets/font/DS-DIGI.TTF');
}


::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(14, 50, 97);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(10, 35, 82);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  background: #dedede;
}

#body {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}

.background {
  width: 1920px;
  height: 1080px;
  background-color: #082048;
  color: white;
  background-size: 100%;
  z-index: 99999;
}

.scroll-list {
  width: 100%;
  padding: 15px;
  position: relative;
  top: 670px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-flex;
  animation: scroll 50s linear infinite;
  min-width: 100%;
  will-change: transform;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50%));
  }
}

.data-box {
  position: relative;
  width: 220px;
  height: 290px;
  margin-bottom: 20px;
  margin-right: 60px;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: top;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  border: 1px solid #3c73ba;
  white-space: normal;

  .item-list {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 14px;

    .item-list-item {
      display: flex;
      height: 30px;
      line-height: 30px;

      .item-list-item-name {
        width: 75px;
        font-weight: 700;
        text-align: right;
      }

      .item-list-item-value.item-list-item-name-red {
        background-color: rgba(4, 45, 133, .5);
        font-family: electronicFont;
        width: 60px;
        color: #ff0000;
        font-size: 25px;
        padding: 0 5px;
        text-align: left;
        overflow: hidden;
      }
    }

  }

  .ZB {
    border-collapse: collapse;

    td {
      border: 1px solid #f4faf9;
      text-align: center;
      font-size: 13px;
    }
  }
}

.boxBorder {
  position: absolute;
  padding: 10px;
  border-style: solid;
  border-color: rgb(71, 209, 226);
}

.borderLeft1 {
  border-width: 2px 0 0 2px;
  top: -2px;
  left: -2px;
}

.borderLeft2 {
  border-width: 2px 2px 0 0;
  top: -2px;
  right: -2px;
}

.borderRight1 {
  border-width: 0 0 2px 2px;
  bottom: -2px;
  left: -2px;
}

.borderRight2 {
  border-width: 0 2px 2px 0;
  bottom: -2px;
  right: -2px;
}

.indicatorText {
  margin-top: 5px;
  font-weight: 700;
  width: 100%;
  color: #fff !important;
  font-size: 18px;
  height: 30px;
  text-align: left;
  background-image: url('../assets/miniTitle.png');
  background-size: 100% 100%;
}

.data-title-left {
  float: left;
  width: 15px;
  height: 13px;
  font-family: "Microsoft YaHei", sans-serif;
  background-color: #036be9;
  margin: 6px 10px 0 20px;
}

#htmlTitleImg {
  display: flex;
  justify-content: center;
  font-family: "Microsoft YaHei", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 45px;
  text-align: center;
  height: 80px;
  line-height: 60px;
  letter-spacing: 5px;
  margin-left: 80px;
  background: url('/src/assets/titleImg.png') no-repeat center center;
  background-size: 100% 100%;
}

.center-head {
  width: 300px;
  height: 60px;
  position: relative;
  left: 240px;
  font-size: 25px;
  top: 0px;
  display: flex;
  text-align: center;
  letter-spacing: 0px;
}
</style>
