feat(components): 新增养老机构详情弹窗组件

refactor(assets): 替换机器人图片格式为png并更新引用路径

feat(views): 为养老机构服务模块添加点击查看详情功能

feat(data): 新增养老机构详情数据文件

style(components): 优化DataTable组件大字体样式

chore: 更新iconfont字体文件及图标

perf(vite): 配置rollup分包优化构建性能

fix(components): 修复ModalDialog组件z-index问题

fix(components): 修正TaskDetailModal机器人底座图片路径

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5166250 */
-  src: url('iconfont.woff2?t=1776908731783') format('woff2'),
-       url('iconfont.woff?t=1776908731783') format('woff'),
-       url('iconfont.ttf?t=1776908731783') format('truetype');
+  src: url('iconfont.woff2?t=1777274547187') format('woff2'),
+       url('iconfont.woff?t=1777274547187') format('woff'),
+       url('iconfont.ttf?t=1777274547187') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-command:before {
+  content: "\e600";
+}
+
 .icon-yanglaoyuan:before {
   content: "\e663";
 }

src/components/DataTable.vue

@@ -5,7 +5,7 @@
       :data="dataRef"
       :show-header="showHeader"
       :border="border"
-      class="custom-table"
+      :class="['custom-table', { 'large-font': largeFont }]"
       @mouseenter.native="handleMouseEnter"
       @mouseleave.native="handleMouseLeave"
     >
@@ -17,11 +17,10 @@
         :width="col.width"
         :align="col.align || 'center'"
       >
-        <template #default="scope" v-if="col.prop === 'riskLevel'">
-          <div class="risk-icon" :class="scope.row.riskLevel"></div>
-        </template>
-        <template #default="scope" v-else-if="col.date">
-          <div class="table-cell">{{ scope.row[col.prop] }}</div>
+        <template #default="scope">
+          <slot :name="col.prop" :row="scope.row">
+            <div class="table-cell">{{ scope.row[col.prop] }}</div>
+          </slot>
         </template>
       </el-table-column>
     </el-table>
@@ -49,6 +48,7 @@ const props = withDefaults(
     width?: string
     border?: boolean
     scrollThreshold?: number
+    largeFont?: boolean
   }>(),
   {
     autoScroll: false,
@@ -57,6 +57,7 @@ const props = withDefaults(
     width: '100%',
     border: false,
     scrollThreshold: 5,
+    largeFont: false,
   }
 )
 
@@ -176,7 +177,6 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .data-table {
-  padding: 0 16px 30px;
   overflow: hidden;
   box-sizing: border-box;
 
@@ -254,25 +254,32 @@ onUnmounted(() => {
       color: #02bcad;
     }
 
-    .risk-icon {
-      width: 38px;
-      height: 34px;
-      margin: 0 auto;
-      background-size: auto;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
+    // 大字体样式
+    &.large-font {
+      :deep(.el-table__body-wrapper tr) {
+        padding: 20px 0;
+      }
 
-    .risk-icon.high {
-      background-image: url('@/assets/icons/icon-warning-red.png');
-    }
+      :deep(.el-table__body-wrapper td) {
+        padding: 20px 0;
+      }
 
-    .risk-icon.medium {
-      background-image: url('@/assets/icons/icon-warning-orange.png');
-    }
+      :deep(.el-table__header th .cell) {
+        font-size: 32px;
+        line-height: 1.5;
+        color: #00d6c0;
+      }
 
-    .risk-icon.low {
-      background-image: url('@/assets/icons/icon-warning-orange.png');
+      :deep(.el-table__body-wrapper td .cell) {
+        font-size: 32px;
+        line-height: 1.5;
+        color: #00d6c0;
+      }
+
+      :deep(.el-table__body-wrapper td .table-cell) {
+        font-size: 32px;
+        line-height: 1.5;
+      }
     }
   }
 

src/components/ElderlyInstitutionService.vue

@@ -2,7 +2,12 @@
   <ModuleCard title="养老机构五项服务状况" size="large">
     <div class="elderly-institution-service">
       <div class="institution-grid">
-        <div v-for="(institution, index) in institutions" :key="index" class="institution-item">
+        <div
+          v-for="(institution, index) in institutions"
+          :key="index"
+          class="institution-item"
+          @click="handleInstitutionClick(institution)"
+        >
           <div class="institution-icon" :class="getIconClass(institution.problemCount)">
             <i class="iconfont icon-yanglaoyuan"></i>
             <!-- <div class="problem-count">{{ institution.problemCount }}</div> -->
@@ -11,15 +16,25 @@
         </div>
       </div>
     </div>
+
+    <!-- 机构详情弹窗 -->
+    <InstitutionDetailModal
+      :visible="modalVisible"
+      :institution="selectedInstitution"
+      @close="modalVisible = false"
+    />
   </ModuleCard>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import ModuleCard from './ModuleCard.vue'
+import InstitutionDetailModal from './InstitutionDetailModal.vue'
 import { institutionServiceData } from '../data/institutionService'
 
 const institutions = computed(() => institutionServiceData.institutions)
+const modalVisible = ref(false)
+const selectedInstitution = ref<any>(null)
 
 const getIconClass = (problemCount: number) => {
   if (problemCount === 0) {
@@ -30,6 +45,11 @@ const getIconClass = (problemCount: number) => {
     return 'status-danger'
   }
 }
+
+const handleInstitutionClick = (institution: any) => {
+  selectedInstitution.value = institution
+  modalVisible.value = true
+}
 </script>
 
 <style lang="scss" scoped>
@@ -77,6 +97,7 @@ $red: #d45656;
       display: flex;
       flex-direction: column;
       align-items: center;
+      cursor: pointer;
 
       .institution-icon {
         position: relative;

src/components/ModalDialog.vue

@@ -1,28 +1,30 @@
 <template>
-  <div class="modal-overlay" v-if="visible" @click="handleOverlayClick">
-    <div class="modal-wrapper" @click.stop>
-      <div class="modal-container">
-        <!-- 标题区域 -->
-        <div class="modal-header">
-          <h2 class="modal-title">{{ title }}</h2>
-          <!-- 右侧插槽 -->
-          <div class="modal-header-right">
-            <slot name="header-right"></slot>
+  <Teleport to=".content-wrapper">
+    <div class="modal-overlay" v-if="visible" @click="handleOverlayClick">
+      <div class="modal-wrapper" @click.stop>
+        <div class="modal-container">
+          <!-- 标题区域 -->
+          <div class="modal-header">
+            <h2 class="modal-title">{{ title }}</h2>
+            <!-- 右侧插槽 -->
+            <div class="modal-header-right">
+              <slot name="header-right"></slot>
+            </div>
           </div>
-        </div>
 
-        <!-- 内容区域 -->
-        <div class="modal-body">
-          <slot></slot>
+          <!-- 内容区域 -->
+          <div class="modal-body">
+            <slot></slot>
+          </div>
         </div>
-      </div>
 
-      <!-- 关闭按钮 -->
-      <button class="modal-close" @click="handleClose">
-        <CloseBold class="close-symbol" />
-      </button>
+        <!-- 关闭按钮 -->
+        <button class="modal-close" @click="handleClose">
+          <CloseBold class="close-symbol" />
+        </button>
+      </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -59,7 +61,7 @@ const handleOverlayClick = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: 9999;
 
   .modal-wrapper {
     position: relative;
@@ -138,7 +140,7 @@ const handleOverlayClick = () => {
       justify-content: center;
       cursor: pointer;
       transition: all 0.3s ease;
-      z-index: 1001;
+      z-index: 10000;
 
       &:hover {
         background-color: #004b47e3;

src/components/TaskDetailModal.vue

@@ -27,7 +27,7 @@
               <div class="error-image">图片加载失败</div>
             </template>
           </el-image>
-          <img src="../assets/images/robot_ pedestal.png" alt="机器人底座" class="robot-pedestal" />
+          <img src="../assets/images/robot_pedestal.png" alt="机器人底座" class="robot-pedestal" />
           <div class="robot-status" v-if="isCurrentTaskRunning">
             <span class="status-dot"></span>
             <span class="status-dot"></span>

src/composables/useTaskDetail.ts

@@ -458,7 +458,7 @@ export function useTaskDetail(props: Props) {
   // 获取机器人图片路径
   const getRobotImage = (type: string) => {
     const robot = robotConfig.find((r) => r.type === type)
-    const imageName = robot?.image || 'robot_safetyInspector.jpg'
+    const imageName = robot?.image || 'robot_auditor.png'
     return new URL(`../assets/images/${imageName}`, import.meta.url).href
   }
 

src/config/robotConfig.ts

@@ -9,17 +9,17 @@ export const robotConfig: RobotConfig[] = [
   {
     type: 'dietaryNutritionist',
     name: 'AI膳食营养员',
-    image: 'robot_dietaryNutritionist.jpg',
+    image: 'robot_dietaryNutritionist.png',
   },
   {
     type: 'safetyInspector',
     name: 'AI安全巡查员',
-    image: 'robot_safetyInspector.jpg',
+    image: 'robot_safetyInspector.png',
   },
   {
     type: 'auditor',
     name: 'AI审计员',
-    image: 'robot_auditor.jpg',
+    image: 'robot_auditor.png',
   },
   {
     type: 'analyst',
@@ -29,16 +29,16 @@ export const robotConfig: RobotConfig[] = [
   {
     type: 'familyLiaison',
     name: 'AI家属联络员',
-    image: 'robot_familyLiaison.jpg',
+    image: 'robot_familyLiaison.png',
   },
   {
     type: 'coordinatedDispatcher',
     name: 'AI协同调度员',
-    image: 'robot_coordinatedDispatcher.jpg',
+    image: 'robot_coordinatedDispatcher.png',
   },
   {
     type: 'warningSupervisor',
     name: 'AI预警与督办员',
-    image: 'robot_warningSupervisor.jpg',
+    image: 'robot_warningSupervisor.png',
   },
 ]

src/data/institutionDetail.ts

@@ -0,0 +1,218 @@
+// 养老机构详情数据
+export const institutionDetailData = {
+  // 基本信息数据
+  basicInfo: {
+    name: '安城区养老服务中心',
+    address: '安城区安城街道安城路123号',
+    phone: '0371-12345678',
+    director: '张院长',
+    contactPhone: '13800138000',
+    level: '五星级',
+    bedCount: 200,
+    elderlyCount: 180,
+    staffCount: 50,
+    establishedDate: '2018-01-01',
+    businessLicense: '91410100MA44444444',
+    serviceScope: '为老年人提供生活照料、康复护理、精神慰藉、文化娱乐等服务'
+  },
+
+  // 摄像头数据
+  cameras: [
+    {
+      type: '消防安全摄像头',
+      count: 5,
+      onlineCount: 3,
+      offlineCount: 2
+    },
+    {
+      type: '明厨亮灶摄像头',
+      count: 4,
+      onlineCount: 4,
+      offlineCount: 0
+    },
+    {
+      type: '活动场所摄像头',
+      count: 2,
+      onlineCount: 2,
+      offlineCount: 0
+    }
+  ],
+
+  // 钱花得明白 - 统计数字
+  financeStats: {
+    income: 525000,
+    expenditure: 328000,
+    disclosureRate: 95.2,
+    fundUsageRate: 100,
+    serviceRate: 100,
+    procurementRate: 100,
+    ratingRate: 100
+  },
+
+  // 钱花得明白 - 收入数据
+  incomeData: [
+    { value: 5000, name: '特困人员供养金' },
+    { value: 3300, name: '照料补贴费' },
+    { value: 2600, name: '机构运转经费' }
+  ],
+
+  // 钱花得明白 - 支出数据
+  expenseData: [
+    { value: 2500, name: '餐饮支出' },
+    { value: 2000, name: '医疗支出' },
+    { value: 1800, name: '护理支出' },
+    { value: 1500, name: '娱乐支出' },
+    { value: 1200, name: '维修支出' },
+    { value: 1000, name: '培训支出' },
+    { value: 800, name: '其他支出' }
+  ],
+
+  // 钱花得明白 - 发放数据
+  distributionData: {
+    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    actual: [12000, 13200, 10100, 13400, 9000, 23000, 21000, 18000, 19000, 20000, 22000, 25000],
+    planned: [10000, 12000, 11000, 12000, 10000, 20000, 18000, 16000, 17000, 18000, 20000, 22000]
+  },
+
+  // 钱花得明白 - 表格列配置
+  fundTableColumns: [
+    { prop: 'id', label: '序号', width: 160, align: 'center' },
+    { prop: 'name', label: '老人姓名', width: 260, align: 'center' },
+    { prop: 'idCard', label: '身份证号', width: 450, align: 'center' },
+    { prop: 'age', label: '年龄', width: 160, align: 'center' },
+    { prop: 'type', label: '特困类型', width: 280, align: 'center' },
+    { prop: 'amount', label: '基本生活费标准(元/月)', width: 400, align: 'center' },
+    { prop: 'status1', label: '机构上报状态', width: 280, align: 'center' },
+    { prop: 'status2', label: '民政计划纳入', width: 280, align: 'center' },
+    { prop: 'status3', label: '财政拨付状态', width: 280, align: 'center' },
+    { prop: 'status4', label: '机构到账状态', width: 280, align: 'center' },
+    { prop: 'date', label: '到账时间', width: 312, align: 'center' }
+  ],
+
+  // 钱花得明白 - 表格数据
+  fundTableData: [
+    {
+      id: 1,
+      name: '王桂兰',
+      idCard: '411003193805127834',
+      age: 88,
+      type: '农村特困供养',
+      amount: 680,
+      status1: '已上报',
+      status2: '已纳入',
+      status3: '已拨付',
+      status4: '已到账',
+      date: '2026-03-10'
+    },
+    {
+      id: 2,
+      name: '李守田',
+      idCard: '411003193602213627',
+      age: 90,
+      type: '农村特困供养',
+      amount: 680,
+      status1: '已上报',
+      status2: '已纳入',
+      status3: '已拨付',
+      status4: '已到账',
+      date: '2026-03-10'
+    },
+    {
+      id: 3,
+      name: '张秀英',
+      idCard: '411003194011053429',
+      age: 86,
+      type: '农村特困供养',
+      amount: 680,
+      status1: '已上报',
+      status2: '已纳入',
+      status3: '已拨付',
+      status4: '已到账',
+      date: '2026-03-10'
+    }
+  ],
+
+  // 钱花得明白 - 问题表格列配置
+  problemTableColumns: [
+    { prop: 'id', label: '序号', width: 160, align: 'center' },
+    { prop: 'fundType', label: '资金类型', width: 260, align: 'center' },
+    { prop: 'problem', label: '问题', width: 400, align: 'center' },
+    { prop: 'description', label: '问题描述', align: 'left' },
+    { prop: 'riskLevel', label: '风险等级', width: 280, align: 'center' },
+    { prop: 'time', label: '预警时间', width: 320, align: 'center' },
+    { prop: 'source', label: '来源', width: 360, align: 'center' },
+    { prop: 'status', label: '状态', width: 220, align: 'center' },
+    { prop: 'operation', label: '操作', width: 280, align: 'center' }
+  ],
+
+  // 钱花得明白 - 问题表格数据
+  problemTableData: [
+    {
+      id: 1,
+      fundType: '照料护理费',
+      problem: '护理费与失能等级不匹配',
+      description: '津贴补贴AI审核员(410526194101212336) 护理资金全护理标准上报，超发600元/月',
+      riskLevel: 'high',
+      time: '2026-04-13 11:05',
+      source: '津贴补贴AI审核员',
+      status: '未处置'
+    },
+    {
+      id: 2,
+      fundType: '高龄津贴',
+      problem: '年龄未满80周岁',
+      description: '津贴补贴AI审核员(410526194101212336) 护理资金全护理标准上报，超发600元/月',
+      riskLevel: 'medium',
+      time: '2026-04-13 11:06',
+      source: '津贴补贴AI审核员',
+      status: '未处置'
+    },
+    {
+      id: 3,
+      fundType: '高龄津贴',
+      problem: '户籍不在本区',
+      description: '津贴补贴AI审核员(410526194101212336) 护理资金全护理标准上报，超发600元/月',
+      riskLevel: 'high',
+      time: '2026-04-13 11:05',
+      source: '津贴补贴AI审核员',
+      status: '处置中'
+    },
+    {
+      id: 4,
+      fundType: '特困供养金',
+      problem: '死亡冒领',
+      description: '津贴补贴AI审核员(410526194101212336) 护理资金全护理标准上报，超发600元/月',
+      riskLevel: 'high',
+      time: '2026-04-13 11:05',
+      source: '津贴补贴AI审核员',
+      status: '已整改'
+    }
+  ],
+
+  // 机器人数据
+  robots: [
+    {
+      name: 'AI审计员',
+      image: '/src/assets/images/robot_auditor.png'
+    },
+    {
+      name: 'AI预警与督办员',
+      image: '/src/assets/images/robot_warningSupervisor.png'
+    }
+  ],
+
+  // 统计信息
+  statistics: {
+    reviewedApplications: 146,
+    authenticatedElderly: 237,
+    comparedData: 8680,
+    coveredElderly: 287,
+    approvalRate: 98.9,
+    abnormalApplications: 9,
+    involvedFunds: 3600,
+    pendingAlerts: 8,
+    directFeedback: 5,
+    rectificationRequirements: 3,
+    rectificationRate: 78.4
+  }
+}

src/views/HomeView.vue

@@ -35,7 +35,15 @@
               :border="true"
               height="314px"
               width="100%"
-            />
+              style="padding: 0 16px 30px"
+            >
+              <template #riskLevel="{ row }">
+                <div class="risk-icon" :class="row.riskLevel"></div>
+              </template>
+              <template #warningTime="{ row }">
+                <div class="table-cell">{{ row.warningTime }}</div>
+              </template>
+            </DataTable>
           </ModuleCard>
 
           <ModuleCard title="饭吃得满意">
@@ -53,7 +61,14 @@
               height="370px"
               width="100%"
               style="padding: 0 28px; margin-top: 36px"
-            />
+            >
+              <template #riskLevel="{ row }">
+                <div class="risk-icon" :class="row.riskLevel"></div>
+              </template>
+              <template #date="{ row }">
+                <div class="table-cell">{{ row.date }}</div>
+              </template>
+            </DataTable>
 
             <!-- 底部横向进度条 -->
             <HorizontalProgressChart
@@ -77,7 +92,14 @@
               height="560px"
               width="100%"
               style="padding: 0 28px; margin-top: 36px"
-            />
+            >
+              <template #riskLevel="{ row }">
+                <div class="risk-icon" :class="row.riskLevel"></div>
+              </template>
+              <template #date="{ row }">
+                <div class="table-cell">{{ row.date }}</div>
+              </template>
+            </DataTable>
           </ModuleCard>
 
           <ModuleCard title="衣穿得舒适">
@@ -94,7 +116,11 @@
               height="330px"
               width="100%"
               style="padding: 0 28px; margin-top: 36px"
-            />
+            >
+              <template #date="{ row }">
+                <div class="table-cell">{{ row.date }}</div>
+              </template>
+            </DataTable>
 
             <!-- 图片轮播 -->
             <div style="height: 190px; margin-top: 40px; padding: 0 28px">
@@ -117,7 +143,14 @@
               height="328px"
               width="100%"
               style="padding: 0 16px; margin-top: 36px"
-            />
+            >
+              <template #riskLevel="{ row }">
+                <div class="risk-icon" :class="row.riskLevel"></div>
+              </template>
+              <template #date="{ row }">
+                <div class="table-cell">{{ row.date }}</div>
+              </template>
+            </DataTable>
 
             <!-- 图片轮播 -->
             <div style="height: 190px; margin-top: 40px; padding: 0 28px">
@@ -631,4 +664,26 @@ $text-color: rgba(0, 255, 230, 0.7);
     }
   }
 }
+
+/* 风险图标样式 */
+.risk-icon {
+  width: 38px;
+  height: 34px;
+  margin: 0 auto;
+  background-size: auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.risk-icon.high {
+  background-image: url('@/assets/icons/icon-warning-red.png');
+}
+
+.risk-icon.medium {
+  background-image: url('@/assets/icons/icon-warning-orange.png');
+}
+
+.risk-icon.low {
+  background-image: url('@/assets/icons/icon-warning-orange.png');
+}
 </style>

vite.config.ts

@@ -13,4 +13,19 @@ export default defineConfig({
   server: {
     port: 5175,
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['vue', 'vue-router', 'pinia'],
+          element: ['element-plus'],
+          echarts: ['echarts'],
+          swiper: ['swiper'],
+          axios: ['axios'],
+          marked: ['marked'],
+        },
+      },
+    },
+    chunkSizeWarningLimit: 200,
+  },
 })