feat: 首页数据对接

apps/web-antd/src/api/analytics/index.ts

@@ -0,0 +1,63 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 查询工单数量
+ * @param params
+ * @returns 工单数量
+ */
+export function getIndexCount() {
+  return requestClient.get<any>('/property/index/indexCount');
+}
+
+// 今日预警分类统计
+export function getStatisticsCurrDay() {
+  return requestClient.get<any>('/sis/alarmEvents/query/statistics/currDay');
+}
+// 所有预警信息分类统计
+export function getStatistics() {
+  return requestClient.get<any>('/sis/alarmEvents/query/statistics');
+}
+// /**
+//  * 导出资产管理列表
+//  * @param params
+//  * @returns 资产管理列表
+//  */
+// export function assetExport(params?: AssetQuery) {
+//   return commonExport('/property/asset/export', params ?? {});
+// }
+
+// /**
+//  * 查询资产管理详情
+//  * @param id id
+//  * @returns 资产管理详情
+//  */
+// export function assetInfo(id: ID) {
+//   return requestClient.get<AssetVO>(`/property/asset/${id}`);
+// }
+
+// /**
+//  * 新增资产管理
+//  * @param data
+//  * @returns void
+//  */
+// export function assetAdd(data: AssetForm) {
+//   return requestClient.postWithMsg<void>('/property/asset', data);
+// }
+
+// /**
+//  * 更新资产管理
+//  * @param data
+//  * @returns void
+//  */
+// export function assetUpdate(data: AssetForm) {
+//   return requestClient.putWithMsg<void>('/property/asset', data);
+// }
+
+// /**
+//  * 删除资产管理
+//  * @param id id
+//  * @returns void
+//  */
+// export function assetRemove(id: ID | IDS) {
+//   return requestClient.deleteWithMsg<void>(`/property/asset/${id}`);
+// }

apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue

@@ -3,11 +3,56 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { onMounted, ref } from 'vue';
+import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
+import dayjs from 'dayjs';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
+// 添加日期选择相关逻辑
+const selectedDate = ref<string>(dayjs().format('YYYY-MM'));
+// 获取当月天数
+const getDaysInMonth = (date: string) => {
+  const year = parseInt(date.split('-')[0]);
+  const month = parseInt(date.split('-')[1]);
+  const daysInMonth = new Date(year, month, 0).getDate();
+  return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
 
-onMounted(() => {
+const handleDateChange = () => {
+  console.log('selectedDate', selectedDate.value);
+
+  getMeterRecordTrend();
+};
+const getMeterRecordTrend = async () => {
+      const res = await meterRecordTrend(
+    {
+       day: dayjs().format('YYYY-MM-DD'),
+    month: selectedDate.value || dayjs().format('YYYY-MM'),
+    year: dayjs().format('YYYY'),
+    meterType: 1,
+    meterId: null,
+    floorId: null,
+  }
+  );
+console.log(res);
+
+  // 处理返回的数据
+  const chartData = res.day.nowMonth.data || [];
+console.log(chartData);
+
+  // 创建一个映射，将日期和数值对应起来
+  const dataMap: Record<string, string> = {};
+  chartData.forEach(([day, value]: [string, string]) => {
+    dataMap[day] = value;
+  });
+
+  // 获取当月所有日期
+  const days = getDaysInMonth(selectedDate.value);
+
+  // 为没有数据的日期填充0，构建完整的数据数组
+  const seriesData = days.map(day => {
+    return parseFloat(dataMap[day.toString()] || '0');
+  });
   renderEcharts({
     grid: {
       bottom: 0,
@@ -19,29 +64,13 @@ onMounted(() => {
     series: [
       {
         areaStyle: {},
-        data: [
+        data: seriesData,
-          111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
-          36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
-          111,
-        ],
         itemStyle: {
           color: '#5ab1ef',
         },
         smooth: true,
         type: 'line',
-      },
+      }
-      {
-        areaStyle: {},
-        data: [
-          33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
-          11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
-        ],
-        itemStyle: {
-          color: '#019680',
-        },
-        smooth: true,
-        type: 'line',
-      },
     ],
     tooltip: {
       axisPointer: {
@@ -65,7 +94,7 @@ onMounted(() => {
         show: false,
       },
       boundaryGap: false,
-      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      data: days,
       splitLine: {
         lineStyle: {
           type: 'solid',
@@ -80,7 +109,7 @@ onMounted(() => {
         axisTick: {
           show: false,
         },
-        max: 80_000,
+        // max: 800,
         splitArea: {
           show: true,
         },
@@ -89,9 +118,15 @@ onMounted(() => {
       },
     ],
   });
+};
+onMounted(async () => {
+getMeterRecordTrend();
 });
+
 </script>
 
 <template>
+  <div>
   <EchartsUI ref="chartRef" />
+  </div>
 </template>

apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue

@@ -10,68 +10,45 @@ const { renderEcharts } = useEcharts(chartRef);
 onMounted(() => {
   renderEcharts({
     legend: {
-      bottom: 0,
+      bottom: '2%',
-      data: ['访问', '趋势'],
+      left: 'center',
-    },
-    radar: {
-      indicator: [
-        {
-          name: '网页',
-        },
-        {
-          name: '移动端',
-        },
-        {
-          name: 'Ipad',
-        },
-        {
-          name: '客户端',
-        },
-        {
-          name: '第三方',
-        },
-        {
-          name: '其它',
-        },
-      ],
-      radius: '60%',
-      splitNumber: 8,
     },
     series: [
       {
-        areaStyle: {
+        animationDelay() {
-          opacity: 1,
+          return Math.random() * 100;
-          shadowBlur: 0,
-          shadowColor: 'rgba(0,0,0,.2)',
-          shadowOffsetX: 0,
-          shadowOffsetY: 10,
         },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        avoidLabelOverlap: false,
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
         data: [
-          {
+          { name: '搜索引擎', value: 1048 },
-            itemStyle: {
+          { name: '直接访问', value: 735 },
-              color: '#b6a2de',
+          { name: '邮件营销', value: 580 },
-            },
+          // { name: '联盟广告', value: 484 },
-            name: '访问',
-            value: [90, 50, 86, 40, 50, 20],
-          },
-          {
-            itemStyle: {
-              color: '#5ab1ef',
-            },
-            name: '趋势',
-            value: [70, 75, 70, 76, 20, 85],
-          },
         ],
-        itemStyle: {
+        emphasis: {
-          // borderColor: '#fff',
+          label: {
-          borderRadius: 10,
+            fontSize: '12',
-          borderWidth: 2,
+            fontWeight: 'bold',
+            show: true,
+          },
         },
-        symbolSize: 0,
+        label: {
-        type: 'radar',
+          position: 'center',
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        name: '访问来源',
+        type: 'pie',
       },
     ],
-    tooltip: {},
+    tooltip: {
+      trigger: 'item',
+    },
   });
 });
 </script>

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

@@ -19,70 +19,235 @@ 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';
-const overviewItems: AnalysisOverviewItem[] = [
+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: '用户量',
+    title: '今日访客量',
-    totalTitle: '总用户量',
+    totalTitle: '总访客量',
     totalValue: 78,
     value: 15,
   },
   {
     icon: SvgCakeIcon,
-    title: '访问量',
+    title: '今日车流量',
-    totalTitle: '总访问量',
+    totalTitle: '总车流量',
-    totalValue: 2_278,
+    totalValue: 0,
-    value: 461,
+    value: 0,
   },
   {
     icon: SvgDownloadIcon,
-    title: '下载量',
+    title: '今日预警数量',
-    totalTitle: '总下载量',
+    totalTitle: '总预警量',
     totalValue: 17,
     value: 2,
   },
   {
     icon: SvgBellIcon,
-    title: '使用量',
+    title: '今日工单数量',
-    totalTitle: '总使用量',
+    totalTitle: '总工单量',
-    totalValue: 6_652,
+    totalValue: 0,
-    value: 3_739,
+    value: 0,
   },
-];
+]
+);
 
 const chartTabs: TabOption[] = [
   {
-    label: '流量趋势',
+    label: '电量',
     value: 'trends',
   },
-  {
+  // {
-    label: '月访问量',
+  //   label: '水量',
-    value: 'visits',
+  //   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">
+    <!-- <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
       <template #trends>
         <AnalyticsTrends />
       </template>
       <template #visits>
         <AnalyticsVisits />
       </template>
-    </AnalysisChartsTabs>
+    </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="访问数量">
+      <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="访问来源">
+      <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="访问来源">
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="工单类型">
         <AnalyticsVisitsSales />
       </AnalysisChartCard>
     </div>