From 949675b3a2e8d7b9881b66592b8443b50094b10b Mon Sep 17 00:00:00 2001
From: juzi <819872918@qq.com>
Date: Sun, 7 Apr 2024 16:13:57 +0800
Subject: [PATCH] 1

---
 .../orderCompletionMonitoring/index.vue       | 772 +++++++++---------
 1 file changed, 405 insertions(+), 367 deletions(-)

diff --git a/src/views/order/monitoring/orderCompletionMonitoring/index.vue b/src/views/order/monitoring/orderCompletionMonitoring/index.vue
index 45fc2de7..45bb7f8d 100644
--- a/src/views/order/monitoring/orderCompletionMonitoring/index.vue
+++ b/src/views/order/monitoring/orderCompletionMonitoring/index.vue
@@ -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>
\ No newline at end of file