admin-vben5/apps/web-antd/src/views/dashboard/analytics/index.vue

<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';
import AnalyticsVisits from './analytics-visits.vue';
import { ref,onMounted } from 'vue';
import { DatePicker } from 'ant-design-vue';
import { Button, Radio } from 'ant-design-vue';
import type { RadioChangeEvent } from 'ant-design-vue';
import {getIndexCount,getStatisticsCurrDay,getStatistics} from '#/api/analytics/index.ts';
const overviewItems =ref<AnalysisOverviewItem[]>(
  [
  {
    icon: SvgCardIcon,
    title: '今日访客量',
    totalTitle: '总访客量',
    totalValue: 78,
    value: 15,
  },
  {
    icon: SvgCakeIcon,
    title: '今日车流量',
    totalTitle: '总车流量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgDownloadIcon,
    title: '今日预警数量',
    totalTitle: '总预警量',
    totalValue: 17,
    value: 2,
  },
  {
    icon: SvgBellIcon,
    title: '今日工单数量',
    totalTitle: '总工单量',
    totalValue: 0,
    value: 0,
  },
]
);

const chartTabs: TabOption[] = [
  {
    label: '电量',
    value: 'trends',
  },
  // {
  //   label: '水量',
  //   value: 'visits',
  // },
];
//tab选择
const timeUnit = ref(1);
// 月份选择
const selectedDate = ref('');
const handleDateChange = (date: string) => {
  selectedDate.value = date;
  // 在这里可以添加根据选择日期筛选数据的逻辑
  console.log('选择的日期:', date);
};

// 工单数量
const indexCount = ref(0);
async function getIndex() {
  console.log(123);

  const res = await getIndexCount();
    console.log(res);
    // overviewItems[3].value = res.workOrdersToday
    // overviewItems[3].totalValue = res.workOrdersTotald
    console.log(overviewItems);

}
// 车流量
async function getCarCount() {
    const startDate = new Date();
  startDate.setHours(0, 0, 0, 0);
  const endDate = new Date();
  endDate.setHours(23, 59, 59, 999);
  // 转换为正确的 ISO 格式，考虑时区偏移
  const toLocalISOString = (date: Date) => {
    const timezoneOffset = date.getTimezoneOffset() * 60000; // 转换为毫秒
    const localTime = new Date(date.getTime() - timezoneOffset);
    return localTime.toISOString().slice(0, -1) + 'Z';
  };
            const response = await fetch(
              'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
              {
                method: 'POST',
                headers: {
                  'X-Auth-Token': `${sessionStorage.getItem('token')}`,
                  'Content-Type': 'application/json',
                  Authorization: `Bearer ${sessionStorage.getItem('token')}`,
                  Accept: 'application/json, text/plain, */*',
                },
                body: JSON.stringify({
    pageReq: {
        pageNum: 1,
        pageSize: 10
    },
    plNos: [
        "PFN000000012",
"PFN000000022",
        "PFN000000025"
    ],
    parkInBeginTime: toLocalISOString(startDate),
    parkInEndTime: toLocalISOString(endDate),
    orgId: 10012,
    parkOrderTypes: [
        100,
        200,
        201,
        300,
        500
    ],
    terminalSource: 50,
    remark: ""
}),
              },
            );
            const result = await response.json();
overviewItems.value[1].value = result.data.pageTotals;
            const response2 = await fetch(
              'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
              {
                method: 'POST',
                headers: {
                  'X-Auth-Token': `${sessionStorage.getItem('token')}`,
                  'Content-Type': 'application/json',
                  Authorization: `Bearer ${sessionStorage.getItem('token')}`,
                  Accept: 'application/json, text/plain, */*',
                },
                body: JSON.stringify({
    pageReq: {
        pageNum: 1,
        pageSize: 10
    },
    plNos: [
        "PFN000000012",
"PFN000000022",
        "PFN000000025"
    ],
    parkInBeginTime: "",
    parkInEndTime: "",
    orgId: 10012,
    parkOrderTypes: [
        100,
        200,
        201,
        300,
        500
    ],
    terminalSource: 50,
    remark: ""
}),
              },
            );
            const result2 = await response2.json();
            overviewItems.value[1].totalValue = result2.data.pageTotals;



}
// 预警
async function getStatisticsCurrDayCount() {
  const res  = await getStatisticsCurrDay();
  console.log(res);
}
async function getStatisticsCount() {
  const res  = await getStatistics();
  console.log(res);
}
// 电量

onMounted(() => {
   getIndex();
   getCarCount();
   getStatisticsCurrDayCount();
   getStatisticsCount();
})

</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    <!-- <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs> -->
    <div class="mt-5 bg-white rounded-lg">
      <div
        class="p-5 flex items-center justify-between "
        style="
          width: 100%;
          height: 100px;
        "
      >
        <Radio.Group
          v-model:value="timeUnit"
          @change="handleViewModeChange"
          size="large"
        >
          <Radio.Button value="1">电量</Radio.Button>
        </Radio.Group>
        <DatePicker
          v-model:value="selectedDate"
          picker="month"
          placeholder="请选择月份"
          style="width: 150px"
          @change="handleDateChange"
        />
      </div>
      <div v-if="timeUnit == 1">
        <AnalyticsTrends />
      </div>
    </div>
    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="预警类型">
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard
        class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
        title="设备使用状态"
      >
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="工单类型">
        <AnalyticsVisitsSales />
      </AnalysisChartCard>
    </div>
  </div>
</template>