更换前端打包方式，将ip地址配置提取到public

wangfei

2025-11-12 73fe3c5574c8fbb7b18fa9b76d53b918f6f921e1

 UI-Project/src/views/GlassStorage/MaterialRackManagement.vue

@@ -4,25 +4,23 @@
      <div

        slot="header"

        class="clearfix"

        style="display: flex; align-items: center"

        style="display: flex; align-items: center;margin-top: -20px;"

      >

        <!-- 左侧按钮组 -->

        <div>

          <el-button type="success" size="mini" @click="storage()"

          <el-button type="success" @click="storage()"

            >原片仓储详情</el-button

          >

          <el-button type="success" size="mini" @click="handleInbound()"

          <el-button type="success" @click="handleInbound()"

            >入库</el-button

          >

          <el-button type="success" size="mini">吊装位入库</el-button>

          <el-button type="success" >吊装位入库</el-button>

        </div>



        <!-- 右侧选择框 -->

        <el-form-item style="margin-top: 15px; width: 150px">

        <el-form-item style="margin-top: 15px; width: 150px;margin-left: 10px;">

          <el-select v-model="formData2.dzw" placeholder="请选择吊装位">

            <el-option label="吊装位1" value="吊装位1"></el-option>

            <el-option label="吊装位2" value="吊装位2"></el-option>

            <!-- 根据实际情况添加更多选项 -->

          </el-select>

        </el-form-item>

      </div>

@@ -63,23 +61,21 @@
              </el-tag>

            </template>

          </el-table-column>



          <!-- 操作列 -->

          <el-table-column label="操作" width="250">

            <template #default="{ row }">

              <el-button

                type="primary"

                size="mini"

                @click="edithandleRowClick(row)"

                >修改</el-button

              >

              <el-button type="danger" size="mini" @click="handleDelete(row)"

              <el-button type="danger" @click="handleDelete(row)"

                >删除</el-button

              >

              <el-button type="warning" size="mini" @click="handleCheckout(row)"

              <el-button type="warning" @click="handleCheckout(row)"

                >出库</el-button

              >

              <!-- <el-button type="success" size="mini" @click="addglass()">添加原片</el-button> -->

              <!-- <el-button type="success" @click="addglass()">添加原片</el-button> -->

            </template>

          </el-table-column>

        </el-table>

@@ -134,24 +130,22 @@
            </el-tag>

          </template>

        </el-table-column>



        <!-- 操作列 -->

        <el-table-column label="操作" width="350">

          <template #default="{ row }">

            <el-button type="primary" size="mini" @click="handleRestart(row)"

            <el-button type="primary" @click="handleRestart(row)"

              >重新开始</el-button

            >

            <el-button type="danger" size="mini" @click="handleDeletetask(row)"

            <el-button type="danger" @click="handleDeletetask(row)"

              >删除任务</el-button

            >

            <el-button type="success" size="mini" @click="handleComplete(row)"

            <el-button type="success" @click="handleComplete(row)"

              >任务完成</el-button

            >

          </template>

        </el-table-column>

      </el-table>

    </el-card>



    <div class="img-ypcc">

      <div

        class="img-car1"

@@ -168,7 +162,6 @@
        ></div>

      </div>

    </div>



    <!-- 入库对话框 -->

    <el-dialog

      title="入库"

@@ -355,7 +348,6 @@
const handleCurrentChange = (val) => {

  currentPage.value = val;

};



const formatTaskType = (row, column) => {

  if (row.taskType === "从仓位到吊装位") {

    return `从仓位${row.shelfRack}到吊装位${row.loadRack}`;

@@ -367,7 +359,6 @@
    return `从吊装位${row.loadRack}到仓位${row.shelfRack}`;

  }

};



const getTagType2 = (status) => {

  switch (status) {

    case "completed":

@@ -382,51 +373,39 @@
      return "";

  }

};



const getTagType = (status) => {

  return status === 1 ? "success" : "danger";

  // 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）

};



const toggleStatus = (row) => {

  // 切换料架状态的逻辑

  row.enableState = 1 - row.enableState; // Toggle between 0 and 1

  // 此处可以添加保存状态的逻辑，比如调用 API 更新数据

};

let socket = null;

const socketUrl = `ws://${WebSocketHost}:${host}/api/glassStorage/api/talk/storageTask`;

const socketUrl = `ws://${window.ipConfig.serverUrl}/api/glassStorage/api/talk/storageTask`;

// 定义消息处理函数，更新 receivedData 变量

const handleMessage = (data) => {

  // 更新 tableData 的数据



  tableData.value = data.rack[0]; // 假设 tableData 是响应式对象或变量



  tableData.value.forEach((item) => {

    // 获取 createTime 的时间戳

    const createTimeTimestamp = item.createTime;



    // 创建日期对象

    const date = new Date(createTimeTimestamp);



    // 格式化日期时间为本地格式

    const formattedDateTime = date.toLocaleString();



    // 替换原来的 createTime 字段为格式化后的日期时间字符串

    item.createTime = formattedDateTime;

  });



  tasktableData.value = data.tasks[0]; // 假设 tasktableData 是响应式对象或变量



  tasktableData.value.forEach((item) => {

    // 获取 createTime 的时间戳

    const createTimeTimestamp = item.startTime;



    // 创建日期对象

    const date = new Date(createTimeTimestamp);



    // 格式化日期时间为本地格式

    const formattedDateTime = date.toLocaleString();



    // 替换原来的 createTime 字段为格式化后的日期时间字符串

    item.startTime = formattedDateTime;

  });

@@ -440,12 +419,9 @@
    }

    });

onBeforeUnmount(() => {

  console.log("关闭了");

  closeWebSocket();

});



const tasktableData = ref([]);



const dialogVisible = ref(false);

const formData = ref({

  number: "",

@@ -456,11 +432,9 @@
  pieces: "",

  loadRack: 1,

});



const formData2 = ref({

  dzw: "",

});



const handleDelete = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm("确定要执行删除操作吗？", "确认删除", {

@@ -470,12 +444,10 @@
  })

    .then(() => {

      // 点击确认按钮的回调，执行出库操作



      const intNumber = {

        id: parseInt(row.number),

      };

      deleteRawUsage(intNumber);



      console.log("执行删除操作");

    })

    .catch(() => {

@@ -483,7 +455,6 @@
      console.log("取消删除操作");

    });

};



const handleCheckout = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm("确定要执行出库操作吗？", "确认出库", {

@@ -505,17 +476,14 @@
      console.log("取消出库操作");

    });

};



const handleInbound = () => {

  // 打开入库对话框

  dialogVisible.value = true;

};



const storage = () => {

  // 打开入库对话框

  Hidden.value = true;

};



const handleCloseDialog = () => {

  // 关闭对话框时重置表单数据

  formData.value = {

@@ -528,15 +496,12 @@
  };

  dialogVisible.value = false;

};



const handleConfirmInbound = () => {

  inStorage(formData.value);

  // 处理确认入库逻辑，可以在这里提交表单或者执行其他操作

  console.log("Confirm Inbound:", formData.value);

  // 关闭对话框

  dialogVisible.value = false;

};



const dialogVisible3 = ref(false);

const colors = ref([

  { "0_glass_id": "Red" },

@@ -544,7 +509,6 @@
  { "0_glass_id": "Blue" },

  // Add more colors as needed

]);



const formData3 = ref({

  selectedColor: "",

  wid: "",

@@ -552,7 +516,6 @@
  thinkness: "",

  num: "",

});



const addglass = () => {

  // 打开入库对话框

  dialogVisible3.value = true;

@@ -560,17 +523,13 @@
const handleCommand = (command) => {

  formData.value.selectedColor = command;

};



const clearInput = (field) => {

  formData.value[field] = "";

};



const submitForm = () => {

  console.log("提交数据:", formData.value);

  dialogVisible3.value = false;

  // Add your submit logic here

};



const editdialogVisible = ref(false);

const editForm = ref({

  id: "",

@@ -582,11 +541,9 @@
});

const editFormRef = ref(null);

let currentRow = ref(null);



// 处理行点击事件

const edithandleRowClick = (row) => {

  currentRow.value = row;

  console.log(row);

  editForm.value.pieces = row.pieces.toString();

  editForm.value.batchId = row.batchId;

  editForm.value.rawWidth = row.rawWidth;

@@ -594,13 +551,10 @@
  editForm.value.rawThickness = row.rawThickness;

  editForm.value.id = row.number;

  editdialogVisible.value = true;

  console.log(editForm.value);

};



// 添加保存编辑内容

const editsaveEdit = () => {

  if (!currentRow.value) return;



  // 更新当前行数据

  currentRow.value.pieces = editForm.value.pieces;

  currentRow.value.batchId = editForm.value.batchId;

@@ -609,11 +563,9 @@
  currentRow.value.rawThickness = editForm.value.rawThickness;

  // 调用更新函数，并处理其返回的 Promise

  updateRawUsage(editForm.value);



  // 关闭对话框

  editdialogVisible.value = false;

};



// 对话框关闭时重置编辑表单和当前行数据

const edithandleDialogClose = () => {

  editForm.value.pieces = "";

@@ -621,10 +573,8 @@
  editForm.value.rawWidth = "";

  editForm.value.rawHeight = "";

  editForm.value.rawThickness = "";



  currentRow.value = null;

};



const handleRestart = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm("确定要执行重新开始操作吗？", "确认重新开始", {

@@ -638,8 +588,6 @@
        Type:"重新开始"

      }

      taskUpdate(taskdata);

      


      console.log("执行重新开始操作", row);

    })

    .catch(() => {

@@ -647,7 +595,6 @@
      console.log("取消重新开始操作");

    });

};



const handleDeletetask = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm("确定要执行删除任务操作吗？", "确认删除任务", {

@@ -669,7 +616,6 @@
      console.log("取消删除任务操作");

    });

};



const handleComplete = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm("确定要执行任务完成操作吗？", "确认任务完成", {

@@ -678,7 +624,6 @@
    type: "warning",

  })

    .then(() => {



      const taskdata={

        id:row.id,

        Type:"完成"

@@ -693,7 +638,6 @@
    });

};

</script>



<style scoped>

#dt {

  display: block;

@@ -711,10 +655,9 @@
  text-align: center;

  margin-top: -15px;

}



.img-ypcc {

  margin-left: 80px;

  background-image: url("../../assets/ypcc.png");

  background-image: url("/ypcc.png");

  background-repeat: no-repeat;

  background-attachment: local;

  min-height: 600px;

@@ -725,9 +668,8 @@
  position: relative;

  margin-top: 0px;

}



.img-car1 {

  background-image: url("../../assets/ypccche.png");

  background-image: url("/ypccche.png");

  position: absolute;

  background-repeat: no-repeat;

  background-attachment: local;

@@ -738,9 +680,8 @@
  overflow: hidden;

  position: relative;

}



.custom-dialog {

  max-height: 90vh; /* 最大高度为视口高度的90% */

  overflow-y: auto; /* 对话框内部出现垂直滚动条 */

}

</style>

</style>