You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1177 lines
42 KiB
1177 lines
42 KiB
<template> |
|
<el-dialog |
|
title="生产监控" |
|
append-to-body |
|
:modelValue="openShow" |
|
width="30%" |
|
@close="closeDialog" |
|
fullscreen |
|
> |
|
<el-descriptions title="订单信息"> |
|
<template #extra> |
|
<el-button type="primary" @click="refreshData" :loading="refreshLoading">刷新</el-button> |
|
</template> |
|
</el-descriptions> |
|
<div class="order-box"> |
|
<div |
|
class="order-item" |
|
v-for="(item, index) in displayOrderItems" |
|
:key="index" |
|
:class="{ 'expand-item': item.isExpandBtn }" |
|
> |
|
<!-- 展开按钮 --> |
|
<template v-if="item.isExpandBtn"> |
|
<el-button type="text" @click="toggleOrderInfo" class="expand-btn"> |
|
{{ orderInfoExpanded ? '收起 ▲' : '展开更多 ▼' }} |
|
</el-button> |
|
</template> |
|
<template v-else> |
|
{{ item.label }}： |
|
<span |
|
v-if="item.clickable" |
|
style="cursor: pointer; font-weight: 500" |
|
@dblclick="item.clickHandler" |
|
>{{ item.value }}</span |
|
> |
|
<span v-else-if="item.style" :style="item.style">{{ item.value }}</span> |
|
<span v-else>{{ item.value }}</span> |
|
</template> |
|
</div> |
|
|
|
<!-- 展开/收起按钮 --> |
|
<div class="order-item" style="width: 100%; text-align: center" v-if="orderInfoExpanded"> |
|
<el-button type="text" @click="toggleOrderInfo" class="expand-btn"> |
|
{{ orderInfoExpanded ? '收起 ▲' : '展开更多 ▼' }} |
|
</el-button> |
|
</div> |
|
</div> |
|
<el-descriptions title="工序信息"> </el-descriptions> |
|
<div v-loading="processSelectLoading"> |
|
<div class="scrollContent"> |
|
<div ref="pointView" class="scrollBox"> |
|
<!-- --> |
|
<div |
|
v-for="(item, index) in detailsForm.planList" |
|
:key="item.id" |
|
:class="[ |
|
'production-process-item', |
|
index === 0 ? 'production-left-item-box' : '', |
|
{ selected: selectedItemId === item.id }, |
|
]" |
|
@click="selectItem(item)" |
|
class="production-process-item" |
|
:style="{ borderColor: getProcessBgColor(item.status) }" |
|
> |
|
<!-- 工序号和工序名称 --> |
|
<div |
|
class="production-process-title" |
|
:style="{ background: getProcessBgColor(item.status) }" |
|
> |
|
<div style="display: flex; align-items: center" :title="'工序号和工序名字'"> |
|
<div>{{ item.orders + '-' + item.ppsName }}</div> |
|
</div> |
|
<!-- 1 是 0否 --> |
|
<el-icon style="font-size: 16px; margin-left: 5px" v-if="item.mainProcess == 1"> |
|
<Star /> |
|
</el-icon> |
|
</div> |
|
<div |
|
class="process_content" |
|
:style="{ background: getProcessVerticalGradient(item.status) }" |
|
> |
|
<!-- 加工班组 --> |
|
<div class="flex-row" :title="'班组'"> |
|
<span class="icon-text" |
|
><el-icon><User /></el-icon>班组：</span |
|
> |
|
<span v-if="item.makeTeam" class="icon-text"> |
|
{{ item.makeTeam }} |
|
</span> |
|
</div> |
|
<!-- 接收人 --> |
|
<div class="flex-row" :title="'接收人'"> |
|
<span class="icon-text"> |
|
<el-icon><User /></el-icon>接收人：</span |
|
> |
|
<span class="icon-text"> |
|
{{ item.status != 1 && item.receiveManName ? item.receiveManName : '-' }} |
|
</span> |
|
</div> |
|
<!-- 计划加工人 --> |
|
<div class="flex-row" v-if="item.planWorkMan != ''" :title="'计划加工人'"> |
|
<span class="icon-text" |
|
><el-icon><User /></el-icon>计划加工人：</span |
|
> |
|
<span class="icon-text"> |
|
{{ item.planWorkMan }} |
|
</span> |
|
</div> |
|
<!-- 报工人/报工数量 --> |
|
<div class="flex-row" :title="'报工人和数量'"> |
|
<span class="icon-text" |
|
><el-icon><User /></el-icon>报工人/数量：</span |
|
> |
|
<span v-if="item.workManName" class="icon-text"> |
|
{{ item.workManName }}/{{ item.workQty }} |
|
</span> |
|
<span v-else class="icon-text">-</span> |
|
</div> |
|
<!-- 额定工时-实际工时 --> |
|
<div class="flex-row" :title="'额定工时-实际工时'"> |
|
<span class="icon-text"> |
|
<el-icon><Odometer /></el-icon>额定/实际工时(min)：</span |
|
> |
|
<span class="icon-text"> {{ item.hourQuota }}/{{ item.hourActual }} </span> |
|
</div> |
|
<!-- 计划开始-计划结束 --> |
|
<div class="flex-row" :title="'计划开始'"> |
|
<span class="icon-text"> |
|
<el-icon><Odometer /></el-icon>计划开始：</span |
|
> |
|
<span class="icon-text"> |
|
{{ item.planStartTime }} |
|
</span> |
|
</div> |
|
<div class="flex-row" :title="'计划结束'"> |
|
<span class="icon-text"> |
|
<el-icon><Odometer /></el-icon>计划结束：</span |
|
> |
|
<span class="icon-text"> |
|
{{ item.planEndTime }} |
|
</span> |
|
</div> |
|
<!-- 实际开始-实际结束 --> |
|
<div class="flex-row" :title="'实际开始'"> |
|
<span class="icon-text"> |
|
<el-icon><Edit /></el-icon>实际开始：</span |
|
> |
|
<span class="icon-text">{{ item.factStartTime || '-' }}</span> |
|
</div> |
|
<div class="flex-row" :title="'实际结束'"> |
|
<span class="icon-text"> |
|
<el-icon><Edit /></el-icon>实际结束：</span |
|
> |
|
<span style="color: #1990ff" class="icon-text"> {{ item.factEndTime || '-' }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="details-box" v-if="selectedItemId && selectedItemInfo.status > 1"> |
|
<div class="details-box-item"> |
|
<div class="de-title">工序详情</div> |
|
<el-descriptions :column="4" border label-width="100" class="fixed-descriptions"> |
|
<el-descriptions-item label="接收数量" :span="1">{{ |
|
processDetails.qualifiedQty |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="计划开始" :span="1">{{ |
|
selectedItemInfo.planStartTime |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="计划结束" :span="1">{{ |
|
selectedItemInfo.planEndTime |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="接收人" :span="1">{{ |
|
processDetails.receiveName |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="实际开始" :span="1">{{ |
|
selectedItemInfo.factStartTime |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="实际结束" :span="1">{{ |
|
selectedItemInfo.factEndTime |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="试验数量" :span="1">{{ |
|
processDetails.testQty |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="消耗数量" :span="1">{{ |
|
processDetails.lossQty |
|
}}</el-descriptions-item> |
|
<el-descriptions-item label="报废数量" :span="1">{{ |
|
processDetails.scrapQty |
|
}}</el-descriptions-item> |
|
</el-descriptions> |
|
</div> |
|
<div |
|
class="details-box-item" |
|
v-if="processDetails.mrList && processDetails.mrList.length >= 0" |
|
> |
|
<div class="de-title">加工记录</div> |
|
<el-table |
|
:data="processDetails.mrList" |
|
:sequence="false" |
|
:no-page="false" |
|
:export-excel="false" |
|
border |
|
> |
|
<el-table-column label="操作工" align="center" prop="worker" min-width="150" /> |
|
<el-table-column label="加工时间" align="center" prop="makeTime" min-width="150" /> |
|
<el-table-column label="合格数量" align="center" prop="workQty" min-width="150" /> |
|
<el-table-column label="报废数量" align="center" prop="scrapQty" min-width="150" /> |
|
<el-table-column label="备注" align="center" prop="memo" min-width="150" /> |
|
</el-table> |
|
</div> |
|
<div |
|
class="details-box-item" |
|
v-if="processDetails.trialItemList && processDetails.trialItemList.length > 0" |
|
> |
|
<div class="de-title">转试记录</div> |
|
<el-table :data="processDetails.trialItemList" border> |
|
<el-table-column label="试验信息" align="center" prop="testName" /> |
|
<el-table-column label="转试人" align="center" prop="testUser" /> |
|
<el-table-column label="转试时间" align="center" prop="testTime" /> |
|
<el-table-column label="试验状态" align="center" prop="testStatus" /> |
|
</el-table> |
|
</div> |
|
<div |
|
class="details-box-item" |
|
v-if="processDetails.slotList && processDetails.slotList.length > 0" |
|
> |
|
<div class="de-title">同槽信息</div> |
|
<el-table :data="processDetails.slotList" border> |
|
<el-table-column label="同槽编号" align="center" prop="mtuCode" /> |
|
<el-table-column label="零件号" align="center" prop="partCode" /> |
|
<el-table-column label="批次号" align="center" prop="batchNo" /> |
|
<el-table-column label="数量" align="center" prop="qua" /> |
|
<el-table-column label="生产标识" align="center" prop="prodIdent" /> |
|
<el-table-column label="面积" align="center" prop="area" /> |
|
<el-table-column label="总面积" align="center" prop="totalArea" /> |
|
</el-table> |
|
</div> |
|
<div |
|
class="details-box-item" |
|
v-if="processDetails.mtuList && processDetails.mtuList.length > 0" |
|
> |
|
<div class="de-title">设备使用详情</div> |
|
<el-table |
|
:data="processDetails.mtuList" |
|
:sequence="false" |
|
:no-page="false" |
|
:export-excel="false" |
|
border |
|
> |
|
<el-table-column label="挂具编号" align="center" prop="rsCode" /> |
|
<el-table-column label="飞靶编号" align="center" prop="fsCode" /> |
|
<el-table-column label="设备编码" align="center" prop="deviceCode" /> |
|
<el-table-column label="挂次号" align="center" prop="hangNum" min-width="150" /> |
|
</el-table> |
|
</div> |
|
<div class="linediv details-box-item" v-if="processDetails.prWorkCheck != null"> |
|
<div class="de-title">检验记录</div> |
|
<el-descriptions :column="4" label-width="100" class="fixed-descriptions" border> |
|
<el-descriptions-item label="检验数量"> |
|
{{ processDetails.checkQty }} |
|
</el-descriptions-item> |
|
<el-descriptions-item label="合格数量"> |
|
{{ processDetails.qualifiedQty }} |
|
</el-descriptions-item> |
|
<el-descriptions-item label="不合格数量"> |
|
{{ processDetails.unqualifiedQty }} |
|
</el-descriptions-item> |
|
<el-descriptions-item label="消耗数量"> |
|
{{ processDetails.lossQty }} |
|
</el-descriptions-item> |
|
<el-descriptions-item label="报废数量"> |
|
{{ processDetails.scrapQty }} |
|
</el-descriptions-item> |
|
<el-descriptions-item label="返工数量"> |
|
{{ processDetails.reworkQty }} |
|
</el-descriptions-item> |
|
<el-descriptions-item label="备注"> |
|
{{ processDetails.checkMemo }} |
|
</el-descriptions-item> |
|
</el-descriptions> |
|
</div> |
|
<div |
|
class="details-box-item" |
|
v-if="processDetails.itemList && processDetails.itemList.length > 0" |
|
> |
|
<div class="de-title">检验项</div> |
|
<el-table |
|
:ref="'myTable'" |
|
:sequence="false" |
|
:no-page="false" |
|
:export-excel="false" |
|
border |
|
:data="processDetails.itemList" |
|
> |
|
<el-table-column label="项目编号" prop="itemCode" align="center" width="130"> |
|
</el-table-column> |
|
<el-table-column label="项目" prop="itemName" align="center" width="150" /> |
|
<el-table-column |
|
label="标准" |
|
prop="standardName" |
|
align="center" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column label="测试值" align="center" width="120"> |
|
<template #default="scope"> |
|
<div> |
|
<el-popover |
|
v-if="scope.row.itemName&&scope.row.itemName === '厚度检测'" |
|
transition="el-zoom-in-bottom" |
|
offset="100" |
|
placement="top" |
|
trigger="hover" |
|
> |
|
<el-table :data="scope.row.itemDetailList" border> |
|
<el-table-column label="编号" width="80" align="center" property="tools" /> |
|
<el-table-column |
|
label="参数1名称" |
|
property="gaugeValue1" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="参数1数值" |
|
property="gaugeValue2" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="参数2名称" |
|
property="gaugeValue3" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="参数2数值" |
|
property="gaugeValue4" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="参数3名称" |
|
property="gaugeValue5" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="参数3数值" |
|
property="gaugeValue6" |
|
align="right" |
|
width="80" |
|
/> |
|
</el-table> |
|
<span>测试值</span> |
|
</el-popover> |
|
<el-popover |
|
v-else-if="scope.row.itemDetailList.length > 0" |
|
transition="el-zoom-in-bottom" |
|
offset="100" |
|
placement="top" |
|
trigger="hover" |
|
@show="loadDetail(scope.row.wpiId)" |
|
> |
|
<el-table :data="scope.row.itemDetailList" border> |
|
<el-table-column |
|
label="镀前镀后" |
|
width="80" |
|
align="center" |
|
property="testType" |
|
/> |
|
<el-table-column |
|
label="尺寸" |
|
width="120" |
|
align="center" |
|
property="ruleSize" |
|
/> |
|
<el-table-column label="量具" width="80" align="center" property="tools" /> |
|
<el-table-column |
|
label="测试值1" |
|
property="gaugeValue1" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值2" |
|
property="gaugeValue2" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值3" |
|
property="gaugeValue3" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值4" |
|
property="gaugeValue4" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值5" |
|
property="gaugeValue5" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值6" |
|
property="gaugeValue6" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值7" |
|
property="gaugeValue7" |
|
align="right" |
|
width="80" |
|
/> |
|
<el-table-column |
|
label="测试值8" |
|
property="gaugeValue8" |
|
align="right" |
|
width="80" |
|
/> |
|
</el-table> |
|
<el-button slot="reference">测试值</el-button> |
|
</el-popover> |
|
<span v-else>{{ scope.row.checkValue }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="试验数量" property="testQty" align="center" width="70" /> |
|
<el-table-column label="消耗数量" property="lossQty" align="center" width="70" /> |
|
<el-table-column label="检验数量" property="checkQty" align="center" width="70" /> |
|
<el-table-column label="检验结果" property="checkResult" align="center" width="80" /> |
|
<el-table-column label="检验人" property="checkMan" align="center" width="90" /> |
|
<el-table-column label="检验时间" property="checkDate" align="center" width="160" /> |
|
</el-table> |
|
</div> |
|
<div |
|
class="details-box-item" |
|
v-if=" |
|
processDetails.printType == 1 && |
|
processDetails.dsRbFilePreserveSlotList && |
|
processDetails.dsRbFilePreserveSlotList.length > 0 |
|
" |
|
> |
|
<div class="de-title"> |
|
过程质量记录 |
|
<!-- <el-button type="text" @click="syncData()" v-loading="syncLoading" |
|
>手动同步记录</el-button |
|
> --> |
|
</div> |
|
<preserve-slot-list :slot-list="processDetails.dsRbFilePreserveSlotList" /> |
|
</div> |
|
<div style="width: 950px"> |
|
<template v-if="selectedItemInfo.ppsName == '玻璃封接清洗'"> |
|
<template v-if="processDetails.prList != null && processDetails.prList.length > 0"> |
|
<el-table :data="[processDetails.prList[0]]" border> |
|
<el-table-column label="清洗开始时间" align="center" property="inDate" /> |
|
<el-table-column label="清洗结束时间" align="center" property="outDate" /> |
|
<el-table-column label="温度(℃)" align="center" property="tempSlot" /> |
|
<el-table-column label="操作者" align="center" property="createMan" /> |
|
</el-table> |
|
</template> |
|
<template v-if="processDetails.prList != null && processDetails.prList.length > 1"> |
|
<el-table :data="[processDetails.prList[1]]" border> |
|
<el-table-column label="烘干开始时间" align="center" property="inDate" /> |
|
<el-table-column label="烘干结束时间" align="center" property="outDate" /> |
|
<el-table-column label="烘箱温度(℃)" align="center" property="tempSlot" /> |
|
<el-table-column label="操作者" align="center" property="createMan" /> |
|
<el-table-column label="设备编号" align="center" property="deviceId" /> |
|
</el-table> |
|
</template> |
|
</template> |
|
<!-- 如果当前工序是 玻璃封接退火 --> |
|
<template v-if="selectedItemInfo.ppsName == '玻璃封接退火'"> |
|
<el-table :data="processDetails.prList" border> |
|
<el-table-column label="数量" align="center" property="dataThree" /> |
|
<el-table-column label="入炉时间" align="center" property="inDate" /> |
|
<el-table-column label="保温开始时间" align="center" property="dataThirteen" /> |
|
<el-table-column label="退火温度" align="center" property="tempSlot" /> |
|
<el-table-column label="保温结束时间" align="center" property="dataTwelve" /> |
|
<el-table-column label="最小真空度(Pa)" align="center" property="dataFourteen" /> |
|
<el-table-column label="出炉时间" align="center" property="outDate" /> |
|
<el-table-column label="操作者" align="center" property="createMan" /> |
|
<el-table-column label="设备编号" align="center" property="deviceId" /> |
|
</el-table> |
|
</template> |
|
<!-- 如果当前工序是 玻璃封接预氧化（箱式炉） --> |
|
<template v-if="selectedItemInfo.ppsName == '玻璃封接预氧化（箱式炉）'"> |
|
<el-table :data="processDetails.prList" border> |
|
<el-table-column label="数量" align="center" property="dataThree" /> |
|
<el-table-column label="入炉时间" align="center" property="inDate" /> |
|
<el-table-column label="保温开始时间" align="center" property="dataThirteen" /> |
|
<el-table-column label="保温温度" align="center" property="tempSlot" /> |
|
<el-table-column label="保温结束时间" align="center" property="dataTwelve" /> |
|
<el-table-column label="操作者" align="center" property="createMan" /> |
|
<el-table-column label="设备编号" align="center" property="deviceId" /> |
|
</el-table> |
|
</template> |
|
<!-- 如果当前工序是 玻璃封接预氧化（链式炉） --> |
|
<template v-if="selectedItemInfo.ppsName == '玻璃封接预氧化（链式炉）'"> |
|
<el-table :data="processDetails.prList" border> |
|
<el-table-column label="数量" align="center" property="dataThree" /> |
|
<el-table-column label="湿氮预氧化温度(℃)" align="center" property="tempSlot" /> |
|
<el-table-column label="露点" align="center" property="dataEleven" /> |
|
<el-table-column label="入炉时间" align="center" property="inDate" /> |
|
<el-table-column label="出炉时间" align="center" property="outDate" /> |
|
<el-table-column label="链速" align="center" property="vSpeed" /> |
|
<el-table-column label="操作者" align="center" property="createMan" /> |
|
<el-table-column label="设备编号" align="center" property="deviceId" /> |
|
</el-table> |
|
</template> |
|
<!-- 如果当前工序是 玻璃封接（链式炉） --> |
|
<template v-if="selectedItemInfo.ppsName == '玻璃封接（链式炉）'"> |
|
<el-table :data="processDetails.prList" border> |
|
<el-table-column label="数量" align="center" property="dataThree" /> |
|
<el-table-column label="封接温度(℃)" align="center" property="tempSlot" /> |
|
<el-table-column label="入炉时间" align="center" property="inDate" /> |
|
<el-table-column label="出炉时间" align="center" property="outDate" /> |
|
<el-table-column label="链速" align="center" property="vSpeed" /> |
|
<el-table-column label="操作者" align="center" property="createMan.userName" /> |
|
<el-table-column label="设备编号" align="center" property="deviceId" /> |
|
</el-table> |
|
</template> |
|
</div> |
|
</div> |
|
<div |
|
class="details-box details-box-item" |
|
v-if="selectedItemId && selectedItemInfo.status == 1" |
|
> |
|
<el-empty description="暂无加工、检验记录！"></el-empty> |
|
</div> |
|
</div> |
|
|
|
<!-- <el-collapse v-model="activeName"> |
|
<el-collapse-item title="订单信息" name="1"> |
|
<template #title="{ isActive }"> 订单信息 </template> |
|
</el-collapse-item> |
|
<el-collapse-item title="工序信息" name="2" > |
|
</el-collapse-item> |
|
</el-collapse> --> |
|
</el-dialog> |
|
</template> |
|
<script> |
|
import { updateProcess } from '../../api/flowManagement/index'; |
|
import contentView from './processView.vue'; |
|
import preserveSlotList from './preserveSlotList.vue'; |
|
import MoveElement from '@/utils/moveElement.js'; |
|
import { getOrderDetail, getPlanDetail } from '../../api/workRate/index'; |
|
|
|
export default { |
|
props: { |
|
showDialog: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
rowItem: { |
|
type: Object, |
|
default: () => {}, |
|
}, |
|
}, |
|
components: { |
|
contentView, |
|
preserveSlotList, |
|
}, |
|
computed: { |
|
// 订单信息列表 |
|
orderItems() { |
|
// 获取优先级样式 |
|
const getPriorityStyle = importance => { |
|
if (importance == 1) { |
|
return 'color: green'; |
|
} else if (importance == 2 || importance == 3) { |
|
return 'color: red'; |
|
} else { |
|
return 'color: rgb(251, 170, 8)'; |
|
} |
|
}; |
|
return [ |
|
{ label: '车间订单号', value: this.detailsForm.woCode || '' }, |
|
{ label: '流程卡号', value: this.detailsForm.cardNo || '' }, |
|
{ |
|
label: '零件号', |
|
value: this.detailsForm.partCode || '', |
|
clickable: true, |
|
clickHandler: () => this.openDocLink(this.detailsForm.dsPart), |
|
}, |
|
{ label: '批次号', value: this.detailsForm.batchNo || '' }, |
|
{ label: '订单数量', value: this.detailsForm.ypQty || '' }, |
|
{ label: '状态', value: this.detailsForm.curStatus || '' }, |
|
{ |
|
label: '优先级', |
|
value: this.detailsForm.priority || '', |
|
style: getPriorityStyle(this.detailsForm.priority), |
|
}, |
|
{ |
|
label: '调度员', |
|
value: this.detailsForm.dispatcher === null ? '' : this.detailsForm.dispatcher, |
|
}, |
|
{ label: '订单下达', value: this.detailsForm.sendDownTime || '' }, |
|
{ label: '生产数量', value: this.detailsForm.makeQty || '' }, |
|
{ label: '零件名称', value: this.detailsForm.dsPart?.partName || '' }, |
|
{ label: '产品型号', value: this.detailsForm.dsPart?.productType || '' }, |
|
{ label: '硬度', value: this.detailsForm.dsPart?.hardness || '' }, |
|
{ label: '计划完工', value: this.detailsForm.planEndDate || '' }, |
|
{ |
|
label: '需求交期', |
|
value: this.detailsForm.priority === 4 ? this.detailsForm.demandDate : '', |
|
}, |
|
{ label: '镀种', value: this.detailsForm.dsPart?.plate || '' }, |
|
{ label: '面积 (dm²)', value: this.detailsForm.dsPart?.area || '' }, |
|
{ label: '材料', value: this.detailsForm.dsPart?.material || '' }, |
|
{ label: '生产标识', value: this.detailsForm.prodIdent || '' }, |
|
{ label: '镀后入库', value: this.detailsForm.putStoreTime || '' }, |
|
{ label: '标记要求', value: this.detailsForm.dsPart?.signMemo || '' }, |
|
{ label: '关键信息', value: this.detailsForm.dsPart?.cruxMemo || '' }, |
|
{ label: '试验数量', value: this.detailsForm.testQty || '' }, |
|
{ label: '消耗数量', value: this.detailsForm.lossQty || '' }, |
|
{ |
|
label: '是否印字', |
|
value: |
|
this.detailsForm.yieldType != 1 |
|
? this.detailsForm.dsPart?.isPrint == 1 |
|
? '否' |
|
: this.detailsForm.dsPart?.isPrint == 2 |
|
? '单' |
|
: '双' |
|
: '', |
|
}, |
|
{ label: '工艺路线', value: this.detailsForm.dsPart?.craftWay || '' }, |
|
{ |
|
label: '返工单号', |
|
value: this.detailsForm.curStatus == 19 ? this.detailsForm.qcReworkCode || '' : '', |
|
clickable: this.detailsForm.curStatus == 19, |
|
clickHandler: () => this.openClient(this.detailsForm.qcReworkCode), |
|
}, |
|
{ |
|
label: '涂色标个数', |
|
value: this.detailsForm.yieldType == 1 ? this.detailsForm.dsPart?.tsbNum : '', |
|
}, |
|
{ |
|
label: '涂色带个数', |
|
value: this.rowItem.yieldType == 1 ? this.detailsForm.dsPart?.tsdNum || '' : '', |
|
}, |
|
{ |
|
label: '涂箭头个数', |
|
value: this.rowItem.yieldType == 1 ? this.detailsForm.dsPart?.tjtNum || '' : '', |
|
}, |
|
{ label: '产品系列', value: this.detailsForm.dsPart?.productSeries || '' }, |
|
{ label: '工作订单备注', value: this.detailsForm.poMemo || '' }, |
|
{ |
|
label: '会议要求周期', |
|
value: this.detailsForm.priority === 4 ? this.detailsForm.meetCycle : '', |
|
}, |
|
{ |
|
label: '审理单号', |
|
value: this.detailsForm.reworkCode || '', |
|
clickable: true, |
|
clickHandler: () => this.openQcSheet(this.detailsForm.reworkCode), |
|
}, |
|
]; |
|
}, |
|
// 控制显示的订单项 |
|
displayOrderItems() { |
|
if (this.orderInfoExpanded) { |
|
// 展开时显示全部 |
|
// this.orderItems.forEach(item => { |
|
// item.isExpandBtn = true; // 重置所有按钮的显示状态 |
|
// }); |
|
return this.orderItems; |
|
} else { |
|
// 收起时显示前 9 个，第 10 个位置显示"展开更多"按钮 |
|
const items = this.orderItems.slice(0, 9); |
|
return [ |
|
...items, |
|
{ |
|
label: '', |
|
value: '', |
|
isExpandBtn: true, // 标记为展开按钮 |
|
}, |
|
]; |
|
} |
|
}, |
|
}, |
|
data() { |
|
return { |
|
refreshLoading:false, |
|
processSelectLoading: false, |
|
selectedItemId: null, |
|
selectedItemInfo: {}, |
|
// rowItem: {}, |
|
activeName: '1', |
|
openShow: false, |
|
dsPart: {}, |
|
height: 0, |
|
craftList: [], //工序列表 |
|
color: { |
|
1: '#707070', |
|
2: '#22ac38', |
|
3: '#22ac38', |
|
5: '#00b7ee', |
|
}, |
|
checkItemShow: true, |
|
makeRecShow: true, |
|
mtuShow: true, |
|
detailsForm: {}, |
|
statusColorMap: { |
|
1: 'rgba(108, 117, 125,1)', // 未开始 |
|
2: 'rgba(40, 167, 69, 1)', // 已接收 |
|
3: 'rgba(40, 167, 69, 1)', // 已报工 |
|
4: 'rgba(40, 167, 69, 1)', // 检验中 |
|
5: 'rgba(40, 76, 137, 1)', // 已完成 |
|
}, |
|
statusTextMap: { |
|
1: '未开始', |
|
2: '已接收', |
|
3: '已报工', |
|
4: '检验中', |
|
5: '已完成', |
|
}, |
|
processDetails: {}, //工序详情 |
|
orderInfoExpanded: false, |
|
}; |
|
}, |
|
mounted() { |
|
this.openShow = this.showDialog; |
|
this.height = document.body.clientHeight - 100; |
|
console.log(this.rowItem, 'rowItem'); |
|
|
|
this.getOrderDetail(); |
|
this.$nextTick(() => { |
|
const el = this.$refs.pointView; |
|
if (el) { |
|
new MoveElement(el); |
|
} |
|
}); |
|
}, |
|
methods: { |
|
refreshData() { |
|
this.refreshLoading = true |
|
this.getOrderDetail(); |
|
setTimeout(() => { |
|
this.refreshLoading = false |
|
}, 500); |
|
}, |
|
// 切换订单信息展开/收起 |
|
toggleOrderInfo() { |
|
this.orderInfoExpanded = !this.orderInfoExpanded; |
|
}, |
|
// 同步数据 |
|
syncData() { |
|
this.syncLoading = true; |
|
const { slotList = [] } = this.jsonObj.workPlan || {}; |
|
const { mtuList = [] } = this.jsonObj || {}; |
|
// 1. 同槽编号：取第一个非空 mtuCode 即可（因为都一样） |
|
let mtnCode = ''; |
|
if (slotList && slotList.length > 0) { |
|
mtnCode = slotList[0].mtuCode || ''; |
|
} |
|
|
|
// 2. 设备使用情况：找第一个 equipmentCard.deviceCode 和 hangNum 都有值的项 |
|
let deviceCode = ''; |
|
let hangNum = ''; |
|
const validMtu = mtuList.find(item => item.equipmentCard?.deviceCode && item.hangNum != null); |
|
if (validMtu) { |
|
deviceCode = validMtu.equipmentCard.deviceCode; |
|
hangNum = validMtu.hangNum; |
|
} |
|
if (mtnCode != '' && deviceCode != '' && hangNum != '') { |
|
this.$ajax |
|
.get( |
|
`/qcProduceRun/getNewDataByParams?deviceCode=${deviceCode}&hangNum=${hangNum}&mtnCode=${mtnCode}` |
|
) |
|
.then(res => { |
|
if (this.$ifAjax(res)) { |
|
this.$message.success('数据同步成功！'); |
|
this.syncLoading = false; |
|
this.getMrAndWc(this.itemInfo.item, this.itemInfo.index); |
|
} |
|
}); |
|
} |
|
|
|
// TODO: 根据业务需要，将这些值用于后续操作（如保存、传参等） |
|
}, |
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
if (columnIndex === 0) { |
|
const _row = this.processDetails.itemList[rowIndex]; |
|
const _col = _row > 0 ? 1 : 0; |
|
return { |
|
rowspan: _row, |
|
colspan: _col, |
|
}; |
|
} |
|
}, |
|
// 获取背景渐变色 |
|
getProcessGradientColor(status) { |
|
const colors = this.statusColorMap[status] || this.statusColorMap[1]; |
|
return `linear-gradient(90deg, ${colors[0]} 0%, ${colors[1]} 100%)`; |
|
}, |
|
// 获取背景颜色 |
|
getProcessBgColor(status) { |
|
return this.statusColorMap[status]; |
|
}, |
|
// 获取内容垂直渐变色 |
|
getProcessVerticalGradient(status) { |
|
const color = this.statusColorMap[status]; |
|
// 将状态颜色的透明度降低到 0.3-0.5 |
|
|
|
const lightColor = color.replace(/rgba?\(([^)]+)\)/, (match, rgb) => { |
|
const values = rgb.split(',').map(v => parseFloat(v.trim())); |
|
if (values.length === 4) { |
|
// rgb 转 rgba，添加透明度 |
|
return `rgba(${values[0]}, ${values[1]}, ${values[2]}, 0.2)`; |
|
} |
|
return match; |
|
}); |
|
|
|
return `linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, ${lightColor} 100%)`; |
|
}, |
|
// 获取状态文本 |
|
getStatusText(status) { |
|
return this.statusTextMap[status] || '-'; |
|
}, |
|
getOrderDetail() { |
|
let query_ = { |
|
woId: this.rowItem.woId, |
|
partCode: this.rowItem.partCode, |
|
}; |
|
getOrderDetail(query_).then(res => { |
|
this.detailsForm = res.data.data; |
|
// 获取详情后，自动选中第一个状态为 2、3、4 的工序 |
|
this.$nextTick(() => { |
|
this.autoSelectProcess(); |
|
}); |
|
}); |
|
}, |
|
// 自动选中第一个状态为 2、3、4 的工序 |
|
autoSelectProcess() { |
|
if (!this.detailsForm.planList || this.detailsForm.planList.length === 0) { |
|
return; |
|
} |
|
|
|
// 定义需要选中的状态：2-已接收，3-已报工，4-检验中 |
|
const targetStatus = [2, 3, 4]; |
|
|
|
// 查找第一个符合条件的工序 |
|
const targetItem = this.detailsForm.planList.find(item => targetStatus.includes(item.status)); |
|
|
|
if (targetItem) { |
|
// 选中该工序 |
|
this.selectItem(targetItem); |
|
// this.messageAlter(targetItem); |
|
console.log('自动选中状态为' + targetItem.status + '的工序:', targetItem.ppsName); |
|
} else { |
|
// 如果没有符合条件的，选中第一个工序 |
|
const firstItem = this.detailsForm.planList[0]; |
|
if (firstItem) { |
|
this.selectItem(firstItem); |
|
console.log('未找到状态为 2、3、4 的工序，默认选中第一个:', firstItem.ppsName); |
|
} |
|
} |
|
}, |
|
selectItem(item) { |
|
this.selectedItemId = item.id; |
|
this.selectedItemInfo = item; |
|
this.processSelectLoading = true; |
|
// 触发工序详情获取 |
|
this.getProcessDetail(item); |
|
}, |
|
// 获取工序详情 |
|
async getProcessDetail() { |
|
let query_ = { |
|
wpId: this.selectedItemId, |
|
}; |
|
getPlanDetail(query_) |
|
.then(res => { |
|
this.processDetails = res.data.data; |
|
this.processSelectLoading = false; |
|
}) |
|
.catch(err => { |
|
this.processSelectLoading = false; |
|
}); |
|
}, |
|
// 双击零件跳转 |
|
openDocLink(info) { |
|
if (info.url != '') { |
|
window.open(info.url); |
|
} |
|
}, |
|
// 优先级样式 |
|
importanceColor(importance) { |
|
if (importance == 1) { |
|
return 'color: green'; |
|
} else if (importance == 2 || importance == 3) { |
|
return 'color: red'; |
|
} else { |
|
return 'color: rgb(251, 170, 8)'; |
|
} |
|
}, |
|
// 返工单号 |
|
openClient(qcReworkCode) { |
|
if (qcReworkCode) { |
|
this.reviewFormMess = { |
|
reworkCode: qcReworkCode, |
|
queryType: true, |
|
}; |
|
} |
|
this.reviewFormMessOpen = true; |
|
}, |
|
// 审理单号 |
|
openQcSheet(rsCode) { |
|
if (rsCode) { |
|
this.qcSheet = { |
|
rsCode: rsCode, |
|
queryType: true, |
|
}; |
|
} |
|
this.qcSheetOpen = true; |
|
}, |
|
closeDialog() { |
|
this.openShow = false; |
|
this.$emit('closeDialog'); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
i { |
|
font-style: normal; |
|
} |
|
.order-box { |
|
margin: 10px 0 10px 0; |
|
padding: 0 10px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
.order-item { |
|
width: 20%; |
|
margin-bottom: 10px; |
|
} |
|
// 展开按钮项样式 |
|
.expand-item { |
|
width: 100%; |
|
text-align: left; |
|
margin-top: 5px; |
|
} |
|
} |
|
.expand-btn { |
|
font-size: 13px; |
|
color: #409eff; |
|
padding: 5px 10px; |
|
|
|
&:hover { |
|
color: #66b1ff; |
|
} |
|
} |
|
:deep(.el-collapse-item__header) { |
|
background-color: rgb(246, 248, 252); |
|
border-bottom: 1px solid #ebeef5; |
|
height: 36px; |
|
font-size: 14px; |
|
} |
|
:deep(.el-collapse-item__title) { |
|
height: 36px; |
|
line-height: 36px; |
|
padding-left: 14px; |
|
} |
|
:deep(.el-collapse-item__content) { |
|
padding-bottom: 10px; |
|
} |
|
:deep(.el-collapse-item__wrap) { |
|
border-bottom: 0; |
|
} |
|
|
|
.scrollContent { |
|
height: 300px; |
|
width: 100%; |
|
overflow: hidden; |
|
position: relative; |
|
.el-scrollbar__wrap { |
|
height: 160px; |
|
margin-bottom: 0px !important; |
|
margin-right: -5px !important; |
|
|
|
ul { |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.box-right { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 80px; |
|
background: #fff; |
|
height: 158px; |
|
text-align: center; |
|
} |
|
|
|
.scroll-container { |
|
padding-right: 80px; |
|
} |
|
} |
|
|
|
.scrollBox { |
|
white-space: nowrap; |
|
position: absolute; |
|
width: 80%; |
|
margin-top: 20px; |
|
.right-content { |
|
width: 200px; |
|
height: 158px; |
|
display: inline-block; |
|
} |
|
& > ul { |
|
width: 200px; |
|
min-height: 207px; |
|
display: inline-block; |
|
border: 1px solid rgb(140, 140, 140); |
|
margin-left: 5px; |
|
& > li { |
|
width: 100%; |
|
padding: 0 10px; |
|
line-height: 25px; |
|
font-size: 12px; |
|
span { |
|
width: 100%; |
|
} |
|
.cardBoxText { |
|
cursor: pointer; |
|
display: block; |
|
width: 60px; |
|
word-break: keep-all; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
line-height: 30px; |
|
i { |
|
display: block; |
|
float: left; |
|
&:nth-child(2) { |
|
margin-top: 6px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.details-box { |
|
width: calc(100% - 28px); |
|
|
|
// |
|
// border:1px solid #ebeef5; |
|
|
|
margin: 0 auto 0; |
|
height: auto; |
|
// margin-left: 5px; |
|
.details-box-item { |
|
box-shadow: 0px 0px 6px 1px rgba(22, 44, 71, 0.16); |
|
padding: 5px 10px 20px 10px; |
|
border-radius: 6px 6px 6px 6px; |
|
margin-bottom: 15px; |
|
} |
|
} |
|
|
|
.production-process-item { |
|
border: 1px solid #284c89; |
|
width: 220px; |
|
min-height: 170px; |
|
display: inline-block; |
|
margin-left: 15px; |
|
.production-left-item-box { |
|
margin-top: 0 !important; |
|
} |
|
.production-process-title { |
|
display: flex; |
|
align-items: center; |
|
border-bottom: 1px solid rgb(140, 140, 140); |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
color: #fff; |
|
font-weight: 500; |
|
} |
|
|
|
.flex-row { |
|
// margin-bottom: 14px; |
|
display: flex; |
|
// justify-content: space-between; |
|
align-items: center; |
|
line-height: 25px; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
// margin-bottom: 16px; |
|
.icon-text { |
|
display: flex; |
|
align-items: center; |
|
gap: 6px; |
|
font-size: 12px !important; |
|
|
|
.el-icon { |
|
display: inline-flex; |
|
vertical-align: middle; |
|
font-size: 14px; |
|
margin-top: 2px; // 微调图标位置 |
|
} |
|
} |
|
} |
|
} |
|
/* 选中时的放大效果 */ |
|
.production-process-item.selected { |
|
transform: scale(1.05); /* 放大10% */ |
|
z-index: 10; |
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* */ |
|
transition: all 0.3s ease; |
|
} |
|
|
|
/* 确保容器允许溢出 */ |
|
.scrollBox { |
|
overflow: visible; /* 避免放大时被裁剪 */ |
|
position: relative; |
|
} |
|
|
|
/* 可选：未选中项降低透明度（突出选中项） */ |
|
.production-process-item:not(.selected) { |
|
opacity: 0.8; |
|
transition: opacity 0.3s ease; |
|
} |
|
|
|
:deep(.fixed-descriptions) { |
|
.el-descriptions__body { |
|
td { |
|
&:nth-child(odd) { |
|
// 标签列 |
|
width: 100px; |
|
min-width: 100px; |
|
} |
|
&:nth-child(even) { |
|
// 内容列 |
|
width: 150px; |
|
min-width: 150px; |
|
max-width: 150px; |
|
text-align: left; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
} |
|
} |
|
} |
|
.de-title { |
|
font-weight: bold; |
|
margin-bottom: 5px; |
|
} |
|
|
|
.expand-btn { |
|
font-size: 13px; |
|
color: #409eff; |
|
padding: 5px 10px; |
|
|
|
&:hover { |
|
color: #66b1ff; |
|
} |
|
} |
|
|
|
.order-box { |
|
margin: 10px 0 10px 0; |
|
padding: 0 10px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
.order-item { |
|
width: 20%; |
|
margin-bottom: 10px; |
|
} |
|
} |
|
</style>
|
|
|