|
|
@@ -0,0 +1,780 @@
|
|
|
+<template>
|
|
|
+ <el-card shadow="always" :body-style="{ padding: '10px' }">
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="main-wrap">
|
|
|
+ <div class="left">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
|
|
|
+ <el-form-item prop="machineTool" label="机台" style="width: 500px">
|
|
|
+ <el-select
|
|
|
+ v-model="form.machineTool"
|
|
|
+ filterable
|
|
|
+ @change="machineToolChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in lineOptions"
|
|
|
+ :key="index"
|
|
|
+ :label="item.productionLineName"
|
|
|
+ :value="{value:item.id,label:item.productionLineName}"
|
|
|
+ >
|
|
|
+ <span class="discribe" style="float: left">{{item.productionLineName }}</span>
|
|
|
+ <span
|
|
|
+ style="float: right; color: #8492a6; font-size: 13px"
|
|
|
+ >{{ item.productionLineDepartment }}</span
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="scid" label="丝车">
|
|
|
+ <el-select
|
|
|
+ v-model="form.scid"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in silkcartList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.scname"
|
|
|
+ :value="item.scname"
|
|
|
+ >
|
|
|
+ <span class="discribe" style="float: left">{{item.scname }}</span>
|
|
|
+ <span
|
|
|
+ style="float: right; color: #8492a6; font-size: 13px"
|
|
|
+ >{{ item.scWeight }}</span
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="卷数" prop="js" style="width: 278px">
|
|
|
+ <el-input v-model="form.js" placeholder="请输入卷数"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="success" @click="printshow">打 印</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="table-wrap">
|
|
|
+ <el-table
|
|
|
+ ref="proTableRef"
|
|
|
+ :data="batchTableData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ width="100%"
|
|
|
+ max-height="260"
|
|
|
+ highlight-current-row
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ @row-click="handleCurrentChange"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ ></el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ v-for="col in columns"
|
|
|
+ :prop="col.id"
|
|
|
+ :key="col.id"
|
|
|
+ :label="col.label"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<!-- <pagination-->
|
|
|
+<!-- v-show="total>0"-->
|
|
|
+<!-- :total="total"-->
|
|
|
+<!-- :page.sync="queryParams.pageNum"-->
|
|
|
+<!-- :limit.sync="queryParams.pageSize"-->
|
|
|
+<!-- @pagination="getList"-->
|
|
|
+<!-- />-->
|
|
|
+
|
|
|
+ <!-- 添加或修改线边舱库存对话框 -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" :visible.sync="prinopens" width="800px" height="500px" append-to-body>
|
|
|
+ <div class="print-preview" id="printSection">
|
|
|
+ <div class="label-container">
|
|
|
+ <div class="title">生产打印</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">丝车号</span>
|
|
|
+ <span class="value">{{form.scid}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">机台号：</span>
|
|
|
+ <span class="value">{{form.machineTool}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">产品信息：</span>
|
|
|
+ <span class="value">{{form.productName}} - {{form.productSpecifications}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">色泽：</span>
|
|
|
+ <span class="value">{{form.colours}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">批号：</span>
|
|
|
+ <span class="value">{{form.batchNumber}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">卷数：</span>
|
|
|
+ <span class="value">{{form.js}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">日期：</span>
|
|
|
+ <span class="value-line"></span>
|
|
|
+ <span class="shift">(日班/夜班)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" v-print="printViewInfo">打 印</el-button>
|
|
|
+ <el-button @click="cancelprinopens">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listLineSideCabin, getLineSideCabin, delLineSideCabin, addLineSideCabin, updateLineSideCabin, getLineOptionLsit, finishedProductList, listSilkcart,} from "@/api/lineSideCabin/lineSideCabin";
|
|
|
+import {getSilkcart} from "@/api/silkcart/silkcart";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "LineSideCabin",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 线边舱库存表格数据
|
|
|
+ lineSideCabinList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ prinopens:false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ productNo: null,
|
|
|
+ productName: null,
|
|
|
+ productSpecifications: null,
|
|
|
+ productId: null,
|
|
|
+ batchNumber: null,
|
|
|
+ colours: null,
|
|
|
+ machineTool: null,
|
|
|
+ js: null,
|
|
|
+ status: null,
|
|
|
+ standby: null,
|
|
|
+ standby1: null,
|
|
|
+ standby2: null,
|
|
|
+ standby3: null,
|
|
|
+ workshop: null,
|
|
|
+ recipient: null,
|
|
|
+ collectTime: null,
|
|
|
+ confirm: null,
|
|
|
+ confirmTime: null,
|
|
|
+ scid:null
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {
|
|
|
+ id: null,
|
|
|
+ productNo: null,
|
|
|
+ productName: null,
|
|
|
+ productSpecifications: null,
|
|
|
+ productId: null,
|
|
|
+ batchNumber: null,
|
|
|
+ colours: null,
|
|
|
+ machineTool: null,//机台号
|
|
|
+ js: null,
|
|
|
+ status: null,
|
|
|
+ standby: '', // 确保初始化为空字符串
|
|
|
+ standby1: null,
|
|
|
+ standby2: null,
|
|
|
+ standby3: null,
|
|
|
+ workshop: null,
|
|
|
+ recipient: null,
|
|
|
+ collectTime: null,
|
|
|
+ confirm: null,
|
|
|
+ confirmTime: null,
|
|
|
+ scid: null
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ machineTool: [ { required: true, message: '请选择机台', trigger: 'blur' } ],
|
|
|
+ },
|
|
|
+ msg: "打印",
|
|
|
+ printViewInfo: {
|
|
|
+ id: "printSection", //打印区域的唯一的id属性
|
|
|
+ // popTitle: '配置页眉标题', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
|
|
|
+ // extraHead: '打印，印刷', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
|
|
|
+ preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
|
|
|
+ // previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
|
|
|
+ // previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
|
|
|
+ zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
|
|
|
+ previewBeforeOpenCallback (that) { console.log('正在加载预览窗口！'); console.log(that.msg, this)
|
|
|
+ }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
|
|
|
+ previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
|
|
|
+ beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
|
|
|
+ openCallback () { console.log('执行打印了！')
|
|
|
+ }, // 调用打印时的callback
|
|
|
+ closeCallback () { console.log('关闭了打印工具！') ;}, // 关闭打印的callback(无法区分确认or取消)
|
|
|
+ clickMounted () { console.log('点击v-print绑定的按钮了！')},
|
|
|
+ // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
|
|
|
+ // asyncUrl (reslove) {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // reslove('http://localhost:8080/')
|
|
|
+ // }, 2000)
|
|
|
+ // },
|
|
|
+ standard: '',
|
|
|
+ extarCss: '',
|
|
|
+ isDataLoaded: false,
|
|
|
+ },
|
|
|
+ batchData: [], //所有批号数据
|
|
|
+ batchTableData: [], //批号表格数据
|
|
|
+ lineOptions: [], //机台选项数据
|
|
|
+ silkcartList: [], //丝车列表
|
|
|
+ xzbatchTableData: [], //选中的批号表格数据
|
|
|
+ currentRow: null, // 添加当前选中行
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ id: "productNo",
|
|
|
+ label: this.$t('printIndex.columns.productNo'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "productName",
|
|
|
+ label: this.$t('printIndex.columns.productName'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "productSpecifications",
|
|
|
+ label: this.$t('printIndex.columns.productSpecifications'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "lotNum",
|
|
|
+ label: this.$t('printIndex.columns.lotNum'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "productColor",
|
|
|
+ label: this.$t('printIndex.columns.productColor'),
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // id: "productName",
|
|
|
+ // label: "订单号",
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ websocket: null,
|
|
|
+ wsUrl: 'ws://localhost:8721/DBCc',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 确保在创建新连接前关闭旧连接
|
|
|
+ if (this.websocket) {
|
|
|
+ this.closeWebSocket();
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ this.initWebSocket();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getLineOptionLsit();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.closeWebSocket();
|
|
|
+ },
|
|
|
+ beforeRouteLeave(to, from, next) {
|
|
|
+ // 路由离开时关闭连接
|
|
|
+ this.closeWebSocket();
|
|
|
+ next();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询线边舱库存列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listLineSideCabin(this.queryParams).then(response => {
|
|
|
+ this.lineSideCabinList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancelprinopens() {
|
|
|
+ this.prinopens = false;
|
|
|
+ this.batchTableData = [];//
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ productNo: null,
|
|
|
+ productName: null,
|
|
|
+ productSpecifications: null,
|
|
|
+ productId: null,
|
|
|
+ batchNumber: null,
|
|
|
+ colours: null,
|
|
|
+ machineTool: null,
|
|
|
+ js: null,
|
|
|
+ status: null,
|
|
|
+ standby: '', // 确保重置时也初始化为空字符串
|
|
|
+ standby1: null,
|
|
|
+ standby2: null,
|
|
|
+ standby3: null,
|
|
|
+ workshop: null,
|
|
|
+ recipient: null,
|
|
|
+ collectTime: null,
|
|
|
+ confirm: null,
|
|
|
+ confirmTime: null,
|
|
|
+ scid: null
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 机台相关 */
|
|
|
+ // 机台改变回调
|
|
|
+ machineToolChange(res) {
|
|
|
+ console.log("================选中机台",res)
|
|
|
+ this.form.machineTool = res.label;
|
|
|
+ this.getAllBatchData(res.value);
|
|
|
+ },
|
|
|
+ // 获取机台选项数据
|
|
|
+ async getLineOptionLsit() {
|
|
|
+ let payLoad = {
|
|
|
+ isEnablePaging: false,
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ let res = await getLineOptionLsit(payLoad);
|
|
|
+ let scres = await listSilkcart(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.lineOptions = res.rows;
|
|
|
+ this.silkcartList = scres.rows;
|
|
|
+ if (this.lineOptions.length > 0 && this.excuteType == 1) {
|
|
|
+ this.form.machineTool = this.lineOptions[0].id;
|
|
|
+ this.machineToolChange(this.form.machineTool);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+
|
|
|
+ console.log("------------------",this.silkcartList)
|
|
|
+ },
|
|
|
+ // 获取所有批次数据
|
|
|
+ async getAllBatchData(id) {
|
|
|
+
|
|
|
+ try {
|
|
|
+ console.log('===================获取批次数据')
|
|
|
+ let payload = { machineTool: id };
|
|
|
+ let res = await finishedProductList(payload);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.batchData = res.data;
|
|
|
+ this.batchTableData = res.data;
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+ },
|
|
|
+ // 表格点击回调
|
|
|
+ async handleCurrentChange(val) {
|
|
|
+ if (!val) return;
|
|
|
+
|
|
|
+ // 设置当前选中行的高亮
|
|
|
+ this.$refs.proTableRef.setCurrentRow(val);
|
|
|
+
|
|
|
+ this.xzbatchTableData = val;
|
|
|
+ console.log("表格点击回调",this.xzbatchTableData)
|
|
|
+
|
|
|
+ //判断是否为纺丝部如果是则不做处理
|
|
|
+ if(val?.productionlinedepartment && val.productionlinedepartment !== undefined && val.productionlinedepartment !== "纺丝部" && val.productionlinedepartment !== ""){
|
|
|
+ this.form.tubeColor = val.tubeColor;//管色
|
|
|
+ this.form.boxWeight = val.boxWeight;//箱重
|
|
|
+ this.form.canisterWeight = val.canisterWeight;//筒重
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isStartReadNum || this.excuteType != 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.currentRow || val.id != this.currentRow.id) {
|
|
|
+ this.tableData = [];
|
|
|
+ this.nowWeight = 0;
|
|
|
+ this.getQrCodeHandle();
|
|
|
+ this.summertId = new Date().getTime(); //总码单id重新生成
|
|
|
+ }
|
|
|
+
|
|
|
+ this.currentRow = val;
|
|
|
+ },
|
|
|
+ /** 机台相关 */
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.reset();
|
|
|
+ this.open = true;
|
|
|
+ this.title = "添加线边舱库存";
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset();
|
|
|
+ const id = row.id || this.ids
|
|
|
+ getLineSideCabin(id).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ this.open = true;
|
|
|
+ this.title = "修改线边舱库存";
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 打开打印弹窗 */
|
|
|
+ printshow(){
|
|
|
+ if(this.xzbatchTableData.length <=0){
|
|
|
+ this.$modal.msgWarning("请选择任务");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ this.form.productNo = this.xzbatchTableData.productNo;
|
|
|
+ this.form.productName = this.xzbatchTableData.productName;
|
|
|
+ this.form.productSpecifications = this.xzbatchTableData.productSpecifications;
|
|
|
+ this.form.productId = this.xzbatchTableData.productId;//类型字段变更为存储产品id
|
|
|
+ this.form.batchNumber = this.xzbatchTableData.lotNum;
|
|
|
+ this.form.colours = this.xzbatchTableData.productColor;
|
|
|
+ this.form.standby3 = this.xzbatchTableData.id;//任务id
|
|
|
+ });
|
|
|
+ this.prinopens=true;
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ this.form.productNo = this.xzbatchTableData.productNo;
|
|
|
+ this.form.productName = this.xzbatchTableData.productName;
|
|
|
+ this.form.productSpecifications = this.xzbatchTableData.productSpecifications;
|
|
|
+ this.form.productId = this.xzbatchTableData.productId;//类型字段变更为存储产品id
|
|
|
+ this.form.batchNumber = this.xzbatchTableData.lotNum;
|
|
|
+ this.form.colours = this.xzbatchTableData.productColor;
|
|
|
+ this.form.standby3 = this.xzbatchTableData.id;//任务id
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.id != null) {
|
|
|
+ updateLineSideCabin(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addLineSideCabin(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id || this.ids;
|
|
|
+ this.$modal.confirm('是否确认删除线边舱库存编号为"' + ids + '"的数据项？').then(function() {
|
|
|
+ return delLineSideCabin(ids);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.download('lineSideCabin/lineSideCabin/export', {
|
|
|
+ ...this.queryParams
|
|
|
+ }, `lineSideCabin_${new Date().getTime()}.xlsx`)
|
|
|
+ },
|
|
|
+ /** 初始化 WebSocket 连接 */
|
|
|
+ initWebSocket() {
|
|
|
+ this.closeWebSocket();
|
|
|
+
|
|
|
+ try {
|
|
|
+ console.log('开始连接WebSocket:', this.wsUrl);
|
|
|
+ this.websocket = new WebSocket(this.wsUrl);
|
|
|
+
|
|
|
+ this.websocket.onopen = () => {
|
|
|
+ console.log('WebSocket 连接成功');
|
|
|
+ };
|
|
|
+
|
|
|
+ this.websocket.onmessage = this.handleWebSocketMessage;
|
|
|
+
|
|
|
+ this.websocket.onerror = () => {
|
|
|
+ console.log('WebSocket 连接错误');
|
|
|
+ this.closeWebSocket();
|
|
|
+ };
|
|
|
+
|
|
|
+ this.websocket.onclose = () => {
|
|
|
+ console.log('WebSocket 连接关闭');
|
|
|
+ this.websocket = null;
|
|
|
+ };
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.error('WebSocket 连接错误:', e);
|
|
|
+ this.closeWebSocket();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 关闭 WebSocket 连接 */
|
|
|
+ closeWebSocket() {
|
|
|
+ if (this.websocket) {
|
|
|
+ try {
|
|
|
+ this.websocket.close();
|
|
|
+ this.websocket = null;
|
|
|
+ console.log('WebSocket 连接已关闭');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('关闭 WebSocket 连接失败:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 处理WebSocket消息 */
|
|
|
+ handleWebSocketMessage(e) {
|
|
|
+ try {
|
|
|
+ const data = JSON.parse(e.data);
|
|
|
+ // 处理权重数据
|
|
|
+ if (data.weight !== undefined) {
|
|
|
+ const weight = parseFloat(data.weight);
|
|
|
+ if (!isNaN(weight)) {
|
|
|
+ this.$set(this.form, 'standby', weight.toFixed(2));
|
|
|
+ console.log('更新重量数据:', weight.toFixed(2), '是否稳定:', data.isStable);
|
|
|
+
|
|
|
+ // 如果重量稳定，显示提示
|
|
|
+ if (data.isStable) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: `重量已稳定: ${weight.toFixed(2)}kg`,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('处理WebSocket消息失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 表格行的类名
|
|
|
+ tableRowClassName({row, rowIndex}) {
|
|
|
+ if (this.currentRow && row.id === this.currentRow.id) {
|
|
|
+ return 'current-row';
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main-wrap {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 30%;
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .msg {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .count-area {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .count-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 70%;
|
|
|
+ // flex: 1;
|
|
|
+ .queryForm {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ text-align: right;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 30px;
|
|
|
+ display: block;
|
|
|
+ width: 100px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-decoration: aliceblue;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-wrap {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-date-editor.el-input {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-input-number--mini {
|
|
|
+ width: 99%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body tr.current-row > td.el-table__cell {
|
|
|
+ background-color: #55e905 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body tr.hover-row.current-row > td.el-table__cell {
|
|
|
+ background-color: #55e905 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body tr.hover-row > td.el-table__cell {
|
|
|
+ background-color: #55e905 !important;
|
|
|
+}
|
|
|
+.print-preview {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .label-container {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 280mm;
|
|
|
+ border: 2px solid #000;
|
|
|
+ padding: 15mm;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 15mm;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 2px solid #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 0 10mm;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ margin-bottom: 12mm;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 25px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ min-width: 85px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-line {
|
|
|
+ flex: 1;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shift {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media print {
|
|
|
+ .print-preview {
|
|
|
+ width: 210mm;
|
|
|
+ height: 297mm;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .label-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 2px solid #000;
|
|
|
+ padding: 20mm;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 20mm;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 0 15mm;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ margin-bottom: 15mm;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ min-width: 90px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-line {
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @page {
|
|
|
+ size: A4;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
