| | |
| | | |
| | | <div class="kb_header"> |
| | | <div class="kb_headTime" style="top: 35px;left: 20px"> |
| | | <span>永康市桥下塑料厂</span> |
| | | <span>永康市新光灯具有限公司</span> |
| | | </div> |
| | | |
| | | <div class="kb_headTime kb_header_text" style="top: 35px;left: 800px"> |
| | | <span>桥下综合数字化看板</span> |
| | | <span>车间综合数字化看板</span> |
| | | </div> |
| | | |
| | | <div class="kb_headTime" style="top: 35px;right: 25px"> |
| | |
| | | <div style="width: 925px;"> |
| | | <div class="smallTitle"> |
| | | <svg-icon icon-class="cxjg" class="svg_class" /> |
| | | 生产订单(当月) |
| | | 加工工序(近60天) |
| | | </div> |
| | | <div |
| | | class="lineContent horn" |
| | | style="height: 380px;display: flex;flex-direction: column;justify-content: space-between" |
| | | > |
| | | <div style="height: 180px;padding: 10px;display: flex;justify-content: space-evenly"> |
| | | <div v-for="i in LeftBottomData01" :key="i.wkshp_code" class="flex_c_s"> |
| | | <div class="all_block01 flex_c_s" style="width: 275px;"> |
| | | <div class="flex_c_c all_block02" style="">{{ i.wkshp_name }}</div> |
| | | <div class="" style="display: flex;justify-content:space-between"> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ">任务数</div> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ">{{ i.plan_qty }}</div> |
| | | </div> |
| | | <div class="" style="display: flex;justify-content:space-between"> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ">完工数</div> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ">{{ i.good_qty }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <div style="height: 180px;padding: 10px;display: flex;justify-content: space-evenly"> |
| | | <div v-for="i in LeftBottomData02" :key="i.wkshp_code" class="flex_c_s"> |
| | | <div class="all_block01 flex_c_s" style="width: 275px;"> |
| | | <div class="flex_c_c all_block02" style=" background: rgba(9, 216, 242, 0.2);">{{ i.wkshp_name }}</div> |
| | | <div class="" style="display: flex;justify-content:space-between"> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ;background: rgba(9, 216, 242, 0.2)">任务数</div> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ;background: rgba(9, 216, 242, 0.2)">{{ i.plan_qty }}</div> |
| | | </div> |
| | | <div class="" style="display: flex;justify-content:space-between"> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ;background: rgba(9, 216, 242, 0.2)">入库数</div> |
| | | <div class="all_block02 flex_c_c" style="width: 49% ;background: rgba(9, 216, 242, 0.2)">{{ i.quantity }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <!-- <div style="height: 260px;">--> |
| | | <!-- <div id="all01" class="flex_c_c" style="width: 100%;height:100%;" />--> |
| | | <!-- </div>--> |
| | | <div id="bar3" class="flex_c_c" style="width: 100%;height:100%;" /> |
| | | </div> |
| | | </div> |
| | | <div style="width: 925px;"> |
| | |
| | | <div class="box02" /> |
| | | <div>原材料</div> |
| | | </div> |
| | | <!-- <div class="kb_center_block_children all_block06">--> |
| | | <!-- <div style="font-size: 24px;">{{ parseFloat(RightBottom.B) }}</div>--> |
| | | <!-- <div class="box02" />--> |
| | | <!-- <div>半成品</div>--> |
| | | <!-- </div>--> |
| | | <div class="kb_center_block_children all_block06"> |
| | | <div style="font-size: 24px;">{{ parseFloat(RightBottom.B) }}</div> |
| | | <div class="box02" /> |
| | | <div>半成品</div> |
| | | </div> |
| | | <div class="kb_center_block_children all_block07"> |
| | | <div style="font-size: 24px;">{{ parseFloat(RightBottom.C) }}</div> |
| | | <div class="box02" /> |
| | |
| | | |
| | | <script> |
| | | import './kbCommon.css' |
| | | import { loadEcharts, all02, all03 } from '@/utils/myEcharts' |
| | | import { loadEcharts, all02, bar3 } from '@/utils/myEcharts' |
| | | import { |
| | | WorkShopCompreLeftBottom, WorkShopCompreLeftTop, WorkShopCompreRightBottom, WorkShopCompreRightTop |
| | | WorkShopCompreLeftBottom, |
| | | WorkShopCompreLeftTop, |
| | | WorkShopCompreLeftTopCopy, |
| | | WorkShopCompreRightBottom, |
| | | WorkShopCompreRightTop |
| | | } from '@/api/kanbanManager' |
| | | |
| | | export default { |
| | |
| | | async getAllApi() { |
| | | // const { data: res } = await ShopSearch() |
| | | const res = [ |
| | | { org_code: '101', org_name: '发泡车间' }, |
| | | { org_code: '102', org_name: '挤出车间' } |
| | | { org_code: '1501', org_name: '木料车间' }, |
| | | { org_code: '1502', org_name: '装配车间' }, |
| | | { org_code: '1503', org_name: '压铸车间' } |
| | | |
| | | ] |
| | | this.wkshopArr = res |
| | |
| | | }, 1000 * 40) |
| | | |
| | | // 左下 生产订单 |
| | | const res4 = await WorkShopCompreLeftTop({ wkshopcode: temp.join(',') }) |
| | | for (const res4Key in res4.data.LeftTop) { |
| | | const data = { |
| | | good_qty: 0, |
| | | plan_qty: 0, |
| | | wkshp_code: '', |
| | | wkshp_name: '' |
| | | } |
| | | if (temp.includes(res4Key)) { |
| | | data.good_qty = res4.data.LeftTop[res4Key][0].good_qty |
| | | data.plan_qty = res4.data.LeftTop[res4Key][0].plan_qty |
| | | data.wkshp_code = res4.data.LeftTop[res4Key][0].wkshp_code |
| | | data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name |
| | | this.LeftBottomData01.push(data) |
| | | } |
| | | } |
| | | for (const res4Key in res4.data.LeftBottom) { |
| | | const data = { |
| | | quantity: 0, |
| | | wkshp_code: '', |
| | | wkshp_name: '' |
| | | } |
| | | if (temp.includes(res4Key)) { |
| | | data.quantity = res4.data.LeftBottom[res4Key][0].quantity |
| | | data.plan_qty = res4.data.LeftBottom[res4Key][0].plan_qty |
| | | data.wkshp_code = res4.data.LeftBottom[res4Key][0].wkshp_code |
| | | data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name |
| | | this.LeftBottomData02.push(data) |
| | | } |
| | | } |
| | | // loadEcharts('all01', all03(this.legendData, this.LeftBottomData02)) |
| | | const res4 = await WorkShopCompreLeftTopCopy() |
| | | loadEcharts('bar3', bar3(res4.data)) |
| | | |
| | | setInterval(() => { |
| | | WorkShopCompreLeftTop({ wkshopcode: temp.join(',') }).then(res2 => { |
| | | this.LeftBottomData01 = [] |
| | | this.LeftBottomData02 = [] |
| | | for (const res4Key in res4.data.LeftTop) { |
| | | const data = { |
| | | good_qty: 0, |
| | | plan_qty: 0, |
| | | wkshp_code: '', |
| | | wkshp_name: '' |
| | | } |
| | | if (temp.includes(res4Key)) { |
| | | data.good_qty = res2.data.LeftTop[res4Key][0].good_qty |
| | | data.plan_qty = res2.data.LeftTop[res4Key][0].plan_qty |
| | | data.wkshp_code = res2.data.LeftTop[res4Key][0].wkshp_code |
| | | data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name |
| | | this.LeftBottomData01.push(data) |
| | | } |
| | | } |
| | | for (const res4Key in res2.data.LeftBottom) { |
| | | const data = { |
| | | quantity: 0, |
| | | wkshp_code: '', |
| | | wkshp_name: '' |
| | | } |
| | | if (temp.includes(res4Key)) { |
| | | data.quantity = res2.data.LeftBottom[res4Key][0].quantity |
| | | data.plan_qty = res2.data.LeftBottom[res4Key][0].plan_qty |
| | | data.wkshp_code = res2.data.LeftBottom[res4Key][0].wkshp_code |
| | | data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name |
| | | this.LeftBottomData02.push(data) |
| | | } |
| | | } |
| | | // loadEcharts('all01', all03(this.legendData, this.LeftBottomData02)) |
| | | WorkShopCompreLeftTopCopy().then(res4 => { |
| | | loadEcharts('bar3', bar3(res4.data)) |
| | | }) |
| | | }, 1000 * 30) |
| | | |
| | |
| | | .all_block05 { |
| | | position: absolute; |
| | | animation: upDown 3s ease-in-out infinite; |
| | | left: 140px; |
| | | left: 60px; |
| | | } |
| | | |
| | | //.all_block06 { |
| | | // position: absolute; |
| | | // animation: upDown2 3s ease-in-out infinite; |
| | | // left: 320px; |
| | | //} |
| | | .all_block06 { |
| | | position: absolute; |
| | | animation: upDown2 3s ease-in-out infinite; |
| | | left: 290px; |
| | | } |
| | | |
| | | .all_block07 { |
| | | position: absolute; |
| | | animation: upDown 3s ease-in-out infinite; |
| | | left: 500px; |
| | | left: 520px; |
| | | } |
| | | |
| | | @keyframes upDown { |