feat: 调整智慧大屏的监护对象名称与组件名称；删除冗余组件；

src/views/dashboard/components/AlarmHistoryCard/index.vue

@@ -1,123 +0,0 @@
-<template>
-  <TechCard>
-    <template #extra>
-      <div class="toggle-group">
-        <button :class="{ active: mode === 'day' }" @click="mode = 'day'">按日</button>
-        <button :class="{ active: mode === 'month' }" @click="mode = 'month'">按月</button>
-      </div>
-    </template>
-
-    <div class="card-title">历史告警统计</div>
-    <BaseChart :option="chartOption" :height="175" />
-  </TechCard>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import TechCard from '../TechCard/index.vue'
-import * as echarts from 'echarts'
-
-defineOptions({ name: 'AlarmHistoryCard' })
-
-// 切换模式：按日 / 按月
-const mode = ref<'day' | 'month'>('day')
-
-// 模拟接口数据结构
-const rawData = ref({
-  dayStatInfo: [
-    { date: '2024-07-01', fallingCount: 10 },
-    { date: '2024-07-02', fallingCount: 15 },
-    { date: '2024-07-03', fallingCount: 20 },
-    { date: '2024-07-04', fallingCount: 12 },
-    { date: '2024-07-05', fallingCount: 8 },
-  ],
-  monthStatInfo: [
-    { month: '2024-06', fallingCount: 50 },
-    { month: '2024-07', fallingCount: 65 },
-  ],
-})
-
-// 根据模式转换图表数据
-const alarmHistoryData = computed(() => {
-  const source = mode.value === 'day' ? rawData.value.dayStatInfo : rawData.value.monthStatInfo
-  const dates = source.map((item) => ('date' in item ? item.date : item.month))
-  const values = source.map((item) => item.fallingCount ?? 0)
-  return { dates, values }
-})
-
-// 图表配置项
-const chartOption = computed(() => ({
-  grid: { top: 10, right: 20, bottom: 30, left: 30 },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: { type: 'shadow' },
-  },
-  xAxis: {
-    type: 'category',
-    data: alarmHistoryData.value.dates,
-    axisLine: { lineStyle: { color: '#2a3b5a' } },
-    axisLabel: { color: '#9cc5e0', fontSize: 12 },
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: '#2a3b5a' } },
-    axisLabel: { color: '#9cc5e0', fontSize: 12 },
-    splitLine: { lineStyle: { color: 'rgba(42, 59, 90, 0.3)' } },
-  },
-  series: [
-    {
-      name: '告警次数',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 8,
-      data: alarmHistoryData.value.values,
-      itemStyle: { color: '#f39c12' },
-      lineStyle: {
-        width: 3,
-        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-          { offset: 0, color: '#f39c12' },
-          { offset: 1, color: '#e74c3c' },
-        ]),
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: 'rgba(243, 156, 18, 0.3)' },
-          { offset: 1, color: 'rgba(243, 156, 18, 0.1)' },
-        ]),
-      },
-    },
-  ],
-}))
-</script>
-
-<style scoped lang="less">
-.card-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #f39c12;
-  margin-bottom: 12px;
-  text-align: center;
-}
-
-.toggle-group {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-
-  button {
-    background: none;
-    border: 1px solid #f39c12;
-    color: #f39c12;
-    padding: 4px 10px;
-    border-radius: 4px;
-    font-size: 12px;
-    cursor: pointer;
-
-    &.active {
-      background-color: #f39c12;
-      color: #fff;
-    }
-  }
-}
-</style>

src/views/dashboard/components/FallingHistoryCard/index.vue

@@ -1,123 +0,0 @@
-<template>
-  <TechCard>
-    <template #extra>
-      <div class="toggle-group">
-        <button :class="{ active: mode === 'day' }" @click="mode = 'day'">按日</button>
-        <button :class="{ active: mode === 'month' }" @click="mode = 'month'">按月</button>
-      </div>
-    </template>
-
-    <div class="card-title">历史跌倒统计</div>
-    <BaseChart :option="chartOption" :height="175" />
-  </TechCard>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import * as echarts from 'echarts'
-import TechCard from '../TechCard/index.vue'
-
-defineOptions({ name: 'FallingHistoryCard' })
-
-// 切换模式：按日 / 按月
-const mode = ref<'day' | 'month'>('day')
-
-// 模拟接口数据结构
-const rawData = ref({
-  dayStatInfo: [
-    { date: '2024-07-01', fallingCount: 5 },
-    { date: '2024-07-02', fallingCount: 8 },
-    { date: '2024-07-03', fallingCount: 6 },
-    { date: '2024-07-04', fallingCount: 10 },
-    { date: '2024-07-05', fallingCount: 7 },
-  ],
-  monthStatInfo: [
-    { month: '2024-06', fallingCount: 32 },
-    { month: '2024-07', fallingCount: 41 },
-  ],
-})
-
-// 根据模式转换图表数据
-const fallingHistoryData = computed(() => {
-  const source = mode.value === 'day' ? rawData.value.dayStatInfo : rawData.value.monthStatInfo
-  const dates = source.map((item) => ('date' in item ? item.date : item.month))
-  const values = source.map((item) => item.fallingCount ?? 0)
-  return { dates, values }
-})
-
-// 图表配置项
-const chartOption = computed(() => ({
-  grid: { top: 10, right: 20, bottom: 30, left: 30 },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: { type: 'shadow' },
-  },
-  xAxis: {
-    type: 'category',
-    data: fallingHistoryData.value.dates,
-    axisLine: { lineStyle: { color: '#2a3b5a' } },
-    axisLabel: { color: '#9cc5e0', fontSize: 12 },
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: '#2a3b5a' } },
-    axisLabel: { color: '#9cc5e0', fontSize: 12 },
-    splitLine: { lineStyle: { color: 'rgba(42, 59, 90, 0.3)' } },
-  },
-  series: [
-    {
-      name: '跌倒次数',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 8,
-      data: fallingHistoryData.value.values,
-      itemStyle: { color: '#e74c3c' },
-      lineStyle: {
-        width: 3,
-        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-          { offset: 0, color: '#e74c3c' },
-          { offset: 1, color: '#c0392b' },
-        ]),
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: 'rgba(231, 76, 60, 0.3)' },
-          { offset: 1, color: 'rgba(231, 76, 60, 0.1)' },
-        ]),
-      },
-    },
-  ],
-}))
-</script>
-
-<style scoped lang="less">
-.card-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #e74c3c;
-  margin-bottom: 12px;
-  text-align: center;
-}
-
-.toggle-group {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-
-  button {
-    background: none;
-    border: 1px solid #e74c3c;
-    color: #e74c3c;
-    padding: 4px 10px;
-    border-radius: 4px;
-    font-size: 12px;
-    cursor: pointer;
-
-    &.active {
-      background-color: #e74c3c;
-      color: #fff;
-    }
-  }
-}
-</style>

src/views/dashboard/components/DeviceAgeCard/index.vue → src/views/dashboard/components/GuardObjectAgeCard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <TechCard>
-    <div class="card-title">设备年龄层次分布</div>
+    <div class="card-title">监护对象年龄分布</div>
     <BaseChart :option="chartOption" :height="220" />
   </TechCard>
 </template>
@@ -9,7 +9,7 @@
 import { computed } from 'vue'
 import TechCard from '../TechCard/index.vue'
 
-defineOptions({ name: 'DeviceAgeCard' })
+defineOptions({ name: 'GuardObjectAgeCard' })
 
 interface AgeItem {
   ageRange: string

src/views/dashboard/components/ObjectDistributionCard/index.vue → src/views/dashboard/components/GuardObjectTypeCard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <TechCard>
-    <div class="card-title">检测对象分布</div>
+    <div class="card-title">监护对象类型</div>
     <BaseChart :option="chartOption" :height="180" />
   </TechCard>
 </template>
@@ -9,7 +9,7 @@
 import { computed } from 'vue'
 import TechCard from '../TechCard/index.vue'
 
-defineOptions({ name: 'ObjectDistributionCard' })
+defineOptions({ name: 'GuardObjectTypeCard' })
 
 interface GuardItem {
   guardType: string

src/views/dashboard/components/PeopleDetectedCard/index.vue → src/views/dashboard/components/MonitorPeopleCountCard/index.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import TechCard from '../TechCard/index.vue'
 
-defineOptions({ name: 'PeopleScanGlowCard' })
+defineOptions({ name: 'MonitorPeopleCountCard' })
 
 type Props = {
   detectedCount: number

src/views/dashboard/index.vue

@@ -13,10 +13,10 @@
             :online-count="todayData.onlineCount"
             :device-count="todayData.deviceCount"
           ></DeviceOnlineRateCard>
-          <PeopleDetectedCard :detectedCount="todayData.detectedCount"></PeopleDetectedCard>
+          <MonitorPeopleCountCard :detectedCount="todayData.detectedCount"></MonitorPeopleCountCard>
         </div>
         <div class="data-row">
-          <ObjectDistributionCard :guardList="todayData.guardList"></ObjectDistributionCard>
+          <GuardObjectTypeCard :guardList="todayData.guardList"></GuardObjectTypeCard>
           <AlertFallCompareCard
             :fall-count="todayData.fallingCount"
             :alert-count="todayData.alarmCount"
@@ -46,7 +46,7 @@
       </div>
       <div class="block custom-scroll" style="padding: 10px">
         <div class="data-row">
-          <DeviceAgeCard :ageList="todayData.ageList"></DeviceAgeCard>
+          <GuardObjectAgeCard :ageList="todayData.ageList"></GuardObjectAgeCard>
           <ElderActivityCard :activity-rate="todayData.activeRate"></ElderActivityCard>
         </div>
 
@@ -112,10 +112,10 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import DeviceOnlineRateCard from './components/DeviceOnlineRateCard/index.vue'
 import AlertFallCompareCard from './components/AlertFallCompareCard/index.vue'
 import ElderActivityCard from './components/ElderActivityCard/index.vue'
-import PeopleDetectedCard from './components/PeopleDetectedCard/index.vue'
+import MonitorPeopleCountCard from './components/MonitorPeopleCountCard/index.vue'
 import DeviceLocationCard from './components/DeviceLocationCard/index.vue'
-import DeviceAgeCard from './components/DeviceAgeCard/index.vue'
-import ObjectDistributionCard from './components/ObjectDistributionCard/index.vue'
+import GuardObjectAgeCard from './components/GuardObjectAgeCard/index.vue'
+import GuardObjectTypeCard from './components/GuardObjectTypeCard/index.vue'
 import HistoryChartCard from './components/HistoryChartCard/index.vue'
 import { useUserStore } from '@/stores/user'
 import type { TodayData } from './types'