| | |
|---|
| | | const getColorByState = (state) => { |
|---|
| | | switch (state) { |
|---|
| | | case -2: return "gray"; |
|---|
| | | case -1: return "#99BBFF"; |
|---|
| | | case 0: return "#7AC5CD"; |
|---|
| | | case -1: return "gray"; |
|---|
| | | case 0: return "gray"; |
|---|
| | | case 1: return "#95d475"; |
|---|
| | | case 8: return "#911005"; |
|---|
| | | default: return "#CDAF95"; |
|---|
| | |
|---|
| | | <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: #090909;"> |
|---|
| | | <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 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 style="display: flex; justify-content: center; align-items: flex-end; height: 100%; padding-bottom: 50px;"> |
|---|
| | | <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: #FAFCFF;font-size:18px;text-align: center; display: flex; flex-direction: column; justify-content: center; height: 87%;"> |
|---|
| | | <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> |
|---|
| | | </el-carousel-item> |
|---|
| | | </el-carousel> |
|---|
| | | <div style="position: absolute; bottom: 20px; right: 20px;"> |
|---|
| | | <el-button size="large" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button> |
|---|
| | | <el-button size="large" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </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> |
|---|
| | | </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 { |
|---|
| | | .carousel-item-content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | justify-content: flex-end; |
|---|
| | | border: 1px solid #ccc; |
|---|
| | | margin: 10px auto; |
|---|
| | | color: white; |
|---|
| | | /* 确保文字颜色可见 */ |
|---|
| | | text-align: center; |
|---|
| | | padding-bottom: 0px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .demonstration { |
|---|
| | | color: var(--el-text-color-secondary); |
|---|
