新增折铝框一线、二线、三线页面及功能，钢化理片笼表格字段更改

wangfei

2025-04-21 a9592a3326b5c2f9baec271fe9c92c924a51f87e

新增折铝框一线、二线、三线页面及功能，钢化理片笼表格字段更改

 UI-Project/src/lang/en.js

@@ -135,6 +135,7 @@
        takeon: 'The arrangement is complete',
    },
    searchOrder: {
        furnaces:'Number of full furnaces',
        furnfullTemp: 'Total amount of glass',
        startCell: 'Target layer number',
        endCell: 'Reserved layer number',
@@ -747,6 +748,8 @@
        finegrinding: 'Fine grinding',
    },
    hellow: {
        clickmakesure: 'Whether or not to confirm the click？',
        logarithm: 'logarithm：',
        totalPairQuantitya: 'Total number of task allocation pairs',
        pairQuantitya: 'Number of deployed pairs',
        waitingout: 'Waiting for the release of the film',

 UI-Project/src/lang/py.js

@@ -134,6 +134,7 @@
        takeaway: 'Взять вручную',
    },
    searchOrder: {
        furnaces:'满炉炉数',
        furnfullTemp:'玻璃总量',
        startCell:'目标层号',
        endCell:'预留层号',
@@ -708,6 +709,8 @@
        finegrinding: '精磨',
    },
    hellow: {
        clickmakesure: '是否确认点击？',
        logarithm: '对数：',
        totalPairQuantitya: '任务总配对数',
        pairQuantitya: '已出配对数',
        waitingout: '等待出片',

 UI-Project/src/lang/zh.js

@@ -134,6 +134,7 @@
          takeon:'摆片完成',
      },
      searchOrder:{
          furnaces:'满炉炉数',
          furnfullTemp:'玻璃总量',
          startCell:'目标层号',
          endCell:'预留层号',
@@ -751,6 +752,8 @@
          finegrinding: '精磨',
      },
    hellow: {
        clickmakesure: '是否确认点击？',
        logarithm: '对数：',
        totalPairQuantitya: '任务总配对数',
        pairQuantitya: '已出配对数',
        waitingout: '等待出片',

 UI-Project/src/layout/MainErpView.vue

@@ -113,7 +113,9 @@
    '中空二线': 'Hollow Second Line',
    '中空三线': 'Hollow three line',
    '中空理片笼': 'Hollow Film processing cage',
    '中空折铝框': 'Hollow folded aluminum frame',
    '折铝框一线': '1 Fold aluminum frame',
    '折铝框二线': '2 Fold aluminum frame',
    '折铝框三线': '3 Fold aluminum frame',
    '大屏显示': 'Large Screen Display',
     };  
  menuData.forEach(menu => {  

 UI-Project/src/router/index.js

@@ -300,6 +300,16 @@
              name: 'hollowaluminum',
              component: () => import('../views/hollow/hollowaluminum.vue')
            },
            {
              path: '/hollow/hollowaluminumtwo',
              name: 'hollowaluminumtwo',
              component: () => import('../views/hollow/hollowaluminumtwo.vue')
            },
            {
              path: '/hollow/hollowaluminumthree',
              name: 'hollowaluminumthree',
              component: () => import('../views/hollow/hollowaluminumthree.vue')
            },
          ]
        },
        /*----------- 管理系统 ----------------*/

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -1201,7 +1201,7 @@
       :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
         <el-table-column fixed prop="engineerId" align="center" :label="$t('Mounting.project')" min-width="100" />
         <el-table-column prop="countTemp" align="center" :label="$t('searchOrder.totalfurnaces')" min-width="68" />
         <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.furnfullTemp')" min-width="82" />
         <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.furnaces')" min-width="82" />
         <el-table-column prop="countGlass" align="center" :label="$t('searchOrder.cagesnumber')" min-width="82" />
         <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="70" />
         <el-table-column prop="countSlot" align="center" :label="$t('searchOrder.slotnumber')" min-width="96" />

 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;
}

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

New file
@@ -0,0 +1,203 @@
<script setup>
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: 932,
    });
    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 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;
  line-height: 550px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

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

New file
@@ -0,0 +1,203 @@
<script setup>
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: 931,
    });
    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 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;
  line-height: 550px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>