Merge branch 'master' of http://10.153.19.25:10105/r/YiWuProject

ZengTao

2025-04-21 d97163078cc11eefcd5c268f6e253ea1d52ac544

 UI-Project/src/views/hollow/hollowaluminum.vue

@@ -1,54 +1,192 @@
<script setup>
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {useRouter} from "vue-router"
import {host, WebSocketHost} from '@/utils/constants'
import request from "@/utils/request"
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {ElMessage, ElMessageBox} from 'element-plus'
import {useI18n} from 'vue-i18n'
const router = useRouter()
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
// let socket = null;
// const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`;
// const handleMessage = (data) => {
//   tableData.value = data.edgTasks[0]
// };
// onMounted(() => {
//   socket = initializeWebSocket(socketUrl, handleMessage);
// });
//   onUnmounted(() => {
//     if (socket) {
//       closeWebSocket(socket);
//     }
//   });
// onBeforeUnmount(() => {
//   closeWebSocket();
// });
import { onBeforeUnmount, onMounted, ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { host, WebSocketHost } from '@/utils/constants';
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
import { useI18n } from 'vue-i18n';
import request from '@/utils/request';
const router = useRouter();
const { t } = useI18n();
const language = ref(localStorage.getItem('lang') || 'zh');
const carouselData = ref([]);
const activeIndex = ref('');
const isDialogVisible = ref(false);
const selectedItem = ref(null);
const selectedLayer = ref(null);
const maxLayer = ref(0);
const carouselRef = ref(null); // 👈 ref 用于访问组件实例
const handlesure = async () => {
  try {
    const response = await request.post('/hollowGlass/hollowGlassQueueInfo/queryHollowGlassQueueInfoByLine', {
      cell: 930,
    });
    if (response.code === 200) {
      carouselData.value = response.data.map((item) => ({
        width: item.width,
        height: item.height,
        state: item.state,
        flowCardId: item.flowCardId,
        thickness: item.thickness,
        hollowSequence: item.hollowSequence,
        layer: item.layer,
        relationId: item.relationId
      }));
      // 查找 state === -2 的项
      const targetIndex = carouselData.value.findIndex((item) => item.state === -2);
      const finalIndex = targetIndex !== -1 ? targetIndex : 0;
      // 等待 DOM 渲染完成后切换页面
      await nextTick();
      activeIndex.value = finalIndex;
      carouselRef.value?.setActiveItem(finalIndex); // 强制更新 Element Plus 的轮播组件
    } else {
      console.error('接口返回错误:', response.message || '未知错误');
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
};
const handleDilapidationClick = (item) => {
  if (item.layer > 0) {
    selectedItem.value = item;
    maxLayer.value = item.layer;
    selectedLayer.value = null; // 重置选择
    isDialogVisible.value = true;
  } else {
    ElMessage.warning('当前项没有层信息');
  }
};
const confirmDilapidation = async () => {
  if (!selectedLayer.value) {
    ElMessage.warning('请选择一个层数');
    return;
  }
  try {
    const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
      hollowSequence: selectedItem.value.hollowSequence,
      relationId: selectedItem.value.relationId,
      layer: selectedLayer.value,
      state: 8,
    });
    ElMessage.success(`已选择层数：${selectedLayer.value}`);
    isDialogVisible.value = false;
    handlesure()
      } catch (error) {
    console.error('破损操作失败:', error);
    ElMessage.error('破损操作失败，请重试');
  }
};
// 确认
const handleButtonClick = async (item) => {
  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/hollowGlassQueueInfo/confirmBorder', {
      hollowSequence: item.hollowSequence,
      relationId: item.relationId,
      state: 1,
    })
      if (response.code === 200) {
        ElMessage.success(response.message);
        handlesure()
    } else {
        ElMessage.error(response.msg);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
onMounted(() => {
  handlesure()
});
onBeforeUnmount(() => {
  // if (socket) {
  //   closeWebSocket(socket);
  // }
});
const handleCarouselChange = (index) => {
  activeIndex.value = index;
};
const getColorByState = (state) => {
  switch (state) {
    case -2: return "gray";
    case -1: return "gray";
    case 0: return "gray";
    case 1: return "green";
    case 8: return "#911005";
    default: return "black";
  }
};
</script>
<template>
  <div style="height: 500px;">
    <div>
      <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" >
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <div class="block text-center" m="t-4">
    <el-carousel height="550px">
      <!-- <el-carousel trigger="click" height="550px">//鼠标移入时页面不切换，鼠标移走时界面自动滚动 -->
      <el-carousel-item v-for="item in 3" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
      <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
        <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
          <div class="block text-center" m="t-4" >
                <el-carousel ref="carouselRef" :active-index="activeIndex" @change="handleCarouselChange" height="750px"
              :autoplay="false">
              <el-carousel-item v-for="(item, index) in carouselData" :key="index">
                <div class="carousel-item-content" :style="{
                  width: `${item.width*0.5}px`,
                  height: `${item.height*0.3}px`,
                  backgroundColor: getColorByState(item.state),
                }">
                  <div style="color: aquamarine;">
                    <p>{{ item.flowCardId }}</p>
                    <p>{{ $t('basicData.widtha') }}{{ item.width }}</p>
                    <p>{{ $t('basicData.heighta') }}{{ item.height }}</p>
                    <p>{{ $t('basicData.thicknessa') }}{{ item.thickness }}</p>
                    <p>{{ $t('hellow.logarithm') }}{{ item.hollowSequence }}</p>
                  </div>
                  <div>
                   <el-button type="text" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
                   <el-button type="text" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
                </div>
              </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <el-dialog v-model="isDialogVisible" width="20%" top="30vh" style="text-align: center;">
      <div>
        <el-select v-model="selectedLayer" clearable :placeholder="$t('hellow.layer')" style="width: 50%;">
          <el-option v-for="n in maxLayer" :key="n" :label="n" :value="n"></el-option>
        </el-select>
      </div>
      <div slot="footer" style="margin-top: 15px;">
        <el-button @click="isDialogVisible = false">{{ $t('basicData.cancel') }}</el-button>
        <el-button type="primary" :disabled="!selectedLayer"  @click="confirmDilapidation">{{ $t('basicData.confirm') }}</el-button>
      </div>
    </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<style scoped>
.carousel-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  margin: 10px auto;
  color: white;
  /* 确保文字颜色可见 */
  text-align: center;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
@@ -56,11 +194,9 @@
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}