Merge branch 'wyf-score' into 'dev'

积分统计页和访问次数遗留内容

See merge request skyeye/skyeye_frontend/skyeye-admin!91

src/api/datamanagement/dataplatform.ts

@@ -150,3 +150,61 @@ export const getUserDailyVisitTimes = (body: ChartQuery) => {
     data: body,
   });
 };
+
+/** 获取积分列表请求体 */
+export interface ScoreTableQueryBody {
+  /** 页码 */
+  pageNumber: number;
+  /** 页面大小 */
+  pageSize: number;
+  /** 查询姓名 */
+  nickname?: string;
+  /** 查询工号 */
+  staffNo?: string;
+  /** 查询部门ID */
+  deptId?: string;
+  /** 设置排序字段 */
+  order?: number;
+  /**设置排序方式 */
+}
+
+/** 条件获取分页积分 */
+export const getScoreTable = (body: ScoreTableQueryBody) => {
+  return http.request<ScoreTableRecord>({
+    url: '/scoreManagement/getScorePageByCondition',
+    method: 'post',
+    data: body,
+  });
+};
+
+/** 用户访问记录列表数据 */
+export interface ScoreTableRecordList {
+  stuffNo: string;
+  nickname: string;
+  deptId: number;
+  deptName: string;
+  score: number;
+}
+
+/** 用户访问记录数据 */
+export interface ScoreTableRecord {
+  records: ScoreTableRecordList[];
+  pageNumber: number;
+  pageSize: number;
+  totalPage: number;
+  totalRow: number;
+}
+
+/** 获取积分分段人数 */
+export const getScoreChartData = (deptIdList: string) => {
+  return http.request<ScoreChartItem[]>({
+    url: `/scoreManagement/getNumOfSectionScore?deptIdList=${deptIdList}`,
+    method: 'get',
+  });
+};
+
+/** 积分分段数据 */
+export interface ScoreChartItem {
+  num: number;
+  scoreSection: number[];
+}

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

@@ -101,22 +101,6 @@
           data: item.counts,
         };
       }),
-      // [
-      //   {
-      //     name: '日期',
-      //     type: 'line',
-      //     showSymbol: false,
-      //     data: props.chartData,
-      //   },
-      //   // TODO 根据返回数据维度添加
-      // ],
-      // res.map(item => {
-      //   return {
-      //     name: item.name,
-      //     type: 'line',
-      //     data: item.data,
-      //   };
-      // }),
     };
     console.log(lineOption);
 

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/PlatformTable.vue

@@ -17,7 +17,21 @@
           </el-select>
         </template>
       </el-input>
-      <div style="float: right">
+      <div class="dept-select">
+        <span>请选择组织：</span>
+        <el-tree-select
+          v-model="tableQueryDept"
+          :data="props.departmentList"
+          :render-after-expand="false"
+          :default-expand-all="true"
+          @change="handleDeptChange"
+          style="width: 200px"
+          check-strictly
+          placeholder="请选择组织"
+          class="protocal-select"
+        />
+      </div>
+      <div style="min-width: 150px; float: right">
         <el-button type="primary" @click="submitTableQuery" style="width: 65px; height: 32px"
           >搜 索</el-button
         >
@@ -36,12 +50,14 @@
       <el-table-column label="工号" prop="username" align="center"></el-table-column>
       <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
       <el-table-column
+        v-if="tableLabel === '访问次数'"
         :label="'当日' + props.tableLabel"
         prop="statisticDay"
         sortable="custom"
         align="right"
       ></el-table-column>
       <el-table-column
+        v-if="tableLabel === '访问次数'"
         :label="'本月' + tableLabel"
         prop="statisticMonth"
         sortable="custom"
@@ -51,7 +67,7 @@
         :label="'累计' + tableLabel"
         prop="statisticAll"
         sortable="custom"
-        align="right"
+        :align="tableLabel === '访问次数' ? 'right' : 'center'"
       ></el-table-column>
       <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
         <template #default="scope">
@@ -125,6 +141,7 @@
 
   // 获取下拉菜单数据和表格数据
   const props = defineProps<{
+    departmentList: any[];
     workshopList: any[];
     tableData: UserAccessRecordList;
     tableLabel: string;
@@ -163,8 +180,6 @@
       delete tableQueryParams.value.sortType;
     }
     tableQueryParams.value.pageNumber = 1;
-    // console.log(tableQueryParams.value);
-    // TODO 替换
     emits('tableParamsChanged', tableQueryParams.value);
   };
 
@@ -178,6 +193,12 @@
     }
     tableQueryTypeContent.value = '';
   };
+
+  // 部门筛选框变化
+  const handleDeptChange = (v: string) => {
+    tableQueryParams.value.deptId = v;
+  };
+
   // 复用输入框绑定内容、提交事件、重置事件
   const tableQueryTypeContent = ref<string>();
   function submitTableQuery() {
@@ -190,12 +211,15 @@
   }
   function resetTable() {
     tableQueryTypeContent.value = '';
+    tableQueryDept.value = undefined;
     tableQueryParams.value = {
       pageNumber: 1,
       pageSize: 10,
     };
     emits('tableParamsChanged', tableQueryParams.value);
   }
+  // 组织列表筛选数据
+  const tableQueryDept = ref<string>();
 
   // dialog显示和画图
   const chartTitle = ref('');
@@ -256,5 +280,9 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    .dept-select {
+      min-width: 300px;
+      margin-right: 50px;
+    }
   }
 </style>

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="form">
+    <div class="table-query-form">
+      <el-input
+        v-model="tableQueryTypeContent"
+        style="max-width: 251px; margin-right: 50px"
+        :placeholder="'请输入' + tableQueryType"
+      >
+        <template #prepend>
+          <el-select
+            v-model="tableQueryType"
+            style="width: 74px"
+            @change="handleTableQueryTypeChange"
+          >
+            <el-option value="姓名" />
+            <el-option value="工号" />
+          </el-select>
+        </template>
+      </el-input>
+      <div class="dept-select">
+        <span>请选择组织：</span>
+        <el-tree-select
+          v-model="tableQueryDept"
+          :data="props.departmentList"
+          :render-after-expand="false"
+          :default-expand-all="true"
+          @change="handleDeptChange"
+          style="width: 200px"
+          check-strictly
+          placeholder="请选择组织"
+          class="protocal-select"
+        />
+      </div>
+      <div style="float: right">
+        <el-button type="primary" @click="submitTableQuery" style="width: 65px; height: 32px"
+          >搜 索</el-button
+        >
+        <el-button @click="resetTable" style="width: 65px; height: 32px">重 置</el-button>
+      </div>
+    </div>
+    <el-table
+      max-height="calc(100vh - 350px)"
+      style="width: 100%; margin-top: 18px"
+      stripe
+      :data="tableData.records"
+      highlight-current-row
+      @sort-change="handleSortChange"
+    >
+      <el-table-column label="姓名" prop="nickname" 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="累计积分"
+        prop="score"
+        sortable="custom"
+        align="center"
+      ></el-table-column>
+    </el-table>
+    <el-pagination
+      v-model="tableQueryParams.pageNumber"
+      v-model:currentPageSize="tableQueryParams.pageSize"
+      :total="tableData.totalRow"
+      :page-sizes="[10, 20, 50, 100, 200]"
+      layout="->, total,sizes,prev,pager,next,jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentPageChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { defineProps } from 'vue';
+  import {
+    type ScoreTableRecord,
+    type ScoreTableQueryBody,
+  } from '@/api/datamanagement/dataplatform';
+
+  // 获取下拉菜单数据和表格数据
+  const props = defineProps<{
+    departmentList: any[];
+    tableData: ScoreTableRecord;
+  }>();
+
+  // 组织列表筛选数据
+  const tableQueryDept = ref<number>();
+
+  // 表格查询参数和修改事件
+  const tableQueryParams = ref<ScoreTableQueryBody>({
+    pageNumber: 1,
+    pageSize: 10,
+    deptId: '',
+    // nickname: "",
+    // staffNo: "",
+    // order: "",
+  });
+  const emits = defineEmits<{
+    (e: 'tableParamsChanged', parmas: ScoreTableQueryBody);
+  }>();
+
+  // 页码导航栏修改事件
+  const handleSizeChange = (v: number) => {
+    tableQueryParams.value.pageSize = v;
+    emits('tableParamsChanged', tableQueryParams.value);
+  };
+  const handleCurrentPageChange = (v: number) => {
+    tableQueryParams.value.pageNumber = v;
+    emits('tableParamsChanged', tableQueryParams.value);
+  };
+
+  // 表格排序事件
+  const handleSortChange = (data: any) => {
+    if (data.order !== null) {
+      tableQueryParams.value.order = data.order.includes('a') ? 1 : 2;
+    } else {
+      delete tableQueryParams.value.order;
+    }
+    tableQueryParams.value.pageNumber = 1;
+    emits('tableParamsChanged', tableQueryParams.value);
+  };
+
+  // 复用输入框类型和变化事件
+  const tableQueryType = ref<string>('姓名');
+  const handleTableQueryTypeChange = (v: string) => {
+    if (v === '姓名') {
+      delete tableQueryParams.value.staffNo;
+    } else {
+      delete tableQueryParams.value.nickname;
+    }
+    tableQueryTypeContent.value = '';
+  };
+  // 部门筛选框变化
+  const handleDeptChange = (v: string) => {
+    tableQueryParams.value.deptId = v;
+  };
+  // 复用输入框绑定内容、提交事件、重置事件
+  const tableQueryTypeContent = ref<string>();
+  function submitTableQuery() {
+    if (tableQueryType.value === '姓名') {
+      tableQueryParams.value.nickname = tableQueryTypeContent.value;
+    } else {
+      tableQueryParams.value.staffNo = tableQueryTypeContent.value;
+    }
+    emits('tableParamsChanged', tableQueryParams.value);
+  }
+  function resetTable() {
+    tableQueryTypeContent.value = '';
+    tableQueryDept.value = undefined;
+    tableQueryParams.value = {
+      pageNumber: 1,
+      pageSize: 10,
+    };
+    emits('tableParamsChanged', tableQueryParams.value);
+  }
+</script>
+
+<style scoped lang="scss">
+  .testbox {
+    width: 930px;
+    height: 480px;
+  }
+  .form {
+    /* width: 1100px; */
+    margin-top: 18px;
+  }
+
+  .el-pagination {
+    margin-top: 30px;
+  }
+
+  .table-query-form {
+    padding-right: 25px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .dept-select {
+      min-width: 300px;
+      margin-right: 50px;
+    }
+  }
+</style>

src/views/datamanager/platformdata/components/query/Query.vue

@@ -2,14 +2,15 @@
   <div>
     <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
     <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
-    <PlatformTable
+    <QueryTable
       v-if="flattenedWorkshops.length > 0 && tableData !== undefined"
+      :department-list="departmentList"
       :workshop-list="flattenedWorkshops"
       :table-data="tableData"
       table-label="访问次数"
       @table-params-changed="
         (v) => {
-          tableQueryParams = v;
+          tableQueryParams = _.cloneDeep(v);
         }
       "
     />
@@ -25,7 +26,6 @@
         :workshop-list="dialogTitle === '相机统计数据' ? flattenedWorkshops : undefined"
         @chart-params-changed="
           async (v) => {
-            console.log(v);
             await getChartData(v);
           }
         "
@@ -36,10 +36,10 @@
 </template>
 
 <script setup lang="ts">
-  import PlatformTable from '../common/PlatformTable.vue';
+  import QueryTable from '../common/QueryTable.vue';
   import DialogNavBar from '../common/DialogNavBar.vue';
   import BarChart from '../../charts/BarChart.vue';
-  import { ref, onBeforeMount, watch } from 'vue';
+  import { ref, onMounted, watch } from 'vue';
   import { useSceneInfos } from '@/hooks/useSceneInfos';
   import {
     type UserAccessRecordQueryParams,
@@ -50,12 +50,23 @@
     getWorkshopVisitedTimes,
   } from '@/api/datamanagement/dataplatform';
   import { formatWorkshopChart, formatCameraChart } from '@/utils/platformUtils';
+  import { deptTreeList } from '@/api/auth/dept';
+  import _ from 'lodash-es';
+
+  const departmentList = ref<any[]>([]);
 
   // 下拉菜单车间列表数据
   const sceneInfos = useSceneInfos();
-  const { flattenedWorkshops, getScenesTree } = sceneInfos;
-  onBeforeMount(() => {
+  const { flattenedWorkshops, getScenesTree, calculateTreeData } = sceneInfos;
+  onMounted(() => {
     getScenesTree({ level: 1, valueKey: 'code', labelKey: 'name', disabled: true });
+    deptTreeList().then((res) => {
+      departmentList.value = calculateTreeData(
+        res,
+        { level: 3, valueKey: 'deptId', labelKey: 'deptName' },
+        1,
+      );
+    });
   });
 
   // dialog显示

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

@@ -1,164 +1,162 @@
 <template>
   <div>
-    <el-button type="primary">数据总表</el-button>
-    <PlatformTable :table-data="tableData" table-label="积分"/>
+    <el-button type="primary" @click="onOpenScoreChart">数据总表</el-button>
+    <ScoreTable
+      v-if="tableData !== undefined"
+      :department-list="departmentList"
+      :table-data="tableData"
+      @table-params-changed="
+        (v) => {
+          tableQueryParams = _.cloneDeep(v);
+        }
+      "
+    />
+    <el-dialog
+      v-model="dialogVisible"
+      width="1000px"
+      title="各分数段所对应人数折线图"
+      :close-on-click-modal="true"
+      :destroy-on-close="true"
+      @open="handleDialogOpen"
+      center
+    >
+      <div class="dialog-header">
+        <div class="dept-select">
+          <el-tree-select
+            v-model="dept"
+            :data="departmentList"
+            :render-after-expand="false"
+            :default-expand-all="true"
+            style="width: 240px"
+            multiple
+            clearable
+            collapse-tags
+            show-checkbox
+            check-strictly
+            placeholder="请选择组织"
+            class="protocal-select"
+          />
+        </div>
+        <el-button
+          @click="onSearch"
+          type="primary"
+          style="width: 95px; height: 32px; margin-left: 16px"
+          >生成折线图
+        </el-button>
+      </div>
+      <ScoreLineChart :chart-data="chartData.val" :chart-lable="chartData.label" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-  // import {
-  //   getList,
-  //   getMonthVisits,
-  //   getPersonalVisits,
-  //   getTodayVisits,
-  //   getTotalVisits,
-  // } from '@/api/datamanagement/dataplatform';
-  // import TableCommon from './TableCommon.vue';
-  import { ref } from 'vue';
-  // import { ElMessageBox, ElMessage } from 'element-plus';
-  import PlatformTable from '../common/PlatformTable.vue';
-  import { TableModel } from '@/api/datamanagement/dataplatform';
- 
-  const tableData = ref<TableModel[]>([
-    {
-      deptId: 1,
-      deptName: '部门1',
-      monthVisits: 1,
-      nickName: '张三',
-      staffNo: '10001',
-      todayVisits: 1,
-      totalVisits: 1,
-      userId: 10014,
+  import {
+    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 ScoreLineChart from '../../charts/ScoreLineChart.vue';
+  import { deptTreeList } from '@/api/auth/dept';
+  import _ from 'lodash-es';
+
+  const departmentList = ref<any[]>([]);
+
+  // 下拉菜单车间列表数据
+  const sceneInfos = useSceneInfos();
+  const { getScenesTree, calculateTreeData } = sceneInfos;
+  onMounted(() => {
+    getScenesTree({ level: 1, valueKey: 'code', labelKey: 'name', disabled: true });
+    deptTreeList().then((res) => {
+      departmentList.value = calculateTreeData(
+        res,
+        { level: 3, valueKey: 'deptId', labelKey: 'deptName' },
+        1,
+      );
+    });
+  });
+
+  // 请求表格数据
+  const tableQueryParams = ref<ScoreTableQueryBody>({
+    pageNumber: 1,
+    pageSize: 10,
+  });
+  const tableData = ref<ScoreTableRecord>();
+
+  watch(
+    () => tableQueryParams.value,
+    async () => {
+      getScoreTable(tableQueryParams.value).then((res) => {
+        tableData.value = res;
+      });
     },
     {
-      deptId: 2,
-      deptName: '部门2',
-      monthVisits: 2,
-      nickName: '李四',
-      staffNo: '10002',
-      todayVisits: 2,
-      totalVisits: 2,
-      userId: 10014,
+      immediate: true,
+      deep: true,
     },
-  ]);
-
-  // const type = ref('积分');
-  // // 查询数据列表
-  // function queryData(pageNumber: number, pageSize: number) {
-  //   return getList(pageNumber, pageSize)
-  //     .then((res) => {
-  //       console.log('table-querydata:', res);
-  //       return res;
-  //     })
-  //     .catch((error) => {
-  //       ElMessageBox.alert(error, '异常', {
-  //         confirmButtonText: 'OK',
-  //         callback: () => {
-  //           ElMessage({
-  //             type: 'info',
-  //             message: `查询数据失败`,
-  //           });
-  //         },
-  //       });
-  //       return Promise.reject();
-  //     });
-  // }
+  );
 
-  // // 查询今日访问次数
-  // function getDayData(userId: number) {
-  //   return getTodayVisits(userId)
-  //     .then((res) => {
-  //       console.log('table-getdaydata:', res);
-  //       return res;
-  //     })
-  //     .catch((error) => {
-  //       ElMessageBox.alert(error, '异常', {
-  //         confirmButtonText: 'OK',
-  //         callback: () => {
-  //           ElMessage({
-  //             type: 'info',
-  //             message: `查询数据失败`,
-  //           });
-  //         },
-  //       });
-  //       return Promise.reject();
-  //     });
-  // }
+  // dialog显示
+  const dialogVisible = ref(false);
+  const onOpenScoreChart = () => {
+    dialogVisible.value = true;
+  };
 
-  // // 查询本月访问次数
-  // function getMonthData(userId: number) {
-  //   console.log('table-getmonthdata:', userId);
-  //   return getMonthVisits(userId)
-  //     .then((res) => {
-  //       console.log('table-getmonthdata:', res);
-  //       return res;
-  //     })
-  //     .catch((error) => {
-  //       ElMessageBox.alert(error, '异常', {
-  //         confirmButtonText: 'OK',
-  //         callback: () => {
-  //           ElMessage({
-  //             type: 'info',
-  //             message: `查询数据失败`,
-  //           });
-  //         },
-  //       });
-  //       return Promise.reject();
-  //     });
-  // }
+  const handleDialogOpen = () => {
+    dept.value = getAllIds(departmentList.value as { value: number; children: [] }[]);
+    onSearch();
+  };
 
-  // // 查询累计访问次数
-  // function getAllData(userId: number) {
-  //   return getTotalVisits(userId)
-  //     .then((res) => {
-  //       console.log('table-getalldata:', res);
-  //       return res;
-  //     })
-  //     .catch((error) => {
-  //       ElMessageBox.alert(error, '异常', {
-  //         confirmButtonText: 'OK',
-  //         callback: () => {
-  //           ElMessage({
-  //             type: 'info',
-  //             message: `查询数据失败`,
-  //           });
-  //         },
-  //       });
-  //       return Promise.reject();
-  //     });
-  // }
+  function getAllIds(list: { value: number; children: [] }[] = [], ids: number[] = []) {
+    for (let item of list) {
+      !ids.includes(item.value) && ids.push(item.value);
+      if (item.children && item.children.length) getAllIds(item.children, ids);
+    }
+    return ids;
+  }
 
-  // // 查询个人访问次数-
-  // function getPersonalVisitsData(
-  //   deptId: number,
-  //   nickName: string,
-  //   pageNumber: number,
-  //   pageSize: number,
-  //   staffNo: string,
-  // ) {
-  //   console.log('table-getPersonalVisitsData-deptid', deptId);
-  //   console.log('table-getPersonalVisitsData-nama', nickName);
-  //   console.log('table-getPersonalVisitsData', pageNumber, pageSize);
-  //   console.log('table-getPersonalVisitsData-staffno', staffNo);
-  //   return getPersonalVisits(pageNumber, pageSize, staffNo, deptId, nickName)
-  //     .then((res) => {
-  //       console.log('table-getPersonalVisitsData:', res);
-  //       return res;
-  //     })
-  //     .catch((error) => {
-  //       ElMessageBox.alert(error, '异常', {
-  //         confirmButtonText: 'OK',
-  //         callback: () => {
-  //           ElMessage({
-  //             type: 'info',
-  //             message: `查询数据失败`,
-  //           });
-  //         },
-  //       });
-  //       return Promise.reject();
-  //     });
-  // }
+  // 折线图筛选
+  const dept = ref<number[]>([]);
+  const chartData = ref<{
+    label: number[];
+    val: any[];
+  }>({
+    label: [],
+    val: [],
+  });
+  const onSearch = () => {
+    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),
+      };
+    });
+  };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  :deep(.el-dialog__header) {
+    text-align: left;
+    border-bottom: 1px solid rgba(232, 232, 232, 1);
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+  }
+
+  :deep(.el-dialog__title) {
+    font-weight: 600;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 24px;
+  }
+  .dialog-header {
+    padding-right: 25px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
 </style>