| | |
| | | const selectValuesa = reactive([]); |
| | | const carPosition = ref([]) |
| | | const ganghua = ref('') |
| | | const engineerId = ref('') |
| | | const diaodu = ref('') |
| | | const flowCardId = ref('') |
| | | const filmsId = ref('') |
| | |
| | | const adjustedRectsa = ref([]); |
| | | const adjustedRectsb = ref([]); |
| | | const adjustedRectsc = ref([]); |
| | | const adjustedRectsd = ref([]); |
| | | const adjustedRectse = ref([]); |
| | | const subRectsCounts = ref([]); |
| | | const subRectsCountsa = ref([]); |
| | | const subRectsCountsb = ref([]); |
| | | const subRectsCountsc = ref([]); |
| | | const subRectsCountsd = ref([]); |
| | | const subRectsCountse = ref([]); |
| | | const currentRow = reactive({}); // 当前行的数据 |
| | | const showAlert = ref(false) |
| | | const alertMessage = ref('') |
| | |
| | | const cell2=ref(true); |
| | | const cell3=ref(true); |
| | | const cell4=ref(true); |
| | | const cell5=ref(true); |
| | | const cell6=ref(true); |
| | | const canEdit = ref(true); |
| | | const selectedRow = ref(null); |
| | | const temperingtotal = ref(0); |
| | |
| | | const getAlertText = (alarmCode) => { |
| | | const codeMap = { |
| | | sizeSame: 'hellow.sizeSame', |
| | | idSame: 'hellow.idSame' |
| | | idSame: 'hellow.idSame', |
| | | slotLess: 'hellow.slotLess', |
| | | overSize: 'hellow.overSize', |
| | | noGlass: 'hellow.noGlass' |
| | | }; |
| | | return alarmCode in codeMap |
| | | ? t(codeMap[alarmCode]) |
| | |
| | | const fetchxiang = async () => { |
| | | isLoading.value = true; |
| | | try { |
| | | const response = await request.post('/cacheVerticalGlass/bigStorageCage/querybigStorageCageDetail',{ |
| | | const response = await request.post('/cacheVerticalGlass/bigStorageCageDetails/queryVerticalSheetCageDetailsList',{ |
| | | // deviceId: page, |
| | | engineerId: engineerId.value, |
| | | filmsId: filmsId.value, |
| | | flowCardId: flowCardId.value, |
| | | glassId: glassId.value, |
| | | thickness: -1, |
| | | }) |
| | | // 模拟最小加载时间 |
| | | await new Promise(resolve => setTimeout(resolve, 300)); |
| | |
| | | const fetchxianga = async () => { |
| | | let page = window.localStorage.getItem('pagenumber') |
| | | try { |
| | | const response = await request.post('/cacheVerticalGlass/bigStorageCage/querybigStorageCageDetail',{ |
| | | const response = await request.post('/cacheVerticalGlass/bigStorageCageDetails/queryVerticalSheetCageDetailsList',{ |
| | | deviceId: page, |
| | | engineerId: engineerId.value, |
| | | filmsId: filmsId.value, |
| | | flowCardId: flowCardId.value, |
| | | glassId: glassId.value, |
| | | thickness: thickness.value ? thickness.value : -1, |
| | | }) |
| | | if (response.code === 200) { |
| | | ElMessage.success(response.message); |
| | |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`; |
| | | const handleMessage = (data) => { |
| | | // 报警信息 |
| | | 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'); |
| | | 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}`; |
| | | if (alert[0].alarmCode === 'sizeSame') { |
| | | alertText.value = t('hellow.sizeSame'); |
| | | } else if (alert[0].alarmCode === 'idSame') { |
| | | alertText.value = t('hellow.idSame'); |
| | | } else if (alert[0].alarmCode === 'slotLess') { |
| | | alertText.value = t('hellow.slotLess'); |
| | | } else if (alert[0].alarmCode === 'overSize') { |
| | | alertText.value = t('hellow.overSize'); |
| | | } else if (alert[0].alarmCode === 'noGlass') { |
| | | alertText.value = t('hellow.noGlass'); |
| | | } else { |
| | | alertText.value = t('hellow.unknownAlert'); |
| | | } |
| | | alarmData.value = data; // 存储完整数据用于弹窗 |
| | | showAlert.value = true; |
| | | } |
| | | } |
| | | const formattedData = data.alarmInfo[0].map(record => ({ |
| | | ...record, |
| | | formattedCreateTime: formatTimestamp(record.createTime), |
| | |
| | | top: 53/55, |
| | | })); |
| | | subRectsCountsc.value = data.bigStorageCageInfos[0][4].map(rect => rect.count); |
| | | adjustedRectsd.value = data.bigStorageCageInfos[0][5].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 53/55, |
| | | })); |
| | | subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count); |
| | | adjustedRectse.value = data.bigStorageCageInfos[0][6].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 53/55, |
| | | })); |
| | | subRectsCountse.value = data.bigStorageCageInfos[0][6].map(rect => rect.count); |
| | | }else{ |
| | | adjustedRects.value = '', |
| | | adjustedRectsa.value = '', |
| | | adjustedRectsb.value = '', |
| | | adjustedRectsc.value = '' |
| | | adjustedRectsc.value = '', |
| | | adjustedRectsd.value = '', |
| | | adjustedRectse.value = '' |
| | | } |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | |
| | | } |
| | | return subRects; |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | | const rectStyled = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | right: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | | }); |
| | | // 计算每个小矩形的样式和数量 |
| | | const getSubRectsd = (rectIndex) => { |
| | | const count = subRectsCountsd.value[rectIndex]; |
| | | const subRects = []; |
| | | for (let i = 0; i < count; i++) { |
| | | subRects.push({}); |
| | | } |
| | | return subRects; |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | | const rectStylee = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | right: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | | }); |
| | | // 计算每个小矩形的样式和数量 |
| | | const getSubRectse = (rectIndex) => { |
| | | const count = subRectsCountse.value[rectIndex]; |
| | | const subRects = []; |
| | | for (let i = 0; i < count; i++) { |
| | | subRects.push({}); |
| | | } |
| | | return subRects; |
| | | }; |
| | | // 计算每个小矩形的样式 |
| | | const subRectStylec = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | | const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`; |
| | | return { |
| | | position: 'absolute', |
| | | width, |
| | | height: '100%', |
| | | marginRight, |
| | | top: '0px', |
| | | backgroundColor: '#911005', |
| | | right, |
| | | }; |
| | | }; |
| | | // 计算每个小矩形的样式 |
| | | const subRectStyled = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | | const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`; |
| | | return { |
| | | position: 'absolute', |
| | | width, |
| | | height: '100%', |
| | | marginRight, |
| | | top: '0px', |
| | | backgroundColor: '#911005', |
| | | right, |
| | | }; |
| | | }; |
| | | // 计算每个小矩形的样式 |
| | | const subRectStylee = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | |
| | | closeWebSocket(socket); |
| | | } |
| | | }); |
| | | function getStatusType(enableState: number) { |
| | | switch (enableState) { |
| | | case 100: |
| | | return 'success'; |
| | | case 102: |
| | | return 'warning'; |
| | | } |
| | | } |
| | | function getStatusText(enableState: number) { |
| | | switch (enableState) { |
| | | case 100: |
| | | return t('searchOrder.zailong'); |
| | | case 102: |
| | | return t('searchOrder.rengongxp'); |
| | | } |
| | | } |
| | | function getStatusTypea(ishorizontal: number) { |
| | | switch (ishorizontal) { |
| | | case 0: |
| | |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:72px;left: 445px;"> |
| | | <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:70px;left: 445px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsa(rectIndex)" |
| | |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:81px;left: 445px;"> |
| | | <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:76px;left: 445px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsb(rectIndex)" |
| | |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:89px;left: 445px;"> |
| | | <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:84px;left: 445px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsc(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStylec(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell5" style="width: 170px;height: 53px;position: relative;top:-16px;left: 45px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsd" :key="rect.id" :style="rectStyled(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsd(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyled(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell6" style="width: 170px;height: 53px;position: relative;top:-6px;left: 45px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectse" :key="rect.id" :style="rectStylee(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectse(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStylee(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | |
| | | :title="$t('searchOrder.cageinformation')"> |
| | | <div v-loading="isLoading" class="loading-container" :element-loading-text="$t('searchOrder.loadingText')" > |
| | | <div style="display: flex;"> |
| | | <el-input v-model="engineerId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('processCard.projectnumber')"/> |
| | | <el-input v-model="glassId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.inglassID')"/> |
| | | <el-input v-model="flowCardId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.incardnumber')" /> |
| | | <el-input v-model="filmsId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('film.infilms')"/> |
| | | <el-input v-model="thickness" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.inthickness')"/> |
| | | <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="fetchxianga"> |
| | | {{$t('reportmanage.inquire')}}</el-button> |
| | | </div> |
| | | <el-table |
| | | :data="tableDataa" |
| | | @row-click="handleRowClick" |
| | | height="700" |
| | | @expand-change="handleExpandChange" |
| | | row-key="id" |
| | | default-expand-all |
| | | :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | > |
| | | <el-table-column type="expand"> |
| | | <template #default="props"> |
| | | <div v-if="props.row.bigStorageCageDetails && props.row.bigStorageCageDetails.length"> |
| | | <el-table |
| | | :data="props.row.bigStorageCageDetails" |
| | | border |
| | | style="width: 98%;margin-left: 20px;" |
| | | row-key="id" |
| | | :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | > |
| | | <!-- <el-table-column prop="menuName" label="二级菜单栏" align="center" min-width="140" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"/> --> |
| | | <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="120"/> |
| | | <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="130" /> |
| | | <el-table-column prop="filmsId" align="center" :label="$t('searchOrder.coatingtypes')" min-width="80" /> |
| | | <!-- <el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="80" /> --> |
| | | <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="80" /> |
| | | <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="80" /> |
| | | <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="80" /> |
| | | <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="100" /> |
| | | <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="120" /> |
| | | <el-table-column |
| | | align="center" |
| | | :label="$t('searchOrder.startstatus')" |
| | | min-width="80" |
| | | prop="state" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tag :type="getStatusType(scope.row.state)"> |
| | | {{ getStatusText(scope.row.state) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="gap" align="center" :label="$t('searchOrder.glassgaps')" min-width="80" /> |
| | | <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center" min-width="220"> |
| | | <template #default="scope"> |
| | | <el-button type="text" plain @click="broke(scope.row)">{{ $t('searchOrder.breakage') }}</el-button> |
| | | <el-button type="text" plain @click="brokec(scope.row)">{{ $t('searchOrder.takeout') }}</el-button> |
| | | <el-button type="text" plain @click="opena(scope.row)">{{ $t('searchOrder.delete') }}</el-button> |
| | | <el-button type="text" |
| | | :disabled="!((props.row.bigStorageCageDetails[0].state !== 102 && scope.$index == 0 ) || (props.row.bigStorageCageDetails[(scope.$index - 1)<0?0:scope.$index-1].state==102)&&(scope.row.state!=102))" |
| | | plain @click="outfil(scope.row)"> |
| | | {{ $t('searchOrder.outfilm') }} |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="id" :label="$t('searchOrder.cagetableID')" align="center" min-width="90"/> |
| | | <el-table ref="table" style="margin-top: 20px;height: 700px;width: 1770px;" :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="deviceId" align="center" :label="$t('searchOrder.cagenumber')" min-width="100" /> |
| | | <el-table-column prop="engineerId" align="center" :label="$t('searchOrder.projectnumber')" min-width="100" /> |
| | | <el-table-column prop="layer" align="center" :label="$t('processCard.layer')" min-width="50" /> |
| | | <el-table-column prop="slot" align="center" :label="$t('searchOrder.gridnumber')" min-width="150" /> |
| | | <el-table-column |
| | | align="center" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="remainWidth" align="center" :label="$t('searchOrder.remainingwidth')" min-width="120" /> |
| | | |
| | | <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center"> |
| | | <template #default="scope"> |
| | | <el-button type="text" plain @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="120"/> |
| | | <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="130" /> |
| | | <el-table-column prop="filmsId" align="center" :label="$t('searchOrder.coatingtypes')" min-width="80" /> |
| | | <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="80" /> |
| | | <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="80" /> |
| | | <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="80" /> |
| | | <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="100" /> |
| | | <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="120" /> |
| | | <el-table-column fixed="right" :label="$t('film.operate')" align="center" width="240"> |
| | | <template #default="scope"> |
| | | <!-- <el-button type="text" plain @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</el-button> --> |
| | | <el-button type="text" plain @click="broke(scope.row)">{{ $t('searchOrder.breakage') }}</el-button> |
| | | <el-button type="text" plain @click="brokec(scope.row)">{{ $t('searchOrder.takeout') }}</el-button> |
| | | <el-button type="text" plain @click="opena(scope.row)">{{ $t('searchOrder.delete') }}</el-button> |
| | | <!-- <el-button type="text" |
| | | :disabled="!((props.row.bigStorageCageDetails[0].state !== 102 && scope.$index == 0 ) || (props.row.bigStorageCageDetails[(scope.$index - 1)<0?0:scope.$index-1].state==102)&&(scope.row.state!=102))" |
| | | plain @click="outfil(scope.row)"> |
| | | {{ $t('searchOrder.outfilm') }} |
| | | </el-button> --> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div> |
| | | <!-- <div style="margin-top: 20px;margin-left: 40%;"> |
| | |
| | | .img-dlpl{ |
| | | margin-left: 20px; |
| | | margin-top: 0px; |
| | | background-image:url('/ganghuaqian.png'); |
| | | background-image:url('/src/assets/ganghuaqian.png'); |
| | | background-repeat: no-repeat; |
| | | background-attachment: local; |
| | | min-height: 380px; |