wu
2025-10-30 3124ce87407fe85f6780b3ba1a219d8d9e8d7475
UI-Project/src/views/hollow/hollowslicecage.vue
@@ -29,6 +29,16 @@
const carPosition = ref([])
const tableDatass = ref([])
const tableDataLack = ref([])
const tableDataMiss = ref([])
// 响应式状态
const showAlert = ref(false)
const alertMessage = ref('')
const alarmData = ref<any>(null)
const showModal = ref(false)
const currentAlarm = ref<any>(null)
const tableDataAlert = ref([])
const alertText = ref('')
const ganghua = ref('')
const diaodu = ref('')
const hollowPriority = ref('')
@@ -74,14 +84,29 @@
  window.localStorage.setItem('slot', row.slot)
  add.value = true;
};
// 缺片详情
// 多条破损数据
const handleMissingFilms = (row) => {
  currentPage2.value = 1;
  const { flowCardId } = row;
  currentLack.flowCardId = row.flowCardId;
  dialogFormVisibleb.value = true;
  fetchFlowBind(flowCardId, currentPage2.value);
  handleAllMissing(row)
};
const handleAllMissing = async (row) => {
  try  {
  const response = await request.post('/hollowGlass/hollowGlassRelationInfo/queryLackGlassByFlowCard', {
    flowCardId: row.flowCardId,
    layer: row.layer,
    orderSort: row.glassType,
    //  glassId: row.glassId
    });
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableDataMiss.value = response.data
    } else {
      ElMessage.error(response.message);
    }
}
catch (error) {
  }
}
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  fetchFlowBind(currentLack.flowCardId, currentPage2.value);
@@ -205,6 +230,39 @@
    const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', {
      flowCardId: row.flowCardId,
      glassType: row.glassType,
      glassId: row.glassId,
      layer: row.layer,
      state: 8,
      line: 1,
      workingProcedure: '中空',
      remark: '中空'
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      const { flowCardId } = row;
      fetchFlowBind(flowCardId, currentPage2.value);
    } else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
    console.error(error);
  }
}
// 缺片详情-一键破损
const handleAllBroke = async (row) => {
  try {
     const confirmResult = await ElMessageBox.confirm(
      t('order.dilapidationWhether'),
      t('workOrder.prompt'),
      {
        confirmButtonText: t('workOrder.yes'),
        cancelButtonText: t('workOrder.cancel'),
        type: 'warning',
      }
    );
    const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', {
      flowCardId: row.flowCardId,
      glassType: row.glassType,
      layer: row.layer,
      state: 8,
      line: 1,
@@ -316,6 +374,35 @@
  } catch (error) {
  }  
}; 
// 警报确认
const handleSure = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('hellow.clickmakesure'),
      t('productStock.prompt'),
      {
        confirmButtonText: t('productStock.yes'),
        cancelButtonText: t('productStock.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      const response = await request.post('/hollowGlass/productAlarmInfo/updateAlarmInfo', {
        id: row.id
      })
      if (response.code === 200) {
        showModal.value = false;
        showAlert.value = false;
        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.msg);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
const handlexiang = () => {
  dialogFormVisiblea.value = true;
  fetchxiang(); 
@@ -364,28 +451,28 @@
  selectedRow.value = row; // 更新选中的行数据  
}
// 任务重置
const handleptask = async() => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.partasks'),
      t('workOrder.prompt'),
      {
        confirmButtonText: t('workOrder.yes'),
        cancelButtonText: t('workOrder.cancel'),
        type: 'warning',
      }
    );
 if (confirmResult === 'confirm') {
  const response = await request.post('/hollowGlass/hollowBigStorageCage/resetCage')
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
      ElMessage.error(response.msg);
      }
    }
  } catch (error) {
  }
};
// const handleptask = async() => {
//   try {
//     const confirmResult = await ElMessageBox.confirm(
//       t('searchOrder.partasks'),
//       t('workOrder.prompt'),
//       {
//         confirmButtonText: t('workOrder.yes'),
//         cancelButtonText: t('workOrder.cancel'),
//         type: 'warning',
//       }
//     );
//  if (confirmResult === 'confirm') {
//   const response = await request.post('/hollowGlass/hollowBigStorageCage/resetCage')
//     if (response.code === 200) {
//       ElMessage.success(response.message);
//       } else {
//       ElMessage.error(response.msg);
//       }
//     }
//   } catch (error) {
//   }
// };
// 调度开关
const handlediaodu = async () => {
  try  {
@@ -425,8 +512,29 @@
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/hollowGlassMessage`;
const handleMessage = (data) => {
  if(data.bigStorageCageUsageSummary!=null){
    const summaries = data.bigStorageCageUsageSummary[0];
  // 报警信息
  if (data.alarmInfo[0] !=null && data.alarmInfo[0].length > 0) {
    const alert = data.alarmInfo[0]
    const { id,alarmMessage, ...rest } = alert[0];
    alertMessage.value = `${alarmMessage}`;
    alertMessage.value = `${alert[0].alarmMessage}`;
    // 动态翻译逻辑:根据alarmCode选择翻译键
    alertText.value = alert[0].alarmCode === 'sizeSame'
      ? t('hellow.sizeSame')
      : t('hellow.idSame');
    alarmData.value = data; // 存储完整数据用于弹窗
    showAlert.value = true;
  }
   const formattedData = data.alarmInfo[0].map(record => ({
     ...record,
     formattedCreateTime: formatTimestamp(record.createTime),
     alarmCode: record.alarmCode,
     alarmMessage: record.alarmMessage
   }));
    tableDataAlert.value = formattedData;
  if(data.lackDetailsList!=null){
    const summaries = data.lackDetailsList[0];
      const updatedData = summaries.map(summary => ({
        ...summary,
        totalNumber: summary.layer * summary.sumCount,
@@ -545,7 +653,19 @@
    adjustedRectsd.value = ''
  }
};
const getAlertText = (alarmCode) => {
  const codeMap = {
    sizeSame: 'hellow.sizeSame',
    idSame: 'hellow.idSame'
  };
  return alarmCode in codeMap
    ? t(codeMap[alarmCode])
    : t('hellow.unknownAlert');
};
// 警报双击弹窗
const handleDoubleClick = () => {
  showModal.value = true;
};
// 计算每个大矩形的样式
const rectStyle = (rect, index) => ({
  position: 'absolute',
@@ -724,6 +844,17 @@
    closeWebSocket(socket);
    }
    });
// 格式化时间戳为年月日时间字符串的函数
function formatTimestamp(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需要加1,并补零
const day = String(date.getDate()).padStart(2, '0'); // 补零
const hours = String(date.getHours()).padStart(2, '0'); // 补零(如果需要显示时间)
const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零(如果需要显示时间)
const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零(如果需要显示时间)
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function getStatusType(enableState: number) {  
  switch (enableState) {  
    case 100:
@@ -768,10 +899,52 @@
</script>
<template>
  <div style="height: 600px;">
    <div v-if="showAlert" class="global-alert-bar" @dblclick="handleDoubleClick">
    <div class="alert-content">
      <el-icon><WarnTriangleFilled /></el-icon>
      <span class="alert-text">
        {{ alertText }} (id:{{ alertMessage }})
      </span>
    </div>
    <button @click="showAlert = false" class="close-btn">×</button>
  </div>
  <el-dialog
    v-model="showModal"
    width="40%"
    center
  >
      <el-table
      ref="table"
      border
      :data="tableDataAlert"
      max-height="calc(500px - 35px)"
      style="width: 100%;"
    >
      <el-table-column prop="formattedCreateTime" align="center" :label="$t('film.createtime')" min-width="100" />
      <el-table-column
       :label="$t('hellow.content')"
       align="center"
       min-width="220"
     >
       <template #default="scope">
           <span>
             {{ getAlertText(scope.row.alarmCode) }}
             (id:{{ scope.row.alarmMessage }})
           </span>
       </template>
     </el-table-column>
      <el-table-column fixed="right" :label="$t('film.operate')" align="center" width="100">
        <template #default="scope">
          <el-button type="text" plain
            @click="handleSure(scope.row)">{{ $t('basicData.yes') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
    <div style="display: flex;">
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="primary" @click="handlexiang">{{ $t('searchOrder.cageinformation') }}</el-button>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="success" @click="handlehistorical">{{ $t('searchOrder.historicaltasks') }}</el-button>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="danger" @click="handleptask()">{{ $t('searchOrder.partask') }}</el-button>
    <!-- <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="danger" @click="handleptask()">{{ $t('searchOrder.partask') }}</el-button> -->
    <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="diaodu" class="mb-2" :inactive-text="$t('searchOrder.Schedulingswitch')" @change="handlediaodu" />
    <div style="display: flex;">
   <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;">{{ $t('searchOrder.hollowPriority') }}:</div>
@@ -886,26 +1059,27 @@
  <div style="width: 100%; height: 100%; overflow: hidden;">
    <el-table 
      ref="table" 
      border
      :data="tableDatass" 
      :header-cell-style="{background:'#F2F3F5', color:'#1D2129'}"
      show-summary
      :summary-method="getSummaries"
      max-height="calc(500px - 35px)"
      style="width: 100%;"
    >
      <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140" />
      <el-table-column prop="sumCount" align="center" :label="$t('searchOrder.totallogarithms')" min-width="120" />
      <el-table-column prop="pairCount" align="center" :label="$t('searchOrder.numberpairs')" min-width="120" />
      <el-table-column prop="totalNumber" align="center" :label="$t('hellow.totalnumber')" min-width="100" />
      <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="120" />
      <el-table-column fixed="right" :label="$t('hellow.operate')" align="center">
        <template #default="scope">
          <el-button type="text" plain @click="handleMissingFilms(scope.row)">
            {{ $t('hellow.missingfilms') }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="139" />
      <el-table-column prop="layer" align="center" :label="$t('reportmanage.layer')" min-width="38" />
      <el-table-column prop="glassType" align="center" :label="$t('large.serialnumber')" min-width="80" />
      <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="52" />
      <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="62"/>
      <!-- <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="62" show-overflow-tooltip/> -->
      <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="55" />
      <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="55" />
      <el-table-column prop="lackCount" align="center" :label="$t('hellow.missingnumber')" min-width="80" />
      <el-table-column prop="damageCount" align="center" :label="$t('large.brokenNum')"/>
      <!-- <el-table-column prop="patchCount" align="center" :label="$t('large.patchCount')"/> -->
      <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center"  min-width="82">
            <template #default="scope">
              <el-button type="text" plain  @click="handleMissingFilms(scope.row)">{{ $t('hellow.missingfilms') }}</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</el-card>
@@ -1112,35 +1286,23 @@
        <div>
  </div>
  </el-dialog>
  <!-- 缺片详情 -->
  <el-dialog v-model="dialogFormVisibleb" top="7vh" width="70%" height="500">
    <div style="margin-top: -20px;text-align: center;margin-left: 400px;">
      <el-form-item :label="$t('hellow.cardnumbera')" style="width: 14vw">
        {{ currentLack.flowCardId }}
      </el-form-item>
    </div>
    <el-table ref="table" style="margin-top: 20px;height: 400px;" :data="tableDataLack"
  <!-- 多条破损数据 -->
  <el-dialog v-model="dialogFormVisibleb" top="15vh" width="70%" height="500">
    <el-button plain  @click="handleAllBroke">{{ $t('order.dilapidationAll') }}</el-button>
    <el-table ref="table" style="margin-top: 20px;height: 400px;" :data="tableDataMiss"
      :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
      <el-table-column prop="glassType" align="center" :label="$t('large.serialnumber')" min-width="80" />
      <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="80" />
      <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="80" />
      <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="80" />
      <el-table-column prop="workingProcedure" align="center" :label="$t('searchOrder.process')" min-width="80" />
      <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="80" />
      <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="80" />
      <el-table-column prop="lackCount" align="center" :label="$t('hellow.missingnumber')" min-width="80" />
      <el-table-column prop="damageCount" align="center" :label="$t('large.brokenNum')"/>
      <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center">
            <template #default="scope">
              <el-button type="text" plain  @click="handleBroke(scope.row)">{{ $t('order.dilapidation') }}</el-button>
            </template>
        </el-table-column>
      <div style="float: right;margin-bottom: 5px;">
        <el-pagination layout="prev, pager, next" :total="50" />
      </div>
      </el-table-column>
    </el-table>
    <div style="display: flex;margin-left: 40%;margin-top: 10px;">
      <el-pagination background size="large" layout="prev, pager, next" :total="30" :current-page.sync="currentPage2"
        @current-change="handlePageChange2" />
    </div>
  </el-dialog>
  <!-- 历史任务 -->
<el-dialog v-model="blindb" top="5vh" width="95%" @close="iframeUrl=''">
@@ -1303,4 +1465,45 @@
.row-red-background {
  background-color: #CDAF95 !important;
}
.global-alert-bar {
  position: fixed;
  top: 0;
  left: 50%; /* 水平居中关键 */
  transform: translateX(-50%); /* 水平居中关键 */
  padding: 12px 20px;
  background-color: #dbdbd7;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  max-width: 80%; /* 防止小屏幕溢出 */
  min-width: 400px; /* 最小宽度保证 */
}
/* 提示内容居中 */
.alert-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1; /* 占据可用空间 */
}
/* 提示文字样式 */
.alert-text {
  margin-left: 8px;
  text-align: center;
  font-weight: bold;
  color: #0d0d0d;
}
/* 关闭按钮样式 */
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 20px;
}
/* 页面容器顶部内边距 */
#app-container {
  padding-top: 60px; /* 根据alert高度调整 */
}
</style>