新增最终数据产品月度巡查简报

riku

2025-10-11 925b485e661682a2fcfc8b8a47a8148d16ec818e

 src/views/fysp/data-product/middle-data-product/ProdProblemCountSummary.vue

@@ -7,7 +7,10 @@
    :loading="loading"
  >
    <template #step1="{ onSearch }">
      <ProdQueryOptCompare :loading="loading" @submit="onSearch"></ProdQueryOptCompare>
      <ProdQueryOptCompare
        :loading="loading"
        @submit="onSearch"
      ></ProdQueryOptCompare>
    </template>
    <template #step2="{ contentHeight }">
      <el-scrollbar :height="contentHeight">
@@ -78,11 +81,12 @@
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import BaseProdProcess from '@/views/fysp/data-product/components/BaseProdProcess.vue';
import ProdQueryOptCompare from '@/views/fysp/data-product/components/ProdQueryOptCompare.vue';
import dataprodmiddleApi from '@/api/fysp/dataprodmiddleApi.js';
import { conversionFromTable } from '@/utils/excel';
import { useProdStepChange } from '@/views/fysp/data-product/prod-step-change.js';
import { barChartOption, downloadChartImage } from '@/utils/echart-util.js';
import ProdQueryOptCompare from '@/views/fysp/data-product/components/ProdQueryOptCompare.vue';
import Proxy from '@/views/fysp/data-product/middle-data-product/ProdProblemCountSummaryProxy.js';

const { active, changeActive } = useProdStepChange();
const loading = ref(false);
@@ -92,18 +96,19 @@
let chart;

const tableData = computed(() => {
  return tableData1.value.map((item) => {
    const last = tableData2.value.find(
      (item2) => item2.townCode === item.townCode
    );
    item.ratio = Math.round(item.ratio * 10) / 10 || 0;
    return {
      ...item,
      lastSceneCount: last?.sceneCount || 0,
      lastProblemCount: last?.problemCount || 0,
      lastRatio: Math.round((last?.ratio || 0) * 10) / 10 || 0
    };
  });
  // return tableData1.value.map((item) => {
  //   const last = tableData2.value.find(
  //     (item2) => item2.townCode === item.townCode
  //   );
  //   item.ratio = Math.round(item.ratio * 10) / 10 || 0;
  //   return {
  //     ...item,
  //     lastSceneCount: last?.sceneCount || 0,
  //     lastProblemCount: last?.problemCount || 0,
  //     lastRatio: Math.round((last?.ratio || 0) * 10) / 10 || 0
  //   };
  // });
  return Proxy.combineData(tableData1.value, tableData2.value);
});

function onStep1(opts) {
@@ -147,39 +152,40 @@
  if (chart == undefined) {
    chart = echarts.init(chartRef.value);
  }
  const year = dayjs(opt1.startTime).year();
  const month1 = dayjs(opt1.startTime).month() + 1;
  const month2 = dayjs(opt2.startTime).month() + 1;
  const time = `${year}年${month1}月、${month2}月`;
  const option = barChartOption();
  option.title.text = `${time}${opt1.districtName}各街道（镇）${opt1.sceneTypeName}扬尘污染问题数均值对比`;
  // const year = dayjs(opt1.startTime).year();
  // const month1 = dayjs(opt1.startTime).month() + 1;
  // const month2 = dayjs(opt2.startTime).month() + 1;
  // const time = `${year}年${month1}月、${month2}月`;
  // const option = barChartOption();
  // option.title.text = `${time}${opt1.districtName}各街道（镇）${opt1.sceneTypeName}扬尘污染问题数均值对比`;

  option.xAxis.name = '街道（镇）';
  option.xAxis.data = tableData.value.map((item) => item.townName);
  option.yAxis.name = '问题数均值';
  // option.xAxis.name = '街道（镇）';
  // option.xAxis.data = tableData.value.map((item) => item.townName);
  // option.yAxis.name = '问题数均值';

  option.series = [
    {
      name: `${month1}月`,
      type: 'bar', // 图表类型改为柱状图
      data: tableData.value.map((item) => item.ratio),
      label: {
        show: true,
        position: 'top', // 标签显示在柱子顶部
        formatter: '{c}' // 标签格式：数量
      }
    },
    {
      name: `${month2}月`,
      type: 'bar', // 图表类型改为柱状图
      data: tableData.value.map((item) => item.lastRatio),
      label: {
        show: true,
        position: 'top', // 标签显示在柱子顶部
        formatter: '{c}' // 标签格式：数量
      }
    }
  ];
  // option.series = [
  //   {
  //     name: `${month1}月`,
  //     type: 'bar', // 图表类型改为柱状图
  //     data: tableData.value.map((item) => item.ratio),
  //     label: {
  //       show: true,
  //       position: 'top', // 标签显示在柱子顶部
  //       formatter: '{c}' // 标签格式：数量
  //     }
  //   },
  //   {
  //     name: `${month2}月`,
  //     type: 'bar', // 图表类型改为柱状图
  //     data: tableData.value.map((item) => item.lastRatio),
  //     label: {
  //       show: true,
  //       position: 'top', // 标签显示在柱子顶部
  //       formatter: '{c}' // 标签格式：数量
  //     }
  //   }
  // ];
  const option = Proxy.genChartOption(opt1, opt2, tableData.value);
  chart.setOption(option);
}