mt-fe-group/yudao-dev
12
0
Fork 0
Koodi Ongelmat Pull-pyynnöt Julkaisut Wiki Toiminta

1

Selaa lähdekoodia
This commit is contained in:
朱菊兰 2024-04-07 16:13:57 +08:00
vanhempi a06682de3f
commit 949675b3a2
1 muutettua tiedostoa jossa 405 lisäystä ja 367 poistoa
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

772
src/views/order/monitoring/orderCompletionMonitoring/index.vue
Näytä tiedosto

@ -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>