diff --git a/src/api/screen/micro.js b/src/api/screen/micro.js
new file mode 100644
index 0000000..1b42216
--- /dev/null
+++ b/src/api/screen/micro.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询设备列表
+export function listDevice() {
+    return request({
+        url: '/mf/device',
+        method: 'get',
+    })
+}
+
+// 查询设备能耗排行
+export function listElect(type) {
+    return request({
+        url: '/mf/elect?type=' + type,
+        method: 'get',
+    })
+}
+
+// 查询设备用电监测
+export function electMonitoring() {
+    return request({
+        url: '/mf/electMonitoring',
+        method: 'get',
+    })
+}
+
+// 查询设备状态
+export function deviceStatus() {
+    return request({
+        url: '/mf/deviceStatus',
+        method: 'get',
+    })
+}
+
+// 设备利用率
+export function deviceRate() {
+    return request({
+        url: '/mf/deviceRate',
+        method: 'get',
+    })
+}
+
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 92d4927..82ae054 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -84,9 +84,9 @@ export const constantRoutes = [
         hidden: true
       },
       {
-        path: "/screen/test",
-        name: "MicroFactorytest",
-        component: () => import("../views/screen/main/index.vue"),
+        path: "/screen/devItem",
+        name: "devItem",
+        component: () => import("../views/screen/devItem/index.vue"),
         hidden: true
       },
     ]
diff --git a/src/views/device/updateRecord/index.vue b/src/views/device/updateRecord/index.vue
index f529eb1..3acbf7f 100644
--- a/src/views/device/updateRecord/index.vue
+++ b/src/views/device/updateRecord/index.vue
@@ -29,10 +29,10 @@
                 <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                     v-hasPermi="['pms:records:remove']">删除</el-button>
             </el-col>
-            <el-col :span="1.5">
+            <!-- <el-col :span="1.5">
                 <el-button type="warning" plain icon="Download" @click="handleExport"
                     v-hasPermi="['pms:records:export']">导出</el-button>
-            </el-col>
+            </el-col> -->
             <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
diff --git a/src/views/screen/devItem/component/card.vue b/src/views/screen/devItem/component/card.vue
new file mode 100644
index 0000000..a3aa781
--- /dev/null
+++ b/src/views/screen/devItem/component/card.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="item-container">
+      <div class="box-title" >{{ prop.title }}</div>
+      <div class="content">
+        <slot></slot>      
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  
+  const prop = defineProps({
+    title: {
+      type: String,
+      default: '标题'
+    }
+  })
+  </script>
+  
+  <style lang="scss" scoped>
+  .item-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .box-title {
+      width: 100%;
+      height: 53px;
+      background: url('../image/u17.png') no-repeat;
+      background-size: auto 100%;
+      box-sizing: border-box;
+      padding-left: 32px;
+      font-size: 20px;
+      line-height: 53px;
+      color: #fff;
+    }
+    .content {
+      width: 100%;
+      height: calc(100% - 53px);
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/screen/devItem/component/stackBarChart.vue b/src/views/screen/devItem/component/stackBarChart.vue
new file mode 100644
index 0000000..141f2be
--- /dev/null
+++ b/src/views/screen/devItem/component/stackBarChart.vue
@@ -0,0 +1,109 @@
+<template>
+    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                xAxis: [],
+                series: []
+            };
+        }
+    }
+});
+
+
+const options = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                // Use axis to trigger tooltip
+                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+            }
+        },
+        legend: {},
+        backgroundColor: 'transparent',
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            name: 'h',
+            type: 'value',            
+            axisLabel: {
+                color: '#fff',
+            },
+            splitLine: {
+                show: false
+            }
+        },
+        series: [
+            {
+                name: '工作',
+                type: 'bar',
+                stack: 'total',
+                barWidth: '30%',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 302, 301, 334, 390, 330, 320]
+            },
+            {
+                name: '待机',
+                type: 'bar',
+                stack: 'total',
+                barWidth: '30%',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name: '停机',
+                type: 'bar',
+                stack: 'total',
+                barWidth: '30%',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name: '故障',
+                type: 'bar',
+                stack: 'total',
+                barWidth: '30%',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [150, 212, 201, 154, 190, 330, 410]
+            }
+        ]
+    }
+});
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/screen/devItem/image/center-bg.png b/src/views/screen/devItem/image/center-bg.png
new file mode 100644
index 0000000..484998b
Binary files /dev/null and b/src/views/screen/devItem/image/center-bg.png differ
diff --git a/src/views/screen/devItem/image/u17.png b/src/views/screen/devItem/image/u17.png
new file mode 100644
index 0000000..1fedb5a
Binary files /dev/null and b/src/views/screen/devItem/image/u17.png differ
diff --git a/src/views/screen/devItem/index.vue b/src/views/screen/devItem/index.vue
new file mode 100644
index 0000000..b8267c0
--- /dev/null
+++ b/src/views/screen/devItem/index.vue
@@ -0,0 +1,244 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">微工厂设备详情</div>
+        </div>
+        <div class="content">
+            <div class="left-plane">
+                <div class="lt-plane">
+                    <div class="ltl-plane">
+                        <Card class="ltl-item1" title="设备详情">
+                            <div class="ltl-content">
+                                <div class="ltl-box">
+                                    <div class="ltl-item-box"><div class="label">名称：</div><div class="value">{{ '什么什么什么什么什么缝纫机' }}</div></div>
+                                </div>
+                                <div class="ltl-box">
+                                    <div class="ltl-item-box"><div class="label">编号：</div><div class="value">{{ 'xxxxxx' }}</div></div>
+                                </div>
+                                <div class="ltl-box">
+                                    <div class="ltl-item-box"><div class="label">负责人：</div><div class="value">{{ 'xxxxxx' }}</div></div>
+                                </div>
+                                <div class="ltl-box">
+                                    <div class="ltl-item-box"><div class="label">所在位置：</div><div class="value">{{ 'xxxxxx' }}</div></div>
+                                </div>
+                            </div>
+
+                        </Card>
+                        <Card class="ltl-item2" title="设备详情"></Card>
+                    </div>
+                    <div class="ltr-plane">
+                        <div class="c-item c-top">
+                            <div class="item-box">当前状态：</div>
+                            <div class="item-box">运行时长：</div>
+                        </div>
+                        <div class="c-item c-center">
+                            <div class="item-box">停机时长：</div>
+                            <div class="item-box">工作时长：</div>
+                        </div>
+                        <div class="c-item c-bottom">
+                            <div class="item-box">故障时长：</div>
+                            <div class="item-box">待机时长：</div>
+                        </div>
+                    </div>
+                </div>
+                <Card class="lb-plane" title="设备状态分析">
+                    <StackBarChart></StackBarChart>
+                </Card>
+
+            </div>
+            <div class="right-plane">
+
+                <Card class="right-item1" title="设备维修记录"></Card>
+
+                <Card class="right-item2" title="设备保养记录"></Card>
+
+                <Card class="right-item3" title="设备用电量分析"></Card>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Card from './component/card.vue';
+import StackBarChart from './component/stackBarChart.vue';
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 1920px;
+    height: 1080px;
+    position: relative;
+    // display: flex;
+    // justify-content: center;
+    align-items: center;
+    background-image: url('/src/assets/images/screen-bg.png');
+    background-repeat: no-repeat;
+    /* 如果你不想让背景平铺 */
+    background-size: cover;
+    /* 或者其他你需要的大小设置 */
+    background-position: center;
+
+    .header {
+        width: 100%;
+        height: 89px;
+        background-image: url('/src/assets/images/screen-header-bg1.png');
+        background-size: 100% 100%;
+
+        .title {
+            width: 100%;
+            height: 89px;
+            font-size: 36px;
+            color: #f9f8f4;
+            text-align: center;
+            line-height: 89px;
+            font-weight: 700;
+        }
+
+    }
+
+    .content {
+        width: 100%;
+        height: 975px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 20px 0;
+
+        .right-plane {
+            width: 488px;
+            height: 100%;
+
+            .right-item1 {
+                width: 100%;
+                height: 280px;
+            }
+
+            .right-item2 {
+                width: 100%;
+                height: 280px;
+                margin: 10px 0;
+            }
+
+            .right-item3 {
+                width: 100%;
+                height: 395px;
+            }
+        }
+
+        .left-plane {
+            width: 1400px;
+            height: 100%;
+
+            .lt-plane {
+                width: 100%;
+                height: 635px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .ltl-plane {
+                    width: 488px;
+                    height: 100%;
+
+                    .ltl-item1 {
+                        width: 100%;
+                        height: 260px;
+
+                        .ltl-content {
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            flex-wrap: wrap;
+
+                            .ltl-box {
+                                width: 48%;
+                                height: 50%;
+                                display: flex;
+                                justify-content: flex-start;
+                                align-items: center;
+                                box-sizing: border-box;
+
+                                .ltl-item-box {
+                                    height: 60px;
+                                    width: 100%;
+                                    display: flex;
+                                    justify-content: center;
+                                    align-items: center;
+                                    background-color: rgba(2, 48, 87, 0.5);
+                                    border: #2A80B8 2px solid;
+                                    padding: 0 10px;
+                                    color: #f9f8f4;
+                                    font-size: 20px;
+                                    font-weight: 500;
+                                    text-align: center;
+                                    .label {
+                                        width: 50%;
+                                        text-wrap: nowrap;
+                                        text-align: left;
+                                    }
+                                }
+                            }
+                        }
+
+                    }
+
+                    .ltl-item2 {
+                        width: 100%;
+                        height: 360px;
+                        margin-top: 15px;
+                    }
+                }
+
+                .ltr-plane {
+                    width: 892px;
+                    height: 100%;
+                    background: url('./image/center-bg.png') no-repeat;
+                    background-size: 38% auto;
+                    background-position: 50% 70%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .c-top,
+                    .c-bottom {
+                        width: 70%;
+                        height: 120px;
+                    }
+
+                    .c-center {
+                        width: 85%;
+                        height: 100px;
+                    }
+
+                    .c-item {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .item-box {
+                            background-color: rgba(2, 48, 87, 0.5);
+                            border: #2A80B8 2px solid;
+                            padding: 15px;
+                            color: #f9f8f4;
+                            font-size: 22px;
+                            font-weight: 500;
+                            text-align: center;
+                        }
+
+                    }
+                }
+            }
+
+            .lb-plane {
+                width: 100%;
+                height: 340px;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/screen/main/index.vue b/src/views/screen/main/index.vue
deleted file mode 100644
index 369c9b4..0000000
--- a/src/views/screen/main/index.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<template>
-  <div class="screen-container">
-    <!-- 顶部标题 -->
-    <div class="header">
-      <h1>微工厂设备</h1>
-    </div>
-    
-    <div class="content">
-      <!-- 左侧设备列表 -->
-      <div class="left-panel">
-        <div class="panel-title">
-          <span class="icon">▶</span>
-          设备列表
-        </div>
-        <div class="device-list">
-          <div class="device-item" v-for="device in deviceList" :key="device.code">
-            <span>{{ device.name }}</span>
-            <span>{{ device.code }}</span>
-            <span class="status" :class="device.status"></span>
-          </div>
-        </div>
-        
-        <!-- 左侧产量统计图表 -->
-        <div class="chart-container">
-          <div class="panel-title">
-            <span class="icon">▶</span>
-            产量统计
-          </div>
-          <div ref="productionChart" style="height: 200px;"></div>
-        </div>
-        
-        <!-- 设备利用率图表 -->
-        <div class="chart-container">
-          <div class="panel-title">
-            <span class="icon">▶</span>
-            设备利用率
-          </div>
-          <div ref="utilizationChart" style="height: 200px;"></div>
-        </div>
-      </div>
-
-      <!-- 中间主要内容区 -->
-      <div class="center-panel">
-        <div class="status-overview">
-          <div class="status-item">
-            <div class="label">工作数量</div>
-            <div class="value">3台</div>
-          </div>
-          <div class="status-item">
-            <div class="label">待机数量</div>
-            <div class="value">2台</div>
-          </div>
-          <div class="status-item">
-            <div class="label">停机数量</div>
-            <div class="value">2台</div>
-          </div>
-          <div class="status-item">
-            <div class="label">设备类型</div>
-            <div class="value">7种</div>
-          </div>
-        </div>
-        
-        <!-- 中央圆环图 -->
-        <div class="status-center">
-          <div ref="centerChart" class="center-chart"></div>
-          <!-- 添加状态标签 -->
-          <div class="status-labels">
-            <div class="label-item" style="position: absolute; left: 10%; top: 50%; transform: translateY(-50%);">工作频率</div>
-            <div class="label-item" style="position: absolute; right: 10%; top: 50%; transform: translateY(-50%);">停机频率</div>
-            <div class="label-item" style="position: absolute; left: 30%; top: 20%;">3台</div>
-            <div class="label-item" style="position: absolute; right: 30%; top: 20%;">2台</div>
-            <div class="label-item" style="position: absolute; left: 30%; bottom: 20%;">2台</div>
-            <div class="label-item" style="position: absolute; right: 30%; bottom: 20%;">7种</div>
-          </div>
-        </div>
-        
-        <!-- 用电监测 -->
-        <div class="power-monitoring">
-          <div class="panel-title">用电监测</div>
-          <div class="power-charts">
-            <div ref="powerChart1" class="power-chart"></div>
-            <div ref="powerChart2" class="power-chart"></div>
-            <div ref="powerChart3" class="power-chart"></div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 右侧统计信息 -->
-      <div class="right-panel">
-        <div class="production-stats">
-          <div class="panel-title">当月计划生产的产品类型及计划产量</div>
-          <div class="stats-list">
-            <div class="stats-item" v-for="(item, index) in productionStats" :key="index">
-              <span>产品{{ index + 1 }}</span>
-              <div ref="productionProgress" class="progress-chart"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import * as echarts from 'echarts'
-
-// 设备列表数据
-const deviceList = ref([
-  { name: '电子系统机', code: 'W01', status: 'working' },
-  { name: '电脑喷头检测机', code: 'W02', status: 'standby' },
-  { name: '自动打磨头机机', code: 'W03', status: 'stopped' },
-  // ... 其他设备
-])
-
-// 图表实例引用
-const productionChart = ref(null)
-const utilizationChart = ref(null)
-const centerChart = ref(null)
-const powerChart1 = ref(null)
-const powerChart2 = ref(null)
-const powerChart3 = ref(null)
-
-// 初始化图表
-onMounted(() => {
-  initProductionChart()
-  initUtilizationChart()
-  initCenterChart()
-  initPowerCharts()
-})
-
-// 初始化产量统计图表
-const initProductionChart = () => {
-  const chart = echarts.init(productionChart.value)
-  chart.setOption({
-    // ... 配置产量统计图表选项
-  })
-}
-
-// 初始化设备利用率图表
-const initUtilizationChart = () => {
-  const chart = echarts.init(utilizationChart.value)
-  chart.setOption({
-    // ... 配置设备利用率图表选项
-  })
-}
-
-// 初始化中央圆环图
-const initCenterChart = () => {
-  const chart = echarts.init(centerChart.value)
-  chart.setOption({
-    series: [{
-      type: 'gauge',
-      startAngle: 90,
-      endAngle: -270,
-      pointer: { show: false },
-      progress: {
-        show: true,
-        overlap: false,
-        roundCap: true,
-        clip: false,
-        itemStyle: {
-          color: '#58D9F9'
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          width: 40
-        }
-      },
-      splitLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: { show: false },
-      data: [{
-        value: 82.43,
-        name: '完成率',
-        title: { offsetCenter: ['0%', '0%'] },
-        detail: { offsetCenter: ['0%', '30%'] }
-      }]
-    }]
-  })
-}
-
-// 初始化用电监测图表
-const initPowerCharts = () => {
-  [powerChart1, powerChart2, powerChart3].forEach((chartRef, index) => {
-    const chart = echarts.init(chartRef.value)
-    chart.setOption({
-      // ... 配置用电监测图表选项
-    })
-  })
-}
-</script>
-
-<style scoped>
-.screen-container {
-  width: 1920px;
-  height: 1080px;
-  background-color: #001529;
-  color: #fff;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.header {
-  text-align: center;
-  padding: 20px 0;
-}
-
-.content {
-  display: flex;
-  height: calc(100% - 100px);
-  gap: 20px;
-}
-
-.left-panel, .right-panel {
-  width: 400px;
-  background-color: rgba(0, 21, 41, 0.7);
-  padding: 20px;
-}
-
-.center-panel {
-  flex: 1;
-  background-color: rgba(0, 21, 41, 0.7);
-  padding: 20px;
-}
-
-.panel-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #58D9F9;
-}
-
-.device-list {
-  margin-bottom: 20px;
-}
-
-.device-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.status {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.status.working { background-color: #52c41a; }
-.status.standby { background-color: #faad14; }
-.status.stopped { background-color: #f5222d; }
-
-.status-overview {
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 30px;
-}
-
-.status-item {
-  text-align: center;
-}
-
-.center-chart {
-  height: 400px;
-  margin: 30px 0;
-}
-
-.power-monitoring {
-  margin-top: 30px;
-}
-
-.power-charts {
-  display: flex;
-  justify-content: space-between;
-}
-
-.power-chart {
-  width: 30%;
-  height: 200px;
-}
-
-.stats-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.progress-chart {
-  height: 40px;
-}
-
-.status-center {
-  position: relative;
-  height: 400px; /* 调整大小以适应圆环图 */
-}
-
-.status-labels .label-item {
-  color: #fff;
-  font-size: 16px;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
-}
-</style>
diff --git a/src/views/screen/microFactory/component/card.vue b/src/views/screen/microFactory/component/card.vue
index 2213ff4..a3aa781 100644
--- a/src/views/screen/microFactory/component/card.vue
+++ b/src/views/screen/microFactory/component/card.vue
@@ -26,7 +26,7 @@
       width: 100%;
       height: 53px;
       background: url('../image/u17.png') no-repeat;
-      background-size: 100% 100%;
+      background-size: auto 100%;
       box-sizing: border-box;
       padding-left: 32px;
       font-size: 20px;
diff --git a/src/views/screen/microFactory/component/lineChart.vue b/src/views/screen/microFactory/component/lineChart.vue
index aab1b5a..175f78d 100644
--- a/src/views/screen/microFactory/component/lineChart.vue
+++ b/src/views/screen/microFactory/component/lineChart.vue
@@ -39,16 +39,19 @@ const options = computed(() => {
             extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
         },
         backgroundColor: 'transparent',
-        legend: {
-            data: ['上月', '本月'],
-            right: 'left',
-            textStyle: {
-                color: '#ffff'
-            }
+        // legend: {
+        //     data: ['上月', '本月'],
+        //     right: 'left',
+        //     textStyle: {
+        //         color: '#ffff'
+        //     }
+        // },
+        grid: {
+            left: '10%',
         },
         xAxis: {
             type: 'category',
-            data: ['W01', 'W02', 'W03', 'W04', 'W05', 'W06', 'W07'],
+            data: prop.data.xAxis,
             axisLabel: {
                 color: "#ffffff",
             },
@@ -71,8 +74,8 @@ const options = computed(() => {
             },
         },
         series: [{
-            name: '上月',
-            data: [20, 90, 60, 80, 85, 50, 70],
+            name: '利用率',
+            data: prop.data.series,
             type: 'line',
             smooth: true,
             itemStyle: {
@@ -97,40 +100,7 @@ const options = computed(() => {
                     }]
                 }
             }
-        }, {
-            name: '本月',
-            data: [50, 60, 10, 60, 50, 80, 90],
-            type: 'line',
-            smooth: true,
-            itemStyle: {
-                color: '#48858e',
-            },
-            lineStyle: {
-                width: 2,
-            },
-            areaStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0,
-                        color: 'rgb(72 ,133 ,142 ,0.6)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(72 ,133 ,142 ,0.2)'
-                    }]
-                }
-            }
-        }],
-        grid: {
-            left: '8%',
-            right: '2%',
-            top: '10%',
-            bottom: '12%'
-        }
+        }]
     }
 });
 </script>
diff --git a/src/views/screen/microFactory/component/powerMonitoring.vue b/src/views/screen/microFactory/component/powerMonitoring.vue
index 4b421f3..060617c 100644
--- a/src/views/screen/microFactory/component/powerMonitoring.vue
+++ b/src/views/screen/microFactory/component/powerMonitoring.vue
@@ -23,7 +23,7 @@ const options = computed(() => {
             type: "gauge",
             z: 3,
             min: 0,
-            max: 180,
+            max: 380,
             radius: "85%",
             axisLine: {
                 lineStyle: {
diff --git a/src/views/screen/microFactory/component/sortBarChart.vue b/src/views/screen/microFactory/component/sortBarChart.vue
index 62c00ca..f8bdfc7 100644
--- a/src/views/screen/microFactory/component/sortBarChart.vue
+++ b/src/views/screen/microFactory/component/sortBarChart.vue
@@ -57,11 +57,6 @@ function drawChart(elementId) {
         //     trigger: 'item'
         // },
         tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
-            },
-            valueFormatter: (value) => value + ' kW·h'
         },
 
         toolbox: {
@@ -102,7 +97,7 @@ function drawChart(elementId) {
             inverse: true,
             axisLabel: {
                 color: '#fff',
-                fontSize: 16,
+                fontSize: 13,
             }
         },
         series: [
@@ -145,7 +140,7 @@ function drawChart(elementId) {
     top: 50%;
     left: 50%;
     width: 65%;
-    height: 65%;
+    height: 95%;
     z-index: 999;
     transform: translate(-50%, -50%);
     background-color: rgba(18, 27, 38, 0.9137254901960784);
diff --git a/src/views/screen/microFactory/index.vue b/src/views/screen/microFactory/index.vue
index 129a06b..0231027 100644
--- a/src/views/screen/microFactory/index.vue
+++ b/src/views/screen/microFactory/index.vue
@@ -32,8 +32,8 @@
 
                     <SortBarChart :data="sortBarChartData" fill="#169BD5" />
                     <div class="radio-ab-lb">
-                        <el-radio-group v-model="radio_bar" size="small">
-                            <el-radio-button label="single">当天</el-radio-button>
+                        <el-radio-group v-model="radio_bar" @change="handleChangeBar" size="small">
+                            <el-radio-button label="d">当天</el-radio-button>
                             <el-radio-button label="all">累计</el-radio-button>
                         </el-radio-group>
                     </div>
@@ -41,11 +41,12 @@
             </div>
             <div class="center-panel">
                 <div class="dev-type-overview">
-                    <div class="status-item" v-for="item in devTypeList" :key="item.label">
+                    <div class="status-item" v-for="item in devStatus.devTypes" :key="item.type">
                         <div class="value">
-                            <div class="on-text">{{ item.on }}</div>
-                            <div class="all-text">{{ item.all }}</div></div>
-                        <div class="label">{{ item.label }}</div>
+                            <div class="on-text">{{ item.work }}</div>
+                            <div class="all-text">{{ item.total }}</div>
+                        </div>
+                        <div class="label">{{ item.name }}</div>
                     </div>
                     <div class="status-flag">
                         <div class="yuan green"></div>
@@ -59,14 +60,14 @@
                         <div class="item-label item-label-1">工作数量</div>
                         <div class="item-label item-label-2">停机数量</div>
                         <div class="item-label item-label-3">待机数量</div>
-                        <div class="item-label item-label-4">设备类型</div>
+                        <div class="item-label item-label-4">设备总数</div>
                     </div>
                     <div class="status-center">
                         <div class="status-center-item">
-                            <div class="item-value item-label-1">31台</div>
-                            <div class="item-value item-label-2">11台</div>
-                            <div class="item-value item-label-3">21台</div>
-                            <div class="item-value item-label-4">71种</div>
+                            <div class="item-value item-label-1">{{devStatus.work}}台</div>
+                            <div class="item-value item-label-2">{{devStatus.stop}}台</div>
+                            <div class="item-value item-label-3">{{devStatus.wait}}台</div>
+                            <div class="item-value item-label-4">{{devStatus.total}}台</div>
                         </div>
                     </div>
                     <div class="centerChart">
@@ -88,7 +89,7 @@
             </div>
             <div class="right-panel">
                 <CardVue class="left-container" title="设备利用率">
-                    <LineChart />
+                    <LineChart :data="rateData"/>
                 </CardVue>
                 <CardVue class="left-container" title="设备提醒">
 
@@ -120,21 +121,22 @@ import u156 from './image/u156.png'
 import u157 from './image/u157.png'
 import u158 from './image/u158.png'
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import { listDevice, listElect, electMonitoring,deviceStatus,deviceRate } from '@/api/screen/micro'
 
 
-let radio_bar = ref('single')
+let radio_bar = ref('d')
 let scrollBoardConfig = reactive({
     header: [
-        '<div style="color: #21dadb;">设备名称</div>',
         '<div style="color: #21dadb;">编码</div>',
-        '<div style="color: #21dadb;">能耗</div>',
+        '<div style="color: #21dadb;">设备名称</div>',
         '<div style="color: #21dadb;">运行时长</div>',
+        '<div style="color: #21dadb;">设备利用率</div>',
         '<div style="color: #21dadb;">状态</div>'],//, '故障率'
     headerBGC: 'transparent',
     oddRowBGC: 'transparent',
     evenRowBGC: 'transparent',
     rowNum: 10,
-    columnWidth: [260, 160, 180, 180, 180, 180],
+    columnWidth: [180, 280, 180, 180, 120, 120],
     align: ['center', 'center', 'center', 'center', 'center', 'center'],
     data: [],
     rawData: []
@@ -151,23 +153,104 @@ let remindConfig = reactive({
     oddRowBGC: 'transparent',
     evenRowBGC: 'transparent',
     rowNum: 6,
-    columnWidth: [160, 260, 180, 180, 180, 240],
+    columnWidth: [300, 120, 180, 180, 180, 100],
     align: ['center', 'center', 'center', 'center', 'center', 'center'],
     data: [],
     rawData: []
 })
 
-let scrollBoardConfig_data = ref([
-    ['电子套结机', '123456', '123456', '123456', `<div style="width:100%;height:100%;display:flex;justify-content: space-around;
-        align-items: center;"><img src="${u158}" width="32" height="32">`],
-    ['电子套结机', '123456', '123456', '123456', '123456'],
-    ['电子套结机', '123456', '123456', '123456', '123456'],
-    ['电子套结机', '123456', '123456', '123456', '123456'],
-    ['电子套结机', '123456', '123456', '123456', '123456'],
-    ['电子套结机', '123456', '123456', '123456', '123456'],
+let devStatus = reactive({
+    "wait": 0,
+    "total": 0,
+    "stop": 0,
+    "rate": 0,
+    "work": 0,
+    "devTypes": [ ]
+})
+
+let devList = ref([])
+let scrollBoardConfig_data = computed(()=>{
+    let data = []
+    data = devList.value.map(item => {
+            return [
+                item.code,
+                item.name,
+                item.runTime + 'min',
+                item.rate,
+                status2Img(item.state)
+            ]
+        })
+    return data
+})
+
+function status2Img(status) {
+    let html = `<div style="width:100%;height:100%;display:flex;justify-content: space-around;align-items: center;">`
+    switch (status) {
+        case 0:
+            html += `<img src="${u157}" width="32" height="32">`
+            break
+        case 1:
+            html += `<img src="${u156}" width="32" height="32">`
+            break
+        case 2:
+            html += `<img src="${u83}" width="32" height="32">`
+            break
+        case 4:
+            html += `<img src="${u158}" width="32" height="32">`
+            break
+        default:
+            html += `<img src="${u157}" width="32" height="32">`
+            break
+    }
+    html += '</div>'
+    return html
+}
+
+//获取设备列表
+function getListDevice() {
+    listDevice().then(res => {
+        devList.value = res.data
+        
+    })
+}
+
+let sortBarChartData = ref([])
+//获取设备能耗排行
+function getlistElect() {
+    listElect(radio_bar.value).then(res => {
+        sortBarChartData.value = res.data.map(item => {
+            return {
+                name: item.name,
+                value: item.electricity
+            }
+        })
+    })
+}
+
+//切换能耗排行
+function handleChangeBar() {
+    getlistElect()
+}
+
+
+let powerMonitoring = ref([
+    { label: '当天耗电量', value: 8 },
+    { label: '本周耗电量', value: 60 },
+    { label: '本月耗电量', value: 288 }
 
 ])
 
+//获取用电监测
+function getelectMonitoring() {
+    electMonitoring().then(res => {
+        powerMonitoring.value = [
+            { label: '当天耗电量', value: res.data.day },
+            { label: '本周耗电量', value: res.data.week },
+            { label: '本月耗电量', value: res.data.month }
+        ]
+    })
+}
+
 let remindData = ref([
     ['abc', '模板缝纫机', '上油', '张三', '2025-02-19'],
     ['acg', '铺布机', '检查', '李四', '2025-02-20'],
@@ -175,38 +258,35 @@ let remindData = ref([
 
 ])
 
-let devTypeList = ref([
-    { label: '板房设备', on: 2, all: 6 },
-    { label: '裁剪设备', on: 3, all: 8 },
-    { label: '模板缝纫设备', on: 4, all: 10 },
-    { label: '簇绒设备', on: 5, all: 12 },
-    { label: '绣花设备', on: 3, all: 8 },
-    { label: '缝纫设备', on: 3, all: 8 },
-    { label: '后整设备', on: 3, all: 8 },
-])
-let productionChart = ref()
-let powerMonitoring = ref([
-    { label: '当天耗电量', value: 8 },
-    { label: '本周耗电量', value: 60 },
-    { label: '本月耗电量', value: 288 }
 
 
-])
-let sortBarChartData = ref([])
+//获取设备状态
+function getdeviceStatus() {
+    deviceStatus().then(res=>{
+        devStatus.wait = res.data.wait
+        devStatus.total = res.data.total
+        devStatus.stop = res.data.stop
+        devStatus.rate = res.data.rate
+        devStatus.work = res.data.work
+        devStatus.devTypes = res.data.devTypes
+    })
+}
+let rateData = ref()
+//设备利用率
+function getdeviceRate() {
+    deviceRate().then(res => {
+        rateData.value = {
+                xAxis: res.data.dates,
+                series: res.data.rate
+            }
+    })
+}
 onMounted(() => {
-    sortBarChartData.value = [
-
-        { name: '缝纫设备1', value: 120 },
-        { name: '缝纫设备2', value: 200 },
-        { name: '缝纫设备3', value: 150 },
-        { name: '缝纫设备4', value: 80 },
-        { name: '缝纫设备5', value: 70 },
-        { name: '板房设备1', value: 135 },
-        { name: '板房设备2', value: 122 },
-        { name: '板房设备3', value: 85 },
-        { name: '板房设备4', value: 47 },
-        { name: '板房设备5', value: 31 },
-    ]
+    getListDevice()
+    getlistElect()
+    getelectMonitoring()
+    getdeviceStatus()
+    getdeviceRate()
 
 
 })
@@ -331,18 +411,19 @@ onUnmounted(() => {
                         flex-direction: row;
                         justify-content: center;
                         align-items: center;
-                        
-                        &::after {
-                                content: "";
-                                width: 1px;
-                                height: 54px;
-                                border: #f9f8f4 solid 1px;
-                                position: absolute;
-                                transform: rotate(30deg);
-                                top: 0px;
-                                left: 61px;
 
-                            }
+                        &::after {
+                            content: "";
+                            width: 1px;
+                            height: 54px;
+                            border: #f9f8f4 solid 1px;
+                            position: absolute;
+                            transform: rotate(30deg);
+                            top: 0px;
+                            left: 61px;
+
+                        }
+
                         .on-text {
                             width: 24px;
                             height: 24px;
@@ -353,6 +434,7 @@ onUnmounted(() => {
                             text-align: center;
                             line-height: 24px;
                         }
+
                         .all-text {
                             width: 24px;
                             height: 24px;
@@ -364,6 +446,7 @@ onUnmounted(() => {
                             line-height: 24px;
                         }
                     }
+
                     .label {
                         width: 100%;
                         height: 24px;
@@ -383,6 +466,7 @@ onUnmounted(() => {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
+
                     .yuan {
                         width: 24px;
                         height: 24px;
@@ -396,6 +480,7 @@ onUnmounted(() => {
                     .blue {
                         background-color: #21dadb;
                     }
+
                     .flag-text {
                         color: #f9f8f4;
                         font-size: 18px;