ylst-pc/src/views/DataAnalyse/diagram/components/SingleChart.vue

<template>
  <div class="container">
    <div class="chart-container">
      <ChartAction @update:action="handleUpdateAction" :chartTypeOptions="chartTypeOptions" />
      <AiInsightResult
      v-if="data.question_conclusion"
      :result="data.question_conclusion"
    />
      <div class="chart-wrapper">
        <pieChart :chart-option="option" ref="chart" />
      </div>
    </div>
    <div class="table-container">
      <a-table
        :align="'center'"
        :columns="columns"
        :dataSource="tableSource"
        :pagination="false"
        :scroll="scroll"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        rowKey="index"
        class="ant-table-striped"
        @change="onTableChange"
      >
        <template v-for="col in columns" #[col.dataIndex]="{ text }" :key="col.dataIndex">
          <render-table-title :title="text"></render-table-title>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch, inject } from 'vue';
import pieChart from '@/components/chart/PieChart';
import ChartAction from '@/views/DataAnalyse/diagram/components/ChartAction';
import RenderTableTitle from '@/views/DataAnalyse/components/RenderTableTitle';
import RenderTableTitleLo from '@/views/DataAnalyse/components/RenderTableTitleLo';
import useChartOption from '@/views/DataAnalyse/diagram/composables/useChartOption';
import AiInsightResult from '@/views/DataAnalyse/diagram/components/AiInsightResult';
import * as cheerio from 'cheerio';
import { generateTableCustomRender } from './renderTableGroup';

function clearData(data) {
  return data.filter((item) => item.number !== 0);
}
function removeExtenstion(x) {
  return x.replace(/\.[^/.]+$/, '');
}
function clearImg(data) {
  return data.map((item) => {
    const $ = cheerio.load(item?.title || '');
    let title = $.text();
    title = removeExtenstion(title);
    const imgTag = $('img').get(0);
    const icon = imgTag ? `<img src="${imgTag.attribs.src}"/>` : '';
    return {
      ...item,
      title,
      icon
    };
  });
}

// import useGeneratorChartOption from "@/views/DataAnalyse/diagram/composables/useGeneratorChartOption";

export default defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    chartTypeOptions: {
      type: Array,
      default: () => []
    },
    questionIndex: {
      type: Number,
      default: -1
    }
  },
  components: {
    RenderTableTitle,
    ChartAction,
    pieChart,
    AiInsightResult
  },
  setup(props) {
    const chartInstance = inject('chartInstance');
    const tableInstance = inject('tableInstance');
    const chart = ref(null);
    const columns = ref([]);
    const tableSource = ref([]);
    const scroll = ref({ y: 230, x: 400 });
    const source = ref([]);
    const option = ref({});
    const other =      props.data.question_type === 23
        ? {
            dimensions: ['title', 'number', 'rate'],
            encode: {
              itemName: 0,
              value: 1,
              rate: 2
            }
          }
        : null;
    function handleUpdateAction(params) {
      let data = source.value;
      data = clearImg(data);
      const { type, empty_option, data_label } = params;
      if (empty_option) {
        data = clearData(data);
      }
      const config = useChartOption(data, type, data_label, other, props.data.max);
      option.value = config;
    }

    function onTableChange(pagination, filters, sorter) {
      updateColumns(props.data, sorter);
    }

    function updateColumns(d, sorter) {
      const { columnKey, order } = sorter || {};
      const data = d || props.data;

      source.value = data.option;
      tableSource.value = (data.option || []).sort((a, b) => {
        if (!columnKey) {
          return 0;
        }
        switch (order) {
          case 'ascend':
            return a[columnKey] - b[columnKey];
          case 'descend':
            return b[columnKey] - a[columnKey];
          default:
            return 0;
        }
      });
      tableSource.value.forEach((item) => {
        item.group_title = item.groupTitle;
      });
      tableInstance.value.data = tableSource.value;
      columns.value =        data.head?.map((item, index) => {
          const customRender = generateTableCustomRender(tableSource.value, item);

          if (item.key === 'answerRate' || item.key === 'rate') {
            return {
              ...item,
              title: () => <RenderTableTitleLo title={item.title} tooltipType={item.key} />,
              dataIndex: item.key,
              key: item.key,
              slots: { customRender: item.key },
              width: 100,
              // align: "center",
              fixed: index === 0 ? 'left' : null,
              customRender
            };
          } else if (item.key === 'number') {
            return {
              ...item,
              title: () => <RenderTableTitle title={item.title} />,
              dataIndex: item.key,
              key: item.key,
              slots: { customRender: item.key },
              width: 100,
              // align: "center",
              fixed: index === 0 ? 'left' : null,
              sorter: true,
              sortDirections: ['descend', 'ascend'],
              customRender
            };
          } else {
            const temp = {
              ...item,
              title: () => <RenderTableTitle title={item.title} />,
              dataIndex: item.key,
              key: item.key,
              slots: { customRender: item.key },
              width: 100,
              // align: "center",
              fixed: index === 0 ? 'left' : null
            };
            if (![12, 13, 14].includes(props.data.question_type)) {
              temp.customRender = customRender;
            }

            return temp;
          }
        }) || [];
      columns.value = columns.value.filter((i) => !!i); // 列数组，会有 undefined 情况出现
      tableInstance.value.columns = data.head;
    }

    watch(() => props.data, updateColumns, { immediate: true });

    watch(chart, (val) => {
      chartInstance.value = val;
    });
    return {
      chart,
      columns,
      tableSource,
      scroll,
      option,
      handleUpdateAction,
      onTableChange
    };
  }
});
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background: #f6fbf2;
}
.container {
  height: 100%;
  .chart-container {
    min-height: 300px;
    padding-bottom: 20px;
  }

  .table-container {
  }
}
</style>