2025.9.2

riku

2025-09-02 adc9abd145c24f2d3e7033bb738e1e8641eaf4cf

2025.9.2

 public/underway_season_report.docx

Binary files differ

 src/components.d.ts

@@ -37,6 +37,7 @@
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElImage: typeof import('element-plus/es')['ElImage']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElOption: typeof import('element-plus/es')['ElOption']

 src/utils/chart/chart-option.js

@@ -153,9 +153,29 @@
}

// æŠ˜çº¿å›¾
function smallLineOption(_xAxis, _series, yMinInterval) {
function smallLineOption(
  _xAxis,
  _series,
  yMinInterval,
  mode = 'dark',
  tag,
  animation = true,
  defaultGrid,
  title
) {
  var fontSize = fGetChartFontSize();
  const _grid = defaultGrid
    ? defaultGrid
    : { left: '12%', right: '2%', top: '7%', bottom: '30%' };
  return {
    title: {
      text: title,
      textStyle: {
        color: mode == 'dark' ? '#ffffff' : '#000000'
      },
      left: 'center'
    },
    animation: animation,
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
@@ -165,42 +185,37 @@
        fontSize: fontSize
      }
    },
    grid: {
      left: '12%',
      right: '2%',
      top: '7%',
      bottom: '30%'
    },
    grid: _grid,
    legend: {
      show: false
    },
    xAxis: [
      {
        show: true,
        // name: '时间',
        name: tag ? '时间' : '',
        // type: 'time',
        data: _xAxis,
        axisLabel: {
          textStyle: {
            fontSize: fontSize
          },
          color: '#ffffff',
          textBorderColor: '#fff'
          color: mode == 'dark' ? '#ffffff' : '#000000',
          textBorderColor: mode == 'dark' ? '#fff' : '#000000'
        },
        axisTick: {
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          },
          intervel: 0,
          inside: false
        },

        nameTextStyle: {
          color: '#ffffff'
          color: mode == 'dark' ? '#ffffff' : '#000000'
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        }
      },
@@ -208,7 +223,7 @@
    ],
    yAxis: [
      {
        // name: '浓度(μg/m³)',
        name: tag ? '浓度(μg/m³)' : '',
        // type: 'time',
        axisLabel: {
          textStyle: {
@@ -218,13 +233,13 @@
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        },
        splitLine: {
@@ -243,7 +258,7 @@
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        }
      }

 src/utils/chart/chart-to-img.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,54 @@
import * as echarts from 'echarts';
import { smallLineOption, baseVisualMap } from '@/utils/chart/chart-option';

/**
 * ä½¿ç”¨echarts生成图表并转换为base64图片
 * @returns {string} å›¾è¡¨çš„base64编码图片
 */
function generateEchartsImage(params, exceptionIndexArr, yMinInterval) {
  // 1. åˆ›å»ºä¸´æ—¶DOM元素
  const div = document.createElement('div');
  // div.style.width = '330px';
  // div.style.height = '160px';
  div.style.width = '800px';
  div.style.height = '400px';
  document.body.appendChild(div);

  // 2. åˆå§‹åŒ–echarts实例
  const myChart = echarts.init(div);

  // 3. å‡†å¤‡æµ‹è¯•æ•°æ®
  const { xAxis, series } = params;
  const option = smallLineOption(
    xAxis,
    series,
    yMinInterval,
    'light',
    true,
    false,
    { left: '7%', right: '7%', top: '10%', bottom: '10%' },
    series.name
  );
  if (exceptionIndexArr) {
    const visualMap = baseVisualMap(exceptionIndexArr);
    option.visualMap = visualMap;
  }

  // 4. è®¾ç½®å›¾è¡¨é…ç½®é¡¹
  myChart.setOption(option);

  // 5. å°†å›¾è¡¨è½¬æ¢ä¸ºbase64图片
  const imageBase64 = myChart.getDataURL({
    type: 'png',
    pixelRatio: 2, // æé«˜å›¾ç‰‡æ¸…晰度
    backgroundColor: '#fff'
  });

  // 6. é”€æ¯å®žä¾‹å¹¶ç§»é™¤ä¸´æ—¶DOM
  myChart.dispose();
  document.body.removeChild(div);

  return imageBase64;
}

export default { generateEchartsImage };

 src/utils/doc.js

@@ -5,6 +5,33 @@
import FileSaver from 'file-saver';

/**
 * å°†base64格式图片转换为ArrayBuffer
 * @param {string} base64Str - base64格式图片字符串（可包含data URL前缀）
 * @returns {ArrayBuffer} è½¬æ¢åŽçš„ArrayBuffer对象
 */
function base64ToArrayBuffer(base64Str) {
  // ç§»é™¤data URL前缀（如果存在）
  const base64Content = base64Str.replace(/^data:image\/\w+;base64,/, '');

  // å¤„理URL安全的base64字符
  const safeBase64 = base64Content.replace(/-/g, '+').replace(/_/g, '/');

  // è§£ç base64字符串
  const binaryStr = atob(safeBase64);

  // è½¬æ¢ä¸ºUint8Array
  const byteLength = binaryStr.length;
  const uint8Array = new Uint8Array(byteLength);

  for (let i = 0; i < byteLength; i++) {
    uint8Array[i] = binaryStr.charCodeAt(i);
  }

  // è¿”回ArrayBuffer
  return uint8Array.buffer;
}

/**
 * ç­‰æ¯”例缩放图片
 * æ ¹æ®å›¾ç‰‡çš„长宽比进行不同方式的缩放
 * å¦‚果宽度大于高度（横拍图片），则按照设定高度等比缩放；
@@ -122,12 +149,17 @@
    getImage(tagValue) {
      // In this case tagValue will be a URL tagValue = "https://docxtemplater.com/puffin.png"
      return new Promise(function (resolve, reject) {
        JSZipUtils.getBinaryContent(tagValue, function (error, content) {
          if (error) {
            return reject(error);
          }
          return resolve(content);
        });
        if (tagValue.indexOf('http') == 0) {
          JSZipUtils.getBinaryContent(tagValue, function (error, content) {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        } else if (tagValue.indexOf('data:image') == 0) {
          const buffer = base64ToArrayBuffer(tagValue);
          return resolve(buffer);
        }
      });
    },


 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));
}