1. 完成场景报告模块 2. 日报管理模块添加时间范围选择以及word报告生成

riku

2024-11-07 f5052fa7d4e73c0df5a02a6ad8987f35df42b8f8

 src/views/fysp/data-product/ProdDailyReport.vue

@@ -1,46 +1,55 @@
<template>
  <!-- 主内容 -->
  <FYSearchBar ref="searchRef" @search="search" :loading="loading">
    <template #options>
      <!-- 区县 -->
      <FYOptionLocation
        :allOption="false"
        :level="3"
        :checkStrictly="false"
        v-model:value="formSearch.locations"
        style="width: 300px"
      ></FYOptionLocation>
      <!-- 场景类型 -->
      <!-- <FYOptionScene
        :allOption="true"
        :type="2"
        v-model:value="formSearch.scenetype"
      ></FYOptionScene> -->
      <!-- 时间 -->
      <FYOptionTime
        :initValue="false"
        type="datetimerange"
        v-model:value="formSearch.timeArray"
        style="width: 250px"
      ></FYOptionTime>
    </template>
    <template #buttons>
      <el-button
        icon="Download"
        type="primary"
        class=""
        :loading="docLoading"
        :disabled="!docParam"
        @click="genWord()"
      >
        生成报告
      </el-button>
      <el-button
        icon="Download"
        type="success"
        class=""
        :disabled="!docParam"
        @click="exportToExcel()"
      >
        下载表格
      </el-button>
    </template>
  </FYSearchBar>

  <div class="m-task container">
    <!--头部信息-->
    <div class="h-top col-md-12">
      <div class="options">
        <!-- <input type="date" class="c-time c-check" /> -->
        <!-- 时间 -->
        <el-form-item label="时间" :prop="prop" style="margin-left: 10px">
          <el-date-picker
            v-model="formSearch.time"
            type="date"
            placeholder="选择时间"
            start-placeholder="选择开始时间"
            end-placeholder="选择结束时间"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="区域" :prop="prop" style="margin-left: 10px">
          <el-select
            placeholder="Select"
            v-model="formSearch.districtCode"
            class="c-area c-check"
            style="width: 100px"
          >
            <el-option label="金山区" value="310116"></el-option>
            <el-option label="静安区" value="310106"></el-option>
            <el-option label="徐汇区" value="310104"></el-option>
            <el-option label="长宁区" value="310105"></el-option>
          </el-select>
        </el-form-item>

        <el-button
          style="margin-left: 10px"
          class="check-msg"
          @click="search"
          type="primary"
          >查询</el-button
        >
        <el-button type="primary" class="" @click="exportToExcel()">
          生成报告
        </el-button>
      </div>
      <div class="m-top">
        <span class="title-input"> {{ reportName }} </span>
        <!-- <input
@@ -52,21 +61,10 @@
    </div>

    <div class="m-msg col-md-12">
      <span
        name="desc"
        class="desc-textarea"
        rows="5"
        value=""
        cols=""
        disabled
      ></span>
      <span>{{ descMsg }}</span>
      <div class="report-table row">
        <table id="table_subtask" class="" border="1"></table>
      </div>
    </div>

    <div class="dark-screen">
      <i class="fa fa-spinner fa-spin fa-3x" style="color: white"></i>
    </div>
  </div>
</template>
@@ -77,28 +75,13 @@
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import analysisApi from '@/api/fysp/analysisApi.js';
import { exportDocx } from '@/utils/doc';

export default {
  name: 'DailyReport',
  computed: {
    reportName() {
      var city = '';
      switch (this.formSearch.districtCode) {
        case '310116':
          city = '金山区';
          break;
        case '310106':
          city = '静安区';
          break;
        case '310104':
          city = '徐汇区';
          break;
        case '310105':
          city = '长宁区';
          break;
      }

      let title = `${city}扬尘污染辅助监管工作日报`;
      return title;
      return `${this.formSearch.locations.dName}扬尘污染辅助监管工作日报`;
    }
  },
  data() {
@@ -235,10 +218,18 @@
        headers: [],
        data: []
      },
      loading: false,
      formSearch: {
        locations: {},
        scenetype: {},
        time: [],
        timeArray: [new Date(), new Date()],
        districtCode: '310116'
      }
      },
      descMsg: '',
      // 导出报告参数
      docParam: undefined,
      docLoading: false
    };
  },
  watch: {
@@ -365,147 +356,98 @@
        `${this.reportName}.xlsx`
      );
    },
    downloadFile() {
      // 文件标题
      let title = this.reportName;
      // 表头描述
      let desc = document.querySelector('.desc-textarea').textContent;
      // 时间
      let time = document
        .querySelector('.desc-textarea')
        .textContent.split('，')[0];

      // 获取数据
      let thData = Array.from(document.getElementsByTagName('th')).map(
        (th) => th.innerText
      );
      let tdData = Array.from(document.getElementsByTagName('td')).map(
        (td) => td.innerText
      );
      let totalList = [];
      let subList = [];
      let index = 2;

      let inputStatus = true;
      for (let j = 0; j < thData.length; j++) {
        subList.push(thData[j]);
      }
      totalList.push(subList);
      subList = [];

      for (let i = 0; i < tdData.length; i++) {
        if (tdData[i] !== String(index)) {
          if (tdData[i] !== '') {
            subList.push(tdData[i]);
          } else {
            if (inputStatus) {
              let inputList = document.querySelectorAll(`.input-${subList[0]}`);
              for (let j = 0; j < inputList.length; j++) {
                subList.push(inputList[j].value);
              }
              inputStatus = false;
            } else {
              inputStatus = true;
            }
          }
        } else {
          totalList.push(subList);
          subList = [String(index)];
          index += 1;
        }
      }
      totalList.push(subList);

      // index: 0  head
      // other: data
      // title

      let fileData = {
        title: title,
        time: time,
        desc: desc,
        data: totalList
      };

      // if (fileData.title && fileData.time && fileData.desc && fileData.data.length) {
      //     fetch("http://47.100.191.150:9002/dustmonitor/report", {
      //         method: "POST",
      //         headers: {
      //             "Content-Type": "application/json"
      //         },
      //         body: JSON.stringify(fileData)
      //     })
      //     .then(response => response.json())
      //     .then(res => {
      //         if (res.status === 200) {
      //             let name = res.name.split("./")[1];
      //             setTimeout(() => {
      //                 let a = document.createElement("a");
      //                 a.href = appConfig.downloadUrl + name;
      //                 a.download = name; // 设置下载文件名
      //                 document.body.appendChild(a);
      //                 a.click();
      //                 document.body.removeChild(a);
      //             }, 1000);
      //         }
      //     })
      //     .catch(error => console.error("Error:", error));
      // }
    },
    search() {
      let sTime = dayjs(this.formSearch.time).hour(0).minute(0).second(0);
      let eTime = dayjs(this.formSearch.time).hour(23).minute(59).second(59);
      eTime = eTime.toISOString();
      sTime = sTime.toISOString();
      let sTime = dayjs(this.formSearch.timeArray[0])
        .hour(0)
        .minute(0)
        .second(0)
        .millisecond(0);
      let eTime = dayjs(this.formSearch.timeArray[1])
        .hour(23)
        .minute(59)
        .second(59)
        .millisecond(0);
      // eTime = eTime.toISOString();
      // sTime = sTime.toISOString();

      let config = {
        startTime: sTime,
        endTime: eTime,
        districtCode: this.formSearch.districtCode
        startTime: sTime.toDate(),
        endTime: eTime.toDate(),
        districtCode: this.formSearch.locations.dCode
      };
      analysisApi.checkProblem(config).then((res) => {
        this.table.headers = res.tableTitle[0];
        this.table.data = res.tableContent;
      this.loading = true;
      analysisApi
        .dailyreport(config)
        .then((res) => {
          this.table.headers = res.tableTitle[0];
          this.table.data = res.tableContent;

        this.CompTable.init(res.tableTitle[0], res.tableContent);
        this.CompTable.show('table_subtask');
          this.CompTable.init(res.tableTitle[0], res.tableContent);
          this.CompTable.show('table_subtask');

        const countMap = new Map(); //各场景数量
        let proCount = 0; //总计问题数量
        let changeCount = 0; //总计整改数量
          const countMap = new Map(); //各场景数量
          let proCount = 0; //总计问题数量
          let changeCount = 0; //总计整改数量
          const tableRows = [];

        res.tableContent.forEach((cList) => {
          const sceneType = cList[2];
          if (!(sceneType in countMap)) {
            countMap[sceneType] = 0;
          res.tableContent.forEach((cList) => {
            const sceneType = cList[2];
            if (!(sceneType in countMap)) {
              countMap[sceneType] = 0;
            }
            countMap[sceneType] += 1;
            proCount += Number(cList[10]);
            changeCount += Number(cList[13]);

            tableRows.push({
              sIndex: cList[0],
              sType: sceneType,
              sName: cList[3],
              sLocation: cList[4],
              sProblemList: cList[8].split('\n'),
              time: cList[6],
              sTown: cList[5],
              sChangeList: cList[11].split('\n')
            });
          });

          let countStr = '';
          for (const key in countMap) {
            const e = countMap[key];
            if (countStr != '') {
              countStr += '、';
            }
            countStr += `${key}${e}个`;
          }
          countMap[sceneType] += 1;
          proCount += Number(cList[10]);
          changeCount += Number(cList[13]);
        });
          this.descMsg = `共巡查${res.tableContent.length}个扬尘场景（${countStr}），共发现问题${proCount}项，督促整改了${changeCount}项。`;

        let countStr = '';
        for (const key in countMap) {
          const e = countMap[key];
          if (countStr != '') {
            countStr += '、';
          }
          countStr += `${key}${e}个`;
        }

        var descMsg = `共巡查${res.tableContent.length}个扬尘场景（${countStr}），共发现问题${proCount}项，督促整改了${changeCount}项；前期余留问题均已销项。`;
        console.log('descMsg', descMsg);

        // 获取所有类名为 'desc-textarea' 的元素
        const textareas = document.querySelectorAll('.desc-textarea');

        // 遍历这些元素并设置其 HTML 内容
        textareas.forEach(function (textarea) {
          textarea.innerHTML = descMsg;
        });
        // $('.desc-textarea').html('');
        // $('.desc-textarea').html(descMsg);
      });
          this.docParam = {
            month: sTime.month() + 1,
            day: sTime.date(),
            index: 1,
            hasMoreDays: !sTime.isSame(eTime, 'day'),
            endMonth: eTime.month() + 1,
            endDay: eTime.date(),
            totalScene: res.tableContent.length,
            sceneNumTxt: countStr,
            proNum: proCount,
            changeNum: changeCount,
            unChangeNum: proCount - changeCount,
            table1: tableRows
          };
        })
        .finally(() => (this.loading = false));
    },
    // 生成word报告
    genWord() {
      if (this.docParam) {
        const param = this.docParam;
        exportDocx(
          '/秋冬季空气质量攻坚工作提示模板.docx',
          param,
          `秋冬季空气质量攻坚工作提示（${param.month}月${param.day}日）.docx`
        );
      }
    }
  }
};