德国展会大屏update

This commit is contained in:
hzz 2024-04-18 14:46:40 +08:00
parent 24bdc11c81
commit fb65d61e11
9 changed files with 164 additions and 36 deletions

View File

@ -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":{

View File

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

View File

@ -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"),
},

View File

@ -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)

View File

@ -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;
left: 190px;
top: 108px;
left: 11px;
}
.box-img {

View File

@ -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;
right: 26px;
width: 50%;
top: 309px;
right: 17px;
width: 55%;
height: 30px;
.box-item {
@ -209,6 +211,7 @@ let gauge_option = ref({
}
}
}
.iconfont {
font-size: 40px;
}

View File

@ -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">

View File

@ -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({})

View File

@ -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>