style: format code by prettier

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

@@ -27,34 +27,34 @@
 </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 * as cheerio from "cheerio";
-import { generateTableCustomRender } from "./renderTableGroup";
+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 * as cheerio from 'cheerio'
+import { generateTableCustomRender } from './renderTableGroup'
 
 function clearData(data) {
-  return data.filter((item) => item.number !== 0);
+  return data.filter((item) => item.number !== 0)
 }
 function removeExtenstion(x) {
-  return x.replace(/\.[^/.]+$/, "");
+  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}"/>` : "";
+    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,
-    };
-  });
+      icon
+    }
+  })
 }
 
 // import useGeneratorChartOption from "@/views/DataAnalyse/diagram/composables/useGeneratorChartOption";
@@ -63,133 +63,136 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     chartTypeOptions: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     questionIndex: {
       type: Number,
-      default: -1,
-    },
+      default: -1
+    }
   },
   components: {
     RenderTableTitle,
     ChartAction,
-    pieChart,
+    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: 230, x: 400 });
-    const source = ref([]);
-    const option = ref({});
+    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"],
+            dimensions: ['title', 'number', 'rate'],
             encode: {
               itemName: 0,
               value: 1,
-              rate: 2,
-            },
+              rate: 2
+            }
           }
-        : null;
+        : null
     function handleUpdateAction(params) {
-      let data = source.value;
-      data = clearImg(data);
-      const { type, empty_option, data_label } = params;
+      let data = source.value
+      data = clearImg(data)
+      const { type, empty_option, data_label } = params
       if (empty_option) {
-        data = clearData(data);
+        data = clearData(data)
       }
-      const config = useChartOption(data, type, data_label, other, props.data.max);
-      option.value = config;
+      const config = useChartOption(data, type, data_label, other, props.data.max)
+      option.value = config
     }
 
     function onTableChange(pagination, filters, sorter) {
-      updateColumns(props.data, sorter);
+      updateColumns(props.data, sorter)
     }
 
     function updateColumns(d, sorter) {
-      const { columnKey, order } = sorter || {};
-      const data = d || props.data;
+      const { columnKey, order } = sorter || {}
+      const data = d || props.data
 
-      source.value = data.option;
+      source.value = data.option
       tableSource.value = (data.option || []).sort((a, b) => {
         if (!columnKey) {
-          return 0;
+          return 0
         }
-        switch(order) {
-          case "ascend": return a[columnKey] - b[columnKey];
-          case "descend": return b[columnKey] - a[columnKey];
-          default: 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);
+      })
+      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;
+          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
           }
-
-          return temp;
-        }
-
-      }) || [];
-      columns.value = columns.value.filter((i) => !!i); // 列数组，会有 undefined 情况出现
-      tableInstance.value.columns = data.head;
+        }) || []
+      columns.value = columns.value.filter((i) => !!i) // 列数组，会有 undefined 情况出现
+      tableInstance.value.columns = data.head
     }
 
-    watch(() => props.data, updateColumns, { immediate: true });
+    watch(() => props.data, updateColumns, { immediate: true })
 
     watch(chart, (val) => {
-      chartInstance.value = val;
-    });
+      chartInstance.value = val
+    })
     return {
       chart,
       columns,
@@ -197,10 +200,10 @@ export default defineComponent({
       scroll,
       option,
       handleUpdateAction,
-      onTableChange,
-    };
-  },
-});
+      onTableChange
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>