diff --git a/src/store/module/MicroExhibition.ts b/src/store/module/MicroExhibition.ts
index afb2aa9..a0e195d 100644
--- a/src/store/module/MicroExhibition.ts
+++ b/src/store/module/MicroExhibition.ts
@@ -20,7 +20,52 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
   state: () => {
     return {
       devlist: [],
-      devnum: {all: 5, wait: 1, off: 3, on: 0}
+      devnum: { all: 17, wait: 1, off: 3, on: 0 },
+      caijian: {
+        'value': [				//'设备名称', '设备编码', '稼动率', '状态'   //0:停机 1:待机 2:工作 3:待机
+          ['全自动针梭两用铺布机', '1050910', '95%', '0'],
+          ['全自动9公分电脑裁床', '1190269', '80%', '1'],
+        ],
+        'chart': {
+          xData: ['1050910', '1050269'],
+          series: [
+            {
+              name: '计划完成',
+              data: [120, 200],
+              type: 'bar',
+              barMaxWidth: 30,
+            },
+            {
+              name: '实际完成',
+              data: [130, 180],
+              type: 'bar',
+              barMaxWidth: 30,
+            }
+          ]
+        }
+      },
+      tuoxie: {
+        'value': [				//'设备名称', '设备编码', '稼动率', '状态'   //0:停机 1:待机 2:工作 3:待机
+          ['1050910', '95%', '2'],
+        ],
+        'chart': {
+          xData: ['1050910'],
+          series: [
+            {
+              name: '计划完成',
+              data: [120],
+              type: 'bar',
+              barMaxWidth: 45,
+            },
+            {
+              name: '实际完成',
+              data: [130],
+              type: 'bar',
+              barMaxWidth: 45,
+            }
+          ]
+        }
+      }
     };
   },
   //computed 修改一些值
@@ -30,10 +75,10 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
   getters: {},
   actions: {
     setDevlist(data) {
-        this.devlist = data;
+      this.devlist = data;
     },
     setDevnum(data) {
-        this.devnum = data;
+      this.devnum = data;
     }
   },
 });
diff --git a/src/views/MicroExhibition/components/BarChart.vue b/src/views/MicroExhibition/components/BarChart.vue
index 0b38676..4c42d26 100644
--- a/src/views/MicroExhibition/components/BarChart.vue
+++ b/src/views/MicroExhibition/components/BarChart.vue
@@ -1,14 +1,32 @@
 <template>
-    <div ref="LChartRef"></div>
+    <div ref="LChartRef" class="cc"></div>
 </template>
 
 <script setup lang='ts'>
-import { ref, getCurrentInstance, onMounted } from 'vue'
+import { ref, getCurrentInstance, onMounted,watch } from 'vue'
+
 
 const prop = defineProps({
     xData: {
         type: Array,
         default: ['1050910', '1050269']
+    },
+    seriesData: {
+        type: Array,
+        default: [
+            {
+                name:'计划完成',
+                data: [120, 200],
+                type: 'bar',
+                barMaxWidth: 30,
+            },
+            {
+                name:'实际完成',
+                data: [130, 180],
+                type: 'bar',
+                barMaxWidth: 30,
+            }
+        ]
     }
 })
 
@@ -25,6 +43,7 @@ const setCharts = () => {
         legend: {
             data: ['计划完成','实际完成']
         },
+        color:['#2FC5D4','#FEDA81'],
         xAxis: {
             type: 'category',
             data: prop.xData,
@@ -36,22 +55,17 @@ const setCharts = () => {
         yAxis: {
             type: 'value'
         },
-        series: [
-            {
-                name:'计划完成',
-                data: [120, 200],
-                type: 'bar'
-            },
-            {
-                name:'实际完成',
-                data: [130, 180],
-                type: 'bar'
-            }
-        ]
+        series: prop.seriesData
     };
 
     charts.setOption(option);
 }
+
+watch(()=>prop.seriesData, (newVal, oldVal) => {
+    charts.setOption({
+        series: newVal
+    });
+},{deep:true})
 onMounted(() => {
     setCharts()
 })
@@ -59,7 +73,7 @@ onMounted(() => {
 
 <style scoped>
 .cc {
-    width: 400px;
-    height: 400px;
+    width: 100%;
+    height: 100%;
 }
 </style>
diff --git a/src/views/MicroExhibition/components/BoardBar.vue b/src/views/MicroExhibition/components/BoardBar.vue
new file mode 100644
index 0000000..3440414
--- /dev/null
+++ b/src/views/MicroExhibition/components/BoardBar.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="board-bar">
+        <div class="bb-top">
+            <div class="dev-title">
+                <div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]) }">
+                    <text>{{ item }}</text></div>
+            </div>
+            <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+        </div>
+        <div class="bb-bottom">
+            <BarChart style="width: 100%;height: 100%;"></BarChart>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import ZdScrollBoard from "@/components/data-view/index.vue";
+import BarChart from './BarChart.vue'
+
+import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "vue";
+
+
+const devList = ref(null);
+const prop = defineProps({
+    data: {
+        type: Array,
+        default: [[1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
+        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
+        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],
+        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
+        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
+        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],]
+    }
+})
+let header = ['序号', '设备名称', '设备编码', '稼动率', '状态']
+let columnWidth = [90, 290, 140, 120, 120, 120];
+let sum = 850;
+
+let computedWidth = (width: number) => {
+    return width / sum * 100 + '%'
+}
+let config = reactive({
+    // header: ['序号', '设备名称', '设备编码', '稼动率', '状态'],//, '故障率'
+    headerBGC: '#0E0E0E',
+    oddRowBGC: '#000F1D',
+    evenRowBGC: '#000F1D',
+    wrap: [false, false, false, false, false],
+    columnWidth: [80, 290, 120, 120, 120, 120],
+    align: ['center', 'center', 'center', 'center', 'center', 'center'],
+    rowNum: 2,
+    waitTime: 300000,
+    data: [
+    ]
+})
+const handleData = () => {
+
+    config.data = prop.data.map((items: any) => {
+        return items.map((item: any, index: number) => {
+            if (index == (items.length - 1)) {
+                return statusHtml(status_color[item])
+            }
+            return item
+        })
+    })
+}
+
+
+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>`
+}
+
+
+onMounted(() => {
+    handleData()
+})
+</script>
+
+<style scoped>
+.board-bar {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.dev-title {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title-item {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.title-item text {
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    padding: 5px 10px;
+    background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
+}
+
+.bb-top {
+    width: 100%;
+    height: 35%;
+}
+
+.dev-list {
+    width: 100%;
+    height: calc(100% - 50px);
+}
+
+.bb-bottom {
+    width: 100%;
+    height: 65%;
+
+}</style>
diff --git a/src/views/MicroExhibition/components/DevCard.vue b/src/views/MicroExhibition/components/DevCard.vue
index de87285..cb88a3b 100644
--- a/src/views/MicroExhibition/components/DevCard.vue
+++ b/src/views/MicroExhibition/components/DevCard.vue
@@ -9,7 +9,9 @@
                     <div class="key" v-for="item in dev_title">{{ item }}</div>
                 </div>
                 <div class="dev-content" v-for="(items, index) in dev_value">
-                    <div v-for="item in items">{{ item}}</div>
+                    <div v-for="(item,index) in items" :class="{status:index == last_index}" 
+                    :style="{background:index == last_index?status_color[item]:''}"
+                    >{{ index == last_index?'':item}}</div>
                 </div>
             </div>
         </div>
@@ -17,19 +19,29 @@
 </template>
 
 <script setup lang='ts'>
-
+import { defineProps, ref } from 'vue'
 const prop = defineProps({
     dev_title: {
         type: Array,
         default: ['机架号', '状态', '布料层数', '裁片数量']
     },
+    last_index: {
+        type: Number,
+        default: 3
+    },
     dev_value: {
         type: [Array],
         default: [
-            [102014422, '待机', '40层', '1000片']
+            [102014422, '待机', '40层', '0']
         ]
     },
 })
+const status_color = {
+    '0':'#FF6E76',
+    '1':'#FDDD60',
+    '2':'#7CFFB2',
+    '3':'#FDDD60',
+}
 </script>
 
 <style scoped>
@@ -90,4 +102,11 @@ const prop = defineProps({
     font-weight: 700;
     color: #02C1D7;
     /* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
-}</style>
+}
+
+.status {
+    width:24px;
+    height:24px;
+    border-radius: 50%;
+}
+</style>
diff --git a/src/views/MicroExhibition/components/ringChart.vue b/src/views/MicroExhibition/components/ringChart.vue
index 4cb32f9..cf2bb57 100644
--- a/src/views/MicroExhibition/components/ringChart.vue
+++ b/src/views/MicroExhibition/components/ringChart.vue
@@ -27,6 +27,7 @@ const init = () => {
         tooltip: {
             trigger: "item",
         },
+        color:['#7CFFB2','#FF6E76','#FDDD60'],
         backgroundColor: '#0E0E0E',
         legend: {
             type: "scroll",
diff --git a/src/views/MicroExhibition/images/title_bg.svg b/src/views/MicroExhibition/images/title_bg.svg
new file mode 100644
index 0000000..b1a150f
--- /dev/null
+++ b/src/views/MicroExhibition/images/title_bg.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="68px" height="30px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="68" y2="15" id="LinearGradient47">
+      <stop id="Stop48" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
+      <stop id="Stop49" stop-color="#00ffff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -910 -863 )">
+    <path d="M 1 29.80000000000001  L 1 0.19999999999998863  L 60.811428571428486 0.19999999999998863  L 67 7.800000000000012  L 67 29.80000000000001  L 1 29.80000000000001  Z " fill-rule="nonzero" fill="url(#LinearGradient47)" stroke="none" transform="matrix(1 0 0 1 910 863 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue
index 9977d55..a1307ba 100644
--- a/src/views/MicroExhibition/index.vue
+++ b/src/views/MicroExhibition/index.vue
@@ -10,13 +10,15 @@
             <div class="left">
                 <div class="lt">
                     <NewBoder :title="'裁剪设备'">
-                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
-                            <BarChart style="width: 100%;height: 100%;"></BarChart>
+                        <DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value" :last_index="3">
+                            <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="'缝中设备'"></NewBoder>
+                    <NewBoder :title="'缝中设备'">
+                        <BoardBar></BoardBar>
+                    </NewBoder>
                 </div>
             </div>
             <div class="center">
@@ -45,22 +47,49 @@
                 </div>
                 <div class="cb">
                     <NewBoder :title="'板房设备'">
+                        <BoardBar></BoardBar>
                     </NewBoder>
                 </div>
             </div>
             <div class="right">
                 <div class="rt">
                     <NewBoder :title="'一次性拖鞋自动生产线'">
-                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
-                            <BarChart style="width: 100%;height: 100%;"></BarChart>
+                        <DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value" :last_index="2">
+                            <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="'座椅面套生产线'"></NewBoder>
+                    <NewBoder :title="'座椅面套生产线'">
+                        <BoardBar></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>
 </template>
 
@@ -70,6 +99,7 @@ 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 { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
 import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
@@ -84,24 +114,30 @@ ringData.value = [
     { name: '待机', value: 3 },
 ]
 
-let dev_title = ['设备名称', '设备编码', '稼动率', '状态']
+let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
+let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
 let dev_value = [
-    ['全自动针梭两用铺布机', '待机', '40层', '1000片'],
-    ['全自动9公分电脑裁床', '待机', '40层', '1000片'],
+    ['全自动针梭两用铺布机', '待机', '40层', '1'],
+    ['全自动9公分电脑裁床', '待机', '40层', '0'],
 ]
+
+onMounted(() => {
+    document.getElementById('app').style.backgroundColor = '#0E0E0E'
+})
+
+onUnmounted(() => {
+    document.getElementById('app').style.backgroundColor = '#100c2a'
+})
 </script>
 
-<style>
-#app {
-    background-color: #0E0E0E;
-}
-</style>
+
 <style scoped>
 .container {
     height: 1080px;
     width: 1920px;
     color: #FFFFFF;
     background-color: #0E0E0E;
+    position: relative;
 
 }
 
@@ -130,7 +166,7 @@ let dev_value = [
 }
 
 .center {
-    flex: 1;
+    width: 670px;
     height: 980px;
     margin: 0 20px;
     display: flex;
@@ -138,12 +174,14 @@ let dev_value = [
     justify-content: space-between;
 }
 
-.lt,.rt {
+.lt,
+.rt {
     width: 100%;
     height: 450px;
 }
 
-.lb,.rb {
+.lb,
+.rb {
     width: 100%;
     height: 530px;
 }
@@ -155,10 +193,12 @@ let dev_value = [
     flex-direction: row;
     justify-content: space-around;
 }
+
 .cc {
     width: 100%;
     height: 350px;
 }
+
 .cb {
     width: 100%;
     height: 500px;
@@ -205,4 +245,64 @@ h2 {
     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;
+}
+.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: 36px;
+}
 </style>