feat: 分题统计前端开发 (#276)

web/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -29,6 +30,7 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSlider: typeof import('element-plus/es')['ElSlider']

web/package.json

@@ -21,6 +21,7 @@
     "axios": "^1.4.0",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.2.0",
+    "echarts": "^5.5.0",
     "element-plus": "^2.7.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",

web/src/management/api/analysis.js

@@ -8,3 +8,11 @@ export const getRecycleList = (data) => {
     }
   })
 }
+
+export const getStatisticList = (data) => {
+  return axios.get('/survey/dataStatistic/aggregationStatis', {
+    params: {
+      ...data
+    }
+  })
+}

web/src/management/config/analysisConfig.js

@@ -0,0 +1,77 @@
+import { menuItems } from './questionMenuConfig'
+
+export const noDataConfig = {
+  title: '暂无数据',
+  desc: '您的问卷当前还没有数据，快去回收问卷吧！',
+  img: '/imgs/icons/analysis-empty.webp'
+}
+
+export const separateItemListHead = [
+  {
+    title: '选项',
+    field: 'text'
+  },
+  {
+    title: '数量',
+    field: 'count'
+  },
+  {
+    title: '占比',
+    field: 'percent'
+  }
+]
+
+// 图表名称需要和./chartConfig.js中保持一致
+export const questionChartsConfig = {
+  [menuItems['checkbox']['type']]: ['bar'],
+  [menuItems['radio-nps']['type']]: ['gauge', 'pie', 'bar'],
+  default: ['pie', 'bar']
+}
+
+export const analysisTypeMap = {
+  dataTable: 'dataTable',
+  separateStatistics: 'separateStatistics'
+}
+
+export const analysisType = [
+  {
+    value: analysisTypeMap.dataTable,
+    label: '数据列表',
+    icon: 'icon-shujuliebiao'
+  },
+  {
+    value: analysisTypeMap.separateStatistics,
+    label: '分题统计',
+    icon: 'icon-fentitongji'
+  }
+]
+
+export const summaryType = {
+  between: 'between'
+}
+
+export const summaryItemConfig = {
+  'radio-nps': [
+    {
+      text: '推荐者',
+      field: 'id',
+      type: summaryType.between,
+      max: 10,
+      min: 9
+    },
+    {
+      text: '中立者',
+      field: 'id',
+      type: summaryType.between,
+      max: 8,
+      min: 7
+    },
+    {
+      text: '贬损者',
+      field: 'id',
+      type: summaryType.between,
+      max: 6,
+      min: 0
+    }
+  ]
+}

web/src/management/config/chartConfig/bar.js

@@ -0,0 +1,57 @@
+/**
+ * @Description: 柱状图配置
+ * @CreateDate: 2024-04-30
+ */
+export default (data) => {
+  const xAxisData = data.map((item) => item.name)
+  return {
+    color: ['#55A8FD'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: '{a} <br/>{b}: {c}'
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: xAxisData,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          interval: 0,
+          formatter(value) {
+            return value
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        showAllSymbol: true,
+        name: '提交人数',
+        type: 'bar',
+        barMaxWidth: 50,
+        data
+      }
+    ]
+  }
+}

web/src/management/config/chartConfig/gauge.js

@@ -0,0 +1,146 @@
+/**
+ * @Description: gauge(仪表盘)
+ * @CreateDate: 2024-04-30
+ */
+export default (data) => {
+  return {
+    series: [
+      {
+        type: 'gauge',
+        startAngle: 180,
+        endAngle: 0,
+        min: -100,
+        max: 100,
+        radius: '130%',
+        center: ['50%', '80%'],
+        splitNumber: 4,
+        z: 2,
+        axisLabel: {
+          show: false,
+          distance: 0,
+          color: '#AAB1C0',
+          fontSize: 12,
+          fontFamily: 'DaQi-Font'
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            width: 40,
+            color: [[1, '#e3efff']]
+          }
+        }
+      },
+      {
+        type: 'gauge',
+        startAngle: 174,
+        endAngle: 5,
+        min: -100,
+        max: 100,
+        radius: '130%',
+        splitNumber: 4,
+        center: ['50%', '80%'],
+        z: 3,
+        axisLabel: {
+          distance: -5,
+          color: '#666',
+          rotate: 'tangential',
+          fontSize: 12,
+          fontFamily: 'DaQi-Font'
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            width: 40,
+            color: [[1, '#e3efff']]
+          }
+        }
+      },
+      {
+        type: 'gauge',
+        startAngle: 178,
+        endAngle: 0,
+        min: -100,
+        max: 100,
+        radius: '109%',
+        z: 4,
+        center: ['50%', '80%'],
+        splitNumber: 4,
+        itemStyle: {
+          color: '#58D9F9'
+        },
+        progress: {
+          show: true,
+          roundCap: true,
+          width: 15,
+          itemStyle: {
+            color: '#55A8FD',
+            shadowBlur: 10,
+            shadowColor: '#55A8FD'
+          }
+        },
+        pointer: {
+          icon: 'triangle',
+          length: '10%',
+          width: 8,
+          offsetCenter: [0, '-80%'],
+          itemStyle: {
+            color: '#55A8FD'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            width: 15,
+            color: [[1, '#d3e5fe']]
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        axisLabel: {
+          show: false
+        },
+        title: {
+          offsetCenter: [0, '-15%'],
+          fontSize: 18,
+          color: '#666'
+        },
+        detail: {
+          fontSize: 46,
+          lineHeight: 40,
+          height: 40,
+          offsetCenter: [0, '-45%'],
+          valueAnimation: true,
+          color: '#55A8FD',
+          formatter: function (value) {
+            if (value) {
+              return value + '%'
+            } else if (value === 0) {
+              return value
+            } else {
+              return '--'
+            }
+          }
+        },
+        data: [
+          {
+            value: data,
+            name: 'NPS'
+          }
+        ]
+      }
+    ]
+  }
+}

web/src/management/config/chartConfig/index.js

@@ -0,0 +1,9 @@
+import pie from './pie'
+import bar from './bar'
+import gauge from './gauge'
+
+export const getOption = {
+  pie,
+  bar,
+  gauge
+}

web/src/management/config/chartConfig/pie.js

@@ -0,0 +1,57 @@
+const color = [
+  '#55A8FD',
+  '#36CBCB',
+  '#FAD337',
+  '#A6D6FF',
+  '#A177DC',
+  '#F46C73',
+  '#FFBA62',
+  '#ACE474',
+  '#BEECD6',
+  '#AFD2FF'
+]
+/*
+ * @Description: 饼图配置
+ * @CreateDate: 2024-04-30
+ */
+export default (data) => {
+  return {
+    color,
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 12,
+      top: 12,
+      tooltip: {
+        show: true
+      },
+      formatter(name) {
+        return name.length > 17 ? name.substr(0, 17) + '...' : name
+      }
+    },
+    series: [
+      {
+        name: '提交人数',
+        type: 'pie',
+        radius: ['50%', '80%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter({ data }) {
+            const name = data?.name || ''
+            return name.length > 17 ? name.substr(0, 17) + '...' : name
+          }
+        },
+        data
+      }
+    ]
+  }
+}

web/src/management/config/questionMenuConfig.js

@@ -1,4 +1,4 @@
-const menuItems = {
+export const menuItems = {
   text: {
     type: 'text',
     snapshot: '/imgs/question-type-snapshot/iL84te6xxU1657702189333.webp',