sl-sfy-safety/src/views/datamanager/platformdata/components/query/Query.vue

<template>
  <div>
    <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
    <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
    <QueryTable
      v-if="tableData !== undefined"
      :department-list="departmentList"
      :workshop-list="flattenedWorkshops"
      :table-data="tableData"
      table-label="访问次数"
      @table-params-changed="
        (v) => {
          tableQueryParams = _.cloneDeep(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) => {
            await getChartData(v);
          }
        "
      />
      <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import QueryTable from '../common/QueryTable.vue';
  import DialogNavBar from '../common/DialogNavBar.vue';
  import BarChart from '../../charts/BarChart.vue';
  import { ref, onMounted, 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';
  import { getAllDepartments } from '@/api/auth/dept';
  import _ from 'lodash-es';
  import { PaginationRequest } from '@/types/common/type';

  const departmentList = ref<any[]>([]);

  // 下拉菜单车间列表数据
  const sceneInfos = useSceneInfos();
  const { flattenedWorkshops, getScenesTree, calculateTreeData } = sceneInfos;
  onMounted(() => {
    getScenesTree({ level: 1, valueKey: 'code', labelKey: 'name', disabled: true });
    getAllDepartments().then((res) => {
      departmentList.value = calculateTreeData(res, { level: 3, valueKey: 'id', labelKey: 'deptName' }, 1);
    });
  });

  // 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<PaginationRequest & { queryParam: UserAccessRecordQueryParams }>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {},
    // nickname: '',
    // username: '',
    // sortKey: 'statisticAll',
    // sortType: 'asc',
  });
  const tableData = ref<UserAccessRecordList>();
  watch(
    () => tableQueryParams.value,
    async () => {
      const data = await getUserAccessRecords(tableQueryParams.value);
      tableData.value = {
        list: data.records,
        pageNumber: data.pageNumber,
        pageSize: data.pageSize,
        total: data.totalRow,
      };
    },
    {
      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>