platform页面渲染

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

@@ -14,7 +14,7 @@
         :placeholder="'请输入' + searchLabel"
       >
         <template #prepend>
-          <el-select v-model="searchLabel" style="width: 70px">
+          <el-select v-model="searchLabel" style="width: 74px">
             <el-option value="姓名" />
             <el-option value="工号" />
           </el-select>
@@ -48,33 +48,34 @@
 
     <el-table
       style="width: 100%; margin-top: 18px"
-      :data="tableData"
       stripe
+      :data="tableData"
       highlight-current-row
       :default-sort="{ prop: 'todayVisits', order: 'descending' }"
     >
+
       <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="当日访问次数"
+        :label="'当日' + tableLabel"
         prop="todayVisits"
         sortable
         align="right"
       ></el-table-column>
       <el-table-column
-        label="本月访问次数"
+        :label="'本月' + tableLabel"
         prop="monthVisits"
         sortable
         align="right"
       ></el-table-column>
       <el-table-column
-        label="累计访问次数"
+        :label="'累计' + tableLabel"
         prop="totalVisits"
         sortable
         align="right"
       ></el-table-column>
-      <el-table-column label="访问次数统计图" align="center">
+      <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
         <img
           style="display: inline-block; margin-right: 20px"
           src="@/assets/icons/chart-bar.png"
@@ -97,136 +98,20 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { defineProps } from 'vue';
   import { FormInstance } from 'element-plus';
   import { DepartMentModel } from '@/api/datamanagement/dataplatform';
+  import { TableModel } from '../../compoents/query/Query.vue';
   // import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
 
   const searchLabel = ref('姓名');
   const searchValue = ref('');
 
-  export interface TableModel {
-    deptId: number;
-    deptName: string;
-    monthVisits: number;
-    nickName: string;
-    staffNo: string;
-    todayVisits: number;
-    totalVisits: number;
-    userId: number;
-  }
-
-  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,
-    },
-    {
-      deptId: 3,
-      deptName: '部门3',
-      monthVisits: 3,
-      nickName: '王五',
-      staffNo: '10003',
-      todayVisits: 3,
-      totalVisits: 3,
-      userId: 10014,
-    },
-    {
-      deptId: 4,
-      deptName: '部门4',
-      monthVisits: 4,
-      nickName: '赵六',
-      staffNo: '10004',
-      todayVisits: 4,
-      totalVisits: 4,
-      userId: 10014,
-    },
-    {
-      deptId: 5,
-      deptName: '部门5',
-      monthVisits: 5,
-      nickName: '孙七',
-      staffNo: '10005',
-      todayVisits: 5,
-      totalVisits: 5,
-      userId: 10014,
-    },
-    {
-      deptId: 6,
-      deptName: '部门6',
-      monthVisits: 6,
-      nickName: '周八',
-      staffNo: '10006',
-      todayVisits: 6,
-      totalVisits: 6,
-      userId: 10014,
-    },
-    {
-      deptId: 7,
-      deptName: '部门7',
-      monthVisits: 7,
-      nickName: '吴九',
-      staffNo: '10007',
-      todayVisits: 7,
-      totalVisits: 7,
-      userId: 10014,
-    },
-    {
-      deptId: 8,
-      deptName: '部门8',
-      monthVisits: 8,
-      nickName: '郑十',
-      staffNo: '10008',
-      todayVisits: 8,
-      totalVisits: 8,
-      userId: 10014,
-    },
-    {
-      deptId: 9,
-      deptName: '部门9',
-      monthVisits: 9,
-      nickName: '王十一',
-      staffNo: '10009',
-      todayVisits: 9,
-      totalVisits: 9,
-      userId: 10014,
-    },
-    {
-      deptId: 10,
-      deptName: '部门10',
-      monthVisits: 10,
-      nickName: '李十二',
-      staffNo: '10010',
-      todayVisits: 10,
-      totalVisits: 10,
-      userId: 10014,
-    },
-    {
-      deptId: 11,
-      deptName: '部门11',
-      monthVisits: 11,
-      nickName: '赵十三',
-      staffNo: '10011',
-      todayVisits: 11,
-      totalVisits: 11,
-      userId: 10014,
-    },
-  ]);
+  const props = defineProps<{
+    tableData: TableModel[],
+    tableLabel: string,
+  }>();
+  console.log(props.tableData);
 
   export interface FormModelCommon {
     dept: string;
@@ -247,6 +132,7 @@
   // 搜索数据
   function submitForm(formE1: FormInstance | undefined) {
     console.log('搜索数据');
+
     if (!formE1) return;
     // formE1.validate((valid, fields) => {
     //     if (valid) {
@@ -403,7 +289,7 @@
     margin-top: 18px;
   }
 
-  /* .el-pagination {
+  .el-pagination {
     margin-top: 30px;
-} */
+  } 
 </style>

src/views/datamanager/platformdata/compoents/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 />
+    <PlatformTable :table-data="tableData" table-label="访问次数"/>
     <el-dialog v-model="chartDialogVisible" width="800px" :close-on-click-modal="true" center>
       <ChartIndex />
     </el-dialog>
@@ -26,6 +26,120 @@
     chartDialogVisible.value = true;
   };
 
+  export interface TableModel {
+    deptId: number;
+    deptName: string;
+    monthVisits: number;
+    nickName: string;
+    staffNo: string;
+    todayVisits: number;
+    totalVisits: number;
+    userId: number;
+  }
+
+  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,
+    },
+    {
+      deptId: 3,
+      deptName: '部门3',
+      monthVisits: 3,
+      nickName: '王五',
+      staffNo: '10003',
+      todayVisits: 3,
+      totalVisits: 3,
+      userId: 10014,
+    },
+    {
+      deptId: 4,
+      deptName: '部门4',
+      monthVisits: 4,
+      nickName: '赵六',
+      staffNo: '10004',
+      todayVisits: 4,
+      totalVisits: 4,
+      userId: 10014,
+    },
+    {
+      deptId: 5,
+      deptName: '部门5',
+      monthVisits: 5,
+      nickName: '孙七',
+      staffNo: '10005',
+      todayVisits: 5,
+      totalVisits: 5,
+      userId: 10014,
+    },
+    {
+      deptId: 6,
+      deptName: '部门6',
+      monthVisits: 6,
+      nickName: '周八',
+      staffNo: '10006',
+      todayVisits: 6,
+      totalVisits: 6,
+      userId: 10014,
+    },
+    {
+      deptId: 7,
+      deptName: '部门7',
+      monthVisits: 7,
+      nickName: '吴九',
+      staffNo: '10007',
+      todayVisits: 7,
+      totalVisits: 7,
+      userId: 10014,
+    },
+    {
+      deptId: 8,
+      deptName: '部门8',
+      monthVisits: 8,
+      nickName: '郑十',
+      staffNo: '10008',
+      todayVisits: 8,
+      totalVisits: 8,
+      userId: 10014,
+    },
+    {
+      deptId: 9,
+      deptName: '部门9',
+      monthVisits: 9,
+      nickName: '王十一',
+      staffNo: '10009',
+      todayVisits: 9,
+      totalVisits: 9,
+      userId: 10014,
+    },
+    {
+      deptId: 10,
+      deptName: '部门10',
+      monthVisits: 10,
+      nickName: '李十二',
+      staffNo: '10010',
+      todayVisits: 10,
+      totalVisits: 10,
+      userId: 10014,
+    }
+  ]);
+
   // // 查询访问次数列表
   // function queryData(pageNumber: number, pageSize: number) {
   //     return getList(pageNumber, pageSize).then((res) => {

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

@@ -1,138 +1,164 @@
 <template>
   <div>
-    <!-- <TableCommon :type="type" :query-data="queryData" :current-day-data="getDayData" :current-month-data="getMonthData"
-            :current-all-data="getAllData" :get-personal-visits="getPersonalVisitsData" /> -->
+    <el-button type="primary">数据总表</el-button>
+    <PlatformTable :table-data="tableData" table-label="积分"/>
   </div>
 </template>
 
 <script setup lang="ts">
-  import {
-    getList,
-    getMonthVisits,
-    getPersonalVisits,
-    getTodayVisits,
-    getTotalVisits,
-  } from '@/api/datamanagement/dataplatform';
+  // 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';
-  const type = ref('积分');
+  // import { ElMessageBox, ElMessage } from 'element-plus';
+  import PlatformTable from '../common/PlatformTable.vue';
+  import { TableModel } from '../query/Query.vue';
+ 
+  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,
+    },
+  ]);
 
-  // 查询数据列表
-  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 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();
-      });
-  }
+  // // 查询今日访问次数
+  // 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();
+  //     });
+  // }
 
-  // 查询本月访问次数
-  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();
-      });
-  }
+  // // 查询本月访问次数
+  // 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();
+  //     });
+  // }
 
-  // 查询累计访问次数
-  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 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 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();
-      });
-  }
+  // // 查询个人访问次数-
+  // 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();
+  //     });
+  // }
 </script>
 
-<style scoped></style>
+<style scoped>
+</style>