|
|
@@ -1,390 +1,428 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container orderMonitoring"> |
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> |
|
|
|
<el-tabs v-model="activeName" @tab-click="toggleTab"> |
|
|
|
<el-tab-pane label="数据列表" name="dataList"></el-tab-pane> |
|
|
|
<el-tab-pane label="环形图" name="barChart"></el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
<!-- 表 --> |
|
|
|
<div v-if="activeName === 'dataList'"> |
|
|
|
<base-table :page="1" :limit="1000000000000" :table-props="tableProps" :table-data="list" :max-height="tableH" |
|
|
|
row-key="id" :tree-props="{ children: 'orderMonitorVOS', hasChildren: 'hasChildren' }"> |
|
|
|
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn" |
|
|
|
@clickBtn="handleClick" /> |
|
|
|
</base-table> |
|
|
|
</div> |
|
|
|
<!-- 图 --> |
|
|
|
<monitoring-ring-charts ref='monitoringRingCharts' v-else :chart-list='chartList' /> |
|
|
|
<!-- <pagination |
|
|
|
<div class="app-container orderMonitoring"> |
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
<search-bar |
|
|
|
:formConfigs="formConfig" |
|
|
|
ref="searchBarForm" |
|
|
|
@headBtnClick="buttonClick" /> |
|
|
|
<el-tabs |
|
|
|
v-model="activeName" |
|
|
|
@tab-click="toggleTab"> |
|
|
|
<el-tab-pane |
|
|
|
label="数据列表" |
|
|
|
name="dataList"></el-tab-pane> |
|
|
|
<el-tab-pane |
|
|
|
label="环形图" |
|
|
|
name="barChart"></el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
<!-- 表 --> |
|
|
|
<div v-if="activeName === 'dataList'"> |
|
|
|
<base-table |
|
|
|
:page="1" |
|
|
|
:limit="1000000000000" |
|
|
|
:table-props="tableProps" |
|
|
|
:table-data="list" |
|
|
|
:max-height="tableH" |
|
|
|
row-key="id" |
|
|
|
:tree-props="{ |
|
|
|
children: 'orderMonitorVOS', |
|
|
|
hasChildren: 'hasChildren', |
|
|
|
}"> |
|
|
|
<method-btn |
|
|
|
v-if="tableBtn.length" |
|
|
|
slot="handleBtn" |
|
|
|
:width="100" |
|
|
|
label="操作" |
|
|
|
:method-list="tableBtn" |
|
|
|
@clickBtn="handleClick" /> |
|
|
|
</base-table> |
|
|
|
</div> |
|
|
|
<!-- 图 --> |
|
|
|
<monitoring-ring-charts |
|
|
|
ref="monitoringRingCharts" |
|
|
|
v-else |
|
|
|
:chart-list="chartList" /> |
|
|
|
<!-- <pagination |
|
|
|
:page.sync="queryParams.pageNo" |
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
:total="total" |
|
|
|
@pagination="getPage" |
|
|
|
/> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { parseTime } from '@/utils/ruoyi' |
|
|
|
import { publicFormatter } from '@/utils/dict' |
|
|
|
import { orderGroupMonitor } from '@/api/base/orderGroup' |
|
|
|
import MonitoringRingCharts from './../components/monitoringRingCharts' |
|
|
|
import moment from "moment" |
|
|
|
import { parseTime } from '@/utils/ruoyi'; |
|
|
|
import { publicFormatter } from '@/utils/dict'; |
|
|
|
import { orderGroupMonitor } from '@/api/base/orderGroup'; |
|
|
|
import MonitoringRingCharts from './../components/monitoringRingCharts'; |
|
|
|
import moment from 'moment'; |
|
|
|
const tableProps = [ |
|
|
|
{ |
|
|
|
prop: 'name', |
|
|
|
label: '订单名称', |
|
|
|
minWidth: 140, |
|
|
|
showOverflowtooltip: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'orderType', |
|
|
|
label: '订单类型' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'customerName', |
|
|
|
label: '客户' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'productname', |
|
|
|
label: '产品', |
|
|
|
minWidth: 200, |
|
|
|
showOverflowtooltip: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planStartTime', |
|
|
|
label: '计划开始时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planFinishTime', |
|
|
|
label: '计划完成时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'status', |
|
|
|
label: '订单状态', |
|
|
|
filter: publicFormatter('order_status') |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'startProduceTime', |
|
|
|
label: '实际开始时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'finishProduceTime', |
|
|
|
label: '实际完成时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'deliveTime', |
|
|
|
label: '交货时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'lineNames', |
|
|
|
label: '加工线', |
|
|
|
filter: (val) => val ? val.join(',') : '', |
|
|
|
minWidth: 180 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planQuantity', |
|
|
|
label: '计划生产量', |
|
|
|
width: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'actualquantity', |
|
|
|
label: '实际产出量', |
|
|
|
width: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'completeRate', |
|
|
|
label: '订单完成率', |
|
|
|
width: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'orderNum', |
|
|
|
label: '关联订单/工单数量', |
|
|
|
width: 110 |
|
|
|
} |
|
|
|
] |
|
|
|
{ |
|
|
|
prop: 'name', |
|
|
|
label: '订单名称', |
|
|
|
minWidth: 140, |
|
|
|
showOverflowtooltip: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'orderType', |
|
|
|
label: '订单类型', |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'customerName', |
|
|
|
label: '客户', |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'productname', |
|
|
|
label: '产品', |
|
|
|
minWidth: 200, |
|
|
|
showOverflowtooltip: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planStartTime', |
|
|
|
label: '计划开始时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planFinishTime', |
|
|
|
label: '计划完成时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'status', |
|
|
|
label: '订单状态', |
|
|
|
filter: publicFormatter('order_status'), |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'startProduceTime', |
|
|
|
label: '实际开始时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'finishProduceTime', |
|
|
|
label: '实际完成时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'deliveTime', |
|
|
|
label: '交货时间', |
|
|
|
filter: parseTime, |
|
|
|
minWidth: 160, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'lineNames', |
|
|
|
label: '加工线', |
|
|
|
filter: (val) => (val ? val.join(',') : ''), |
|
|
|
minWidth: 180, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planQuantity', |
|
|
|
label: '计划生产量', |
|
|
|
width: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'actualquantity', |
|
|
|
label: '实际产出量', |
|
|
|
width: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'completeRate', |
|
|
|
label: '订单完成率', |
|
|
|
width: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'orderNum', |
|
|
|
label: '关联订单/工单数量', |
|
|
|
width: 110, |
|
|
|
}, |
|
|
|
]; |
|
|
|
export default { |
|
|
|
name: 'OrderCompletionMonitoring', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formConfig: [ |
|
|
|
{ |
|
|
|
type: 'input', |
|
|
|
label: '集团订单名称', |
|
|
|
param: 'name' |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'datePicker', |
|
|
|
label: '时间段', |
|
|
|
dateType: 'daterange', |
|
|
|
format: 'yyyy-MM-dd', |
|
|
|
valueFormat: "yyyy-MM-dd", |
|
|
|
rangeSeparator: '-', |
|
|
|
startPlaceholder: '开始时间', |
|
|
|
endPlaceholder: '结束时间', |
|
|
|
param: 'timeVal', |
|
|
|
defaultSelect: [], |
|
|
|
width: 250 |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
|
btnName: '查询', |
|
|
|
name: 'search', |
|
|
|
color: 'primary' |
|
|
|
} |
|
|
|
], |
|
|
|
activeName: 'dataList', |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
name: null, |
|
|
|
deliveTime: [] |
|
|
|
}, |
|
|
|
tableProps, |
|
|
|
list: [], |
|
|
|
tableH: this.tableHeight(260), |
|
|
|
total: 0, |
|
|
|
tableBtn: [ |
|
|
|
this.$auth.hasPermi('base:order-completion-monitoring:orderDet') |
|
|
|
? { |
|
|
|
type: 'orderDetail', |
|
|
|
btnName: '详情', |
|
|
|
showTip: '订单/工单详情', |
|
|
|
showParam: { |
|
|
|
type: '&', |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
type: 'more', |
|
|
|
name: 'orderNum', |
|
|
|
value: 1 |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
: undefined, |
|
|
|
this.$auth.hasPermi('base:order-completion-monitoring:qualityDet') |
|
|
|
? { |
|
|
|
type: 'qualityDetail', |
|
|
|
btnName: '质量', |
|
|
|
showTip: '质量详情', |
|
|
|
showParam: { |
|
|
|
type: '&', |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
type: 'more', |
|
|
|
name: 'orderNum', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'unequal', |
|
|
|
name: 'woIdString', |
|
|
|
value: '' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
: undefined |
|
|
|
// this.$auth.hasPermi('base:order-completion-monitoring:sendOut') |
|
|
|
// ? { |
|
|
|
// type: 'sendOutDetail', |
|
|
|
// btnName: '发货', |
|
|
|
// showTip: '发货详情', |
|
|
|
// showParam: { |
|
|
|
// type: '&', |
|
|
|
// data: [ |
|
|
|
// { |
|
|
|
// type: 'more', |
|
|
|
// name: 'workOrderNum', |
|
|
|
// value: 1 |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// } |
|
|
|
// } |
|
|
|
// : undefined |
|
|
|
].filter((v) => v), |
|
|
|
chartList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { MonitoringRingCharts }, |
|
|
|
mounted() { |
|
|
|
window.addEventListener('resize', () => { |
|
|
|
this.tableH = this.tableHeight(260) |
|
|
|
}) |
|
|
|
let start = moment().subtract(30, 'days').format('yyyy-MM-DD') |
|
|
|
let end = moment().format('yyyy-MM-DD') |
|
|
|
this.formConfig[1].defaultSelect = [start, end] |
|
|
|
this.queryParams.deliveTime[0] = start + ' 00:00:00' |
|
|
|
this.queryParams.deliveTime[1] = end + ' 23:59:59' |
|
|
|
this.getPage() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getPage() { |
|
|
|
orderGroupMonitor({ ...this.queryParams }).then(res => { |
|
|
|
let arr = res.data || [] |
|
|
|
if (arr.length > 0) { |
|
|
|
let color = ['#7164FF', '#288AFF', '#63BDFF', '#8EF0AB', '#FFCE6A'] |
|
|
|
let arr2 = [] |
|
|
|
arr.map(item => { |
|
|
|
item.orderType = '集团订单'//前端写死订单类型 |
|
|
|
let woIdString = ''//集团订单层添加工单str跳转质量用 |
|
|
|
//=========图数据 |
|
|
|
let arr3 = [] |
|
|
|
let obj = {} |
|
|
|
obj.orderGroupName = item.name |
|
|
|
obj.id = item.id |
|
|
|
obj.num = item.planQuantity || 0 |
|
|
|
let sunNum = 0 |
|
|
|
if (item.orderMonitorVOS && item.orderMonitorVOS.length > 0) { |
|
|
|
for (let i = 0; i < item.orderMonitorVOS.length; i++) { |
|
|
|
item.orderMonitorVOS[i].orderType = '厂务订单'//前端写死订单类型 |
|
|
|
item.orderMonitorVOS[i].id = item.orderMonitorVOS[i].orderid |
|
|
|
item.orderMonitorVOS[i].orderNum = item.orderMonitorVOS[i].workOrderNum |
|
|
|
woIdString += item.orderMonitorVOS[i].woIdString ? item.orderMonitorVOS[i].woIdString : '' |
|
|
|
//==============图数据 |
|
|
|
let subObj = {} |
|
|
|
subObj.value = item.orderMonitorVOS[i].actualquantity |
|
|
|
subObj.name = item.orderMonitorVOS[i].name |
|
|
|
if (i < 5) { |
|
|
|
subObj.color = color[i] |
|
|
|
} else { |
|
|
|
subObj.color = color[i % 5] |
|
|
|
} |
|
|
|
sunNum += (item.orderMonitorVOS[i].actualquantity || 0) |
|
|
|
arr3.push(subObj) |
|
|
|
} |
|
|
|
} |
|
|
|
item.woIdString = woIdString |
|
|
|
arr3.push({ |
|
|
|
value: item.planQuantity - sunNum > 0 ? item.planQuantity - sunNum : 0, |
|
|
|
name: '未生产', |
|
|
|
color: '#F5F5F5' |
|
|
|
}) |
|
|
|
obj.sunNum = sunNum |
|
|
|
obj.order = arr3 |
|
|
|
arr2.push(obj) |
|
|
|
}) |
|
|
|
this.chartList = arr2 |
|
|
|
if (this.activeName === 'barChart' && this.chartList.length > 0) { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.monitoringRingCharts.initChart() |
|
|
|
}) |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 显示无数据的图片 |
|
|
|
this.chartList = [] |
|
|
|
} |
|
|
|
console.log(arr) |
|
|
|
this.list = arr |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 查询 |
|
|
|
buttonClick(val) { |
|
|
|
this.queryParams.name = val.name |
|
|
|
if (val.timeVal && val.timeVal.length > 0) { |
|
|
|
this.queryParams.deliveTime[0] = val.timeVal[0] + ' 00:00:00' |
|
|
|
this.queryParams.deliveTime[1] = val.timeVal[1] + ' 23:59:59' |
|
|
|
} else { |
|
|
|
this.queryParams.deliveTime = [] |
|
|
|
} |
|
|
|
this.getPage() |
|
|
|
}, |
|
|
|
handleClick(val) { |
|
|
|
console.log(val) |
|
|
|
switch (val.type) { |
|
|
|
case 'orderDetail': |
|
|
|
if (val.data.orderType === '集团订单') { |
|
|
|
this.$router.push({// 去厂务订单详情 |
|
|
|
path: '/order/base/order-manage/order-detail-data?orderIdString=' + val.data.orderIds.join(',') |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$router.push({// 去工单详情 |
|
|
|
path: '/core/core-work-order-detail?woIdString=' + val.data.woIdString |
|
|
|
}) |
|
|
|
} |
|
|
|
break |
|
|
|
case 'qualityDetail': |
|
|
|
this.$router.push({ |
|
|
|
path: '/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString=' + val.data.woIdString |
|
|
|
}) |
|
|
|
break |
|
|
|
default: |
|
|
|
// this.$router.push({ |
|
|
|
// path: '/delivery/delivery-log?orderId='+encodeURI(val.data.name) |
|
|
|
// }) |
|
|
|
} |
|
|
|
}, |
|
|
|
toggleTab() { |
|
|
|
if (this.activeName === 'barChart' && this.chartList.length > 0) { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.monitoringRingCharts.initChart() |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
name: 'OrderCompletionMonitoring', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formConfig: [ |
|
|
|
{ |
|
|
|
type: 'input', |
|
|
|
label: '集团订单名称', |
|
|
|
param: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'datePicker', |
|
|
|
label: '时间段', |
|
|
|
dateType: 'daterange', |
|
|
|
format: 'yyyy-MM-dd', |
|
|
|
valueFormat: 'yyyy-MM-dd', |
|
|
|
rangeSeparator: '-', |
|
|
|
startPlaceholder: '开始时间', |
|
|
|
endPlaceholder: '结束时间', |
|
|
|
param: 'timeVal', |
|
|
|
defaultSelect: [], |
|
|
|
width: 250, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
|
btnName: '查询', |
|
|
|
name: 'search', |
|
|
|
color: 'primary', |
|
|
|
}, |
|
|
|
], |
|
|
|
activeName: 'dataList', |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
name: null, |
|
|
|
deliveTime: [], |
|
|
|
}, |
|
|
|
tableProps, |
|
|
|
list: [], |
|
|
|
tableH: this.tableHeight(260), |
|
|
|
total: 0, |
|
|
|
tableBtn: [ |
|
|
|
this.$auth.hasPermi('base:order-completion-monitoring:orderDet') |
|
|
|
? { |
|
|
|
type: 'orderDetail', |
|
|
|
btnName: '详情', |
|
|
|
showTip: '订单/工单详情', |
|
|
|
showParam: { |
|
|
|
type: '&', |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
type: 'more', |
|
|
|
name: 'orderNum', |
|
|
|
value: 1, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
} |
|
|
|
: undefined, |
|
|
|
this.$auth.hasPermi('base:order-completion-monitoring:qualityDet') |
|
|
|
? { |
|
|
|
type: 'qualityDetail', |
|
|
|
btnName: '质量', |
|
|
|
showTip: '质量详情', |
|
|
|
showParam: { |
|
|
|
type: '&', |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
type: 'more', |
|
|
|
name: 'orderNum', |
|
|
|
value: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'unequal', |
|
|
|
name: 'woIdString', |
|
|
|
value: '', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
} |
|
|
|
: undefined, |
|
|
|
// this.$auth.hasPermi('base:order-completion-monitoring:sendOut') |
|
|
|
// ? { |
|
|
|
// type: 'sendOutDetail', |
|
|
|
// btnName: '发货', |
|
|
|
// showTip: '发货详情', |
|
|
|
// showParam: { |
|
|
|
// type: '&', |
|
|
|
// data: [ |
|
|
|
// { |
|
|
|
// type: 'more', |
|
|
|
// name: 'workOrderNum', |
|
|
|
// value: 1 |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// } |
|
|
|
// } |
|
|
|
// : undefined |
|
|
|
].filter((v) => v), |
|
|
|
chartList: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { MonitoringRingCharts }, |
|
|
|
mounted() { |
|
|
|
window.addEventListener('resize', () => { |
|
|
|
this.tableH = this.tableHeight(260); |
|
|
|
}); |
|
|
|
let start = moment().subtract(30, 'days').format('yyyy-MM-DD'); |
|
|
|
let end = moment().format('yyyy-MM-DD'); |
|
|
|
this.formConfig[1].defaultSelect = [start, end]; |
|
|
|
this.queryParams.deliveTime[0] = start + ' 00:00:00'; |
|
|
|
this.queryParams.deliveTime[1] = end + ' 23:59:59'; |
|
|
|
this.getPage(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getPage() { |
|
|
|
orderGroupMonitor({ ...this.queryParams }).then((res) => { |
|
|
|
let arr = res.data || []; |
|
|
|
if (arr.length > 0) { |
|
|
|
let color = ['#7164FF', '#288AFF', '#63BDFF', '#8EF0AB', '#FFCE6A']; |
|
|
|
let arr2 = []; |
|
|
|
arr.map((item) => { |
|
|
|
item.orderType = '集团订单'; //前端写死订单类型 |
|
|
|
let woIdString = ''; //集团订单层添加工单str跳转质量用 |
|
|
|
//=========图数据 |
|
|
|
let arr3 = []; |
|
|
|
let obj = {}; |
|
|
|
obj.orderGroupName = item.name; |
|
|
|
obj.id = item.id; |
|
|
|
obj.num = item.planQuantity || 0; |
|
|
|
let sunNum = 0; |
|
|
|
if (item.orderMonitorVOS && item.orderMonitorVOS.length > 0) { |
|
|
|
for (let i = 0; i < item.orderMonitorVOS.length; i++) { |
|
|
|
item.orderMonitorVOS[i].orderType = '厂务订单'; //前端写死订单类型 |
|
|
|
item.orderMonitorVOS[i].id = item.orderMonitorVOS[i].orderid; |
|
|
|
item.orderMonitorVOS[i].orderNum = |
|
|
|
item.orderMonitorVOS[i].workOrderNum; |
|
|
|
woIdString += item.orderMonitorVOS[i].woIdString |
|
|
|
? item.orderMonitorVOS[i].woIdString + ',' |
|
|
|
: ''; |
|
|
|
//==============图数据 |
|
|
|
let subObj = {}; |
|
|
|
subObj.value = item.orderMonitorVOS[i].actualquantity; |
|
|
|
subObj.name = item.orderMonitorVOS[i].name; |
|
|
|
if (i < 5) { |
|
|
|
subObj.color = color[i]; |
|
|
|
} else { |
|
|
|
subObj.color = color[i % 5]; |
|
|
|
} |
|
|
|
sunNum += item.orderMonitorVOS[i].actualquantity || 0; |
|
|
|
arr3.push(subObj); |
|
|
|
} |
|
|
|
} |
|
|
|
item.woIdString = woIdString; |
|
|
|
arr3.push({ |
|
|
|
value: |
|
|
|
item.planQuantity - sunNum > 0 ? item.planQuantity - sunNum : 0, |
|
|
|
name: '未生产', |
|
|
|
color: '#F5F5F5', |
|
|
|
}); |
|
|
|
obj.sunNum = sunNum; |
|
|
|
obj.order = arr3; |
|
|
|
arr2.push(obj); |
|
|
|
}); |
|
|
|
this.chartList = arr2; |
|
|
|
if (this.activeName === 'barChart' && this.chartList.length > 0) { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.monitoringRingCharts.initChart(); |
|
|
|
}); |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 显示无数据的图片 |
|
|
|
this.chartList = []; |
|
|
|
} |
|
|
|
console.log(arr); |
|
|
|
this.list = arr; |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 查询 |
|
|
|
buttonClick(val) { |
|
|
|
this.queryParams.name = val.name; |
|
|
|
if (val.timeVal && val.timeVal.length > 0) { |
|
|
|
this.queryParams.deliveTime[0] = val.timeVal[0] + ' 00:00:00'; |
|
|
|
this.queryParams.deliveTime[1] = val.timeVal[1] + ' 23:59:59'; |
|
|
|
} else { |
|
|
|
this.queryParams.deliveTime = []; |
|
|
|
} |
|
|
|
this.getPage(); |
|
|
|
}, |
|
|
|
handleClick(val) { |
|
|
|
console.log(val); |
|
|
|
switch (val.type) { |
|
|
|
case 'orderDetail': |
|
|
|
if (val.data.orderType === '集团订单') { |
|
|
|
this.$router.push({ |
|
|
|
// 去厂务订单详情 |
|
|
|
path: |
|
|
|
'/order/base/order-manage/order-detail-data?orderIdString=' + |
|
|
|
val.data.orderIds.join(','), |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.$router.push({ |
|
|
|
// 去工单详情 |
|
|
|
path: |
|
|
|
'/core/core-work-order-detail?woIdString=' + |
|
|
|
val.data.woIdString, |
|
|
|
}); |
|
|
|
} |
|
|
|
break; |
|
|
|
case 'qualityDetail': |
|
|
|
this.$router.push({ |
|
|
|
path: |
|
|
|
'/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString=' + |
|
|
|
val.data.woIdString, |
|
|
|
}); |
|
|
|
break; |
|
|
|
default: |
|
|
|
// this.$router.push({ |
|
|
|
// path: '/delivery/delivery-log?orderId='+encodeURI(val.data.name) |
|
|
|
// }) |
|
|
|
} |
|
|
|
}, |
|
|
|
toggleTab() { |
|
|
|
if (this.activeName === 'barChart' && this.chartList.length > 0) { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.monitoringRingCharts.initChart(); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang='scss'> |
|
|
|
.orderMonitoring { |
|
|
|
.el-tabs__nav::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 2px; |
|
|
|
background-color: #e4e7ed; |
|
|
|
} |
|
|
|
.el-tabs__nav::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 2px; |
|
|
|
background-color: #e4e7ed; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
width: 0; |
|
|
|
} |
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
.el-tabs__item { |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.el-tabs__item:hover { |
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
} |
|
|
|
.el-tabs__item:hover { |
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
} |
|
|
|
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
} |
|
|
|
.el-tabs__item.is-active { |
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
} |
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
} |
|
|
|
.el-tabs__item { |
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
} |
|
|
|
|
|
|
|
.searchBarBox { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.searchBarBox { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.boxTitle { |
|
|
|
display: inline-block; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 400; |
|
|
|
color: #000000; |
|
|
|
margin: 0 10px 16px 0; |
|
|
|
} |
|
|
|
.boxTitle { |
|
|
|
display: inline-block; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 400; |
|
|
|
color: #000000; |
|
|
|
margin: 0 10px 16px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.blueTitle { |
|
|
|
content: ''; |
|
|
|
display: inline-block; |
|
|
|
width: 4px; |
|
|
|
height: 18px; |
|
|
|
background-color: #0B58FF; |
|
|
|
border-radius: 1px; |
|
|
|
margin-right: 8px; |
|
|
|
vertical-align: bottom; |
|
|
|
} |
|
|
|
.blueTitle { |
|
|
|
content: ''; |
|
|
|
display: inline-block; |
|
|
|
width: 4px; |
|
|
|
height: 18px; |
|
|
|
background-color: #0b58ff; |
|
|
|
border-radius: 1px; |
|
|
|
margin-right: 8px; |
|
|
|
vertical-align: bottom; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |