water-dispatch-web/src/views/order/orderPlan.vue

<template>

  <div>
    <div ref="lxHeader">
      <LxHeader
        icon="md-apps"
        :text="$route.meta.title"
        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      >
        <div slot="content"></div>
        <slot>
          <header-content :auths="auths_auth_mixin">
            <template #search>
              <div style="display: flex">
                <el-date-picker v-model="weekSelect" format="yyyy 第 WW 周" type="week" size="small" style="width: 150px;"></el-date-picker>
                <Button
                  style="margin-left: 10px"
                  type="primary"
                  @click="getData"
                >查询</Button
                >
              </div>
            </template>
          </header-content>
        </slot>
      </LxHeader>
    </div>

    <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%" stripe :height="tableHeight">
      <el-table-column type="index" label="序号" width="50" header-align="center" align="center" fixed="left">
      </el-table-column>

      <el-table-column prop="equipment.area"
                       label="所属区域"
                       header-align="center"
                       width="100"
                       fixed="left"
                       align="center" :formatter="(row, column, cellValue) => (areas.get(cellValue))">
      </el-table-column>
      <el-table-column prop="equipment.name" label="控制工程名称" header-align="center" width="150" fixed="left">
      </el-table-column>
      <el-table-column prop="unit" label="管理单位" header-align="center" width="150" fixed="left">
        <template>
          <span>河道处</span>
        </template>
      </el-table-column>
      <el-table-column prop="gate" label="闸门（孔×米）" header-align="center" width="150" fixed="left">
        <template>
          <span>14m</span>
        </template>
      </el-table-column>
      <el-table-column prop="gm" label="泵站规模（台×m3/s）" header-align="center" width="150" fixed="left">
        <template>
          <span>3×5m3/s</span>
        </template>
      </el-table-column>
      <el-table-column :label="weekRange[i]" header-align="center" v-for="i in 6">
        <el-table-column prop="x1" :label="weekName[i]" min-width="220" header-align="center">
          <template #default="{ row }">
            <div>
              <p v-for="item in row._sortData[i]">
                {{ $moment(item.act_start_time).format('HH:mm') }} ~ {{ $moment(item.act_end_time).format('HH:mm') }}
                {{ item.content }}
                {{ abilities.get(item.leibie) }}
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { index } from "@/api/system/baseForm"
  import {
    mergeTableRow
  } from "@/utils/mergeTableRow"
  import { show } from "@/api/system/customFormField";
  import headerContent from "@/components/LxHeader/XyContent.vue";
  import { authMixin } from "@/mixin/authMixin";
  import LxHeader from "@/components/LxHeader";
  import {AlignmentType, convertInchesToTwip, Document, HeadingLevel, Packer, Paragraph, TextRun} from "docx";
  export default {
    mixins: [authMixin],
    components: {
      headerContent,
      LxHeader
    },
    data() {
      return {
        weekSelect: new Date(),
        tableHeight: '600px',
        abilities: new Map(),
        areas: new Map(),
        tableData: [],
        list: [],
        weekRange: [],
        weekName: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
      }
    },
    methods: {
      async getArea() {
        const obj = (await show({ id: 4 }, false))?.select_item;
        if (obj && typeof obj === "object") {
          let keys = Object.keys(obj);
          console.log(keys.map((key) => [/^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],key]))
          if (keys.length > 0) {
            this.areas = new Map(keys.map((key) => [/^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],key]));
          }
        }

      },
      async getAbility() {
        const obj = (await show({ id: 31 }, false))?.select_item;
        if (obj && typeof obj === "object") {
          let keys = Object.keys(obj);
          if (keys.length > 0) {
            this.abilities = new Map(keys.map((key) => [/^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],key]));
          }
        }
      },

      async getData () {
        this.weekRange = [this.$moment(this.weekSelect).startOf('week').format('YYYY-MM-DD')]
        for (let i = 1;i <= 6;i++) {
          this.weekRange.push(this.$moment(this.weekRange[0]).add(i,'day').format('YYYY-MM-DD'))
        }
        const res = await index({
          table_name: 'transfers',
          page: 1,
          page_size: 999,
          sort_name: 'equipment_id',
          filter: [
            {
              key: "status",
              op: "eq",
              value: 6
            },
            {
              key: "act_start_time",
              op: "range",
              value: `${this.weekRange.at(0)},${this.weekRange.at(-1)}`
            }
          ]
        })
        const sortData = (arr) => {
          let equipments = new Map();
          // 首先，我们将数组按照type进行分类
          let grouped = arr.reduce((acc, cur) => {
            if (!acc[cur.equipment_id]) {
              acc[cur.equipment_id] = [];
              equipments.set(cur.equipment_id,cur)
            }
            acc[cur.equipment_id].push(cur);
            return acc;
          }, {});

          // 然后，我们将每个分类的数组按照data进行排序，并填充undefined
          for (let equipment in grouped) {
            grouped[equipment].sort((a, b) => (Number(this.$moment(a.act_start_time).diff(this.$moment(b.act_start_time),'days'))));
            let sorted = Array.from({length: 7}, () => []);
            for (let item of grouped[equipment]) {
              sorted[this.weekRange.indexOf(this.$moment(item.act_start_time).format('YYYY-MM-DD'))].push(item);
            }
            grouped[equipment] = sorted;
          }

          // 最后，我们将对象转换为所需的数组格式
          let result = [];
          for (let equipment in grouped) {
            result.push({ equipment_id: Number(equipment),equipment: equipments.get(Number(equipment))?.equipment_id_equipments_id_relation, _sortData: grouped[equipment] });
          }

          return result;
        }

        this.tableData = mergeTableRow({
          data: sortData(res.data),
          mergeColNames: ["equipment_id","equipment.area","equipment.name"], // 需要合并的列，默认合并列相同的数据
          firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
          firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
        })
        console.log(this.tableData)
      },

      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        const span = column['property'] + '-span'
        if (row[span]) {
          return row[span]
        }
      },

      async exportDocx () {
        const makeText = (dayData) => {
          let children = [];
          children.push(
            new Paragraph({
              text: `${this.$moment(this.selectDate).format('YYYY年MM月DD日')}调度指令执行情况`,
              heading: HeadingLevel.HEADING_1,
              alignment: AlignmentType.CENTER,
              spacing: {
                after: 400
              }
            })
          )
        }
        const document = new Document({
          sections: [
            {
              children: [
                new Paragraph({
                  text: `${this.$moment(this.selectDate).format('YYYY年MM月DD日')}调度指令执行情况`,
                  heading: HeadingLevel.HEADING_1,
                  alignment: AlignmentType.CENTER,
                  spacing: {
                    after: 400
                  }
                }),
                new Paragraph({
                  indent: {
                    firstLine: convertInchesToTwip(0.5)
                  },
                  spacing: {
                    before: 200,
                    line: 500
                  },
                  children: [
                    new TextRun({
                      text: "今日小雨转晴，北风2级，气温22℃~29℃。水情信息：8:00新塘3.06m，环城河北3.02m，觅渡桥2.99m，人民桥3.00m；16:00新塘3.03m，环城河北2.90m，觅渡桥2.92m，人民桥2.95m。",
                      size: 18,
                    })
                  ]
                }),
                ...this.transfers.map((i, index) => (
                  [
                    new Paragraph({
                      spacing: {
                        before: 200,
                        line: 400
                      },
                      children: [
                        new TextRun({
                          text: `${this.numberToChinese(index+1)}、${i.equipment_id_equipments_id_relation?.name}`,
                          size: 28,
                          bold: true,
                        }),
                      ]
                    }),
                    new Paragraph({
                      spacing: {
                        before: 200,
                        line: 400
                      },
                      indent: {
                        firstLine: convertInchesToTwip(0.5)
                      },
                      children: [
                        new TextRun({
                          text: `1、时间：${this.$moment(i.act_start_time).format('YYYY-MM-DD HH:mm')} - ${this.$moment(i.act_end_time).format('YYYY-MM-DD HH:mm')}  2、实际执行情况：${i.content}`,
                          size: 18,
                        })
                      ]
                    })
                  ]
                )).flat()
              ]
            },
          ]
        })

        const blob = await Packer.toBlob(document)
        saveAs(blob, 'test.docx')
      }
    },
    created() {
      this.getAbility()
      this.getArea()
      this.getData()
    },
    mounted() {
      let clientHeight = document.documentElement.clientHeight;
      let lxheader = document.querySelector(".v-header")?.getBoundingClientRect();
      let lxHeader_height = lxheader.height + 25; //查询 头部
      let paginationHeight = 37; //分页的高度
      let topHeight = 50; //页面 头部
      this.tableHeight =
        clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25 + 36;
    }
  }
</script>