Merge remote-tracking branch '5g-origin/platform' into dev

src/api/datamanagement/dataplatform.ts

@@ -1,148 +1,145 @@
 import { http } from '@/utils/http/axios';
 
-
-
-export interface Records {
-    deptId: number,
-    deptName: string,
-    monthVisits: number,
-    nickName: string,
-    staffNo: string,
-    todayVisits: number,
-    totalVisits: number,
-    userId: number
-}
-
-
-export interface Visits<Records> {
-    pageNumber: number,
-    pageSize: number,
-    records: Records[],
-    totalPage: number,
-    totalRow: number
-}
-
-
-export interface MonthVisit {
-    visits: number,
-    workshopName: string,
-}
-
-export interface DayVisit {
-    visits: number,
-    workshopName: string,
-}
-
-export interface AllVisit {
-    visits: number,
-    workshopName: string,
-}
-
-export interface VisitsModel {
-    workshopName: string,
-    visits: number,
-}
-
-export interface DepartMentModel {
-    createDate: string,
-    deptId: number,
-    deptName: string,
-    grade: number,
-    isEnable: boolean,
-    modifyDate: string,
-    orderNum: number,
-    parent: number,
-    treePath: string,
+/**
+ * @description: 获取用户访问记录接口参数
+ */
+export interface UserAccessRecordQueryParams {
+  /** 页码 */
+  pageNumber: number;
+  /** 页面大小 */
+  pageSize: number;
+  /** 查询员工姓名 */
+  nickname?: string;
+  /** 查询工号 */
+  stuffNo?: string;
+  /** 查询部门ID */
+  deptId?: string;
+  /** 设置排序字段 */
+  sortKey?: string;
+  /** 设置排序方式 */
+  sortType?: string;
 }
 
-
-
-// 查询访问次数列表
-export function getList(pageNumber: number, pageSize: number) {
-    return http.request<Visits<Records>>({
-        url: '/platformData/getList',
-        method: 'get',
-        params: { pageNumber: pageNumber, pageSize: pageSize },
-    });
-}
-
-
-
-// 查询个人本月访问次数
-export function getMonthVisits(userId: number) {
-    return http.request<VisitsModel[]>({
-        url: '/platformData/getMonthVisits',
-        method: 'get',
-        params: { userId: userId },
-    });
-}
-
-// 查询本月数据总表
-export function getMonthSumTable(deptIdList: []) {
-    return http.request<VisitsModel[]>({
-        url: '/platformData/getMonthSumTable',
-        method: 'post',
-        params: { deptIdList: deptIdList },
-    });
+/**
+ * @description: 用户访问记录列表数据
+ */
+export interface UserAccessRecord {
+  /** 系统分配id */
+  userId: number;
+  /** 登录账户名 */
+  username: string;
+  /** 工号 */
+  stuffNo: string;
+  /** 姓名 */
+  nickname: string;
+  deptId: number;
+  deptName: string;
+  statisticDay: number;
+  statisticMonth: number;
+  statisticAll: number;
 }
 
-
-// 查询个人访问次数
-export function getPersonalVisits(pageNumber: number, pageSize: number, staffNo?: string, deptId?: number, nickName?: string) {
-    return http.request<Visits<Records>>({
-        url: '/platformData/getPersonalVisits',
-        method: 'get',
-        params: { pageNumber: pageNumber, pageSize: pageSize, staffNo: staffNo, deptId: deptId, nickName: nickName },
-    });
+/**
+ * @description: 用户访问记录数据
+ */
+export interface UserAccessRecordList {
+  list: UserAccessRecord[];
+  pageNumber: number;
+  pageSize: number;
+  total: number;
 }
 
-
-
-
-
-// 查询今日访问次数
-export function getTodayVisits(userId: number) {
-    return http.request<VisitsModel[]>({
-        url: '/platformData/getTodayVisits',
-        method: 'get',
-        params: { userId: userId },
-    });
+/**
+ * @description: 获取用户访问记录
+ */
+export const getUserAccessRecords = (params: UserAccessRecordQueryParams) => {
+  return http.request<UserAccessRecordList>({
+    url: '/userRecord/getList',
+    method: 'get',
+    params,
+  });
+};
+
+/**
+ * @description: 绘图时间段&员工&车间查询参数
+ */
+export interface ChartQuery {
+  /** 开始时间 */
+  startTime?: string;
+  /** 结束时间 */
+  endTime?: string;
+  /** 员工id */
+  userId?: string;
+  /** 车间id */
+  workshopList?: number[];
 }
 
-// 查询今日数据总表
-export function getTodaySumTable(deptIdList: []) {
-    return http.request<VisitsModel[]>({
-        url: '/platformData/getTodaySumTable',
-        method: 'post',
-        params: { deptIdList: deptIdList },
-    });
+/**
+ * @description: 车间被访问次数数据
+ */
+export interface WorkshopVisitedTimes {
+  workshopId: number;
+  workshopName: string;
+  count: number;
 }
 
-
-
-// 查询个人累计访问次数
-export function getTotalVisits(userId: number) {
-    return http.request<VisitsModel[]>({
-        url: '/platformData/getTotalVisits',
-        method: 'get',
-        params: { userId: userId },
-    });
+/**
+ * @description: 获取车间被访问次数数据
+ */
+export const getWorkshopVisitedTimes = (params: ChartQuery) => {
+  return http.request<WorkshopVisitedTimes[]>({
+    url: '/userRecord/statisticByWorkshop',
+    method: 'get',
+    params,
+  });
+};
+
+/**
+ * @description: 相机被访问次数数据
+ */
+export interface CameraVisitedTimes {
+  cameraCode: string;
+  cameraName: string;
+  count: number;
 }
 
-// 查询累计数据总表
-export function getTotalSumTable(deptIdList: []) {
-    return http.request<VisitsModel[]>({
-        url: '/platformData/getTotalSumTable',
-        method: 'post',
-        params: { deptIdList: deptIdList },
-    });
+/**
+ * @description: 获取相机被访问次数数据
+ */
+export const getCameraVisitedTimes = (body: ChartQuery) => {
+  return http.request<CameraVisitedTimes[]>({
+    url: '/userRecord/statisticByCamera',
+    method: 'post',
+    data: body,
+  });
+};
+
+/**
+ * @description: 获取员工访问车间次数数据
+ */
+export const getUserVisitTimes = (params: ChartQuery) => {
+  return http.request<WorkshopVisitedTimes[]>({
+    url: '/userRecord/statisticByWorkshopPerUser',
+    method: 'get',
+    params,
+  });
+};
+
+/**
+ * @description: 员工日访问车间次数数据
+ */
+export interface UserDailyVisitTimes {
+  time: string;
+  count: number;
 }
 
-
-// 获取部门列表
-export function getDeptList() {
-    return http.request<DepartMentModel[]>({
-        url: '/platformData/getDeptList',
-        method: 'get',
-    })
-}
+/**
+ * @description: 获取员工日访问车间次数数据
+ */
+export const getUserDailyVisitTimes = (body: ChartQuery) => {
+  return http.request<UserDailyVisitTimes[]>({
+    url: '/userRecord/statisticByWorkshopPerDay',
+    method: 'post',
+    data: body,
+  });
+};

src/api/system/role.ts

@@ -52,7 +52,7 @@ export function updateRole(params: RoleType<PermissionType>) {
 export function roleAdminInfo(params) {
   return http.request({
     url: '/role/infoAdmin',
-    method: 'GET',
+
     params,
   });
 }
@@ -63,7 +63,7 @@ export function roleAdminInfo(params) {
 export function roleUserInfo(params) {
   return http.request({
     url: '/role/info',
-    method: 'GET',
+
     params,
   });
 }
@@ -107,7 +107,7 @@ export function delUserRole(params) {
 export function roleList(params?) {
   return http.request({
     url: '/role/pageList',
-    method: 'GET',
+
     params,
   });
 }
@@ -118,7 +118,7 @@ export function roleList(params?) {
 export function roleAllList(params?) {
   return http.request({
     url: '/role/getAllRoles',
-    method: 'GET',
+
     params,
   });
 }
@@ -129,7 +129,7 @@ export function roleAllList(params?) {
 export function permissionList() {
   return http.request({
     url: '/role/listAllPermission',
-    method: 'GET',
+
   });
 }
 
@@ -137,6 +137,6 @@ export function permissionList() {
 export function getFeaturePermissions() {
   return http.request({
     url: '/role/listFunctionPermission',
-    method: 'get',
+
   });
 }

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/PlatformData.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="platform-content">
+    <div class="flex platform-head-tabs">
+      <div
+        class="flex justify-center items-center tab-item"
+        :class="{ 'tab-item-active': activeName === 'count' }"
+        @click="activeName = 'count'"
+      >
+        访问次数统计
+      </div>
+      <div
+        class="flex justify-center items-center tab-item"
+        :class="{ 'tab-item-active': activeName === 'score' }"
+        @click="activeName = 'score'"
+      >
+        积分统计
+      </div>
+    </div>
+    <Query v-if="activeName === 'count'" />
+    <Score v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Query from './components/query/Query.vue';
+  import Score from './components/score/Score.vue';
+
+  const activeName = ref('count');
+</script>
+
+<style scoped lang="scss">
+  .platform-content {
+    height: calc(100vh - 64px - 18px);
+    background-color: rgba(255, 255, 255, 1);
+    padding: 21px;
+  }
+  .platform-head {
+    height: 56px;
+
+    &-name {
+      margin-left: 24px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #252525;
+    }
+
+    &-tabs {
+      margin: 18px 0;
+
+      .tab-item {
+        width: 188px;
+        height: 38px;
+        background: #fafafa;
+        border: 1px solid #d9d9d9;
+        cursor: pointer;
+
+        &-active {
+          color: rgba(22, 119, 255, 1);
+          background: #e2eefe;
+          border: 1px solid #1890ff;
+        }
+      }
+
+      :first-child {
+        border-radius: 8px 0px 0px 8px;
+      }
+
+      :last-child {
+        border-radius: 0px 8px 8px 0px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,120 @@
+<template>
+  <div id="bar-chart" ref="barChart" class="chart" :style="{ height: props.height }"></div>
+</template>
+
+<script setup lang="ts">
+  import * as echarts from 'echarts/core';
+  import {
+    TooltipComponent,
+    TooltipComponentOption,
+    GridComponent,
+    GridComponentOption,
+    DataZoomComponent,
+    DataZoomComponentOption,
+  } from 'echarts/components';
+  import { BarChart, BarSeriesOption } from 'echarts/charts';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { onMounted, watch } from 'vue';
+
+  echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer, DataZoomComponent]);
+  type EChartsOption = echarts.ComposeOption<
+    TooltipComponentOption | GridComponentOption | BarSeriesOption | DataZoomComponentOption
+  >;
+
+  const props = withDefaults(
+    defineProps<{
+      chartData: number[];
+      chartLable: string[];
+      height?: string;
+    }>(),
+    {
+      height: '372px',
+    },
+  );
+
+  onMounted(() => {
+    const bar: echarts.ECharts = echarts.init(document.getElementById('bar-chart')!);
+
+    initBarChart(bar);
+
+    watch(
+      () => props.chartData,
+      () => {
+        drawBarChart(bar);
+      },
+    );
+  });
+
+  const initBarChart = (bar: echarts.ECharts) => {
+    const barOption: EChartsOption = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      dataZoom: [
+        {
+          startValue: 0,
+          endValue: 13,
+          type: 'inside',
+        },
+      ],
+      xAxis: [
+        {
+          type: 'category',
+          data: props.chartLable,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          axisLabel: {
+            rotate: 45,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          name: '访问次数',
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          // name: props.chartCategory,
+          type: 'bar',
+          barWidth: '60%',
+          data: props.chartData,
+        },
+      ],
+    };
+    bar.setOption(barOption);
+  };
+
+  const drawBarChart = (bar: echarts.ECharts) => {
+    const barOption: EChartsOption = {
+      xAxis: [
+        {
+          data: props.chartLable,
+        },
+      ],
+      series: [
+        {
+          data: props.chartData,
+        },
+      ],
+    };
+    bar.setOption(barOption);
+  };
+</script>
+
+<style scoped lang="scss">
+  #bar-chart {
+    width: 968px;
+  }
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+  <div id="line-chart" ref="lineChart" class="chart" :style="{ height: props.height }"></div>
+</template>
+
+<script setup lang="ts">
+  import * as echarts from 'echarts/core';
+  import {
+    GridComponent,
+    GridComponentOption,
+    DataZoomComponent,
+    DataZoomComponentOption,
+  } from 'echarts/components';
+  import { LineChart, LineSeriesOption } from 'echarts/charts';
+  import { UniversalTransition } from 'echarts/features';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { onMounted, watch } from 'vue';
+
+  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, DataZoomComponent]);
+  type EChartsOption = echarts.ComposeOption<
+    GridComponentOption | LineSeriesOption | DataZoomComponentOption
+  >;
+  const props = withDefaults(
+    defineProps<{
+      chartData: number[];
+      chartLable: string[];
+      height?: string;
+    }>(),
+    {
+      height: '372px',
+    },
+  );
+  onMounted(() => {
+    const line: echarts.ECharts = echarts.init(document.getElementById('line-chart')!);
+
+    initLineChart(line);
+
+    watch(
+      () => props.chartData,
+      () => {
+        drawLineChart(line);
+      },
+    );
+  });
+
+  const initLineChart = (line: echarts.ECharts) => {
+    const lineOption: EChartsOption = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      dataZoom: [
+        {
+          startValue: 0,
+          endValue: 13,
+          type: 'inside',
+        },
+      ],
+      xAxis: [
+        {
+          type: 'category',
+          data: props.chartLable,
+          axisLabel: {
+            rotate: 45,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          name: '访问次数',
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: '日期',
+          type: 'line',
+          showSymbol: false,
+          data: props.chartData,
+        },
+        // TODO 根据返回数据维度添加
+      ],
+      // res.map(item => {
+      //   return {
+      //     name: item.name,
+      //     type: 'line',
+      //     data: item.data,
+      //   };
+      // }),
+    };
+    line.setOption(lineOption);
+  };
+
+  const drawLineChart = (line: echarts.ECharts) => {
+    const lineOption: EChartsOption = {
+      series: [
+        {
+          data: props.chartData,
+        },
+      ],
+    };
+    line.setOption(lineOption);
+  };
+</script>
+
+<style scoped lang="scss">
+  #line-chart {
+    width: 968px;
+    height: 372px;
+  }
+</style>

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

@@ -0,0 +1,175 @@
+<template>
+  <div class="dialog-nav-bar">
+    <div v-if="workshopList !== undefined" class="workshop-select">
+      <el-select
+        v-model="selectedWorkshop"
+        multiple
+        clearable
+        collapse-tags
+        placeholder="请添加车间"
+        :max-collapse-tags="1"
+        style="width: 240px"
+      >
+        <el-checkbox v-model="checkAll" :indeterminate="false" @change="handleCheckAll">
+          全选
+        </el-checkbox>
+        <el-option v-for="shop in workshopList" :key="shop.id" :label="shop.name" :value="shop.id">
+          <!-- <el-checkbox :label="shop.label"> </el-checkbox> -->
+        </el-option>
+      </el-select>
+    </div>
+    <el-date-picker
+      class="date-picker"
+      v-model="dateRange"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :shortcuts="shortcuts"
+      :default-time="[new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)]"
+      style="max-width: 299px"
+    ></el-date-picker>
+    <el-button @click="onSearch" type="primary" style="width: 65px; height: 32px; margin-left: 16px"
+      >搜 索
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref, watch } from 'vue';
+  import { ChartQuery } from '@/api/datamanagement/dataplatform';
+  import { formatDate } from '@/utils/platformUtils';
+
+  const checkAll = ref();
+  const selectedWorkshop = ref<number[]>();
+  const dateRange = ref<Date[]>();
+
+  const props = withDefaults(
+    defineProps<{
+      chartType?: string;
+      workshopList?: any[] | undefined;
+    }>(),
+    {
+      chartType: 'bar',
+    },
+  );
+
+  // 参数改变事件
+  const emits = defineEmits<{
+    (e: 'chartParamsChanged', parmas: ChartQuery);
+  }>();
+
+  const serchParams = ref<ChartQuery>({});
+
+  const onSearch = () => {
+    if (
+      !dateRange.value ||
+      dateRange.value[0].toString() === 'Invalid Date' ||
+      dateRange.value[1].toString() === 'Invalid Date'
+    ) {
+      delete serchParams.value.startTime;
+      delete serchParams.value.endTime;
+    } else {
+      serchParams.value.startTime = formatDate(dateRange.value[0]);
+      serchParams.value.endTime = formatDate(dateRange.value[1]);
+    }
+    serchParams.value.workshopList = props.workshopList?.map((item) => item.id);
+    // if (props.workshopList !== undefined) {
+    //   if (!selectedWorkshop.value || !selectedWorkshop.value.length) {
+    //     ElMessage.error('请至少选择一个车间');
+    //     return;
+    //   }
+    //   serchParams.value.workshopList = selectedWorkshop.value;
+    // }
+    emits('chartParamsChanged', serchParams.value);
+  };
+
+  // select全选事件
+  const handleCheckAll = (val: boolean) => {
+    if (val) {
+      selectedWorkshop.value = props.workshopList!.map((item) => item.id);
+    } else {
+      selectedWorkshop.value = [];
+    }
+  };
+  watch(
+    () => selectedWorkshop.value,
+    (val) => {
+      if (val !== undefined) {
+        if (val.length === props.workshopList!.length) {
+          checkAll.value = true;
+        } else {
+          checkAll.value = false;
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  // 初始化全选
+  onMounted(() => {
+    if (props.workshopList !== undefined) {
+      selectedWorkshop.value = props.workshopList!.map((item) => item.id);
+    }
+    onSearch();
+  });
+
+  const shortcuts = [
+    {
+      text: props.chartType === 'bar' ? '今天' : '本周',
+      value: () => {
+        return props.chartType === 'bar'
+          ? [new Date().setHours(0, 0, 0, 0), new Date()]
+          : [
+              new Date(new Date().getTime() - 3600 * 1000 * 24 * new Date().getDay()).setHours(
+                0,
+                0,
+                0,
+                0,
+              ),
+              new Date(),
+            ];
+      },
+    },
+    {
+      text: '本月',
+      value: () => {
+        const start = new Date(
+          new Date().getTime() - 3600 * 1000 * 24 * (new Date().getDate() - 1),
+        ).setHours(0, 0, 0, 0);
+        return [start, new Date()];
+      },
+    },
+    {
+      text: '累计',
+      value: () => {
+        return [null, null];
+      },
+    },
+  ];
+</script>
+
+<style lang="scss" scoped>
+  .workshop-select {
+    width: 250px;
+  }
+  .dialog-nav-bar {
+    padding-right: 25px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
+    left: 5px;
+  }
+  .el-select-dropdown__item.is-selected {
+    font-weight: inherit;
+  }
+  :deep(.el-checkbox__label) {
+    padding-left: 2px;
+  }
+  :deep(.el-checkbox__input) {
+    margin-left: 4px;
+  }
+</style>

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

@@ -0,0 +1,260 @@
+<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 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.list"
+      highlight-current-row
+      @sort-change="handleSortChange"
+    >
+      <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>
+      <el-table-column
+        :label="'当日' + props.tableLabel"
+        prop="statisticDay"
+        sortable="custom"
+        align="right"
+      ></el-table-column>
+      <el-table-column
+        :label="'本月' + tableLabel"
+        prop="statisticMonth"
+        sortable="custom"
+        align="right"
+      ></el-table-column>
+      <el-table-column
+        :label="'累计' + tableLabel"
+        prop="statisticAll"
+        sortable="custom"
+        align="right"
+      ></el-table-column>
+      <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
+        <template #default="scope">
+          <img
+            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; cursor: pointer"
+            src="@/assets/icons/chart-line.png"
+            alt=""
+            @click="showLinechart(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    <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"
+    :title="chartTitle"
+    :close-on-click-modal="true"
+    :destroy-on-close="true"
+    width="1000px"
+    center
+  >
+    <DialogNavBar @chart-params-changed="onDialogParamsChanged" />
+    <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
+  </el-dialog>
+  <el-dialog
+    v-model="linechartVisible"
+    :title="chartTitle"
+    :close-on-click-modal="true"
+    :destroy-on-close="true"
+    width="1000px"
+    center
+  >
+    <DialogNavBar
+      chart-type="line"
+      :workshop-list="workshopList"
+      @chart-params-changed="onDialogParamsChanged"
+    />
+    <LineChart :chart-data="chartData.val" :chart-lable="chartData.label" />
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { defineProps } from 'vue';
+  import DialogNavBar from '../common/DialogNavBar.vue';
+  import BarChart from '../../charts/BarChart.vue';
+  import LineChart from '../../charts/LineChart.vue';
+  import {
+    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 tableQueryParams = ref<UserAccessRecordQueryParams>({
+    pageNumber: 1,
+    pageSize: 10,
+    // nickname: "",
+    // username: "",
+    // sortKey: "",
+    // sortType: "",
+  });
+  const emits = defineEmits<{
+    (e: 'tableParamsChanged', parmas: UserAccessRecordQueryParams);
+  }>();
+
+  // 页码导航栏修改事件
+  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.sortKey = data.prop;
+      tableQueryParams.value.sortType = data.order.includes('a') ? 'asc' : 'desc';
+    } else {
+      delete tableQueryParams.value.sortKey;
+      delete tableQueryParams.value.sortType;
+    }
+    tableQueryParams.value.pageNumber = 1;
+    // console.log(tableQueryParams.value);
+    // TODO 替换
+    emits('tableParamsChanged', tableQueryParams.value);
+  };
+
+  // 复用输入框类型和变化事件
+  const tableQueryType = ref<string>('姓名');
+  const handleTableQueryTypeChange = (v: string) => {
+    if (v === '姓名') {
+      delete tableQueryParams.value.stuffNo;
+    } else {
+      delete tableQueryParams.value.nickname;
+    }
+    tableQueryTypeContent.value = '';
+  };
+  // 复用输入框绑定内容、提交事件、重置事件
+  const tableQueryTypeContent = ref<string>();
+  function submitTableQuery() {
+    if (tableQueryType.value === '姓名') {
+      tableQueryParams.value.nickname = tableQueryTypeContent.value;
+    } else {
+      tableQueryParams.value.stuffNo = tableQueryTypeContent.value;
+    }
+    emits('tableParamsChanged', tableQueryParams.value);
+  }
+  function resetTable() {
+    tableQueryTypeContent.value = '';
+    tableQueryParams.value = {
+      pageNumber: 1,
+      pageSize: 10,
+    };
+    emits('tableParamsChanged', tableQueryParams.value);
+  }
+
+  // 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 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);
+    }
+  };
+  const chartData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: [],
+    val: [],
+  });
+  const onDialogParamsChanged = async (v: ChartQuery) => {
+    v.userId = ChartQueryUserId.value;
+    await getChartData(v);
+  };
+</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;
+  }
+</style>

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

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <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"
+      width="1000px"
+      :title="dialogTitle"
+      :close-on-click-modal="true"
+      :destroy-on-close="true"
+      center
+    >
+      <DialogNavBar
+        :workshop-list="dialogTitle === '相机统计数据' ? flattenedWorkshops : undefined"
+        @chart-params-changed="
+          async (v) => {
+            console.log(v);
+            await getChartData(v);
+          }
+        "
+      />
+      <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import PlatformTable from '../common/PlatformTable.vue';
+  import DialogNavBar from '../common/DialogNavBar.vue';
+  import BarChart from '../../charts/BarChart.vue';
+  import { ref, onBeforeMount, watch } from 'vue';
+  import { useSceneInfos } from '@/hooks/useSceneInfos';
+  import {
+    type UserAccessRecordQueryParams,
+    type UserAccessRecordList,
+    type ChartQuery,
+    getUserAccessRecords,
+    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);
+    }
+  };
+  const chartData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: [],
+    val: [],
+  });
+
+  // 请求表格数据
+  const tableQueryParams = ref<UserAccessRecordQueryParams>({
+    pageNumber: 1,
+    pageSize: 10,
+    // nickname: '',
+    // username: '',
+    // sortKey: 'statisticAll',
+    // sortType: 'asc',
+  });
+  const tableData = ref<UserAccessRecordList>();
+  watch(
+    () => tableQueryParams.value,
+    async () => {
+      const data = await getUserAccessRecords(tableQueryParams.value);
+      tableData.value = data;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+</script>
+
+<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;
+  }
+</style>

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

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <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 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,
+    },
+  ]);
+
+  // 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 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 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>

src/views/datamanager/systemdata/PlatformData.vue

@@ -1,63 +0,0 @@
-<template>
-    <div style="width: 100%">
-        <div>
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-                <el-tab-pane label="访问次数统计" name="count">
-                    <Table />
-                </el-tab-pane>
-                <el-tab-pane label="积分统计" name="score">
-                    <Score />
-                </el-tab-pane>
-
-            </el-tabs>
-        </div>
-
-
-
-    </div>
-</template>
-
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { TabsPaneContext } from 'element-plus';
-import Table from './Table.vue'
-import Score from './Score.vue';
-
-
-
-const activeName = ref('count');
-export type LabelType = 'count' | 'score';
-const currentLabel = ref<LabelType>('count');
-
-const handleClick = (tab: TabsPaneContext) => {
-    console.log(tab.paneName);
-    if (tab.paneName === 'count') {
-        currentLabel.value = 'count';
-    } else {
-
-        currentLabel.value = 'score';
-
-    }
-};
-</script>
-
-<style>
-.demo-tabs>.el-tabs__content {
-    padding: 32px;
-    color: #6b778c;
-    font-size: 32px;
-    font-weight: 600;
-}
-
-.el-tabs__item:hover {
-    /* color: rgb(53, 120, 220); */
-    background-color: rgb(53, 120, 220);
-}
-
-.el-tabs__item.is-active {
-    /* color: rgb(221, 239, 255); */
-    background-color: rgb(221, 239, 255);
-    border: 3px solid #4693f1 !important
-}
-</style>

src/views/datamanager/systemdata/Score.vue

@@ -1,129 +0,0 @@
-<template>
-    <div>
-        <TableCommon :type="type" :query-data="queryData" :current-day-data="getDayData" :current-month-data="getMonthData"
-            :current-all-data="getAllData" :get-personal-visits="getPersonalVisitsData" />
-    </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'
-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 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 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>

src/views/datamanager/systemdata/Table.vue

@@ -1,129 +0,0 @@
-<template>
-    <div>
-        <TableCommon :type="type" :query-data="queryData" :current-day-data="getDayData" :current-month-data="getMonthData"
-            :current-all-data="getAllData" :get-personal-visits="getPersonalVisitsData" />
-    </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'
-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 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 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>

src/views/datamanager/systemdata/TableCommon.vue

@@ -1,274 +0,0 @@
-<template>
-    <div class="form">
-        <el-form ref="ruleFormRef" :model="ruleForm" inline label-width="60px">
-
-            <el-form-item label="姓名：" prop="nickName" style="margin-top: 15px;">
-                <el-input v-model="ruleForm.nickName" placeholder="请输入姓名！" style="width: 150px;"></el-input>
-            </el-form-item>
-
-            <el-form-item label="工号：" prop="staffNo" style="margin-top: 15px;">
-                <el-input v-model="ruleForm.staffNo" placeholder="请输入工号！" style="width: 150px;"></el-input>
-            </el-form-item>
-
-            <el-form-item label="部门：" prop="dept" style="margin-top: 15px;">
-                <el-select v-model="ruleForm.dept" placeholder="请选择部门" style="width: 200px ;">
-                    <el-option v-for="item in departmentList" :key="item.deptId" :value="item.deptName"
-                        :label="item.deptName"></el-option>
-                </el-select>
-            </el-form-item>
-
-            <el-button type="primary" @click="submitForm(ruleFormRef)"
-                style="width: 110px;position: absolute;margin-top: 15px;right:120px">搜索</el-button>
-            <el-button @click="resetForm(ruleFormRef)"
-                style="position: absolute;right:0;width: 110px;margin-top: 15px">重置</el-button>
-            <el-form-item>
-
-            </el-form-item>
-
-        </el-form>
-
-        <div>
-            <el-button type="primary">数据总表</el-button>
-
-        </div>
-        <el-table style="width: 100%;margin-top: 20px;" :data="tableData" highlight-current-row
-            :default-sort="{ prop: 'todayVisits', order: 'descending' }">
-
-            <el-table-column label="姓名" prop="nickName"></el-table-column>
-            <el-table-column label="工号" prop="staffNo"></el-table-column>
-            <el-table-column label="部门" prop="deptName"></el-table-column>
-            <el-table-column :label="`当日` + props.type" prop="todayVisits" sortable></el-table-column>
-            <el-table-column :label="`本月` + props.type" prop="monthVisits" sortable></el-table-column>
-            <el-table-column :label="`累计` + props.type" prop="totalVisits" sortable></el-table-column>
-            <el-table-column :label="props.type + '柱状图'">
-                <template #default="scoped">
-                    <img :src="platformData" alt="" @click="openDialog(scoped.row)">
-                </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" />
-
-    </div>
-
-
-    <TableEcharts v-model="dialogVisible" :dialog-visible="dialogVisible" :userId="userId"
-        :current-day-chart="currentDayData" :current-month-chart="currentMonthData" :all-datas-chart="currentAllData"
-        :close-dialog="closeDialog">
-    </TableEcharts>
-</template>
-
-<script setup lang="ts">
-
-import { ref, onMounted } from 'vue';
-import { FormInstance } from 'element-plus';
-import TableEcharts from './TableEcharts.vue';
-import platformData from '@/assets/icons/platformdata.png';
-import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '../../../api/datamanagement/dataplatform';
-
-export interface TableModel {
-    deptId: number,
-    deptName: string,
-    monthVisits: number,
-    nickName: string,
-    staffNo: string,
-    todayVisits: number,
-    totalVisits: number,
-    userId: number,
-}
-
-// const props = defineProps<{ type: string }>()
-const props = defineProps<{
-    type: string,
-    queryData: (d1: number, d2: number) => Promise<Visits<Records>>,
-    currentDayData: (d: number) => Promise<VisitsModel[]>,
-    currentMonthData: (d: number) => Promise<VisitsModel[]>,
-    currentAllData: (d: number) => Promise<VisitsModel[]>,
-    getPersonalVisits: (d1: number | undefined, d2: string, d3: number, d4: number, d5: string) => Promise<Visits<Records>>,
-
-}>();
-
-const dialogVisible = ref(false);//控制弹框显示
-const currentPage = ref(1);
-const currentPageSize = ref(10);
-const total = ref(30);
-const tableData = ref<TableModel[]>()
-const userId = ref(10014);
-
-export interface FormModelCommon {
-    dept: string,
-    nickName: string,
-    staffNo: string,
-}
-
-const ruleForm = ref<FormModelCommon>({
-    dept: '',
-    nickName: '',
-    staffNo: '',
-})
-const ruleFormRef = ref<FormInstance>();
-
-
-const departmentList = ref<DepartMentModel[]>([]);
-const getDepartmentList = () => {
-    getDeptList().then((res) => {
-        departmentList.value = res;
-        console.log('department:', res)
-    });
-};
-
-
-// 查询数据列表
-async function queryData() {
-    const res = await props.queryData(currentPage.value, currentPageSize.value);
-    console.log('tablecommon-querydata:', res);
-    tableData.value = res.records;
-    console.log('tablecommon-querydata1:', tableData.value);
-    total.value = res.totalRow;
-
-}
-
-// 根据指定参数查询数据-搜索数据
-// function queryDataByParams() {
-//     props.queryDataByParams().then(res => {
-//         console.log(res)
-//     })
-//     // emit('queryDataByParams', data);
-// }
-
-// interface FormTable {
-//     text: string,
-//     dept: string,
-// }
-
-// 搜索数据
-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);
-        }
-    })
-}
-
-// 重置表单
-function resetForm(formE1: FormInstance | undefined) {
-    if (!formE1) return
-    formE1.resetFields()
-    console.log('resetForm')
-    queryData();
-}
-
-// 翻页
-function handleCurrentPageChange(val: number) {
-    currentPage.value = val
-    console.log('currentPage:' + currentPage.value)
-    queryData();
-}
-
-// 页数
-function handeSizeChange(val: number) {
-    currentPageSize.value = val
-    console.log('currentPageSize:' + currentPageSize.value)
-    queryData()
-}
-
-function closeDialog() {
-    dialogVisible.value = false;
-}
-
-// 查询今日访问次数
-function currentDayData(userId: number) {
-    console.log('table-common-currentDayData:', userId)
-    return props.currentDayData(userId).then(res => {
-        console.log('table-common-currentdaydata:', res)
-        return res
-    })
-
-}
-
-// 查询本月访问次数
-function currentMonthData(userId: number) {
-    console.log('table-common-currentMonthData:', userId)
-    return props.currentMonthData(userId).then(res => {
-        console.log('table-common-currentmonthdata:', res);
-        return res
-    })
-
-}
-
-// 查询累计访问次数
-function currentAllData(userId: number) {
-    return props.currentAllData(userId).then(res => {
-        console.log('table-common:', res);
-        return res;
-    })
-
-}
-
-// 查询个人访问次数-搜索数据
-function getPersonalVisits(data: FormModelCommon) {
-    const departId = ref();
-    departmentList.value.forEach(item => {
-        if (item.deptName === data.dept) {
-            departId.value = item.deptId;
-        }
-    })
-    const newParam = {
-        pageNumber: currentPage.value,
-        pageSize: currentPageSize.value,
-        nickName: data.nickName,
-        // deptId: data.dept === BoardDeptEnum.all ? undefined : data.dept,
-        deptId: departId.value,
-        staffNo: data.staffNo,
-    }
-    console.log('getPersonalVisits:', newParam);
-    props.getPersonalVisits(newParam.deptId, newParam.nickName, newParam.pageNumber, newParam.pageSize, newParam.staffNo).then(res => {
-        console.log('table-common-getPersonalVisits:', res)
-        tableData.value = res.records;
-
-    })
-}
-
-// 打开数据表
-function openDialog(row: TableModel) {
-    console.log('tablecommon-opendialog');
-    console.log(row.userId);
-    // tbData.value=row;
-    userId.value = row.userId;
-    dialogVisible.value = true;
-
-    // currentDayData();
-}
-
-
-
-onMounted(() => {
-    queryData()
-    getDepartmentList();
-})
-
-</script>
-
-<style scoped>
-.form {
-    /* width: 1100px; */
-    margin-top: 30px;
-    margin-bottom: 30px;
-}
-
-
-.el-pagination {
-    margin-top: 30px;
-}
-</style>

src/views/datamanager/systemdata/TableEcharts.vue

@@ -1,409 +0,0 @@
-<template>
-    <div>
-        <el-dialog v-model="visible" :before-close="handleClose" center style="width: 700px;">
-
-            <el-card>
-                <template #header>
-                    <div v-if="isShowAll === false" style="text-align: center;">
-                        <el-button type="text" @click="currentDayChart">今日</el-button>
-                        <el-button type="text" @click="currentMonthChart">本月</el-button>
-                        <el-button type="text" @click="allDatasChart">累计</el-button>
-
-                    </div>
-                    <div v-else>
-                        <el-form inline ref="ruleFormRef" :model="form" style="width:600px">
-                            <el-form-item style="margin-top: 20px;">
-                                <el-select v-model="form.workspace" placeholder="请选择车间"
-                                    style="width: 140px ;text-align: left;">
-                                    <el-option v-for="item in departmentList" :key="item.deptId" :value="item.deptName"
-                                        :label="item.deptName"></el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-button style="text-align: left;width: 100px;" type="primary"
-                                @click="getDepartmentData">生成柱状图</el-button>
-                            <el-button style="text-align: left; margin-left: 180px;" type="text"
-                                @click="currentDayChart">今日</el-button>
-                            <el-button style="text-align: left;" type="text" @click="currentMonthChart">本月</el-button>
-                            <el-button style="text-align: left;" type="text" @click="allDatasChart">累计</el-button>
-
-                        </el-form>
-
-                    </div>
-                </template>
-                <div id="container" style="width: 600px; height: 470px;margin-left: 20px;"></div>
-            </el-card>
-        </el-dialog>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-import * as echarts from 'echarts';
-import { ref, markRaw } from 'vue';
-// import { ElMessageBox } from 'element-plus';
-// import { BoardDeptList } from './config'
-import { watch } from 'vue';
-import { onMounted } from 'vue';
-import { DepartMentModel, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
-
-interface DataOption {
-    title: {},//标题
-    tooltip: {},//虚线
-    calculate: Boolean,
-    xAxis: {},
-    yAxis: {},
-    series: SerialModel[]
-}
-
-
-
-
-const visible = ref(false);
-const userId = ref(1);
-const isShowAll = ref(false);//控制标题是否居中
-const chart = ref<any>("");
-
-const departmentList = ref<DepartMentModel[]>([]);
-const getDepartmentList = () => {
-    getDeptList().then((res) => {
-        departmentList.value = res;
-    });
-};
-
-
-watch(
-    () => props.dialogVisible,
-    (newvisible) => {
-        visible.value = newvisible
-        console.log('tablechart', visible.value)
-    },
-    { immediate: true },
-)
-watch(
-    () => props.userId,
-    (newuserId) => {
-        userId.value = newuserId
-        console.log('tablechart-data:', userId.value)
-        currentDayChart()
-    },
-    { immediate: true },
-)
-
-const form = ref({
-    workspace: '',
-});
-
-
-const props = defineProps<{
-    dialogVisible: boolean,
-    userId: number,
-    currentDayChart: (d: number) => Promise<VisitsModel[]>,
-    currentMonthChart: (d: number) => Promise<VisitsModel[]>,
-    allDatasChart: (d: number) => Promise<VisitsModel[]>,
-    closeDialog(),
-    // getDepartmentData: () => Promise<unknown>,
-
-}>();
-
-
-
-// 关闭对话框
-function closeDialog() {
-    visible.value = false;
-    props.closeDialog();
-    // emit('closeDialog');
-}
-
-// 关闭对话框
-function handleClose(done: () => void) {
-    // ElMessageBox.confirm('确认关闭?')
-    //     .then(() => {
-
-    //         done()
-    //         closeDialog();//关闭对话框
-    //     })
-    //     .catch(() => {
-
-    //         // catch error
-    //     })
-    done();
-    closeDialog();//关闭对话框
-}
-
-// 查看今日数据
-function currentDayChart() {
-    isShowAll.value = false;
-    console.log('table-chart-currentday');
-    const daytitle = ref();
-    const seriesdata = ref()
-    props.currentDayChart(userId.value).then(res => {
-        daytitle.value = getHorizontalTitle(res);
-        seriesdata.value = getVorizontalData(res);
-        console.log('查看今日数据', res);
-        console.log('查看今日数据', daytitle);
-        console.log('查看今日数据', seriesdata);
-        initChart(optionday.value, daytitle.value, seriesdata.value)
-    })
-
-};
-
-// 查看本月数据
-function currentMonthChart() {
-    isShowAll.value = false;
-    console.log('currentmonth:', userId.value);
-    const monthtitle = ref();
-    const monthseriesdata = ref()
-    props.currentMonthChart(userId.value).then(res => {
-        console.log('table-chart-currentmonth:', res);
-        monthtitle.value = getHorizontalTitle(res);
-        monthseriesdata.value = getVorizontalData(res);
-        console.log('查看今日数据', res);
-        console.log('查看今日数据', monthtitle);
-        console.log('查看今日数据', monthseriesdata);
-        initChart(optionmonth.value, monthtitle.value, monthseriesdata.value)
-    })
-};
-
-
-// 查看累计数据
-function allDatasChart() {
-    isShowAll.value = true;
-    console.log('alldata:', userId.value);
-    const alltitle = ref();
-    const allseriesdata = ref()
-    props.allDatasChart(userId.value).then(res => {
-        console.log(res);
-        alltitle.value = getHorizontalTitle(res);
-        allseriesdata.value = getVorizontalData(res);
-        console.log('查看今日数据', res);
-        console.log('查看今日数据', alltitle);
-        console.log('查看今日数据', allseriesdata);
-        initChart(optionall.value, alltitle.value, allseriesdata.value)
-    })
-}
-
-interface SerialModel {
-    data: [],
-    type: string,
-}
-
-
-function initChart(data: DataOption, title: [], series: []) {
-    data.xAxis = {};
-    const dataseries = ref<SerialModel[]>([]);
-
-    const type = ref('category');
-    const horidata = ref([]) //todo，获取横坐标
-    const nameLocation = ref('center');
-    const axisLabel = { interval: 0, rotate: 30 };
-    const nameTextStyle = {
-        color: 'red',
-        fontSize: 6,
-    };
-    horidata.value = title;
-
-    data.xAxis = { type: type.value, data: horidata.value, nameLocation: nameLocation.value, axisLabel: axisLabel, nameTextStyle: nameTextStyle }
-
-
-    const seriesdata = ref<SerialModel>({
-        data: [],//todo，获取数值,
-        type: 'bar'
-    })
-    seriesdata.value.data = series;
-    dataseries.value.push(seriesdata.value)
-    data.series = dataseries.value;
-
-    console.log('data.xAxis.data', data.xAxis);
-    console.log('data.yAxis.data', data.series)
-    console.log(data)
-    createChart(data);
-
-}
-
-// 创建图表
-function createChart(option: DataOption) {
-    chart.value = markRaw(echarts.init(document.getElementById('container') as HTMLDivElement))
-
-    chart.value.setOption(option);
-
-    // 大小自适应
-    window.addEventListener('resize', () => {
-        chart.value.resize();
-    })
-}
-
-// 创建柱状图
-function getDepartmentData() {
-    // todo,原型未定义
-}
-
-
-
-function getHorizontalTitle(data: VisitsModel[]) {
-    console.log('getHorizontalTitle:', data)
-    const title = ref<string[]>([]);
-    for (var i = 0; i < data.length; i++) {
-        title.value.push(data[i].workshopName)
-        console.log('getHorizontalTitle-data-i', data[i].workshopName)
-    }
-    console.log('title:', title);
-    return title;
-}
-
-function getVorizontalData(data: VisitsModel[]) {
-    console.log('getvorizontaldata:', data)
-    const seriesData = ref<number[]>([]);
-    for (var i = 0; i < data.length; i++) {
-        seriesData.value.push(data[i].visits)
-        console.log('getHorizontalTitle-data-i', data[i].visits)
-    }
-    console.log('seriesData:', seriesData);
-    return seriesData;
-}
-
-const optionday = ref();
-optionday.value = {
-    title: {
-        text: '各车间地点访问次数柱状图(天)',
-        x: "center", //设置标题位置居中
-        textStyle: {//设置主标题的文字风格
-            fontSize: 10 //文字大小
-        },
-
-
-
-    },//标题
-    tooltip: {
-        trigger: 'axis'
-    },//虚线
-    calculate: true,//显示数据
-    xAxis: {
-        type: 'category',
-        data: [],//todo，获取横坐标
-        nameLocation: 'center',
-        axisLabel: { interval: 0, rotate: 30 },
-        nameTextStyle: {
-            color: 'red',
-            fontSize: 6,
-
-        }
-    },
-    yAxis: {
-        type: 'value',
-        name: '访问次数',
-        nameTextStyle: {
-            color: 'black',
-            fontSize: 8,
-            padding: 0,
-        }
-
-    },
-    series: [
-        {
-            data: [],//todo，获取数值,
-            type: 'bar'
-        }
-    ]
-};
-
-
-const optionmonth = ref();
-optionmonth.value = {
-    title: {
-        text: '各车间地点访问次数柱状图(月)',
-        x: "center", //设置标题位置居中
-        textStyle: {//设置主标题的文字风格
-            fontSize: 10 //文字大小
-        },
-
-
-
-    },//标题
-    tooltip: {
-        trigger: 'axis'
-    },//虚线
-    calculate: true,//显示数据
-    xAxis: {
-        type: 'category',
-        data: [],//todo，获取横坐标
-        nameLocation: 'center',
-        axisLabel: { interval: 0, rotate: 30 },
-        nameTextStyle: {
-            color: 'red',
-            fontSize: 6,
-
-        }
-    },
-    yAxis: {
-        type: 'value',
-        name: '访问次数',
-        nameTextStyle: {
-            color: 'black',
-            fontSize: 8,
-            padding: 0,
-        }
-
-    },
-    series: [
-        {
-            data: [],//todo，获取数值,
-            type: 'bar'
-        }
-    ]
-};
-
-
-const optionall = ref();
-optionall.value = {
-    title: {
-        text: '各车间地点访问次数柱状图(汇总)',
-        x: "center", //设置标题位置居中
-        textStyle: {//设置主标题的文字风格
-            fontSize: 10 //文字大小
-        },
-
-
-
-    },//标题
-    tooltip: {
-        trigger: 'axis'
-    },//虚线
-    calculate: true,//显示数据
-    xAxis: {
-        type: 'category',
-        data: [],//todo，获取横坐标
-        nameLocation: 'center',
-        axisLabel: { interval: 0, rotate: 30 },
-        nameTextStyle: {
-            color: 'red',
-            fontSize: 6,
-
-        }
-    },
-    yAxis: {
-        type: 'value',
-        name: '访问次数',
-        nameTextStyle: {
-            color: 'black',
-            fontSize: 8,
-            padding: 0,
-        }
-
-    },
-    series: [
-        {
-            data: [],//todo，获取数值,
-            type: 'bar'
-        }
-    ]
-};
-
-
-onMounted(() => {
-    isShowAll.value = false;
-    getDepartmentList();
-})
-
-</script>
-
-<style scoped></style>