diff --git a/package-lock.json b/package-lock.json
index 8992ae8..c162021 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
+        "@iamzzg/data-view": "^2.10.0",
         "@jiaminghi/data-view": "^2.10.0",
         "@tweenjs/tween.js": "^19.0.0",
         "axios": "^1.3.2",
@@ -1785,6 +1786,15 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@iamzzg/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/@iamzzg/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-UafIJaEqHIgEC+8CaEL0qQxG34JsgKOc13RkYjlupOIAoELNkWXCrYN89xOP+RkSreBTpgaTEt43PfW4EMMjcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
     "node_modules/@intlify/core-base": {
       "version": "9.2.2",
       "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
@@ -4050,9 +4060,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001449",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
-      "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
+      "version": "1.0.30001532",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
+      "integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
       "dev": true
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
@@ -13390,6 +13400,15 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@iamzzg/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/@iamzzg/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-UafIJaEqHIgEC+8CaEL0qQxG34JsgKOc13RkYjlupOIAoELNkWXCrYN89xOP+RkSreBTpgaTEt43PfW4EMMjcQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
     "@intlify/core-base": {
       "version": "9.2.2",
       "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
@@ -15280,9 +15299,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001449",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
-      "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
+      "version": "1.0.30001532",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
+      "integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
diff --git a/package.json b/package.json
index 89f0bf6..e505106 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
+    "@iamzzg/data-view": "^2.10.0",
     "@jiaminghi/data-view": "^2.10.0",
     "@tweenjs/tween.js": "^19.0.0",
     "axios": "^1.3.2",
diff --git a/src/main.ts b/src/main.ts
index 91ddfbc..b23ea91 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,7 +18,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import echarts from '@/utils/echarts'
 import {createPinia} from 'pinia'
 // import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
-import dataV from '@jiaminghi/data-view'
+import dataV from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
 import './registerServiceWorker'
 import router from './router'
 import i18n from './locales'
diff --git a/src/views/InPlantProducts/child/component/header1.vue b/src/views/InPlantProducts/child/component/header1.vue
index 5be9e88..357be8d 100644
--- a/src/views/InPlantProducts/child/component/header1.vue
+++ b/src/views/InPlantProducts/child/component/header1.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch,onMounted } from "vue";
 import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
 import { useRoute,useRouter } from "vue-router";
 import { useI18n } from 'vue-i18n'
@@ -43,11 +43,9 @@ watch(
     
     //动态更新echarts
     if(newVal.devInfo.progress){
-      
-      
       config.value=JSON.parse(newVal.devInfo.progress)
     }
-    progress.value.updateRows(config)
+    progress.value.mergeConfig()
     
   },
   { deep: true, flush: "post" }
@@ -55,11 +53,11 @@ watch(
 let comeBackFun=()=>{
   router.go(-1)
 }
-let config = {
+let config = reactive({
   value: 0,
   colors: ["#01c4f9", "#c135ff"],
   borderWidth: 3,
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/views/InPlantProducts/content/chart/deviceslist.vue b/src/views/InPlantProducts/content/chart/deviceslist.vue
index 82388c2..da56a0a 100644
--- a/src/views/InPlantProducts/content/chart/deviceslist.vue
+++ b/src/views/InPlantProducts/content/chart/deviceslist.vue
@@ -58,7 +58,34 @@ let refborder2 = ref();
 
 const router = useRouter();
 
-const listdata = reactive<devListType>({});
+const listdata = reactive<devListType>({
+  header:[
+  t('messages.SerialNum'),
+  t('messages.RackNum'),
+  t('messages.productName'),
+  t('messages.ofLegion'),
+  t('messages.产品状态'),
+  t('messages.DebugProgress'),
+  t('messages.deliveryDay'),
+  ],
+  headerBGC: "#3469F3",
+  oddRowBGC: "#100C2A",
+  evenRowBGC: "#100C2A",
+  rowNum: 10,
+  waitTime: 3000,
+  carousel: "page",
+  hoverPause: true,
+  align: [
+    "center",
+    "center",
+    "center",
+    "center",
+    "center",
+    "center",
+    "center",
+  ],
+  columnWidth: [60, 130, 400, 100, 100],
+});
 let severdata = reactive([]); //暂存
 //弹窗显示与隐藏
 let visible = ref(false);
@@ -72,6 +99,7 @@ const devlistSize = reactive({
 });
 
 const setData = (val: any) => {
+  
   let data = [];
   val.forEach((res) => {
     data.push([
@@ -84,33 +112,7 @@ const setData = (val: any) => {
       res.deliveryDate,
     ]);
   });
-  listdata.header = [
-  t('messages.SerialNum'),
-  t('messages.RackNum'),
-  t('messages.productName'),
-  t('messages.ofLegion'),
-  t('messages.产品状态'),
-  t('messages.DebugProgress'),
-  t('messages.deliveryDay'),
-  ];
   listdata.data = data;
-  listdata.headerBGC = "#3469F3";
-  listdata.oddRowBGC = "#100C2A";
-  listdata.evenRowBGC = "#100C2A";
-  listdata.rowNum = 10;
-  listdata.waitTime = 3000;
-  listdata.carousel = "page";
-  listdata.hoverPause = true;
-  listdata.align = [
-    "center",
-    "center",
-    "center",
-    "center",
-    "center",
-    "center",
-    "center",
-  ];
-  listdata.columnWidth = [60, 130, 400, 100, 100];
   severdata = val;
   devList.value.updateRows(listdata.data, {
     headerBGC: "#00BAFF",
diff --git a/src/views/MicroExhibition/component/Border.vue b/src/views/MicroExhibition/component/Border.vue
new file mode 100644
index 0000000..85a89d6
--- /dev/null
+++ b/src/views/MicroExhibition/component/Border.vue
@@ -0,0 +1,83 @@
+<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;
+    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: 28px;
+    color: rgba(0, 255, 255, 0.996078431372549);
+    display: flex;
+    align-items: center;
+    
+}
+.hr {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 4px;
+    background: url(./../images/hr.png) no-repeat;
+    background-position: 50%;
+}
+
+.title-text {
+    margin-left: 16px;
+    font-weight: bold;
+}
+
+.newboder-content {
+    flex: 1;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/MicroExhibition/component/BottomBorder.vue b/src/views/MicroExhibition/component/BottomBorder.vue
new file mode 100644
index 0000000..8935dde
--- /dev/null
+++ b/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>
diff --git a/src/views/MicroExhibition/component/Header.vue b/src/views/MicroExhibition/component/Header.vue
new file mode 100644
index 0000000..f0d1b83
--- /dev/null
+++ b/src/views/MicroExhibition/component/Header.vue
@@ -0,0 +1,112 @@
+<!--
+ * @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'>
+
+const prop = defineProps({
+  title: {
+    type: String,
+    default: '标题'
+  },
+  wh: {
+    type: Object,
+    default: {
+      width: '100%',
+      height: '100px'
+    }
+  }
+})
+</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: 40px;
+  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>
diff --git a/src/views/MicroExhibition/component/ScrollBoard.vue b/src/views/MicroExhibition/component/ScrollBoard.vue
new file mode 100644
index 0000000..1c02cf5
--- /dev/null
+++ b/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>
diff --git a/src/views/MicroExhibition/component/StepItem.vue b/src/views/MicroExhibition/component/StepItem.vue
new file mode 100644
index 0000000..8101ebf
--- /dev/null
+++ b/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>
diff --git a/src/views/MicroExhibition/images/border.png b/src/views/MicroExhibition/images/border.png
new file mode 100644
index 0000000..65830e5
Binary files /dev/null and b/src/views/MicroExhibition/images/border.png differ
diff --git a/src/views/MicroExhibition/images/bottom_border.png b/src/views/MicroExhibition/images/bottom_border.png
new file mode 100644
index 0000000..ba65b3c
Binary files /dev/null and b/src/views/MicroExhibition/images/bottom_border.png differ
diff --git a/src/views/MicroExhibition/images/bottom_border1.png b/src/views/MicroExhibition/images/bottom_border1.png
new file mode 100644
index 0000000..533c565
Binary files /dev/null and b/src/views/MicroExhibition/images/bottom_border1.png differ
diff --git a/src/views/MicroExhibition/images/header.png b/src/views/MicroExhibition/images/header.png
new file mode 100644
index 0000000..f87259e
Binary files /dev/null and b/src/views/MicroExhibition/images/header.png differ
diff --git a/src/views/MicroExhibition/images/hr.png b/src/views/MicroExhibition/images/hr.png
new file mode 100644
index 0000000..f64a4d7
Binary files /dev/null and b/src/views/MicroExhibition/images/hr.png differ
diff --git a/src/views/MicroExhibition/images/step_item.png b/src/views/MicroExhibition/images/step_item.png
new file mode 100644
index 0000000..ee6317e
Binary files /dev/null and b/src/views/MicroExhibition/images/step_item.png differ
diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue
index 49adda1..ceb007c 100644
--- a/src/views/MicroExhibition/index.vue
+++ b/src/views/MicroExhibition/index.vue
@@ -1,179 +1,110 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-05 13:30:45
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-06 15:17:05
+ * @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">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
-                    :typeFun="['time']" :alarmType="[]"></header2>
+                <Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px' }"></Header>
             </div>
         </div>
         <div class="content">
             <div class="left">
-                <div class="lt">
-                    <NewBoder :title="'裁剪设备'">
-                        <DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
-                            <BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
-                                :seriesData="store.caijian.chart.series"></BarChart>
-                        </DevCard>
-                    </NewBoder>
+                <div class="ltop">
+                    <BoardVue :title="'裁剪设备'"></BoardVue>
                 </div>
-                <div class="lb">
-                    <NewBoder :title="'缝中设备'">
-                        <BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
-                            :seriesData="store.fengzhong.chart.series"></BoardBar>
-                    </NewBoder>
-                </div>
-            </div>
-            <div class="center">
-                <div class="ct">
-                    <div class="top-item">
-                        <h2>设备在线</h2>
-                        <div class="div_p" style="color: #ff9e5b;font-size: 40px;">
-                            <div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
-                            <div class="dev-center"></div>
-                            <div class="dev-bottom">{{ store.devnum.all }}</div>
-                        </div>
-                    </div>
-                    <div class="top-item">
-                        <h2>网关状态</h2>
-                        <div class="div_p" style="transform: translate(0px, 10px);">
-                            <i :class="true
-                                ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
-                                : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
-                                "></i>
-                        </div>
-                    </div>
-                </div>
-                <div class="cc">
-                    <NewBoder :title="'设备状态总览'">
-                        <ringChart :data="ringData"></ringChart>
-                    </NewBoder>
-                </div>
-                <div class="cb">
-                    <NewBoder :title="'版房设备'">
-                        <BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
-                            :seriesData="store.banfang.chart.series"></BoardBar>
-                    </NewBoder>
+                <div class="lbottom">
+                    <BoardVue :title="'缝前设备'">
+                        <ScrollBoard :data="fqdata"></ScrollBoard>
+                    </BoardVue>
                 </div>
             </div>
             <div class="right">
-                <div class="rt">
-                    <NewBoder :title="'一次性拖鞋自动生产线'">
-                        <DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
-                            <BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
-                                :seriesData="store.tuoxie.chart.series"></BarChart>
-                        </DevCard>
-                    </NewBoder>
+                <div class="rtop">
+                    <div class="rtleft">
+                        <div class="rtltop">
+                            <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="'缝中设备'">
+                            <ScrollBoard :data="fzdata"></ScrollBoard>
+                        </BoardVue>
+                    </div>
                 </div>
-                <div class="rb">
-                    <NewBoder :title="'座椅面套生产线'">
-                        <BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
-                            :seriesData="store.zuoyi.chart.series"></BoardBar>
-                    </NewBoder>
+                <div class="rbottom">
+                    <BottomBorder></BottomBorder>
                 </div>
             </div>
         </div>
-        <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 class="right-tip-type">
-            <div class="right-tip-type-item blue">
-                <div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
-                <div class="left-tip-type-item-text">在 线</div>
-            </div>
-            <div class="right-tip-type-item err">
-                <div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
-                <div class="left-tip-type-item-text">离 线</div>
-            </div>
-        </div>
-        <div class="wrap"></div>
+
     </div>
 </template>
 
 <script setup lang='ts'>
-import header2 from './components/header2.vue'
-import NewBoder from './components/NewBoder.vue';
-import DevCard from "./components/DevCard.vue";
-import BarChart from './components/BarChart.vue'
-import ringChart from "./components/ringChart.vue";
-import BoardBar from "./components/BoardBar.vue";
+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 { getTopDevice, getCismaList } from '@/http/cisma'
-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 ringData = computed(() => {
-    return [
-        { name: '工作', value: store.devnum.on },
-        { name: '停机', value: store.devnum.off },
-        { name: '待机', value: store.devnum.wait },
-    ]
+let fqdata = ref({
+    list: [],
+    rowNum: 3,
 })
-let timer = null
-let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
-let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
-let dev_value = [
-    ['全自动针梭两用铺布机', '待机', '40层', '1'],
-    ['全自动9公分电脑裁床', '待机', '40层', '0'],
-]
+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);
 
 
-let throttle_timer = null
-function throttle (fn, delay = 300) {
-    if(throttle_timer == null){
-        throttle_timer = setTimeout(() => {
-            fn()
- 
-            clearTimeout(throttle_timer)
-            throttle_timer = null
-        }, delay);
-    }
-}
 
-async function getTopDeviceData() {
-    let res = await getTopDevice() as any
-    if (res.code === 200) {
-        store.setbanfang(res.data.版房设备)
-        store.setcaijian(res.data.裁剪设备)
-        store.setfengzhong(res.data.缝中设备)
-        store.settuoxie(res.data.拖鞋自动生产线)
-        store.setzuoyi(res.data.座椅面套生产线)
-
-    }
-}
-
-async function getCismaListData() {
-    let res = await getCismaList() as any
-    if (res.code === 200) {
-        store.setDevnum(res.data.devnum)
-    }
-}
 
 function getWebsocket(val) {
     try {
         let data = JSON.parse(val)
 
 
-        if (data.type == 'StateChart') {
-            store.setDevnum(data.msg)
-        }
-        if (data.type == 'WorkingState') {
-            store.changestatus(data.msg)
-        }
+        // if (data.type == 'StateChart') {
+        //     store.setDevnum(data.msg)
+        // }
+        // if (data.type == 'WorkingState') {
+        //     store.changestatus(data.msg)
+        // }
 
     } catch (err) {
         console.log(err);
@@ -185,20 +116,13 @@ function errWebsocket(val) {
 }
 
 onMounted(() => {
-    getTopDeviceData()
-    getCismaListData()
-    timer = setInterval(()=>{
-        getTopDeviceData()
-    },5000)
     connectWebsocket(null, null, getWebsocket, errWebsocket)
-    document.getElementById('app').style.backgroundColor = '#0E0E0E'
+    document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
 })
 
 onUnmounted(() => {
-    clearInterval(timer)
-
     closeWebsocket()
-    document.getElementById('app').style.backgroundColor = '#100c2a'
+    document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
 })
 </script>
 
@@ -208,7 +132,7 @@ onUnmounted(() => {
     height: 1080px;
     width: 1920px;
     color: #FFFFFF;
-    background-color: #0E0E0E;
+    background-color: rgba(0, 11, 18, 1);
     position: relative;
 
 }
@@ -228,199 +152,89 @@ onUnmounted(() => {
     box-sizing: border-box;
 }
 
-.left,
+.left {
+    width: 540px;
+    height: 100%;
+    margin-left: 13px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ltop {
+    width: 100%;
+    height: 630px;
+}
+
+.lbottom {
+    width: 100%;
+    height: 335px;
+}
+
 .right {
-    height: 980px;
-    width: 600px;
+    width: 1330px;
+    height: 100%;
+    margin-right: 13px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    align-items: center;
 }
 
-.center {
-    width: 670px;
-    height: 980px;
-    margin: 0 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.lt,
-.rt {
+.rtop {
     width: 100%;
-    height: 450px;
-}
-
-.lb,
-.rb {
-    width: 100%;
-    height: 530px;
-}
-
-.ct {
-    width: 100%;
-    height: 110px;
+    height: 715px;
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.cc {
+.rbottom {
     width: 100%;
-    height: 350px;
+    height: 250px;
 }
 
-.cb {
-    width: 100%;
-    height: 500px;
-}
-
-.top-item {
-    width: 30%;
+.rtleft {
+    width: 777px;
     height: 100%;
-    background-image: url(@/assets/img/u8.png);
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.top-item .div_p {
-    height: 60%;
+.rtltop {
     width: 100%;
+    height: 120px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.rtlbottom {
+    width: 100%;
+    height: 580px;
     display: flex;
     justify-content: center;
     align-items: center;
-    position: relative;
+    /* background-image: url('./images/border.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 10px; */
 }
 
-.div_p .div-p-tip {
-    position: absolute;
-    font-size: 1.5rem;
-    top: 10%;
-    left: 20%;
-}
-
-h2 {
-    /* color: #fff; */
-    font-size: 18px;
-    line-height: 1.5rem;
-    color: #02C1D7;
-}
-
-.on {
-    color: #20AEC5;
-    font-size: 3.5rem;
-}
-
-.off {
-    color: #797979;
-    font-size: 3.5rem;
-}
-
-.left-tip-type {
-    position: absolute;
-    top: 69px;
-    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%;
+.rtlbottom .video {
+    width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    object-fit: fill;
 }
 
-.yuan {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-}
-
-.green {
-    background-color: #7CFFB2;
-}
-
-.yello {
-    background-color: #FDDD60;
-}
-
-.red {
-    background-color: #FF6E76;
-}
-
-.blue {
-    color: #20AEC5;
-}
-
-.err {
-    color: #FF6E76;
-}
-
-.right-tip-type {
-    position: absolute;
-    top: 15px;
-    left: 1550px;
-    width: 120px;
-    height: 70px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.right-tip-type-item {
-    width: 58px;
+.rtright {
+    width: 540px;
     height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.gatway {
-    font-size: 42px;
-}
-
-
-.wrap {
-    position: absolute;
-    top: 2px;
-    left: 582px;
-    width: 537px;
-    border-bottom: 0px solid transparent;
-    border-top: 92px solid #0E1D2F;
-    border-left: 109px solid transparent;
-    border-right: 110px solid transparent;
-}
-
-.dev-center {
-    width: 3px;
-    height: 60px;
-    background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
-    background-color: #5067BC;
-    transform: rotate(40deg) translate(7px, -6px);
-}
-
-.dev-top {
-    transform: translate(-6px, -10px);
-    font-size: 30px;
-}
-
-.dev-bottom {
-    transform: translate(15px, 15px);
-    font-size: 30px;
-}
-.left-tip-type-item-text {
-    font-weight: 700;
-    font-size: 14px;
 }
 </style>
diff --git a/src/views/MicroExhibition/indexOld.vue b/src/views/MicroExhibition/indexOld.vue
new file mode 100644
index 0000000..49adda1
--- /dev/null
+++ b/src/views/MicroExhibition/indexOld.vue
@@ -0,0 +1,426 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
+                    :typeFun="['time']" :alarmType="[]"></header2>
+            </div>
+        </div>
+        <div class="content">
+            <div class="left">
+                <div class="lt">
+                    <NewBoder :title="'裁剪设备'">
+                        <DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
+                            <BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
+                                :seriesData="store.caijian.chart.series"></BarChart>
+                        </DevCard>
+                    </NewBoder>
+                </div>
+                <div class="lb">
+                    <NewBoder :title="'缝中设备'">
+                        <BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
+                            :seriesData="store.fengzhong.chart.series"></BoardBar>
+                    </NewBoder>
+                </div>
+            </div>
+            <div class="center">
+                <div class="ct">
+                    <div class="top-item">
+                        <h2>设备在线</h2>
+                        <div class="div_p" style="color: #ff9e5b;font-size: 40px;">
+                            <div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
+                            <div class="dev-center"></div>
+                            <div class="dev-bottom">{{ store.devnum.all }}</div>
+                        </div>
+                    </div>
+                    <div class="top-item">
+                        <h2>网关状态</h2>
+                        <div class="div_p" style="transform: translate(0px, 10px);">
+                            <i :class="true
+                                ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
+                                : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
+                                "></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="cc">
+                    <NewBoder :title="'设备状态总览'">
+                        <ringChart :data="ringData"></ringChart>
+                    </NewBoder>
+                </div>
+                <div class="cb">
+                    <NewBoder :title="'版房设备'">
+                        <BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
+                            :seriesData="store.banfang.chart.series"></BoardBar>
+                    </NewBoder>
+                </div>
+            </div>
+            <div class="right">
+                <div class="rt">
+                    <NewBoder :title="'一次性拖鞋自动生产线'">
+                        <DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
+                            <BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
+                                :seriesData="store.tuoxie.chart.series"></BarChart>
+                        </DevCard>
+                    </NewBoder>
+                </div>
+                <div class="rb">
+                    <NewBoder :title="'座椅面套生产线'">
+                        <BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
+                            :seriesData="store.zuoyi.chart.series"></BoardBar>
+                    </NewBoder>
+                </div>
+            </div>
+        </div>
+        <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 class="right-tip-type">
+            <div class="right-tip-type-item blue">
+                <div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
+                <div class="left-tip-type-item-text">在 线</div>
+            </div>
+            <div class="right-tip-type-item err">
+                <div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
+                <div class="left-tip-type-item-text">离 线</div>
+            </div>
+        </div>
+        <div class="wrap"></div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import header2 from './components/header2.vue'
+import NewBoder from './components/NewBoder.vue';
+import DevCard from "./components/DevCard.vue";
+import BarChart from './components/BarChart.vue'
+import ringChart from "./components/ringChart.vue";
+import BoardBar from "./components/BoardBar.vue";
+
+import { getTopDevice, getCismaList } from '@/http/cisma'
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } 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 ringData = computed(() => {
+    return [
+        { name: '工作', value: store.devnum.on },
+        { name: '停机', value: store.devnum.off },
+        { name: '待机', value: store.devnum.wait },
+    ]
+})
+let timer = null
+let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
+let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
+let dev_value = [
+    ['全自动针梭两用铺布机', '待机', '40层', '1'],
+    ['全自动9公分电脑裁床', '待机', '40层', '0'],
+]
+
+
+let throttle_timer = null
+function throttle (fn, delay = 300) {
+    if(throttle_timer == null){
+        throttle_timer = setTimeout(() => {
+            fn()
+ 
+            clearTimeout(throttle_timer)
+            throttle_timer = null
+        }, delay);
+    }
+}
+
+async function getTopDeviceData() {
+    let res = await getTopDevice() as any
+    if (res.code === 200) {
+        store.setbanfang(res.data.版房设备)
+        store.setcaijian(res.data.裁剪设备)
+        store.setfengzhong(res.data.缝中设备)
+        store.settuoxie(res.data.拖鞋自动生产线)
+        store.setzuoyi(res.data.座椅面套生产线)
+
+    }
+}
+
+async function getCismaListData() {
+    let res = await getCismaList() as any
+    if (res.code === 200) {
+        store.setDevnum(res.data.devnum)
+    }
+}
+
+function getWebsocket(val) {
+    try {
+        let data = JSON.parse(val)
+
+
+        if (data.type == 'StateChart') {
+            store.setDevnum(data.msg)
+        }
+        if (data.type == 'WorkingState') {
+            store.changestatus(data.msg)
+        }
+
+    } catch (err) {
+        console.log(err);
+    }
+
+}
+function errWebsocket(val) {
+    // console.log(val);
+}
+
+onMounted(() => {
+    getTopDeviceData()
+    getCismaListData()
+    timer = setInterval(()=>{
+        getTopDeviceData()
+    },5000)
+    connectWebsocket(null, null, getWebsocket, errWebsocket)
+    document.getElementById('app').style.backgroundColor = '#0E0E0E'
+})
+
+onUnmounted(() => {
+    clearInterval(timer)
+
+    closeWebsocket()
+    document.getElementById('app').style.backgroundColor = '#100c2a'
+})
+</script>
+
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #FFFFFF;
+    background-color: #0E0E0E;
+    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 {
+    height: 980px;
+    width: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.center {
+    width: 670px;
+    height: 980px;
+    margin: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.lt,
+.rt {
+    width: 100%;
+    height: 450px;
+}
+
+.lb,
+.rb {
+    width: 100%;
+    height: 530px;
+}
+
+.ct {
+    width: 100%;
+    height: 110px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+.cc {
+    width: 100%;
+    height: 350px;
+}
+
+.cb {
+    width: 100%;
+    height: 500px;
+}
+
+.top-item {
+    width: 30%;
+    height: 100%;
+    background-image: url(@/assets/img/u8.png);
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 5px;
+}
+
+.top-item .div_p {
+    height: 60%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.div_p .div-p-tip {
+    position: absolute;
+    font-size: 1.5rem;
+    top: 10%;
+    left: 20%;
+}
+
+h2 {
+    /* color: #fff; */
+    font-size: 18px;
+    line-height: 1.5rem;
+    color: #02C1D7;
+}
+
+.on {
+    color: #20AEC5;
+    font-size: 3.5rem;
+}
+
+.off {
+    color: #797979;
+    font-size: 3.5rem;
+}
+
+.left-tip-type {
+    position: absolute;
+    top: 69px;
+    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;
+}
+
+.blue {
+    color: #20AEC5;
+}
+
+.err {
+    color: #FF6E76;
+}
+
+.right-tip-type {
+    position: absolute;
+    top: 15px;
+    left: 1550px;
+    width: 120px;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.right-tip-type-item {
+    width: 58px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.gatway {
+    font-size: 42px;
+}
+
+
+.wrap {
+    position: absolute;
+    top: 2px;
+    left: 582px;
+    width: 537px;
+    border-bottom: 0px solid transparent;
+    border-top: 92px solid #0E1D2F;
+    border-left: 109px solid transparent;
+    border-right: 110px solid transparent;
+}
+
+.dev-center {
+    width: 3px;
+    height: 60px;
+    background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
+    background-color: #5067BC;
+    transform: rotate(40deg) translate(7px, -6px);
+}
+
+.dev-top {
+    transform: translate(-6px, -10px);
+    font-size: 30px;
+}
+
+.dev-bottom {
+    transform: translate(15px, 15px);
+    font-size: 30px;
+}
+.left-tip-type-item-text {
+    font-weight: 700;
+    font-size: 14px;
+}
+</style>
diff --git a/src/views/legionProducts/chart/scrollBoard.vue b/src/views/legionProducts/chart/scrollBoard.vue
index dd162ec..993e348 100644
--- a/src/views/legionProducts/chart/scrollBoard.vue
+++ b/src/views/legionProducts/chart/scrollBoard.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="box">
-        <div class="box-title">{{t('messages.LegionDevList')}}</div>
+        <div class="box-title">{{ t('messages.LegionDevList') }}</div>
         <div class="box-body">
             <dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave"
                 @click="dvClick" :style="{
-                        width: '100%',
-                        height: '100%',
-                    }" />
-            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
-                virtual-triggering :virtual-ref="triggerRef" />
+                    width: '100%',
+                    height: '100%',
+                }" />
+            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
+                popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
         </div>
     </div>
 </template>
 
 <script setup lang='ts'>
-import { getCurrentInstance, onMounted, reactive, ref, defineProps } from "vue";
+import { getCurrentInstance, onMounted, reactive, ref, defineProps, watch } from "vue";
 import { devListType } from "@/type/InPlantProducts";
 import { useRouter } from "vue-router"
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const prop = defineProps({
     config: Object,
     severdata: Array
@@ -30,7 +30,7 @@ let tipcontent = ref(null)
 let visible = ref(false)
 //存储弹窗dom
 let triggerRef = ref(null)
-
+let devList = ref()
 /**
  * @函数功能: 鼠标移入组件方法
  * @param {*} value 
@@ -38,13 +38,26 @@ let triggerRef = ref(null)
  * @函数备注: 
  */
 const dvMouseover = (value) => {
-    if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
+    if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
         triggerRef.value = value.toElement
         tipcontent.value = value.toElement.innerText
         visible.value = true
     }
 
 };
+
+watch(() => prop.config, (newVal, oldVal) => {
+    devList.value.updateRows(newVal.data, {
+        header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
+        headerBGC: 'rgb(52, 105, 243)',
+        oddRowBGC: '#100c2a',
+        evenRowBGC: '#100c2a',
+        rowNum: 10,
+        columnWidth: [80, 170, 120, 120, 120, 120, 120, 120, 120, 100, 130],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
+    });
+}, { deep: true, flush: 'post' })
+
 /**
  * @函数功能:  鼠标移出组件方法
  * @出口参数: 
@@ -59,7 +72,7 @@ const dvmouseleave = () => {
 const dvClick = (value) => {
 
     if (value.row) {
-        prop.severdata.forEach((res:any) => {
+        prop.severdata.forEach((res: any) => {
             if (res.index == value.row[0]) {
                 router.push({
                     name: "devItem",
@@ -108,7 +121,7 @@ const dvClick = (value) => {
 }
 </style>
 <style>
-.el-popper.tooltip-class{
+.el-popper.tooltip-class {
     color: #fff !important;
 }
 </style>
\ No newline at end of file