德国展会大屏update

src/locales/lang/en.ts

@@ -329,6 +329,14 @@ export default {
         "富怡多功能绣花机": "Richpeace embroidery machine",
         "JUKI高速直驱平缝机": "JUKI lockstitch sewing machine",
         "Yamato包缝机": "Yamato overlock sewing machine",
+        "花样名称": "Pattern Name",
+        "花样总针数": "Total Stitches",
+        "当前针数": "Current Stitches",
+        "断线提醒": "Thread Break Reminder",
+        "冲缝一体机": "Perforation sewing machine",
+        "再登机器物联管理系统":"GetonAgain Machinery IoT System",
+        "工业缝纫机": "Industrial sewing machine",
+        "立切180双喷": "Vertical cutting plotter 180",
         
       },
       "default":{

src/locales/lang/zh.ts

@@ -328,6 +328,13 @@ export default {
         "富怡多功能绣花机": "富怡多功能绣花机",
         "JUKI高速直驱平缝机": "JUKI高速直驱平缝机",
         "Yamato包缝机": "Yamato包缝机",
+        "花样名称": "花样名称",
+        "花样总针数": "花样总针数",
+        "当前针数": "当前针数",
+        "断线提醒": "断线提醒",
+        "冲缝一体机": "冲缝一体机",
+        "再登机器物联管理系统": "再登机器物联管理系统",
+        "工业缝纫机": "工业缝纫机",
     },
     "default":{
         '年': '年',

src/router/index.ts

@@ -372,6 +372,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "GermanyExhibitionChild",
         component: () => import("../views/Exhibition/Germany/child.vue"),
       },
+      {
+        path: "/GermanyExhibitionLoop",
+        name: "GermanyExhibitionLoop",
+        component: () => import("../views/Exhibition/Germany/loop.vue"),
+      },
 
 
 

src/views/Exhibition/Germany/child.vue

@@ -96,19 +96,19 @@ import DynamicChart from "./components/DynamicChart.vue";
 import PercentChart from "./components/PercentChart.vue";
 import ZdScrollBoard from "@/components/data-view/index.vue";
 import { useMicroExhibitionStore } from "@/store/module/MicroExhibition";
-
+const {proxy} = getCurrentInstance();
 // 设备信息
 let device_data = ref([
   { key: "设备名称", value: "冲缝一体机", value_style: { fontSize: "20px" } },
-  { key: "机架号", value: "1171210#" },
+  { key: proxy.tLang('messages','RackNum'), value: "1171210#" },
   { key: "工作人员", value: "张--" },
-  { key: "设备状态", value: "1" },
+  { key: proxy.tLang('messages','DevStatus'), value: "1" },
   { key: "稼动率", value: "30%" },
-  { key: "花样名称", value: "0.7盾牌" },
+  { key: proxy.tLang('messages','花样名称'), value: "0.7盾牌" },
   { key: "加工时长", value: "23min" },
-  { key: "花样总针数", value: "300针" },
+  { key: proxy.tLang('messages','花样总针数'), value: "300针" },
   { key: "断线次数", value: "0次" },
-  { key: "当前针数", value: "100针" },
+  { key: proxy.tLang('messages','当前针数'), value: "100针" },
 ]);
 let getImgSrc = computed(() => {
   // let name: string = Array.isArray(route.params.name)

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

@@ -1,9 +1,9 @@
 <template>
     <div class="bl-box-container">
-        <div class="box-item pos">{{ tLang('messages', '机架号') }}:
+        <div class="box-item pos">{{ tLang('messages', 'RackNum') }}:
             <div>{{ props.data?.label }}</div>
         </div>
-        <div class="box-item">{{ tLang('messages', '设备状态') }}:
+        <div class="box-item">{{ tLang('messages', 'DevStatus') }}:
             <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
         </div>
         <div class="box-item">
@@ -56,10 +56,11 @@ let lqImg = require('./../images/lq.png');
         }
 
     }
+
     .pos {
         position: absolute;
-        top: 80px;
+        top: 108px;
-        left: 190px;
+        left: 11px;
     }
 
     .box-img {

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

@@ -1,7 +1,8 @@
 <template>
     <div class="border-box">
         <div class="box-left">
-            <div class="box-item">{{ tLang('messages', '设备状态') }}:<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
+            <div class="box-item">{{ tLang('messages', 'DevStatus') }}:<div class="status"
+                    :class="[statusObj[props.data?.workingState]]"></div>
             </div>
             <div class="box-item">{{ tLang('messages', '花样名称') }}：<div>{{ props.data.fileName }}</div>
             </div>
@@ -9,7 +10,8 @@
             </div>
             <div class="box-item">{{ tLang('messages', '当前针数') }}：<div>{{ props.data.currentCount }}</div>
             </div>
-            <div class="box-item">{{ tLang('messages', '断线提醒') }}：<div class="iconfont icon-baojing" :class="[props.warning?'red-color':'green-color']"></div>
+            <div class="box-item">{{ tLang('messages', '断线提醒') }}：<div class="iconfont icon-baojing"
+                    :class="[props.warning ? 'red-color' : 'green-color']"></div>
             </div>
         </div>
         <div class="box-right">
@@ -19,7 +21,7 @@
             </div>
         </div>
         <div class="pos-label">
-            <div class="box-item">{{ tLang('messages', '机架号') }}：<div>{{ props.data.label }}</div>
+            <div class="box-item">{{ tLang('messages', 'RackNum') }}：<div>{{ props.data.label }}</div>
             </div>
         </div>
     </div>
@@ -189,9 +191,9 @@ let gauge_option = ref({
 
     .pos-label {
         position: absolute;
-        top: 30px;
+        top: 309px;
-        right: 26px;
+        right: 17px;
-        width: 50%;
+        width: 55%;
         height: 30px;
 
         .box-item {
@@ -209,6 +211,7 @@ let gauge_option = ref({
         }
     }
 }
+
 .iconfont {
     font-size: 40px;
 }

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

@@ -1,11 +1,11 @@
 <template>
     <div class="r-box-container">
         <div class="pos-label">
-            <div class="box-item">{{ tLang('messages', '机架号') }}：<div>{{ props.data?.label }}</div>
+            <div class="box-item">{{ tLang('messages', 'RackNum') }}：<div>{{ props.data?.label }}</div>
             </div>
         </div>
         <div class="box-item pos1">
-            {{ tLang('messages', '设备状态') }}:
+            {{ tLang('messages', 'DevStatus') }}:
             <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
         </div>
         <div class="icon-box-item pos2">

src/views/Exhibition/Germany/index.vue

@@ -2,43 +2,44 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="tLang('messages','再登机器物联管理系统')" :titleTip="[]"
                     :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
         <div class="content">
             <div class="top-content">
                 <div class="top-left-content">
-                    <BorderView :title="'冲缝一体机'">
+                    <BorderView :title="tLang('messages','冲缝一体机')">
                         <TopLBox :data="cfytj" :warning="warning"></TopLBox>
                     </BorderView>
                 </div>
                 <div class="top-center-content">
+                    {{ props.label }}
                     <!-- <video controls loop autoplay="true" muted ref="videoElement" width="720">
                                 <source :src="videoUrl" type="video/mp4" />
                             </video> -->
                 </div>
                 <div class="top-right-content">
-                    <BorderView :title="'工业缝纫机'">
+                    <BorderView :title="tLang('messages','工业缝纫机')">
                         <TopRBox :data="gyfrj"></TopRBox>
                     </BorderView>
                 </div>
             </div>
             <div class="bottom-content">
                 <div class="bottom-left-content">
-                    <BorderView :title="'立切180双喷'">
+                    <BorderView :title="tLang('messages','立切180双喷')">
                         <BottomLBox :data="lq"></BottomLBox>
                     </BorderView>
                 </div>
                 <div class="bottom-center-content">
-                    <BorderView :title="'设备稼动率'">
+                    <BorderView :title="tLang('messages','设备稼动率')">
                         <BottomCBox :data="bar"></BottomCBox>
                     </BorderView>
 
                 </div>
                 <div class="bottom-right-content">
 
-                    <BorderView :title="'产出进度'">
+                    <BorderView :title="tLang('messages','产出进度')">
                         <BottomRBox :data="pie"></BottomRBox>
                     </BorderView>
                 </div>
@@ -48,15 +49,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('messages','工作')}}</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('messages','待机')}}</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('messages','停机')}}</div>
             </div>
         </div>
     </div>
@@ -72,8 +73,13 @@ import TopRBox from "./components/TopRBox.vue";
 import BottomLBox from "./components/BottomLBox.vue";
 import BottomCBox from "./components/BottomCBox.vue";
 import BottomRBox from "./components/BottomRBox.vue";
+
+const props = defineProps<{
+    modelValue: any,
+    label: string
+}>()
 const { proxy } = getCurrentInstance();
-let videoUrl = ref('https://d.tufting222.cn/video/yzy/micor_edos_english.mp4')
+let videoUrl = ref('/mic_english.mp4')
 let cfytj = ref({})
 let gyfrj = ref({})
 let lq = ref({})

src/views/Exhibition/Germany/loop.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="container">
+        <ul :style="{ width: `${list.length * 1920}px` }">
+            <li v-for="(item, index) in list"
+                :style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }"
+                 :key="index"
+                 >
+                <component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)"></component>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed,defineAsyncComponent } from 'vue'
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
+const Germanyindex = defineAsyncComponent(() =>
+  import('@/views/Exhibition/Germany/index.vue')
+);
+const Germanychild = defineAsyncComponent(() =>
+  import('@/views/Exhibition/Germany/child.vue')
+);
+let i = ref(0)
+let hash = [0]
+let socketMsg = ref({})
+let timer = null
+let time = 60000
+watch(i, (val) => {    
+    if (val < 0) {
+        i.value = 0
+    }
+    if (val > list.length - 1) {
+        i.value = list.length - 1
+    }
+    if (!hash.includes(i.value)) {
+        hash.push(i.value)
+    }
+})
+let list = reactive([
+    { color: '', components: () =>  Germanyindex, label: ''},
+    { color: '', components: () =>  Germanychild, label: 'child1'},
+    { color: '', components: () =>  Germanychild, label: 'child2'},
+    { color: '', components: () =>  Germanychild, label: 'child3'},
+])
+function getWebsocket(val) {
+    try {
+        let data = JSON.parse(val)
+
+        socketMsg.value = data
+        // if (data.type == 'SwitchBigScreen') {
+        //     i.value = data.msg
+        // }
+
+    } catch (err) {
+        console.log(err);
+    }
+
+}
+function errWebsocket(val) {
+    // console.log(val);
+}
+onMounted(() => {
+    setInterval(() => {
+        i.value++
+        if (i.value > list.length - 1) {
+            i.value = 0
+        }
+    }, time)
+    connectWebsocket(null, null, getWebsocket, errWebsocket)
+})
+onUnmounted(() => {
+    clearInterval(timer)
+    closeWebsocket()
+
+})
+</script>
+
+<style scoped>
+.container {
+    width: 1920px;
+    height: 1080px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+ul {
+    height: 100%;
+    display: flex;
+}
+
+li {
+    width: 1920px;
+    height: 100%;
+    /* transition: all 0.5s; */
+}
+</style>