feat：建立websocket通信回显实时电子秤重量

zkqy-ui/src/views/orderMange/codeListManage/index.vue

@@ -48,10 +48,12 @@
             icon="el-icon-search"
             size="mini"
             @click="handleQuery"
-            >搜索</el-button
+          >搜索
+          </el-button
           >
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-            >重置</el-button
+          >重置
+          </el-button
           >
         </el-form-item>
       </el-form>
@@ -65,7 +67,8 @@
             size="mini"
             @click="printHandler"
             v-hasPermi="['system:productCodeList:add']"
-            >打印</el-button
+          >打印
+          </el-button
           >
         </el-col>
         <el-col :span="1.5">
@@ -77,7 +80,8 @@
             :disabled="single"
             @click="handleUpdate"
             v-hasPermi="['system:productCodeList:edit']"
-            >修改</el-button
+          >修改
+          </el-button
           >
         </el-col>
         <el-col :span="1.5">
@@ -89,7 +93,8 @@
             :disabled="multiple"
             @click="handleDelete"
             v-hasPermi="['system:productCodeList:remove']"
-            >删除</el-button
+          >删除
+          </el-button
           >
         </el-col>
         <el-col :span="1.5">
@@ -100,7 +105,8 @@
             size="mini"
             @click="handleExport"
             v-hasPermi="['system:productCodeList:export']"
-            >导出</el-button
+          >导出
+          </el-button
           >
         </el-col>
         <right-toolbar
@@ -114,22 +120,22 @@
         :data="productCodeListList"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="码单号" align="center" prop="qrCode" />
-        <el-table-column label="品名" align="center" prop="productName" />
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="码单号" align="center" prop="qrCode"/>
+        <el-table-column label="品名" align="center" prop="productName"/>
         <el-table-column
           label="规格"
           align="center"
           prop="productSpecifications"
         />
-        <el-table-column label="批号" align="center" prop="lotNum" />
-        <el-table-column label="色泽" align="center" prop="productColor" />
+        <el-table-column label="批号" align="center" prop="lotNum"/>
+        <el-table-column label="色泽" align="center" prop="productColor"/>
         <!-- <el-table-column label="货品编号" align="center" prop="productId" /> -->
-        <el-table-column label="等级" align="center" prop="levels" />
-        <el-table-column label="筒数" align="center" prop="totalCanisterNum" />
-        <el-table-column label="箱数" align="center" prop="totalBoxNum" />
-        <el-table-column label="净重" align="center" prop="totalSuttle" />
-        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="等级" align="center" prop="levels"/>
+        <el-table-column label="筒数" align="center" prop="totalCanisterNum"/>
+        <el-table-column label="箱数" align="center" prop="totalBoxNum"/>
+        <el-table-column label="净重" align="center" prop="totalSuttle"/>
+        <el-table-column label="备注" align="center" prop="remark"/>
         <el-table-column
           label="操作"
           align="center"
@@ -148,7 +154,8 @@
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['system:productCodeList:edit']"
-                    >修改</el-button
+                  >修改
+                  </el-button
                   >
                 </el-dropdown-item>
                 <el-dropdown-item>
@@ -157,7 +164,8 @@
                     type="text"
                     icon="el-icon-circle-plus-outline"
                     @click="supplementCode(scope.row)"
-                    >补码</el-button
+                  >补码
+                  </el-button
                   >
                 </el-dropdown-item>
                 <el-dropdown-item>
@@ -167,7 +175,8 @@
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['system:productCodeList:remove']"
-                    >删除</el-button
+                  >删除
+                  </el-button
                   >
                 </el-dropdown-item>
               </el-dropdown-menu>
@@ -191,27 +200,28 @@
         width="500px"
         append-to-body
       >
+
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="码单号" prop="qrCode">
-            <el-input v-model="form.qrCode" placeholder="请输入码单号" />
+            <el-input v-model="form.qrCode" placeholder="请输入码单号"/>
           </el-form-item>
           <el-form-item label="批号" prop="lotNum">
-            <el-input v-model="form.lotNum" placeholder="请输入批号" />
+            <el-input v-model="form.lotNum" placeholder="请输入批号"/>
           </el-form-item>
           <el-form-item label="货品编号" prop="productId">
-            <el-input v-model="form.productId" placeholder="请输入货品编号" />
+            <el-input v-model="form.productId" placeholder="请输入货品编号"/>
           </el-form-item>
           <el-form-item label="等级" prop="levels">
-            <el-input v-model="form.levels" placeholder="请输入等级" />
+            <el-input v-model="form.levels" placeholder="请输入等级"/>
           </el-form-item>
           <el-form-item label="筒数" prop="canisterNum">
-            <el-input v-model="form.canisterNum" placeholder="请输入筒数" />
+            <el-input v-model="form.canisterNum" placeholder="请输入筒数"/>
           </el-form-item>
           <el-form-item label="箱数" prop="boxNum">
-            <el-input v-model="form.boxNum" placeholder="请输入箱数" />
+            <el-input v-model="form.boxNum" placeholder="请输入箱数"/>
           </el-form-item>
           <el-form-item label="净重" prop="suttle">
-            <el-input v-model="form.suttle" placeholder="请输入净重" />
+            <el-input v-model="form.suttle" placeholder="请输入净重"/>
           </el-form-item>
           <el-form-item label="生产日期" prop="productionDate">
             <el-date-picker
@@ -224,16 +234,16 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item label="机台" prop="machineTool">
-            <el-input v-model="form.machineTool" placeholder="请输入机台" />
+            <el-input v-model="form.machineTool" placeholder="请输入机台"/>
           </el-form-item>
           <el-form-item label="毛重" prop="grossWeight">
-            <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
+            <el-input v-model="form.grossWeight" placeholder="请输入毛重"/>
           </el-form-item>
           <el-form-item label="包装" prop="packaging">
-            <el-input v-model="form.packaging" placeholder="请输入包装" />
+            <el-input v-model="form.packaging" placeholder="请输入包装"/>
           </el-form-item>
           <el-form-item label="班次" prop="workShifts">
-            <el-input v-model="form.workShifts" placeholder="请输入班次" />
+            <el-input v-model="form.workShifts" placeholder="请输入班次"/>
           </el-form-item>
           <el-form-item label="外贸号" prop="foreignTradeNumber">
             <el-input
@@ -242,22 +252,22 @@
             />
           </el-form-item>
           <el-form-item label="筒重" prop="canisterWeight">
-            <el-input v-model="form.canisterWeight" placeholder="请输入筒重" />
+            <el-input v-model="form.canisterWeight" placeholder="请输入筒重"/>
           </el-form-item>
           <el-form-item label="箱重/车重" prop="boxWeight">
-            <el-input v-model="form.boxWeight" placeholder="请输入箱重/车重" />
+            <el-input v-model="form.boxWeight" placeholder="请输入箱重/车重"/>
           </el-form-item>
           <el-form-item label="管色" prop="tubeColor">
-            <el-input v-model="form.tubeColor" placeholder="请输入管色" />
+            <el-input v-model="form.tubeColor" placeholder="请输入管色"/>
           </el-form-item>
           <el-form-item label="端口" prop="comPort">
-            <el-input v-model="form.comPort" placeholder="请输入端口" />
+            <el-input v-model="form.comPort" placeholder="请输入端口"/>
           </el-form-item>
           <el-form-item label="打印格式" prop="printFormat">
-            <el-input v-model="form.printFormat" placeholder="请输入打印格式" />
+            <el-input v-model="form.printFormat" placeholder="请输入打印格式"/>
           </el-form-item>
           <el-form-item label="库位" prop="storageLocation">
-            <el-input v-model="form.storageLocation" placeholder="请输入库位" />
+            <el-input v-model="form.storageLocation" placeholder="请输入库位"/>
           </el-form-item>
           <el-form-item label="区域编号" prop="warehouseregionId">
             <el-input
@@ -273,7 +283,7 @@
             />
           </el-form-item>
           <el-form-item label="删除标志" prop="delFlag">
-            <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
+            <el-input v-model="form.delFlag" placeholder="请输入删除标志"/>
           </el-form-item>
           <el-form-item label="创建者编号" prop="createById">
             <el-input
@@ -314,14 +324,16 @@
                   type="primary"
                   size="mini"
                   @click="updateOrderData"
-                  >保存修改</el-button
+                >保存修改
+                </el-button
                 >
                 <el-button
                   :disabled="tableData.length != 1"
                   type="primary"
                   size="mini"
                   @click="getOrderData"
-                  >箱单</el-button
+                >箱单
+                </el-button
                 >
                 <el-button
                   :disabled="tableData.length < 2"
@@ -329,7 +341,8 @@
                   type="primary"
                   size="mini"
                   @click="chooseOneToPrint"
-                  >{{ chooseState ? "退出批箱单" : "批箱单" }}</el-button
+                >{{ chooseState ? "退出批箱单" : "批箱单" }}
+                </el-button
                 >
                 <!-- <el-button
                 :disabled="tableData.length != 1"
@@ -401,7 +414,8 @@
                     size="mini"
                     :disabled="chooseState"
                     @click="handleDeleteOne(scope.$index)"
-                    >删除</el-button
+                  >删除
+                  </el-button
                   >
                 </template>
               </el-table-column>
@@ -666,6 +680,7 @@
               </el-form>
             </el-row>
             <div class="queryForm">
+              <h1>实时重量：{{ nowWright }}</h1>
               <span class="label">批号过滤 :</span>
               <el-input
                 v-model="batchNum"
@@ -682,7 +697,8 @@
                 size="mini"
                 :disabled="!currentRow.lotNum || isDisabled"
                 @click="addProductHandler"
-                >添加</el-button
+              >添加
+              </el-button
               >
             </div>
             <div class="table-wrap">
@@ -738,6 +754,8 @@ export default {
   dicts: ["packaging_type", "port", "coding_list_format", "direction_of_twist"],
   data() {
     return {
+      nowWright: 0,
+      websocket: null,
       // 自定义数据 start
       printTableData: [], //需要打印的数据
       chooseState: false, //批箱单打印状态
@@ -789,33 +807,33 @@ export default {
       },
       rules: {
         packaging: [
-          { required: true, message: "请选择包装", trigger: "change" },
+          {required: true, message: "请选择包装", trigger: "change"},
         ],
         machineTool: [
-          { required: true, message: "请选择机台", trigger: "change" },
+          {required: true, message: "请选择机台", trigger: "change"},
         ],
         workShifts: [
-          { required: true, message: "请选择班次", trigger: "change" },
+          {required: true, message: "请选择班次", trigger: "change"},
         ],
         productionDate: [
-          { required: true, message: "请选择生产日期", trigger: "change" },
+          {required: true, message: "请选择生产日期", trigger: "change"},
         ],
-        levels: [{ required: true, message: "请选择等级", trigger: "change" }],
+        levels: [{required: true, message: "请选择等级", trigger: "change"}],
         // foreignTradeNumber: [
         //   { required: true, message: "请输入外贸号", trigger: "blur" },
         // ],
         canisterWeight: [
-          { required: true, message: "请选择筒重", trigger: "change" },
+          {required: true, message: "请选择筒重", trigger: "change"},
         ],
         boxWeight: [
-          { required: true, message: "请选择箱重/车重", trigger: "change" },
+          {required: true, message: "请选择箱重/车重", trigger: "change"},
         ],
         tubeColor: [
-          { required: true, message: "请选择管色", trigger: "change" },
+          {required: true, message: "请选择管色", trigger: "change"},
         ],
-        comPort: [{ required: true, message: "请选择端口", trigger: "change" }],
+        comPort: [{required: true, message: "请选择端口", trigger: "change"}],
         printFormat: [
-          { required: true, message: "请选择格式", trigger: "change" },
+          {required: true, message: "请选择格式", trigger: "change"},
         ],
       },
       dropDownData: {},
@@ -909,16 +927,50 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    this.initWebSocket();
+  },
+  beforeDestroy() {
+    this.closeWebSocket();
+  },
   computed: {
     isDisabled() {
       return this.excuteType != 1;
     },
   },
+
   methods: {
+    initWebSocket() {
+      const wsUrl = 'ws://localhost:8721/ws';
+      this.websocket = new WebSocket(wsUrl);
+      this.websocket.addEventListener('open', (event) => {
+        console.log('建立WebSocket连接');
+      });
+
+      this.websocket.addEventListener('message', (event) => {
+        console.log(event)
+        const weight = JSON.parse(event.data).weight;
+        this.nowWright = weight;
+      });
+
+      this.websocket.addEventListener('error', (event) => {
+        console.error('WebSocket错误:', event);
+      });
+
+      this.websocket.addEventListener('close', (event) => {
+        console.log('关闭WebSocket连接');
+      });
+    },
+
+    closeWebSocket() {
+      if (this.websocket !== null && this.websocket.readyState !== WebSocket.CLOSED) {
+        this.websocket.close();
+      }
+    },
     // 毛重改变回调
     changeGrossWeight(row) {
       console.log(row);
-      let { boxWeight, grossWeight, canisterWeight, canisterNum } = row;
+      let {boxWeight, grossWeight, canisterWeight, canisterNum} = row;
       if (!Number(grossWeight)) return;
       row.suttle = (
         Number(grossWeight) -
@@ -965,7 +1017,7 @@ export default {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
           try {
-            let { sumBoxNum, sumCanisterNum, sumSuttle, sumGrossWeight } =
+            let {sumBoxNum, sumCanisterNum, sumSuttle, sumGrossWeight} =
               this.count;
             let rowData = JSON.parse(JSON.stringify(this.tableData[0]));
             console.log(rowData);
@@ -1018,7 +1070,7 @@ export default {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
           try {
-            let { sumBoxNum, sumCanisterNum, sumSuttle, sumGrossWeight } =
+            let {sumBoxNum, sumCanisterNum, sumSuttle, sumGrossWeight} =
               this.count;
             let rowData = JSON.parse(JSON.stringify(this.tableData[0]));
             this.printTableData = [rowData];
@@ -1162,7 +1214,7 @@ export default {
     },
     // 计算净重
     getSuttle() {
-      let { boxWeight, canisterWeight, canisterNum } = this.form;
+      let {boxWeight, canisterWeight, canisterNum} = this.form;
       return (Number(boxWeight) - canisterWeight * canisterNum).toFixed(2);
     },
     // 表格点击回调
@@ -1182,7 +1234,7 @@ export default {
             this.$refs.form.validate(async (valid) => {
               if (valid) {
                 try {
-                  let { sumBoxNum, sumCanisterNum, sumSuttle, sumGrossWeight } =
+                  let {sumBoxNum, sumCanisterNum, sumSuttle, sumGrossWeight} =
                     this.count;
                   let rowData = JSON.parse(JSON.stringify(row));
                   this.printTableData = [rowData];
@@ -1261,7 +1313,8 @@ export default {
         if (res.code == 200) {
           this.dropDownData = res.data;
         }
-      } catch (error) {}
+      } catch (error) {
+      }
     },
     /** 查询产品码单列表 */
     getList() {
@@ -1456,7 +1509,8 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {});
+        .catch(() => {
+        });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -1477,11 +1531,14 @@ export default {
   width: 100%;
   display: flex;
   justify-content: space-between;
+
   .left {
     width: 58%;
+
     .top-area {
       display: flex;
       justify-content: space-between;
+
       .msg {
         display: flex;
         align-items: center;
@@ -1489,9 +1546,11 @@ export default {
         font-weight: 700;
       }
     }
+
     .count-area {
       display: flex;
       flex-wrap: wrap;
+
       .count-item {
         display: flex;
         margin-bottom: 10px;
@@ -1499,6 +1558,7 @@ export default {
       }
     }
   }
+
   .right {
     width: 40%;
     // flex: 1;
@@ -1506,6 +1566,7 @@ export default {
       width: 100%;
       padding: 0 10px;
       display: flex;
+
       .label {
         text-align: right;
         color: #606266;
@@ -1517,6 +1578,7 @@ export default {
         margin-right: 10px;
       }
     }
+
     .table-wrap {
       margin-top: 5px;
       width: 100%;
@@ -1524,9 +1586,11 @@ export default {
     }
   }
 }
+
 ::v-deep .el-date-editor.el-input {
   width: 100%;
 }
+
 ::v-deep .el-input-number--mini {
   width: 99%;
 }