瑞都看板

src/locales/en.ts

@@ -18,6 +18,14 @@ export default {
     maintenanceWorkOrder:'MaintenanceWorkOrder',
     inspectOrder:'Inspect Order',
     operationRecord:'Operation Record',
+    sparePartsReplacement:'Spare Parts Replacement',
+    spareCount:'spareCount',
+    spareAmount:'spareAmount',
+    maintenanceStatus:'maintenanceStatus',
+    inspectStatus:'inspectStatus',
+    totalOrder:'totalOrder',
+    finishedOrder:'finishedOrder',
+    pendingOrder:'pendingOrder',
   },
   common: {
     sort:'sort',

src/locales/zh-CN.ts

@@ -18,6 +18,14 @@ export default {
     maintenanceWorkOrder:'保养工单',
     inspectOrder:'巡检工单',
     operationRecord:'运行记录',
+    sparePartsReplacement:'备件更换情况',
+    spareCount:'物料消耗数量',
+    spareAmount:'物料消耗费用',
+    maintenanceStatus:'保养情况',
+    inspectStatus:'巡检情况',
+    totalOrder:'总工单数',
+    finishedOrder:'已执行工单数',
+    pendingOrder:'待执行工单数',
   },
   common: {
     sort:'排序',

src/views/pms/stat/rdkb.vue

@@ -8,7 +8,7 @@
           icon="fa-solid:project-diagram"
           icon-bg-color="text-blue-500"
           icon-color="bg-blue-100"
-          title="设备数"
+          :title="t('stat.deviceCount')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -17,7 +17,7 @@
           icon="fa-solid:list"
           icon-bg-color="text-pink-500"
           icon-color="bg-blue-100"
-          title="维修工单"
+          :title="t('stat.maintenanceOrder')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -26,7 +26,7 @@
           icon="fa-solid:times-circle"
           icon-bg-color="text-purple-500"
           icon-color="bg-purple-100"
-          title="运行未填写"
+          :title="t('stat.operationNotFilled')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -35,7 +35,7 @@
           icon="fa-solid:award"
           icon-bg-color="text-purple-500"
           icon-color="bg-purple-100"
-          title="运行已填写"
+          :title="t('stat.operationFilled')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -44,7 +44,7 @@
           icon="fa-solid:times-circle"
           icon-bg-color="text-green-500"
           icon-color="bg-green-100"
-          title="未执行保养"
+          :title="t('stat.notMaintained')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -53,7 +53,7 @@
           icon="fa-solid:award"
           icon-bg-color="text-green-500"
           icon-color="bg-green-100"
-          title="已执行保养"
+          :title="t('stat.maintained')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -62,7 +62,7 @@
           icon="fa-solid:times-circle"
           icon-bg-color="text-yellow-500"
           icon-color="bg-yellow-100"
-          title="待填写巡检"
+          :title="t('stat.notInspected')"
         />
       </el-col>
       <el-col v-loading="loading" :sm="3" :xs="12">
@@ -71,7 +71,7 @@
           icon="fa-solid:award"
           icon-bg-color="text-yellow-500"
           icon-color="bg-yellow-100"
-          title="已填写巡检"
+          :title="t('stat.inspected')"
         />
       </el-col>
     </el-row>
@@ -81,7 +81,7 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center">
-              <span class="text-base font-medium " style="color: #b6c8da">设备状态统计</span>
+              <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.deviceStatus')}}</span>
             </div>
           </template>
           <div ref="statusChartRef" class="h-[290px]"></div>
@@ -91,7 +91,7 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
-              <span class="text-base font-medium " style="color: #b6c8da">工单数量情况</span>
+              <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.orderCount')}}</span>
             </div>
           </template>
           <div ref="qxRef" class="h-[290px]"></div>
@@ -104,7 +104,7 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
-              <span class="text-base font-medium " style="color: #b6c8da">备件更换情况</span>
+              <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.sparePartsReplacement')}}</span>
             </div>
           </template>
           <!-- 添加两个卡片 -->
@@ -115,7 +115,7 @@
                   <Icon icon="fa-solid:award" size="30" color="blue" />
                 </div>
                 <div class="flex flex-col items-center">
-                  <span class="text-sm " style="color: #101010">物料消耗数量</span>
+                  <span class="text-sm " style="color: #101010">{{t('stat.spareCount')}}</span>
                   <span class="text-lg font-bold">{{ totalMaterialCount }}</span>
                 </div>
               </div>
@@ -126,7 +126,7 @@
                   <Icon icon="fa-solid:yen-sign" size="30" color="orange" />
                 </div>
                 <div class="flex flex-col items-center">
-                  <span class="text-sm " style="color: #101010">物料消耗费用</span>
+                  <span class="text-sm " style="color: #101010">{{t('stat.spareAmount')}}</span>
                   <span class="text-lg font-bold">{{ totalMaterialCost }}</span>
                 </div>
               </div>
@@ -140,7 +140,7 @@
           <el-card class="chart-card" shadow="never">
             <template #header>
               <div class="flex items-center justify-between">
-                <span class="text-base font-medium " style="color: #b6c8da">保养情况</span>
+                <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.maintenanceStatus')}}</span>
               </div>
             </template>
             <div class="flex mr-3">
@@ -149,17 +149,17 @@
                 <div class="flex justify-between">
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:list" size="30" color="#f1d209" />
-                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">总工单数</p>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">{{t('stat.totalOrder')}}</p>
                     <span style="font-size: 20px;color: white">{{ (by.finished?by.finished:0) + (by.todo?by.todo:0) }}</span>
                   </div>
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:check-circle" size="30" color="green" />
-                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">已执行工单数</p>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">{{t('stat.finishedOrder')}}</p>
                     <span style="font-size: 20px;color: white">{{ by.finished?by.finished:0 }}</span>
                   </div>
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:hourglass-half" size="30" color="#e14f0f" />
-                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">待执行工单数 </p>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">{{t('stat.pendingOrder')}} </p>
                     <span style="font-size: 20px;color: white">{{ by.todo?by.todo:0 }}</span>
                   </div>
                 </div>
@@ -169,7 +169,7 @@
           <el-card class="chart-card mt-2" shadow="never">
             <template #header>
               <div class="flex items-center justify-between">
-                <span class="text-base font-medium " style="color: #b6c8da">巡检情况</span>
+                <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.inspectStatus')}}</span>
               </div>
             </template>
             <div class="flex mr-3">
@@ -178,17 +178,17 @@
                 <div class="flex justify-between">
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:list" size="30" color="#f1d209" />
-                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">总工单数</p>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">{{t('stat.totalOrder')}}</p>
                     <span style="font-size: 20px;color: white">{{ inspect.todo + inspect.finished }}</span>
                   </div>
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:check-circle" size="30" color="green" />
-                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">已执行工单数</p>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">{{t('stat.finishedOrder')}}</p>
                     <span style="font-size: 20px;color: white">{{ inspect.finished }}</span>
                   </div>
                   <div class="flex flex-col items-center">
                     <Icon icon="fa-solid:hourglass-half" size="30" color="#e14f0f" />
-                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">待执行工单数</p>
+                    <p style="font-size: 20px; margin-top: 5px;color: #91cc75">{{t('stat.pendingOrder')}}</p>
                     <span style="font-size: 20px;color: white">{{ inspect.todo }}</span>
                   </div>
                 </div>
@@ -203,7 +203,6 @@
 <script lang="ts" setup>
 import { MemberSummaryRespVO } from '@/api/mall/statistics/member'
 import SummaryCard from '@/components/SummaryCard/index.vue'
-import { fenToYuan } from '@/utils'
 import * as echarts from 'echarts/core'
 import { BarChart, GaugeChart, LineChart, PieChart } from 'echarts/charts' // 显式导入柱状图模块
 import {
@@ -217,7 +216,7 @@ import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { IotStatApi } from '@/api/pms/stat'
 import { ref, onMounted, computed, watch, nextTick, reactive } from 'vue'
-import { useUserStore } from '@/store/modules/user'
+import {useLocaleStore} from "@/store/modules/locale";
 
 /** 会员统计 */
 defineOptions({ name: 'IotRdStat' })
@@ -250,6 +249,7 @@ const inspectChartRef = ref(null)
 let inspectChartInstance = null
 const inspectionChartRef = ref(null)
 let inspectionChartInstance = null
+const { t } = useI18n() // 国际化
 const maintenanceChartRef1 = ref(null)
 
 const typeData = ref({})
@@ -291,12 +291,23 @@ const sparePartData = ref({
     }
   ]
 })
-
-// 模拟保养工单数据
-const totalMaintenanceOrders = ref(100)
-const completedMaintenanceOrders = ref(80)
-const pendingMaintenanceOrders = ref(20)
-
+const sparePartDataEng = ref({
+  xAxis: ['spanner', 'cup', 'belt', 'screw'],
+  series: [
+    {
+      name: 'count',
+      type: 'bar',
+      data: [10, 20, 15, 25],
+      yAxisIndex: 0
+    },
+    {
+      name: 'amount',
+      type: 'line',
+      data: [100, 200, 150, 250],
+      yAxisIndex: 1
+    }
+  ]
+})
 // 模拟巡检工单数据
 const totalInspectionOrders = ref(80)
 const completedInspectionOrders = ref(60)
@@ -346,7 +357,13 @@ const getStats = () => {
   IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
     fill.value = res.totalList[0] || []
   })
-  initSparePartChart()
+  const localeStore = useLocaleStore()
+  const lang = localeStore.getCurrentLocale.lang
+  if (lang==='zh-CN') {
+    initSparePartChart('数量','金额', sparePartData)
+  } else if (lang==='en') {
+    initSparePartChart('count','amount', sparePartDataEng)
+  }
   initInspectionChart()
 }
 
@@ -471,7 +488,7 @@ const initQxChart = () => {
   qxInstance.setOption(option)
 }
 
-const initSparePartChart = () => {
+const initSparePartChart = (count:any,amount:any, spare:{}) => {
   if (!sparePartRef.value) return
   sparePartInstance = echarts.init(sparePartRef.value)
   const option = {
@@ -485,7 +502,7 @@ const initSparePartChart = () => {
       }
     },
     legend: {
-      data: ['数量', '金额'],
+      data: [count, amount],
       textStyle:{
         color: '#fff'
       }
@@ -498,7 +515,7 @@ const initSparePartChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: sparePartData.value.xAxis,
+      data: spare.value.xAxis,
       axisLabel: {
         color: '#B6C8DA',
       },
@@ -511,7 +528,7 @@ const initSparePartChart = () => {
     yAxis: [
       {
         type: 'value',
-        name: '数量',
+        name: count,
         position: 'left',
         axisLabel: {
           color: '#B6C8DA',
@@ -534,7 +551,7 @@ const initSparePartChart = () => {
       },
       {
         type: 'value',
-        name: '金额',
+        name: amount,
         position: 'right',
         axisLabel: {
           color: '#B6C8DA',
@@ -559,7 +576,7 @@ const initSparePartChart = () => {
         }
       }
     ],
-    series: sparePartData.value.series.map((item, index) => ({
+    series: spare.value.series.map((item, index) => ({
       name: item.name,
       type: item.type,
       data: item.data,