Compare commits

..

No commits in common. "949675b3a2e8d7b9881b66592b8443b50094b10b" and "e1773dae03a65a38d45547ae36b4e1d9b5b109de" have entirely different histories.

View File

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