update

src/views/MicroExhibition/component/BottomBorder.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-06 09:29:01
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-06 13:43:37
+ * @FilePath: \screenFront\src\views\MicroExhibition\component\BottomBorder.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${hzz}, All Rights Reserved. 
+-->
+<template>
+    <div class="rbottom-container">
+        <div class="rbottom-title">后整设备</div>
+        <div class="rbottom-content">
+            <div class="rbottom-bg" v-for="i in 5">
+                <div class="dev-name">自动烫裤机</div>
+                <div class="dev-progress">
+                    <div class="ele-progress">
+                        <el-progress :percentage="50" :show-text="false" :stroke-width="13">
+                    </el-progress>
+                    </div>
+                    
+                    <div>50%</div>
+                </div>
+                <div class="dev-status">
+                    <div class="status1">编号：2</div>
+                    <div class="status2">状态：运行</div>
+                </div>
+                <div class="dev-status">
+                    工作时长：2小时
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+</script>
+
+<style scoped>
+.rbottom-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.rbottom-title {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 20px;
+    text-align: left;
+    font-size: 28px;
+    font-family: "华文新魏", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    color: #00fffffe;
+}
+
+.rbottom-content {
+    width: 100%;
+    height: 225px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.rbottom-bg {
+    width: 20%;
+    height: 100%;
+    background: url('./../images/bottom_border1.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: #AEEEFAFE;
+    font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
+    font-weight: 700;
+    font-size: 18px;
+}
+.dev-name {
+    width: 100%;
+    height: 25%;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.dev-progress {
+    width: 100%;
+    height: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.ele-progress {    
+    width: 80% !important;
+}
+
+.dev-status {
+    width: 100%;
+    height: 25%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.status1 {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.status2 {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+</style>

src/views/MicroExhibition/component/ScrollBoard.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="ScrollBoard-container">
+    <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import {  reactive, ref, watch } from "vue";
+import ZdScrollBoard from "@/components/data-view/index.vue";
+const prop = defineProps({
+  data: {
+    type: Object,
+    default: {
+        list:[],
+        rowNum: 3,
+    }
+  }
+})
+const devList = ref(null);
+let config = reactive({
+    header: [
+        '<span style="color:#AEEEFAFE;font-size:18px;">序号</span>', 
+        '<span style="color:#AEEEFAFE;font-size:18px;">设备名称</span>',
+        '<span style="color:#AEEEFAFE;font-size:18px;">编号</span>', 
+        '<span style="color:#AEEEFAFE;font-size:18px;">状态</span>', 
+        '<span style="color:#AEEEFAFE;font-size:18px;">稼动率</span>',
+        '<span style="color:#AEEEFAFE;font-size:18px;">工作时长</span>',
+    ],//, '故障率'
+    headerBGC: 'rgba(0, 11, 18, 1)',
+    oddRowBGC: '#000F1D',
+    evenRowBGC: '#000F1D',
+    wrap: [false, false, false, false, false],
+    columnWidth: [80, 240, 85, 80, 110,145],
+    align: ['center', 'center', 'center', 'center', 'center', 'center'],
+    rowNum: prop.data.rowNum,
+    waitTime: 3000,
+})
+const handleData = () => {
+    
+    let updateList =  prop.data.list.map((items: any) => {
+        return items.map((item: any, index: number) => {
+            if (index == (items.length - 3)) {
+                return statusHtml(status_color[item])
+            }
+            return item
+        })
+    })
+    devList.value.updateRows(updateList,config)
+}
+watch(()=>prop.data, (newVal, oldVal) => {
+    
+    handleData()
+},{deep:true}
+)
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
+let statusHtml = (color) => {
+    return `<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"><div style="width:24px;height:24px;border-radius: 50%;background-color:${color}"></div></div>`
+    // return `<div style="display: inline-block;width:20px;height:20px;border-radius: 50%;background-color:${color}"></div>`
+}
+</script>
+
+<style scoped>
+.ScrollBoard-container {
+    width: 100%;
+    height: 100%;
+
+}
+
+</style>

src/views/MicroExhibition/component/StepItem.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-06 08:05:31
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-06 08:28:40
+ * @FilePath: \screenFront\src\views\MicroExhibition\component\StepItem.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${hzz}, All Rights Reserved. 
+-->
+<template>
+  <div class="stepContainer">
+    <div class="step-top">{{ prop.data.name }}</div>
+    <div class="step-bottom">
+        <div class="step-total">总数：{{ prop.data.total }}台</div>
+        <div class="step-online">在线：{{ prop.data.total }}台</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+const prop = defineProps({
+  data: {
+    type: Object,
+    default: {
+        name: '裁剪',
+        total: 0,
+        online: 0,
+    }
+  }
+})
+</script>
+
+<style scoped>
+.stepContainer {
+    width: 170px;
+    height: 88px;
+    background: url('./../images/step_item.png') no-repeat;
+    background-size: 100% 100%;
+    font-family: "华文新魏", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.step-top {
+    width: 100%;
+    height: 36px;
+    text-align: center;
+    font-size: 28px;
+    color: #00FFFF;
+    padding-left: 20px;
+}
+.step-bottom {
+    width: 100%;
+    height: 51px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    padding-left: 20px;
+}
+.step-online {
+    color: #7CFfB2FE;
+}
+</style>

src/views/MicroExhibition/index.vue

@@ -2,7 +2,7 @@
  * @Author: hzz hzz
  * @Date: 2023-12-05 13:30:45
  * @LastEditors: hzz hzz
- * @LastEditTime: 2023-12-05 16:54:15
+ * @LastEditTime: 2023-12-06 15:17:05
  * @FilePath: \screenFront\src\views\MicroExhibition\index.vue
  * @Description: 
  * 
@@ -12,7 +12,7 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px'}"></Header>
+                <Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px' }"></Header>
             </div>
         </div>
         <div class="content">
@@ -21,21 +21,35 @@
                     <BoardVue :title="'裁剪设备'"></BoardVue>
                 </div>
                 <div class="lbottom">
-                    <BoardVue :title="'缝前设备'"></BoardVue> 
+                    <BoardVue :title="'缝前设备'">
+                        <ScrollBoard :data="fqdata"></ScrollBoard>
+                    </BoardVue>
                 </div>
             </div>
             <div class="right">
                 <div class="rtop">
                     <div class="rtleft">
-                        <div class="rtltop"></div>
+                        <div class="rtltop">
-                        <div class="rtlbottom"></div>
+                            <StepItem v-for="i in 4"></StepItem>
+                        </div>
+                        <div class="rtlbottom">
+                            <video controls loop autoplay="true" width="777">
+                                <source src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
+                                    type="video/mp4" />
+                            </video>
+                            <!-- <video class="video"
+                                src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
+                                autoplay></video> -->
+                        </div>
                     </div>
                     <div class="rtright">
-                        <BoardVue :title="'缝中设备'"></BoardVue>
+                        <BoardVue :title="'缝中设备'">
+                            <ScrollBoard :data="fzdata"></ScrollBoard>
+                        </BoardVue>
                     </div>
                 </div>
                 <div class="rbottom">
-                    右下
+                    <BottomBorder></BottomBorder>
                 </div>
             </div>
         </div>
@@ -46,20 +60,36 @@
 <script setup lang='ts'>
 import Header from './component/Header.vue'
 import BoardVue from './component/Border.vue'
+import StepItem from './component/StepItem.vue'
+import BottomBorder from './component/BottomBorder.vue'
+import ScrollBoard from './component/ScrollBoard.vue'
 
-import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
+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 fqdata = ref({
-let timer = null
+    list: [],
-let dev_caijian_title = ['设备名称', '编号','状态', '稼动率', '工作时长']
+    rowNum: 3,
-
+})
-
+let fzdata = ref({
-
+    list: [],
+    rowNum: 10,
+})
+let listdata = reactive([])
+let list = [
+    [1, '自动缝纫机', 29, 1, '95%', '12min'],
+    [1, '自动缝纫机', 29, 1, '95%', '12min'],
+    [1, '自动缝纫机', 29, 1, '95%', '12min'],
+    [1, '自动缝纫机', 29, 1, '95%', '12min'],
+    [1, '自动缝纫机', 29, 1, '95%', '12min'],]
+setTimeout(() => {
+    fqdata.value.list.push(...list)
+    fzdata.value.list.push(...[...list, ...list, ...list])
+}, 1000);
 
 
 
@@ -131,6 +161,7 @@ onUnmounted(() => {
     justify-content: space-between;
     align-items: center;
 }
+
 .ltop {
     width: 100%;
     height: 630px;
@@ -163,7 +194,6 @@ onUnmounted(() => {
 .rbottom {
     width: 100%;
     height: 250px;
-    background: #bfe;
 }
 
 .rtleft {
@@ -178,23 +208,33 @@ onUnmounted(() => {
 .rtltop {
     width: 100%;
     height: 120px;
-    background: #bff;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }
+
 .rtlbottom {
     width: 100%;
     height: 580px;
-    background: #bf1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* background-image: url('./images/border.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 10px; */
+}
+
+.rtlbottom .video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
 }
 
 .rtright {
     width: 540px;
     height: 100%;
 }
-
-
-
-
-
-
-
 </style>