fix: bug

src/views/DataAnalyse/diagram/components/SingleChart.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="container">
+    <div class="chart-container">
+      <ChartAction @update:action="handleUpdateAction" :chartTypeOptions="chartTypeOptions" />
+      <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"
+      >
+        <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 useChartOption from "@/views/DataAnalyse/diagram/composables/useChartOption";
+import * as cheerio from "cheerio";
+
+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,
+  },
+  setup(props) {
+    const chartInstance = inject("chartInstance");
+
+    const tableInstance = inject("tableInstance");
+    const chart = ref(null);
+    const columns = ref([]);
+    const tableSource = ref([]);
+    const scroll = ref({ y: 135, x: 400 });
+    const source = ref([]);
+    const option = ref({});
+    const other =
+      props.data.question_type === 23
+        ? {
+            dimension: ["name", "value", "rate"],
+            encode: {
+              itemName: 1,
+              value: 2,
+              rate: 3,
+            },
+          }
+        : 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);
+      option.value = config;
+    }
+
+    watch(
+      () => props.data,
+      (data) => {
+        source.value = data.option;
+        tableSource.value = data.option;
+        columns.value = data.head?.map((item, index) => {
+          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,
+          };
+        }) || [];
+        tableInstance.value.data = tableSource.value;
+        tableInstance.value.columns = data.head;
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    watch(chart, (val) => {
+      chartInstance.value = val;
+    });
+    return {
+      chart,
+      columns,
+      tableSource,
+      scroll,
+      option,
+      handleUpdateAction,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.ant-table-striped :deep(.table-striped) td {
+  background: #f6fbf2;
+}
+.container {
+  height: 100%;
+  .chart-container {
+    height: 300px;
+  }
+
+  .table-container {
+  }
+}
+</style>