Compare commits
No commits in common. "949675b3a2e8d7b9881b66592b8443b50094b10b" and "e1773dae03a65a38d45547ae36b4e1d9b5b109de" have entirely different histories.
949675b3a2
...
e1773dae03
@ -1,47 +1,21 @@
|
|||||||
<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
|
|
||||||
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>
|
</el-tabs>
|
||||||
<!-- 表 -->
|
<!-- 表 -->
|
||||||
<div v-if="activeName === 'dataList'">
|
<div v-if="activeName === 'dataList'">
|
||||||
<base-table
|
<base-table :page="1" :limit="1000000000000" :table-props="tableProps" :table-data="list" :max-height="tableH"
|
||||||
:page="1"
|
row-key="id" :tree-props="{ children: 'orderMonitorVOS', hasChildren: 'hasChildren' }">
|
||||||
:limit="1000000000000"
|
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn"
|
||||||
: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" />
|
@clickBtn="handleClick" />
|
||||||
</base-table>
|
</base-table>
|
||||||
</div>
|
</div>
|
||||||
<!-- 图 -->
|
<!-- 图 -->
|
||||||
<monitoring-ring-charts
|
<monitoring-ring-charts ref='monitoringRingCharts' v-else :chart-list='chartList' />
|
||||||
ref="monitoringRingCharts"
|
|
||||||
v-else
|
|
||||||
:chart-list="chartList" />
|
|
||||||
<!-- <pagination
|
<!-- <pagination
|
||||||
:page.sync="queryParams.pageNo"
|
:page.sync="queryParams.pageNo"
|
||||||
:limit.sync="queryParams.pageSize"
|
:limit.sync="queryParams.pageSize"
|
||||||
@ -51,94 +25,94 @@
|
|||||||
</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() {
|
||||||
@ -147,33 +121,33 @@ export default {
|
|||||||
{
|
{
|
||||||
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: [],
|
||||||
@ -191,10 +165,10 @@ export default {
|
|||||||
{
|
{
|
||||||
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')
|
||||||
@ -208,17 +182,17 @@ export default {
|
|||||||
{
|
{
|
||||||
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',
|
||||||
@ -237,123 +211,111 @@ export default {
|
|||||||
// }
|
// }
|
||||||
// : 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 = {};
|
let subObj = {}
|
||||||
subObj.value = item.orderMonitorVOS[i].actualquantity;
|
subObj.value = item.orderMonitorVOS[i].actualquantity
|
||||||
subObj.name = item.orderMonitorVOS[i].name;
|
subObj.name = item.orderMonitorVOS[i].name
|
||||||
if (i < 5) {
|
if (i < 5) {
|
||||||
subObj.color = color[i];
|
subObj.color = color[i]
|
||||||
} else {
|
} else {
|
||||||
subObj.color = color[i % 5];
|
subObj.color = color[i % 5]
|
||||||
}
|
}
|
||||||
sunNum += item.orderMonitorVOS[i].actualquantity || 0;
|
sunNum += (item.orderMonitorVOS[i].actualquantity || 0)
|
||||||
arr3.push(subObj);
|
arr3.push(subObj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
item.woIdString = woIdString;
|
item.woIdString = woIdString
|
||||||
arr3.push({
|
arr3.push({
|
||||||
value:
|
value: item.planQuantity - sunNum > 0 ? item.planQuantity - sunNum : 0,
|
||||||
item.planQuantity - sunNum > 0 ? item.planQuantity - sunNum : 0,
|
|
||||||
name: '未生产',
|
name: '未生产',
|
||||||
color: '#F5F5F5',
|
color: '#F5F5F5'
|
||||||
});
|
})
|
||||||
obj.sunNum = sunNum;
|
obj.sunNum = sunNum
|
||||||
obj.order = arr3;
|
obj.order = arr3
|
||||||
arr2.push(obj);
|
arr2.push(obj)
|
||||||
});
|
})
|
||||||
this.chartList = arr2;
|
this.chartList = arr2
|
||||||
if (this.activeName === 'barChart' && this.chartList.length > 0) {
|
if (this.activeName === 'barChart' && this.chartList.length > 0) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.monitoringRingCharts.initChart();
|
this.$refs.monitoringRingCharts.initChart()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 显示无数据的图片
|
// 显示无数据的图片
|
||||||
this.chartList = [];
|
this.chartList = []
|
||||||
}
|
}
|
||||||
console.log(arr);
|
console.log(arr)
|
||||||
this.list = arr;
|
this.list = arr
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
// 查询
|
// 查询
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
this.queryParams.name = val.name;
|
this.queryParams.name = val.name
|
||||||
if (val.timeVal && val.timeVal.length > 0) {
|
if (val.timeVal && val.timeVal.length > 0) {
|
||||||
this.queryParams.deliveTime[0] = val.timeVal[0] + ' 00:00:00';
|
this.queryParams.deliveTime[0] = val.timeVal[0] + ' 00:00:00'
|
||||||
this.queryParams.deliveTime[1] = val.timeVal[1] + ' 23:59:59';
|
this.queryParams.deliveTime[1] = val.timeVal[1] + ' 23:59:59'
|
||||||
} else {
|
} else {
|
||||||
this.queryParams.deliveTime = [];
|
this.queryParams.deliveTime = []
|
||||||
}
|
}
|
||||||
this.getPage();
|
this.getPage()
|
||||||
},
|
},
|
||||||
handleClick(val) {
|
handleClick(val) {
|
||||||
console.log(val);
|
console.log(val)
|
||||||
switch (val.type) {
|
switch (val.type) {
|
||||||
case 'orderDetail':
|
case 'orderDetail':
|
||||||
if (val.data.orderType === '集团订单') {
|
if (val.data.orderType === '集团订单') {
|
||||||
this.$router.push({
|
this.$router.push({// 去厂务订单详情
|
||||||
// 去厂务订单详情
|
path: '/order/base/order-manage/order-detail-data?orderIdString=' + val.data.orderIds.join(',')
|
||||||
path:
|
})
|
||||||
'/order/base/order-manage/order-detail-data?orderIdString=' +
|
|
||||||
val.data.orderIds.join(','),
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
this.$router.push({
|
this.$router.push({// 去工单详情
|
||||||
// 去工单详情
|
path: '/core/core-work-order-detail?woIdString=' + val.data.woIdString
|
||||||
path:
|
})
|
||||||
'/core/core-work-order-detail?woIdString=' +
|
|
||||||
val.data.woIdString,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
break;
|
break
|
||||||
case 'qualityDetail':
|
case 'qualityDetail':
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path:
|
path: '/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString=' + val.data.woIdString
|
||||||
'/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString=' +
|
})
|
||||||
val.data.woIdString,
|
break
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
// this.$router.push({
|
// this.$router.push({
|
||||||
// path: '/delivery/delivery-log?orderId='+encodeURI(val.data.name)
|
// path: '/delivery/delivery-log?orderId='+encodeURI(val.data.name)
|
||||||
@ -363,17 +325,17 @@ export default {
|
|||||||
toggleTab() {
|
toggleTab() {
|
||||||
if (this.activeName === 'barChart' && this.chartList.length > 0) {
|
if (this.activeName === 'barChart' && this.chartList.length > 0) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.monitoringRingCharts.initChart();
|
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;
|
||||||
@ -419,7 +381,7 @@ export default {
|
|||||||
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;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user