| | |
| | | <template> |
| | | <div> |
| | | <el-alert |
| | | <el-alert |
| | | v-if="!operationTasks || operationTasks.length == 0" |
| | | title="还没有工单下发到此机台!" |
| | | type="warning" |
| | |
| | | > |
| | | </el-alert> |
| | | <el-card |
| | | v-for="(item, index) in operationTasks" |
| | | @click.native="setCheckFlag(item)" |
| | | shadow="hover" |
| | | :key="index" |
| | | :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']" |
| | | v-for="(item, index) in operationTasks" |
| | | @click.native="setCheckFlag(item)" |
| | | shadow="hover" |
| | | :key="index" |
| | | :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']" |
| | | > |
| | | <!-- <img class="selectedImg" /> --> |
| | | <div class="header" > |
| | | <div>工单号:{{ item.taskNo }}</div> |
| | | <!-- <div>计划号:{{ item.mpsNo }}</div> --> |
| | | <div |
| | | :class="[ |
| | | 'status-change-div', |
| | | item.checkFlag ? 'card-checked-status' : 'card-status' |
| | | ]" |
| | | > |
| | | <img class="selectedImg" src="/img/workbench/icon_selected.png" /> |
| | | <div class="header"> |
| | | <div>工单号:{{ item.taskNo }}</div> |
| | | <!-- <div>计划号:{{ item.mpsNo }}</div> --> |
| | | <div |
| | | :class="[ |
| | | 'status-change-div', |
| | | item.checkFlag ? 'card-checked-status' : 'card-status' |
| | | ]" |
| | | > |
| | | <el-select |
| | | v-if="permissions.product_operationTask_state" |
| | | v-model="item.statusAction" |
| | | placeholder="功能菜单" |
| | | @change=" |
| | | changeTaskState(item.statusAction, item.status, item.id, item) |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="ele in statusActions" |
| | | :key="ele.value" |
| | | :label="ele.label" |
| | | :value="ele.value" |
| | | :disabled="ele.disabled" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="body"> |
| | | <div class="row"> |
| | | <div class="l">零件名称:</div> |
| | | <div class="r">{{ item.partName }}</div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="l">零件号:</div> |
| | | <div class="r">{{ item.partNo }}</div> |
| | | </div> |
| | | <!-- <div class="row"> |
| | | <div class="l">成品:</div> |
| | | <div class="r">{{ item.productName }}</div> |
| | | </div> --> |
| | | <div class="row"> |
| | | <div class="l">计划完成时间:</div> |
| | | <div class="r">{{ item.planFinishDay }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-progress |
| | | class="task-progress" |
| | | :text-inside="true" |
| | | :stroke-width="20" |
| | | :percentage=" |
| | | Number((item.completedQuantity / item.plannedQuantity).toFixed(2)) * |
| | | 100 > |
| | | 100 |
| | | ? 100 |
| | | : Number( |
| | | (item.completedQuantity / item.plannedQuantity).toFixed(2) |
| | | ) * 100 |
| | | <el-select |
| | | v-if="permissions.product_operationTask_state" |
| | | v-model="item.statusAction" |
| | | placeholder="功能菜单" |
| | | @change=" |
| | | changeTaskState(item.statusAction, item.status, item.id, item) |
| | | " |
| | | :format="formatPercentage(item.completedQuantity, item.plannedQuantity)" |
| | | ></el-progress> |
| | | </el-card> |
| | | > |
| | | <el-option |
| | | v-for="ele in statusActions" |
| | | :key="ele.value" |
| | | :label="ele.label" |
| | | :value="ele.value" |
| | | :disabled="ele.disabled" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="body"> |
| | | <div class="row"> |
| | | <div class="l">零件名称:</div> |
| | | <div class="r">{{ item.partName }}</div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="l">零件号:</div> |
| | | <div class="r">{{ item.partNo }}</div> |
| | | </div> |
| | | <!-- <div class="row"> |
| | | <div class="l">成品:</div> |
| | | <div class="r">{{ item.productName }}</div> |
| | | </div> --> |
| | | <div class="row"> |
| | | <div class="l">计划完成时间:</div> |
| | | <div class="r">{{ item.planFinishDay }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-progress |
| | | class="task-progress" |
| | | :text-inside="true" |
| | | :stroke-width="20" |
| | | :percentage=" |
| | | Number((item.completedQuantity / item.plannedQuantity).toFixed(2)) * |
| | | 100 > |
| | | 100 |
| | | ? 100 |
| | | : Number( |
| | | (item.completedQuantity / item.plannedQuantity).toFixed(2) |
| | | ) * 100 |
| | | " |
| | | :format="formatPercentage(item.completedQuantity, item.plannedQuantity)" |
| | | ></el-progress> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | <style lang="scss" scoped> |
| | |
| | | border-radius: 12px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | background:none; |
| | | box-shadow: 1px 2px 24px 1px rgba(4, 0, 0, 0.14); |
| | | |
| | | & + .task-item { |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | &.card-checked { |
| | | // color: white; |
| | | background-image: -webkit-linear-gradient( |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | |
| | | // setCheckFlag(item) { |
| | | // this.$nextTick(() => { |
| | | // this.changeBackgroundColor(item.planFinishDay); |
| | | // }); |
| | | // }, |
| | | // changeBackgroundColor(dateString) { |
| | | // const date = new Date(dateString); |
| | | // const threeDaysAgo = new Date(); |
| | | // threeDaysAgo.setDate(threeDaysAgo.getDate() - 3); |
| | | // const oneDayAgo = new Date(); |
| | | // oneDayAgo.setDate(oneDayAgo.getDate() - 1); |
| | | |
| | | // if (date <= threeDaysAgo) { |
| | | // document.body.style.backgroundColor = "blue"; |
| | | // } else if (date <= oneDayAgo) { |
| | | // document.body.style.backgroundColor = "yellow"; |
| | | // } else { |
| | | // document.body.style.backgroundColor = "red"; |
| | | // } |
| | | // }, |
| | | |
| | | // 点击工单,选中工单 |
| | | setCheckFlag(item) { |
| | | if (item.checkFlag) { |