wu
2024-12-23 b9b44b51b201e2f5a9a1f3665c7fb76b5690f9af
UI-Project/src/views/UnLoadGlass/loadmachinerack.vue
@@ -6,7 +6,6 @@
import request from "@/utils/request";
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {host, WebSocketHost} from '@/utils/constants'
const router = useRouter()
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
@@ -15,25 +14,19 @@
const autoPrint = ref(false)
const takeGlass = ref([])
const scanGlass = ref([])
const dialogFormVisiblea = ref(false)
const dialogFormVisiblea2 = ref(false)
const dialogFormVisibleaDownGlass = ref(false)
const dialogFormVisibleaDownGlasss = ref(false)
// 数据
const loading = ref(false);
// 弹框显示控制
const dialogFormVisible = ref(false);
// 表单数据
const workstationId = ref('');
const workFlowCard = ref('');
const selectedProjectNoa = ref(null); // 当前选中的角色
const selectedProjectNoa = ref(null);
const flowCardId = ref('');
const flowCardOptions = ref('[]');
const tableData = reactive([]);
const downGlass = ref([]);
const selectValuesa = reactive({});
const selectOptionsa = ref([]);
const dialogTableVisible = ref(false)
@@ -44,25 +37,21 @@
const now = new Date();
const timeRange = ref([])
const browser = ref(false)
const handleChange = async () => {
  console.log("触发开关")
  try {
    const body = {
      flag: autoPrint.value, // 使用 ganghua.value 获取当前开关的状态
      flag: autoPrint.value,
    };
    var url = "/unLoadGlass/downWorkStation/autoPrint?flag=" + autoPrint.value;
    const response = await request.post(url)
    if (response.code == 200) {
      // 绑定成功,处理逻辑
      ElMessage.success(response.message);
      autoPrint.value = response.data
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    // 处理错误
    console.error(error);
  }
}
@@ -75,9 +64,7 @@
    browser.value = false
  }
}
const handleInputChangea = (value, rowId) => {
  // 更新对应行的 select 值
  selectValuesa[rowId] = value;
};
// 方法
@@ -85,11 +72,10 @@
  // 处理表格行选择事件
};
const handleBindRack = (row) => {
  workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名
  workstationId.value = row.workstationId;
  flowCardId.value = row.flowCardId;
  // 发起接口请求获取流程卡号
  fetchFlowCardId();
  dialogFormVisiblea.value = true; // 打开绑定架子对话框
  dialogFormVisiblea.value = true;
};
//获取流程卡号
const fetchFlowCardId = async () => {
@@ -97,7 +83,6 @@
    const response = await request.get('unLoadGlass/downWorkStation/getflowCardId');
    console.log(response)
    if (response.code === 200) {
      flowCardOptions.value = response.data.filter(item => item !== null)
        .map(item => ({ flowcard_id: item.flow_card_id }));
      console.log(flowCardOptions.value);
@@ -120,30 +105,22 @@
      layer: twoPart
    });
    if (response.code == 200) {
      // 绑定成功,处理逻辑
      console.log('绑定成功');
      ElMessage.success(response.message);
      updatePageData();
      dialogFormVisiblea.value = false;
    } else {
      // 请求失败,显示错误消息
      ElMessage.error(response.msg);
    }
  } catch (error) {
    // 处理错误
    console.error(error);
  }
};
const updatePageData = () => {
  // 假设你的页面上有一个名为 tableData 的 Vue 组件
  // 你可以直接更新 tableData 的数据
  fetchTableData()
  // 使用 $forceUpdate() 强制更新组件
};
const handleBindRack2 = (row) => {
  workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名
  dialogFormVisiblea2.value = true; // 打开绑定架子对话框
  workstationId.value = row.workstationId;
  dialogFormVisiblea2.value = true;
  workFlowCard.value = row.flowCardId;
};
//清除内容
@@ -152,25 +129,17 @@
    const response = await request.post('unLoadGlass/downWorkStation/clear', {
      workstationId: workstationId.value,
    });
    if (response.code === 200) {
      // 清除成功的逻辑
      console.log('清除成功');
      ElMessage.success(response.message);
      dialogFormVisiblea2.value = false;
      if (fullFlowCard.value == workFlowCard.value) {
        fullFlowCard.value = "";
      }
    } else if (response.code === 500) {
      // 清除失败的逻辑
      console.log('清除失败');
      console.log(response.message); // 打印服务器返回的错误信息
      ElMessage.error(response.message);
      dialogFormVisiblea2.value = false;
    }
  } catch (error) {
    // console.log(error);
    ElMessage.error("清除失败");
    dialogFormVisiblea2.value = false;
  }
@@ -178,29 +147,19 @@
// 发送获取表格数据的请求
const fetchTableData = async () => {
  try {
    // 发送获取表格数据的请求,并等待响应
    const response = await request.get('unLoadGlass/downWorkStation/getone');
    // 检查响应状态
    if (response.code === 200) {
      // 更新表格数据
      console.log('成功获取表格数据:', response.data);
      tableData.splice(0, tableData.length, ...response.data);
    } else {
      // 请求失败,显示错误消息
      ElMessage.error(response.msg);
    }
  } catch (error) {
    // 处理请求失败的情况
    ElMessage.error('获取表格数据失败,请重试');
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass`;
// 定义消息处理函数,更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  if (data.downGlassInfos != null) {
    downGlass.value = data.downGlassInfos[0];
  }
@@ -211,17 +170,13 @@
    autoPrint.value = data.autoPrint[0];
  }
  if (data.takeGlass != null) {
    takeGlass.value = data.takeGlass[0];
      // takeGlass.value 是一个空对象
      let width = takeGlass.value.width;
      let height = takeGlass.value.height;
      if (width < height) {
        takeGlass.value.width = height;
        takeGlass.value.height = width;
      }
  }
  if (data.scanGlass != null) {
    scanGlass.value = data.scanGlass[0];
@@ -235,7 +190,6 @@
      open1(scanGlass);
    }
  }
  //自动打印
  if (fullFlowCard.value == "" && autoPrint.value == true && browser.value == true) {
    for (let i = 0; i < tableData.length; i++) {
@@ -254,10 +208,7 @@
  if (data.params != null) {
    tableData.splice(0, tableData.length, ...data.params[0]);
  }
  //  console.log("更新后数据", data.params[0]);
};
// 初始化 WebSocket,并传递消息处理函数
onMounted(() => {
  confirmBrowser();//获取浏览器
  fetchFlowCardId();
@@ -273,42 +224,28 @@
  console.log("关闭了")
  closeWebSocket();
});
const getTagType = (status) => {
  return status === 1 ? 'success' : 'danger';
  // 根据状态值决定标签类型,这里假设状态为1时为成功(绿色),否则为失败(红色)
}
const toggleStatus = (row) => {
  // 切换料架状态的逻辑
  row.enableState = 1 - row.enableState; // Toggle between 0 and 1
  // 此处可以添加保存状态的逻辑,比如调用 API 更新数据
  updateRowStatus(row);
};
const updateRowStatus = async (row) => {
  try {
    // 假设你的后端 API 接收 PUT 请求,并且需要传递 row.id 和 row.enableState 参数
    const response = await request.post('unLoadGlass/downWorkStation/updateDownWorkstation', {
      enableState: row.enableState,
      id: row.id
    });
    console.log('Updated row status:', response.data);
    // 可以根据后端返回的数据进行进一步处理,比如更新本地状态等
  } catch (error) {
    console.error('Error updating row status:', error);
    // 处理错误情况,比如提示用户更新失败
  }
};
// 查询数据
const selectDownGlassData = async () => {
  const response = await request.post("/unLoadGlass/downGlassInfo/setDownGlassInfoRequest", {
    workStationId: selectValuesa[0],
    engineerId: selectValuesa[1],
@@ -320,12 +257,8 @@
  } else {
    ElMessage.error(response.message);
  }
}
const open = async (row) => {
  printFlowCardId.value = row.flowCardId;
  printLayer.value = row.layer
  dialogTableVisible.value = true;
@@ -335,7 +268,6 @@
  }, 2000);
}
const open1 = async (row) => {
  printFlowCardId.value = row.flowCardId;
  printLayer.value = row.layer
  printGlassId.value = row.glassId
@@ -345,20 +277,16 @@
    //dialogTableVisible1.value = false;
  }, 1000);
}
const printFlowCard = () => {
  // 需要打印的局部区域赋予"print-wrap"的id
  let el = document.getElementById("child");
  let doc = document;
  let body = doc.body || doc.getElementsByTagName("body")[0];
  let printId = "print-" + Date.now();
  // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
  let content = doc.createElement("div");
  content.id = printId;
  // alert(/Chrome/.test(userAgent) && !/Edge/.test(userAgent));
  // 样式控制与打印无关的元素隐藏
  let style = doc.createElement("style");
  console.log("style1:" + style.innerHTML)
@@ -376,11 +304,9 @@
    "{display:block;}#" +
    printId +
    "{display: block; padding: 0; margin: 0;  width: 100%;  position: absolute; top: 0; left: 0; height: 100vh;  box-sizing: border-box;}} ";
  content.innerHTML = el.outerHTML;
  // // console.log("el.outerHTML", el.outerHTML);
  body.appendChild(style);
  // 与style元素设置的样式相配合
  // 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式)
  body.appendChild(content);
@@ -390,18 +316,15 @@
    body.removeChild(style);
  }, 20);
}
const printFlowCard1 = () => {
  // 需要打印的局部区域赋予"print-wrap"的id
  let el = document.getElementById("printFlowCard");
  let doc = document;
  let body = doc.body || doc.getElementsByTagName("body")[0];
  let printId = "print-" + Date.now();
  // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
  let content = doc.createElement("div");
  content.id = printId;
  // 样式控制与打印无关的元素隐藏
  let style = doc.createElement("style");
  style.innerHTML =
@@ -420,7 +343,6 @@
  content.innerHTML = el.outerHTML;
  // // console.log("el.outerHTML", el.outerHTML);
  body.appendChild(style);
  // 与style元素设置的样式相配合
  // 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式)
  body.appendChild(content);
@@ -430,8 +352,6 @@
    body.removeChild(style);
  }, 20);
}
// beforeUnmount(() => {
//   closeWebSocket();
// });
@@ -481,13 +401,12 @@
                <el-button @click="open(scope.row)" :disabled="scope.row.flowCardId == null">{{ $t('reportWork.processcard') }}</el-button>
                <el-button @click="open1(scope.row)" :disabled="scope.row.flowCardId == null">{{ $t('reportWork.printlabels') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog v-model="dialogFormVisibleaDownGlass" top="2vh" width="97%" :title="$t('reportWork.information')">
          <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('reportWork.cstation')" clearable>
          <div style="margin-bottom: 10px;margin-top: -20px;">
          <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('reportWork.cstation')" clearable style="margin-top: -6px;">
            <el-option :label="$t('reportWork.all')" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
@@ -497,21 +416,19 @@
            <el-option label="6" value="6"></el-option>
            <el-option label="7" value="7"></el-option>
          </el-select>
          <el-select v-model="selectValuesa[1]" filterable :placeholder="$t('basicData.plselectproject')" clearable
          <el-select v-model="selectValuesa[1]" filterable :placeholder="$t('basicData.plselectproject')" clearable style="margin-left: 10px;margin-top: -6px;"
            @input="handleInputChangea($event, row.id)">
            <el-option v-for="item in selectOptionsa" :key="item" :label="item" :value="item" />
          </el-select>
          <span class="demonstration">{{ $t('reportWork.timeperiod') }}</span>
          <span style="margin-left: 10px;margin-top: 15px;" class="demonstration">{{ $t('reportWork.timeperiod') }}</span>
          <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" :start-placeholder="$t('reportmanage.starttime')"
            value-format="YYYY-MM-DD hh:mm:ss" :end-placeholder="$t('reportmanage.endtime')">
            value-format="YYYY-MM-DD hh:mm:ss" :end-placeholder="$t('reportmanage.endtime')" style="margin-left: 10px;">
          </el-date-picker>
          <el-button type="primary" style="margin-left: 10px;" @click="selectDownGlassData()">{{
          <el-button type="primary" style="margin-left: 10px;margin-top: -6px;" @click="selectDownGlassData()">{{
            $t('reportmanage.inquire')
          }}
          </el-button>
        </div>
          <el-table height="200px" ref="table" @selection-change="handleSelectionChange" :data="downGlass"
            :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
            <el-table-column prop="workStationId" align="center" :label="$t('reportWork.stationnumber')" min-width="80" />
@@ -532,7 +449,6 @@
              style="display: flex; justify-content: center; align-items: center; width:800px; height: 800px;position: relative;">
              <div
                :style="{ width: takeGlass.width + 'px', height: takeGlass.height + 'px', backgroundColor: '#e1f3d8', transform: 'scale(' + 800 / (takeGlass.width > takeGlass.height ? takeGlass.width : takeGlass.height) + ')' }">
              </div>
              <div style="font-size: 50px; text-align: center;position: absolute;top:0px;left:170px;">
                <div>{{ $t('reportWork.glassmation') }}</div>
@@ -548,7 +464,6 @@
              style="display: flex; justify-content: center; align-items: center; width: 800px; height: 800px;position: relative;">
              <div
                :style="{ width: scanGlass.width + 'px', height: scanGlass.height + 'px', backgroundColor: '#e1f3d8', transform: 'scale(' + 800 / (scanGlass.width > scanGlass.height ? scanGlass.width : scanGlass.height) + ')' }">
              </div>
              <div style="font-size: 50px; text-align: center;position: absolute;top:0px;left:200px;">
                <div>{{ $t('reportWork.barcodescanner') }}</div>
@@ -558,7 +473,6 @@
                <div>{{ scanGlass.glassId }}</div>
                <div>{{ scanGlass.width }}</div>
                <div>{{ scanGlass.height }}</div>
              </div>
            </el-card>
          </div>
@@ -579,7 +493,6 @@
        </div>
      </div>
    </el-card>
  </div>
  <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" :title="$t('reportWork.bindingshelves')">
    <div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
@@ -599,7 +512,6 @@
    </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          {{ $t('reportWork.sure') }}
        </el-button>
@@ -634,19 +546,16 @@
  line-height: 20px;
  margin-left: 100px;
}
#dta {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 80%;
}
#dialog-footer {
  text-align: center;
  margin-top: -15px;
}
#message {
  text-align: center;
  align-items: center;
@@ -656,21 +565,17 @@
  background-color: #337ecc;
  margin-left: 28%;
}
.awatch {
  max-width: 100%;
}
#main-body {
  margin-top: -40px;
  margin-left: 150px;
}
#main-bodya {
  margin-top: -40px;
  margin-left: 100px;
}
:deep(#sizePrintCalrd .el-dialog__body) {
  height: 85%;
  width: 100%;