| | |
| | | <span class="title-item" |
| | | >订单编号: |
| | | <span class="color_4efefa">{{ |
| | | taskData.order.orderId || "" |
| | | taskData.Order.orderId || "" |
| | | }}</span> |
| | | </span> |
| | | <span class="title-item" |
| | | >当前工序: |
| | | <span class="color_4efefa">{{ |
| | | taskData.procedure.procedure.procedureName || "" |
| | | taskData.Procedure.procedure.procedureName || "" |
| | | }}</span> |
| | | </span> |
| | | <span class="title-item" |
| | | >后道工序: <span class="color_4efefa">Q-22038</span> |
| | | >后道工序: <span class="color_4efefa"> |
| | | <!-- {{ |
| | | taskData.NextProcedure.procedure.procedureName || "--" |
| | | }} --> |
| | | </span> |
| | | </span> |
| | | <span class="title-item" |
| | | >工作人数: <span class="color_4efefa">6人</span> |
| | | >工作人数: <span class="color_4efefa">{{ taskData.Procedure.procedure.workers.length || 0}}人</span> |
| | | </span> |
| | | </div> |
| | | <div class="content"> |
| | |
| | | <div class="small_title">当前完成</div> |
| | | <div class="content_leftBttom"> |
| | | <dl> |
| | | <dd style="font-size: 26px; font-weight: 600">0m</dd> |
| | | <dd style="font-size: 26px; font-weight: 600">{{ finishNumber }}{{ taskData.Order.unit }}</dd> |
| | | </dl> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="small_title">正品生产</div> |
| | | <div class="content_leftBttom"> |
| | | <dl> |
| | | <dd style="font-size: 26px; font-weight: 600">400m</dd> |
| | | <dd style="font-size: 26px; font-weight: 600">{{ |
| | | taskData.Order.amount || 0 |
| | | }}{{ taskData.Order.unit }}</dd> |
| | | </dl> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="content_right"> |
| | | <el-descriptions :column="2" :colon="true"> |
| | | <el-descriptions-item label="产品名称">{{ |
| | | taskData.order.productName || "" |
| | | taskData.Order.productName || "" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="数量:">{{ |
| | | taskData.order.amount || "" |
| | | <el-descriptions-item label="数量">{{ |
| | | taskData.Order.amount || 0 |
| | | }}{{ taskData.Order.unit }}</el-descriptions-item> |
| | | <el-descriptions-item label="交货日期">{{ |
| | | taskData.Order.deliverDate || "" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="交货日期:">{{ |
| | | taskData.order.deliverDate || "" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="工时:"> |
| | | {{ taskData.order.deliverDate || "" }} |
| | | <el-descriptions-item label="工时"> |
| | | {{ taskData.Procedure.procedure.workHours || "" }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="起止时间">{{ |
| | | taskData.order.startTime || "" |
| | | }}</el-descriptions-item> |
| | | formatDate(taskData.Procedure.procedure.startTime) || "" |
| | | }} - {{ formatDate(taskData.Procedure.procedure.endTime) }}</el-descriptions-item> |
| | | <el-descriptions-item label="货物描述" |
| | | >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item |
| | | >{{ |
| | | taskData.Order.orderAttr || "" |
| | | }}</el-descriptions-item |
| | | > |
| | | <el-descriptions-item label="客户名称" |
| | | >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item |
| | | >{{ |
| | | taskData.Order.customer || "" |
| | | }}</el-descriptions-item |
| | | > |
| | | <el-descriptions-item label="参数要求" |
| | | >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item |
| | | >{{ |
| | | taskData.Order.parameter || "" |
| | | }}</el-descriptions-item |
| | | > |
| | | </el-descriptions> |
| | | <el-descriptions :column="1" :colon="true"> |
| | | <el-descriptions-item label="完成度" style="width: 100%"> |
| | | <!-- --> |
| | | <!--:text-format="format" --> |
| | | <el-progress |
| | | define-back-color="#007101" |
| | | color="#00CC66" |
| | | :text-inside="true" |
| | | :stroke-width="30" |
| | | :percentage="progress" |
| | | :text-format="format" |
| | | >完成率50%</el-progress |
| | | :percentage="parseInt(finishNumber/taskData.Order.amount)" |
| | | |
| | | ></el-progress |
| | | > |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="合格率" style="width: 100%"> |
| | | <!-- <el-descriptions-item label="合格率" style="width: 100%"> |
| | | <el-progress |
| | | define-back-color="#007101" |
| | | color="#00CC66" |
| | |
| | | :stroke-width="30" |
| | | :percentage="passrate" |
| | | ></el-progress> |
| | | </el-descriptions-item> |
| | | </el-descriptions-item> --> |
| | | </el-descriptions> |
| | | </div> |
| | | </div> |
| | |
| | | class="card-box" |
| | | ref="cardBox1" |
| | | v-if=" |
| | | taskData.procedure.procedure && |
| | | taskData.procedure.procedure.inputMaterials |
| | | taskData.Procedure.procedure && |
| | | taskData.Procedure.procedure.inputMaterials |
| | | " |
| | | > |
| | | <el-carousel-item |
| | |
| | | > |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft"> |
| | | 包号:G22122304 100吨{{ index }} |
| | | {{ list.materialId}} |
| | | </div> |
| | | </div> |
| | | <div class="card_top"> |
| | | <div> |
| | | 设备12<i |
| | | <!-- 设备12<i |
| | | style="font-size: 14px" |
| | | class="el-icon-right font-arrow-20" |
| | | ></i> |
| | | 设备13 |
| | | 设备13 --> |
| | | {{ list.materialName}} |
| | | </div> |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> |
| | | <div class="card_top2"> |
| | | <div style="line-height:45px;text-align:center;"> |
| | | {{ list.amount}} {{ list.unit }}</div> |
| | | <!-- <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> --> |
| | | </div> |
| | | </div> |
| | | </el-carousel-item> |
| | |
| | | </div> |
| | | <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i> |
| | | <div class="bottom_list"> |
| | | <div class="bottom-title">当前工序:前纺(QF)</div> |
| | | <div class="bottom-title">当前工序:{{ |
| | | taskData.Procedure.procedure.procedureName || "" |
| | | }}</div> |
| | | <el-carousel |
| | | direction="vertical" |
| | | height="calc(100% - 0px)" |
| | | :interval="500" |
| | | class="card-box" |
| | | ref="cardBox2" |
| | | v-if=" |
| | | taskData.procedure.procedure && |
| | | taskData.procedure.procedure.inputMaterials |
| | | taskData.Procedure.procedure && |
| | | procedureList |
| | | " |
| | | > |
| | | <el-carousel-item |
| | | :key="index" |
| | | v-for="(item, index) in inputMaterials" |
| | | v-for="(item, index) in procedureList" |
| | | > |
| | | <div class="card" |
| | | :key="index2" |
| | | v-for="(list, index2) in item"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_blue"> |
| | | 包号:G22122304 100吨 |
| | | <span style="float: right">6m/s</span> |
| | | <template v-if="list.name=='工序'"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_blue"> |
| | | {{ list.deviceName }} |
| | | <!-- <span style="float: right">6m/s</span> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="card_top-3"> |
| | | <span class="card-top-r-t">完成进度:50%</span> |
| | | <span class="card-top-r-b"> |
| | | <el-progress |
| | | define-back-color="#007101" |
| | | color="#00CC66" |
| | | :text-inside="true" |
| | | :stroke-width="10" |
| | | :percentage="50" |
| | | :show-text="false" |
| | | ></el-progress> |
| | | </span> |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <span class="card-top-r-t">完成进度:50%</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> |
| | | </div> |
| | | <div class="card_top-3"> |
| | | <span class="card-top-r-t">完成进度:{{ parseInt(finishNumber/taskData.Order.amount)||0 }}</span> |
| | | <span class="card-top-r-b"> |
| | | <el-progress |
| | | define-back-color="#007101" |
| | | color="#00CC66" |
| | | :text-inside="true" |
| | | :stroke-width="10" |
| | | :percentage="parseInt(finishNumber/taskData.Order.amount)" |
| | | :show-text="false" |
| | | ></el-progress> |
| | | </span> |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <div style="line-height:45px;text-align:center;"> |
| | | 生产中</div> |
| | | <!-- <span class="card-top-r-t">完成进度:50%</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> --> |
| | | </div> |
| | | </template> |
| | | <template v-else> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_blue"> |
| | | 工艺编号:{{ list.number }} |
| | | </div> |
| | | </div> |
| | | <div class="card_top-4"> |
| | | 工艺的具体信息请点击控制查看! |
| | | </div> |
| | | </template> |
| | | </div> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | <div class="card"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_blue"> |
| | | 包号:G22122304 100吨 |
| | | </div> |
| | | </div> |
| | | <div class="card_top-4"> |
| | | 此模型用于数值检测,精准检测相关生产数据。 |
| | | 此模型用于数值检测,精准检测相关生产数据 |
| | | </div> |
| | | </div> |
| | | |
| | | <p |
| | | style="font-size: 22px; margin-left: 12px; margin-top: 50px" |
| | | ></p> |
| | |
| | | ref="cardBox3" |
| | | class="card-box" |
| | | v-if=" |
| | | taskData.procedure.procedure && |
| | | taskData.procedure.procedure.outputMaterials |
| | | taskData.Procedure.procedure && |
| | | taskData.Procedure.procedure.outputMaterials |
| | | " |
| | | > |
| | | <el-carousel-item |
| | |
| | | class="card" |
| | | > |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft">包号:G22122304 100吨</div> |
| | | <div class="card_contentLeft">{{ list.materialId}}</div> |
| | | </div> |
| | | <div class="card_top"> |
| | | <div> |
| | | 设备12<i |
| | | {{ list.materialName}} |
| | | <!-- 设备12<i |
| | | style="font-size: 14px" |
| | | class="el-icon-right font-arrow-20" |
| | | ></i> |
| | | 设备13 |
| | | 设备13 --> |
| | | </div> |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> |
| | | <div class="card_top2"> |
| | | <div style="line-height:45px;text-align:center;"> |
| | | {{ list.amount}} {{ list.unit }}</div> |
| | | <!-- <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> --> |
| | | |
| | | </div> |
| | | <div class="card-info-box">预计10分钟送达</div> |
| | | <!-- <div class="card-info-box">预计10分钟送达</div> --> |
| | | </div> |
| | | <div class="card"> |
| | | <!-- <div class="card"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_green"> |
| | | 包号:G22122304 100吨 |
| | |
| | | <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | |
| | | </div> |
| | | <div class="right_dutyLst"> |
| | | <div class="right-small-title">当前值班</div> |
| | | <dl class="right-small-person"> |
| | | <div class='right-person-box'> |
| | | <dl class="right-small-person" v-for="(item,index) in taskData.Procedure.procedure.workers" :key="index"> |
| | | <dt> |
| | | <el-avatar |
| | | <!-- <el-avatar |
| | | class="img-class" |
| | | src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" |
| | | ></el-avatar> |
| | | ></el-avatar> --> |
| | | <i class="el-icon-s-custom color_green" style='margin:10px;font-size:40px; '/> |
| | | </dt> |
| | | <span |
| | | style="font-size: 20px; font-weight: 600; margin-right: 10px" |
| | | >{{ taskData.procedure.procedure.workers.workerName || "" }}</span |
| | | >{{ item.workerName || "" }}</span |
| | | > |
| | | <span style="color: #666">{{ |
| | | taskData.procedure.procedure.workers.phoneNum || "" |
| | | item.phoneNum || "" |
| | | }}</span> |
| | | </dl> |
| | | <div |
| | | </div> |
| | | <!-- <div |
| | | style=" |
| | | width: 100%; |
| | | font-size: 18px; |
| | |
| | | line-height: 50px; |
| | | " |
| | | > |
| | | 编号:{{ taskData.procedure.procedure.workers.workerId || "" }} |
| | | </div> |
| | | 编号:{{ taskData.Procedure.procedure.workers.workerId || "" }} |
| | | </div> --> |
| | | <div class="right-small-btn"> |
| | | <el-button type="primary"> 打印</el-button> |
| | | <el-popover |
| | |
| | | </div> |
| | | </template> |
| | | <!-- 控制的弹框 --> |
| | | <AddControl ref="control" :id="taskData.procedure.id" /> |
| | | <AddControl ref="control" :id="taskData.Procedure.ID" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | finishTask, |
| | | getMiniDictList, |
| | | saveMiniDict, |
| | | startTask, |
| | | getProgress, |
| | | } from "@/api/home/index"; // 产线 |
| | | import Card from "@/components/Card.vue"; |
| | | import Knowledge from "../components/Knowledge.vue"; |
| | |
| | | progress: 70, //进度 |
| | | passrate: 30, //合格率 |
| | | production: 25, //生产中 |
| | | finishNumber:0, |
| | | // 右侧完成 |
| | | finishShow: false, |
| | | inputMaterials: [], |
| | | outputMaterials:[], |
| | | procedureList:[], |
| | | taskData: { |
| | | order: { |
| | | Order: { |
| | | amount: "", |
| | | customer: "", |
| | | deliverDate: "", |
| | |
| | | startTime: "", |
| | | unit: "", |
| | | }, |
| | | procedure: { |
| | | Procedure: { |
| | | id: 1, |
| | | procedure: { |
| | | deviceId: "", |
| | | endTime: "", |
| | | inputMaterials: [ |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | ], |
| | | outputMaterials: [ |
| | | { |
| | | amount: "", |
| | | materialId: "", |
| | | materialName: "", |
| | | unit: "", |
| | | }, |
| | | ], |
| | | inputMaterials: [], |
| | | outputMaterials: [], |
| | | procedureId: "", |
| | | procedureName: "", |
| | | startTime: "", |
| | |
| | | // this.production = this.getRandomNumber(1, 100); |
| | | // }, 3000); |
| | | this.getTaskInfo(); |
| | | setInterval(() => { |
| | | this.getProgressInfo() |
| | | }, 60000); |
| | | }, |
| | | |
| | | methods: { |
| | | getProgressInfo(){ |
| | | getProgress().then(res=>{ |
| | | if(res.code==200){ |
| | | |
| | | } |
| | | }) |
| | | }, |
| | | getDateObj (ms) { |
| | | const now = ms ? new Date(ms) : new Date() |
| | | const y = now.getFullYear() |
| | | let m = now.getMonth() + 1 |
| | | m = m > 9 ? m : '0' + m |
| | | let d = now.getDate() |
| | | d = d > 9 ? d : '0' + d |
| | | return { y, m, d } |
| | | }, |
| | | // 格式化时间 ==> yyyy-mm-dd |
| | | formatDate (value, str) { |
| | | if (value) { |
| | | const dateObj = this.getDateObj(value) |
| | | return '' + dateObj.y + '-' + dateObj.m + '-' + dateObj.d |
| | | } else { |
| | | return '' |
| | | } |
| | | }, |
| | | setInterCard(value, name) { |
| | | let height = 200; |
| | | let num = 1; |
| | |
| | | num = Math.floor(height / 80); |
| | | } |
| | | let inputMaterials = JSON.parse( |
| | | JSON.stringify(this.taskData.procedure.procedure[value]) |
| | | JSON.stringify(this.taskData.Procedure.procedure[value]) |
| | | ); |
| | | let newDataList = []; |
| | | let current = 0; |
| | |
| | | getTaskInfo() { |
| | | getTaskInfo().then((res) => { |
| | | if (res.code == 200) { |
| | | this.taskData=res.data; |
| | | this.procedureList.push([{ |
| | | name:'工序', |
| | | ...this.taskData.Procedure.procedure |
| | | }]) |
| | | if(this.taskData.Procedure.ID){ |
| | | startTask({id:this.taskData.Procedure.ID}).then(res=>{ |
| | | if(res.code==200){ |
| | | // res.data.number |
| | | this.procedureList[0].push({number:res.data.number,name:'工艺'}) |
| | | } |
| | | }) |
| | | } |
| | | console.log(this.procedureList,'===1111procedureList') |
| | | // setTimeout(() => { |
| | | this.setInterCard("inputMaterials", "cardBox1"); |
| | | // this.setInterCard('procedureList','cardBox2') |
| | | this.setInterCard('outputMaterials','cardBox3') |
| | | // }, 5000); |
| | | } |
| | |
| | | }, |
| | | // 右侧完成 |
| | | finishClick() { |
| | | finishTask({ id: this.taskData.procedure.id }).then((res) => { |
| | | finishTask({ id: this.taskData.Procedure.ID }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.finishShow=false; |
| | | this.getTaskInfo() |
| | | this.$message.success("操作成功!"); |
| | | |
| | | } |
| | | }); |
| | | }, |
| | |
| | | background: #00cc66; |
| | | margin-top: 10px; |
| | | padding: 5px 10px; |
| | | position:relative; |
| | | .right-small-title { |
| | | width: auto; |
| | | padding: 5px; |
| | |
| | | border-radius: 8px; |
| | | background: #007101; |
| | | } |
| | | .right-person-box{ |
| | | width:100%; |
| | | height:calc(100% - 100px); |
| | | overflow:auto; |
| | | margin-top:20px; |
| | | } |
| | | .right-small-person { |
| | | width: 100%; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | margin-top: 50px; |
| | | margin-bottom:10px; |
| | | border-radius: 10px; |
| | | background: #fff; |
| | | color: #333; |
| | | |
| | | |
| | | dt { |
| | | float: left; |
| | | padding: 5px; |
| | | |
| | | margin-right: 10px; |
| | | .img-class { |
| | | height: 50px; |
| | | padding: 0 !important; |
| | | margin: 5px !important; |
| | | } |
| | | } |
| | | span { |
| | |
| | | .right-small-btn { |
| | | margin-top: 10px; |
| | | width: 100%; |
| | | position:absolute; |
| | | bottom:10px; |
| | | left:0; |
| | | overflow: hidden; |
| | | .el-button--primary { |
| | | width: 46%; |