feat: 积分统计表格

src/api/datamanagement/dataplatform.ts

@@ -150,3 +150,62 @@ 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',
+    method: 'get',
+    params: deptIdList,
+  });
+};
+
+/** 积分分段数据 */
+export interface ScoreChartItem {
+  num: number;
+  scoreSection: number[];
+}

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

@@ -17,19 +17,20 @@
           </el-select>
         </template>
       </el-input>
-      <div>
+      <div class="dept-select">
         <span>请选择组织：</span>
         <el-tree-select
           v-model="tableQueryDept"
           :data="props.departmentList"
           :render-after-expand="false"
           :default-expand-all="true"
+          style="width: 200px"
           check-strictly
           placeholder="请选择组织"
           class="protocal-select"
         />
       </div>
-      <div style="float: right">
+      <div style="min-width: 150px; float: right">
         <el-button type="primary" @click="submitTableQuery" style="width: 65px; height: 32px"
           >搜 索</el-button
         >
@@ -170,6 +171,8 @@
 
   // 表格排序事件
   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';
@@ -178,8 +181,6 @@
       delete tableQueryParams.value.sortType;
     }
     tableQueryParams.value.pageNumber = 1;
-    // console.log(tableQueryParams.value);
-    // TODO 替换
     emits('tableParamsChanged', tableQueryParams.value);
   };
 
@@ -273,5 +274,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="stuffNo" 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.totalPage"
+      :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,7 +2,7 @@
   <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"
@@ -26,7 +26,6 @@
         :workshop-list="dialogTitle === '相机统计数据' ? flattenedWorkshops : undefined"
         @chart-params-changed="
           async (v) => {
-            console.log(v);
             await getChartData(v);
           }
         "
@@ -37,7 +36,7 @@
 </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, onMounted, watch } from 'vue';

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

@@ -1,164 +1,84 @@
 <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 = v;
+        }
+      "
+    />
+    <el-dialog
+      v-model="dialogVisible"
+      width="1000px"
+      title="dialogTitle"
+      :close-on-click-modal="true"
+      :destroy-on-close="true"
+      center
+    >
+      <div>各分数段所对应人数折线图</div>
+      <!-- <LineChart :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,
-    },
-    {
-      deptId: 2,
-      deptName: '部门2',
-      monthVisits: 2,
-      nickName: '李四',
-      staffNo: '10002',
-      todayVisits: 2,
-      totalVisits: 2,
-      userId: 10014,
-    },
-  ]);
+  import {
+    type ScoreTableRecord,
+    type ScoreTableQueryBody,
+    getScoreTable,
+  } 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 { deptTreeList } from '@/api/auth/dept';
+  // import { formatWorkshopChart, formatTimeChart } from '@/utils/platformUtils';
 
-  // 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();
-  //     });
-  // }
+  const departmentList = ref<any[]>([]);
 
-  // // 查询今日访问次数
-  // 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();
-  //     });
-  // }
+  // 下拉菜单车间列表数据
+  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,
+      );
+    });
+  });
 
-  // // 查询本月访问次数
-  // 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();
-  //     });
-  // }
+  // dialog显示
+  const dialogVisible = ref(false);
+  const onOpenScoreChart = () => {
+    dialogVisible.value = true;
+  };
 
-  // // 查询累计访问次数
-  // 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();
-  //     });
-  // }
+  // 请求表格数据
+  const tableQueryParams = ref<ScoreTableQueryBody>({
+    pageNumber: 1,
+    pageSize: 10,
+  });
+  const tableData = ref<ScoreTableRecord>();
 
-  // // 查询个人访问次数-
-  // 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();
-  //     });
-  // }
+  watch(
+    () => tableQueryParams.value,
+    async () => {
+      getScoreTable(tableQueryParams.value).then((res) => {
+        tableData.value = res;
+      });
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>