-打印bug修改

admin

2024-10-15 6d313a4a6f9f9d7ea65ec50ab0d4491e595edb97

 jcdm-ui/src/views/main/cfkb/Instructions/index.vue

@@ -1,270 +1,913 @@
<template>
  <div class="app-container">
    <el-row :gutter="3">
      <el-col :span="6">
        <el-card shadow="always">
          CFMOTO
    <el-row :gutter="5">
      <el-col :span="7">
        <el-card shadow="never">
          <span class="head-font">工位编号 : {{headContent.processesCode}}</span>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="always">
          {{productCode}}
      <el-col :span="7">
        <el-card shadow="never">
          <span class="head-font">工位名称 : {{headContent.processesName}}</span>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card shadow="always">
          装副轴,拨叉
      <el-col :span="10">
        <el-card shadow="never">
          <span class="head-font">产品序列号 : {{headContent.sfcCode}}</span>
          <!--         <el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input>-->
          <!--         <el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button>-->
          <el-button type="primary" style="float: right" icon="el-icon-search" size="mini" @click="serialLink">串口连接</el-button>
          <el-button @click="clearClick" style="float: right" type="danger" size="mini">清除</el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="3" style="margin-top: 5px">
      <el-col :span="6">
        <div style="height: 600px;overflow: auto;">
          <div  class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
            <span class="centered">居中文本</span>
          </div>
          <div v-for="(item,index) in tableData" :key="item.sort" class="outerDiv" :id="'outerDiv'+index">
            <div class="innerDiv1">
              <div class="innerDiv2">
                <span class="content_left">{{ index+1 }}</span>
              </div>
              <div class="content_right">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <el-col :span="20">
          <el-card style="height: 600px" shadow="always">
            <el-row style="height: 100px">
              {{address}}
            </el-row>
            <el-row style="height: 400px">
              <el-image style="height: 390px;width: 960px" :src="src"></el-image>
<!--              {{src}}-->
            </el-row>
            <el-row style="height: 100px">
              <el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
              <el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="height: 600px" shadow="always">
            <el-row style="height: 100px;margin-top: 100px">
              <el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
            </el-row>
            <el-row style="height: 50px;margin-top: 5px">
              <el-button type="primary" @click="changeProducts('2V91')" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
            </el-row>
            <el-row style="height: 50px;">
              <el-button type="primary" @click="changeProducts('191')" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
            </el-row>
            <el-row style="height: 50px;">
              <el-button type="primary" @click="changeProducts('0JWF')" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
            </el-row>
          </el-card>
        </el-col>

    </el-row>
    <el-row :gutter="5" style="margin-top: 5px">
      <el-col :span="12">
        <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
          <el-tab-pane name="first">
            <span slot="label"> <a class="el-icon-date"></a>首页</span>
            <el-col :span="24">
              <div>
                <div style="display: none" id="printMe">
                  <br>
                  <p style="margin-left: 43px">{{printInfoData.partNumber}}</p>
                  <p style="margin-left: 43px">{{printInfoData.hardwareVersion}}</p>
                  <p style="margin-left: 43px">{{printInfoData.softwareVersion}}</p>
                  <br>
                  <br>
<!--                  <span style="font-size: 30px;font-weight: bold;margin-left: 40px;">GEELY</span><br>-->
                  <img style="width: 140px;height: 20px;margin-left: 25px" :src="require('@/assets/images/a8963a24920640508e96150a053fc41.png')">
                  <span style="margin-left: 60px">{{printInfoData.printModel}}</span><br>
                  <span style="margin-left: 63px">{{printInfoData.supplierCode}}</span><br>
                  <span style="margin-left: 40px">{{printInfoData.partNumber}}</span><br>
                  <span style="font-size: 10px;margin-left: 17px;">{{text1}}</span><br>
                  <span style="font-size: 10px;margin-left: 52px">MADE IN CHINA</span><br>
                  <br>
                  <br>
                  <br>
                  <div ref="canvasWrapper" id="canvasWrapper1" style="display: flex;justify-content: center;margin-top: -27px;"></div>
                  <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 9px">P{{printInfoData.partNumber}}#T{{text1}}#V{{printInfoData.supplierCode}}#S{{printInfoData.softwareVersion}}#H{{printInfoData.hardwareVersion}}#NBMS#</span>
<!--                  <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 9px">P{{printInfoData.partNumber}}#T{{text1}}#V{{printInfoData.supplierCode}}#S{{// printInfoData.softwareVersion}}#H{{printInfoData.hardwareVersion}}#NBMS#</span>-->
                  <br>
                  <br>
                  <div ref="canvasWrapper" id="canvasWrapper2" style="display: flex;justify-content: center;margin-top: -27px"></div>
                  <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 9px">P{{printInfoData.partNumber}}#T{{text1}}#V{{printInfoData.supplierCode}}#S{{printInfoData.softwareVersion}}#H{{printInfoData.hardwareVersion}}#NBMS#</span>
<!--                  <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 9px">P{{printInfoData.partNumber}}#T{{text1}}#V{{printInfoData.supplierCode}}#S{{// printInfoData.softwareVersion}}#H{{printInfoData.hardwareVersion}}#NBMS#</span>-->
                </div>
                <el-button @click="print1">打印</el-button>
                <el-button style="display: none" @click="test1">生成二维码</el-button>
                <el-button style="display: none" @click="test2">生成二维码</el-button>

              </div>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        <el-input v-model="weightValue" placeholder="请输入称重数据"></el-input>
        <el-button @click="enterWeighing">录入</el-button>
      </el-col>
    </el-row>
    <el-dialog v-dialogpop-up :title="title" :visible.sync="open1" width="1000" append-to-body>
      <el-row
        type="flex"
        class="row-bg"
        justify="center"
        v-show="portsList.length === 0"
      >
        <el-col :span="7">
          <div style="margin-top: 400px">
          <span style="display: block">
            仅支持Chrome 89+或者Edge 89+浏览器(安全上下文（HTTPS）中可用)
          </span>
            <el-button type="primary" @click="obtainAuthorization">授权</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form
        v-show="portsList.length > 0"
        ref="form1"
        :model="form1"
        label-width="100px">
        <el-row>
          <el-col :span="24"
          ><div>
            <el-form-item label="串口">
              <el-select
                v-model="form1.port"
                filterable
                placeholder="请选择串口"
                :disabled="isDisable"
              >
                <el-option
                  v-for="item in portsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="波特率">
              <el-autocomplete
                popper-class="my-autocomplete"
                v-model="form1.baudRate"
                :fetch-suggestions="querySearch"
                placeholder="请输入波特率"
                :disabled="isDisable"
              >
                <i class="el-icon-edit el-input__icon" slot="suffix"> </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="数据位">
              <el-select
                v-model="form1.dataBits"
                placeholder="请选择数据位"
                :disabled="isDisable"
              >
                <el-option label="7" value="7"></el-option>
                <el-option label="8" value="8"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="停止位">
              <el-select
                v-model="form1.stopBits"
                placeholder="请选择停止位"
                :disabled="isDisable"
              >
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="校验位">
              <el-select
                v-model="form1.parity"
                placeholder="请选择校验位"
                :disabled="isDisable"
              >
                <el-option label="None" value="none"></el-option>
                <el-option label="Even" value="even"></el-option>
                <el-option label="Odd" value="odd"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="流控制">
              <el-select
                v-model="form1.flowControl"
                placeholder="请选择流控制"
                :disabled="isDisable"
              >
                <el-option label="None" value="none"></el-option>
                <el-option label="HardWare" value="hardware"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="显示历史">
              <el-switch
                v-model="form1.isShowHistory"
                @change="loadHistory"
              ></el-switch>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                title="清空历史"
                @click="clearHistory"
              ></el-button>
            </el-form-item>
            <el-form-item label="发送区设置" v-show="isShowSendArea">
              <el-form-item label="发送格式">
                <el-radio-group v-model="form1.type">
                  <el-radio label="1">ASCII</el-radio>
                  <el-radio label="2">HEX</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="发送信息">
                <el-input type="textarea" v-model="form1.sendMsg"></el-input>
              </el-form-item>
              <el-button type="primary" @click="sendCommon">发送</el-button>
            </el-form-item>

            <el-form-item>
              <el-button :type="btnType" @click="connectBtn">{{
                  btnText
                }}</el-button>
              <el-button type="info" @click="obtainAuthorization"
              >新增授权</el-button
              >
            </el-form-item>
          </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
import {getIpv4, listStationConf} from "@/api/main/sc/stationConf";
import {
  noPageListFormulaChild,
  workpieceRelease,
  yzUpdateResults,
  yzUpdateTighteningFormula
} from "@/api/main/bs/formulaChild/formulaChild";
import MySerialPort from "@/utils/MySerialPort";
import USBDevice from "@/utils/usb.json";
import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection";
import {
  addTighteningParameters, enterWeighing,
  replaceAssemblyCode,
  saveCampaignTimeParameters,
  yzAddBasicParameters,
} from "@/api/main/da/paramCollection/paramCollection";
import QRCode from "qrcodejs2";
import {listEquipmentArchives} from "@/api/main/em/equipmentArchives/equipmentArchives";

export default {
  name: "Instructions",
  name: "stationTerminal",
  data() {
    return {
      queryParams: {
      printInfoData: {
        softwareVersion: 'SW001.001', //软件版本号
        hardwareVersion: 'HW001.001', //硬件版本号
        printModel: 'H2155D', //型号
        partNumber: '9900200136', //零部件号
        supplierCode: '993983', //供应商编码
      },
      weightValue: '',
      showInput: true,
      serialPortContent: '',
      // 查询参数
      formulaChildParams: {
        pageNum: 1,
        pageSize: 10,
        productCode: null,
        processesCode: null,
      },
      productCode: '2V91',
      tableData: [{
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: '222222222222',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        sort: '2',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      address: '',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      // src: 'file:///D:/img/qt.jpg'
      // 配方配置子信息表格数据
      formulaChildList: [],
      ipAddress: '',
      imgSrc: '',
      headContent: {
        processesCode: 'OP520',
        processesName: '成品下线',
        sfcCode: '',
        yzSfcCode: '',
      },
      workpieceInformation: {
        workOrderNo: null,
        productCode: null,
        productModel: null,
        productName: null,
        beat: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sfcCode: null,
      },
      // 查询参数
      StationConfQueryParams: {
        pageNum: 1,
        pageSize: 10,
        ipAddress: null,
      },
      cakeLamp: {
        plcState: 1, //plc
        scannerState: 1, //扫码枪
        InPlace: 0, //工件到位
        scanFinish: 0,
        startWork: 0,
        release: 0 //允许放行
      },
      content: '',
      activeName: 'first',
      url: "ws://192.168.2.76:8080/websocket/message/",
      message: "",
      text_content: "",
      ws: null,
      inputValue: '9',

      intervalId: null,
      open1: false,
      input: "",
      keepReading: true,
      form1: {
        baudRate: "115200",
        dataBits: "8",
        stopBits: "1",
        parity: "none",
        flowControl: "none",
        desc: "",
        type: "1",
        isShowHistory: false,
      },
      btnType: "primary",
      btnText: "连接串口",
      restaurants: [],
      portsList: [],
      isShowSendArea: false,
      readType: 1,
      title: "",

    };
  },
  created() {
    this.tableData = []
  },
  mounted() {
    this.changeProducts(this.productCode)
    // this.autoShow()
      passingStationForm: {},
      originalArray: [],
      text1: '',
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
    this.intervalId = null
    this.exit();
  },
  created() {
    this.initStation();
    // this.getStationConfList();
    // setTimeout(() => {
    //   this.connectWebsocket();
    // }, 3000);
  },
  mounted() {
    if ("serial" in navigator) {
      this.myserialport = new MySerialPort();
      this.getPorts();
      navigator.serial.addEventListener("connect", (e) => {
        this.$message.success("设备已连接");
        this.getPorts();
      });
      navigator.serial.addEventListener("disconnect", (e) => {
        this.$message.error("设备已断开");
      });
      this.restaurants = this.loadAll();
    } else {
      this.$message.error(
        "当前为HTTP模式或者浏览器版本过低，不支持网页连接串口"
      );
    }
  },
  computed: {
    isDisable() {
      return this.btnType === "danger";
    },
  },
  methods: {
    // 定时触发
    autoShow() {
      const _this = this
      this.intervalId = setInterval(() => {
        _this.setBg()
      }, 2000)
    },
    setImg(index) {
      this.address = this.tableData[index].address
      this.src = this.tableData[index].img
    },
    setBg() {
      if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
        this.setImg(0)
        document.getElementById('outerDiv0').style.background = 'yellow'
        for (let j = 1; j < this.tableData.length; j++) {
          document.getElementById('outerDiv' + j).style.background = 'white'
        }
        return;
      }
      for (let i = 0; i < this.tableData.length - 1; i++) {
        if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
          this.setImg(i+1)
          document.getElementById('outerDiv' + i).style.background = 'green'
          document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
          return;
        }
      }
    },
    getUpOrDown(index) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
          this.setImg(i + index)
          document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
          document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
          return;
        }
      }
    },
    backClick(){
      this.getUpOrDown(-1)
    },
    nextStep(){
      this.getUpOrDown(1)
    },
    processDocuments(){

    },
    changeProducts(val){

      this.productCode = val
      const _this = this

      /** 查询配方配置子信息列表 */
      this.queryParams.productCode = val;
      listFormulaChild(this.queryParams).then(response => {
        // this.tableData = [];
        this.tableData = response.rows;
        this.$nextTick(() => {
          clearInterval(this.intervalId);
          document.getElementById('outerDiv0').style.background = 'yellow'
          this.setImg(0)
          this.autoShow()
        })


    initializePrintInfoData(){
      listEquipmentArchives().then(response => {
        this.printInfoData.softwareVersion = response.rows[0].equipmentCode
        this.printInfoData.hardwareVersion = response.rows[0].equipmentName
        this.printInfoData.supplierCode = response.rows[0].equipmentSpec
        this.printInfoData.printModel = response.rows[0].equipmentBrand
        this.printInfoData.partNumber = response.rows[0].equipmentTypeName
      });
    },
  },
    enterWeighing(){
      if(this.headContent.sfcCode ==='' || this.weightValue === '' ){
        this.$message.error('参数不全！');
      }else {
        let param = {
          productBarcode: this.headContent.sfcCode,
          weightValue: this.weightValue,
        }
        enterWeighing(param).then(response => {
          this.$message('录入完成！');
        });
      }
    },
    serialLink() {
      this.open1 = true
    },
    bindYzSfc(){
      if(this.headContent.sfcCode!==""&&this.headContent.yzSfcCode!==""){
        let param = {
          sfcCode: this.headContent.sfcCode,
          locationCode: this.headContent.processesCode,
          yzSfcCode: this.headContent.yzSfcCode
        }
        this.$message('可以绑定！');
        replaceAssemblyCode(param).then(response => {

        });
      }
    },

    Release(){
      // this.$message('portsList！'+this.portsList.length);
      if(this.btnType === "danger"){
        this.$message('连接了!！');

      }else {
        this.$message('mei连接了！');

      }

    },
    serialPortMethod(value){
      let formulaChildParams = {
        scanBarcode: value,
        sfcBarcode: this.headContent.sfcCode,
        workOrderNo: this.workpieceInformation.workOrderNo,
        productCode: "1P102S",
        locationCode: this.headContent.processesCode,
        collectionTime: new Date()
      }
      yzUpdateResults(formulaChildParams).then(response => {
        this.getListFormulaChild()
      });
    },
    rowStyle({ row }) {
      if (row.results === 'OK') {
        return 'background-color: PaleGreen';
      } else if (row.results === 'NG') {
        return 'background-color: LightSalmon';
      }
      return '';
    },
    /** 查询配方配置子信息列表 */
    getListFormulaChild() {
      this.formulaChildParams.productCode = "1P102S"
      this.formulaChildParams.processesCode = this.headContent.processesCode
      console.log(this.formulaChildParams)
      noPageListFormulaChild(this.formulaChildParams).then(response => {
        this.formulaChildList = response.rows;
        if (this.formulaChildList.length >0){
          let pos = 0
          const tempArr = this.formulaChildList.filter(x=> 'OK' === x.results)
          if (tempArr.length>0){
            pos = tempArr.length
            this.$nextTick(() => {
              let temp33 = document.getElementsByClassName('el-table__row')
              console.log('temp33',temp33)
              console.log('len',temp33.item(pos))
              if (temp33.length > 0){
                console.log('1111111111111111')
                let arr = temp33[pos-1]
                console.log('srr',arr)
                arr.scrollIntoView({ block: 'center' })
              }
            })
          }

        }
      });
    },
    endClear(){

    },
    changeMenu(tab, event) {
      console.log(tab, event);
    },
    clearClick(){
      this.$message('这是一条清除消息提示');
      this.headContent.sfcCode = null
    },
    scanCompleted(){
      this.$message('扫码完成'+this.content);
      this.headContent.sfcCode = this.content
      this.queryParams.sfcCode = this.content
      this.getList()
      this.getListFormulaChild()
      this.cakeLamp.scanFinish = 1
      this.cakeLamp.startWork = 1

    },
    /** 查询工单列表 */
    async getList() {
      // this.getListFormulaChild()
      // this.addOverStationCollection()
      this.print1()
    },
    print1() {
      // 新开页面打印
      let newStr = document.getElementById('printMe').innerHTML;
      let newWin = window.open('', '_blank');
      newWin.document.body.innerHTML = newStr;
      newWin.print();
      return false;
    },
    test1(){
      document.getElementById('canvasWrapper1').innerHTML = '';
      this.$nextTick(() => {
        let qrCode = new QRCode('canvasWrapper1',{
          width: 120,
          height: 120,
          text: 'P'+this.printInfoData.partNumber+'#T'+ this.text1 +'#V'+this.printInfoData.supplierCode+'#S'+this.printInfoData.softwareVersion+'#H'+this.printInfoData.hardwareVersion+'#NBMS#',
          colorDark: '#000',
          colorLight: '#fff'
        })
      }
      )
    },
    test2(){
      document.getElementById('canvasWrapper2').innerHTML = '';
      this.$nextTick(() => {
          let qrCode = new QRCode('canvasWrapper2',{
            width: 120,
            height: 120,
            text: 'P'+this.printInfoData.partNumber+'#T'+ this.text1 +'#V'+this.printInfoData.supplierCode+'#S'+this.printInfoData.softwareVersion+'#H'+this.printInfoData.hardwareVersion+'#NBMS#',
            colorDark: '#000',
            colorLight: '#fff'
          })
        }
      )
    },

    /** 入站增加过站采集记录 **/
    addOverStationCollection(){
      this.passingStationForm = {
        id: null,
        // workOrderNo: this.workpieceInformation.workOrderNo,
        productCode: "1P102S",
        locationCode: this.headContent.processesCode,
        // model: this.workpieceInformation.productModel,
        productBarcode: this.headContent.sfcCode,
        sfcCode: this.headContent.sfcCode,
        inboundTime: new Date()
      }
      addPassingStationCollection(this.passingStationForm).then(response => {});
      yzAddBasicParameters(this.passingStationForm).then(response => {});
    },
    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    send() {
      if (this.ws) {
        this.ws.send(this.message);
      } else {
        alert("未连接到服务器");
      }
    },

    initStation: async function () {

      await getIpv4().then(response => {
        this.initializePrintInfoData();

        this.StationConfQueryParams.ipAddress = response.msg
        console.log('查询到本工位IP为' + this.StationConfQueryParams.ipAddress)
      });
      await listStationConf(this.StationConfQueryParams).then(response => {
        let rows = response.rows[0]
        if (response.rows.length === 0) {
          // this.$message('该工位没有配置IP，请联系管理员配置IP');
          return
        }
        this.headContent.processesName = rows.processesName
        this.headContent.processesCode = rows.processesCode
        console.log('设置工位编码' + this.headContent.processesCode)

      });
      this.conCom()
      console.log('websocket连接工位为' + this.headContent.processesCode)
      const wsuri = this.url + this.headContent.processesCode;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        this.$message('websocket连接成功！');
      };
      this.ws.onmessage = function (event) {
        if (event.data === "IN") {
          self.cakeLamp.InPlace = 1;
        } else if (event.data === "IN0") {
          self.cakeLamp.InPlace = 0;
        } else if (event.data === "OUT") {
          console.log("out")

          const param = {
            workOrderNo: self.workpieceInformation.workOrderNo,
            productCode: "1P102S",
            locationCode: self.headContent.processesCode,
            productBarcode: self.headContent.sfcCode,
          }
          // saveCampaignTimeParameters(param).then(response => {});
          // self.cakeLamp.release = 1;
          workpieceRelease(param).then(response => {});
          self.formulaChildList = [];
          self.headContent.sfcCode = '';
          console.log(self.formulaChildList)
        } else if (event.data === "END") {
          // const param = {
          //   workOrderNo: self.workpieceInformation.workOrderNo,
          //   productCode: self.workpieceInformation.productCode,
          //   locationCode: self.headContent.processesCode,
          //   productBarcode: self.headContent.sfcCode,
          // }
          // saveCampaignTimeParameters(param).then(response => {});
          // self.endClear()
          // workpieceRelease(param).then(response => {});
        } else if (event.data.includes("[")) {
          let formulaChilds = "";
          self.formulaChildList.sort((a, b) => a.stepSort - b.stepSort);
          self.formulaChildList
            .filter((formulaChild) => formulaChild.operationType === '1');
          for (let i = 0; i < self.formulaChildList.length; i++) {
            let formulaChild = self.formulaChildList[i];
            let results = formulaChild.results;
            if (results === '' || results === null || results === 'NG') {
              formulaChilds = formulaChild;
              break;
            }
          }
          const param = {
            tightenTheArray: event.data,
            paramCode: formulaChilds.paramCode,
            // workOrderNo: self.workpieceInformation.workOrderNo,
            productCode: "1P102S",
            locationCode: self.headContent.processesCode,
            productBarcode: self.headContent.sfcCode,
          }
          addTighteningParameters(param).then(response => {});
          yzUpdateTighteningFormula(param).then(response => {
            console.log(response.msg)
            if(response.msg === "1"){
              self.getListFormulaChild()

            }else {
              const param = {
                workOrderNo: self.workpieceInformation.workOrderNo,
                productCode: "1P102S",
                locationCode: self.headContent.processesCode,
                productBarcode: self.headContent.sfcCode,
              }
              saveCampaignTimeParameters(param).then(response => {});
              workpieceRelease(param).then(response => {});
              self.formulaChildList = [];
              self.headContent.sfcCode = '';
            }
          });
        }
      };
    },



    //接受数据的回调
    callBack(value) {
      if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
      else {
        const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, '');
        console.log("串口收到数据-------------------"+scanValue)
        this.test1()
        this.test2()
        this.text1 = scanValue
        this.headContent.sfcCode = scanValue
        // this.print1()
        // setTimeout(() => {
        //   this.print()
        // },50)
        // this.getList()

      }
    },
    clearHistory() {
      this.form1.desc = "";
      this.myserialport.state.readValue = [];
    },
    loadHistory() {
      if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
      else {
        let temp = this.readLi();
        if (temp.length > 0) this.form1.desc = temp[temp.length - 1].join("");
      }
    },
    readLi() {
      let readType = this.readType;
      return this.myserialport.state.readValue.map((items, index) => {
        const item = items.value;
        const type = items.type; // 1接收，2发送
        let body = [];
        if (item !== undefined) {
          let strArr = [];
          for (let hex of Array.from(item)) {
            strArr.push(hex.toString(16).toLocaleUpperCase());
          }
          if (strArr.includes("D") && strArr.includes("A")) {
            if (strArr.indexOf("A") - strArr.indexOf("D") === 1) {
              strArr.splice(strArr.indexOf("D"), 1);
              strArr.splice(strArr.indexOf("A"), 1, <br key={0} />);
            }
          }
          strArr = strArr.map((item) => {
            if (typeof item === "string") {
              if (readType === 1) {
                return this.myserialport.hex2a(parseInt(item, 16));
              } else if (readType === 2) {
                return item + " ";
              }
            }
            return item;
          });
          if (typeof strArr[strArr.length - 1] === "string") {
            strArr.push("\r\n");
          }
          body.push(strArr.join(""));
        }
        return body;
      });
    },
    conCom(){
      try {
        this.myserialport.state.baudRate = this.form1.baudRate;
        this.myserialport.state.dataBits = this.form1.dataBits;
        this.myserialport.state.stopBits = this.form1.stopBits;
        this.myserialport.state.parity = this.form1.parity;
        this.myserialport.state.flowControl = this.form1.flowControl;
        this.myserialport.openPort(0, true, this.callBack);
        console.log(this.form1.port)
      } catch (error) {
        this.$message.error("串口连接失败！请检查串口是否已被占用");
      }
      if (this.myserialport.state.isOpen) {
        this.$message.success("串口连接成功");
      }
    },
    //连接
    async connectBtn() {
      if (this.btnType === "primary") {
        try {
          this.myserialport.state.baudRate = this.form1.baudRate;
          this.myserialport.state.dataBits = this.form1.dataBits;
          this.myserialport.state.stopBits = this.form1.stopBits;
          this.myserialport.state.parity = this.form1.parity;
          this.myserialport.state.flowControl = this.form1.flowControl;
          await this.myserialport.openPort(this.form1.port, true, this.callBack);
          console.log(this.form1.port)
        } catch (error) {
          this.$message.error("串口连接失败！请检查串口是否已被占用");
        }
        if (this.myserialport.state.isOpen) {
          this.$message.success("串口连接成功");
          this.open1 = false
          this.btnType = "danger";
          this.btnText = "关闭串口";
        }
      } else {
        this.myserialport.openPort(this.form1.port, false, this.callBack);
        this.$message.success("串口关闭成功");
        this.btnType = "primary";
        this.btnText = "连接串口";
      }
    },
    //授权
    async obtainAuthorization() {
      if ("serial" in navigator) {
        console.log("The Web Serial API is supported.");
        if (!this.myserialport) this.myserialport = new MySerialPort();
        try {
          await this.myserialport.handleRequestPort();
          this.$message.success("串口授权成功");
          this.getPortInfo(this.myserialport.state.ports);
        } catch (error) {
          this.$message.warning("未选择新串口授权！");
        }
      } else {
        this.$message.error(
          "当前为HTTP模式或者浏览器版本过低，不支持网页连接串口"
        );
      }
    },
    //串口列表初始化
    getPortInfo(portList) {
      this.portsList = [];
      portList.map((port, index) => {
        const { usbProductId, usbVendorId } = port.getInfo();
        if (usbProductId === undefined || usbVendorId === undefined) {
          this.portsList.push({ label: "未知设备" + index, value: index });
        } else {
          const usbVendor = USBDevice.filter(
            (item) => parseInt(item.vendor, 16) === usbVendorId
          );
          let usbProduct = [];
          if (usbVendor.length === 1) {
            usbProduct = usbVendor[0].devices.filter(
              (item) => parseInt(item.devid, 16) === usbProductId
            );
          }
          this.portsList.push({ label: usbProduct[0].devname, value: index });
        }
      });
    },
    // 发送
    async sendCommon() {
      if (this.myserialport.state.isOpen) {
        if (this.form1.sendMsg.length !== 0) {
          const writeType = this.form1.type;
          let value = this.form1.sendMsg;
          let arr = [];
          if (writeType === 1) {
            // ASCII
            for (let i = 0; i < value.length; i++) {
              arr.push(this.myserialport.a2hex(value[i]));
            }
          } else if (writeType === 2) {
            // HEX
            if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
              for (let i = 0; i < value.length; i = i + 2) {
                arr.push(parseInt(value.substring(i, i + 2), 16));
              }
            } else {
              this.$message.error("格式错误");
              return;
            }
          }
          this.myserialport.writeText(arr);
        } else {
          this.$message.warning("请输入发送的信息");
        }
      } else {
        this.$message.warning("串口处于关闭状态，请连接串口");
      }
    },
    async getPorts() {
      await this.myserialport.getPorts();
      this.getPortInfo(this.myserialport.state.ports);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "110" },
        { value: "300" },
        { value: "600" },
        { value: "1200" },
        { value: "2400" },
        { value: "4800" },
        { value: "7200" },
        { value: "9600" },
        { value: "14400" },
        { value: "19200" },
        { value: "28800" },
        { value: "38400" },
        { value: "56000" },
        { value: "57600" },
        { value: "76800" },
        { value: "115200" },
        { value: "230400" },
        { value: "460800" },
      ];
    },
  }
}

</script>

<style scoped>
.outerDiv {
  width: fit-content;
  min-width: 100%;
  /*width: 300px;*/
  height: 50px;
  margin-bottom: 10px;
.bottom-card{
  height: 600px;
}
.circle-button{
  height: 30px;
  width: 30px;
}
.circle-red {
  background-color: #e01a4f;
}
.circle-green {
  background-color: green;
}
.circle-green-animate {
  background-color: green;
  animation: circle-green-animate 2s infinite;
}
@keyframes circle-green-animate {
  50% {
    opacity: 0.6;
  }
  0% {
    opacity: 0.2;
  }
}
.head-font{
  /*font-weight: bold;*/
  /*font-size: 25px;*/
}
span{
  font-size: 15px;
}
.el-table .warning-row {
  background: oldlace;
}

.innerDiv1 {
  /*width: 79%;*/
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid black;
.el-table .success-row {
  background: #f0f9eb;
}

.innerDiv2 {
  /*width: 20%;*/
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

.content_left {
  font-weight: bold;
}
.content_right {
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 设置div的高度，可根据实际情况调整 */
}

.centered {
  text-align: center;
}

</style>