调试自动生成网格融合图片功能（待完成）

riku

2025-09-03 b2392458ebf42594b9fc5390fda40d7a0a12f923

 src/views/historymode/component/MissionReport.vue

@@ -23,6 +23,36 @@
        >
          下载报告
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          @click="handleGenerateImg"
          :loading="docLoading"
        >
          生成图片
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-image :src="base64Url" fit="fill" :preview-src-list="[base64Url]" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-button-custom"
          @click="handleMixClick"
          :loading="docLoading"
        >
          生成网格图片
        </el-button>
        <el-form-item>
          <el-form-item>
            <el-image
              :src="gridBase64Url"
              fit="fill"
              :preview-src-list="[gridBase64Url]"
            />
          </el-form-item>
        </el-form-item>
      </el-form-item>
    </el-form>
  </CardDialog>
@@ -31,7 +61,25 @@
import { computed, ref } from 'vue';
import moment from 'moment';
import dataAnalysisApi from '@/api/dataAnalysisApi';
import gridApi from '@/api/gridApi';
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';
import chartMap from '@/utils/chart/chart-map';
import chartMapAmap from '@/utils/chart/chart-map-amap';
import { Legend } from '@/model/Legend';
import { getHexColor, getColorBetweenTwoColors } from '@/utils/color';

// 借用卫星遥测模块中的100米网格
const props = defineProps({
  groupId: {
    type: Number,
    default: import.meta.env.VITE_DATA_MODE == 'jingan' ? 2 : 3
  }
});

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

const docLoading = ref(false);

const base64Url = ref(null);
const gridBase64Url = ref(null);

const gridCellList = ref([]);

const params = computed(() => {
  return {
@@ -81,27 +134,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 +226,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 +235,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 +247,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 +256,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 +274,148 @@
}

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 handleMixClick() {
  const tags = [1, 2];
  const fetchGridData = () => {
    gridApi.mixUnderwayGridData(props.groupId, tags).then((res) => {
      const gridData = res.data.map((v) => {
        const data = v.pm25;
        const grid = gridCellList.value.find((g) => {
          return g.cellIndex == v.cellId;
        });
        const { color, nextColor, range, nextRange } =
          Legend.getStandardColorAndNext('PM25', data);
        const ratio = (data - range) / (nextRange - range);
        const _color = getColorBetweenTwoColors(
          color.map((v) => v * 255),
          nextColor.map((v) => v * 255),
          ratio
        );

        // // 根据遥测数据计算网格颜色
        //         const { color, nextColor, range, nextRange } =
        //           Legend.getCustomColorAndNext(data, min, max);
        //         const ratio = (data - range) / (nextRange - range);

        //         const _color = getColorBetweenTwoColors(
        //           color.map((v) => v * 255),
        //           nextColor.map((v) => v * 255),
        //           ratio
        //         );
        return {
          centerLng: grid.longitude,
          centerLat: grid.latitude,
          value: _color,
          coordinates: [
            [grid.point1Lon, grid.point1Lat],
            [grid.point2Lon, grid.point2Lat],
            [grid.point3Lon, grid.point3Lat],
            [grid.point4Lon, grid.point4Lat]
          ]
        };
      });
      // chartMapAmap.generateGridMap(gridData).then((url) => {
      //   gridBase64Url.value = url;
      // });
      gridBase64Url.value = chartMap.generateGridMap(gridData);
    });
  };

  if (gridCellList.value.length == 0) {
    gridApi
      .fetchGridCell(props.groupId)
      .then((res) => {
        gridCellList.value = res.data;
      })
      .then(() => fetchGridData());
  } else {
    fetchGridData();
  }
}

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