哥伦比亚展会大屏开发

货梯大屏修改

src/router/index.ts

@@ -259,7 +259,7 @@ const routes: Array<RouteRecordRaw> = [
           {
             path: "/MicroExhibition",
             name: "MicroExhibition",
-            component: () => import("../views/MicroExhibition/indexOld.vue"),
+            component: () => import("../views/MicroExhibition/index.vue"),
           },
           {
             path: "/MicroExhibition/:id",
@@ -274,6 +274,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "CismaExhibition",
         component: () => import("../views/MicroExhibition/indexOld.vue"),
       },
+      {
+        path: "/ColombiaExhibition",
+        name: "ColombiaExhibition",
+        component: () => import("../views/Exhibition/Colombia/index.vue"),
+      },
       {
         path: "/MicroExhibitionTable",
         name: "MicroExhibitionTable",

src/views/Elevator/index.vue

@@ -133,7 +133,7 @@ let fir_floor = computed(() => {
     ]
 })
 
-watch(() => thatstatus.value, (val) => {
+watch(thatstatus, (val) => {
     if (val == 'up') {
         elevatorUp('up')
     } else if (val == 'down') {
@@ -168,7 +168,7 @@ function elevatorUp(type) {
                 clearInterval(timer)
             }
         }
-    }, 100)
+    }, 95)
 }
 
 
@@ -180,6 +180,12 @@ function getWebsocket(val) {
         if (data.type == 'liftInfo') {
             let msg = data.msg
             if (msg.name == 'first') {
+                if (msg.IN7 == 1&&second_data.value.IN1 == 0) {
+                    msg.IN1 = 1
+                }
+                if (msg.IN8 == 1&&second_data.value.IN2 == 0) {
+                    msg.IN2 = 1
+                }
                 first_data.value = msg
             } else if (msg.name == 'second') {
                 second_data.value = msg

src/views/Exhibition/Colombia/component/BarChart.vue

@@ -0,0 +1,98 @@
+<template>
+    <div ref="LChartRef" class="cc"></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance, onMounted, watch } from 'vue'
+
+
+const prop = defineProps({
+    xData: {
+        type: Array,
+        default: ['1050910', '1050269']
+    },
+    seriesData: {
+        type: Array,
+        default: []
+    }
+})
+
+let LChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts:any = null;
+const setCharts = () => {
+    charts = proxy.$echarts.init(LChartRef.value, 'dark')
+    let option = {
+        // title: {
+        //     text: '工作时间'
+        // },
+        backgroundColor: '#0E0E0E',
+        legend: {
+            data: ['计划完成', '实际完成'],
+            textStyle: {
+                fontSize: 14
+            },
+
+        },
+        textStyle: {
+            fontSize:14
+
+        },
+        grid:{
+            left:'80',
+            right:'0',
+            bottom:'40',
+        },
+        color:['#2FC5D4','#FEDA81'],
+        xAxis: {
+            type: 'category',
+            data: prop.xData,
+            // axisLabel: {
+            //     interval: 0, //控制X轴刻度全部显示
+            //     rotate: 45, //倾斜角度
+            // },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '日产量',
+                axisLabel:{
+                    fontSize:14
+                }
+            }
+        ],
+        series: prop.seriesData
+    };
+
+    charts.setOption(option);
+}
+
+watch(() => prop.seriesData, (newVal, oldVal) => {
+    charts.setOption({
+        series: newVal
+    });
+}, { deep: true })
+watch(() => prop.xData, (newVal, oldVal) => {
+    charts.setOption({
+
+        xAxis: {
+            type: 'category',
+            data: prop.xData,
+            // axisLabel: {
+            //     interval: 0, //控制X轴刻度全部显示
+            //     rotate: 45, //倾斜角度
+            // },
+        },
+    });
+}, { deep: true })
+onMounted(() => {
+    setCharts()
+})
+</script>
+
+<style scoped>
+.cc {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/Exhibition/Colombia/component/Border.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="newboder">
+        <!-- <img class="borderpng" src="" alt=""> -->
+        <div class="title">
+            <text class="title-text">{{ title }}</text>
+            <div class="hr"></div>
+        </div>
+        
+        <div class="newboder-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+  
+<script setup lang='ts'>
+import { computed } from 'vue'
+let prop = defineProps({
+    title: {
+        type: String,
+        default: '裁剪设备'
+    }
+})
+
+// let newTitle = computed(() => {
+//     return prop.title.split('').join(' ')
+// })
+
+</script>
+  
+<style scoped>
+.newboder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: url(./../images/border.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.borderpng {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    position: relative;
+    width: 100%;
+    height: 16%;
+    text-align: left;
+    font-family: "华文新魏", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 40px;
+    color: rgba(0, 255, 255, 0.996078431372549);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+.hr {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 4px;
+    background: url(./../images/hr.png) no-repeat;
+    background-position: 50%;
+}
+
+.title-text {
+    
+    font-weight: bold;
+}
+
+.newboder-content {
+    width: 100%;
+    height: 84%;
+    flex: 1;
+}
+</style>
+  

src/views/Exhibition/Colombia/component/DevCard.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="dev-card">
+        <div class="dev-left">
+            <slot></slot>
+        </div>
+        <div class="dev-right">
+            <div class="dev-box">
+                <div class="dev-content dev-title">
+                    <div class="key" v-for="item in dev_title">{{ item }}</div>
+                </div>
+                <div class="dev-content" v-for="(items, index) in (dev_value as any)">
+                    <div v-for="(item, index) in items" class="dev_value">
+                        <div :class="{ status: index == 1 }"
+                            :style="{ background: index == 1 ? status_color[item] : '' }">{{ index ==
+                                1 ? '' : item }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { defineProps, ref } from 'vue'
+const prop = defineProps({
+    dev_title: {
+        type: Array,
+        default: ['机架号', '状态', '布料层数', '裁片数量']
+    },
+    dev_value: {
+        type: Array,
+        default: [
+            [102014422, '待机', '40层', '0']
+        ]
+    },
+})
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
+</script>
+
+<style scoped>
+.dev-card {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+}
+
+.dev-left {
+    width: 45%;
+    height: 100%;
+    box-sizing: border-box;
+}
+.dev-right {
+    width: 55%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.dev-title {
+    color: #FFF;
+}
+
+.dev-box {
+    height: 100%;
+    width: 100%;
+    font-size: 16px;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.dev-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-weight: bold;
+}
+.dev_value {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.key {
+    width: 75px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #02C1D7;
+    /* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
+}
+
+.status {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+</style>

src/views/Exhibition/Colombia/component/Header.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-05 13:38:58
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-05 14:49:17
+ * @FilePath: \screenFront\src\views\MicroExhibition\component\Header.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${hzz}, All Rights Reserved. 
+-->
+<template>
+  <div class="headerbg" :style="prop.wh">
+    <span>{{ prop.title }}</span>
+    <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>
+            <div class="left-tip-type-item">
+                <div class="yuan yello"></div>
+                <div class="left-tip-type-item-text">待机</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan red"></div>
+                <div class="left-tip-type-item-text">停机</div>
+            </div>
+        </div>
+  </div>
+  
+</template>
+
+<script setup lang='ts'>
+import { onMounted,onUpdated } from "vue";
+const prop = defineProps({
+  title: {
+    type: String,
+    default: '标题'
+  },
+  wh: {
+    type: Object,
+    default: {
+      width: '100%',
+      height: '100px'
+    }
+  }
+})
+
+
+onMounted(() => {
+  window.document.title = prop.title;
+})
+</script>
+
+<style scoped>
+.headerbg {
+  position: relative;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url('./../images/header.png') no-repeat;
+  background-size: 100% 100%;
+  font-family: "华文新魏", sans-serif;
+}
+
+.headerbg span {
+  position: absolute;
+  top: 25px;
+  
+  font-weight: 400;
+  font-style: normal;
+  font-size: 52px;
+  color: rgba(0, 255, 255, 0.996078431372549);
+}
+
+
+
+.left-tip-type {
+    position: absolute;
+    top: 40px;
+    left: 462px;
+    width: 160px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.left-tip-type-item {
+    width: 33%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.yuan {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+
+.green {
+    background-color: #7CFFB2;
+}
+
+.yello {
+    background-color: #FDDD60;
+}
+
+.red {
+    background-color: #FF6E76;
+}
+</style>

src/views/Exhibition/Colombia/index.vue

@@ -0,0 +1,306 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-06 15:21:39
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-06 16:40:32
+ * @FilePath: \screenFront\src\views\MicroExhibition\index.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${hzz}, All Rights Reserved. 
+-->
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">
+                <Header :title="'富 怡 物 联 管 理 平 台'" :wh="{ width: '100%', height: '100px' }"></Header>
+            </div>
+        </div>
+        <div class="content">
+            <div class="left">
+                <BorderVue :title="'服装模板机'">
+                    <div class="box">
+                        <img src="./images/fzmbj.png" class="fzmbj-img" alt="">
+                        <div class="devcard-container">
+                            <DevCard :dev_title="dev_title" :dev_value="dev_value">
+                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
+                                </BarChart>
+                            </DevCard>
+                        </div>
+
+                    </div>
+
+                </BorderVue>
+            </div>
+            <div class="center">
+                <div class="ctop">
+                    <video controls loop autoplay="true" ref="videoElement" width="780">
+                        <source :src="videoUrl" type="video/mp4" />
+                    </video>
+                </div>
+                <div class="cbottom">
+                    <BorderVue :title="'单头混合毛巾绣花机'">
+                        <div class="box">
+                            <div class="box-top">
+                                <div class="top-item" v-for="(item, index) in mjxhj_data">
+                                    <span class="key-text">{{ item.key }}:</span>
+                                    <span class="value-text">{{ item.value }}</span>
+                                </div>
+                            </div>
+
+                        </div>
+                    </BorderVue>
+                </div>
+            </div>
+            <div class="right">
+                <BorderVue :title="'绘图仪（一代）'">
+                    <div class="box">
+                        <img src="./images/hty.png" class="fzmbj-img" alt="">
+                        <div class="devcard-container">
+                            <DevCard :dev_title="dev_title" :dev_value="dev_value">
+                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
+                                </BarChart>
+                            </DevCard>
+                        </div>
+
+                    </div>
+                </BorderVue>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang='ts'>
+import Header from './component/Header.vue'
+import BorderVue from './component/Border.vue'
+import DevCard from './component/DevCard.vue'
+import BarChart from './component/BarChart.vue'
+
+import { getmDeviceList, getmDeviceProduction } from '@/http/MicroExhibition'
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
+import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
+
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+const store = useMicroExhibitionStore()
+
+let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
+const videoElement = ref(null)
+let timer = null
+
+let dev_title = ref(['机架号', '设备状态', '稼 动 率', '工作时长'])
+let dev_value = ref([
+    [102014422, '0', '40层', '0min']
+])
+let mjxhj_data = ref([
+    { key: '机 架 号', value: '102014422' },
+    { key: '设备状态', value: 2 },
+    { key: '稼 动 率', value: '40层' },
+    { key: '工作时长', value: '0min' },
+])
+let data = reactive({ series: [], xData: [] })
+setTimeout(() => {
+    data.series = [
+        {
+            "type": "bar",
+            "data": [
+                100,
+            ],
+            "name": "计划完成"
+        },
+        {
+            "type": "bar",
+            "data": [
+                0,
+            ],
+            "name": "实际完成"
+        }
+    ]
+    data.xData = [
+        "振镜激光裁床",
+    ]
+})
+
+
+
+
+function getWebsocket(val) {
+    try {
+        let data = JSON.parse(val)
+
+
+        if (data.type == 'mDeviceStatus') {
+            // changestatus(data.msg)
+        }
+        // if (data.type == 'WorkingState') {
+        //     store.changestatus(data.msg)
+        // }
+
+    } catch (err) {
+        console.log(err);
+    }
+
+}
+function errWebsocket(val) {
+    // console.log(val);
+}
+
+
+
+
+onMounted(() => {
+
+
+
+
+
+    // setInterval(() => {
+    //     let status = Math.round(Math.random() * 3)
+    //     let val = {
+    //         step: '后整设备',
+    //         num: 24,
+    //         status: status
+    //     }
+
+    //     changestatus(val)
+    // }, 5000)
+    connectWebsocket(null, null, getWebsocket, errWebsocket)
+    document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
+})
+
+onUnmounted(() => {
+    closeWebsocket()
+    clearInterval(timer)
+    document.getElementById('app').style.backgroundColor = '#100c2a'
+})
+</script>
+
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #FFFFFF;
+    background-color: rgba(0, 11, 18, 1);
+    position: relative;
+
+}
+
+.header {
+    height: 100px;
+    width: 1920px;
+}
+
+.content {
+    height: 980px;
+    width: 1920px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+.left,
+.right {
+    width: 540px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.center {
+    width: 800px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ctop {
+    width: 100%;
+    height: 490px;
+    /* background: url(./images/border.png) no-repeat;
+    background-size: 100% 100%; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.cbottom {
+    width: 100%;
+    height: 480px;
+}
+
+
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.fzmbj-img {
+    height: 345px;
+}
+
+.devcard-container {
+    width: 100%;
+    height: calc(100% - 335px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 15px;
+    box-sizing: border-box;
+}
+
+.box-top {
+    width: 100%;
+    height: 30%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.box-bottom {
+    width: 100%;
+    height: 70%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.top-item {
+    width: 33%;
+    height: 50%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
+}
+.key-text {
+    width: 60%;
+    font-size: 28px;
+    color: #00FFFFFE;
+    font-family: '华文新魏', sans-serif;
+}
+
+.value-text {
+    width: 40%;
+    font-size: 24px;
+    color: #AEEEFAFE;
+    font-family: '华文新魏', sans-serif;
+    text-align: left;
+    box-sizing: border-box;
+    padding-left: 10px;
+}
+</style>

src/views/MicroExhibition/component/Header.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang='ts'>
-
+import { onMounted,onUpdated } from "vue";
 const prop = defineProps({
   title: {
     type: String,
@@ -44,6 +44,9 @@ const prop = defineProps({
     }
   }
 })
+onMounted(() => {
+  window.document.title = prop.title;
+})
 </script>
 
 <style scoped>