| UI-Project/src/views/PurchaseReturn/purchaseReturn.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/PurchaseReturn/purchaseStorage.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/ReportWork/reportWork.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/Slicecage/slicecage.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/StockBasicData/stockBasicData.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/largescreendisplay/screendisplay.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
UI-Project/src/views/PurchaseReturn/purchaseReturn.vue
@@ -500,7 +500,7 @@ } function getRectColor2(state) { switch (state) { case 2: case 2: return 'lightblue'; case 8: return '#911005'; UI-Project/src/views/PurchaseReturn/purchaseStorage.vue
@@ -24,7 +24,7 @@ @click="showDialog(rect.glassId)" :style="{ position: 'absolute', top: `${rect.y}px`, left: `${rect.x}px`, width: `${rect.width}px`, height: `${rect.height}px`, backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor(rect.state) backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor(rect.status) }" > <div class="centered-text"> @@ -36,11 +36,11 @@ </div> </el-scrollbar> <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose"> <el-button :disabled="currentGlassRect?.state === 8 || currentGlassRect?.state === 9" type="warning" <el-button :disabled="currentGlassRect?.status === 8 || currentGlassRect?.status === 9" type="warning" plain :icon="Delete" @click="handleDamage(currentGlassId)" style="width: 140px;margin-left: 10px;"> {{ $t('order.dilapidation') }} </el-button> <el-button :disabled="currentGlassRect?.state === 9 || currentGlassRect?.state === 8" type="danger" <el-button :disabled="currentGlassRect?.status === 9 || currentGlassRect?.status === 8" type="danger" plain @click="handleManualTake(currentGlassId)" style="width: 140px;margin-top: 10px;"> <el-icon class="el-icon--right"> <Upload/> @@ -95,7 +95,7 @@ const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', { glassId: currentGlassId.value, line: 4001, state: 8, status: 8, workingProcedure: '钢化', }) if (response.code == 200) { @@ -117,7 +117,7 @@ const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', { glassId: currentGlassId.value, line: 4001, state: 9, status: 9, workingProcedure: '钢化', }) if (response.code == 200) { @@ -236,8 +236,8 @@ adjustedRects.value = adjustedRectsData; } }; function getRectColor(state: number): string { switch (state) { function getRectColor(status: number): string { switch (status) { case -1: return '#CDAF95'; case 0: @@ -260,7 +260,7 @@ function updateRectStatus(glassId: string, status: number) { adjustedRects.value.forEach(rect => { if (rect.glassId === glassId) { rect.state = status; // 更新矩形的状态 rect.status = status; // 更新矩形的状态 } }); } UI-Project/src/views/ReportWork/reportWork.vue
@@ -1,136 +1,120 @@ <template> <div style="height: 600px;"> <div style="display: flex; flex-direction: row; align-items: center; margin-top: 20px;"> <span style="margin-left: 10px;" class="demonstration">{{ $t('reportmanage.productiontime') }}</span> <el-date-picker style="margin-left: 10px;" v-model="timeRange" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" :start-placeholder="$t('reportmanage.starttime')" :end-placeholder="$t('reportmanage.endtime')" :default-time="defaultTime" /> <el-select v-model="report.type" :placeholder="$t('reportmanage.ctype')" style="margin-left: 10px;" > <el-option :label="$t('reportmanage.all')" value="0"></el-option> <el-option :label="$t('reportmanage.completed')" value="1"></el-option> <el-option :label="$t('reportmanage.broke')" value="8"></el-option> <el-option :label="$t('reportmanage.takeout')" value="9"></el-option> </el-select> <el-select v-model="report.status" :placeholder="$t('reportmanage.cstate')" style="margin-left: 10px;" > <el-option :label="$t('reportmanage.all')" value="0"></el-option> <el-option :label="$t('reportmanage.dreportwork')" value="1"></el-option> <el-option :label="$t('reportmanage.pendingwork')" value="2"></el-option> <el-option :label="$t('reportmanage.reportwork')" value="3"></el-option> </el-select> <el-select v-model="report.workingProcedure" :placeholder="$t('reportmanage.cprocess')" style="margin-left: 10px;" > <el-option :label="$t('reportmanage.all')" value="0"></el-option> <el-option :label="$t('reportmanage.incise')" value="切割"></el-option> <el-option :label="$t('reportmanage.edging')" value="磨边"></el-option> <el-option :label="$t('reportmanage.steel')" value="钢化"></el-option> </el-select> <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('reportmanage.inquire') }}</el-button> <el-button type="success" style="margin-left: 10px;" @click="handleConfirm">{{ $t('reportmanage.signingwork') }}</el-button> </div> <div style="display: flex; flex-direction: row; align-items: center; margin-top: 20px;"> <span style="margin-left: 10px;" class="demonstration">{{ $t('reportmanage.productiontime') }}</span> <el-date-picker style="margin-left: 10px;" v-model="timeRange" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" :start-placeholder="$t('reportmanage.starttime')" :end-placeholder="$t('reportmanage.endtime')" :default-time="defaultTime" /> <el-select v-model="report.type" :placeholder="$t('reportmanage.ctype')" style="margin-left: 10px;"> <!-- <el-option :label="$t('reportmanage.all')" value="0"></el-option> --> <!-- <el-option :label="$t('reportmanage.completed')" value="1"></el-option> --> <el-option :label="$t('reportmanage.broke')" value="8"></el-option> <el-option :label="$t('reportmanage.takeout')" value="9"></el-option> </el-select> <el-select v-model="report.status" :placeholder="$t('reportmanage.cstate')" style="margin-left: 10px;"> <!-- <el-option :label="$t('reportmanage.all')" value="0"></el-option> --> <el-option :label="$t('reportmanage.dreportwork')" value="1"></el-option> <!-- <el-option :label="$t('reportmanage.pendingwork')" value="2"></el-option> --> <el-option :label="$t('reportmanage.reportwork')" value="3"></el-option> </el-select> <el-select v-model="report.workingProcedure" :placeholder="$t('reportmanage.cprocess')" style="margin-left: 10px;"> <el-option :label="$t('reportmanage.all')" value="0"></el-option> <el-option :label="$t('reportmanage.incise')" value="切割"></el-option> <el-option :label="$t('reportmanage.edging')" value="磨边"></el-option> <el-option :label="$t('reportmanage.steel')" value="钢化"></el-option> </el-select> <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('reportmanage.inquire') }}</el-button> <el-button type="success" style="margin-left: 10px;" :disabled="(!selectedStatus)" @click="handleConfirm">{{ $t('reportmanage.signingwork') }}</el-button> </div> <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> <el-table height="730" ref="table" :data="reportData" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> <el-table-column prop="teamsGroupsName" align="center" :label="$t('reportmanage.reporteam')" min-width="120" /> <el-table-column prop="deviceName" align="center" :label="$t('reportmanage.reportingequipment')" min-width="120" /> <el-table-column prop="line" align="center" :label="$t('reportmanage.line')" min-width="120" /> <el-table-column prop="workingProcedure" align="center" :label="$t('reportmanage.process')" min-width="120" /> <el-table-column prop="glassId" align="center" :label="$t('reportmanage.glassID')" min-width="130" /> <el-table-column prop="engineerId" align="center" :label="$t('reportmanage.projectnumber')" min-width="120" /> <el-table-column prop="temperingLayoutId" align="center" :label="$t('reportmanage.layoutID')" min-width="120" /> <el-table-column prop="damageTime" align="center" :label="$t('reportmanage.productiontime')" min-width="230" /> <el-table-column prop="type" align="center" :label="$t('reportmanage.type')" min-width="120" /> <el-table-column prop="status" align="center" :label="$t('reportmanage.state')" min-width="120" /> <el-table-column prop="processId" align="center" :label="$t('reportmanage.processcards')" min-width="140" /> <el-table-column prop="orderNumber" align="center" :label="$t('reportmanage.number')" min-width="120" /> <el-table-column prop="technologyNumber" align="center" :label="$t('reportmanage.layer')" min-width="120" /> <el-table-column prop="breakageType" align="center" :label="$t('reportmanage.typebreakage')" min-width="180"> <template #default="{ row }"> <el-select v-model="selectValuesa[row.id]" filterable :placeholder="$t('reportmanage.pcausebreakage')" clearable @input="handleInputChangea($event, row.id)" > <el-option v-for="item in selectOptionsa" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column prop="breakageReason" align="center" :label="$t('reportmanage.causebreakage')" min-width="180"> <template #default="{ row }"> <el-select v-model="selectValuesb[row.id]" filterable :placeholder="$t('reportmanage.ptypebreakage')" clearable @input="handleInputChangea($event, row.id)" > <el-option v-for="item in selectOptionsb" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column align="center" :label="$t('reportmanage.responsibleprocess')" min-width="120"> <template #default="{ row }"> <span>{{ '切割磨边钢化' }}</span> </template> </el-table-column> <el-table-column prop="responsiblePersonnel" align="center" :label="$t('reportmanage.responsiblepersonnel')" min-width="180"> <template #default="{ row }"> <el-input :placeholder="$t('reportmanage.presponsiblepersonnel')" v-model="inputValuesa[row.id]" autocomplete="off" /> </template> </el-table-column> <el-table-column prop="responsibleTeam" align="center" :label="$t('reportmanage.responsibleteam')" min-width="180"> <template #default="{ row }"> <el-select v-model="selectValuesc[row.id]" filterable :placeholder="$t('reportmanage.presponsibleteam')" clearable @input="handleInputChangea($event, row.id)" > <el-option v-for="item in selectOptionsc" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column prop="responsibleEquipment" align="center" :label="$t('reportmanage.responsibleequipment')" min-width="180"> <template #default="{ row }"> <el-select v-model="selectValuesd[row.id]" filterable :placeholder="$t('reportmanage.presponsibleequipment')" clearable @input="handleInputChangea($event, row.id)" > <el-option v-for="item in selectOptionsd" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column prop="remark" align="center" :label="$t('reportmanage.remark')" min-width="180"> <template #default="{ row }"> <el-input :placeholder="$t('reportmanage.premark')" v-model="inputValuesb[row.id]" autocomplete="off" /> </template> </el-table-column> </el-table> </div> <el-table height="740" ref="table" :data="reportData" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> <el-table-column prop="teamsGroupsName" align="center" :label="$t('reportmanage.reporteam')" min-width="120" /> <el-table-column prop="deviceName" align="center" :label="$t('reportmanage.reportingequipment')" min-width="120" /> <el-table-column prop="line" align="center" :label="$t('reportmanage.line')" min-width="120" /> <el-table-column prop="workingProcedure" align="center" :label="$t('reportmanage.process')" min-width="120" /> <el-table-column prop="glassId" align="center" :label="$t('reportmanage.glassID')" min-width="130" /> <el-table-column prop="engineerId" align="center" :label="$t('reportmanage.projectnumber')" min-width="120" /> <el-table-column prop="temperingLayoutId" align="center" :label="$t('reportmanage.layoutID')" min-width="120" /> <el-table-column prop="damageTime" align="center" :label="$t('reportmanage.productiontime')" min-width="230" /> <el-table-column prop="type" align="center" :label="$t('reportmanage.type')" min-width="120" /> <el-table-column prop="status" align="center" :label="$t('reportmanage.state')" min-width="120" /> <el-table-column prop="processId" align="center" :label="$t('reportmanage.processcards')" min-width="140" /> <el-table-column prop="orderNumber" align="center" :label="$t('reportmanage.number')" min-width="120" /> <el-table-column prop="technologyNumber" align="center" :label="$t('reportmanage.layer')" min-width="120" /> <el-table-column prop="breakageType" align="center" :label="$t('reportmanage.typebreakage')" min-width="180"> <template #default="{ row }"> <el-select v-model="row.breakageType" filterable :placeholder="$t('reportmanage.pcausebreakage')" :disabled="selectedType" clearable @input="handleInputChangea($event, row.id)"> <el-option v-for="item in selectOptionsa" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column prop="breakageReason" align="center" :label="$t('reportmanage.causebreakage')" min-width="180"> <template #default="{ row }"> <el-select v-model="row.breakageReason" filterable :placeholder="$t('reportmanage.ptypebreakage')" :disabled="selectedType" clearable @input="handleInputChangea($event, row.id)"> <el-option v-for="item in selectOptionsb" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column align="center" :label="$t('reportmanage.responsibleprocess')" min-width="120"> <template #default="{ row }"> <el-select v-model="row.responsibleProcess" filterable :placeholder="$t('reportmanage.ptypebreakage')" :disabled="selectedType" clearable @input="handleInputChangea($event, row.id)"> <el-option value="切割" label="切割"></el-option> <el-option value="磨边" label="磨边"></el-option> <el-option value="钢化" label="钢化"></el-option> </el-select> </template> </el-table-column> <el-table-column prop="responsiblePersonnel" align="center" :label="$t('reportmanage.responsiblepersonnel')" min-width="180"> <template #default="{ row }"> <el-input :placeholder="$t('reportmanage.presponsiblepersonnel')" v-model="row.responsiblePersonnel" :disabled="selectedType" autocomplete="off" /> </template> </el-table-column> <el-table-column prop="responsibleTeam" align="center" :label="$t('reportmanage.responsibleteam')" min-width="180"> <template #default="{ row }"> <el-select v-model="row.responsibleTeam" filterable :placeholder="$t('reportmanage.presponsibleteam')" :disabled="selectedType" clearable @input="handleInputChangea($event, row.id)"> <el-option v-for="item in selectOptionsc" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column prop="responsibleEquipment" align="center" :label="$t('reportmanage.responsibleequipment')" :disabled="selectedType" min-width="180"> <template #default="{ row }"> <el-select v-model="row.responsibleEquipment" filterable :placeholder="$t('reportmanage.presponsibleequipment')" clearable :disabled="selectedType" @input="handleInputChangea($event, row.id)"> <el-option v-for="item in selectOptionsd" :key="item.basicName" :label="item.basicName" :value="item.basicName" /> </el-select> </template> </el-table-column> <el-table-column prop="remark" align="center" :label="$t('reportmanage.remark')" min-width="180"> <template #default="{ row }"> <el-input :placeholder="$t('reportmanage.premark')" v-model="row.remark" autocomplete="off" :disabled="selectedType" /> </template> </el-table-column> </el-table> </div> </el-card> </div> </template> @@ -144,12 +128,23 @@ import { useI18n } from 'vue-i18n' const { t } = useI18n() const report = ref({ type: '0', status: '0', type: '8', status: '1', workingProcedure: '0', }); const reportData = ref([]) const timeRange = ref(["2022-01-01", "2025-01-01"]) const endDate = new Date(); const startDate = new Date(); startDate.setDate(endDate.getDate() - 7); // 获取一个星期前的时间 // 格式化为 "YYYY-MM-DD" 格式 const formatDate = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; }; const timeRange = ref([formatDate(startDate), formatDate(endDate)]); const selectOptionsa = ref([]); const selectOptionsb = ref([]); const selectOptionsc = ref([]); @@ -158,79 +153,137 @@ const selectValuesb = reactive({}); const selectValuesc = reactive({}); const selectValuesd = reactive({}); const selectValuese = reactive({}); const inputValuesa = reactive({}); const inputValuesb = reactive({}); const selectedType = ref(true); const selectedStatus = ref(false); // 查询数据 const selectReportData = async () => { const response = await request.post("/cacheVerticalGlass/damage/selectDamage", { startTime: timeRange.value[0], endTime: timeRange.value[1], endTime: timeRange.value[1]+" 23:59:59", type: report.value.type, status: report.value.status, workingProcedure: report.value.workingProcedure }) if (report.value.type == 8) { selectedType.value = false; }else{ selectedType.value = true; } if (report.value.status == 1&&(report.value.type == 8||report.value.type == 1)) { selectedStatus.value = true; }else{ selectedStatus.value = false; } if (response.code === 200) { reportData.value = response.data; ElMessage.success(response.message); } else { ElMessage.error(response.message); } // const responses = await request.post("/cacheVerticalGlass/damage/insertDamage", { // glassId:"P24081502|1|1", // line:"1001", // workingProcedure:"切割", // remark:"", // status:"0" // }) }; // 报工 const handleConfirm = async () => { const response = await request.post("/cacheVerticalGlass/damage/submitDamage", reportData.value) if (response.code === 200) { ElMessage.success(response.message); const hasEmptyOrNullBreakType = reportData.value.some( item => item.breakageType === null || item.breakageType === '' || item.breakageReason === null || item.breakageReason === '' || item.responsibleProcess === null || item.responsibleProcess === '' || item.responsibleTeam === null || item.responsibleTeam === '' || item.responsibleEquipment === null || item.responsibleEquipment === '' ); if (hasEmptyOrNullBreakType&&selectedType.value==false) { // 如果找到了未选择项，显示错误信息 ElMessage.error('请填写所有玻璃的破损信息'); } else { ElMessage.error(response.message); const response = await request.post("/cacheVerticalGlass/damage/submitDamage", reportData.value) if (response.code === 200) { ElMessage.success(response.message); } else { ElMessage.error(response.message); } } }; const fetchTableData = async () => { try { const response = await request.post('/cacheVerticalGlass/basic_data_produce/selectBasicDataProduceGroup'); if (response.code == 200) { selectOptionsa.value = response.data.breakagetype.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); selectOptionsb.value = response.data.breakagereason.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); selectOptionsc.value = response.data.teamsgroups.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); selectOptionsd.value = response.data.device.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); } else { ElMessage.warning(response.data); } } catch (error) { console.error('Error fetching options:', error); } }; const fetchTableData = async () => { try { const response = await request.post('/cacheVerticalGlass/basic_data_produce/selectBasicDataProduceGroup'); if (response.code == 200) { selectOptionsa.value = response.data.breakagetype.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); selectOptionsb.value = response.data.breakagereason.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); selectOptionsc.value = response.data.teamsgroups.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); selectOptionsd.value = response.data.device.filter(item => item !== null) .map(item => ({ basicName: item.basicName })); } else { ElMessage.warning(response.data); } } catch (error) { console.error('Error fetching options:', error); } }; const handleInputChangea = (value, rowId) => { const handleInputChangea = (value, rowId) => { // 更新对应行的 select 值 selectValuesa[rowId] = value; selectValuesb[rowId] = value; selectValuesc[rowId] = value; selectValuesd[rowId] = value; inputValuesa[rowId] = value; inputValuesb[rowId] = value; selectValuesa[rowId] = value; selectValuesb[rowId] = value; selectValuesc[rowId] = value; selectValuesd[rowId] = value; selectValuese[rowId] = value; inputValuesa[rowId] = value; inputValuesb[rowId] = value; }; fetchTableData(); fetchTableData(); let socket = null; // const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`; // const handleMessage = (data) => { // adjustedRects.value = data.device[0].map(rect => ({ // ...rect, // completed: rect.completedQuantity, // breakage: rect.breakageQuantity, // thisProcess: rect.thisProcess, // })); // }; // let socket; onMounted(() => { // socket = new WebSocket(socketUrl); // socket.onmessage = (event) => { // const data = JSON.parse(event.data); // // updateCharts(); // }; // }; }); onUnmounted(() => { socket.close(); }); onMounted(() => { fetchTableData(); // socket = initializeWebSocket(socketUrl, handleMessage); }); onUnmounted(() => { if (socket) { onUnmounted(() => { if (socket) { closeWebSocket(socket); } }); } }); onBeforeUnmount(() => { console.log("关闭了") closeWebSocket(); }); </script> <style scoped></style> UI-Project/src/views/Slicecage/slicecage.vue
@@ -43,13 +43,17 @@ const diaodu = ref('') const flowCardId = ref('') const filmsId = ref('') const adjustedRects = ref([]); const project = ref([]); const adjust = ref([]); const adjusta = ref([]); const adjustedRects = ref([]); const adjustedRectsa = ref([]); const adjustedRectsb = ref([]); const adjustedRectsc = ref([]); const subRectsCounts = ref([]); const subRectsCountsa = ref([]); const subRectsCountsb = ref([]); const subRectsCountsc = ref([]); const currentRow = reactive({}); // 当前行的数据 const currentPage2 = ref(1) const inputValuesa = reactive({}); @@ -840,31 +844,168 @@ ganghua.value = '' } if(data.bigStorageCageInfos!=null){ window.localStorage.setItem('length', data.bigStorageCageInfos[0][1].length) let length = window.localStorage.getItem('length') adjustedRects.value = data.bigStorageCageInfos[0][1].map(rect => ({ ...rect, height: 20/length, top: 29/length })); adjustedRectsa.value = data.bigStorageCageInfos[0][2].map(rect => ({ ...rect, height: 20/length, top: 29/length })); adjustedRectsb.value = data.bigStorageCageInfos[0][3].map(rect => ({ ...rect, height: 20/length, top: 29/length })); adjustedRectsc.value = data.bigStorageCageInfos[0][4].map(rect => ({ ...rect, height: 20/length, top: 29/length })); adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({ id: index + 1, height: 20/55, top: 53/55, })); subRectsCounts.value = data.bigStorageCageInfos[0][1].map(rect => rect.count); adjustedRectsa.value = data.bigStorageCageInfos[0][2].map((rect, index) => ({ id: index + 1, height: 20/55, top: 53/55, })); subRectsCountsa.value = data.bigStorageCageInfos[0][2].map(rect => rect.count); adjustedRectsb.value = data.bigStorageCageInfos[0][3].map((rect, index) => ({ id: index + 1, height: 20/55, top: 53/55, })); subRectsCountsb.value = data.bigStorageCageInfos[0][3].map(rect => rect.count); adjustedRectsc.value = data.bigStorageCageInfos[0][4].map((rect, index) => ({ id: index + 1, height: 20/55, top: 53/55, })); subRectsCountsc.value = data.bigStorageCageInfos[0][4].map(rect => rect.count); }else{ adjustedRects.value = '' adjustedRects.value = '', adjustedRectsa.value = '', adjustedRectsb.value = '', adjustedRectsc.value = '' } }; // 计算每个大矩形的样式 const rectStyle = (rect, index) => ({ position: 'absolute', width: '170px', left: '0px', top: `${index*rect.top}px`, height: `${rect.height}px`, }); // 计算每个小矩形的样式和数量 const getSubRects = (rectIndex) => { const count = subRectsCounts.value[rectIndex]; const subRects = []; for (let i = 0; i < count; i++) { subRects.push({}); } return subRects; }; // 计算每个小矩形的样式 const subRectStyle = (rectIndex, subIndex) => { const width = '18px'; const marginLeft = '8px'; const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; return { position: 'absolute', width, height: '100%', marginLeft, top: '0px', backgroundColor: '#911005', left, }; }; // 计算每个大矩形的样式 const rectStylea = (rect, index) => ({ position: 'absolute', width: '170px', left: '0px', top: `${index*rect.top}px`, height: `${rect.height}px`, }); // 计算每个小矩形的样式和数量 const getSubRectsa = (rectIndex) => { const count = subRectsCountsa.value[rectIndex]; const subRects = []; for (let i = 0; i < count; i++) { subRects.push({}); } return subRects; }; // 计算每个小矩形的样式 const subRectStylea = (rectIndex, subIndex) => { const width = '18px'; const marginLeft = '8px'; const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; return { position: 'absolute', width, height: '100%', marginLeft, top: '0px', backgroundColor: '#911005', left, }; }; // 计算每个大矩形的样式 const rectStyleb = (rect, index) => ({ position: 'absolute', width: '170px', left: '0px', top: `${index*rect.top}px`, height: `${rect.height}px`, }); // 计算每个小矩形的样式和数量 const getSubRectsb = (rectIndex) => { const count = subRectsCountsb.value[rectIndex]; const subRects = []; for (let i = 0; i < count; i++) { subRects.push({}); } return subRects; }; // 计算每个小矩形的样式 const subRectStyleb = (rectIndex, subIndex) => { const width = '18px'; const marginLeft = '8px'; const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; return { position: 'absolute', width, height: '100%', marginLeft, top: '0px', backgroundColor: '#911005', left, }; }; // 计算每个大矩形的样式 const rectStylec = (rect, index) => ({ position: 'absolute', width: '170px', left: '0px', top: `${index*rect.top}px`, height: `${rect.height}px`, }); // 计算每个小矩形的样式和数量 const getSubRectsc = (rectIndex) => { const count = subRectsCountsc.value[rectIndex]; const subRects = []; for (let i = 0; i < count; i++) { subRects.push({}); } return subRects; }; // 计算每个小矩形的样式 const subRectStylec = (rectIndex, subIndex) => { const width = '18px'; const marginLeft = '8px'; const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; return { position: 'absolute', width, height: '100%', marginLeft, top: '0px', backgroundColor: '#911005', left, }; }; onMounted(() => { socket = initializeWebSocket(socketUrl, handleMessage); @@ -1027,111 +1168,39 @@ </div> <div style="position: relative;"> <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 585px;"> <div v-for="(rect, index) in adjustedRects" :key="rect" :style="{ position: 'absolute', width: '200px', left: '0px', top: index*rect.top+`px`, height: `${rect.height}px`, }" > <div v-for="(rects, index) in rect.bigStorageCageDetails" :key="rects" :style="{ float:'left', width: '18px', height: `${rect.height}px`, backgroundColor: '#911005', top: '0px', marginRight: rects.gap/5000*227+'px' }" > </div> <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)"> <div v-for="(subRect, subIndex) in getSubRects(rectIndex)" :key="subIndex" :style="subRectStyle(rectIndex, subIndex)" ></div> </div> </div> <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 585px;"> <div v-for="(rect, index) in adjustedRectsa" :key="rect.id" :style="{ position: 'absolute', width: '227px', left: '0px', top: index*rect.top+`px`, height: `${rect.height}px`, }" > <div v-for="(rects, index) in rect.bigStorageCageDetails" :key="rects" :style="{ float:'left', width: '18px', height: `${rect.height}px`, backgroundColor: '#911005', top: '0px', marginRight: rects.gap/5000*227+'px' }" > </div> <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)"> <div v-for="(subRect, subIndex) in getSubRectsa(rectIndex)" :key="subIndex" :style="subRectStylea(rectIndex, subIndex)" ></div> </div> </div> <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 585px;"> <div v-for="(rect, index) in adjustedRectsb" :key="rect.id" :style="{ position: 'absolute', width: '227px', left: '0px', top: index*rect.top+`px`, height: `${rect.height}px`, }" > <div v-for="(rects, index) in rect.bigStorageCageDetails" :key="rects" :style="{ float:'left', width: '18px', height: `${rect.height}px`, backgroundColor: '#911005', top: '0px', marginRight: rects.gap/5000*227+'px' }" > </div> <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)"> <div v-for="(subRect, subIndex) in getSubRectsb(rectIndex)" :key="subIndex" :style="subRectStyleb(rectIndex, subIndex)" ></div> </div> </div> <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 585px;"> <div v-for="(rect, index) in adjustedRectsc" :key="rect.id" :style="{ position: 'absolute', width: '227px', left: '0px', top: index*rect.top+`px`, height: `${rect.height}px`, }" > <div v-for="(rects, index) in rect.bigStorageCageDetails" :key="rects" :style="{ float:'left', width: '18px', height: `${rect.height}px`, backgroundColor: '#911005', top: '0px', marginRight: rects.gap/5000*227+'px' }" > </div> <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> UI-Project/src/views/StockBasicData/stockBasicData.vue
@@ -115,26 +115,6 @@ closeWebSocket(socket); } }); function getStatusTypeb(state) { switch (state) { case 0: return 'info'; case 1: return 'success'; case 1: return 'danger'; } } function getStatusTextb(state) { switch (state) { case 0: return t('workOrder.nedging'); case 1: return t('workOrder.edging'); case 2: return t('workOrder.finedging'); } } onBeforeUnmount(() => { console.log("关闭了") closeWebSocket(); @@ -147,8 +127,8 @@ <div style="display: flex;"> <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('workOrder.cway')" clearable style="margin-left: 20px;margin-bottom: 10px;"> <el-option :label="$t('workOrder.edgingone')" value="930"></el-option> <el-option :label="$t('workOrder.edgingtwo')" value="931"></el-option> <el-option :label="$t('workOrder.edgingone')" value="2001"></el-option> <el-option :label="$t('workOrder.edgingtwo')" value="2002"></el-option> </el-select> <el-select v-model="selectValuesa[1]" filterable :placeholder="$t('workOrder.cstate')" clearable style="margin-left: 20px;margin-bottom: 10px;"> @@ -174,15 +154,10 @@ <el-table-column prop="thickness" align="center" :label="$t('workOrder.thickness')" min-width="120" /> <el-table-column prop="glassType" align="center" :label="$t('workOrder.glasstype')" min-width="120" /> <el-table-column prop="line" align="center" :label="$t('workOrder.line')" min-width="120" /> <el-table-column prop="state" :label="$t('workOrder.status')" align="center" width="200"> <!-- <template #default="scope"> <el-table-column prop="status" :label="$t('workOrder.status')" align="center" width="200"> <template #default="scope"> {{ scope.row.status==0?"未磨边":scope.row.status==1?"磨边中":"已磨边" }} </template> --> <template #default="scope"> <el-tag :type="getStatusTypeb(scope.row.state)"> {{ getStatusTextb(scope.row.state) }} </el-tag> </template> </template> </el-table-column> <el-table-column fixed="right" :label="$t('workOrder.operate')" align="center" width="200"> <template #default="scope"> UI-Project/src/views/largescreendisplay/screendisplay.vue
@@ -1,30 +1,55 @@ <script setup> import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue"; import {useRouter} from "vue-router" import {host, WebSocketHost} from '@/utils/constants' 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 { closeWebSocket, initializeWebSocket } from '@/utils/WebSocketService'; import dayjs from 'dayjs'; import {ElMessage, ElMessageBox} from 'element-plus' import {useI18n} from 'vue-i18n' import { ElMessage, ElMessageBox } from 'element-plus' import { useI18n } from 'vue-i18n' const router = useRouter() const blinda = ref(false) const blindb = ref(false) const {t} = useI18n() const { t } = useI18n() let language = ref(localStorage.getItem('lang') || 'zh') const tableData = ref([]) let socket = null; const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`; const rawGlassStorageDetailList = ref([]) const socketUrl = `ws://${WebSocketHost}:${host}/api/glassStorage/api/talk/largenScreen`; const handleMessage = (data) => { tableData.value = data.edgTasks[0] rawGlassStorageDetailList.value = data.rawGlassStorageDetailList[0] }; const handleBinda = async (row) => { let socket1 = null; const edgOneTasks = ref([]) const edgTwoTasks = ref([]) const engineeringOne = ref([]) const engineeringTow = ref([]) const socketUrl1 = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/largenScreen`; const handleMessage1 = (data) => { edgOneTasks.value = data.edgOneTasks[0]; edgTwoTasks.value = data.edgTwoTasks[0]; engineeringOne.value = data.engineeringOne[0]; engineeringTow.value = data.engineeringTow[0]; }; let socket2 = null; const temperingTaskType = ref([]) const temperingGlassInfoList = ref([]) const socketUrl2 = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/largenScreen`; const handleMessage2 = (data) => { temperingTaskType.value = data.temperingTaskType[0]; temperingGlassInfoList.value = data.temperingGlassInfoList[0]; }; const handleBinda = async (row) => { blinda.value = true; await fetchFlowCardId(row.orderId); }; }; const fetchFlowCardId = async (orderId) => { try { const response = await request.post('/loadGlass/order/order/selectOrderdetail',{ try { const response = await request.post('/loadGlass/order/order/selectOrderdetail', { orderId: orderId }) if (response.code == 200) { @@ -34,19 +59,21 @@ } else { ElMessage.error(response.message); } } catch (error) { } catch (error) { console.error(error); } } // 点击下方弹窗 const handlehistorical = (row) => { const handlehistorical = (row) => { blindb.value = true; historical() }; // 在组件挂载时设置默认时间范围 onMounted(() => { socket = initializeWebSocket(socketUrl, handleMessage); socket1 = initializeWebSocket(socketUrl1, handleMessage1); socket2 = initializeWebSocket(socketUrl2, handleMessage2); const endTime = dayjs().startOf('minute'); // 当前时间，精确到分钟 const startTime = endTime.subtract(1, 'day').startOf('minute'); // 当前时间的前一天，精确到分钟 // 设置时间范围为 [开始时间, 结束时间] @@ -55,11 +82,13 @@ // onMounted(() => { // socket = initializeWebSocket(socketUrl, handleMessage); // }); onUnmounted(() => { if (socket) { closeWebSocket(socket); } }); onUnmounted(() => { if (socket) { closeWebSocket(socket); closeWebSocket(socket1); closeWebSocket(socket2); } }); onBeforeUnmount(() => { console.log("关闭了") closeWebSocket(); @@ -67,43 +96,36 @@ </script> <template> <div style="height: 500px;"> <div class="awatch"> <img src="../../assets/screen.png" alt="Screen" style="max-width: 48%; max-height: 100%; margin-top: 50px; float: left; position: relative;" /> <div class="clickable-area" @click="handlehistorical" style="position: relative; width: 175px; height: 240px; top: 570px; left: 310px;" ></div> <div class="awatch"> <img src="../../assets/screen.png" alt="Screen" style="max-width: 48%; max-height: 100%; margin-top: 50px; float: left; position: relative;" /> <div class="clickable-area" @click="handlehistorical" style="position: relative; width: 175px; height: 240px; top: 570px; left: 310px;"></div> </div> <div style="height: 190px;width: 48%;float: right;"> <el-table height="500" ref="table" @selection-change="handleSelectionChange" :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table height="500" ref="table" @selection-change="handleSelectionChange" :data="tableDatac" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> <el-table-column prop="orderId" align="center" :label="$t('large.orderId')" min-width="50" /> <el-table-column prop="customerName" align="center" :show-overflow-tooltip="true" :label="$t('large.customerName')" min-width="90" /> <el-table-column prop="customerName" align="center" :show-overflow-tooltip="true" :label="$t('large.customerName')" min-width="90" /> <el-table-column prop="project" align="center" :label="$t('large.project')" min-width="50" /> <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="50" /> <el-table-column prop="quantity" align="center" :label="$t('large.quantity')" min-width="50" /> <el-table-column align="center" :label="$t('large.warehousing')" min-width="50" prop="warehousing" > <template #default="scope"> <el-tag :type="getStatusType(scope.row.warehousing)"> {{ getStatusText(scope.row.warehousing) }} </el-tag> </template> <el-table-column align="center" :label="$t('large.warehousing')" min-width="50" prop="warehousing"> <template #default="scope"> <el-tag :type="getStatusType(scope.row.warehousing)"> {{ getStatusText(scope.row.warehousing) }} </el-tag> </template> </el-table-column> <el-table-column prop="deliveryDate" align="center" :label="$t('large.deliveryDate')" min-width="100" /> <el-table-column fixed="right" :label="$t('large.operate')" align="center" width="100"> <template #default="scope"> <el-button size="mini" type="text" plain @click="handleBinda(scope.row)">{{ $t('large.mes') }}</el-button> </template> </el-table-column> </el-table-column> </el-table> </div> </div> </div> <!-- 点击下方弹窗 --> <el-dialog v-model="blindb" top="10vh" width="90%"> @@ -137,109 +159,111 @@ <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="sethistorical()">{{ $t('reportmanage.inquire') }}</el-button> </div> <el-table ref="table" style="margin-top: 20px;height: 650px;" :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> </div> <el-table ref="table" style="margin-top: 20px;height: 650px;" :data="tableDatad" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> <el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.intoglassid')" min-width="80" /> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" /> <el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" /> <el-table-column align="center" :label="$t('film.taskstatus')" min-width="80" prop="taskState" > <template #default="scope"> <el-tag :type="getStatusTypeb(scope.row.taskState)"> {{ getStatusTextb(scope.row.taskState) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.enabletype')" min-width="80" prop="taskType" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskType)"> {{ getStatusTexta(scope.row.taskType) }} </el-tag> </template> </el-table-column> <el-table-column prop="createTime" align="center" :label="$t('film.createtime')" min-width="120" /> <el-table-column prop="updateTime" align="center" :label="$t('sorter.updateTime')" min-width="120" /> </el-table> <template #footer> <el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" /> <el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" /> <el-table-column align="center" :label="$t('film.taskstatus')" min-width="80" prop="taskState"> <template #default="scope"> <el-tag :type="getStatusTypeb(scope.row.taskState)"> {{ getStatusTextb(scope.row.taskState) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.enabletype')" min-width="80" prop="taskType"> <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskType)"> {{ getStatusTexta(scope.row.taskType) }} </el-tag> </template> </el-table-column> <el-table-column prop="createTime" align="center" :label="$t('film.createtime')" min-width="120" /> <el-table-column prop="updateTime" align="center" :label="$t('sorter.updateTime')" min-width="120" /> </el-table> <template #footer> <div id="dialog-footer"> <el-button @click="blindb = false">{{ $t('large.close') }}</el-button> </div> </template> </el-dialog> <el-dialog v-model="blinda" top="5vh" width="85%"> <el-table height="650" ref="table" @selection-change="handleSelectionChange" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="orderId" fixed align="center" :label="$t('large.orderId')" min-width="110" /> <el-table-column prop="project" align="center" :label="$t('large.project')" min-width="110" /> <el-table-column prop="processId" align="center" :label="$t('large.cardnumber')" min-width="110" /> <el-table-column prop="orderNumber" align="center" :label="$t('large.serialnumber')" min-width="110" /> <el-table-column prop="productName" align="center" :label="$t('large.productname')" min-width="110" /> <el-table-column prop="width" align="center" :label="$t('large.width')" min-width="100" /> <el-table-column prop="height" align="center" :label="$t('large.height')" min-width="100" /> <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="100" /> <el-table-column prop="quantity" align="center" :label="$t('large.number')" min-width="110" /> <el-table-column prop="numberPatches" align="center" :label="$t('large.numberpatches')" min-width="110" /> <el-table-column prop="receivedQuantity" align="center" :label="$t('large.innumber')" min-width="110" /> <el-table-column prop="terminationStatus" align="center" :label="$t('large.productstatus')" min-width="110" /> <el-table-column align="center" :label="$t('large.productstatus')" min-width="80" prop="terminationStatus" > <template #default="scope"> <el-tag :type="scope.row.terminationStatus === 0 ? 'success' : 'danger'" > <el-dialog v-model="blinda" top="5vh" width="85%"> <el-table height="650" ref="table" @selection-change="handleSelectionChange" :data="tableData" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> <el-table-column prop="orderId" fixed align="center" :label="$t('large.orderId')" min-width="110" /> <el-table-column prop="project" align="center" :label="$t('large.project')" min-width="110" /> <el-table-column prop="processId" align="center" :label="$t('large.cardnumber')" min-width="110" /> <el-table-column prop="orderNumber" align="center" :label="$t('large.serialnumber')" min-width="110" /> <el-table-column prop="productName" align="center" :label="$t('large.productname')" min-width="110" /> <el-table-column prop="width" align="center" :label="$t('large.width')" min-width="100" /> <el-table-column prop="height" align="center" :label="$t('large.height')" min-width="100" /> <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="100" /> <el-table-column prop="quantity" align="center" :label="$t('large.number')" min-width="110" /> <el-table-column prop="numberPatches" align="center" :label="$t('large.numberpatches')" min-width="110" /> <el-table-column prop="receivedQuantity" align="center" :label="$t('large.innumber')" min-width="110" /> <el-table-column prop="terminationStatus" align="center" :label="$t('large.productstatus')" min-width="110" /> <el-table-column align="center" :label="$t('large.productstatus')" min-width="80" prop="terminationStatus"> <template #default="scope"> <el-tag :type="scope.row.terminationStatus === 0 ? 'success' : 'danger'"> {{ scope.row.terminationStatus === 0 ? $t('large.right') : $t('large.stop') }} </el-tag> </template> </el-table-column> <el-table-column prop="packType" align="center" :label="$t('large.quantity')" min-width="110" /> <el-table-column prop="projectNo" align="center" :label="$t('large.projectnumber')" min-width="110" /> </el-table> <template #footer> <div id="dialog-footer" style="text-align: center;"> <el-button @click="blinda = false">{{ $t('large.close') }}</el-button> </div> </template> </el-dialog> </el-tag> </template> </el-table-column> <el-table-column prop="packType" align="center" :label="$t('large.quantity')" min-width="110" /> <el-table-column prop="projectNo" align="center" :label="$t('large.projectnumber')" min-width="110" /> </el-table> <template #footer> <div id="dialog-footer" style="text-align: center;"> <el-button @click="blinda = false">{{ $t('large.close') }}</el-button> </div> </template> </el-dialog> </template> <style scoped> #dt { display:block; float:left;line-height: 20px;margin-left: 100px;} #dta { display:block; float:left;line-height: 20px;margin-left: 80%;} #dialog-footer{ #dt { display: block; float: left; line-height: 20px; margin-left: 100px; } #dta { display: block; float: left; line-height: 20px; margin-left: 80%; } #dialog-footer { text-align: center; margin-top: -15px; } #message{ #message { text-align: center; align-items: center; color: black; width: 200px; height: 100px; background-color: #337ecc; margin-left: 28%; width: 200px; height: 100px; background-color: #337ecc; margin-left: 28%; } #awatch{ #awatch { height: 460px; } .clickable-area { cursor: pointer; /* 指示这是一个可点击的区域 */ text-align: center; /* 如果需要，可以在div中添加文本并居中 */ line-height: 95px; /* 如果需要，使文本垂直居中 */ cursor: pointer; /* 指示这是一个可点击的区域 */ text-align: center; /* 如果需要，可以在div中添加文本并居中 */ line-height: 95px; /* 如果需要，使文本垂直居中 */ } /* .awatch{ height: 460px; /* max-width: 100%; */
