update

src/locales/lang/en.ts

@@ -341,6 +341,12 @@ export default {
         "针数": "Stitches",
         "压脚次数": "Presser foot times",
         "能耗": "EC",
+        "次": " times",
+        "设备稼动率": "Equipment Utilization Rate",
+        "产出进度": "Output Progress",
+        "稼动率说明": "Utilization rate (actual working time/actual boot time)",
+        "已完成":"Completed",
+        "未完成":"Uncompleted",
         
       },
       "default":{

src/locales/lang/zh.ts

@@ -339,6 +339,12 @@ export default {
         "针数": "针数",
         "压脚次数": "压脚次数",
         "能耗": "能耗",
+        "次": "次",
+        "设备稼动率": "设备稼动率",
+        "产出进度": "产出进度",
+        "稼动率说明":"稼动率：实际工作时间/设备开机时间",
+        "已完成":"已完成",
+        "未完成":"未完成",
     },
     "default":{
         '年': '年',

src/views/Exhibition/Germany/child.vue

@@ -64,15 +64,15 @@
     <div class="left-tip-type">
       <div class="left-tip-type-item">
         <div class="yuan green"></div>
-        <div class="left-tip-type-item-text">工作</div>
+        <div class="left-tip-type-item-text">{{tLang('default','工作')}}</div>
       </div>
       <div class="left-tip-type-item">
         <div class="yuan yello"></div>
-        <div class="left-tip-type-item-text">待机</div>
+        <div class="left-tip-type-item-text">{{tLang('default','待机')}}</div>
       </div>
       <div class="left-tip-type-item">
         <div class="yuan red"></div>
-        <div class="left-tip-type-item-text">停机</div>
+        <div class="left-tip-type-item-text">{{tLang('default','停机')}}</div>
       </div>
     </div>
   </div>

src/views/Exhibition/Germany/components/BottomCBox.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="bc-container">
         <v-chart class="chart-class" :option="bar_option"></v-chart>
-        <div class="bottom-text">稼动率：实际工作时间/设备开机时间
+        <div class="bottom-text">
-
+          {{ tLang('messages','稼动率说明') }}
 </div>
     </div>
 </template>
@@ -20,7 +20,7 @@ watch(() => props.data, (val) => {
 })
 let bar_option = ref({
  legend: {
-        data:[proxy.tLang('messages','稼动率')],
+        data:[proxy.tLang('messages','UtilizationRate')],
     },
   xAxis: {
     type: 'category',
@@ -35,7 +35,7 @@ let bar_option = ref({
     type: 'value',
     min: 0,
     max: 100,
-    name: proxy.tLang('messages','稼动率'),
+    name: proxy.tLang('messages','UtilizationRate'),
     nameTextStyle: {
             color: '#fff', 
             fontSize: 16, 

src/views/Exhibition/Germany/components/BottomLBox.vue

@@ -7,7 +7,7 @@
             <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
         </div>
         <div class="box-item">
-            <div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
+            <div style="text-wrap: nowrap;">{{ tLang('messages', 'model') }}:</div>
             <div> RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220</div>
         </div>
         <div class="box-img">

src/views/Exhibition/Germany/components/BottomRBox.vue

@@ -3,11 +3,11 @@
         <div class="card" v-for="item in props.data">
             <v-chart class="chart-class" :option="item.option"></v-chart>
             <div class="box-list">
-                <div class="box-item">{{ tLang('messages', '实际产量') }}：<div>{{ item.production }}</div>
+                <div class="box-item">{{ tLang('default', '实际产量') }}：<div>{{ item.production }}</div>
                 </div>
-                <div class="box-item">{{ tLang('messages', '计划产量') }}：<div>{{ item.planProduction }}</div>
+                <div class="box-item">{{ tLang('default', '计划产量') }}：<div>{{ item.planProduction }}</div>
                 </div>
-                <div class="box-item">{{ tLang('messages', '设备名称') }}：<div>{{ item.name }}</div>
+                <div class="box-item">{{ tLang('default', '设备名称') }}：<div>{{ item.name }}</div>
                 </div>
             </div>
         </div>

src/views/Exhibition/Germany/components/TopRBox.vue

@@ -12,21 +12,21 @@
             <div class="icon-div">
                 <div class="iconfont icon-caijian"></div>
 
-                <div>{{ props.data?.in3Count + tLang('messages','次') }}</div>
+                <div>{{ props.data?.in3Count + tLang('messages', '次') }}</div>
             </div>
             <span>{{ tLang('messages', '剪线次数') }}</span>
         </div>
         <div class="icon-box-item pos3">
             <div class="icon-div">
                 <div class="iconfont icon-jizhenzhenshu"></div>
-                <div>{{ props.data?.in4Count + tLang('messages','次') }}</div>
+                <div>{{ props.data?.in4Count + tLang('messages', '次') }}</div>
             </div>
             <span>{{ tLang('messages', '针数') }}</span>
         </div>
         <div class="icon-box-item pos4">
             <div class="icon-div">
                 <div class="iconfont icon-zidongtaiyajiao"></div>
-                <div>{{ props.data?.in2Count + tLang('messages','次') }}</div>
+                <div>{{ props.data?.in2Count + tLang('messages', '次') }}</div>
             </div>
             <span>{{ tLang('messages', '压脚次数') }}</span>
         </div>
@@ -35,15 +35,15 @@
             <el-image :src="gyfrjImg" fit="contain"></el-image>
         </div>
         <div class="fill-box">
-            <v-chart class="chart-class-fill" :option="props.data?.option"></v-chart>
+            <v-chart class="chart-class-fill" :option="fill_option"></v-chart>
-            <data value="fill-title">{{ tLang('messages','能耗') }}(kW·h)</data>
+            <data value="fill-title">{{ tLang('messages', '能耗') }}(kW·h)</data>
         </div>
 
     </div>
 </template>
 
 <script setup lang='ts'>
-import { ref, getCurrentInstance } from 'vue'
+import { ref, getCurrentInstance, watch } from 'vue'
 import 'echarts-liquidfill'
 const { proxy } = getCurrentInstance()
 
@@ -53,10 +53,10 @@ const props = defineProps<{
 }>()
 
 let statusObj = {
-    0:'red',
+    0: 'red',
-    1:'yello',
+    1: 'yello',
-    2:'green',
+    2: 'green',
-    3:'yello'
+    3: 'yello'
 }
 let gauge_option = ref({
     series: [
@@ -205,6 +205,12 @@ let fill_option = ref({
         },
     }],
 })
+
+watch(() => props.data, (newVal) => {
+    fill_option.value.series[0].label.normal.formatter = function (params) {
+        return newVal?.consumption;
+    }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -217,9 +223,9 @@ let fill_option = ref({
 
     .pos-label {
         position: absolute;
-        top: 30px;
+        top: 131px;
-        right: 26px;
+        left: 13px;
-        width: 50%;
+        width: 40%;
         height: 30px;
 
         .box-item {
@@ -295,13 +301,13 @@ let fill_option = ref({
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
         .chart-class-fill {
             width: 180px;
             height: 220px;
         }
-        .fill-title {
 
-        }
+        .fill-title {}
     }
 
 
@@ -314,7 +320,7 @@ let fill_option = ref({
     }
 
     .pos1 {
-        top: 100px;
+        top: 79px;
         left: 24px;
     }
 

src/views/Exhibition/Germany/index.vue

@@ -49,22 +49,22 @@
         <div class="left-tip-type">
             <div class="left-tip-type-item">
                 <div class="yuan green"></div>
-                <div class="left-tip-type-item-text">{{tLang('messages','工作')}}</div>
+                <div class="left-tip-type-item-text">{{tLang('default','工作')}}</div>
             </div>
             <div class="left-tip-type-item">
                 <div class="yuan yello"></div>
-                <div class="left-tip-type-item-text">{{tLang('messages','待机')}}</div>
+                <div class="left-tip-type-item-text">{{tLang('default','待机')}}</div>
             </div>
             <div class="left-tip-type-item">
                 <div class="yuan red"></div>
-                <div class="left-tip-type-item-text">{{tLang('messages','停机')}}</div>
+                <div class="left-tip-type-item-text">{{tLang('default','停机')}}</div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, } from "vue";
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch} from "vue";
 import { dDeviceList } from '@/http/Exhibition/Germany'
 import BorderView from "./components/Border.vue";
 import header2 from "./components/header2.vue";
@@ -152,8 +152,6 @@ function pie_option(planProduction,production) {
                     show: true,
                     position: 'center',
                     formatter: (params) => {                        
-                        console.log(params,'params');
-                        
                         return (production/planProduction*100).toFixed(1) + '%'
                     },
                     color: "#fff",
@@ -167,6 +165,14 @@ function pie_option(planProduction,production) {
         ]
     }
 }
+watch(() => props.modelValue, (newVal) => {
+    let data = newVal
+    if (data.type == 'WorkingState') {
+        let { RackNumber, WorkingState } = data.msg
+        console.log(data.value, 'data.value');
+        
+    }
+})
 onMounted(() => {
     init()
 })

src/views/Exhibition/Germany/loop.vue

@@ -38,9 +38,9 @@ watch(i, (val) => {
 })
 let list = reactive([
     { color: '', components: () =>  Germanyindex, label: ''},
-    { color: '', components: () =>  Germanychild, label: 'child1'},
+    { color: '', components: () =>  Germanychild, label: 'RP2401009'},
-    { color: '', components: () =>  Germanychild, label: 'child2'},
+    { color: '', components: () =>  Germanychild, label: '1171210'},
-    { color: '', components: () =>  Germanychild, label: 'child3'},
+    { color: '', components: () =>  Germanychild, label: '104019564'},
 ])
 function getWebsocket(val) {
     try {
@@ -60,12 +60,12 @@ function errWebsocket(val) {
     // console.log(val);
 }
 onMounted(() => {
-    setInterval(() => {
+    // setInterval(() => {
-        i.value++
+    //     i.value++
-        if (i.value > list.length - 1) {
+    //     if (i.value > list.length - 1) {
-            i.value = 0
+    //         i.value = 0
-        }
+    //     }
-    }, time)
+    // }, time)
     connectWebsocket(null, null, getWebsocket, errWebsocket)
 })
 onUnmounted(() => {
@@ -93,6 +93,6 @@ ul {
 li {
     width: 1920px;
     height: 100%;
-    /* transition: all 0.5s; */
+    transition: all 0.5s;
 }
 </style>