| | |
| | | <div class="kb_content"> |
| | | <div class="kb_left"> |
| | | <!-- 1--> |
| | | <div class="kb_left_top_title01"> |
| | | <div class="kb_left_top_title01 kb_title_text"> |
| | | <!-- <div class="PG01" />--> |
| | | <!-- <svg-icon icon-class="sccx" />--> |
| | | 生产产线: |
| | | 产线加工中任务 |
| | | </div> |
| | | |
| | | <div class="kb_left_top kb_pd10"> |
| | | <!-- {{ lineContent01 }}--> |
| | | |
| | | <div class="kb_left_top_block"> |
| | | <div class="kb_block01 kb_pd10"> |
| | | <div> |
| | | <div>产线名称:{{ lineContent01.linename }}</div> |
| | | <div class="kb_mt10">产线总量:{{ lineContent01.children!==undefined?lineContent01.lineworkcont:'' }}</div> |
| | | <div class="kb_mt10">产线总量:{{ |
| | | lineContent01.children !== undefined ? lineContent01.lineworkcont : '' |
| | | }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <!-- <div>{{ lineContent01.linename }}</div>--> |
| | |
| | | </div> |
| | | <div class="kb_block02 kb_pd10"> |
| | | <div> |
| | | <div>销售单号:{{ lineContent01.children!==undefined?lineContent01.children.saleordercode:'' }}</div> |
| | | <div class="kb_mt5">加工单号:{{ lineContent01.children!==undefined?lineContent01.children.workcode:'' }}</div> |
| | | <div class="kb_mt5">产品名称:{{ lineContent01.children!==undefined?lineContent01.children.partname:'' }}</div> |
| | | <div class="kb_mt5">任务数量:{{ lineContent01.children!==undefined?parseFloat(lineContent01.children.qty):'' }}</div> |
| | | <div>销售单号:{{ lineContent01.children !== undefined ? lineContent01.children.saleordercode : '' }}</div> |
| | | <div class="kb_mt5"> |
| | | 加工单号:{{ lineContent01.children !== undefined ? lineContent01.children.workcode : '' }} |
| | | </div> |
| | | <div class="kb_mt5"> |
| | | 产品名称:{{ lineContent01.children !== undefined ? lineContent01.children.partname : '' }} |
| | | </div> |
| | | |
| | | <div v-if="lineContent01.children&&lineContent01.children.length===0" class="kb_mt5"> |
| | | 任务数量: |
| | | </div> |
| | | <div v-else class="kb_mt5"> |
| | | 任务数量:{{ lineContent01.children? parseFloat(lineContent01.children.qty) : '' }} |
| | | </div> |
| | | </div> |
| | | <div v-if="lineContent01.children!==undefined"> |
| | | <!-- <div>{{ lineContent01.children.saleordercode }}</div>--> |
| | | <!-- <div class="kb_mt5 ">{{ lineContent01.children.workcode }}</div>--> |
| | | <!-- <div class="kb_mt5">{{ lineContent01.children.partname }}</div>--> |
| | | <!-- <div v-if="parseFloat(lineContent01.children.qty)!==0" class="kb_mt5">--> |
| | | <!-- {{ parseFloat(lineContent01.children.qty) }}--> |
| | | <!-- </div>--> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="kb_block03 kb_pd10 "> |
| | | <div v-if="lineContent01.children!==undefined" class="flex_s_c"> |
| | |
| | | <div |
| | | v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | | class="circle" |
| | | style="background-color: red;" |
| | | style="background-color: blue;" |
| | | /> |
| | | <div |
| | | v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | |
| | | <div class="kb_block01 kb_pd10"> |
| | | <div> |
| | | <div>产线名称:{{ lineContent02.linename }}</div> |
| | | <div class="kb_mt10">产线总量:{{ lineContent02.children!==undefined?lineContent02.lineworkcont:'' }}</div> |
| | | <div class="kb_mt10">产线总量:{{ |
| | | lineContent02.children !== undefined ? lineContent02.lineworkcont : '' |
| | | }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <!-- <div>{{ lineContent02.linename }}</div>--> |
| | |
| | | </div> |
| | | <div class="kb_block02 kb_pd10"> |
| | | <div> |
| | | <div>销售单号:{{ lineContent02.children!==undefined?lineContent02.children.saleordercode:'' }}</div> |
| | | <div class="kb_mt5">加工单号:{{ lineContent02.children!==undefined?lineContent02.children.workcode:'' }}</div> |
| | | <div class="kb_mt5">产品名称:{{ lineContent02.children!==undefined?lineContent02.children.partname:'' }}</div> |
| | | <div class="kb_mt5">任务数量:{{ lineContent02.children!==undefined?parseFloat(lineContent02.children.qty):'' }}</div> |
| | | <div>销售单号:{{ lineContent02.children !== undefined ? lineContent02.children.saleordercode : '' }}</div> |
| | | <div class="kb_mt5"> |
| | | 加工单号:{{ lineContent02.children !== undefined ? lineContent02.children.workcode : '' }} |
| | | </div> |
| | | <div class="kb_mt5"> |
| | | 产品名称:{{ lineContent02.children !== undefined ? lineContent02.children.partname : '' }} |
| | | </div> |
| | | <div v-if="lineContent02.children&&lineContent02.children.length===0" class="kb_mt5"> |
| | | 任务数量: |
| | | </div> |
| | | <div v-else class="kb_mt5"> |
| | | 任务数量:{{ lineContent02.children ? parseFloat(lineContent02.children.qty) : '' }} |
| | | </div> |
| | | </div> |
| | | <div v-if="lineContent02.children!==undefined"> |
| | | <!-- <div>{{ lineContent02.children.saleordercode }}</div>--> |
| | | <!-- <div class="kb_mt5 ">{{ lineContent02.children.workcode }}</div>--> |
| | | <!-- <div class="kb_mt5">{{ lineContent02.children.partname }}</div>--> |
| | | <!-- <div v-if="parseFloat(lineContent02.children.qty)!==0" class="kb_mt5">--> |
| | | <!-- {{ parseFloat(lineContent02.children.qty) }}--> |
| | | <!-- </div>--> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="kb_block03 kb_pd10 "> |
| | | <div v-if="lineContent02.children!==undefined" class="flex_s_c"> |
| | |
| | | <div |
| | | v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | | class="circle" |
| | | style="background-color: red;" |
| | | style="background-color: blue;" |
| | | /> |
| | | <div |
| | | v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | |
| | | <div class="kb_block01 kb_pd10"> |
| | | <div> |
| | | <div>产线名称:{{ lineContent03.linename }}</div> |
| | | <div class="kb_mt10">产线总量:{{ lineContent03.children!==undefined?lineContent03.lineworkcont:'' }}</div> |
| | | <div class="kb_mt10">产线总量:{{ |
| | | lineContent03.children !== undefined ? lineContent03.lineworkcont : '' |
| | | }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <!-- <div>{{ lineContent03.linename }}</div>--> |
| | |
| | | </div> |
| | | <div class="kb_block02 kb_pd10"> |
| | | <div> |
| | | <div>销售单号:{{ lineContent03.children!==undefined?lineContent03.children.saleordercode:'' }}</div> |
| | | <div class="kb_mt5">加工单号:{{ lineContent03.children!==undefined?lineContent03.children.workcode:'' }}</div> |
| | | <div class="kb_mt5">产品名称:{{ lineContent03.children!==undefined?lineContent03.children.partname:'' }}</div> |
| | | <div class="kb_mt5">任务数量:{{ lineContent03.children!==undefined?parseFloat(lineContent03.children.qty):'' }}</div> |
| | | <div>销售单号:{{ lineContent03.children !== undefined ? lineContent03.children.saleordercode : '' }}</div> |
| | | <div class="kb_mt5"> |
| | | 加工单号:{{ lineContent03.children !== undefined ? lineContent03.children.workcode : '' }} |
| | | </div> |
| | | <div class="kb_mt5"> |
| | | 产品名称:{{ lineContent03.children !== undefined ? lineContent03.children.partname : '' }} |
| | | </div> |
| | | <div v-if="lineContent03.children&&lineContent03.children.length===0" class="kb_mt5"> |
| | | 任务数量: |
| | | </div> |
| | | <div v-else class="kb_mt5"> |
| | | 任务数量:{{ lineContent03.children ? parseFloat(lineContent03.children.qty) : '' }} |
| | | </div> |
| | | </div> |
| | | <div v-if="lineContent03.children!==undefined"> |
| | | <!-- <div>{{ lineContent03.children.saleordercode }}</div>--> |
| | | <!-- <div class="kb_mt5 ">{{ lineContent03.children.workcode }}</div>--> |
| | | <!-- <div class="kb_mt5">{{ lineContent03.children.partname }}</div>--> |
| | | <!-- <div v-if="parseFloat(lineContent03.children.qty)!==0" class="kb_mt5">--> |
| | | <!-- {{ parseFloat(lineContent03.children.qty) }}--> |
| | | <!-- </div>--> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="kb_block03 kb_pd10 "> |
| | | <div v-if="lineContent03.children!==undefined" class="flex_s_c"> |
| | |
| | | <div |
| | | v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | | class="circle" |
| | | style="background-color: red;" |
| | | style="background-color: blue;" |
| | | /> |
| | | <div |
| | | v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | |
| | | <div class="kb_block01 kb_pd10"> |
| | | <div> |
| | | <div>产线名称:{{ lineContent04.linename }}</div> |
| | | <div class="kb_mt10">产线总量:{{ lineContent04.children!==undefined?lineContent04.lineworkcont:'' }}</div> |
| | | <div class="kb_mt10">产线总量:{{ |
| | | lineContent04.children !== undefined ? lineContent04.lineworkcont : '' |
| | | }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <!-- <div>{{ lineContent04.linename }}</div>--> |
| | |
| | | </div> |
| | | <div class="kb_block02 kb_pd10"> |
| | | <div> |
| | | <div>销售单号:{{ lineContent04.children!==undefined?lineContent04.children.saleordercode:'' }}</div> |
| | | <div class="kb_mt5">加工单号:{{ lineContent04.children!==undefined?lineContent04.children.workcode:'' }}</div> |
| | | <div class="kb_mt5">产品名称:{{ lineContent04.children!==undefined?lineContent04.children.partname:'' }}</div> |
| | | <div class="kb_mt5">任务数量:{{ lineContent04.children!==undefined?parseFloat(lineContent04.children.qty):'' }}</div> |
| | | <div>销售单号:{{ lineContent04.children !== undefined ? lineContent04.children.saleordercode : '' }}</div> |
| | | <div class="kb_mt5"> |
| | | 加工单号:{{ lineContent04.children !== undefined ? lineContent04.children.workcode : '' }} |
| | | </div> |
| | | <div class="kb_mt5"> |
| | | 产品名称:{{ lineContent04.children !== undefined ? lineContent04.children.partname : '' }} |
| | | </div> |
| | | <div v-if="lineContent04.children&&lineContent04.children.length===0" class="kb_mt5"> |
| | | 任务数量: |
| | | </div> |
| | | <div v-else class="kb_mt5"> |
| | | 任务数量:{{ lineContent04.children ? parseFloat(lineContent04.children.qty) : '' }} |
| | | </div> |
| | | </div> |
| | | <div v-if="lineContent04.children!==undefined"> |
| | | <!-- <div>{{ lineContent04.children.saleordercode }}</div>--> |
| | | <!-- <div class="kb_mt5 ">{{ lineContent04.children.workcode }}</div>--> |
| | | <!-- <div class="kb_mt5">{{ lineContent04.children.partname }}</div>--> |
| | | <!-- <div v-if="parseFloat(lineContent04.children.qty)!==0" class="kb_mt5">--> |
| | | <!-- {{ parseFloat(lineContent04.children.qty) }}--> |
| | | <!-- </div>--> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="kb_block03 kb_pd10 "> |
| | | <div v-if="lineContent04.children!==undefined" class="flex_s_c"> |
| | |
| | | <div |
| | | v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | | class="circle" |
| | | style="background-color: red;" |
| | | style="background-color: blue;" |
| | | /> |
| | | <div |
| | | v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')" |
| | |
| | | <!-- 2--> |
| | | <div class="kb_left_bottom kb_pd10"> |
| | | <div class="kb_left_bottom_content"> |
| | | <div class="content_head">在制订单:</div> |
| | | <div class="content_head kb_title_text">产线加工任务</div> |
| | | <div class="content_body"> |
| | | <el-table |
| | | ref="tableData" |
| | |
| | | <el-table-column |
| | | prop="RowNum" |
| | | label="序号" |
| | | width="53" |
| | | width="40" |
| | | /> |
| | | <el-table-column |
| | | prop="status" |
| | | label="加工状态" |
| | | width="85" |
| | | width="70" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.status==='ALLO'">已派发</div> |
| | |
| | | <el-table-column |
| | | prop="lm_date" |
| | | label="派发时间" |
| | | width="86" |
| | | width="95" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ row.lm_date.substring(5, 10) }}</div> |
| | | <div>{{ row.lm_date.substring(0, 10) }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="saleOrderCode" |
| | | label="销售订单号" |
| | | width="150" |
| | | /> |
| | | width="158" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="wo_code" |
| | | label="加工单号" |
| | | width="207" |
| | | width="170" |
| | | /> |
| | | <el-table-column |
| | | prop="partname" |
| | | label="产品名称" |
| | | width="105" |
| | | width="145" |
| | | /> |
| | | <el-table-column |
| | | prop="partspec" |
| | | label="规格" |
| | | width="60" |
| | | /> |
| | | width="130" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="单位" |
| | | width="60" |
| | | width="50" |
| | | /> |
| | | <el-table-column |
| | | prop="plan_qty" |
| | | label="任务数量" |
| | | width="90" |
| | | width="70" |
| | | /> |
| | | <el-table-column |
| | | prop="good_qty" |
| | | label="完工数量" |
| | | width="90" |
| | | width="70" |
| | | /> |
| | | <el-table-column |
| | | prop="ng_qty" |
| | | label="不良数量" |
| | | width="90" |
| | | width="70" |
| | | /> |
| | | <el-table-column |
| | | prop="wcl" |
| | | label="完成率" |
| | | width="70" |
| | | width="50" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ parseFloat((row.good_qty / row.plan_qty).toFixed(2)) }}%</div> |
| | | <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="planenddate" |
| | | label="预计开始" |
| | | width="86" |
| | | width="95" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ row.planenddate.substring(5, 10) }}</div> |
| | | <div>{{ row.planenddate.substring(0, 10) }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="planstartdate" |
| | | label="预计结束" |
| | | width="86" |
| | | width="105" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ row.planstartdate.substring(5, 10) }}</div> |
| | | <div>{{ row.planstartdate.substring(0, 10) }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | <div class="kb_right kb_pd10"> |
| | | <div class="kb_right_top kb_pd10"> |
| | | <div class="kb_right_top_content"> |
| | | <div class="content_head">当日车间产线产品数量排行:</div> |
| | | <div class="content_head kb_title_text">当日完工产品数量排行</div> |
| | | <div class="content_body"> |
| | | <el-table |
| | | ref="tableDataRank" |
| | |
| | | /> |
| | | <el-table-column |
| | | prop="wkshname" |
| | | label="车间" |
| | | label="车间(供方)" |
| | | width="120" |
| | | /> |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="linename" |
| | | label="产线" |
| | |
| | | </div> |
| | | </div> |
| | | <div class="kb_right_bottom kb_pd10"> |
| | | <div class="kb_right_bottom_content_title"> |
| | | 一周内Top5不良: |
| | | <div class="kb_right_bottom_content_title kb_title_text"> |
| | | 一周不良Top5 |
| | | </div> |
| | | <div class="kb_right_bottom_content"> |
| | | <div id="bar02" style="width: 100%;height:100%" /> |
| | |
| | | |
| | | leftTopData: [], |
| | | tableData: [], |
| | | tableDataRank: [// 排行 |
| | | // { xh: 'NO.1', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.2', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.3', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.4', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.5', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.6', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.7', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.8', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.9', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.10', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.11', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.12', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.13', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.14', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.15', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.16', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.17', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.18', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.19', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }, |
| | | // { xh: 'NO.20', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 } |
| | | // |
| | | ] |
| | | tableDataRank: [], |
| | | lineCodeArr: [] |
| | | |
| | | } |
| | | }, |
| | |
| | | |
| | | getLineSearchTopLeftData() { |
| | | this.lineArr.forEach((item, index) => { |
| | | // if (index === 0) { |
| | | this.handleEveryLine(item, index) |
| | | // } |
| | | if (index <= 3) { |
| | | this.handleEveryLine(item, index) |
| | | this.lineCodeArr.push(item.code) |
| | | } |
| | | }) |
| | | }, |
| | | // 处理每一条产线 |
| | | async handleEveryLine(item, index) { |
| | | const { data: res } = await LineSearchTopLeftData([item]) |
| | | console.log(res, 8999) |
| | | const res = await LineSearchTopLeftData([item]) |
| | | |
| | | let res1, res2, res3, res4 |
| | | if (res.data[0].linecode === this.lineCodeArr[0]) { |
| | | res1 = res |
| | | } |
| | | if (res.data[0].linecode === this.lineCodeArr[1]) { |
| | | res2 = res |
| | | } |
| | | if (res.data[0].linecode === this.lineCodeArr[2]) { |
| | | res3 = res |
| | | } |
| | | if (res.data[0].linecode === this.lineCodeArr[3]) { |
| | | res4 = res |
| | | } |
| | | |
| | | let flag1 = true |
| | | let flag2 = true |
| | | let flag3 = true |
| | |
| | | let count = 0 |
| | | if (flag1) { |
| | | this.lineContent01 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res1.data[0].linename, |
| | | lineworkcont: res1.data[0].lineworkcont, |
| | | children: res1.data[0].children ? res.data[0].children[count] : [] |
| | | } |
| | | flag1 = false |
| | | } |
| | | |
| | | setInterval(() => { |
| | | if (count > 0) { |
| | | this.lineContent01 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res1.data[0].linename, |
| | | lineworkcont: res1.data[0].lineworkcont, |
| | | children: res1.data[0].children ? res1.data[0].children[count] : [] |
| | | } |
| | | } |
| | | // count++ |
| | | if (res[0].children.length === count++) { |
| | | count = 0 |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | this.lineContent01 = { |
| | | linename: res.data[0].linename, |
| | | lineworkcont: res.data[0].lineworkcont, |
| | | children: res.data[0].children[count] |
| | | } |
| | | }) |
| | | |
| | | // this.handleEveryLine(item, index) |
| | | console.log(res1.data[0].children === null, 999) |
| | | if (res1.data[0].children === null) { |
| | | res1.data[0].children = [] |
| | | } |
| | | }, 1000 * 6) |
| | | if (this.lineContent01.children === undefined || res1.data[0].children.length >= 0) { |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | res1 = res |
| | | }) |
| | | } |
| | | if (res1.data[0].children.length === count++) { |
| | | count = 0 |
| | | this.lineContent01 = { |
| | | linename: res1.data[0].linename, |
| | | lineworkcont: res1.data[0].lineworkcont, |
| | | children: res1.data[0].children ? res1.data[0].children[count] : [] |
| | | } |
| | | } |
| | | }, 1000 * 3) |
| | | } else if (index === 1) { |
| | | let count = 0 |
| | | if (flag2) { |
| | | this.lineContent02 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res2.data[0].linename, |
| | | lineworkcont: res2.data[0].lineworkcont, |
| | | children: res2.data[0].children ? res2.data[0].children[count] : [] |
| | | } |
| | | flag2 = false |
| | | } |
| | | |
| | | setInterval(() => { |
| | | if (count > 0) { |
| | | this.lineContent02 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res2.data[0].linename, |
| | | lineworkcont: res2.data[0].lineworkcont, |
| | | children: res2.data[0].children ? res2.data[0].children[count] : [] |
| | | } |
| | | } |
| | | |
| | | // count++ |
| | | console.log(this.lineContent02, 123) |
| | | if (res[0].children.length === count++) { |
| | | count = 0 |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | this.lineContent02 = { |
| | | linename: res.data[0].linename, |
| | | lineworkcont: res.data[0].lineworkcont, |
| | | children: res.data[0].children[count] |
| | | } |
| | | }) |
| | | |
| | | // this.handleEveryLine(item, index) |
| | | if (res2.data[0].children === null) { |
| | | res2.data[0].children = [] |
| | | } |
| | | }, 1000 * 6) |
| | | if (this.lineContent02.children === undefined || res2.data[0].children.length >= 0) { |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | res2 = res |
| | | }) |
| | | } |
| | | if (res2.data[0].children.length === count++) { |
| | | count = 0 |
| | | this.lineContent02 = { |
| | | linename: res2.data[0].linename, |
| | | lineworkcont: res2.data[0].lineworkcont, |
| | | children: res2.data[0].children ? res2.data[0].children[count] : [] |
| | | } |
| | | } |
| | | }, 1000 * 3) |
| | | } else if (index === 2) { |
| | | let count = 0 |
| | | if (flag3) { |
| | | this.lineContent03 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res3.data[0].linename, |
| | | lineworkcont: res3.data[0].lineworkcont, |
| | | children: res3.data[0].children ? res3.data[0].children[count] : [] |
| | | } |
| | | flag3 = false |
| | | } |
| | | |
| | | setInterval(() => { |
| | | if (count > 0) { |
| | | this.lineContent03 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res3.data[0].linename, |
| | | lineworkcont: res3.data[0].lineworkcont, |
| | | children: res3.data[0].children ? res3.data[0].children[count] : [] |
| | | } |
| | | } |
| | | // count++ |
| | | if (res[0].children.length === count++) { |
| | | count = 0 |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | this.lineContent03 = { |
| | | linename: res.data[0].linename, |
| | | lineworkcont: res.data[0].lineworkcont, |
| | | children: res.data[0].children[count] |
| | | } |
| | | }) |
| | | // this.handleEveryLine(item, index) |
| | | |
| | | if (res3.data[0].children === null) { |
| | | res3.data[0].children = [] |
| | | } |
| | | }, 1000 * 6) |
| | | |
| | | if (this.lineContent03.children === undefined || res3.data[0].children.length >= 0) { |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | res3 = res |
| | | }) |
| | | } |
| | | |
| | | if (res3.data[0].children.length === count++) { |
| | | count = 0 |
| | | this.lineContent03 = { |
| | | linename: res3.data[0].linename, |
| | | lineworkcont: res3.data[0].lineworkcont, |
| | | children: res3.data[0].children ? res3.data[0].children[count] : [] |
| | | } |
| | | } |
| | | }, 1000 * 3) |
| | | } else if (index === 3) { |
| | | let count = 0 |
| | | if (flag4) { |
| | | this.lineContent04 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res4.data[0].linename, |
| | | lineworkcont: res4.data[0].lineworkcont, |
| | | children: res4.data[0].children ? res4.data[0].children[count] : [] |
| | | } |
| | | flag4 = false |
| | | } |
| | | |
| | | setInterval(() => { |
| | | if (count > 0) { |
| | | this.lineContent04 = { |
| | | linename: res[0].linename, |
| | | lineworkcont: res[0].lineworkcont, |
| | | children: res[0].children[count] |
| | | linename: res4.data[0].linename, |
| | | lineworkcont: res4.data[0].lineworkcont, |
| | | children: res4.data[0].children ? res4.data[0].children[count] : [] |
| | | } |
| | | } |
| | | // count++ |
| | | if (res[0].children.length === count++) { |
| | | count = 0 |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | this.lineContent04 = { |
| | | linename: res.data[0].linename, |
| | | lineworkcont: res.data[0].lineworkcont, |
| | | children: res.data[0].children[count] |
| | | } |
| | | }) |
| | | // this.handleEveryLine(item, index) |
| | | |
| | | if (res4.data[0].children === null) { |
| | | res4.data[0].children = [] |
| | | } |
| | | }, 1000 * 6) |
| | | |
| | | if (res4.data[0].children.length === count || this.lineContent04.children === undefined) { |
| | | LineSearchTopLeftData([item]).then(res => { |
| | | res4 = res |
| | | }) |
| | | } |
| | | |
| | | if (res4.data[0].children.length === count++) { |
| | | count = 0 |
| | | this.lineContent04 = { |
| | | linename: res4.data[0].linename, |
| | | lineworkcont: res4.data[0].lineworkcont, |
| | | children: res4.data[0].children ? res4.data[0].children[count] : [] |
| | | } |
| | | } |
| | | }, 1000 * 3) |
| | | } |
| | | }, |
| | | |
| | | // 在制订单table |
| | | // 产线加工任务 |
| | | getTableDataRoll() { |
| | | LineSearchBottomLeftData().then(res => { |
| | | this.tableData = res.data |
| | | |
| | | const divData = this.$refs.tableData.bodyWrapper |
| | | // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素) |
| | | const task = setInterval(() => { |
| | | // 元素自增距离顶部1像素 |
| | | divData.scrollTop += 1 |
| | | // divData.scrollTop += divData.scrollHeight / this.tableData.length |
| | | // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
| | | if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) { |
| | | // 重置table距离顶部距离 |
| | | divData.scrollTop = 0 |
| | | LineSearchBottomLeftData().then(res => { |
| | | this.tableData = res.data |
| | | if (this.tableData.length > 10) { |
| | | clearInterval(task) |
| | | this.getTableDataRoll() |
| | | } |
| | | }) |
| | | } |
| | | }, this.tableData.length <= 10 ? 1000 * 3 : 100) |
| | | }) |
| | | const divData = this.$refs.tableData.bodyWrapper |
| | | // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素) |
| | | setInterval(() => { |
| | | // 元素自增距离顶部1像素 |
| | | divData.scrollTop += 1 |
| | | // divData.scrollTop += divData.scrollHeight / this.tableData.length |
| | | // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
| | | if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) { |
| | | // 重置table距离顶部距离 |
| | | divData.scrollTop = 0 |
| | | LineSearchBottomLeftData().then(res => { |
| | | this.tableData = res.data |
| | | }) |
| | | } |
| | | }, this.tableData.length <= 10 ? 1000 * 6 : 100) |
| | | }, |
| | | // 产线产品数量排行滚动效果 |
| | | // 当日完工产品数量排行 |
| | | getTableDataRankRoll() { |
| | | LineSearchTopRightData().then(res => { |
| | | this.tableDataRank = res.data |
| | | |
| | | const divData = this.$refs.tableDataRank.bodyWrapper |
| | | // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素) |
| | | const task = setInterval(() => { |
| | | // 元素自增距离顶部1像素 |
| | | // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length |
| | | divData.scrollTop += 1 |
| | | // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
| | | if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) { |
| | | // 重置table距离顶部距离 |
| | | divData.scrollTop = 0 |
| | | LineSearchTopRightData().then(res => { |
| | | this.tableDataRank = res.data |
| | | |
| | | if (this.tableDataRank.length > 10) { |
| | | clearInterval(task) |
| | | this.getTableDataRankRoll() |
| | | } |
| | | }) |
| | | } |
| | | }, this.tableDataRank.length <= 10 ? 1000 * 3 : 100) |
| | | }) |
| | | console.log(this.tableDataRank.length, 88) |
| | | const divData = this.$refs.tableDataRank.bodyWrapper |
| | | // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素) |
| | | setInterval(() => { |
| | | // 元素自增距离顶部1像素 |
| | | // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length |
| | | divData.scrollTop += 1 |
| | | // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
| | | if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) { |
| | | // 重置table距离顶部距离 |
| | | divData.scrollTop = 0 |
| | | LineSearchTopRightData().then(res => { |
| | | this.tableDataRank = res.data |
| | | }) |
| | | } |
| | | }, this.tableDataRank.length <= 10 ? 1000 * 6 : 100) |
| | | }, |
| | | // 获取echarts |
| | | getEcharts() { |
| | | LineSearchBottomRightData().then(res => { |
| | | loadEcharts('bar02', bar02(res.data)) |
| | | loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name))) |
| | | }) |
| | | |
| | | setInterval(() => { |
| | | LineSearchBottomRightData().then(res => { |
| | | loadEcharts('bar02', bar02(res.data)) |
| | | loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name))) |
| | | }) |
| | | }, 1000 * 15) |
| | | }, |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | //$kbBorderColor: #3A0088; |
| | | $kbBorderColor: #09d8f2; |
| | | $kbBackgroundColor: rgba(30, 33, 46,0.6); |
| | | //$kbBorderColor: #09d8f2; |
| | | $kbBorderColor: rgba(9, 216, 242, 0.4); |
| | | $kbBackgroundColor: rgba(30, 33, 46, 0.6); |
| | | .kb_content { |
| | | display: flex; |
| | | position: relative; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | border-right: 1px solid $kbBorderColor; |
| | | background-color:$kbBackgroundColor; |
| | | background-color: $kbBackgroundColor; |
| | | } |
| | | |
| | | .kb_block03 { |
| | |
| | | .kb_right_bottom { |
| | | height: 481px; |
| | | margin-top: 8px; |
| | | .kb_right_bottom_content_title{ |
| | | |
| | | .kb_right_bottom_content_title { |
| | | color: #00ffff; |
| | | font-size: 18px; |
| | | font-size: 18px; |
| | | margin-bottom: 10px; |
| | | margin-top: -10px; |
| | | } |
| | | |
| | | .kb_right_bottom_content { |
| | | border: 1px solid $kbBorderColor; |
| | | height: 440px; |
| | | width: 100%; |
| | | border-radius: 5px; |
| | | background-color:$kbBackgroundColor; |
| | | background-color: $kbBackgroundColor; |
| | | //height: 100%; |
| | | } |
| | | } |
| | |
| | | width: 0; |
| | | } |
| | | |
| | | ::v-deep .cell { |
| | | padding: 0 !important; |
| | | } |
| | | |
| | | // |
| | | ///* 定义keyframes动画,命名为blink*/ |
| | | //@keyframes blink { |