<template>
  <div class="container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="content">
      <div class="c-left">
        <div class="left-header">
          <div>
            <img :src="titlePng" alt="logo" />
          </div>
        </div>
      </div>
      <div class="c-center">
        <div class="center-header">后悬装配线智慧系统</div>
      </div>
      <div class="c-right">
        <div class="right">
          <div class="right-head">
            <span>{{ time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content_main">
      <div class="content_main_calendar">
        <dv-border-box-12 class="items">
          <div style="margin: 5px 0 5px 10px">
            <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
            <span style="color: #fff"> 报警信息</span>
          </div>
          <el-row style="margin: 20px 40px 0px 40px;color: #000000">
            <el-col :span="17">
              <el-table
                  ref="multipleTable"
                  :data="tableData"
                  :header-cell-style="{background:'#000d3a',color:'#ffffff',fontSize: '18px'}"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  class="main"
                  tooltip-effect="dark"
                  height="830px"
                  style="width: 100%"
                  border
                  size="mini"
              @row-click="rowClick">
                <el-table-column align="center" type="index" label="序号" width="80px" />
                <el-table-column align="center" label="PLC名称" width="120px">
                  <template slot-scope="scope">
                    {{ scope.row.plc名称 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="PLC地址" width="200px">
                  <template slot-scope="scope">
                    {{ scope.row.plc地址 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="报警内容">
                  <template slot-scope="scope">
                    {{ scope.row.报警内容 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="工位" width="80px">
                  <template slot-scope="scope">
                    {{ scope.row.工位 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="状态" width="80px">
                  <template slot-scope="scope">
                    <span v-if="parseInt(scope.row.状态) === 1" style="color: #ff0000">报警</span>
                    <span v-else-if="parseInt(scope.row.状态) === 0" style="color: #00893d">解除</span>
                    <span v-else>未知状态</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="报警时间" width="200px">
                  <template slot-scope="scope">
                    {{ scope.row.报警时间 }}
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="6">
              <el-row>
                <dv-border-box-12 style="height: 350px; padding: 1rem;">
                  <div style="margin: 5px 0 5px 10px">
                    <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
                    <span style="color: #fff"> 增加报警</span>
                  </div>
                  <el-form ref="form_Add" :model="form_Add" :rules="rules_Add" label-position="left" label-width="110px">
                    <el-form-item label="设备名称" prop="plcName" style="display: inline-block;color: #fff">
                      <el-select v-model="form_Add.plcName" placeholder="设备名称" size="small" style="width:200px" @change="changeDevice">
                        <el-option
                            v-for="item in plcNameS"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                      </el-select>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="PLC地址" prop="plcAddress" style="display: inline-block">
                      <el-input v-model="form_Add.plcAddress" size="small" clearable style="width:200px"/>
                      <span style="color: #fff;font-size: 14px"> 如：DB3.DBX82.1</span>
                    </el-form-item>
                    <el-form-item label="工位" prop="opCode" style="display: inline-block">
                      <el-select v-model="form_Add.opCode" placeholder="工位" clearable size="small" style="width:200px">
                        <el-option
                            v-for="item in opCodeS"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="内容" prop="AlarmContent" style="display: inline-block">
                      <el-input type="textarea" v-model="form_Add.AlarmContent" style="width:200px" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit('form_Add')">添加报警</el-button>
                    </el-form-item>
                  </el-form>
                </dv-border-box-12>
              </el-row>
              <el-row>
                <dv-border-box-12 style="height: 350px; padding: 1rem;">
                  <div style="margin: 5px 0 5px 10px">
                    <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
                    <span style="color: #fff"> 取消报警</span>
                  </div>
                  <el-form ref="form_Edit" :model="form_Edit" :rules="rules_Edit" label-position="left" label-width="110px">
                    <el-form-item label="设备名称" prop="plcName" style="display: inline-block;color: #fff">
                      <el-input v-model="form_Edit.plcName" size="small" readonly style="width:200px"/>
                    </el-form-item>
                    <el-form-item label="PLC地址" prop="plcAddress" style="display: inline-block">
                      <el-input v-model="form_Edit.plcAddress" size="small" readonly style="width:200px"/>
                    </el-form-item>
                    <el-form-item label="工位" prop="opCode" style="display: inline-block">
                      <el-input v-model="form_Edit.opCode" size="small" readonly style="width:200px"/>
                    </el-form-item>
                    <el-form-item label="内容" prop="AlarmContent" style="display: inline-block">
                      <el-input type="textarea" v-model="form_Edit.AlarmContent" readonly style="width:200px" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="success" @click="onSubmit_Remove('form_Edit')">解除报警</el-button>
                      <el-button type="warning" @click="onSubmit_Delete('form_Edit')">删除报警</el-button>
                    </el-form-item>
                  </el-form>
                </dv-border-box-12>
              </el-row>
            </el-col>
          </el-row>
<!--          <el-button type="primary" style="position: absolute;left: 45px;bottom:-3px" @click="routeJump('')">返回主页</el-button>-->
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      titlePng: '',
      titlePng1: '',
      timer: '',
      timer1: '',
      time: 'time',
      tableData: [],
      opCodeS: [],
      plcNameS: [
        {
          label: '前悬',
          value: '前悬'
        },
        {
          label: '后悬',
          value: '后悬'
        }
      ],
      form_Add: {
        plcName: '',
        plcAddress: '',
        opCode: '',
        AlarmContent: ''
      },
      rules_Add: {
        plcName: [{ required: true, message: '请选择报警设备', trigger: 'change' }],
        plcAddress: [{ required: true, message: '请输入PLC地址', trigger: 'blur' }],
        opCode: [{ required: true, message: '请选择报警工位', trigger: 'change' }],
        AlarmContent: [{ required: true, message: '请输入报警内容', trigger: 'blur' }]
      },
      form_Edit: {
        plcName: '',
        plcAddress: '',
        opCode: '',
        AlarmContent: '',
        id: ''
      },
      rules_Edit: {
        plcName: [{ required: true, message: '请选择报警设备', trigger: 'change' }],
        plcAddress: [{ required: true, message: '请输入PLC地址', trigger: 'blur' }],
        opCode: [{ required: true, message: '请选择报警工位', trigger: 'change' }],
        AlarmContent: [{ required: true, message: '请输入报警内容', trigger: 'blur' }]
      },
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },

  created() {
  },
  mounted() {
    const that = this
    // 定时器部分
    this.timer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })

    this.getLogo()

    // 数据库读取部分
    this.getMainPlanCountInfoData()

    this.timer = setInterval(() => {
      this.getMainPlanCountInfoData()
    }, 3000)
    this.timer1 = setInterval(() => {
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
  },
  methods: {
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getNowTime() {
      const date = new Date()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      return (
        date.getFullYear() +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minute +
          ':' +
          second
      )
    },
    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%)'
    },
    getMainPlanCountInfoData() {
      const data = this.CreateData1('11', 'TV_报警信息_新增查询_HX')
      this.ExecDatabase(data).then((res) => {
        this.tableData = res.data
      })
    },
    changeDevice(value) {
      if (value === '前悬') {
        this.opCodeS = window.dt_Config.opCodeQX
      } else if (value === '后悬') {
        this.opCodeS = window.dt_Config.opCodeHX
      } else {
        this.opCodeS = []
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['报警内容', this.form_Add.AlarmContent]
          param[1] = ['plc地址', this.form_Add.plcAddress]
          param[2] = ['plc名称', this.form_Add.plcName]
          param[3] = ['状态', 1]
          param[4] = ['工位', this.form_Add.opCode]
          var Data = this.CreateData('12', 'TV_报警信息_新增_HX', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('增加成功！')
              this.getMainPlanCountInfoData()
              this.$refs[formName].resetFields()
            } else { this.$message.error('增加失败') }
          })
        } else {
          return false
        }
      })
    },
    rowClick(row) {
      console.log(row)
      this.form_Edit.AlarmContent = row.报警内容
      this.form_Edit.plcName = row.plc名称
      this.form_Edit.plcAddress = row.plc地址
      this.form_Edit.opCode = row.工位
      this.form_Edit.id = row.id
    },
    onSubmit_Remove(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['报警内容', this.form_Edit.AlarmContent]
          param[1] = ['plc地址', this.form_Edit.plcAddress]
          param[2] = ['plc名称', this.form_Edit.plcName]
          param[3] = ['状态', 0]
          param[4] = ['工位', this.form_Edit.opCode]
          var Data = this.CreateData('12', 'TV_报警信息_新增_HX', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('修改成功！')
              this.getMainPlanCountInfoData()
              this.$refs[formName].resetFields()
            } else { this.$message.error('修改失败') }
          })
        } else {
          return false
        }
      })
    },
    onSubmit_Delete(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['id', this.form_Edit.id]
          var Data = this.CreateData('12', 'TV_报警信息_删除_HX', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('删除成功！')
              this.getMainPlanCountInfoData()
              this.$refs[formName].resetFields()
            } else { this.$message.error('删除失败') }
          })
        } else {
          return false
        }
      })
    },
    routeJump(val, state) {
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.$router.push({
        path: '/'
      })
      this.$router.go(0)
    },
    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('../../十字图片.jpg', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  },
  computed: {},
  watch: {},
  props: {},
  directives: {
    scroll: {
      bind(
        el,
        {
          value: { delay, speed } = {
            delay: 0,
            speed: 50
          }
        }
      ) {
        //  delay 延迟  //speed滚动速度
        // 数据少不滚动
        // 无缝滚动
        let scrollInterval
        setTimeout(() => {
          scrollInterval = setInterval(goScroll, speed)
        }, delay)
        el.addEventListener('mouseenter', () => {
          clearInterval(scrollInterval)
        })
        el.addEventListener('mouseleave', () => {
          scrollInterval = setInterval(goScroll, speed)
        })

        function goScroll() {
          const scrollTotalHeight = JSON.parse(JSON.stringify(el.scrollTop))
          el.scrollTop++
          if (scrollTotalHeight === el.scrollTop) {
            el.scrollTop = 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #000d3a;
  color: white;

  .content {
    width: 100%;
    height: 6%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5px 0 20px 0;
    border-bottom: 2px solid #3d4a61;
    .c-left {
      width: 25%;
      background-color: #000d3a;
      .left-header {
        background-color: #000d3a;
        display: flex;
        align-items: center;
        margin-top: 20px;
        img {
          margin-left: 50px;
          height: 50px;
        }
        span {
          font-size: 3.5rem;
          margin-left: 1rem;
        }
      }
    }

    .c-center {
      width: 50%;
      background-color: #000d3a;
      box-sizing: border-box;
      .center-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 15px;
      }
    }

    .c-right {
      width: 25%;
      background-color: #000d3a;
      .right-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
      }
    }
  }
}
.right {
  width: 100%;
  height: 100%;
  background-color: #000d3a;
  padding-left: 1.5%;
  box-sizing: border-box;
  .right-head {
    height: 8%;
    display: flex;
    justify-content: flex-end;
    span {
      margin: 36px 25px 25px 25px;
      font-weight: 700;
      font-size: 35px;
      color: #fff;
    }
  }

  .main {
    height: 90%;
    .top {
      width: 100%;
      height: 35%;

      .cook-list {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
      }
      .spot-check {
        span {
          font-size: 1rem;
        }
      }
    }

    .center {
      width: 100%;
      height: 35%;

      .center-main {
        width: 100%;
        height: 90%;
        .center-left {
          height: 100%;
          .left-top {
            height: 50%;
            display: flex;

            div {
              width: 33.33%;
              height: 100%;
            }
          }
          .left-bottom {
            height: 50%;
          }
        }

        .center-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          ::v-deep .row-item {
            .ceil {
              padding: 0;
            }
          }
        }
      }
      .year-plan {
        span {
          font-size: 1rem;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 33%;
      .bottom-top {
        display: flex;
        width: 100%;
        height: 45%;
        .andong-left {
          width: 60%;
          height: 100%;
          > span {
            color: #fff;
          }

          .analyse {
            width: 100%;
            height: 90%;
          }
        }

        .andong-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          .call {
            width: 100%;
            height: 90%;
          }
        }
      }
      .bottom-bottom {
        width: 100%;
        height: 44.5%;

        ::v-deep .header-item {
          font-size: 6px;
          padding: 0;
        }
        ::v-deep .row-item {
          font-size: 4px;
          padding: 0;
          .ceil {
            padding: 0;
          }
        }
      }
    }
  }
}
.content_main {
  .content_main_calendar {
    margin: 20px 20px;
    .items {
      height: 940px;
      padding: 1rem;
      box-sizing: border-box;
      ::v-deep .el-form-item__label {
        color: #fff!important;
      }
      .item-head {
        height: 10rem;
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-content: center;
        box-sizing: border-box;
        padding-bottom: 1rem;

        background: linear-gradient(90deg, #043079 50%, transparent 0)
        repeat-x,
        linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y;
        background-size: 0px 10px, 20px 10px, 10px 0px, 10px 0px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;

        animation: linearGradientMove 0.3s infinite linear;
      }
      .opStatus_all {
        background-color: #21ffff;
        border-radius: 10px;
        font-size:20px;
        border: 1px solid #409eff;
        width: 260px ;
        height: 270px;
        margin-left: 45px;
        margin-bottom: 10px;
      }
      .opStatus_single {
        display: flex;
        justify-content: flex-start;
        margin: 10px 0 10px 10px;
      }
      .opStatus_single_value {
        width: 100px;
        background-color: #aaaaaa;
        text-align: left;
        padding: 0 3px;
        color: #000d3a;
        border-radius: 3px;
      }
      @keyframes linearGradientMove {
        100% {
          background-position: -20px 0, 20px 100%, 0 20px, 100% -20px;
        }
      }

      .item-content {
        box-sizing: border-box;
        margin-top: 50px;
        box-sizing: border-box;

        .bg {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }

        .btns {
          position: absolute;
          margin-left: 1rem;
          z-index: 999;

          div {
            border: 2px solid #244d71;
            background-color: #000d3a;
            color: #ffffff;
            padding: 0.5rem 2rem;
            margin: 0.5rem 0;
            font-size: 1.2rem;
          }
        }
      }

      .item-head > div {
        display: flex;
        align-items: center;
        width: 15rem;

        img {
          height: 4.5rem;
          width: 4.5rem;
          object-fit: cover;
        }

        .data {
          display: flex;
          flex-direction: column;

          .data-value {
            font-size: 1.5rem;
            font-weight: bold;
          }
        }
      }
    }
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table td, .el-table th.is-leaf {
  border: 1px solid #7b8eb4;
  font-size: 16px;
}
::v-deep.el-table tbody tr:hover > td {
  background-color: transparent !important
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  color: rgb(255, 255, 255) !important;
}
::v-deep .el-table td, .el-table th {
  padding: 8px 0 !important;
}
</style>
