<template>
  <div
      style="width: 99.3%; height: 99.5%; background-color: white;position: relative;border: 2px solid #9e9b9b; margin-left: 2px">
    <el-row style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-col :span="isShowCodeNumber ? 10 : 12" style="height: 100%;">
        <!--工步模块-->
        <el-row style="height: 50%;margin-left: 4px">
          <el-table
              :header-cell-style="{background:'#F5F5F5'}"
              :data="processList_table"
              style="margin-top: 10px; width: 100%; height: 100%; border: 1px solid #9e9b9b; font-weight: lighter"
              stripe
              height="99%"
              tooltip-effect="dark"
          >
            <el-table-column align="center" label="序号" type="index" width="80px"/>
            <el-table-column align="center" label="工序内容" min-width="120px">
              <template #default="scope">
                {{ scope.row.操作内容 }}
              </template>
            </el-table-column>
            <!--          <el-table-column align="center" width="145px"  label="工步属性">-->
            <!--            <template v-slot="scope">-->
            <!--              {{ scope.row.工步属性名称 }}-->
            <!--            </template>-->
            <!--          </el-table-column>-->
          </el-table>
        </el-row>
        <!--物料模块-->
        <el-row style="margin-top: 5px;margin-left: 4px; height: 48%">
          <el-table
              :data="materialList_table"
              :header-cell-style="{background:'#F5F5F5'}"
              style="margin-top: 10px; width: 100%; height: 95%; border: 1px solid #9e9b9b"
              stripe
              height="99%"
              :cell-class-name="cellClassName"
              @row-click="handleRowClick"
              tooltip-effect="dark"
          >
            <el-table-column align="center" label=" " type="index" show-overflow-tooltip width="30px"/>
            <el-table-column align="center" label="零件图号" width="150px">
              <template #default="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件名称">
              <template #default="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="用量" width="80px">
              <template #default="scope">
                {{ scope.row.零件数量 }}
              </template>
            </el-table-column>
            <!--            <el-table-column align="center" label="批次号" width="120">-->
            <!--              <template #default="scope">-->
            <!--                {{ scope.row.零件批号 }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column align="center" label="物料条码" min-width="130px">
              <template #default="scope">
                {{ scope.row.物料条码 }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
      <!--螺栓拧紧程序号显示模块-->
      <el-col v-if="isShowCodeNumber" :span="4" style="height: 100%;">
        <el-row style="height: 98%;margin-left: 10px;background-color:#fff;margin-top: 10px">
          <div class="top" style="height: 40%;font-size: 30px;text-align: center;position: relative">
            <div class="item">
              <div style="padding: 5px 0; background-color:rgb(245,245,245);font-size: 22px;font-weight: 700">
                关键步骤顺序号
              </div>
              <div style="font-size: 25px;background-color:rgb(255,255,255);height: 30px">
                {{
                  this.CodeNumber != 0 || this.CodeNumber ? (Number(this.CodeNumber) == 11 ? 'END' : this.CodeNumber + '号') : '无'
                }}
              </div>
            </div>
            <div class="item">
              <div style="padding: 5px 0; background-color:rgb(245,245,245);font-size: 22px;font-weight: 700">
                关键步骤名称
              </div>
              <div style="font-size: 25px;background-color:rgb(255,255,255);">
                {{ CodeNumberObj.螺栓名 ? CodeNumberObj.螺栓名 : '无' }}
              </div>
            </div>
            <div class="item" style="position: absolute;bottom: 55px;width: 100%;">
              <div style="padding: 5px 0; background-color:rgb(245,245,245);font-size: 22px;font-weight: 700">操作类型
              </div>
              <div style="font-size: 25px;height: 30px">{{ CodeNumberObj.类型名称 ? CodeNumberObj.类型名称 : '无' }}
              </div>
            </div>
            <div class="item" style="position: absolute;bottom: -10px;width: 100%;">
              <div style="padding: 5px 0; background-color:rgb(245,245,245);font-size: 22px;font-weight: 700">数量</div>
              <div style="font-size: 25px;height: 30px">{{ CodeNumberWorkNumber ? CodeNumberWorkNumber : '无' }}</div>
            </div>
          </div>
          <div class="data" style="height: 60%">
            <el-table
                :header-cell-style="{background:'#F5F5F5'}"
                :data="codeNumberList"
                style="margin-top: 10px; width: 100%; height: 100%; border: 1px solid #9e9b9b; font-weight: lighter"
                stripe
                height="99%"
                :cell-class-name="cellClassName2"
                tooltip-effect="dark"
            >
              <el-table-column align="center" label="顺序号" width="60">
                <template #default="scope">
                  {{ scope.row.OP本工位操作顺序号 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="螺栓名称">
                <template #default="scope">
                  {{ scope.row.零件名称 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="数量" width="70">
                <template #default="scope">
                  {{ scope.row.数量 }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </el-col>
      <el-col :span="isShowCodeNumber ? 10 : 12" style="padding: 10px; height: 100%">
        <div id="ww" style="width: 100%; height: 100%; position: relative">
          <img v-if="isShowCodeNumber" :src="pic" style="height: 640px; width: 640px">
          <img v-else :src="pic" style="height: 640px; width: 770px">
          <div v-if="this.$store.state.station.stationName == 'J07MA010'" style="width: 60%;font-size: 30px">
            设置温度:{{ MA010SetTemperature }}°
            <el-progress
                :text-inside="true"
                :format="format"
                :stroke-width="30"
                :percentage="MA010SetTemperature * 1.5"
                status="success"></el-progress>
            工件温度:{{ MA010Temperature }}°
            <el-progress
                :text-inside="true"
                :format="format"
                :stroke-width="30"
                :percentage="MA010Temperature * 1.5"
                status="exception"></el-progress>
          </div>
          <div
              v-for="(item, index) in tighteningPosition"
              :key="index"
              :class="changBP(item)"
              :style="{left:item.测量位置X + 'px', top: item.测量位置Y + 'px', height: item.控件高度 + 'px', width: item.控件宽度 + 'px'}"/>
          <mes-web-fun04 v-if="MesWebCode === 4"/>
          <mes-web-fun08 v-if="MesWebCode === 8"/>
          <mes-web-fun08 v-if="MesWebCode === 28"/>
          <mes-web-fun08 v-if="MesWebCode === 29"/>
          <mes-web-fun22 v-if="MesWebCode === 3"/>
          <el-button
              v-if="urls1.length != 0"
              type="warning"
              @click="imgViewerVisible = true"
              style="height: 80px;width: 200px;font-size: 26px;position: absolute;right: 20px;bottom: 95px">
            工艺防错图片
          </el-button>
          <el-button
              type="warning"
              @click="getImgCheckDirectFileList"
              style="height: 80px;width: 200px;font-size: 26px;position: absolute;right: 20px;bottom: 0px">操作指导文件
          </el-button>
          <!--加油量测试模块-->
          <div class="oilTestBox" v-if="$store.state.station.stationName == 'J07ET050'">
            <div
                style="background-color:#fff;width: 400px;height: 60px;font-size: 40px;line-height: 60px;margin: 20px 0">
              测量结果：{{ oilTestFrom.oilTestResult }}
            </div>
            <el-select
                v-model="oilTestFrom.engineType"
                filterable
                placeholder="请选择测试机型"
                size="small"
                :disabled="!oilTestFrom.plcIsManual">
              <el-option
                  v-for="item in engineList"
                  :key="item.发动机机型标志"
                  :label="item.发动机型号"
                  :value="item.发动机机型标志">
              </el-option>
            </el-select>
            <el-button
                :type="oilTestFrom.oilTestFinish ? 'success':'warning'"
                :disabled="!(oilTestFrom.plcIsManual && oilTestFrom.oilTestFinish)"
                @click="oilTestSubmit()">
              注油量测试
            </el-button>
          </div>
          <!--显示当前福田零件号-->
          <div class="fotonCodeBox" v-if="$store.state.station.stationName == 'J07MA080'">
            福田零件号：
            <div class="fotonPartsCodeBox">
              {{ fotonPartsCode }}
            </div>
          </div>
          <!--MA110 提示内容-->
          <div
              v-if="$store.state.station.stationName == 'J07MA110'"
              style="background-color:#fff;margin: 30px 0 0 0px;width: 63%;">
            <div style="color: red;font-size: 40px">
              装塔盖时请仔细操作，避免倒挡锁止弹簧和锁止片掉落入箱体内
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div id="smile" style="width: 100px; height: 100px; top: 180px; left: 1080px;position: absolute">
      <img v-if="smile === 1" style="width: 220px; height: 220px" src="../../assets/image/greenFace.png">
      <img v-else-if="smile === 2" style="width: 220px; height: 220px" src="../../assets/image/redFace.png">
      <img v-else-if="smile === 3" style="width: 196px; height: 220px" src="../../assets/image/MatchSuccess.png">
      <img v-else-if="smile === 4" style="width: 196px; height: 220px" src="../../assets/image/MatchFail.png">
      <img v-else src="../../assets/image/nothing.png">
    </div>
    <!--物料详细信息弹出框-->
    <el-dialog
        title="物料详细信息"
        :visible.sync="isShowDetailMaterial"
        :append-to-body="true"
        center
        width="500px"
        style="text-align: center">
      <div style="text-align: center">
        <el-form
            label-width="100px"
            style="width: 100%;margin: auto"
        >
          <div style="text-align: left;font-size: 22px">
            <div style="margin: 5px 0">
              <span class="detail-materia-name">物料名称：</span>
              <span class="detail-materia-value">{{ materialDetail.零件名称 }}</span>
            </div>
            <div style="margin: 5px 0">
              <span class="detail-materia-name">零件编号：</span>
              <span class="detail-materia-value">{{ materialDetail.零件编号 }}</span>
            </div>
            <div style="margin: 5px 0">
              <span class="detail-materia-name">SAP地址：</span>
              <span class="detail-materia-value">{{ materialDetail.SAP地址 }}</span>
            </div>
            <div style="margin: 5px 0">
              <span class="detail-materia-name">零件采用范围：</span>
              <span class="detail-materia-value">{{ materialDetail.零件采用范围PBOM }}</span>
            </div>
            <div style="margin: 5px 0">
              <span class="detail-materia-name">首检项目：</span>
              <span class="detail-materia-value">{{ materialDetail.首检项目 }}</span>
            </div>
            <div style="margin: 5px 0">
              <span class="detail-materia-name">零件号：</span>
              <span class="detail-materia-value">{{ materialDetail.零件号 }}</span>
            </div>
          </div>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-close" @click="isShowDetailMaterial = false">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
        title="指导文件列表"
        :visible.sync="imgCheckDialogFormVisible"
        :append-to-body="true"
        center
        width="850px"
        style="text-align: center">
      <div style="text-align: center">
        <el-form
            label-position="left"
            label-width="130px"
            style="width: 100%;margin: auto"
        >
          <el-table
              :data="imgCheckDirectFileList"
              size="small"
              max-height="365px"
              style="width: 100%; height: 280px; font-size: 20px; color: #000; border: 1px solid #9e9b9b"
          >
            <el-table-column
                label="排序"
                type="index"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column prop="文件名称" label="文件名称" align="center"/>
            <el-table-column prop="操作时间" label="导入时间" align="center"/>
            <el-table-column label="查看文件" align="center" width="150">
              <template slot-scope="scope2">
                <el-button type="warning" @click="imgCheckDirectFile(scope2.row)">打开指导文件</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-close" @click="imgCheckDialogFormVisible = false">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!--<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="urls1"/>-->
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import MesWebFun04 from './LowerRight/MesWebFun04.vue'
import MesWebFun08 from './LowerRight/MesWebFun08.vue'
import MesWebFun22 from './LowerRight/MesWebFun22.vue'
import axios from 'axios'

export default {
  components: {
    MesWebFun04,
    MesWebFun08,
    MesWebFun22,
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      imgViewerVisible: false,
      urls1: [],
      MesWebCode: Number(this.$store.state.station.MesWebCode),
      file_is_show: true,
      MA010Temperature: '',
      MA010SetTemperature: 6,
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      materialList_table2: [],
      codeNumberList: [], // 拧紧位置列表
      CodeNumber: 0, // 程序号
      CodeNumberWorkNumber: 0, // 程序号下第几课螺栓
      CodeNumberObj: { // 当前程序号与螺栓对应的数据对象
        螺栓名: '',
        数量: '',
        程序号: '',
        顺序号: '',
        类型名称: ''
      },
      oilTestFrom: {
        engineType: '', // 机型标志
        plcIsManual: false, // PLC手动点  手动是1 自动是0
        oilTestResult: 0, // 加油测试结果点
        oilTestFinish: true // 加油完成点
      },
      fotonPartsCode: '',
      engineList: [],
      imgCheckDialogFormVisible: false,
      imgCheckDirectFileList: [],
      NowBoltCount: 0, // 当前螺栓数量
      isShowCodeNumber: false, // 是否显示拧紧列表 根据是否存在查询结果来走
      isShowDetailMaterial: false, // 是否显示物料详细信息
      materialDetail: {} // 物料详细信息对象
    }
  },
  created() {
    // console.log('this.$store.state.station.MesWebCode', this.$store.state.station.MesWebCode)
    // this.initData()
    this.getFotonPartsCode()
    // 发送获取拧紧程序号请求
    setTimeout(() => {
      this.againGetWorkPosition()
    }, 1000)
    this.getSetTemperatureForm()
    // this.getImages()
    this.getCodeNumberByOpName()
    this.getEngineList()
    // setTimeout(() => {
    //   if (this.urls1.length > 0) {
    //     this.imgViewerVisible = true
    //   }
    // }, 1000)
  },
  computed: {
    // ...mapState({
    //   processList_table: state => this.$store.state.operationGuide.processList_table
    // })
    ...mapGetters([
      'processList_table',
      'materialList_table',
      'pic',
      'tighteningPosition',
      'smile',
      'tempDataObject',
      'engineValue'
    ])
  },
  watch: {
    // 监听变量数据的某个对象
    'tempDataObject.MA010Temperature': {
      handler(newV, oldV) {
        if (newV) {
          console.log('触发变动233', this.$store.state.station.tempDataObject)
          this.MA010Temperature = newV
        }
      },
      deep: true
    },
    // 监听变量数据的某个对象
    'tempDataObject.setTemperatureForm': {
      handler(newV, oldV) {
        if (newV) {
          console.log('触发变动')
          this.MA010SetTemperature = newV
        }
      },
      deep: true
    },
    // 顺序号
    'tempDataObject.CodeNumber': {
      handler(newV, oldV) {
        if (newV !== '') {
          console.log('拧紧顺序号', newV)
          this.CodeNumber = newV
          this.getCodeNumberData()
          if (newV != 0) {
            this.isShowCodeNumber = true
          }
        }
      },
      deep: true
    },
    // 当前拧紧数量
    'tempDataObject.CodeNumberWorkNumber': {
      handler(newV, oldV) {
        if (newV !== '') {
          console.log('程序号 下的第几课螺栓', newV)
          this.CodeNumberWorkNumber = newV
          this.getCodeNumberData()
        }
      },
      deep: true
    },
    // 当前拧紧螺栓数
    'tempDataObject.NowBoltCount': {
      handler(newV, oldV) {
        console.log('当前拧紧螺栓数', newV)
        this.NowBoltCount = newV
      },
      deep: true
    },
    // 注油结束
    'tempDataObject.oilTestEnd': {
      handler(newV, oldV) {
        console.log('注油结束', newV)
        if (newV == 1 || newV == true) {
          this.oilTestFrom.oilTestFinish = true
          this.oilTestFrom.engineType = ''
        }
      },
      deep: true
    },
    // 注油测试结果
    'tempDataObject.oilTestResult': {
      handler(newV, oldV) {
        console.log('注油测试结果', newV)
        this.oilTestFrom.oilTestResult = newV
      },
      deep: true
    },
    // 注油测试PLC手自动点
    'tempDataObject.oilTestPlcIsManual': {
      handler(newV, oldV) {
        console.log('注油测试PLC手自动点', newV)
        this.oilTestFrom.plcIsManual = newV == 1
        if (newV == 0) {
          this.oilTestFrom.oilTestFinish = true
        }
      },
      deep: true
    },
    initData() {
      this.publication.topic = window.g.mqttPublishTopic
      this.publication.payload = 'WEB|IniSingalToWeb|' + this.$store.state.station.stationName + '|' + '1'
      const result = window.g.mqttClient.doPublish(this.publication)
      console.log(result)
    },
    engineValue(newV, oldV) {
      // 刷新一下当前拧紧列表
      this.getCodeNumberByOpName()
      this.getFotonPartsCode()
    },
    // 预览指导文件按钮
    imgCheckDirectFile(row) {
      var param = []
      param[0] = ['ID', row.ID]
      var Data = this.CreateData('11', '基础数据_点检指导文件_查看文件', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data.length > 0) {
          this.pdfSrc = this.solvePdfUr1(response.data[0].指导文件)
          window.open(this.pdfSrc, '_blank')
          // this.imgCheckDialogFormVisible = true // 查看点检文件
          console.log(this.pdfSrc)
        } else {
          this.$message.error('该工位此点检项目无指导文件，请设置后查看')
        }
      })
    },
    // 说是先不用弹多相同名称工件了
    // materialList_table: {
    //   handler(newV, oldV) { // 对象式监听，立即监听，深度监听
    //     const param = []
    //     let valueList = []
    //     param[0] = ['工位号', this.$store.state.station.stationName]
    //     const Data = this.CreateData('11', '测量数据发动机在线状态_上个完成工件_查询', param)
    //     this.ExecDatabase(Data).then(response => {
    //       valueList = response.data
    //       // 开始逻辑 1
    //       // console.log('valueList', valueList)
    //       // console.log('newV', newV)
    //       for (let i = 0; i <= newV.length - 1; i++) {
    //         const iItem = newV[i]
    //         iItem.是否差异 = 1
    //         // 遍历旧数组查看是否有不同数据
    //         for (let j = 0; j <= valueList.length - 1; j++) {
    //           const JItem = valueList[j]
    //           // console.log(iItem)
    //           // console.log('标识', iItem, JItem)
    //           if (iItem.零件名称 === JItem.零件名称 && iItem.零件数量 === JItem.基本数量) {
    //             iItem.是否差异 = 0
    //           }
    //         }
    //         // console.log('this.$store.state.station.engineValue', this.$store.state.station.engineValue)
    //         // 操作完成后在判断该工件是否为多名称工件
    //         const param2 = []
    //         param2[0] = ['工位号', this.$store.state.station.stationName]
    //         param2[1] = ['机型', this.$store.state.station.engineValue.EngineType]
    //         param2[2] = ['物料名', iItem.零件名称]
    //         const Data = this.CreateData('11', '北汽福田BOM_判断多相同工件_查询', param2)
    //         this.ExecDatabase(Data).then(response => {
    //           if (response.data[0].count > 1) {
    //             this.$notify.warning({
    //               title: '提示！！',
    //               message: iItem.零件名称 + '为多相同名称工件，请注意',
    //               position: 'bottom-left',
    //               duration: 30 * 1000,
    //               offset: 170
    //             })
    //           }
    //         })
    //       }
    //       // console.log(newV)
    //       this.materialList_table2 = newV
    //     })
    //   },
    //   immediate: true, // 立即监听
    //   deep: true // 深度监听
    // }
  },
  methods: {
    changBP(item) {
      if (item.nowStateCode === 1) {
        return 'green'
      } else if (item.nowStateCode === 2) {
        return 'blue'
      } else if (item.nowStateCode === 0) {
        return 'red'
      } else if (item.nowStateCode === 10) {
        return 'redRectangle'
      } else if (item.nowStateCode === 11) {
        return 'greenRectangle'
      } else if (item.nowStateCode === 12) {
        return 'blueRectangle'
      } else if (item.nowStateCode === 4) {
        return 'StartWorkCircle'
      } else if (item.nowStateCode === 14) {
        return 'blinkRectangle'
      }
    },
    format(percentage) {
      return `${percentage / 1.5}°`
    },
    // Table表格选中某一行 弹出这一行的详细信息
    handleRowClick(row) {
      console.log(row)
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['型号', row.发动机型号]
      param[2] = ['物料号', row.物料号]
      const Data = this.CreateData('11', '北汽福田BOM_物料详细_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.isShowDetailMaterial = true
          this.materialDetail = response.data[0]
          console.log(response.data[0])
        } else {
          this.$notify.warning({
            title: '提示！！',
            message: '未查询到相关数据',
            position: 'bottom-right',
            duration: 30 * 1000,
            offset: 170
          })
        }
      })
    },
    againGetWorkPosition() {
      this.publication.topic = window.g.mqttPublishTopic
      this.publication.payload = 'WEB|againGetWorkPosition|' + this.$store.state.station.stationName + '|' + '1'
      window.g.mqttClient.doPublish(this.publication)
    },
    // 获取机型信息
    getEngineList() {
      const param = []
      const Data = this.CreateData('11', '北汽福田BOM_注油测试工位_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.engineList = response.data
      })
    },
    cellClassName({row, column}) {
      let classStr = ''
      // console.log(row)
      if (row.是否差异 === 1) classStr += 'noSame-row'
      if (row.是否完成扫描物料条码 === '0' && column.label === '物料条码') {
        classStr += ' materialList-row'
      } else {
      }
      return classStr
    },
    cellClassName2({row, column}) {
      // console.log('cellClassName2', row)
      if (row.OP本工位操作顺序号 < this.CodeNumber) {
        return 'materialList-row'
      }
      return
    },
    closeImgViewer() {
      this.imgViewerVisible = false
    },
    // 判断文件是否存在
    isExistFile(yourFileURL) {
      var flag
      var xmlhttp
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()// 其他浏览器
      } else if (window.ActiveXObject) {
        try {
          xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')// 旧版IE
        } catch (e) {
        }
        try {
          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')// 新版IE
        } catch (e) {
        }
        if (!xmlhttp) {
          window.alert('不能创建XMLHttpRequest对象')
        }
      }
      xmlhttp.open('GET', yourFileURL, false)
      xmlhttp.send()
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          flag = true
        } else {
          flag = false
        }
      }
      return flag
    },
    getImages() {
      for (let i = 1; i < 5; i++) {
        // console.log(666)
        const url = '../OpImages/' + this.$store.state.station.stationName + '-' + i + '.png'
        axios
            .get(url, {
              responseType: 'arraybuffer'
            })
            .then((res) => {
              console.log(res)
              this.layoutDetailsPng =
                  'data:image/jpeg;base64,' +
                  btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
              this.urls1.push(this.layoutDetailsPng)
            }).catch(error => {
          if (error.response.status === 404) {
            // 处理404错误
            //   console.log('请求资源不存在')
          } else {
            // 处理其他错误
            console.log('请求错误', error)
          }
        })
      }
    },
    getSetTemperatureForm() {
      if (this.$store.state.station.stationName == 'J07MA010') {
        const param = []
        param[0] = ['工位号', this.$store.state.station.stationName]
        param[1] = ['名称', '温度']
        const Data = this.CreateData('11', '北汽福田_持久化数据记录表_查询', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            this.MA010SetTemperature = response.data[0].数值
          } else {
            this.$notify.warning({
              title: '提示！！',
              message: '温度初始化失败',
              position: 'bottom-right',
              duration: 30 * 1000,
              offset: 170
            })
          }
        })
      }
    },
    // 根据工位号 获取工位拧紧螺栓
    getCodeNumberByOpName() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['机型编号', this.$store.state.station.engineValue.EngineType]
      param[2] = ['type', 2]
      const Data = this.CreateData('11', '北汽福田BOM_拧紧程序_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 12333)
        if (response.data.length > 0) {
          if (response.data[0].hasOwnProperty('result')) {
            if (!this.CodeNumber) {
              this.isShowCodeNumber = false
            }
            return
          }
          this.isShowCodeNumber = true
          this.codeNumberList = response.data
        }
      })
    },
    // 根据机型 获取福田零件号
    getFotonPartsCode() {
      const param = []
      param[0] = ['机型编号', this.$store.state.station.engineValue.EngineType]
      const Data = this.CreateData('11', '北汽福田BOM_福田零件号_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.fotonPartsCode = response.data[0].福田零件号
      })
    },
    // 查询指导文件列表
    getImgCheckDirectFileList(row) {
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['机型', this.$store.state.station.engineValue.EngineTypeID]
      var Data = this.CreateData('11', '基础数据_操作指南指导文件_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data.length > 0) {
          this.imgCheckDirectFileList = response.data
          this.imgCheckDialogFormVisible = true
        } else {
          this.$message.error('该工位无操作指南指导文件，请添加后查看')
        }
      })
    },
    // 根据程序号来获取螺栓数据
    getCodeNumberData() {
      console.log('this.CodeNumber', this.CodeNumber)
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['拧紧顺序号', this.CodeNumber]
      param[2] = ['零件号', this.$store.state.station.engineValue.EngineType]
      const Data = this.CreateData('11', '拧紧位置记录表_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.CodeNumberObj = response.data[0]
          this.getCodeNumberByOpName()
        } else {
          this.CodeNumberObj = { // 当前程序号与螺栓对应的数据对象
            螺栓名: '',
            数量: '',
            顺序号: '',
            类型名称: ''
          }
          // this.$message.warning('顺序号' + this.CodeNumber + '无此数据')
        }
        console.log(response)
      })
    },
    // 预览指导文件按钮
    imgCheckDirectFile(row) {
      var param = []
      param[0] = ['ID', row.ID]
      var Data = this.CreateData('11', '基础数据_操作指南指导文件_查看文件', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data.length > 0) {
          this.pdfSrc = this.solvePdfUr1(response.data[0].指导文件)
          window.open(this.pdfSrc, '_blank')
          // this.imgCheckDialogFormVisible = true // 查看点检文件
          console.log(this.pdfSrc)
        } else {
          this.$message.error('该工位此点检项目无指导文件，请设置后查看')
        }
      })
    },
    // 处理pdf 二进制流
    solvePdfUr1(content, type, fileName) {
      const bstr = atob(content)
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 确定解析格式，可能可以变成img，没有深入研究
      const blob = new Blob([u8arr], {type: 'application/pdf;chartset=UTF-8'})
      return window.URL.createObjectURL(blob)
    },
    // 注油测试提交
    oilTestSubmit() {
      // 判断当前机型是否选择  若选择携带机型则发请求到后台，后台发送注油测试
      if (!this.oilTestFrom.engineType) {
        this.$message.error('请先选择机型后进行注油测试！')
        return
      }
      this.publication.topic = window.g.mqttPublishTopic
      this.publication.payload = 'WEB|oilTestStart|' + this.$store.state.station.stationName + '|' + this.oilTestFrom.engineType
      window.g.mqttClient.doPublish(this.publication)
      // 并且将按钮颜色改为橙色禁用，等待加油完成后恢复
      this.oilTestFrom.oilTestFinish = false
    }
  }
}
</script>

<style scoped>
::v-deep.el-table .materialList-row {
  background: rgba(255, 255, 0, 0.5) !important;
}

::v-deep.el-table .el-table__body .noSame-row {
  color: #b97300 !important;
  font-family: 700 !important;
}

.blue {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/bule.png");
  background-size: 100% 100%;
}

.blueRectangle {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/bluerectangle.png");
  background-size: 100% 100%;
}

.red {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/red.png");
  background-size: 100% 100%;
}

.redRectangle {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/redrectangle.png");
  background-size: 100% 100%;
}

.green {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/green.png");
  background-size: 100% 100%;
}

.greenRectangle {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/greenrectangle.png");
  background-size: 100% 100%;
}

.StartWorkCircle {
  position: absolute;
  width: 45px;
  height: 45px;
  background-size: 100% 100%;
  background-image: url("../../assets/image/StartWorkCircle.gif");
}

.blinkRectangle {
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/blinkrectangle.gif");
  background-size: 100% 100%;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 22px;
  color: #2f2f2f;
}

.detail-materia-name {
  color: rgb(147, 18, 141);
  font-weight: 700;
}

.detail-materia-value {
  color: rgb(51, 23, 152);
  font-weight: 700;
}

::v-deep.el-table__body-wrapper.is-scrolling-none {
  max-height: 342px !important;
}

::v-deep.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden !important;
}

.fotonCodeBox {
  font-size: 38px;
  color: #000000;
  font-weight: 700;
  display: inline-block;
  padding: 7px;
  margin: 30px 0 0 10px;
  display: flex;
}

.fotonPartsCodeBox {
  background-color: #fff;
  padding: 10px;
  position: relative;
  top: -10px;
}

::v-deep .oilTestBox .el-input--small .el-input__inner {
  height: 50px;
  line-height: 32px;
  font-size: 15px;
}

::v-deep .oilTestBox .el-button {
  font-size: 25px;
}
</style>
