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

riku

2025-09-03 b2392458ebf42594b9fc5390fda40d7a0a12f923

 src/views/historymode/component/MissionReport.vue

@@ -32,22 +32,54 @@
          生成图片
        </el-button>
      </el-form-item>
    </el-form>
    <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>
</template>
<script setup>
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')],
@@ -57,6 +89,9 @@
const docLoading = ref(false);

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

const gridCellList = ref([]);

const params = computed(() => {
  return {
@@ -313,6 +348,65 @@
  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() {
  exportDocx(
    '/underway_season_report.docx',