1

Reviewed-on: #309

src/views/order/monitoring/orderCompletionMonitoring/index.vue

@@ -1,21 +1,47 @@
 <template>
 	<div class="app-container orderMonitoring">
 		<!-- 搜索工作栏 -->
-    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+		<search-bar
-    <el-tabs v-model="activeName" @tab-click="toggleTab">
+			:formConfigs="formConfig"
-      <el-tab-pane label="数据列表" name="dataList"></el-tab-pane>
+			ref="searchBarForm"
-      <el-tab-pane label="环形图" name="barChart"></el-tab-pane>
+			@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"
+			<base-table
-        row-key="id" :tree-props="{ children: 'orderMonitorVOS', hasChildren: 'hasChildren' }">
+				:page="1"
-        <method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn"
+				: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' />
+		<monitoring-ring-charts
+			ref="monitoringRingCharts"
+			v-else
+			:chart-list="chartList" />
 		<!-- <pagination
       :page.sync="queryParams.pageNo"
       :limit.sync="queryParams.pageSize"
@@ -25,94 +51,94 @@
 	</div>
 </template>
 <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 = [
 	{
 		prop: 'name',
 		label: '订单名称',
 		minWidth: 140,
-    showOverflowtooltip: true
+		showOverflowtooltip: true,
 	},
 	{
 		prop: 'orderType',
-    label: '订单类型'
+		label: '订单类型',
 	},
 	{
 		prop: 'customerName',
-    label: '客户'
+		label: '客户',
 	},
 	{
 		prop: 'productname',
 		label: '产品',
 		minWidth: 200,
-    showOverflowtooltip: true
+		showOverflowtooltip: true,
 	},
 	{
 		prop: 'planStartTime',
 		label: '计划开始时间',
 		filter: parseTime,
-    minWidth: 160
+		minWidth: 160,
 	},
 	{
 		prop: 'planFinishTime',
 		label: '计划完成时间',
 		filter: parseTime,
-    minWidth: 160
+		minWidth: 160,
 	},
 	{
 		prop: 'status',
 		label: '订单状态',
-    filter: publicFormatter('order_status')
+		filter: publicFormatter('order_status'),
 	},
 	{
 		prop: 'startProduceTime',
 		label: '实际开始时间',
 		filter: parseTime,
-    minWidth: 160
+		minWidth: 160,
 	},
 	{
 		prop: 'finishProduceTime',
 		label: '实际完成时间',
 		filter: parseTime,
-    minWidth: 160
+		minWidth: 160,
 	},
 	{
 		prop: 'deliveTime',
 		label: '交货时间',
 		filter: parseTime,
-    minWidth: 160
+		minWidth: 160,
 	},
 	{
 		prop: 'lineNames',
 		label: '加工线',
-    filter: (val) => val ? val.join(',') : '',
+		filter: (val) => (val ? val.join(',') : ''),
-    minWidth: 180
+		minWidth: 180,
 	},
 	{
 		prop: 'planQuantity',
 		label: '计划生产量',
-    width: 100
+		width: 100,
 	},
 	{
 		prop: 'actualquantity',
 		label: '实际产出量',
-    width: 100
+		width: 100,
 	},
 	{
 		prop: 'completeRate',
 		label: '订单完成率',
-    width: 100
+		width: 100,
 	},
 	{
 		prop: 'orderNum',
 		label: '关联订单/工单数量',
-    width: 110
+		width: 110,
-  }
+	},
-]
+];
 export default {
 	name: 'OrderCompletionMonitoring',
 	data() {
@@ -121,33 +147,33 @@ export default {
 				{
 					type: 'input',
 					label: '集团订单名称',
-          param: 'name'
+					param: 'name',
 				},
 				{
 					type: 'datePicker',
 					label: '时间段',
 					dateType: 'daterange',
 					format: 'yyyy-MM-dd',
-          valueFormat: "yyyy-MM-dd",
+					valueFormat: 'yyyy-MM-dd',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
 					param: 'timeVal',
 					defaultSelect: [],
-          width: 250
+					width: 250,
 				},
 				{
 					type: 'button',
 					btnName: '查询',
 					name: 'search',
-          color: 'primary'
+					color: 'primary',
-        }
+				},
 			],
 			activeName: 'dataList',
 			// 查询参数
 			queryParams: {
 				name: null,
-        deliveTime: []
+				deliveTime: [],
 			},
 			tableProps,
 			list: [],
@@ -165,10 +191,10 @@ export default {
 									{
 										type: 'more',
 										name: 'orderNum',
-                  value: 1
+										value: 1,
-                }
+									},
-              ]
+								],
-            }
+							},
 					  }
 					: undefined,
 				this.$auth.hasPermi('base:order-completion-monitoring:qualityDet')
@@ -182,17 +208,17 @@ export default {
 									{
 										type: 'more',
 										name: 'orderNum',
-                  value: 1
+										value: 1,
 									},
 									{
 										type: 'unequal',
 										name: 'woIdString',
-                  value: ''
+										value: '',
+									},
+								],
+							},
 					  }
-              ]
+					: undefined,
-            }
-          }
-          : undefined
 				// this.$auth.hasPermi('base:order-completion-monitoring:sendOut')
 				//     ? {
 				//         type: 'sendOutDetail',
@@ -211,111 +237,123 @@ export default {
 				//       }
 				//     : undefined
 			].filter((v) => v),
-      chartList: []
+			chartList: [],
-    }
+		};
 	},
 	components: { MonitoringRingCharts },
 	mounted() {
 		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: {
 		getPage() {
-      orderGroupMonitor({ ...this.queryParams }).then(res => {
+			orderGroupMonitor({ ...this.queryParams }).then((res) => {
-        let arr = res.data || []
+				let arr = res.data || [];
 				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) {
 							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].workOrderNum
+								item.orderMonitorVOS[i].orderNum =
-                woIdString += item.orderMonitorVOS[i].woIdString ? item.orderMonitorVOS[i].woIdString : ''
+									item.orderMonitorVOS[i].workOrderNum;
+								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) {
-                  subObj.color = color[i]
+									subObj.color = color[i];
 								} 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({
-              value: item.planQuantity - sunNum > 0 ? item.planQuantity - sunNum : 0,
+							value:
+								item.planQuantity - sunNum > 0 ? item.planQuantity - sunNum : 0,
 							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) {
 						this.$nextTick(() => {
-              this.$refs.monitoringRingCharts.initChart()
+							this.$refs.monitoringRingCharts.initChart();
-            })
+						});
 					}
 				} else {
 					// 显示无数据的图片
-          this.chartList = []
+					this.chartList = [];
 				}
-        console.log(arr)
+				console.log(arr);
-        this.list = arr
+				this.list = arr;
-      })
+			});
 		},
 		// 查询
 		buttonClick(val) {
-      this.queryParams.name = val.name
+			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[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 {
-        this.queryParams.deliveTime = []
+				this.queryParams.deliveTime = [];
 			}
-      this.getPage()
+			this.getPage();
 		},
 		handleClick(val) {
-      console.log(val)
+			console.log(val);
 			switch (val.type) {
 				case 'orderDetail':
 					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 {
-            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':
 					this.$router.push({
-            path: '/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString=' + val.data.woIdString
+						path:
-          })
+							'/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString=' +
-          break
+							val.data.woIdString,
+					});
+					break;
 				default:
 				// this.$router.push({
 				//   path: '/delivery/delivery-log?orderId='+encodeURI(val.data.name)
@@ -325,17 +363,17 @@ export default {
 		toggleTab() {
 			if (this.activeName === 'barChart' && this.chartList.length > 0) {
 				this.$nextTick(() => {
-          this.$refs.monitoringRingCharts.initChart()
+					this.$refs.monitoringRingCharts.initChart();
-        })
+				});
 			}
-    }
+		},
-  }
+	},
-}
+};
 </script>
 <style lang='scss'>
 .orderMonitoring {
 	.el-tabs__nav::after {
-    content: "";
+		content: '';
 		position: absolute;
 		left: 0;
 		bottom: 0;
@@ -381,7 +419,7 @@ export default {
 		display: inline-block;
 		width: 4px;
 		height: 18px;
-    background-color: #0B58FF;
+		background-color: #0b58ff;
 		border-radius: 1px;
 		margin-right: 8px;
 		vertical-align: bottom;