feat: 日期选择chart组件完成

src/api/datamanagement/dataplatform.ts

@@ -60,13 +60,13 @@ export const getUserAccessRecords = (params: UserAccessRecordQueryParams) => {
  */
 export interface ChartQuery {
   /** 开始时间 */
-  startTime: Date;
+  startTime: string;
   /** 结束时间 */
-  endTime: Date;
+  endTime: string;
   /** 员工id */
   userId?: string;
   /** 车间id */
-  workshopId?: string;
+  workshopList?: number[];
 }
 
 /**
@@ -83,8 +83,8 @@ export interface WorkshopVisitedTimes {
  */
 export const getWorkshopVisitedTimes = (params: ChartQuery) => {
   return http.request<WorkshopVisitedTimes[]>({
-    url: '/userRecord/statisticByWorkshop ',
-    method: 'POST',
+    url: '/userRecord/statisticByWorkshop',
+    method: 'get',
     params,
   });
 };
@@ -104,7 +104,7 @@ export interface CameraVisitedTimes {
 export const getCameraVisitedTimes = (params: ChartQuery) => {
   return http.request<CameraVisitedTimes[]>({
     url: '/userRecord/statisticByCamera',
-    method: 'post',
+    method: 'get',
     params,
   });
 };
@@ -114,8 +114,8 @@ export const getCameraVisitedTimes = (params: ChartQuery) => {
  */
 export const getUserVisitTimes = (params: ChartQuery) => {
   return http.request<WorkshopVisitedTimes[]>({
-    url: '/userRecord/statisticByWorkshopPerUser ',
-    method: 'post',
+    url: '/userRecord/statisticByWorkshopPerUser',
+    method: 'get',
     params,
   });
 };
@@ -134,7 +134,7 @@ export interface UserDailyVisitTimes {
 export const getUserDailyVisitTimes = (params: ChartQuery) => {
   return http.request<UserDailyVisitTimes[]>({
     url: '/userRecord/statisticByWorkshopPerDay',
-    method: 'post',
+    method: 'get',
     params,
   });
 };

src/utils/platformUtils.ts

@@ -0,0 +1,35 @@
+import { WorkshopVisitedTimes, UserDailyVisitTimes, CameraVisitedTimes } from '@/api/datamanagement/dataplatform';
+
+/**
+ * @description 日期格式化
+ * @param date 
+ * @returns yyyy-MM-dd-hh-mm-ss-SSS
+ */
+export function formatDate(date: Date) {
+    const year = date.getFullYear();
+    const month = ("0" + (date.getMonth() + 1)).slice(-2); 
+    const day = ("0" + date.getDate()).slice(-2);
+    const hours = ("0" + date.getHours()).slice(-2);
+    const minutes = ("0" + date.getMinutes()).slice(-2);
+    const seconds = ("0" + date.getSeconds()).slice(-2);
+    const milliseconds = ("00" + date.getMilliseconds()).slice(-3);
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
+}
+
+export function formatWorkshopChart(data: WorkshopVisitedTimes[]) {
+    const label = data.map((i)=>i.workshopName);
+    const val = data.map((i)=>i.count);
+    return {label,val}
+}
+
+export function formatTimeChart(data: UserDailyVisitTimes[]) {
+    const label = data.map((i)=>i.time.match(/^.*?(\s|$)/)![0]);
+    const val = data.map((i)=>i.count);
+    return {label,val}
+}
+
+export function formatCameraChart(data: CameraVisitedTimes[]) {
+    const label = data.map((i)=>i.cameraName);
+    const val = data.map((i)=>i.count);
+    return {label,val}
+}

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

@@ -42,6 +42,9 @@
       () => {
         drawBarChart(bar);
       },
+      // {
+      //   deep: true,
+      // }
     );
   });
 
@@ -61,6 +64,8 @@
       },
       dataZoom: [
         {
+          startValue: 0,
+          endValue: 13,
           type: 'inside',
         },
       ],

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

@@ -58,6 +58,8 @@
       },
       dataZoom: [
         {
+          startValue: 0,
+          endValue: 13,
           type: 'inside',
         },
       ],
@@ -69,13 +71,13 @@
       ],
       yAxis: [
         {
-          name: '积分',
+          name: '访问次数',
           type: 'value',
         },
       ],
       series: [
         {
-          name: '分数段',
+          name: '日期',
           type: 'line',
           data: props.chartData,
         },

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

@@ -38,66 +38,44 @@
   import { onMounted, ref, watch } from 'vue';
   import { ElMessage } from 'element-plus';
   import { ChartQuery } from '@/api/datamanagement/dataplatform';
+  import { formatDate } from '@/utils/platformUtils';
 
   const checkAll = ref();
-  const selectedWorkshop = ref<string[]>();
+  const selectedWorkshop = ref<number[]>();
   const dateRange = ref<Date[]>();
 
   const props = defineProps<{
     workshopList?: any[] | undefined;
   }>();
 
+  // 参数改变事件
   const emits = defineEmits<{
     (e: 'chartParamsChanged', parmas: ChartQuery);
   }>();
 
-  // export interface DialogParams {
-  //   date: Date[];
-  //   workshops?: string[] | undefined;
-  // }
   const serchParams = ref<ChartQuery>({
-    startTime: new Date(),
-    endTime: new Date(0),
+    startTime: '',
+    endTime: '',
   });
 
   const onSearch = () => {
-    // if (!serchParams.value.date) {
-    //   ElMessage.error('请选择时间范围');
-    //   return;
-    // }
-    // if (props.workshopList !== undefined) {
-    //   if (!selectedWorkshop.value || !selectedWorkshop.value.length) {
-    //     ElMessage.error('请至少选择一个车间');
-    //     return;
-    //   }
-    //   serchParams.value.workshops = selectedWorkshop.value;
-    // }
-    // emits('chartParamsChanged');
+    if (!dateRange.value || dateRange.value[0] == null || dateRange.value[1] == null) {
+      ElMessage.error('请选择时间范围');
+      return;
+    }
+    serchParams.value.startTime = formatDate(dateRange.value[0]);
+    serchParams.value.endTime = formatDate(dateRange.value[1]);
+    if (props.workshopList !== undefined) {
+      if (!selectedWorkshop.value || !selectedWorkshop.value.length) {
+        ElMessage.error('请至少选择一个车间');
+        return;
+      }
+      serchParams.value.workshopList = selectedWorkshop.value;
+    }
+    emits('chartParamsChanged', serchParams.value);
   };
 
-  const shortcuts = [
-    {
-      text: '今天',
-      value: () => {
-        return [new Date(), new Date()];
-      },
-    },
-    {
-      text: '本月',
-      value: () => {
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1));
-        return [start, new Date()];
-      },
-    },
-    {
-      text: '累计',
-      value: () => {
-        return [new Date(0), new Date()];
-      },
-    },
-  ];
-
+  // select全选事件
   const handleCheckAll = (val: boolean) => {
     if (val) {
       selectedWorkshop.value = props.workshopList!.map((item) => item.id);
@@ -119,11 +97,37 @@
     { immediate: true },
   );
 
+  // 初始化全选
   onMounted(() => {
     if (props.workshopList !== undefined) {
       selectedWorkshop.value = props.workshopList!.map((item) => item.id);
     }
+    dateRange.value = [new Date(2000, 1, 1, 0, 0, 0), new Date()];
+    onSearch();
   });
+
+  const shortcuts = [
+    {
+      text: '今天',
+      value: () => {
+        return [new Date().setHours(0, 0, 0, 0), new Date()];
+      },
+    },
+    {
+      text: '本月',
+      value: () => {
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1));
+        return [start, new Date()];
+      },
+    },
+    {
+      text: '累计',
+      value: () => {
+        return [new Date(2000, 1, 1, 0, 0, 0), new Date()];
+      },
+    },
+  ];
 </script>
 
 <style lang="scss" scoped>

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

@@ -54,13 +54,13 @@
       <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
         <template #default="scope">
           <img
-            style="display: inline-block; margin-right: 20px"
+            style="display: inline-block; margin-right: 20px; cursor: pointer"
             src="@/assets/icons/chart-bar.png"
             alt=""
             @click="showBargraph(scope.row)"
           />
           <img
-            style="display: inline-block"
+            style="display: inline-block; cursor: pointer"
             src="@/assets/icons/chart-line.png"
             alt=""
             @click="showLinechart(scope.row)"
@@ -80,25 +80,25 @@
   </div>
   <el-dialog
     v-model="bargraphVisible"
-    :title="bargraphTitle"
+    :title="chartTitle"
     :close-on-click-modal="true"
     :destroy-on-close="true"
     width="1000px"
     center
   >
-    <DialogNavBar @params-changed="(v) => console.log(v)" />
-    <BarChart :chart-data="barData.val" :chart-lable="barData.label" />
+    <DialogNavBar @chart-params-changed="onDialogParamsChanged" />
+    <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
   </el-dialog>
   <el-dialog
     v-model="linechartVisible"
-    :title="linechartTitle"
+    :title="chartTitle"
     :close-on-click-modal="true"
     :destroy-on-close="true"
     width="1000px"
     center
   >
-    <DialogNavBar :workshop-list="workshopList" @params-changed="(v) => console.log(v)" />
-    <LineChart :chart-data="LineData.val" :chart-lable="LineData.label" />
+    <DialogNavBar :workshop-list="workshopList" @chart-params-changed="onDialogParamsChanged" />
+    <LineChart :chart-data="chartData.val" :chart-lable="chartData.label" />
   </el-dialog>
 </template>
 
@@ -109,19 +109,22 @@
   import BarChart from '../../charts/BarChart.vue';
   import LineChart from '../../charts/LineChart.vue';
   import {
-    UserAccessRecordList,
-    UserAccessRecordQueryParams,
+    type ChartQuery,
+    type UserAccessRecordList,
+    type UserAccessRecordQueryParams,
+    getUserVisitTimes,
+    getUserDailyVisitTimes,
   } from '@/api/datamanagement/dataplatform';
+  import { formatWorkshopChart, formatTimeChart } from '@/utils/platformUtils';
 
+  // 获取下拉菜单数据和表格数据
   const props = defineProps<{
     workshopList: any[];
     tableData: UserAccessRecordList;
     tableLabel: string;
   }>();
 
-  const tableQueryTypeContent = ref<string>();
-
-  const tableQueryType = ref<string>('姓名');
+  // 表格查询参数和修改事件
   const tableQueryParams = ref<UserAccessRecordQueryParams>({
     pageNumber: 1,
     pageSize: 10,
@@ -130,22 +133,24 @@
     // sortKey: "",
     // sortType: "",
   });
+  const emits = defineEmits<{
+    (e: 'tableParamsChanged', parmas: UserAccessRecordQueryParams);
+  }>();
 
-  //柱状图logo
-  const bargraphVisible = ref(false);
-  const bargraphTitle = ref('');
-  const showBargraph = (rowData) => {
-    bargraphVisible.value = true;
-    bargraphTitle.value = rowData.nickname + '访问车间统计柱状图';
+  // 页码导航栏修改事件
+  const handleSizeChange = (v: number) => {
+    tableQueryParams.value.pageSize = v;
+    emits('tableParamsChanged', tableQueryParams.value);
   };
-  //折线图logo
-  const linechartVisible = ref(false);
-  const linechartTitle = ref('');
-  const showLinechart = (rowData) => {
-    linechartVisible.value = true;
-    linechartTitle.value = rowData.nickname + '访问车间统计折线图';
+  const handleCurrentPageChange = (v: number) => {
+    tableQueryParams.value.pageNumber = v;
+    emits('tableParamsChanged', tableQueryParams.value);
   };
 
+  // TODO 表格排序事件
+
+  // 复用输入框类型和变化事件
+  const tableQueryType = ref<string>('姓名');
   const handleTableQueryTypeChange = (v: string) => {
     if (v === '姓名') {
       delete tableQueryParams.value.username;
@@ -153,21 +158,8 @@
       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);
-  }>();
-
-  // 搜索数据
+  // 复用输入框绑定内容、提交事件、重置事件
+  const tableQueryTypeContent = ref<string>();
   function submitTableQuery() {
     if (tableQueryType.value === '姓名') {
       tableQueryParams.value.nickname = tableQueryTypeContent.value;
@@ -176,30 +168,53 @@
     }
     emits('tableParamsChanged', tableQueryParams.value);
   }
-
-  // 重置表单
   function resetTable() {
-    emits('tableParamsChanged', {
+    tableQueryTypeContent.value = '';
+    tableQueryParams.value = {
       pageNumber: 1,
       pageSize: 10,
-    });
+    };
+    emits('tableParamsChanged', tableQueryParams.value);
   }
 
-  const barData = ref<{
-    label: string[];
-    val: number[];
-  }>({
-    label: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6'],
-    val: [9, 66, 77, 82, 35, 100],
-  });
+  // dialog显示和画图
+  const chartTitle = ref('');
+  const ChartQueryUserId = ref('');
+  const bargraphVisible = ref(false);
+  const showBargraph = (rowData) => {
+    bargraphVisible.value = true;
+    chartTitle.value = rowData.nickname + '访问车间统计柱状图';
+    ChartQueryUserId.value = rowData.userId;
+  };
+  const linechartVisible = ref(false);
+  const showLinechart = (rowData) => {
+    linechartVisible.value = true;
+    chartTitle.value = rowData.nickname + '访问车间统计折线图';
+    ChartQueryUserId.value = rowData.userId;
+  };
 
-  const LineData = ref<{
+  // 请求画图数据
+  const getChartData = async (cp: ChartQuery) => {
+    if (chartTitle.value.includes('柱状')) {
+      const data = await getUserVisitTimes(cp);
+      chartData.value = formatWorkshopChart(data);
+    } else {
+      const data = await getUserDailyVisitTimes(cp);
+      chartData.value = formatTimeChart(data);
+      // TODO 整理数据传入chartData
+    }
+  };
+  const chartData = ref<{
     label: string[];
     val: number[];
   }>({
-    label: ['日期1', '日期2', '日期3', '日期4', '日期5', '日期6'],
-    val: [9, 56, 77, 802, 0, 100],
+    label: [],
+    val: [],
   });
+  const onDialogParamsChanged = async (v: ChartQuery) => {
+    v.userId = ChartQueryUserId.value;
+    await getChartData(v);
+  };
 </script>
 
 <style scoped lang="scss">

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

@@ -3,7 +3,7 @@
     <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
     <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
     <PlatformTable
-      v-if="flattenedWorkshops.length !== 0 && tableData !== undefined"
+      v-if="flattenedWorkshops.length > 0 && tableData !== undefined"
       :workshop-list="flattenedWorkshops"
       :table-data="tableData"
       table-label="访问次数"
@@ -26,6 +26,7 @@
         @chart-params-changed="
           (v) => {
             console.log(v);
+            getChartData(v);
           }
         "
       />
@@ -41,107 +42,74 @@
   import { ref, onBeforeMount, watch } from 'vue';
   import { useSceneInfos } from '@/hooks/useSceneInfos';
   import {
-    UserAccessRecordQueryParams,
-    UserAccessRecordList,
+    type UserAccessRecordQueryParams,
+    type UserAccessRecordList,
+    type ChartQuery,
     getUserAccessRecords,
-    ChartQuery,
     getCameraVisitedTimes,
     getWorkshopVisitedTimes,
   } from '@/api/datamanagement/dataplatform';
+  import { formatWorkshopChart, formatCameraChart } from '@/utils/platformUtils';
 
+  // 下拉菜单车间列表数据
   const sceneInfos = useSceneInfos();
   const { flattenedWorkshops, getScenesTree } = sceneInfos;
   onBeforeMount(() => {
     getScenesTree({ level: 1, valueKey: 'code', labelKey: 'name', disabled: true });
   });
 
+  // dialog显示
   const dialogVisible = ref(false);
   const dialogTitle = ref('');
-
   const showWorkshopData = () => {
     dialogVisible.value = true;
     dialogTitle.value = '车间统计数据';
   };
-
   const showCameraData = () => {
     dialogVisible.value = true;
     dialogTitle.value = '相机统计数据';
   };
 
+  // 请求画图数据
+  const getChartData = async (cp: ChartQuery) => {
+    if (dialogTitle.value.includes('车间')) {
+      const data = await getWorkshopVisitedTimes(cp);
+      chartData.value = formatWorkshopChart(data);
+    } else {
+      const data = await getCameraVisitedTimes(cp);
+      chartData.value = formatCameraChart(data);
+      // TODO 解决车间多选参数的问题
+    }
+  };
+  const chartData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: [],
+    val: [],
+  });
+
+  // 请求表格数据
   const tableQueryParams = ref<UserAccessRecordQueryParams>({
     pageNumber: 1,
     pageSize: 10,
-    nickname: '',
-    username: '',
-    sortKey: '',
-    sortType: '',
+    // nickname: '',
+    // username: '',
+    // sortKey: '',
+    // sortType: '',
   });
-
   const tableData = ref<UserAccessRecordList>();
-
   watch(
     () => tableQueryParams.value,
     async () => {
       const data = await getUserAccessRecords(tableQueryParams.value);
       tableData.value = data;
-      // tableData.value = {
-      //   pageNumber: 1,
-      //   pageSize: 10,
-      //   total: 1,
-      //   list: [
-      //     {
-      //       userId: 1,
-      //       username: 'string',
-      //       nickname: 'string',
-      //       deptId: 1,
-      //       deptName: 'string',
-      //       statisticDay: 1,
-      //       statisticMonth: 1,
-      //       statisticAll: 1,
-      //     },
-      //   ],
-      // };
     },
     {
       immediate: true,
       deep: true,
     },
   );
-
-  const ChartQueryParams = ref<ChartQuery>();
-  const chartData = ref({
-    label: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6'],
-    val: [9, 66, 77, 82, 35, 100],
-  });
-
-  watch(
-    () => ChartQueryParams.value,
-    async (v) => {
-      if (dialogTitle.value === '相机统计数据') {
-        const data = await getCameraVisitedTimes(v!);
-        console.log(data);
-        // chartData.value.val = data;
-      } else {
-        const data = await getWorkshopVisitedTimes(v!);
-        console.log(data);
-        // chartData.value.label = data;
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  // const workshopData = ref({
-  //   label: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6'],
-  //   val: [9, 66, 77, 82, 35, 100],
-  // });
-
-  // const cameraData = ref({
-  //   label: ['相机1', '相机2', '相机3', '相机4', '相机5', '相机6'],
-  //   val: [99, 66, 77, 82, 35, 1],
-  // });
 </script>
 
 <style scoped lang="scss">