feat

apps/web-antd/src/views/screen/property/index.vue

@@ -42,7 +42,7 @@
       </div>
       <div class="header-item">
         <span class="header-label">设备总数</span>
-        <span class="header-value green">500</span>
+        <span class="header-value green">{{total}}</span>
         <span class="header-unit">台</span>
       </div>
     </div>
@@ -160,6 +160,7 @@
 <script setup lang="ts">
 import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera,queryTwentyfourRunningDatasByPlNos,getVisitorCount} from '#/api/analytics';
 import AnalyticsTrends from './analytics-trends.vue';
+import { computed } from 'vue';
 import { Radio } from 'ant-design-vue';
 import {EchartsUI, useEcharts} from "@vben/plugins/echarts";
 
@@ -194,10 +195,11 @@ const handleTodayMeetCount = async () => {
 };
 // 水
 const water = ref();
+const waterTotal = ref();
 const { renderEcharts: renderWater } = useEcharts(water);
 async function fetchWater() {
   const data = await getHydropower()
-  const total = data.water.off + data.water.on;
+  waterTotal.value = data.water.off + data.water.on;
   const waterData = [
     { name: '离线', value: data.water.off },
     { name: '在线', value: data.water.on }
@@ -229,7 +231,7 @@ async function fetchWater() {
         label: {
           show: true,
           position: 'center',
-          formatter: `${total}`,
+          formatter: `${waterTotal.value}`,
           fontSize: 14,
           color: '#fff',
           fontWeight: 'bold'
@@ -250,10 +252,11 @@ async function fetchWater() {
 }
 // 电
 const electricity = ref();
+const electricityTotal = ref();
 const { renderEcharts: renderElectricity } = useEcharts(electricity);
 async function fetchElectricity() {
   const data = await getHydropower()
-  const total = data.power.off + data.power.on;
+  electricityTotal.value = data.power.off + data.power.on;
   const electricityData = [
     { name: '离线', value: data.power.off },
     { name: '在线', value: data.power.on }
@@ -285,7 +288,7 @@ async function fetchElectricity() {
         label: {
           show: true,
           position: 'center',
-          formatter: `${total}`,
+          formatter: `${electricityTotal.value}`,
           fontSize: 14,
           color: '#fff',
           fontWeight: 'bold'
@@ -306,10 +309,11 @@ async function fetchElectricity() {
 }
 // 门禁
 const accessControl = ref();
+const accessControlTotal = ref();
 const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
 async function fetchAccessControl() {
   const data = await getAccessControl()
-  const total = data.off + data.on;
+  accessControlTotal.value = data.off + data.on;
   const accessControlData = [
     { name: '离线', value: data.off },
     { name: '在线', value: data.on }
@@ -341,7 +345,7 @@ async function fetchAccessControl() {
         label: {
           show: true,
           position: 'center',
-          formatter: `${total}`,
+          formatter: `${accessControlTotal.value}`,
           fontSize: 14,
           color: '#fff',
           fontWeight: 'bold'
@@ -362,10 +366,11 @@ async function fetchAccessControl() {
 }
 // 摄像头
 const camera = ref();
+const cameraTotal = ref();
 const { renderEcharts: renderCamera } = useEcharts(camera);
 async function fetchCamera() {
   const data = await getCamera()
-  const total = data.off + data.on;
+  cameraTotal.value = data.off + data.on;
   const cameraData = [
     { name: '离线', value: data.off },
     { name: '在线', value: data.on }
@@ -397,7 +402,7 @@ async function fetchCamera() {
         label: {
           show: true,
           position: 'center',
-          formatter: `${total}`,
+          formatter: `${cameraTotal.value}`,
           fontSize: 14,
           color: '#fff',
           fontWeight: 'bold'
@@ -416,6 +421,9 @@ async function fetchCamera() {
     ]
   })
 }
+const total = computed(() => {
+  return Number(waterTotal.value) + Number(electricityTotal.value) + Number(cameraTotal.value) + Number(accessControlTotal.value);
+});
 //顶部 电
 const powerMonth = ref();
 const powerYear = ref();
@@ -530,14 +538,30 @@ const initBarChart = async () => {
 const initPowerChart = async () => {
   if (!powerChart.value) return;
   const chart = echarts.init(powerChart.value);
-  await getVisitorCount()
+  const res = await getVisitorCount()
-  console.log(await getVisitorCount(),252)
+  const visitorData = [];
+  const invitationData = [];
+  res.forEach(item => {
+    const { type, todayCounts } = item;
+    Object.entries(todayCounts).forEach(([date, count]) => {
+      const dataItem = { date, value: count };
+      if (type === "访客") {
+        visitorData.push(dataItem);
+      } else if (type === "邀约") {
+        invitationData.push(dataItem);
+      }
+    });
+  });
+  const dates = visitorData.map(item => item.date);
+  const visitor = visitorData.map(item => item.value);
+  const invitation = invitationData.map(item => item.value);
+  console.log(dates,1,visitor,2,invitation)
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 50, bottom: 20 },
     xAxis: {
       type: 'category',
-      data: [80, 120, 100, 180, 150, 120, 60, 40],
+      data: dates,
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
     },
@@ -549,8 +573,8 @@ const initPowerChart = async () => {
     },
     series: [
       {
-        name: '车流',
+        name: '访客',
-        data: [80, 180, 100, 180, 150, 120, 60, 40],
+        data: visitor,
         type: 'line',
         smooth: true,
         itemStyle: { color: '#b388ff' },
@@ -560,8 +584,8 @@ const initPowerChart = async () => {
         symbolSize: 0,
       },
       {
-        name: '去年',
+        name: '邀约',
-        data: [80, 120, 100, 180, 150, 120, 60, 40],
+        data: invitation,
         type: 'line',
         smooth: true,
         itemStyle: { color: '#ffb300' },