首页看板多语言及运行监控列表动画

src/views/Home/Index.vue

@@ -246,6 +246,7 @@ import { formatDate } from '@/utils/formatTime'
 import { IotStatApi } from '@/api/pms/stat'
 import SummaryCard from "@/components/SummaryCard/index.vue";
 import {reactive, ref} from "vue";
+import { useLocaleStore } from '@/store/modules/locale'
 
 // TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
 
@@ -877,7 +878,7 @@ let activeInstance = null
 //   { department: '运营中心', total: 157, active: 89 }
 // ])
 const activeData = ref([])
-const initActiveChart = async () => {
+const initActiveChart = async (total:any, active:any,people:any) => {
   if (!activeDom.value) return
   activeData.value = await IotStatApi.getDeptCount()
   activeInstance = echarts.init(activeDom.value)
@@ -888,12 +889,12 @@ const initActiveChart = async () => {
       axisPointer: { type: 'shadow' }, //:ml-citation{ref="1,7" data="citationList"}
       formatter: (params) => `
         ${params[0].name}<br/>
-        ${params[0].marker} 总人数: ${params[0].value}<br/>
-        ${params[1].marker} 活跃人数: ${params[1].value}
+        ${params[0].marker} ${total}: ${params[0].value}<br/>
+        ${params[1].marker} ${active}: ${params[1].value}
       `
     },
     legend: {
-      data: ['总人数', '活跃人数'],
+      data: [total, active],
       top: 30,
       textStyle: {
         color: '#B6C8DA',
@@ -921,7 +922,7 @@ const initActiveChart = async () => {
     },
     yAxis: {
       type: 'value',
-      name: '人数',
+      name: people,
       axisLabel: {
         color: '#B6C8DA',
       },
@@ -942,7 +943,7 @@ const initActiveChart = async () => {
     },
     series: [
       {
-        name: '总人数',
+        name: total,
         type: 'bar',
         data: activeData.value.map((item) => item.total),
         itemStyle: {
@@ -954,7 +955,7 @@ const initActiveChart = async () => {
         barWidth: 30
       },
       {
-        name: '活跃人数',
+        name: active,
         type: 'bar',
         data: activeData.value.map((item) => item.active),
         itemStyle: {
@@ -1100,7 +1101,14 @@ onMounted(() => {
   getStats()
   // initChart()
   initTopChart()
-  initActiveChart()
+  const localeStore = useLocaleStore()
+  const lang = localeStore.getCurrentLocale.lang
+  if (lang==='zh-CN') {
+    initActiveChart('总人数','活跃人数','人数')
+  } else if (lang==='en') {
+    initActiveChart('totalPeople','activePeople','count')
+  }
+
   // initQxChart()
   window.addEventListener('resize', resizeQxChart)
   // fetchTop()

src/views/pms/device/monitor/index.vue

@@ -106,7 +106,7 @@
                 class="mb-4"
               >
                 <el-card
-                  class="h-full transition-colors relative overflow-hidden"
+                  class="h-full transition-colors relative overflow-hidden custom-card"
                   :body-style="{ padding: '0' }"
                 >
                   <!-- 添加渐变背景层 -->
@@ -434,3 +434,19 @@ const handleDeptNodeClick = async (row) => {
   await getList()
 }
 </script>
+<style scoped>
+.custom-card{
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  transform: scale(1); /* 原始大小 */
+
+  /* 关键：添加过渡动画，让变化更平滑 */
+  transition: all 0.3s ease;
+}
+.custom-card:hover {
+  /* 增强阴影效果，增加立体感 */
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
+
+  /* 轻微放大（1.03倍是比较合适的比例） */
+  transform: scale(1.03);
+}
+</style>