feat: 积分折线图

src/api/datamanagement/dataplatform.ts

@@ -198,9 +198,8 @@ export interface ScoreTableRecord {
 /** 获取积分分段人数 */
 export const getScoreChartData = (deptIdList: string) => {
   return http.request<ScoreChartItem[]>({
-    url: '/scoreManagement/getNumOfSectionScore',
+    url: `/scoreManagement/getNumOfSectionScore?deptIdList=${deptIdList}`,
     method: 'get',
-    params: deptIdList,
   });
 };
 

src/views/datamanager/platformdata/charts/ScoreLineChart.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="line-chart" ref="lineChart" class="chart" :style="{ height: props.height }"></div>
+</template>
+
+<script setup lang="ts">
+  import * as echarts from 'echarts/core';
+  import {
+    GridComponent,
+    GridComponentOption,
+    DataZoomComponent,
+    DataZoomComponentOption,
+    TooltipComponent,
+  } from 'echarts/components';
+  import { LineChart, LineSeriesOption } from 'echarts/charts';
+  import { UniversalTransition } from 'echarts/features';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { onMounted, watch } from 'vue';
+
+  echarts.use([
+    GridComponent,
+    LineChart,
+    CanvasRenderer,
+    UniversalTransition,
+    DataZoomComponent,
+    TooltipComponent,
+  ]);
+  type EChartsOption = echarts.ComposeOption<
+    GridComponentOption | LineSeriesOption | DataZoomComponentOption
+  >;
+  const props = withDefaults(
+    defineProps<{
+      chartData: any[];
+      chartLable: any[];
+      height?: string;
+    }>(),
+    {
+      height: '372px',
+    },
+  );
+
+  let lineOption: EChartsOption = {} as EChartsOption;
+
+  onMounted(() => {
+    const line: echarts.ECharts = echarts.init(document.getElementById('line-chart')!);
+
+    initLineChart(line);
+  });
+
+  watch(
+    () => props.chartData,
+    () => {
+      const line: echarts.ECharts = echarts.init(document.getElementById('line-chart')!);
+      drawLineChart(line);
+    },
+    {
+      deep: true,
+    },
+  );
+
+  const initLineChart = (line: echarts.ECharts) => {
+    lineOption = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      dataZoom: [
+        {
+          startValue: 0,
+          endValue: 13,
+          type: 'inside',
+        },
+      ],
+      xAxis: [
+        {
+          type: 'category',
+          data: props.chartLable,
+        },
+      ],
+      yAxis: [
+        {
+          name: '人数',
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          showSymbol: false,
+          data: props.chartData,
+        },
+      ],
+    };
+    console.log(lineOption);
+
+    line.setOption(lineOption);
+  };
+
+  const drawLineChart = (line: echarts.ECharts) => {
+    line.clear();
+    lineOption.xAxis = [
+      {
+        type: 'category',
+        data: props.chartLable,
+      },
+    ];
+    lineOption.series = [
+      {
+        type: 'line',
+        showSymbol: false,
+        data: props.chartData,
+      },
+    ];
+    line.setOption(lineOption);
+  };
+</script>
+
+<style scoped lang="scss">
+  #line-chart {
+    width: 968px;
+    height: 372px;
+  }
+</style>

src/views/datamanager/platformdata/components/common/ScoreTable.vue

@@ -47,7 +47,7 @@
       @sort-change="handleSortChange"
     >
       <el-table-column label="姓名" prop="nickname" align="center"></el-table-column>
-      <el-table-column label="工号" prop="stuffNo" align="center"></el-table-column>
+      <el-table-column label="工号" prop="staffNo" align="center"></el-table-column>
       <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
       <el-table-column
         label="累计积分"
@@ -59,7 +59,7 @@
     <el-pagination
       v-model="tableQueryParams.pageNumber"
       v-model:currentPageSize="tableQueryParams.pageSize"
-      :total="tableData.totalPage"
+      :total="tableData.totalRow"
       :page-sizes="[10, 20, 50, 100, 200]"
       layout="->, total,sizes,prev,pager,next,jumper"
       @size-change="handleSizeChange"

src/views/datamanager/platformdata/components/score/Score.vue

@@ -14,13 +14,35 @@
     <el-dialog
       v-model="dialogVisible"
       width="1000px"
-      title="dialogTitle"
+      title="各分数段所对应人数折线图"
       :close-on-click-modal="true"
       :destroy-on-close="true"
+      @close="dept = []"
       center
     >
-      <div>各分数段所对应人数折线图</div>
-      <!-- <LineChart :chart-data="chartData.val" :chart-lable="chartData.label" /> -->
+      <div>
+        <div class="dept-select">
+          <el-tree-select
+            v-model="dept"
+            :data="departmentList"
+            :render-after-expand="false"
+            :default-expand-all="true"
+            style="width: 200px"
+            multiple
+            show-checkbox
+            check-strictly
+            placeholder="请选择组织"
+            class="protocal-select"
+          />
+        </div>
+        <el-button
+          @click="onSearch"
+          type="primary"
+          style="width: 65px; height: 32px; margin-left: 16px"
+          >生成折线图
+        </el-button>
+      </div>
+      <ScoreLineChart :chart-data="chartData.val" :chart-lable="chartData.label" />
     </el-dialog>
   </div>
 </template>
@@ -30,13 +52,14 @@
     type ScoreTableRecord,
     type ScoreTableQueryBody,
     getScoreTable,
+    getScoreChartData,
   } from '@/api/datamanagement/dataplatform';
   import { ref, onMounted, watch } from 'vue';
   import { useSceneInfos } from '@/hooks/useSceneInfos';
   import ScoreTable from '../common/ScoreTable.vue';
-  // import LineChart from '../../charts/LineChart.vue';
+  import ScoreLineChart from '../../charts/ScoreLineChart.vue';
   import { deptTreeList } from '@/api/auth/dept';
-  // import { formatWorkshopChart, formatTimeChart } from '@/utils/platformUtils';
+  // import {  } from '@/utils/platformUtils';
 
   const departmentList = ref<any[]>([]);
 
@@ -79,6 +102,27 @@
       deep: true,
     },
   );
+
+  // 折线图筛选
+  const dept = ref<number[]>([]);
+  const chartData = ref<{
+    label: number[];
+    val: any[];
+  }>({
+    label: [],
+    val: [],
+  });
+  const onSearch = () => {
+    console.log(dept.value);
+    const deptIdList = dept.value.join(',');
+    getScoreChartData(deptIdList).then((res) => {
+      chartData.value = {
+        label: res.map((item) => (item.scoreSection[0] + item.scoreSection[1]) / 2),
+        val: res.map((item) => item.num),
+      };
+      console.log(chartData.value.val);
+    });
+  };
 </script>
 
 <style scoped></style>