<template>
    <div class="first-station">
      <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);">
        <div style="height: 80px; width: 1918px;">
          <el-col :span="5">
            <div style="font-size: 1.5rem;margin-top: 15px;margin-left: 10px">
              <el-col :span="7">
                <img style="height: 50px;cursor: pointer" :src="titlePng"/>
              </el-col>
              <el-col :span="17">
                <div style="font-weight: bolder;line-height: 50px"></div>
              </el-col>
            </div>
          </el-col>
          <el-col :span="13">
            <div style="font-size: 3rem;color: white;text-align: center;margin-top: 15px">
              <span style="letter-spacing: 5px;font-weight: bolder">半壳冲压数字孪生数据平台</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="color: white;float: right;font-size: 1.7rem;margin-top: 10px;margin-right: 5%">
              <el-col :span="13">
                <img style="height: 50px;margin-top: 5px" :src="titlePng1"/>
              </el-col>
              <el-col :span="11">
                <span>{{this.year + '/'+ this.month + '/'+ this.day}}</span>
                <br>
                <span style="font-weight: bolder">{{(this.hour) + ':'+ (this.minute) + ':'+(this.second)}}</span>
              </el-col>
            </div>
          </el-col>
        </div>
      </el-row>
      <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);height: 1000px;padding: 10px 20px">
        <el-col :span="2" style="height: 960px;background-color: rgb(219 219 219)">
          <div style="display: flex;flex-direction: column">
            <div id="menu_1" class="show-label-title" @click="selectPage(1)">设备信息</div>
            <div id="menu_2" class="show-label-title" @click="selectPage(2)">产量信息</div>
            <div id="menu_3" class="show-label-title" @click="selectPage(3)">质量管理</div>
            <div id="menu_4" class="show-label-title" @click="selectPage(4)">刀具管理</div>
            <div id="menu_5" class="show-label-title" @click="selectPage(5)">能源管理</div>
            <div id="menu_6" class="show-label-title" @click="selectPage(6)">工艺管理</div>
            <div id="menu_7" class="show-label-title" @click="selectPage(7)">程序管理</div>
            <div id="menu_8" class="show-label-title" @click="selectPage(8)">报警管理</div>
            <div id="menu_999" class="show-label-title" @click="selectPage(999)">退出</div>
          </div>
        </el-col>
        <el-col :span="22" style="height: 960px;background-color: rgb(179 179 179)">
          <div style="background-color: #fff;margin: 0;">
            <deviceManagementPage ref="deviceManagementPage" v-if="pageIndexShow === 1"/>
            <planeManagementPage v-else-if="pageIndexShow === 2" :opname="station"/>
            <qualityAssurancePage v-else-if="pageIndexShow === 3" :opname="station"/>
            <toolManagementPage v-else-if="pageIndexShow === 4" :opname="station"/>
            <energyManagementPage v-else-if="pageIndexShow === 5" :opname="station"/>
            <processManagementPage v-else-if="pageIndexShow === 6" :opname="station"/>
            <program-management-page v-else-if="pageIndexShow === 7" :opname="station"/>
            <alarm-management-page v-else-if="pageIndexShow === 8" :opname="station"/>
          </div>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import { wsuri, opname, opnameBs, mqttIp, mqttPort } from '@/utils/request'
import mqtt from 'mqtt'
// import { formatTime } from '@/utils/tool'
import orderManagementPage from '@/views/page/orderManagementPage'
import qualityAssurancePage from '@/views/page/qualityAssurancePage'
import toolManagementPage from '@/views/page/toolManagementPage'
import planeManagementPage from '@/views/page/planeManagementPage'
import andonCallPage1 from '@/views/page/andonCallPage1'
import deviceManagementPage from '@/views/page/deviceManagementPage'
import processManagementPage from '@/views/page/processManagementPage'
import energyManagementPage from '@/views/page/energyManagementPage'
import programManagementPage from '@/views/page/programManagementPage'
import alarmManagementPage from '@/views/page/alarmManagementPage'
import axios from 'axios'
export default {
  components: {
    'orderManagementPage': orderManagementPage,
    'qualityAssurancePage': qualityAssurancePage,
    'toolManagementPage': toolManagementPage,
    'planeManagementPage': planeManagementPage,
    'andonCallPage1': andonCallPage1,
    'deviceManagementPage': deviceManagementPage,
    'processManagementPage': processManagementPage,
    'energyManagementPage': energyManagementPage,
    'alarmManagementPage': alarmManagementPage,
    'programManagementPage': programManagementPage
  },
  data() {
    return {
      titlePng: '',
      titlePng1: '',
      IsAllowConnect: true,
      mqttClient: null,
      flag: false,
      currentBeat: 0,
      planBeat: 0,
      AndonCallList: [],
      FeedRate: 100,
      SpindleSpeed: 100,
      pageType: 0,
      dialogVisible: false,
      websock: null,
      DTSRC: '',
      test1: '',
      programeNumber: 'LG00125A', // 配方 名称
      ProductNumber: 'LG00125B', // 产品编号
      productTypeNumber: 'LG00125C', // 产品型号代码
      operator: '员工1',
      shift: '班次一',
      dailyOutput: '1000',
      stationName: '', // 工位名称
      scanner: '', // 扫描枪
      ProductType: '', // 产品型号
      lightStatus: {
        auto: 0, // 自动模式
        manual: 0, // 手动模式
        emergency: 0, // 急停模式
        shutdown: 0, // 停机模式
        work: 0, // 加工状态
        ready: 0, // 待机状态
        off: 1, // 关机状态
        alarm: 0 // 报警状态
      },
      communicationStatus: '',
      activeName: 'first1',
      title: '',
      loading: false,
      tableData: [],
      tableData1: [],
      ID: '',
      station: '',
      stationOutput: '',
      stationNumberID: '',
      partID: '',
      titleEdit: '',
      date: new Date(),
      month: '',
      day: '',
      minute: '',
      hour: '',
      year: '',
      second: '',
      week: '',
      machineInfo_position: {},
      machineInfo_position1: {
        relative: [0, 0, 0, 0, 0],
        absolute: [0, 0, 0, 0, 0],
        machine: [0, 0, 0, 0, 0],
        distance: [0, 0, 0, 0, 0],
        feedRateAxis: [0, 0, 0, 0, 0],
        servoLoad: [0, 0, 0, 0, 0],
        spindleSpeedAxis: [0, 0, 0, 0, 0]
      },
      machineInfo_tool: {
        toolNum: 0,
        toolLife: 1,
        surplus: 100,
        toolCount: 0,
        thresholdValue1: 0,
        thresholdValue2: 0,
        residue: 0
      },
      machineInfo_time: {
        startTime: '0 H 0 M 0 S',
        cuttingTime: '0 H 0 M 0 S',
        workTime: '0 H 0 M 0 S',
        cyclingTime: '0 H 0 M 0 S'
      },
      machineInfo_work: {
        partCount: '0',
        spindleSpeed: '0',
        feedRate: '0',
        currentToolNum: '0',
        servoLoad: [0, 0, 0],
        programNumber: '[0]  [0]'
      },
      processColor: '#16c1a0',
      timer: null,
      timerInit: null,
      notifyPromise: Promise.resolve(),
      pageIndexShow: 1,
      pageIndexShow_Last: 1
    }
  },
  // 通过路由把index3中 点击的工位号 和 是否存在订单 值传进本页
  watch: {
    '$route': {
      handler(route) {
        this.station = this.$route.query.OP
        this.stationId = this.$route.query.工位号id
        this.DTSRC = 'http://127.0.0.1:8082/#/?' + this.station
        // this.DTSRC = 'http://192.168.63.15:8956/#/?' + this.station
      },
      immediate: true
    }
  },
  computed: {},
  mounted() {
    document.getElementById(`menu_1`).style.backgroundColor = '#fff'
    document.getElementById(`menu_1`).style.color = '#000000'
    this.initMqtt()
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
      this.year = new Date().getFullYear() + 1 < 10 ? '0' + (new Date().getFullYear() + 1) : new Date().getFullYear()
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.week = '日一二三四五六'.charAt(new Date().getDay())
    }, 1000)
    this.timer = setInterval(() => {
      this.init()
    }, 5000)
  },
  created() {
    this.getLogo()
  },
  beforeDestroy() {
    if (this.websock) this.websock.onclose(wsuri)
    clearInterval(this.timer)
    clearInterval(this.timerInit)
    if (this.mqttClient) this.mqttClient.end()
  },
  methods: {
    selectPage(pageIndex) {
      if (pageIndex === 999) {
        window.location.href = 'about:blank'
        window.close()
        return
      }
      document.getElementById(`menu_${pageIndex}`).style.backgroundColor = '#fff'
      document.getElementById(`menu_${pageIndex}`).style.color = '#000000'
      if (this.pageIndexShow_Last !== pageIndex) {
        document.getElementById(`menu_${this.pageIndexShow_Last}`).style.backgroundColor = '#ffaa13'
        document.getElementById(`menu_${this.pageIndexShow_Last}`).style.color = '#fff'
      }
      this.pageIndexShow = pageIndex
      this.pageIndexShow_Last = pageIndex
    },
    init() {
    },
    format(percentage) {
      return `剩余${percentage}%`
    },
    initWebsocket() { // 初始化websocket
      this.websock = new WebSocket(wsuri)// 这里面的this都指向vue
      this.websock.onopen = this.websocketopen
      this.websock.onmessage = this.websocketonmessage
      this.websock.onclose = this.websocketclose
      this.websock.onerror = this.websocketerror
    },
    websocketopen() { // 打开
      this.$message.success('连接成功!')
      this.websock.send('{<' + opname + '>}')
      setTimeout(() => {
        this.websockeSendMessage('B_C_DT_WebLoaded', this.station)
      }, 2000)
    },
    websocketonmessage(msg) { // 数据接收
      this.msg = msg
      try {
        // 返回的数据msg.data，包含了协议中的4部分9
        // TOBS??SCADADetailed?MES|Current|opName|电流^电压
        var arrays_signal = msg.data.split('|')
        var interFaceType = arrays_signal[0]
        var m_Opname = arrays_signal[1]
        var dataType = arrays_signal[2]
        var m_data = arrays_signal[3]
        if (this.pageIndexShow !== 1) return
        switch (interFaceType) {
          case 'MES':
            switch (dataType) {
              case 'C_B_MoveInfo':
                {
                  const J_data = JSON.parse(m_data)
                  this.$refs.deviceManagementPage.receiveMessage('C_B_MoveInfo', m_Opname, J_data)
                }
                break
              case 'C_B_TimeInfo':
                {
                  const J_data = JSON.parse(m_data)
                  this.$refs.deviceManagementPage.receiveMessage('C_B_TimeInfo', m_Opname, J_data)
                }
                break
              case 'C_B_WorkInfo':
                {
                  const J_data = JSON.parse(m_data)
                  this.$refs.deviceManagementPage.receiveMessage('C_B_WorkInfo', m_Opname, J_data)
                }
                break
              case 'C_B_StatusInfo':
                {
                  const J_data = JSON.parse(m_data)
                  this.$refs.deviceManagementPage.receiveMessage('C_B_StatusInfo', m_Opname, J_data)
                }
                break
              case 'C_B_QtyInfo':
                {
                  const J_data = JSON.parse(m_data)
                  this.$refs.deviceManagementPage.receiveMessage('C_B_QtyInfo', m_Opname, J_data)
                }
                break
            }
            break
        }
      } catch (exception) {
        var error = exception.toString()
        console.log(error)
      }
    },
    websocketclose() { // 关闭
      this.$message.error('WebSocket断开连接!重新连接')
      setTimeout(() => {
        this.initWebsocket()
      }, 2000)
    },
    websocketerror() { // 失败
      console.log('WebSocket连接失败')
    },
    websockeSendMessage(dataType, data) {
      this.websock.send(opnameBs + dataType + '|' + data)
    },
    searchTableOpName() {
      var param = []
      param[0] = ['stationNumber', this.stationId]
      var Data1 = this.CreateData('11', 'AAA临工看板_工位信息_查询数据', param)
      this.ExecDatabase(Data1).then(response => {
        this.stationName = response.data[0].工位名称
        this.station = response.data[0].工位号
      })
    },
    initMqtt() {
      const scope = this
      const connection = {
        host: mqttIp,
        port: mqttPort,
        endpoint: '/mqtt',
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: 'mqttjs_3be2c321' + new Date().getTime(), // 同一个ID 无法二次连接
        username: 'DT_WEB2',
        password: ''
      }
      const subscription = {
        topic: opname,
        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())
        }
      })
    },
    // 查询机床状态
    searchMachineStatus() {
      var param = []
      param[0] = ['opName', this.station]
      var Data = this.CreateData('11', 'LG_临工看板_设备管理_查询当前状态', param)
      this.ExecDatabase(Data).then(res => {
        if (res.data.length > 0) {
          const datum = res.data[0]
          if (datum.StatusCode === 5) {
            this.lightStatus.alarm = 0
            this.lightStatus.ready = 0
            this.lightStatus.work = 0
            this.lightStatus.off = 1
          } else {
            this.lightStatus.alarm = 0
            this.lightStatus.ready = 1
            this.lightStatus.work = 0
            this.lightStatus.off = 0
            if (datum.StatusCode === 1) {
              this.lightStatus.alarm = 0
              this.lightStatus.work = 1
            } else if (datum.StatusCode === 2) {
              this.lightStatus.alarm = 1
              this.lightStatus.work = 0
            }
          }
        }
      })
    },
    // 查询机床工作模式
    searchMachineStatus_WorkMode() {
      var param = []
      param[0] = ['opName', this.station]
      var Data = this.CreateData('11', 'LG_临工看板_设备管理_查询当前状态_工作模式', param)
      this.ExecDatabase(Data).then(res => {
        if (res.data.length > 0) {
          const datum = res.data[0]
          this.lightStatus.shutdown = datum.shutdown
          this.lightStatus.emergency = datum.emergency
          this.lightStatus.auto = datum.auto
          this.lightStatus.manual = datum.manual
        } else {
          this.lightStatus.shutdown = 0
          this.lightStatus.emergency = 0
          this.lightStatus.auto = 0
          this.lightStatus.manual = 0
        }
      })
    },
    searchTablePartId() {
      var param = []
      param[0] = ['stationNumber', this.stationId]
      var Data1 = this.CreateData('3', 'select top 1 * from [dbo].[LG_工位扫描信息视图] where opName = ' + `'OP70'` + 'AND [type] = 1 order by scanTime desc', param)
      this.ExecDatabase(Data1).then(response => {
        this.ProductNumber = response.data[0].partId
      })
    },
    searchCurrentTool(toolNum) {
      var param = []
      param[0] = ['所在工位号', this.station]
      param[1] = ['刀具号', toolNum]
      var Data1 = this.CreateData('11', 'LG_临工看板_刀具管理_当前刀具信息查询', param)
      this.ExecDatabase(Data1).then(response => {
        if (response.data.length > 0) {
          this.machineInfo_tool.thresholdValue1 = response.data[0].预警值1
          this.machineInfo_tool.thresholdValue2 = response.data[0].预警值2
          this.machineInfo_tool.toolLife = response.data[0].刀具额定寿命
          this.machineInfo_tool.toolNum = response.data[0].刀具代码
          this.machineInfo_tool.toolCount = response.data[0].已用寿命
          this.machineInfo_tool.surplus = Math.floor((1 - this.machineInfo_tool.toolCount / this.machineInfo_tool.toolLife) * 100 * 100) / 100
        }
      })
    },
    toolInfoColor() {
      const info = this.machineInfo_tool
      const toolLife = info.toolLife
      if (parseInt(toolLife) === 0) {
        this.processColor = '#16c1a0'
      } else {
        const toolCount = info.toolCount
        const thresholdValue1 = info.thresholdValue1
        const thresholdValue2 = info.thresholdValue2
        const used = toolCount / toolLife * 100
        console.log(used)
        if (used <= thresholdValue1) {
          this.processColor = '#16c1a0'
        }
        if (used > thresholdValue1 && used <= thresholdValue2) {
          this.processColor = '#efa52e'
        }
        if (used > thresholdValue2) {
          this.processColor = '#a30015'
        }
      }
    },
    showPage(type) {
      this.title = ''
      this.flag = true
      this.dialogVisible = true
      this.pageType = type
      switch (type) {
        case 1:
          this.title = '设备管理'
          break
        case 2:
          this.title = '计划管理'
          break
        case 3:
          this.title = '产品管理'
          break
        case 4:
          this.title = '质量管理'
          break
        case 5:
          this.title = '刀具管理'
          break
        case 6:
          this.title = 'Andon管理'
          break
        case 7:
          this.title = '工艺管理'
          break
        case 8:
          this.title = '能源管理'
          break
        case 9:
          this.title = '基础参数管理'
          break
        default:
          break
      }
    },
    // OEE图形
    drawLine501() {
      const myChart6395AArrr1 = this.$echarts.init(document.getElementById('myChart6395AArrr1'))
      myChart6395AArrr1.setOption(
        {
          tooltip: {
            formatter: '{a} <br/>{c} {b}'
          },
          series: [
            {
              name: '进给倍率',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 200,
              endAngle: -20,
              splitNumber: 6,
              radius: '100%',
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.20, '#ff4500'], [0.80, '#27d500'], [1, '#ff4500']],
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              axisTick: { // 坐标轴小标记
                length: 5, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', // 默认透���
                  shadowBlur: 1
                }
              },
              splitLine: { // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 1,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 14,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 5
                },
                offsetCenter: [0, '40%']
              },
              detail: {
                formatter: this.machineInfo_work.feedRate + '%',
                shadowBlur: 3,
                offsetCenter: [0, '70%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff',
                  fontSize: 16
                }
              },
              data: [{ name: '进给倍率', value: this.machineInfo_work.feedRate }]
            }
          ]
        }
      )
      const myChart6395dadadsAArrr1 = this.$echarts.init(document.getElementById('myChart6395dadadsAArrr1'))
      myChart6395dadadsAArrr1.setOption(
        {
          tooltip: {
            formatter: '{a} <br/>{c} {b}%'
          },
          series: [
            {
              name: '主轴倍率',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 200,
              endAngle: -20,
              splitNumber: 6,
              radius: '100%',
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.20, '#ff4500'], [0.80, '#27d500'], [1, '#ff4500']],
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              axisTick: { // 坐标轴小标记
                length: 5, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', // 默认透���
                  shadowBlur: 1
                }
              },
              splitLine: { // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 1,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 14,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 5
                },
                offsetCenter: [0, '40%']
              },
              detail: {
                formatter: this.machineInfo_work.spindleSpeed + '%',
                shadowBlur: 3,
                offsetCenter: [0, '70%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff',
                  fontSize: 16
                }
              },
              data: [{ name: '主轴倍率', value: this.machineInfo_work.spindleSpeed }]
            }
          ]
        }
      )
    },
    // 获取Andon实时表
    searchTableAndon() {
      var param = []
      param[0] = ['opname', this.station]
      var Data = this.CreateData('11', 'LG_临工看板_Andon管理_当前Andon', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.solveAndonList(this.station, info.AndonName + '呼叫', info.TriggerTime)
          }
        }
      })
    },
    // 接收andon
    solveAndonList(opName, AndonName, TriggerTime) {
      const _this = this
      this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(function() {
        _this.$notify({
          title: opName + '-' + AndonName,
          dangerouslyUseHTMLString: true,
          type: 'warning',
          duration: 3000,
          position: 'bottom-right',
          message: `
<div>
  <span style="font-size: 16px">内容：</span>
  <span style="font-size: 16px">${AndonName}</span>
</div>
<div>
  <span style="font-size: 16px">时间：</span>
  <span style="font-size: 16px">${TriggerTime}</span>
</div>
`
        })
      })
    },
    // 接收报警 展示
    solveAlarm(opName, content, time) {
      this.$notify({
        title: opName + '-设备报警',
        dangerouslyUseHTMLString: true,
        type: 'danger',
        duration: 3000,
        position: 'bottom-right',
        message: `
<div>
  <span style="font-size: 16px">内容：</span>
  <span style="font-size: 16px">${content}</span>
</div>
<div>
  <span style="font-size: 16px">时间：</span>
  <span style="font-size: 16px">${time}</span>
</div>
`
      })
    },
    // 查询基础参数 计划时间
    searchBasicParams() {
      this.planBeat = 0
      var param = []
      param[0] = ['opname', this.station]
      var Data = this.CreateData('11', 'LG_临工看板_设备管理_基础参数时间查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.planBeat = response.data[0].产品额定时间
        }
      })
    },
    // 监听基础参数设定成功后 查询
    setBasicParamSuccess() {
      this.searchBasicParams()
    },
    closePage() {
      window.location.href = 'about:blank'
      window.close()
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../MESlogo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../run.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng2 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  }
}
</script>
<style scoped>
  .is-selected {
    color: #1989FA;
  }
  .first-station{
    width:1920px;
    height: 1080px;
    background-color: rgb(8, 31, 72);
    color: white;
    background-size: 100%;
  }
  /*警示灯提示文字*/
  .leftTips{
    float: right;
    font-size: 1.2rem;
    font-weight: bolder;
    margin-right: 30px;
    color: white;
    margin-top: -3px
  }
  .rightTips{
    float: right;
    margin-right: 30px;
    font-size: 1.2rem;
    font-weight: bolder;
    color: white;
    margin-top: -3px
  }
  /*警示灯*/
  .lamp{
    width: 20px;
    height: 20px
  }
  .data-box1 {
    color: white;
    position: absolute;
    -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
    -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
    box-shadow: inset 0 0 30px rgb(24, 78, 135);
  }
  .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;}
  .indicatorBlock {
    float: left;
    margin: 12px 0 0 30px;
    width: 15px;
    height: 26px;
    background-color: #016eea
  }
  .indicatorText {
    margin: 16px 0 0 20px;
    float: left;
    font-size:20px
  }
</style>
<style scoped lang="scss">
  .show-label-title{
    cursor: pointer;
    border-radius: 5px;
    font-size: 28px;
    margin: 10px 5px;
    background-color: #ffad1b;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #00893d;
  }
  /*去掉导航栏*/
  /*::v-deep .el-tabs__nav-scroll{*/
  /*  display: none;*/
  /*}*/
  /*导航栏边框样式*/
  /*::v-deep[data-v-44dbd77e] .el-tabs--card>.el-tabs__header .el-tabs__item {*/
  /*  border: 2px solid white;*/
  /*}*/
  ::v-deep .yellowLight {background-color:yellow;width: 20px;height: 20px;border-radius: 15px;text-align: center;height: 20px;width: 20px;margin: 0px 0px 0px 10px}
  ::v-deep .greyLight {
    background-color:white;
    width: 20px;height: 20px;border-radius: 15px;text-align: center;height: 20px;width: 20px;margin: 0px 0px 0px 10px
  }
  ::v-deep .greenLight {background:green;width: 20px;height: 20px;border-radius: 15px;text-align: center;height: 20px;width: 20px;margin: 0px 0px 0px 10px }
  ::v-deep .redLight {background:red;width: 20px;height: 20px;border-radius: 15px;text-align: center;height: 20px;width: 20px;margin: 0px 0px 0px 10px}

  /*::v-deep .el-tabs__item.is-active{*/
  /*  background: white;*/
  /*}*/
  /*::v-deep .el-tabs__header{*/
  /*  border: 0px solid #E4E7ED;*/
  /*  margin: 0px;*/
  /*}*/
  /*::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{*/
  /*  border: 0px solid #E4E7ED;*/
  /*}*/
  /*::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item{*/
  /*  border: 1px solid #E4E7ED;*/
  /*  text-align: center;*/
  /*}*/
  /*::v-deep .el-tabs__item{*/
  /*  font-size: 28px;*/
  /*  width: 260px;*/
  /*  height: 45px;*/
  /*  border-radius: 5px;*/
  /*}*/
  ::v-deep .el-divider--horizontal{
     margin: 5px 0;
   }
  ::v-deep .el-dialog__title {
    font-size: 26px;
  }
  ::v-deep .el-form-item__label{
    color: #000000;
  }
  .andonCallList {
    width: 200px;
    height: 80px;
    font-size: 20px;
    text-align: center;
    margin-left: 5px;
    line-height: 2;
    color: #fff
  }
  .alarmInfo{
    font-size: 20px;
  }
</style>
<style>
  /*右下角设备加工信息样式*/
  HTML{
    overflow: auto;
  }
  body{
    margin:0;
    padding:0;
    position: relative;
    /*background: #012a61;*/
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    background: #012a61 url(../../img/bg.jpg) no-repeat 0 0;
    background-size: 100%;
    color: white;
    /*background: rgba(0, 0, 0, 0.2);*/
  }
  /*css主要部分的样式*/
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 5px; /*对垂直流动条有效*/
    height: 5px; /*对水平流动条有效*/
  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #dedede;
    /*background-color: #ffffff;*/
    border-radius: 2px;
  }

  /*定义滑块颜色、内阴影及圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #b1b1b1;
  }

  /*定义两端按钮的样式*/
  ::-webkit-scrollbar-button {
    display: none;
  }

  /*定义右下角汇合处的样式*/
  ::-webkit-scrollbar-corner {
    background: #dedede;
  }
</style>
