feat: 平台数据加入部门筛选&积分折线图&接口联调

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/components/common/QueryTable.vue

@@ -24,6 +24,7 @@
           :data="props.departmentList"
           :render-after-expand="false"
           :default-expand-all="true"
+          @change="handleDeptChange"
           style="width: 200px"
           check-strictly
           placeholder="请选择组织"
@@ -171,8 +172,6 @@
 
   // 表格排序事件
   const handleSortChange = (data: any) => {
-    console.log(data);
-
     if (data.order !== null) {
       tableQueryParams.value.sortKey = data.prop;
       tableQueryParams.value.sortType = data.order.includes('a') ? 'asc' : 'desc';
@@ -194,6 +193,12 @@
     }
     tableQueryTypeContent.value = '';
   };
+
+  // 部门筛选框变化
+  const handleDeptChange = (v: string) => {
+    tableQueryParams.value.deptId = v;
+  };
+
   // 复用输入框绑定内容、提交事件、重置事件
   const tableQueryTypeContent = ref<string>();
   function submitTableQuery() {
@@ -206,6 +211,7 @@
   }
   function resetTable() {
     tableQueryTypeContent.value = '';
+    tableQueryDept.value = undefined;
     tableQueryParams.value = {
       pageNumber: 1,
       pageSize: 10,

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

@@ -10,7 +10,7 @@
       table-label="访问次数"
       @table-params-changed="
         (v) => {
-          tableQueryParams = v;
+          tableQueryParams = _.cloneDeep(v);
         }
       "
     />
@@ -51,6 +51,7 @@
   } from '@/api/datamanagement/dataplatform';
   import { formatWorkshopChart, formatCameraChart } from '@/utils/platformUtils';
   import { deptTreeList } from '@/api/auth/dept';
+  import _ from 'lodash-es';
 
   const departmentList = ref<any[]>([]);
 

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

@@ -7,7 +7,7 @@
       :table-data="tableData"
       @table-params-changed="
         (v) => {
-          tableQueryParams = v;
+          tableQueryParams = _.cloneDeep(v);
         }
       "
     />
@@ -17,18 +17,20 @@
       title="各分数段所对应人数折线图"
       :close-on-click-modal="true"
       :destroy-on-close="true"
-      @close="dept = []"
+      @open="handleDialogOpen"
       center
     >
-      <div>
+      <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: 200px"
+            style="width: 240px"
             multiple
+            clearable
+            collapse-tags
             show-checkbox
             check-strictly
             placeholder="请选择组织"
@@ -38,7 +40,7 @@
         <el-button
           @click="onSearch"
           type="primary"
-          style="width: 65px; height: 32px; margin-left: 16px"
+          style="width: 95px; height: 32px; margin-left: 16px"
           >生成折线图
         </el-button>
       </div>
@@ -59,7 +61,7 @@
   import ScoreTable from '../common/ScoreTable.vue';
   import ScoreLineChart from '../../charts/ScoreLineChart.vue';
   import { deptTreeList } from '@/api/auth/dept';
-  // import {  } from '@/utils/platformUtils';
+  import _ from 'lodash-es';
 
   const departmentList = ref<any[]>([]);
 
@@ -77,12 +79,6 @@
     });
   });
 
-  // dialog显示
-  const dialogVisible = ref(false);
-  const onOpenScoreChart = () => {
-    dialogVisible.value = true;
-  };
-
   // 请求表格数据
   const tableQueryParams = ref<ScoreTableQueryBody>({
     pageNumber: 1,
@@ -103,6 +99,25 @@
     },
   );
 
+  // dialog显示
+  const dialogVisible = ref(false);
+  const onOpenScoreChart = () => {
+    dialogVisible.value = true;
+  };
+
+  const handleDialogOpen = () => {
+    dept.value = getAllIds(departmentList.value as { value: number; children: [] }[]);
+    onSearch();
+  };
+
+  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;
+  }
+
   // 折线图筛选
   const dept = ref<number[]>([]);
   const chartData = ref<{
@@ -113,16 +128,35 @@
     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>
+<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>