diff --git a/src/assets/img/elli_tray.svg b/src/assets/img/elli_tray.svg
new file mode 100644
index 0000000..4ff767a
--- /dev/null
+++ b/src/assets/img/elli_tray.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="361px" height="56px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="133px" y="340px" width="361px" height="56px" filterUnits="userSpaceOnUse" id="filter115">
+      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
+      <feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.03529411764705882  0 0 0 0 0.38823529411764707  0 0 0 0 0.4784313725490196  0 0 0 1 0  " in="shadowComposite" />
+    </filter>
+    <g id="widget116">
+      <image preserveAspectRatio="none" style="overflow:visible" width="351" height="46" xlink:href="data:image/png;base64,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" x="138px" y="345px" />
+      <path d="M 313.5 345.5  C 411.5 345.5  488.5 355.4  488.5 368  C 488.5 380.6  411.5 390.5  313.5 390.5  C 215.5 390.5  138.5 380.6  138.5 368  C 138.5 355.4  215.5 345.5  313.5 345.5  Z " stroke-width="1" stroke="#09eed8" fill="none" />
+    </g>
+  </defs>
+  <g transform="matrix(1 0 0 1 -133 -340 )">
+    <use xlink:href="#widget116" filter="url(#filter115)" />
+    <use xlink:href="#widget116" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/tray.svg b/src/assets/img/tray.svg
new file mode 100644
index 0000000..037ebd1
--- /dev/null
+++ b/src/assets/img/tray.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="426px" height="95px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="322" y1="348" x2="322" y2="443" id="LinearGradient112">
+      <stop id="Stop113" stop-color="#198cd1" offset="0" />
+      <stop id="Stop114" stop-color="#001536" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -109 -348 )">
+    <path d="M 322 348  C 441.28000000000003 348  535 368.9  535 395.5  C 535 422.1  441.28000000000003 443  322 443  C 202.71999999999997 443  109 422.1  109 395.5  C 109 368.9  202.71999999999997 348  322 348  Z " fill-rule="nonzero" fill="url(#LinearGradient112)" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 58dce72..a82d0db 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -270,8 +270,20 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: "/MicroExhibition",
-        name: "MicroExhibition",
-        component: () => import("../views/MicroExhibition/index.vue"),
+        children: [
+          {
+            path: "/MicroExhibition",
+            name: "MicroExhibition",
+            component: () => import("../views/MicroExhibition/index.vue"),
+          },
+          {
+            path: "/MicroExhibition/:id",
+            name: "MicroExhibitionChild",
+            component: () => import("../views/MicroExhibition/child/index.vue"),
+          },
+        ]
+        
+        
       },
 
 
diff --git a/src/views/MicroExhibition/child/LineChart.vue b/src/views/MicroExhibition/child/LineChart.vue
new file mode 100644
index 0000000..0712c32
--- /dev/null
+++ b/src/views/MicroExhibition/child/LineChart.vue
@@ -0,0 +1,98 @@
+<template>
+        <div ref="LChartRef"></div>
+        
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance, onMounted } from 'vue'
+
+
+const prop = defineProps({
+    config: {
+        type: Object,
+        default: {
+            title:''
+        }
+    }
+})
+let LChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts = null;
+const setCharts = ()=>{
+    charts = proxy.$echarts.init(LChartRef.value, 'dark')
+    let option = {
+        title: {
+            text: prop.config.title,
+            textStyle:{
+                fontSize: 30,
+                color: '#20aec5'
+            },
+            left: '20px'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                name: 'Email',
+                type: 'line',
+                stack: 'Total',
+                data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name: 'Union Ads',
+                type: 'line',
+                stack: 'Total',
+                data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name: 'Video Ads',
+                type: 'line',
+                stack: 'Total',
+                data: [150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+                name: 'Direct',
+                type: 'line',
+                stack: 'Total',
+                data: [320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+                name: 'Search Engine',
+                type: 'line',
+                stack: 'Total',
+                data: [820, 932, 901, 934, 1290, 1330, 1320]
+            }
+        ]
+    };
+
+    charts.setOption(option);
+}
+onMounted(() => {
+        setCharts()
+})
+</script>
+
+<style scoped>
+.cc {
+    width: 400px;
+    height: 400px;
+}
+</style>
diff --git a/src/views/MicroExhibition/child/index.vue b/src/views/MicroExhibition/child/index.vue
new file mode 100644
index 0000000..384cafa
--- /dev/null
+++ b/src/views/MicroExhibition/child/index.vue
@@ -0,0 +1,170 @@
+<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">
+                    <div class="lt-title">工作效率</div>
+                    <div class="lt-value">95</div>
+                    <div class="elli_tray">
+                        <img src="../../../assets/img/elli_tray.svg" alt="">
+                    </div>
+                    <div class="tray">
+                        <img src="../../../assets/img/tray.svg" alt="">
+                    </div>
+                    <ul class="scale">
+                        <li style="top:44%;left:26%;">10</li>
+                        <li style="top: 47%;left: 30%;">20</li>
+                        <li style="top: 49%;left: 34%;">30</li>
+                        <li style="top: 52%;left: 39%;">40</li>
+                        <li style="top: 53.5%;left: 45%;">50</li>
+                        <li style="top: 55%;left: 51%;">60</li>
+                        <li style="top: 56%;left: 56%;">70</li>
+                        <li style="top: 56%;left: 62%;">80</li>
+                        <li style="top: 55.5%;left: 67%;">90</li>
+                        <li style="top: 54%;left: 71%;">100</li>
+                    </ul>
+                </div>
+                <div class="lb">
+                    <LineChart class="line" :config="lineConfig"></LineChart>
+                </div>
+            </div>
+            <div class="right">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import header2 from '@/components/headerBox/header2.vue'
+import LineChart from './LineChart.vue'
+
+let lineConfig = {
+    title: '工作时间'
+}
+
+
+
+</script>
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #20aec5;
+    background-color: #100c2a;
+}
+
+.header {
+    height: 100px;
+    width: 1920px;
+}
+
+.content {
+    width: 1920px;
+    height: 980px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.left {
+    width: 780px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.right {
+    width: 1130px;
+    height: 100%;
+}
+
+.lt,
+.lb {
+    width: 100%;
+    height: 48%;
+}
+
+.lt {
+    position: relative;
+}
+
+.elli_tray {
+    border-width: 0px;
+    position: absolute;
+    top: 51%;
+    left: 50%;
+    width: 351px;
+    height: 46px;
+    transform: rotate(6deg) translate(-50%, -50%);
+    z-index: 2;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+}
+
+.tray {
+    border-width: 0px;
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    width: 426px;
+    height: 95px;
+    transform: rotate(8deg) translate(-50%, -50%);
+}
+.lt-title {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 30px;
+    font-weight: bold;
+    color: #20aec5;
+    z-index: 3;
+}
+.lt-value {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 110px;
+    font-weight: bold;
+    color: #20aec5;
+    z-index: 3;
+}
+
+.scale {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    font-size: 18px;
+    color: #3366ff;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+}
+
+.scale li {
+    text-align: center;
+    line-height: 30px;
+    position: absolute;
+    z-index: 3;
+}
+.line {
+    width: 100%;
+    height: 100%;
+}
+
+</style>
diff --git a/src/views/MicroExhibition/components/LineChart.vue b/src/views/MicroExhibition/components/LineChart.vue
index 0bd837d..cc1920f 100644
--- a/src/views/MicroExhibition/components/LineChart.vue
+++ b/src/views/MicroExhibition/components/LineChart.vue
@@ -5,6 +5,16 @@
 
 <script setup lang='ts'>
 import { ref, getCurrentInstance, onMounted } from 'vue'
+
+
+const prop = defineProps({
+    config: {
+        type: Object,
+        default: {
+            title:''
+        }
+    }
+})
 let LChartRef = ref(null);
 const { proxy } = getCurrentInstance() as any;
 let charts = null;
@@ -12,7 +22,7 @@ const setCharts = ()=>{
     charts = proxy.$echarts.init(LChartRef.value, 'dark')
     let option = {
         title: {
-            text: 'Stacked Line'
+            text: prop.config.title
         },
         tooltip: {
             trigger: 'axis'
diff --git a/src/views/MicroExhibition/components/PbjCard.vue b/src/views/MicroExhibition/components/PbjCard.vue
new file mode 100644
index 0000000..b0f5f05
--- /dev/null
+++ b/src/views/MicroExhibition/components/PbjCard.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="pbj-card">
+    <div>机架号：12024467</div>
+    <div>工作时间</div>
+    <div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="70" :format="format" />85%</div>
+    <div>状态：工作</div>
+    <div>铺布层数：50层</div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+
+function format (percentage) {
+  return 3550;
+}
+</script>
+
+<style scoped>
+.pbj-card {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 700;
+}
+.demo-progress {    
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+.demo-progress .el-progress--line {
+  width: 350px;
+  margin-right: 5px;
+}
+</style>
diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue
index 6445e7a..b2b9e22 100644
--- a/src/views/MicroExhibition/index.vue
+++ b/src/views/MicroExhibition/index.vue
@@ -52,12 +52,14 @@
             </div>
             <div class="right">
                 <div class="rt">
-                    <Card title="富 怡 全 自 动 铺 布 机 (梭 织)"></Card>
+                    <Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
+                        <PbjCard></PbjCard>
+                    </Card>
                 </div>
                 <div class="rb">
                     <Card title="缝纫设备">
-                        <DevCard :dev_title="dev_title" :dev_value="dev_value">                            
-                        <BarChart style="width: 100%;height: 100%;"></BarChart>
+                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
+                            <BarChart style="width: 100%;height: 100%;"></BarChart>
                         </DevCard>
                     </Card>
                 </div>
@@ -73,6 +75,7 @@ import LineChart from './components/LineChart.vue'
 import BarChart from './components/BarChart.vue'
 import ringChart from "./components/ringChart.vue";
 import DevCard from "./components/DevCard.vue";
+import PbjCard from './components/PbjCard.vue';
 import scrollBoard from "./components/scrollBoard.vue";
 import { ref, reactive, getCurrentInstance } from 'vue'
 
@@ -92,6 +95,7 @@ let titleTip = [
         name: t('messages.disconnection'),
     },
 ];
+document.title = '设备大屏展示系统';
 let ringData = ref([]);
 ringData.value = [
     { name: '工作', value: 7 },
@@ -250,6 +254,7 @@ h2 {
     flex-direction: column;
     align-items: center;
 }
+
 .progress-title {
     margin-top: 20px;
     font-size: 16px;