德国展会大屏update
This commit is contained in:
parent
24bdc11c81
commit
fb65d61e11
@ -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":{
|
||||
|
@ -328,6 +328,13 @@ export default {
|
||||
"富怡多功能绣花机": "富怡多功能绣花机",
|
||||
"JUKI高速直驱平缝机": "JUKI高速直驱平缝机",
|
||||
"Yamato包缝机": "Yamato包缝机",
|
||||
"花样名称": "花样名称",
|
||||
"花样总针数": "花样总针数",
|
||||
"当前针数": "当前针数",
|
||||
"断线提醒": "断线提醒",
|
||||
"冲缝一体机": "冲缝一体机",
|
||||
"再登机器物联管理系统": "再登机器物联管理系统",
|
||||
"工业缝纫机": "工业缝纫机",
|
||||
},
|
||||
"default":{
|
||||
'年': '年',
|
||||
|
@ -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"),
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
@ -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)
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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({})
|
||||
|
98
src/views/Exhibition/Germany/loop.vue
Normal file
98
src/views/Exhibition/Germany/loop.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user