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/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/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/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/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/index.vue b/src/views/MicroExhibition/index.vue
index 49adda1..96ad06b 100644
--- a/src/views/MicroExhibition/index.vue
+++ b/src/views/MicroExhibition/index.vue
@@ -1,114 +1,52 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-05 13:30:45
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-05 16:54:15
+ * @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="'缝前设备'"></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"></div>
+                        <div class="rtlbottom"></div>
+                    </div>
+                    <div class="rtright">
+                        <BoardVue :title="'缝中设备'"></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">
+                    右下
                 </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 { 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"
@@ -116,64 +54,27 @@ 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 dev_caijian_title = ['设备名称', '编号','状态', '稼动率', '工作时长']
+
 
 
-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 +86,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 +102,7 @@ onUnmounted(() => {
     height: 1080px;
     width: 1920px;
     color: #FFFFFF;
-    background-color: #0E0E0E;
+    background-color: rgba(0, 11, 18, 1);
     position: relative;
 
 }
@@ -228,111 +122,52 @@ 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;
-}
-
-.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%;
+.rbottom {
+    width: 100%;
+    height: 250px;
+    background: #bfe;
+}
+
+.rtleft {
+    width: 777px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -340,87 +175,26 @@ h2 {
     align-items: center;
 }
 
-.yuan {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
+.rtltop {
+    width: 100%;
+    height: 120px;
+    background: #bff;
+}
+.rtlbottom {
+    width: 100%;
+    height: 580px;
+    background: #bf1;
 }
 
-.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>