yudao-dev/src/views/core/analysis/balanceAnalysis/index.vue

<template>
  <div class="app-container">
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    <div v-if="tableData.length">
      <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
      <SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
      <balance-chart ref="lineChart" />
    </div>
    <div v-else class="no-data-bg"></div>
    <!-- <pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" /> -->
  </div>
</template>

<script>
// import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter';
import { getCT } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import BalanceChart from '../balanceChart'
import { time } from 'echarts';
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';

// const tableProps = [
// 	// {
//   //   prop: 'lineName',
// 	// 	label: '产线',
// 	// 	align: 'center',
// 	// },
//   // {
//   //   prop: 'sum',
//   //   label: '合计',
//   //   align: 'center',
//   // },
//   // {
//   //   prop: 'dynamicValue',
//   //   label: 'dynamicName',
//   //   align: 'center',
//   //   children:[

//   //   ]
//   // }
// ];

export default {
  components: {
    BalanceChart
  },
  // mixins: [basicPage],
  data() {
    return {
      urlOptions: {
        getDataListURL: getCT,
      },
      tableProps: [],
      dataListLoading: false,
      tableData: [],
      listQuery: {
        // time: ''
        endTime: undefined,
        lineId:undefined,
        startTime:undefined
      },
      timeList: [],
      spanArr: [], 
      xData: [],
      yData: [],
      optionArrUrl: [getProductionLinePage],
      formConfig: [
        {
          type: 'select',
          label: '产线',
          selectOptions: [],
          param: 'lineIds',
          defaultSelect: '',
          multiple: false,
          filterable: true,
        },
        {
          type: 'datePicker',
          label: '时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          width: 350,
          param: 'time',
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        }
      ],
    };
  },
  created() {
    this.getArr();
  },
  methods: {
    getArr() {
      const params = {
        page: 1,
        limit: 500
      }
      this.optionArrUrl.forEach((item, index) => {
        item(params).then((response) => {
          this.formConfig[index].selectOptions = response.data.list
        });
      });
    },
    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)
          }
        }
      })
    },
    /** 合并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.urlOptions.getDataListURL(this.listQuery).then(res => {
        console.log(res)
        let arr = [
          {
            prop: 'sectionName',
            label: '工段',
            align: 'center',
          },
          {
            prop: 'equName',
            label: '设备',
            align: 'center',
          }
        ]
        let sectionArr= []
        res.data.data.forEach((ele, index) => {
          let tempData = []
          let eqData = []
            let plData = []
          ele.data.forEach((item, index) => {
            item.children.forEach(params => {
              if (params.dynamicName === '设备CT') {
                tempData[item.dynamicName + '_eq'] = params.dynamicValue
                eqData[index] = params.dynamicValue
              } else {
                tempData[item.dynamicName + '_pl'] = params.dynamicValue
                plData[index] = params.dynamicValue
              }
            })
          })
          const equipment = {
            name: ele.equName,
            eqData: eqData,
            plData: plData
          }
          tempData['equName'] = ele.equName
          tempData['sectionName'] = ele.sectionName
          this.tableData.push(tempData)
          const { sectionName } = tempData
          sectionArr.push(sectionName)
          this.yData.push(equipment)
          console.log('看看equ', this.yData)
        })
        this.setRowSpan(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)
            this.xData.push(times)
          }
        }
        this.tableProps = arr

        console.log('表格横坐标', this.xData)
        this.$refs.lineChart.initChart(this.xData, this.yData)
        // this.total = response.data.total;
        // this.dataListLoading = false;
      });
    },
    buttonClick(val) {
      // console.log(val)
      switch (val.btnName) {
        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;
          if (val.time && val.lineIds) {
            this.tableData = []
            this.xData = []
            this.yData = []
            this.tableProps = []
            this.spanArr = []
            this.timeList = []
            this.getData()
          } else {
            this.$message({
              message: '请选择产线和时间',
              type: 'warning'
            });
          }
          break;
        case 'reset':
          this.$refs.searchBarForm.resetForm();
          this.listQuery = {
            pageSize: 10,
            pageNo: 1,
            total: 1,
          };
          this.getDataList();
          break;
        default:
          console.log(val);
      }
    },
  },
};
</script>