页面

src/views/core/analysis/balanceAnalysis/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
+    <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
     <line-chart ref="lineChart" />
     <!-- <pagination
 			:limit.sync="listQuery.pageSize"
@@ -17,6 +17,7 @@ import { parseTime } from '../../mixins/code-filter';
 import { getCT } from '@/api/core/analysis/index';
 import { getProductionLinePage } from '@/api/core/base/productionLine';
 import lineChart from '../LineChart'
+import { time } from 'echarts';
 // import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
 
 // const tableProps = [
@@ -59,6 +60,8 @@ export default {
         lineId:undefined,
         startTime:undefined
       },
+      timeList: [],
+      spanArr: [], 
       xData: [],
       yData: [],
       optionArrUrl: [getProductionLinePage],
@@ -69,18 +72,19 @@ export default {
           selectOptions: [],
           param: 'lineIds',
           defaultSelect: '',
-          multiple: true,
+          multiple: false,
           filterable: true,
         },
         {
           type: 'datePicker',
           label: '时间',
-          dateType: 'datetime',
+          dateType: 'datetimerange',
           format: 'yyyy-MM-dd',
           valueFormat: 'yyyy-MM-dd HH:mm:ss',
           rangeSeparator: '-',
           startPlaceholder: '开始时间',
           endPlaceholder: '结束时间',
+          width: 350,
           param: 'time',
         },
         {
@@ -107,10 +111,40 @@ export default {
         });
       });
     },
+    setRowSpan(arr) {
+      let count = 0
+      arr.forEach((item, index) => {
+        if(index === 0) {
+          this.spanArr.push(1)
+        } else {
+          if (item === arr[index - 1]) {
+            this.spanArr[count] += 1
+            this.spanArr.push(0)
+          } else {
+            count = index
+            this.spanArr.push(1)
+          }
+        }
+      })
+      console.log('打印数组长度', this.spanArr)
+    },
+    /** 合并table列的规则 */
+		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
+			if (columnIndex == 0) {
+				if (this.spanArr[rowIndex]) {
+					return [
+						this.spanArr[rowIndex], // row span
+						1, // col span
+					];
+				} else {
+					return [0, 0];
+				}
+			}
+		},
     getData() {
-      this.listQuery.lineId = '1672847052717821953'
-      this.listQuery.startTime = '1693497600000';
-      this.listQuery.endTime = '1693843200000';
+      // this.listQuery.lineId = '1672847052717821953'
+      // this.listQuery.startTime = '1693497600000';
+      // this.listQuery.endTime = '1693843200000';
       this.urlOptions.getDataListURL(this.listQuery).then(res => {
         console.log(res)
         let arr = [
@@ -123,40 +157,48 @@ export default {
             prop: 'equName',
             label: '设备',
             align: 'center',
-          },
-        ]
-        let eqArr= []
-        res.data.data.forEach((ele, index) => {
-          console.log(ele);
-          eqArr.push(ele.equName)
-        })
-        console.log(eqArr)
-        // console.log(res.data.nameData.slice(1))
-        res.data.nameData.forEach(item => {
-          if (eqArr[0] === item.parentId) {
-            const props = {
-              'prop': item.name,
-              'label': item.name,
-              'align': 'center'
-            }
           }
-          arr[2].children.push(props)
+        ]
+        let sectionArr= []
+        res.data.data.forEach((ele, index) => {
+          let tempData = []
+          ele.data.forEach(item => {
+            item.children.forEach(params => {
+              if (params.dynamicName === '设备CT') {
+                tempData[item.dynamicName + '_eq'] = params.dynamicValue
+              } else {
+                tempData[item.dynamicName + '_pl'] = params.dynamicValue
+              }
+            })
+          })
+          tempData['equName'] = ele.equName
+          tempData['sectionName'] = ele.sectionName
+          this.tableData.push(tempData)
+          const { sectionName } = tempData
+          sectionArr.push(sectionName)
         })
-        let obj = {
-          lineName: res.data.data[0].lineName,
-          sum: res.data.data[0].sum,
+        this.setRowSpan(sectionArr)
+        console.log('工段名称列表', sectionArr)
+        res.data.nameData.forEach(item => {
+          this.timeList.push(item.name)
+        })
+        const timeArray = Array.from(new Set(this.timeList))
+        for (const times of timeArray) {
+          if (times !== '设备CT' && times !== '产线CT') {
+            const subprop = {
+              label: times,
+              align: 'center',
+              children: [
+                { prop: times + '_eq', label: '设备CT', align: 'center' },
+                { prop: times + '_pl', label: '产线CT', align: 'center' }
+              ]
+            }
+            arr.push(subprop)
+          }
         }
-        res.data.data[0].data[0].children.forEach((item, index) => {
-          console.log(item)
-          // let data = 'data' + Number(index+1)
-          obj['' + item.dynamicName + ''] = item.dynamicValue
-        })
-        this.tableData = [obj]
-        console.log(this.tableData)
-        console.log(arr)
         this.tableProps = arr
-        let xData = []
 
+        let xData = []
         res.data.nameData.forEach(item => {
           xData.push(item.name)
           // arr[2].children.push(props)
@@ -180,6 +222,9 @@ export default {
         case 'search':
           // this.listQuery.pageNo = 1;
           // this.listQuery.pageSize = 10;
+          this.listQuery.lineId = val.lineIds
+          this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined;
+          this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined;
           this.getData()
           break;
         case 'reset':