2025.9.2

riku

2025-09-02 adc9abd145c24f2d3e7033bb738e1e8641eaf4cf

 src/views/historymode/component/MissionReport.vue

@@ -23,8 +23,19 @@
        >
          下载报告
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          @click="handleGenerateImg"
          :loading="docLoading"
        >
          生成图片
        </el-button>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-image :src="base64Url" fit="fill" :preview-src-list="[base64Url]" />
    </el-form-item>
  </CardDialog>
</template>
<script setup>
@@ -32,6 +43,11 @@
import moment from 'moment';
import dataAnalysisApi from '@/api/dataAnalysisApi';
import { exportDocx } from '@/utils/doc';
import { radioOptions } from '@/constant/radio-options';
import { TYPE0 } from '@/constant/device-type';
import { FactorDatas } from '@/model/FactorDatas';
import factorDataParser from '@/utils/chart/factor-data-parser';
import chartToImg from '@/utils/chart/chart-to-img';

const formObj = ref({
  timeArray: [new Date('2025-07-01T00:00:00'), new Date('2025-08-31T23:59:59')],
@@ -39,6 +55,8 @@
});

const docLoading = ref(false);

const base64Url = ref(null);

const params = computed(() => {
  return {
@@ -81,27 +99,64 @@
  ],
  missionDetailList: [
    {
      _index: 1,
      _startTime: '2025年07月29日',
      _time: '09:00至14:30',
      _kilometres: '1000',
      _keyScene: '1个国控点（静安监测站）和2个市控点（和田中学、市北高新）',
      _dataStat:
        'PM₂.₅（范围30–35 μg/m³，均值35.51 μg/m³）、PM₁₀（范围25–68 μg/m³，均值38 μg/m³）、NO₂（范围22–54 μg/m³，均值32 μg/m³）、CO（范围2.08–6.39 mg/m³，均值3.398 mg/m³）和NO（范围1–106 μg/m³，均值20.97 μg/m³）',
      _dataStatistics: [
        {
          factor: 'PM10',
          minValue: 25,
          maxValue: 68,
          avgValue: 38
        }
      ],
      aqi: 30,
      pollutionDegree: '优'
    }
  ],
  clueByAreaList: [
    {
      _index: 1,
      _area: '某某区域周边',
      clueByFactorList: [
        {
          factor: 'PM₂.₅',
          clues: [
            {
              _factorNames: 'PM2.5',
              _time: '10:22:28 - 10:22:34',
              _riskRegion: '长宁区清溪路可乐东路',
              _exceptionType: '快速上升',
              _chart: '',
              _conclusion:
                '在10:22:28至10:22:34之间，出现快速上升，VOC最低值为135.95μg/m³，最高值为135.95μg/m³，均值为135.95μg/m³，发现3个风险源，包含2个加油站，1个汽修。',
              _scenes:
                '1.上海依德汽车维修有限公司，汽修企业，位于上海市长宁区北虹路1079号，距仙霞站1887米。\r\n……'
            }
          ]
        }
      ]
    }
  ]
};

const handleClick = () => {
  generateMissionSummary(params.value).then((res) => {
    // generateDocx();
    generateMissionList(params.value).then((res) => {
      generateMissionDetail(params.value).then((res) => {
        //     generateClueByRiskArea(params.value).then((res) => {});
  docLoading.value = true;
  generateMissionSummary(params.value).then(() => {
    generateMissionList(params.value).then(() => {
      generateMissionDetail(params.value).then(() => {
        generateClueByRiskArea(params.value).then(() => {
          generateDocx();
      });
    });
  });
  });
};

const handleGenerateImg = () => {
  generateClueByRiskArea(params.value).then(() => {});
};

function generateMissionSummary(param) {
@@ -136,7 +191,7 @@
      item._time = formatDateTimeRange(item.startTime, item.endTime);
      item._airQulity = `AQI：${item.aqi}（${item.pollutionDegree}）`;
      item._abnormalFactors = item.abnormalFactors
        .map((factor) => factor.des)
        .map((factor) => factor)
        .join('、');
      return item;
    });
@@ -145,8 +200,9 @@

function generateMissionDetail(param) {
  return dataAnalysisApi.fetchMissionDetail(param).then((res) => {
    templateParam.missionDetailList = res.data.map((item) => {
    templateParam.missionDetailList = res.data.map((item, index) => {
      const t = formatDateTimeRange(item.startTime, item.endTime).split(' ');
      item._index = index + 1;
      item._startTime = t[0];
      item._time = t[1];
      item._kilometres = Math.round(item.kilometres / 1000);
@@ -156,7 +212,7 @@
        if (!keySceneMap.has(e.type)) {
          keySceneMap.set(e.type, { scenes: [], count: 0 });
        }
        keySceneMap.get(e.type).scenes.push(e.scene);
        keySceneMap.get(e.type).scenes.push(e);
        keySceneMap.get(e.type).count++;
      });
      item._keyScene = [...keySceneMap]
@@ -165,12 +221,17 @@
            `${info.count}个${type}（${info.scenes.map((s) => s.name).join('、')}）`
        )
        .join('、');
      item._dataStat = item.dataStatistic
      item._dataStat = item.dataStatistics
        .map(
          (e) =>
            `${e.factor.des}（范围${e.minValue}–${e.maxValue}μg/m³，均值${e.avgValue}μg/m³）`
        )
        .join('、');

      const factorNames = radioOptions(TYPE0).map((e) => e.name);
      item._dataStatistics = item.dataStatistics.filter((e) => {
        return factorNames.indexOf(e.factor) != -1;
      });

      return item;
    });
@@ -178,19 +239,89 @@
}

function generateClueByRiskArea(param) {
  return dataAnalysisApi.fetchClueByRiskArea(param).then((res) => {});
  return dataAnalysisApi.fetchClueByRiskArea(param).then((res) => {
    templateParam.clueByAreaList = res.data.map((item, index) => {
      return {
        _index: index + 1,
        _area: item.sceneInfo.name + '周边',
        clueByFactorList: item.clueByFactorList.map((cbf) => {
          return {
            factor: cbf.factor,
            clues: cbf.clues.map((clue) => {
              return {
                _factorNames: Object.keys(clue.pollutedData.statisticMap)
                  .map((e) => e)
                  .join('、'),
                _time:
                  moment(clue.pollutedData.startTime).format('HH:mm:ss') +
                  ' - ' +
                  moment(clue.pollutedData.endTime).format('HH:mm:ss'),
                _riskRegion: clue.pollutedArea.address
                  ? clue.pollutedArea.address
                  : '',
                _exceptionType: clue.pollutedData.exception,
                _images: generateChartImg(clue.pollutedData),
                _conclusion: clue.pollutedSource.conclusion,
                _scenes:
                  clue.pollutedSource.sceneList.length > 0
                    ? clue.pollutedSource.sceneList
                        .map(
                          (s, index) =>
                            `${index + 1}. ${s.name}，${s.type}，位于${s.location}，距${s.closestStation.name}${parseInt(s.length)}米；`
                        )
                        .join('\n')
                    : '无'
              };
            })
          };
        })
      };
    });
  });
}

function generateChartImg(pollutedData) {
  const exceptionIndexArr = [];
  pollutedData.dataVoList.forEach((e) => {
    const i = pollutedData.historyDataList.findIndex((v) => v.time == e.time);
    exceptionIndexArr.push([i - 1 < 0 ? 0 : i - 1, i]);
  });

  const factorDatas = new FactorDatas();
  const images = [];
  factorDatas.setData(pollutedData.historyDataList, 0, () => {
    for (const key in pollutedData.statisticMap) {
      const value = pollutedData.statisticMap[key];
      const _chartOptions = factorDataParser.parseData(factorDatas, [
        {
          label: value.factorName,
          name: value.factorName,
          value: value.factorId + ''
        }
      ]);
      _chartOptions.forEach((o) => {
        images.push({
          url: chartToImg.generateEchartsImage(o, exceptionIndexArr, 20)
        });
      });

      if (base64Url.value == null) {
        base64Url.value = images[0].url;
      }
    }
  });
  return images;
}

function generateDocx() {
  docLoading.value = true;
  exportDocx(
    '/underway_season_report.docx',
    templateParam,
    `走航季度报告.docx`,
    {
      horizontalHeight: 368,
      verticalWidth: 266,
      scale: 1.367
      horizontalHeight: 250,
      verticalWidth: 568,
      scale: 2
    }
  ).finally(() => (docLoading.value = false));
}