优化

admin

2024-10-15 cb4e543d5e4236ad3fc95ff4ed21a4a1f683062e

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

@@ -3,206 +3,43 @@
    <el-row :gutter="5">
      <el-col :span="7">
        <el-card shadow="never">
          <span class="head-font">工位编号 : {{headContent.processesCode}}</span>
          <span class="head-font">工位编号：{{headContent.processesCode}}</span>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card shadow="never">
          <span class="head-font">工位名称 : {{headContent.processesName}}</span>
          <span class="head-font">工位名称：{{headContent.processesName}}</span>
        </el-card>
      </el-col>
      <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 shadow="never" body-style="padding: 10px;">
          <span class="head-font">产品序列号：</span>
          <el-input style="width: 50%;" v-model="headContent.sfcCode" placeholder="请输入内容"></el-input>
<!--          <el-button type="primary" id="print" v-print="'#printMe'">打印</el-button>-->
          <el-button type="primary" id="print" v-print="'#printMe'" style="display: none;">打印</el-button>
<!--          <el-button id="print" @click="print1" type="primary">打印</el-button>-->
          <el-button type="primary" @click="printBefore">打印</el-button>
          <el-button @click="clearClick" type="danger">清除</el-button>
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="5" style="margin-top: 5px">
      <el-col :span="12">
      <el-col :span="24">
        <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">9900166410</p>
                  <p style="margin-left: 43px">HW001.001</p>
                  <p style="margin-left: 43px">SW002.005</p>
                  <br>
                  <span style="font-size: 30px;font-weight: bold;margin-left: 40px;">GEELY</span><br>
                  <span style="font-size: 10px;margin-left: 29px">COMMERCIAL VEHICLE</span><br>
                  <span style="margin-left: 60px">H2155D</span><br>
                  <span style="margin-left: 63px">993083</span><br>
                  <span style="margin-left: 40px">9900166410</span><br>
                  <span style="font-size: 10px;margin-left: 17px;">{{text1}}</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">P9900166410#T{{text1}}#V993983#SSW002.005#HHW001.001#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">P9900166410#T{{text1}}#V993983#SSW002.005#HHW001.001#NBMS#</span>
                <div id="printMe">
                  <offline-qualification-report :printParam="printParam"></offline-qualification-report>
                </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>
@@ -217,17 +54,23 @@
import USBDevice from "@/utils/usb.json";
import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection";
import {
  addTighteningParameters, enterWeighing,
  addTighteningParameters, enterWeighing, getPrintOfflineReportInfo, listParamCollection,
  replaceAssemblyCode,
  saveCampaignTimeParameters,
  yzAddBasicParameters,
} from "@/api/main/da/paramCollection/paramCollection";
import QRCode from "qrcodejs2";
import OfflineQualificationReport from "@/views/components/offlineQualificationReport.vue";
import {listProductionOrde} from "@/api/main/om/productionOrde/productionOrde";

export default {
  name: "stationTerminal",
  components: {OfflineQualificationReport},
  data() {
    return {
      printParam: {

      },
      weightValue: '',
      showInput: true,
      serialPortContent: '',
@@ -277,7 +120,7 @@
      },
      content: '',
      activeName: 'first',
      url: "ws://192.168.2.76:8080/websocket/message/",
      url: "ws://192.168.20.250:8080/websocket/message/",
      message: "",
      text_content: "",
      ws: null,
@@ -309,53 +152,14 @@
      text1: '',
    }
  },
  beforeDestroy() {
    this.exit();
  },
  created() {
    this.initStation();
    // 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: {
    enterWeighing(){
      if(this.headContent.sfcCode ==='' || this.weightValue === '' ){
        this.$message.error('参数不全！');
      }else {
        let param = {
          sfcCode: this.headContent.sfcCode,
          weightValue: this.weightValue,
        }
        enterWeighing(param).then(response => {
          this.$message('录入完成！');
        });
      }
    },
    serialLink() {
      this.open1 = true
    },
@@ -373,17 +177,6 @@
      }
    },

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

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

      }

    },
    serialPortMethod(value){
      let formulaChildParams = {
        scanBarcode: value,
@@ -459,41 +252,38 @@
      // 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: 'P9900166410#T'+ this.text1 +'#V993983#SSW002.005#HHW001.001#NBMS#',
          colorDark: '#000',
          colorLight: '#fff'
        })
    printBefore() {
      if (this.headContent.sfcCode !== '') {
        listProductionOrde({productNum: this.headContent.sfcCode}).then(response => {
          let rowsData = response.rows[0];
          if(rowsData){
            getPrintOfflineReportInfo({productNum: this.headContent.sfcCode}).then(response => {
              this.printParam = response.data
              document.getElementById('print').click();
            });
          }else {
            this.$message.error('系统没有此工单，请重新扫码！');
          }
        });
      } else {
        this.$message.error('请先扫码!');
      }
      )
    },
    test2(){
      document.getElementById('canvasWrapper2').innerHTML = '';
      this.$nextTick(() => {
          let qrCode = new QRCode('canvasWrapper2',{
            width: 120,
            height: 120,
            text: 'P9900166410#T'+ this.text1 +'#V993983#SSW002.005#HHW001.001#NBMS#',
            colorDark: '#000',
            colorLight: '#fff'
          })
        }
      )
    },

    // print1() {
    //   if(this.headContent.sfcCode !== ''){
    //     // 新开页面打印
    //     const value = 'Hello, Parent!';
    //     this.$emit('value-sent', value);
    //     let newStr = document.getElementById('printMe').innerHTML;
    //     let newWin = window.open('', '_blank');
    //     newWin.document.body.innerHTML = newStr;
    //     newWin.print();
    //     return;
    //   }else {
    //     this.$message.error('请先扫码');
    //   }
    // },
    /** 入站增加过站采集记录 **/
    addOverStationCollection(){
      this.passingStationForm = {
@@ -509,20 +299,6 @@
      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.StationConfQueryParams.ipAddress = response.msg
@@ -548,7 +324,11 @@
        this.$message('websocket连接成功！');
      };
      this.ws.onmessage = function (event) {
        if (event.data === "IN") {
        if (event.data === "print") {
          self.$message('postman调用打印方法打印！');
          // self.print1()
          document.getElementById('print').click();
        }else if (event.data === "IN") {
          self.cakeLamp.InPlace = 1;
        } else if (event.data === "IN0") {
          self.cakeLamp.InPlace = 0;
@@ -846,7 +626,17 @@
}

</script>

<style scoped>
.div1, .div2 {
  flex: 1; /* 两个div平分容器宽度 */
}
.span{
  font-family: 'Microsoft YaHei', sans-serif;
}
.div2{
  margin-left: 30px;
}
.bottom-card{
  height: 600px;
}
@@ -886,5 +676,16 @@
.el-table .success-row {
  background: #f0f9eb;
}

/*隐藏打印区域*/
/*#printMe {*/
/*  display: none;*/
/*}*/
/*!*打印时显示打印区域*!*/
/*@media print {*/
/*  #printMe {*/
/*    display: block;*/
/*  }*/
/*}*/
</style>