| | |
| | |
|
| | | <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="display: flex;justify-content: space-between">
|
| | | <div style="width: 1150px;">
|
| | | <div style="width: 925px;"> |
| | | <div class="smallTitle">
|
| | | <svg-icon icon-class="cxjg" class="svg_class" />
|
| | | 生产订单(当月)
|
| | | <svg-icon icon-class="blcs" class="svg_class" /> |
| | | 采购订单(月/季) |
| | | </div>
|
| | | <div
|
| | | class="lineContent horn"
|
| | | style="height: 450px;display: flex;flex-direction: column;justify-content: space-between"
|
| | | >
|
| | | <div style="height: 180px;padding: 10px;display: flex;justify-content: space-around">
|
| | | <div v-for="i in LeftTopData01" :key="i.wkshp_code" class="flex_c_s">
|
| | | <div class="all_block01 flex_c_s" style="width: 135px;">
|
| | | <div class="flex_c_c all_block02">{{ i.wkshp_name }}</div>
|
| | | <div style="height: 180px;padding: 10px;display: flex;justify-content: space-between"> |
| | | |
| | | <div v-for="i in LeftTopData01" :key="i.Quarter" class="flex_c_s"> |
| | | <div class="all_block03 flex_c_s"> |
| | | <div class="flex_c_c all_block04">{{ i.Quarter }}</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 class="all_block04 flex_c_c" style="width: 49% ">任务数</div> |
| | | <div class="all_block04 flex_c_c" style="width: 49% ">{{ i.quantity }}</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 class="all_block04 flex_c_c" style="width: 49% ">入库数</div> |
| | | <div class="all_block04 flex_c_c" style="width: 49% ">{{ i.ouquantity }}</div> |
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | |
|
| | | </div>
|
| | | <div style="height: 280px;">
|
| | | <div id="all01" class="flex_c_c" style="width: 100%;height:100%;" />
|
| | | <div style="height: 260px;"> |
| | | <div id="all02_1" class="flex_c_c" style="width: 100%;height:100%;" /> |
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | <div style="width: 700px;">
|
| | | <div style="width: 925px;"> |
| | | <div class="smallTitle">
|
| | | <svg-icon icon-class="cggz" class="svg_class" />
|
| | | 销售订单(月/季)
|
| | |
| | | <div style="height: 180px;padding: 10px;display: flex;justify-content: space-between">
|
| | |
|
| | | <div v-for="i in RightTopData01" :key="i.Quarter" class="flex_c_s">
|
| | | <div class="all_block03 flex_c_s" style="width: 165px;">
|
| | | <div class="all_block03 flex_c_s"> |
| | | <div class="flex_c_c all_block04">{{ i.Quarter }}</div>
|
| | | <div class="" style="display: flex;justify-content:space-between">
|
| | | <div class="all_block04 flex_c_c" style="width: 49% ">任务数</div>
|
| | |
| | | </div>
|
| | | <!-- 下边-->
|
| | | <div style="display: flex;justify-content: space-between;margin-top: 15px;">
|
| | | <div style="width: 1150px;">
|
| | | <div style="width: 925px;"> |
| | | <div class="smallTitle">
|
| | | <svg-icon icon-class="blcs" class="svg_class" />
|
| | | 质量不良(近一周)
|
| | | <svg-icon icon-class="cxjg" class="svg_class" /> |
| | | 生产订单(当月) |
| | | </div>
|
| | | <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
|
| | | <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />
|
| | | <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: 260px;"> |
| | | <div id="all01" class="flex_c_c" style="width: 100%;height:100%;" /> |
| | | </div>
|
| | | <div style="width: 700px;">
|
| | | </div> |
| | | </div> |
| | | <div style="width: 925px;"> |
| | | <div class="smallTitle">
|
| | | <svg-icon icon-class="ckkc" class="svg_class" />
|
| | | 仓库库存
|
| | |
| | |
|
| | | <script>
|
| | | import './kbCommon.css'
|
| | | import { loadEcharts, all01, all02, cjzl03 } from '@/utils/myEcharts'
|
| | | import { loadEcharts, all02, all03 } from '@/utils/myEcharts' |
| | | import {
|
| | | WorkShopCompreLeftTop,
|
| | | WorkShopCompreRightBottom,
|
| | | WorkShopCompreRightTop,
|
| | | WorkShopProduceBottomLeftData
|
| | | WorkShopCompreLeftBottom, WorkShopCompreLeftTop, WorkShopCompreRightBottom, WorkShopCompreRightTop |
| | | } from '@/api/kanbanManager'
|
| | | import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
|
| | |
|
| | | export default {
|
| | | name: 'Cjsc',
|
| | |
| | |
|
| | | RightTopData01: [],
|
| | | RightTopData02: [],
|
| | | cjzl03_xData: [],
|
| | | cjzl03_yData: [],
|
| | | |
| | | LeftBottomData01: [], |
| | | LeftBottomData02: [], |
| | | |
| | | RightBottom: {}
|
| | |
|
| | | }
|
| | | },
|
| | | activated() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
},
created() {
|
| | | created() { |
| | | setInterval(this.getNowTime, 1000)
|
| | |
|
| | | // // 两小时看板刷新一次
|
| | |
| | | },
|
| | | methods: {
|
| | | async getAllApi() {
|
| | | const res = await PrentOrganizationNoCompany()
|
| | | this.wkshopArr = res.data
|
| | | // const { data: res } = await ShopSearch() |
| | | const res = [ |
| | | { org_code: '101', org_name: '发泡车间' }, |
| | | { org_code: '102', org_name: '挤出车间' } |
| | |
|
| | | const temp = ['501', '502', '503', '508', '504', '505', '506', '507']
|
| | | // const temp = ['0103', '006', '01', 'qw', '0104', 'CJ001', 'LD001', 'ZP001']
|
| | | ] |
| | | this.wkshopArr = res |
| | | const temp = this.wkshopArr.map(i => i.org_code) |
| | | // const temp = this.wkshopArr.map(i => i.org_code) |
| | | |
| | | temp.forEach(i => {
|
| | | const aa = this.wkshopArr.find(j => j.torg_code === i).torg_name
|
| | | const aa = this.wkshopArr.find(j => j.org_code === i).org_name |
| | | this.legendData.push(aa)
|
| | | })
|
| | |
|
| | | const res2 = await WorkShopCompreLeftTop({ wkshopcode: temp.join(',') })
|
| | | for (const res2Key in res2.data.LeftTop) {
|
| | | const data = {
|
| | | good_qty: 0,
|
| | | plan_qty: 0,
|
| | | wkshp_code: '',
|
| | | wkshp_name: ''
|
| | | }
|
| | | if (temp.includes(res2Key)) {
|
| | | data.good_qty = res2.data.LeftTop[res2Key][0].good_qty
|
| | | data.plan_qty = res2.data.LeftTop[res2Key][0].plan_qty
|
| | | data.wkshp_code = res2.data.LeftTop[res2Key][0].wkshp_code
|
| | | data.wkshp_name = this.wkshopArr.find(i => i.torg_code === data.wkshp_code).torg_name
|
| | | this.LeftTopData01.push(data)
|
| | | }
|
| | | }
|
| | | const t = this.LeftTopData01[ this.LeftTopData01.length - 1]
|
| | | this.LeftTopData01.splice(7, 1)
|
| | | this.LeftTopData01.splice(3, 0, t)
|
| | | for (const res2Key in res2.data.LeftBottom) {
|
| | | const data = {
|
| | | quantity: 0,
|
| | | wkshp_code: '',
|
| | | wkshp_name: ''
|
| | | }
|
| | | if (temp.includes(res2Key)) {
|
| | | data.quantity = res2.data.LeftBottom[res2Key][0].quantity
|
| | | data.plan_qty = res2.data.LeftBottom[res2Key][0].plan_qty
|
| | | data.wkshp_code = res2.data.LeftBottom[res2Key][0].wkshp_code
|
| | | data.wkshp_name = this.wkshopArr.find(i => i.torg_code === data.wkshp_code).torg_name
|
| | | this.LeftTopData02.push(data)
|
| | | }
|
| | | }
|
| | | const t1 = this.LeftTopData02[ this.LeftTopData02.length - 1]
|
| | | this.LeftTopData02.splice(7, 1)
|
| | | this.LeftTopData02.splice(3, 0, t1)
|
| | | loadEcharts('all01', all01(this.legendData, this.LeftTopData02))
|
| | |
|
| | | // 左上 采购订单 |
| | | const res2 = await WorkShopCompreLeftBottom() |
| | | res2.data.BottomLeftTop.forEach(i => { |
| | | this.LeftTopData01.push({ |
| | | Quarter: i.Quarter, |
| | | quantity: i.quantity, |
| | | ouquantity: i.ouquantity |
| | | }) |
| | | }) |
| | | res2.data.BottomLeftBottom.forEach(i => { |
| | | this.LeftTopData02.push({ |
| | | Month: i.Month + '月', |
| | | quantity: i.quantity, |
| | | ouquantity: i.ouquantity |
| | | }) |
| | | }) |
| | | loadEcharts('all02_1', all02(this.LeftTopData02, '每月采购数量/入库数量')) |
| | | setInterval(() => {
|
| | | WorkShopCompreLeftTop({ wkshopcode: temp.join(',') }).then(res2 => {
|
| | | this.LeftTopData01 = []
|
| | | this.LeftTopData02 = []
|
| | | for (const res2Key in res2.data.LeftTop) {
|
| | | const data = {
|
| | | good_qty: 0,
|
| | | plan_qty: 0,
|
| | | wkshp_code: '',
|
| | | wkshp_name: ''
|
| | | }
|
| | | if (temp.includes(res2Key)) {
|
| | | data.good_qty = res2.data.LeftTop[res2Key][0].good_qty
|
| | | data.plan_qty = res2.data.LeftTop[res2Key][0].plan_qty
|
| | | data.wkshp_code = res2.data.LeftTop[res2Key][0].wkshp_code
|
| | | data.wkshp_name = this.wkshopArr.find(i => i.torg_code === data.wkshp_code).torg_name
|
| | | this.LeftTopData01.push(data)
|
| | | }
|
| | | }
|
| | | const t = this.LeftTopData01[ this.LeftTopData01.length - 1]
|
| | | this.LeftTopData01.splice(7, 1)
|
| | | this.LeftTopData01.splice(3, 0, t)
|
| | | for (const res2Key in res2.data.LeftBottom) {
|
| | | const data = {
|
| | | quantity: 0,
|
| | | wkshp_code: '',
|
| | | wkshp_name: ''
|
| | | }
|
| | | if (temp.includes(res2Key)) {
|
| | | data.quantity = res2.data.LeftBottom[res2Key][0].quantity
|
| | | data.plan_qty = res2.data.LeftBottom[res2Key][0].plan_qty
|
| | | data.wkshp_code = res2.data.LeftBottom[res2Key][0].wkshp_code
|
| | | data.wkshp_name = this.wkshopArr.find(i => i.torg_code === data.wkshp_code).torg_name
|
| | | this.LeftTopData02.push(data)
|
| | | }
|
| | | }
|
| | | const t1 = this.LeftTopData02[ this.LeftTopData02.length - 1]
|
| | | this.LeftTopData02.splice(7, 1)
|
| | | this.LeftTopData02.splice(3, 0, t1)
|
| | | loadEcharts('all01', all01(this.legendData, this.LeftTopData02))
|
| | | WorkShopCompreLeftBottom().then(res2 => { |
| | | res2.data.BottomLeftTop.forEach(i => { |
| | | this.LeftTopData01.push({ |
| | | Quarter: i.Quarter, |
| | | quantity: i.quantity, |
| | | ouquantity: i.ouquantity |
| | | })
|
| | | }, 1000 * 30)
|
| | | }) |
| | | res2.data.BottomLeftBottom.forEach(i => { |
| | | this.LeftTopData02.push({ |
| | | Month: i.Month + '月', |
| | | quantity: i.quantity, |
| | | ouquantity: i.ouquantity |
| | | }) |
| | | }) |
| | | loadEcharts('all02_1', all02(this.LeftTopData02, '每月采购数量/入库数量')) |
| | | }) |
| | | }, 1000 * 35) |
| | |
|
| | | // 右上 销售订单 |
| | | const res3 = await WorkShopCompreRightTop()
|
| | | res3.data.RightTop.forEach(i => {
|
| | | this.RightTopData01.push({
|
| | |
| | | ouquantity: i.ouquantity
|
| | | })
|
| | | })
|
| | | loadEcharts('all02', all02(this.RightTopData02))
|
| | | loadEcharts('all02', all02(this.RightTopData02, '每月订单数量/出库数量')) |
| | | setInterval(() => {
|
| | | WorkShopCompreRightTop().then(res3 => {
|
| | | this.RightTopData01 = []
|
| | |
| | | ouquantity: i.ouquantity
|
| | | })
|
| | | })
|
| | | loadEcharts('all02', all02(this.RightTopData02))
|
| | | loadEcharts('all02', all02(this.RightTopData02, '每月订单数量/出库数量')) |
| | | })
|
| | | }, 1000 * 40)
|
| | |
|
| | | const res4 = await WorkShopProduceBottomLeftData({ wkshopcode: temp.join(',') })
|
| | | this.cjzl03_xData = res4.data[temp[0]].map(i => i.click_date)
|
| | | for (const res4Key in res4.data) {
|
| | | // 左下 生产订单 |
| | | 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)) {
|
| | | const bb = res4.data[res4Key].map(i => i.count)
|
| | | this.cjzl03_yData.push(bb)
|
| | | 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) |
| | | }
|
| | | }
|
| | | loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
|
| | | 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)) |
| | | |
| | | setInterval(() => {
|
| | | WorkShopProduceBottomLeftData({ wkshopcode: temp.join(',') }).then(res4 => {
|
| | | this.cjzl03_yData = []
|
| | |
|
| | | this.cjzl03_xData = res4.data[temp[0]].map(i => i.click_date)
|
| | | for (const res4Key in res4.data) {
|
| | | 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)) {
|
| | | const bb = res4.data[res4Key].map(i => i.count)
|
| | | this.cjzl03_yData.push(bb)
|
| | | 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) |
| | | }
|
| | | }
|
| | | loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
|
| | | 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)) |
| | | })
|
| | | }, 1000 * 50)
|
| | | }, 1000 * 30) |
| | |
|
| | | // 右下 仓库库存 |
| | | const res5 = await WorkShopCompreRightBottom()
|
| | | this.RightBottom = res5.data
|
| | |
|
| | |
| | | }
|
| | |
|
| | | .all_block01 {
|
| | | width: 237px;
|
| | | width: 187px; |
| | | height: 180px;
|
| | | }
|
| | |
|
| | |
| | | .all_block05 {
|
| | | position: absolute;
|
| | | animation: upDown 3s ease-in-out infinite;
|
| | | left: -20px;
|
| | | left: 70px; |
| | | }
|
| | |
|
| | | .all_block06 {
|
| | | position: absolute;
|
| | | animation: upDown2 3s ease-in-out infinite;
|
| | | left: 220px;
|
| | | left: 320px; |
| | | }
|
| | |
|
| | | .all_block07 {
|
| | | position: absolute;
|
| | | animation: upDown 3s ease-in-out infinite;
|
| | | left: 460px;
|
| | | left: 570px; |
| | | }
|
| | |
|
| | | @keyframes upDown {
|