<template>
|
<div>
|
<div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">
|
|
<div class="kb_backgroundCustom" />
|
|
<div class="kb_header">
|
<div class="kb_headTime" style="top: 35px;left: 20px">
|
<span>浙江寅寅科技有限公司</span>
|
</div>
|
|
<div class="kb_headTime kb_header_text" style="top: 35px;left: 828px">
|
<span>车间数字化看板</span>
|
</div>
|
|
<div class="kb_headTime" style="top: 35px;right: 25px">
|
<span>{{ headTime }}</span>
|
</div>
|
</div>
|
|
<div
|
style=" padding:5px 20px 20px 20px;z-index:2;height: 940px;flex-direction: column;justify-content: space-between;"
|
>
|
<!-- 上边-->
|
<div style="display: flex;justify-content: space-between">
|
<div style="width:100%">
|
<div class="smallTitle">
|
<svg-icon icon-class="cxjg" class="svg_class" />
|
生产信息
|
</div>
|
|
<div style="height: 450px">
|
<dv-border-box-12>
|
<dv-scroll-board
|
ref="scrollBoardTop"
|
:config="configTableTop"
|
style="width: 99%;height: 430px;margin:0 auto;padding-top: 13px;"
|
/>
|
</dv-border-box-12>
|
</div>
|
|
</div>
|
</div>
|
|
<!-- 下边-->
|
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
|
<div style="width: 1000px;">
|
<div class="smallTitle">
|
<svg-icon icon-class="blcs" class="svg_class" />
|
质量不良(近一周)
|
</div>
|
|
<div style="height: 380px;">
|
<dv-border-box-12>
|
<div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />
|
</dv-border-box-12>
|
</div>
|
|
</div>
|
<div style="width: 850px;">
|
<div class="smallTitle">
|
<svg-icon icon-class="ckkc" class="svg_class" />
|
不良统计(近一月)
|
</div>
|
<div style="height: 380px;">
|
<dv-border-box-12>
|
<div id="cjzl04" class="flex_c_c" style="width: 100%;height:100%" />
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import './kbCommon.css'
|
import { loadEcharts, cjzl04, cjzl03_2, cjzl03 } from '@/utils/myEcharts'
|
import {
|
WorkShopProduceBottomLeftData,
|
WorkShopProduceBottomRightData,
|
WorkShopProduceTopData
|
} from '@/api/kanbanManager'
|
|
export default {
|
name: 'Cjsc',
|
data() {
|
return {
|
headTime: '',
|
|
cjzl03_xData: [],
|
cjzl03_yData: [],
|
RightBottom: [],
|
|
configTableTop: {
|
headerBGC: 'rgba(38, 68 ,139, 0.2)', // 表头背景色
|
oddRowBGC: 'transparent', // 奇数行背景色
|
evenRowBGC: 'transparent', // 偶数行背景色
|
headerHeight: 45,
|
waitTime: 3000,
|
rowNum: 8,
|
|
header: [
|
'<span style="color:#09d8f2;">工单号</span>',
|
'<span style="color:#09d8f2;">产品编码</span>',
|
'<span style="color:#09d8f2;">产品名称</span>',
|
'<span style="color:#09d8f2;">产品规格</span>',
|
'<span style="color:#09d8f2;">任务数量</span>',
|
'<span style="color:#09d8f2;">合格数量</span>',
|
'<span style="color:#09d8f2;">不良数量</span>',
|
|
'<span style="color:#09d8f2;">工序顺序</span>',
|
'<span style="color:#09d8f2;">工序编码</span>',
|
'<span style="color:#09d8f2;">工序名称</span>',
|
'<span style="color:#09d8f2;">完成进度(%)</span>'
|
],
|
// '<span style="color:#09d8f2;">工废数量</span>',
|
// '<span style="color:#09d8f2;">料废数量</span>',
|
data: [
|
// ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
|
],
|
// index: true, , 130, 130
|
columnWidth: [200, 140, 350, 350, 130, 130, 130, 130, 130, 130, 130],
|
align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
|
// carousel: 'page'
|
}
|
|
}
|
},
|
created() {
|
setInterval(this.getNowTime, 1000)
|
|
// 两小时看板刷新一次
|
setInterval(() => {
|
window.location.reload()
|
}, 1000 * 60 * 120)
|
},
|
async mounted() {
|
await this.getWorkShopProduceTopData()
|
setInterval(() => {
|
this.getWorkShopProduceTopData()
|
}, 10 * 1000)
|
await this.getWorkShopProduceBottomLeftData()
|
setInterval(() => {
|
this.getWorkShopProduceBottomLeftData()
|
}, 20 * 1000)
|
await this.getWorkShopProduceBottomRightData()
|
setInterval(() => {
|
this.getWorkShopProduceBottomRightData()
|
}, 30 * 1000)
|
},
|
methods: {
|
async getWorkShopProduceTopData() {
|
WorkShopProduceTopData({ wkshopcode: '1' }).then(res => {
|
const flag = this.compareArrays(this.configTableTop.data, res.data)
|
if (!flag) {
|
this.configTableTop.data = res.data.map(i =>
|
[
|
i.wo_code,
|
i.partcode,
|
i.partname,
|
i.partspec ? i.partspec : '/',
|
i.plan_qty,
|
i.good_qty,
|
`<span style="color: red;">${i.ng_qty}</span>`,
|
i.seq,
|
i.step_code,
|
i.step_name,
|
parseFloat(i.schedule.toFixed(2))
|
]
|
)
|
// `<span style="color: red;">${i.laborbad_qty}</span>`,
|
// `<span style="color: red;">${i.materielbad_qty}</span>`,
|
this.$refs['scrollBoardTop'].updateRows(this.configTableTop.data)
|
}
|
})
|
},
|
async getWorkShopProduceBottomLeftData() {
|
const temp = [
|
// { code: '101', name: '发泡车间' },
|
// { code: '102', name: '挤出车间' },
|
// { code: '103', name: '包装车间' },
|
// { code: '001', name: '测试车间' }
|
|
// { code: '01', name: '金工车间' },
|
// { code: '02', name: '铝修' },
|
// { code: '03', name: '台钻' },
|
// { code: '04', name: '喷漆' },
|
// { code: '05', name: '组装成品' }
|
|
{ code: '1', name: '生产部' }
|
]
|
|
const res4 = await WorkShopProduceBottomLeftData({ wkshopcode: temp.map(i => i.code).join(',') })
|
// this.cjzl03_xData = res4.data['101,001'].map(i => i.click_date)
|
// this.cjzl03_yData = res4.data['101,001'].map(i => i.count)
|
|
const a = res4.data['1'].map(i => i.click_date) // echarts横坐标
|
const b = temp.map(i => i.name)// legendData值
|
const c = [
|
// res4.data['01'].map(i => i.count),
|
// res4.data['02'].map(i => i.count),
|
// res4.data['03'].map(i => i.count),
|
// res4.data['04'].map(i => i.count),
|
// res4.data['05'].map(i => i.count)
|
res4.data['1'].map(i => i.count)
|
]// 纵坐标值
|
|
loadEcharts('cjzl03', cjzl03(a, b, c))
|
},
|
|
async getWorkShopProduceBottomRightData() {
|
const temp = [
|
// { code: '101', name: '发泡车间' },
|
// { code: '102', name: '挤出车间' },
|
// { code: '103', name: '包装车间' },
|
// { code: '001', name: '测试车间' }
|
|
// { code: '01', name: '金工车间' },
|
// { code: '02', name: '铝修' },
|
// { code: '03', name: '台钻' },
|
// { code: '04', name: '喷漆' },
|
// { code: '05', name: '组装成品' }
|
|
{ code: '1', name: '生产部' }
|
]
|
const res5 = await WorkShopProduceBottomRightData({ wkshopcode: temp.map(i => i.code).join(',') })
|
this.RightBottom = res5.data
|
if (this.RightBottom.length > 0) {
|
loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
|
}
|
},
|
|
// 获取当前时间
|
getNowTime() {
|
const dt = new Date()
|
const wk = dt.getDay()
|
const y = dt.getFullYear()
|
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
|
const d = (dt.getDate() + '').padStart(2, '0')
|
|
const hh = (dt.getHours() + '').padStart(2, '0')
|
const mm = (dt.getMinutes() + '').padStart(2, '0')
|
const ss = (dt.getSeconds() + '').padStart(2, '0')
|
const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
const week = weeks[wk]
|
|
this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
|
},
|
|
// 两个数组做对比
|
compareArrays(arr1, arr2) {
|
const set1 = new Set(arr1)
|
const set2 = new Set(arr2)
|
|
if (set1.size !== set2.size) {
|
return false
|
}
|
|
for (const value of set1) {
|
if (!set2.has(value)) {
|
return false
|
}
|
}
|
|
return true
|
}
|
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .header-item {
|
font-size: 16px !important;
|
}
|
|
::v-deep .row-item {
|
font-size: 16px !important;
|
}
|
|
</style>
|
