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

<template>
  <div>
    <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 type="daterange" v-model="selectDate" size="small" :clearable="false" style="width: 220px;" @change="getTransfer"></el-date-picker>
<!--                  <Button-->
<!--                    style="margin-left: 10px"-->
<!--                    type="primary"-->
<!--                    @click="getTransfer"-->
<!--                  >查询</Button-->
<!--                  >-->
                </div>
              </template>
              <Button type="primary" @click="exportDocx">导出</Button>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <el-card>
      <div class="title">{{ selectDate[0] ? $moment(selectDate[0]).format('YYYY-MM-DD') : "-" }} ~ {{ selectDate[1] ? $moment(selectDate[1]).format('YYYY-MM-DD') : "-" }}调度指令执行情况</div>

      <p style="text-indent: 30px;line-height: 1.2;padding: 20px 0;">{{ weather.weather }}</p>

      <div v-for="(item, index) in showData.filter(i => i._data.size > 0)" :key="item.value">
        <div class="item" v-if="item._data.size > 0">
          <div class="sub-title">{{ numberToChinese(index+1) }}. {{ item.key }}</div>

          <div v-for="(item1, index1) in Array.from(item._data)" :key="item1[0]">
            <div class="name">
              {{index1+1}}.{{ item1[1][0].equipment_id_equipments_id_relation ? item1[1][0].equipment_id_equipments_id_relation.name : '' }}
            </div>
            <div v-for="(item2, index2) in item1[1].sort((a,b) => new Date(a.act_start_time).valueOf() - new Date(b.act_start_time).valueOf())" :key="item2.id" style="display: flex;">
              <div style="text-indent: 60px;">{{index1+1}}.{{index2+1}}</div>
              <div>
                <div class="time">
                  <span>时间：</span>
                  <span>{{ item2.act_start_time ? $moment(item2.act_start_time).format('YYYY-MM-DD HH:mm') : "-" }} ~ {{ item2.act_end_time ? $moment(item2.act_end_time).format('HH:mm') : "-" }}</span>
                </div>
                <div class="content">
                  <span>内容：</span>
                  <span>{{ item2.to_transfer_id ? "[调整]" : "" }}{{ item2.content }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  Document,
  Paragraph,
  HeadingLevel,
  AlignmentType,
  TextRun,
  Packer,
  convertInchesToTwip,
} from "docx";
import { saveAs } from 'file-saver';
import { index, save } from "@/api/system/baseForm";
import headerContent from "@/components/LxHeader/XyContent.vue";
import LxHeader from "@/components/LxHeader/index.vue";
import { authMixin } from "@/mixin/authMixin";
import { show } from "@/api/system/customFormField";
import { info, weather} from "@/api/other";
export default {
  components: {
    LxHeader,
    headerContent
  },
  mixins: [authMixin],
  data() {
    return {
      types: [],
      areas: [],
      weather: {},
      transfers: [],
      showData: [],
      selectDate: [new Date(),new Date()],
    }
  },
  methods: {
    async getWeatherInfo () {
      try {
        let infoObj = {
          weather: '',
          water: '',
          rain: '',
          prevent: '',
          early_warning: ''
        }
        const weatherInfo = await weather()
        if (!weatherInfo || typeof weatherInfo !== 'object' || weatherInfo.length === 0) return;
        infoObj.weather = `${weatherInfo.weather},${weatherInfo.wD}${weatherInfo.wS},${weatherInfo.sendibleTemp}-${weatherInfo.temp}°C`
        const infos = (await info({
          date: this.$moment().format('YYYY-MM-DD')
        }))[0]
        infoObj.water = `${infos?.daily_water?.map(i => i.range + i.stnm + i.s_value + 'm,')?.toString()}`
        infoObj.rain = `${infos?.daily_rain?.map(i => i.type + i.rain_value + 'mm,')?.toString()}`

        this.weather = infoObj

        await save({
          table_name: 'waters',
          date: this.$moment().format('YYYY-MM-DD'),
          ...infoObj
        },false)
      } catch (err) {

      }
    },
    async getWeather () {
      const res = (await index({
        table_name: 'waters',
        filter: [
          {
            key: 'date',
            op: 'eq',
            value: this.$moment().format('YYYY-MM-DD')
          }
        ]
      },false)).data[0]

      if (!res) {
        await this.getWeatherInfo()
      } else {
        this.weather = res
      }
    },

    numberToChinese (num) {
      if (num == 10) {
        return '十'
      } else if (num == 1) {
        return '一'
      }
      const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
      const units = ['', '十', '百', '千', '万'];
      let result = '';
      let numStr = num.toString();
      for (let i = 0; i < numStr.length; i++) {
        let digit = parseInt(numStr.charAt(i));
        let unit = units[numStr.length - i - 1];
        if (digit === 0) {
          // 当前数字为0时不需要输出汉字，但需要考虑上一个数字是否为0，避免出现连续的零
          if (result.charAt(result.length - 1) !== '零') {
            result += '零';
          }
        } else {
          result += digits[digit] + unit;
        }
      }
      // 对于一些特殊的数字，如10、100等，需要在最前面加上“一”
      if (result.charAt(0) === '一') {
        result = result.substr(1, result.length);
      } else if (result.charAt(0) === '百') {
        result = '一' + result;
      } else if (result.charAt(0) === '千') {
        result = '一' + result;
      }
      return result
    },

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

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

    async getTransfer () {
      try {
        this.transfers = (await index({
          table_name: "transfers",
          page: 1,
          page_size: 999,
          sort_name: "equipment_id",
          filter: [
            {
              key: 'start_time',
              op: 'range',
              value: `${this.$moment(this.selectDate[0]||new Date()).startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment(this.selectDate[1]||new Date()).endOf('days').format('YYYY-MM-DD HH:mm:ss')}`
            },
            {
              key: 'status',
              op: 'eq',
              value: 7
            }
          ]
        })).data

        this.showData = this.areas.map(i => {
          return {
            ...i,
            _data: new Map()
          }
        })
        this.transfers.forEach(item => {
          let filterData = this.showData.find(i => i.value === item.equipment_id_equipments_id_relation.area)
          if (filterData) {
            if (filterData._data.has(item.equipment_id)) {
              filterData._data.get(item.equipment_id).push(item)
            } else {
              filterData._data.set(item.equipment_id, [item])
            }
          }
        })
      } catch (e) {

      }
      console.log(this.showData)
    },

    async exportDocx () {
      const document = new Document({
        sections: [
          {
            children: [
              new Paragraph({
                text: `${this.selectDate[0] ? this.$moment(this.selectDate[0]).format('YYYY年MM月DD日') : "-"} ~ ${this.selectDate[1] ? this.$moment(this.selectDate[1]).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: this.weather.weather,
                    size: 18,
                  })
                ]
              }),
              ...this.showData.filter(i => (i._data && i._data.size>0)).map((i, index) => (
                [
                  new Paragraph({
                    spacing: {
                      before: 200,
                      line: 400
                    },
                    children: [
                      new TextRun({
                        text: `${this.numberToChinese(index+1)}、${i.key}`,
                        size: 28,
                        bold: true,
                      }),
                    ]
                  }),
                  ...Array.from(i._data).map((i1, index1) => (
                    [
                      new Paragraph({
                        spacing: {
                          before: 200,
                          line: 300
                        },
                        indent: {
                          firstLine: convertInchesToTwip(0.5)
                        },
                        children: [
                          new TextRun({
                            text: `${index1+1}. ${i1[1][0].equipment_id_equipments_id_relation ? i1[1][0].equipment_id_equipments_id_relation.name : ''}`,
                            size: 24,
                          }),
                        ]
                      }),
                      ...i1[1].sort((a,b) => new Date(a.act_start_time).valueOf() - new Date(b.act_start_time).valueOf()).map((i2, index2) => {
                        return new Paragraph({
                          indent: {
                            firstLine: convertInchesToTwip(0.8)
                          },
                          children: [
                            new TextRun({
                              text: `${index1+1}.${index2+1}`,
                              size: 20,
                            }),
                            new TextRun({
                              text: `时间： ${i2.act_start_time ? this.$moment(i2.act_start_time).format('YYYY-MM-DD HH:mm') : "-" } ~ ${ i2.act_end_time ? this.$moment(i2.act_end_time).format('HH:mm') : "-" }\n\t${ i2.to_transfer_id ? "[调整]" : "" }内容：${i2.content || ''}`,
                              size: 18
                            })
                          ]
                        })
                      })
                    ]
                  )).flat()
                ]
              )).flat()
            ]
          },
        ]
      })

      const blob = await Packer.toBlob(document)
      saveAs(blob, `${this.selectDate[0] ? this.$moment(this.selectDate[0]).format('YYYY年MM月DD日') : "-"} ~ ${this.selectDate[1] ? this.$moment(this.selectDate[1]).format('YYYY年MM月DD日') : "-"}调度指令执行情况`)
    }
  },
  computed: {
    area () {
      return function (area) {
        return this.areas.find(i => i.value === area)?.key
      }
    }
  },
  created() {
    this.getArea()
    this.getTransfer()
    this.getWeather()
  }
}
</script>

<style scoped lang="scss">
.title {
  font-weight: bolder;
  font-size: 19px;
  text-align: center;

  padding: 10px 0;
}
.sub-title {
  font-weight: bold;
  font-size: 16px;

  padding: 8px 0;
}
.name {
  text-indent: 30px;
  line-height: 1.5;

  padding: 6px 0;
}
.time {
  text-indent: 10px;
  line-height: 1.5;

}
.content {
  text-indent: 10px;
  line-height: 1.5;

}
.item + .item {
  margin-top: 20px;
}
</style>