feat: 写表格数据接口

src/api/datamanagement/dataplatform.ts

@@ -3,39 +3,25 @@ import { http } from '@/utils/http/axios';
 /**
  * @description: 获取用户访问记录接口参数
  */
-export interface UserAccessRecordQuery {
-  /**
-   * @description: 页码
-   */
+export interface UserAccessRecordQueryParams {
+  /** 页码 */
   pageNumber: number;
-  /**
-   * @description: 页面大小
-   */
+  /** 页面大小 */
   pageSize: number;
-  /**
-   * @description: 查询员工姓名
-   */
+  /** 查询员工姓名 */
   nickname?: string;
-  /**
-   * @description: 查询工号
-   */
-  username?: number;
-  /**
-   * @description: 查询部门ID
-   */
+  /** 查询工号 */
+  username?: string;
+  /** 查询部门ID */
   deptId?: string;
-  /**
-   * @description: 设置排序字段
-   */
+  /** 设置排序字段 */
   sortKey?: string;
-  /**
-   * @description: 设置排序方式
-   */
+  /** 设置排序方式 */
   sortType?: string;
 }
 
 /**
- * @description: 用户访问记录表格数据
+ * @description: 用户访问记录列表数据
  */
 export interface UserAccessRecord {
   userId: number;
@@ -48,11 +34,21 @@ export interface UserAccessRecord {
   statisticAll: number;
 }
 
+/**
+ * @description: 用户访问记录数据
+ */
+export interface UserAccessRecordList {
+  list: UserAccessRecord[];
+  pageNumber: number;
+  pageSize: number;
+  total: number;
+}
+
 /**
  * @description: 获取用户访问记录
  */
-export const getUserAccessRecords = (data: UserAccessRecordQuery) => {
-  return http.request<UserAccessRecord[]>({
+export const getUserAccessRecords = (data: UserAccessRecordQueryParams) => {
+  return http.request<UserAccessRecordList>({
     url: '/skyeye-admin-platform-api/getList',
     method: 'get',
     data,
@@ -63,21 +59,13 @@ export const getUserAccessRecords = (data: UserAccessRecordQuery) => {
  * @description: 绘图时间段&员工&车间查询参数
  */
 export interface ChartQuery {
-  /**
-   * @description: 开始时间
-   */
+  /** 开始时间 */
   startTime: Date;
-  /**
-   * @description: 结束时间
-   */
+  /** 结束时间 */
   endTime: Date;
-  /**
-   * @description: 员工id
-  */
+  /** 员工id */
   userId?: string;
-  /**
-   * @description: 车间id
-   */
+  /** 车间id */
   workshopId?: string;
 }
 

src/views/datamanager/platformdata/compoents/common/DialogNavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="timenation">
+  <div class="dialog-nav-bar">
     <div v-if="workshopList !== undefined" class="workshop-select">
       <el-select
         v-model="selectedWorkshop"
@@ -47,7 +47,7 @@
   }>();
 
   const emits = defineEmits<{
-    (e: 'paramsChanged', parmas: DialogParams);
+    (e: 'chartParamsChanged', parmas: DialogParams);
   }>();
 
   export interface DialogParams {
@@ -71,7 +71,7 @@
       }
       serchParams.value.workshops = selectedWorkshop.value;
     }
-    emits('paramsChanged', serchParams.value);
+    emits('chartParamsChanged', serchParams.value);
   };
 
   const shortcuts = [
@@ -119,7 +119,9 @@
   );
 
   onMounted(() => {
-    selectedWorkshop.value = props.workshopList!.map((item) => item.id);
+    if (props.workshopList !== undefined) {
+      selectedWorkshop.value = props.workshopList!.map((item) => item.id);
+    }
     dateRange.value = [new Date(0), new Date()];
   });
 </script>
@@ -128,7 +130,7 @@
   .workshop-select {
     width: 250px;
   }
-  .timenation {
+  .dialog-nav-bar {
     padding-right: 25px;
     width: 100%;
     display: flex;

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

@@ -1,47 +1,35 @@
 <template>
   <div class="form">
-    <el-form ref="ruleFormRef" :model="ruleForm" inline label-width="60px">
+    <div class="table-query-form">
       <el-input
-        v-model="searchValue"
+        v-model="tableQueryTypeContent"
         style="max-width: 251px; margin-right: 50px"
-        :placeholder="'请输入' + searchLabel"
+        :placeholder="'请输入' + tableQueryType"
       >
         <template #prepend>
-          <el-select v-model="searchLabel" style="width: 74px">
+          <el-select
+            v-model="tableQueryType"
+            style="width: 74px"
+            @change="handleTableQueryTypeChange"
+          >
             <el-option value="姓名" />
             <el-option value="工号" />
           </el-select>
         </template>
       </el-input>
-      <el-form-item label="部门：" prop="dept" style="margin-bottom: 0; margin-right: 0">
-        <el-select
-          multiple
-          clearable
-          collapse-tags
-          placeholder="请添加车间"
-          v-model="ruleForm.dept"
-          :max-collapse-tags="1"
-          style="width: 240px"
-        >
-          <el-option
-            v-for="item in workshopList"
-            :key="item.id"
-            :value="item.id"
-            :label="item.name"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
       <div style="float: right">
-        <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 65px; height: 32px"
+        <el-button type="primary" @click="submitTableQuery" style="width: 65px; height: 32px"
           >搜 索</el-button
         >
-        <el-button @click="resetForm(ruleFormRef)" style="width: 65px; height: 32px"
-          >重 置</el-button
-        >
+        <el-button @click="resetTable" style="width: 65px; height: 32px">重 置</el-button>
       </div>
-    </el-form>
-    <el-table style="width: 100%; margin-top: 18px" stripe :data="tableData" highlight-current-row>
+    </div>
+    <el-table
+      style="width: 100%; margin-top: 18px"
+      stripe
+      :data="tableData.list"
+      highlight-current-row
+    >
       <el-table-column label="姓名" prop="nickname" align="center"></el-table-column>
       <el-table-column label="工号" prop="username" align="center"></el-table-column>
       <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
@@ -80,9 +68,15 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- <el-pagination v-model="currentPage" v-model:currentPageSize="currentPageSize" :page-sizes="[10, 20, 50, 100, 200]"
-            layout="->, total,sizes,prev,pager,next,jumper" :total="total" @size-change="handeSizeChange"
-            @current-change="handleCurrentPageChange" /> -->
+    <el-pagination
+      v-model="tableQueryParams.pageNumber"
+      v-model:currentPageSize="tableQueryParams.pageSize"
+      :total="tableData.total"
+      :page-sizes="[10, 20, 50, 100, 200]"
+      layout="->, total,sizes,prev,pager,next,jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentPageChange"
+    />
   </div>
   <el-dialog
     v-model="bargraphVisible"
@@ -111,50 +105,86 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { defineProps } from 'vue';
-  import { FormInstance } from 'element-plus';
   import DialogNavBar from '../common/DialogNavBar.vue';
   import BarChart from '../../charts/BarChart.vue';
   import LineChart from '../../charts/LineChart.vue';
-  import { UserAccessRecord } from '@/api/datamanagement/dataplatform';
-
-  const searchLabel = ref('姓名');
-  const searchValue = ref('');
+  import {
+    UserAccessRecordList,
+    UserAccessRecordQueryParams,
+  } from '@/api/datamanagement/dataplatform';
 
   const props = defineProps<{
     workshopList: any[];
-    tableData: UserAccessRecord[];
+    tableData: UserAccessRecordList;
     tableLabel: string;
   }>();
 
-  export interface FormModelCommon {
-    dept: string;
-    nickName: string;
-    staffNo: string;
-  }
+  const tableQueryTypeContent = ref<string>();
 
-  const ruleForm = ref<FormModelCommon>({
-    dept: '',
-    nickName: '',
-    staffNo: '',
+  const tableQueryType = ref<string>('姓名');
+  const tableQueryParams = ref<UserAccessRecordQueryParams>({
+    pageNumber: 1,
+    pageSize: 10,
+    // nickname: "",
+    // username: "",
+    // sortKey: "",
+    // sortType: "",
   });
 
-  const ruleFormRef = ref<FormInstance>();
-
   //柱状图logo
   const bargraphVisible = ref(false);
   const bargraphTitle = ref('');
   const showBargraph = (rowData) => {
     bargraphVisible.value = true;
-    bargraphTitle.value = rowData.nickName + '访问车间统计柱状图';
+    bargraphTitle.value = rowData.nickname + '访问车间统计柱状图';
   };
   //折线图logo
   const linechartVisible = ref(false);
   const linechartTitle = ref('');
   const showLinechart = (rowData) => {
     linechartVisible.value = true;
-    linechartTitle.value = rowData.nickName + '访问车间统计折线图';
+    linechartTitle.value = rowData.nickname + '访问车间统计折线图';
   };
 
+  const handleTableQueryTypeChange = (v: string) => {
+    if (v === '姓名') {
+      delete tableQueryParams.value.username;
+    } else {
+      delete tableQueryParams.value.nickname;
+    }
+  };
+
+  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 emits = defineEmits<{
+    (e: 'tableParamsChanged', parmas: UserAccessRecordQueryParams);
+  }>();
+
+  // 搜索数据
+  function submitTableQuery() {
+    if (tableQueryType.value === '姓名') {
+      tableQueryParams.value.nickname = tableQueryTypeContent.value;
+    } else {
+      tableQueryParams.value.username = tableQueryTypeContent.value;
+    }
+    emits('tableParamsChanged', tableQueryParams.value);
+  }
+
+  // 重置表单
+  function resetTable() {
+    emits('tableParamsChanged', {
+      pageNumber: 1,
+      pageSize: 10,
+    });
+  }
+
   const barData = ref<{
     label: string[];
     val: number[];
@@ -170,29 +200,6 @@
     label: ['日期1', '日期2', '日期3', '日期4', '日期5', '日期6'],
     val: [9, 56, 77, 802, 0, 100],
   });
-
-  // 搜索数据
-  function submitForm(formE1: FormInstance | undefined) {
-    console.log('搜索数据');
-    if (!formE1) return;
-    // formE1.validate((valid, fields) => {
-    //     if (valid) {
-    //         getPersonalVisits(ruleForm.value)
-    //     }
-    //     else {
-    //         console.log('error submit!', fields);s
-    //     }
-    // })
-  }
-
-  // 重置表单
-  function resetForm(formE1: FormInstance | undefined) {
-    console.log('重置表单');
-    if (!formE1) return;
-    // formE1.resetFields()
-    // console.log('resetForm')
-    // queryData();
-  }
 </script>
 
 <style scoped lang="scss">
@@ -208,4 +215,12 @@
   .el-pagination {
     margin-top: 30px;
   }
+
+  .table-query-form {
+    padding-right: 25px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
 </style>

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

@@ -3,9 +3,15 @@
     <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
     <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
     <PlatformTable
+      v-if="flattenedWorkshops.length !== 0 && tableData !== undefined"
       :workshop-list="flattenedWorkshops"
       :table-data="tableData"
       table-label="访问次数"
+      @table-params-changed="
+        (v) => {
+          tableQueryParams = v;
+        }
+      "
     />
     <el-dialog
       v-model="dialogVisible"
@@ -17,7 +23,7 @@
     >
       <DialogNavBar
         :workshop-list="dialogTitle === '相机统计数据' ? flattenedWorkshops : undefined"
-        @params-changed="(v) => console.log(v)"
+        @chart-params-changed="(v) => console.log(v)"
       />
       <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
     </el-dialog>
@@ -26,12 +32,15 @@
 
 <script setup lang="ts">
   import PlatformTable from '../common/PlatformTable.vue';
-  import { ref } from 'vue';
-  import { UserAccessRecord } from '@/api/datamanagement/dataplatform';
   import DialogNavBar from '../common/DialogNavBar.vue';
   import BarChart from '../../charts/BarChart.vue';
+  import { ref, onBeforeMount, watch } from 'vue';
   import { useSceneInfos } from '@/hooks/useSceneInfos';
-  import { onBeforeMount } from 'vue';
+  import {
+    UserAccessRecordQueryParams,
+    UserAccessRecordList,
+    getUserAccessRecords,
+  } from '@/api/datamanagement/dataplatform';
 
   const sceneInfos = useSceneInfos();
   const { flattenedWorkshops, getScenesTree } = sceneInfos;
@@ -55,7 +64,19 @@
     dialogTitle.value = '相机统计数据';
   };
 
-  const tableData = ref<UserAccessRecord[]>([]);
+  const tableQueryParams = ref<UserAccessRecordQueryParams>({
+    pageNumber: 1,
+    pageSize: 10,
+  });
+  const tableData = ref<UserAccessRecordList>();
+
+  watch(
+    () => tableQueryParams.value,
+    (val) => {
+      getUserAccessRecords(val).then();
+    },
+    { immediate: true },
+  );
 
   const workshopData = ref({
     label: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6'],
@@ -82,7 +103,4 @@
     color: rgba(0, 0, 0, 0.88);
     line-height: 24px;
   }
-  // :deep(.el-dialog__headerbtn) {
-  //   padding-top: 23px;
-  // }
 </style>