From 00e329c9a20260bc519de1d0813e49ae91fd7213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Fri, 28 Mar 2025 16:11:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8FBI=E6=B7=BB=E5=8A=A0=E4=B8=8E?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96V0.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DeviceScreen/charts/chart1.vue            |  10 +-
 .../DeviceScreen/charts/chart2.vue            |   5 +-
 .../DeviceScreen/charts/chart3.vue            |  10 +-
 .../DeviceScreen/charts/chart4.vue            |   5 +-
 .../DeviceScreen/charts/chart5.vue            |   5 +-
 .../DeviceScreen/charts/chart6.vue            |   5 +-
 .../DeviceScreen/charts/chart7.vue            |   5 +-
 .../DeviceScreen/charts/chart8.vue            |   5 +-
 .../DeviceScreen/charts/chart9.vue            |   5 +-
 src/views/SmartScreen/DeviceScreen/index.vue  | 269 +++++++++---------
 src/views/SmartScreen/OrderScreen/index.css   |   2 +
 src/views/SmartScreen/OrderScreen/index.vue   |  12 -
 .../QualityScreen/charts/chart1.vue           |  87 ------
 .../QualityScreen/charts/chart10.vue          |  42 +--
 .../QualityScreen/charts/chart2.vue           |  79 -----
 .../QualityScreen/charts/chart3.vue           |  79 -----
 .../QualityScreen/charts/chart4.vue           |   8 +-
 .../QualityScreen/charts/chart5.vue           |   8 +-
 .../QualityScreen/charts/chart6.vue           | 126 --------
 .../QualityScreen/charts/chart7.vue           | 120 --------
 .../QualityScreen/charts/chart8.vue           | 119 --------
 .../QualityScreen/charts/chart9.vue           |  23 +-
 src/views/SmartScreen/QualityScreen/index.css |  33 ++-
 src/views/SmartScreen/QualityScreen/index.vue | 239 ++++++++--------
 .../SmartScreen/QualityScreen/theme/qc.json   |  42 +--
 .../ReportScreen/charts/chart1.vue            |   2 +-
 .../ReportScreen/charts/chart2.vue            |   2 +-
 .../ReportScreen/charts/chart3.vue            |   2 +-
 .../ReportScreen/charts/chart4.vue            |   2 +-
 .../ReportScreen/charts/chart5.vue            |   2 +-
 src/views/SmartScreen/ReportScreen/index.vue  | 123 ++++----
 src/views/SmartScreen/index.vue               |  30 +-
 .../可视化素材包/components/kbBack.vue        |  25 ++
 .../可视化素材包/components/kbChartBox.vue    |  11 +-
 .../可视化素材包/components/kbCountBox.vue    |   9 +-
 .../components/kbFullScreenBox.vue            |  60 ++++
 .../可视化素材包/components/kbGap.vue         |   6 +-
 .../可视化素材包/components/kbHeader.vue      |  38 ++-
 .../可视化素材包/components/kbLogo.vue        |  26 +-
 .../可视化素材包/components/kbNumBox.vue      |  10 +-
 .../可视化素材包/components/kbTime.vue        |  15 +-
 .../可视化素材包/components/kbTitle.vue       |   9 +-
 42 files changed, 629 insertions(+), 1086 deletions(-)
 delete mode 100644 src/views/SmartScreen/QualityScreen/charts/chart1.vue
 delete mode 100644 src/views/SmartScreen/QualityScreen/charts/chart2.vue
 delete mode 100644 src/views/SmartScreen/QualityScreen/charts/chart3.vue
 delete mode 100644 src/views/SmartScreen/QualityScreen/charts/chart6.vue
 delete mode 100644 src/views/SmartScreen/QualityScreen/charts/chart7.vue
 delete mode 100644 src/views/SmartScreen/QualityScreen/charts/chart8.vue
 create mode 100644 src/views/SmartScreen/可视化素材包/components/kbBack.vue
 create mode 100644 src/views/SmartScreen/可视化素材包/components/kbFullScreenBox.vue

diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart1.vue b/src/views/SmartScreen/DeviceScreen/charts/chart1.vue
index 7633a5d..0d43679 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart1.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart1.vue
@@ -1,8 +1,14 @@
 <!-- 今日工单 -->
 <template>
     <div>
-        <div class="title">今日巡检任务</div>
-        <el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
+        <el-table
+            height="300"
+            :data="dataList"
+            v-loading="loading"
+            ref="tableRef"
+            highlight-current-row
+            @mouseover.native="clearScroll"
+            @mouseleave.native="createScroll">
             <el-table-column prop="taskName" label="任务名称" :show-overflow-tooltip="true" />
             <el-table-column prop="type" label="任务类型" align="center">
                 <template #default="scope">
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart2.vue b/src/views/SmartScreen/DeviceScreen/charts/chart2.vue
index ab2aa31..e4d7d8f 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart2.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart2.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 let options = {
     title: {
-        text: '本月任务统计',
+        text: '',
         left: 'left'
     },
     tooltip: {
@@ -94,7 +94,8 @@ function updateData() {
         if (res.code === 200) {
             options.xAxis.data = res.data.xData
             options.series = res.data.seriesData
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
         }
     })
 }
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart3.vue b/src/views/SmartScreen/DeviceScreen/charts/chart3.vue
index 310b423..25d5b5e 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart3.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart3.vue
@@ -1,8 +1,14 @@
 <!-- 今日工单 -->
 <template>
     <div>
-        <div class="title">今日维修任务</div>
-        <el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
+        <el-table
+            height="300"
+            :data="dataList"
+            v-loading="loading"
+            ref="tableRef"
+            highlight-current-row
+            @mouseover.native="clearScroll"
+            @mouseleave.native="createScroll">
             <el-table-column prop="repairOrder" label="维修单号" :show-overflow-tooltip="true" />
             <el-table-column prop="type" label="类型" align="center">
                 <template #default="scope">
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart4.vue b/src/views/SmartScreen/DeviceScreen/charts/chart4.vue
index ecef22e..3c393f6 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart4.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart4.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 const options = {
     title: {
-        text: '本月故障类型',
+        text: '',
         left: 'left'
     },
     legend: {
@@ -87,7 +87,8 @@ function updateData() {
             //     }
             // })
             options.series = res.data
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
             // console.log(res.data.title.text, res.data)
         }
     })
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart5.vue b/src/views/SmartScreen/DeviceScreen/charts/chart5.vue
index edbf358..b316d48 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart5.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart5.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 let options = {
     title: {
-        text: '本月故障趋势',
+        text: '',
         left: 'left'
     },
     tooltip: {
@@ -97,7 +97,8 @@ function updateData() {
         if (res.code === 200) {
             options.xAxis.data = res.data.xData
             options.series = res.data.seriesData
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
         }
     })
 }
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart6.vue b/src/views/SmartScreen/DeviceScreen/charts/chart6.vue
index fc3ab14..fae779c 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart6.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart6.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 let options = {
     title: {
-        text: '今日故障类型统计',
+        text: '',
         left: 'left'
     },
     tooltip: {
@@ -97,7 +97,8 @@ function updateData() {
         if (res.code === 200) {
             options.xAxis.data = res.data.xData
             options.series = res.data.seriesData
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
         }
     })
 }
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart7.vue b/src/views/SmartScreen/DeviceScreen/charts/chart7.vue
index 719879d..14709f9 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart7.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart7.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 let options = {
     title: {
-        text: '本月任务完成时间统计(分)',
+        text: '',
         left: 'left'
     },
     tooltip: {
@@ -97,7 +97,8 @@ function updateData() {
         if (res.code === 200) {
             options.xAxis.data = res.data.xData
             options.series = res.data.seriesData
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
         }
     })
 }
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart8.vue b/src/views/SmartScreen/DeviceScreen/charts/chart8.vue
index af56c4c..e2d3185 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart8.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart8.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 let options = {
     title: {
-        text: '本月人员响应时间统计(分)',
+        text: '',
         left: 'left'
     },
     tooltip: {
@@ -98,7 +98,8 @@ function updateData() {
             console.log(res.data)
             options.xAxis.data = res.data.xData
             options.series = res.data.seriesData
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
         }
     })
 }
diff --git a/src/views/SmartScreen/DeviceScreen/charts/chart9.vue b/src/views/SmartScreen/DeviceScreen/charts/chart9.vue
index 37ea05a..a961419 100644
--- a/src/views/SmartScreen/DeviceScreen/charts/chart9.vue
+++ b/src/views/SmartScreen/DeviceScreen/charts/chart9.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 let options = {
     title: {
-        text: '本月维修统计',
+        text: '',
         left: 'left'
     },
     tooltip: {
@@ -97,7 +97,8 @@ function updateData() {
         if (res.code === 200) {
             options.xAxis.data = res.data.xData
             options.series = res.data.seriesData
-            chart.value.setOption(options)
+            chart.value?.setOption(options)
+            chart.value?.resize()
         }
     })
 }
diff --git a/src/views/SmartScreen/DeviceScreen/index.vue b/src/views/SmartScreen/DeviceScreen/index.vue
index 5037ed6..6299699 100644
--- a/src/views/SmartScreen/DeviceScreen/index.vue
+++ b/src/views/SmartScreen/DeviceScreen/index.vue
@@ -1,137 +1,150 @@
 <template>
-    <div class="screen">
-        <div class="background"></div>
-        <div class="back" @click="$router.go(-1)">
-            <el-icon><ArrowLeftBold /></el-icon>
+    <kbFullScreenBox>
+        <div class="screen">
+            <div class="background"></div>
+            <div class="header">
+                <kbHeader>设备TPM实时看板</kbHeader>
+            </div>
+            <kbGap></kbGap>
+            <kbGap></kbGap>
+            <div class="body">
+                <kbCountBox>
+                    <div class="top" dv-bg>
+                        <el-row :gutter="20">
+                            <el-col :span="4">
+                                <div class="num-item">
+                                    <div class="num-title">启用设备</div>
+                                    <div class="num-value">{{ numData.useDeviceTotal }} 个</div>
+                                </div>
+                            </el-col>
+                            <el-col :span="4">
+                                <div class="num-item">
+                                    <div class="num-title">停用设备</div>
+                                    <div class="num-value">{{ numData.unUseDeviceTotal }} 个</div>
+                                </div>
+                            </el-col>
+                            <el-col :span="4">
+                                <div class="num-item">
+                                    <div class="num-title">总任务数</div>
+                                    <div class="num-value">{{ numData.taskTotal }} 个</div>
+                                </div>
+                            </el-col>
+                            <el-col :span="4">
+                                <div class="num-item">
+                                    <div class="num-title">任务完成数</div>
+                                    <div class="num-value">{{ numData.finishTaskTotal }} 个</div>
+                                </div>
+                            </el-col>
+                            <el-col :span="4">
+                                <div class="num-item">
+                                    <div class="num-title">总报修数</div>
+                                    <div class="num-value">{{ numData.repairTotal }} 个</div>
+                                </div>
+                            </el-col>
+                            <el-col :span="4">
+                                <div class="num-item">
+                                    <div class="num-title">总完成数</div>
+                                    <div class="num-value">{{ numData.finishRepairTotal }} 个</div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </kbCountBox>
+                <kbGap></kbGap>
+                <el-row :gutter="5">
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>今日巡检任务</kbTitle>
+                                <chart1></chart1>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>本月任务统计</kbTitle>
+                                <chart2></chart2>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>今日维修任务</kbTitle>
+                                <chart3></chart3>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                </el-row>
+                <kbGap></kbGap>
+                <el-row :gutter="5">
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>本月故障类型</kbTitle>
+                                <chart4></chart4>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>本月故障趋势</kbTitle>
+                                <chart5></chart5>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>今日故障趋势</kbTitle>
+                                <chart6></chart6>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                </el-row>
+                <kbGap></kbGap>
+                <el-row :gutter="5">
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>本月任务完成时间统计（分）</kbTitle>
+                                <chart7></chart7>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>本月人员响应时间统计（分）</kbTitle>
+                                <chart8></chart8>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <div>
+                                <kbTitle>本月维修统计</kbTitle>
+                                <chart9></chart9>
+                            </div>
+                        </kbChartBox>
+                    </el-col>
+                </el-row>
+            </div>
         </div>
-        <div>
-            <logo></logo>
-            <kbTime></kbTime>
-        </div>
-        <div class="header">
-            <kbHeader>TPM实时看板</kbHeader>
-        </div>
-        <div class="body">
-            <dv-border-box8 class="box8" :dur="5">
-                <div class="top" dv-bg>
-                    <el-row :gutter="20">
-                        <el-col :span="4">
-                            <div class="num-item">
-                                <div class="num-title">启用设备</div>
-                                <div class="num-value">{{ numData.useDeviceTotal }} 个</div>
-                            </div>
-                        </el-col>
-                        <el-col :span="4">
-                            <div class="num-item">
-                                <div class="num-title">停用设备</div>
-                                <div class="num-value">{{ numData.unUseDeviceTotal }} 个</div>
-                            </div>
-                        </el-col>
-                        <el-col :span="4">
-                            <div class="num-item">
-                                <div class="num-title">总任务数</div>
-                                <div class="num-value">{{ numData.taskTotal }} 个</div>
-                            </div>
-                        </el-col>
-                        <el-col :span="4">
-                            <div class="num-item">
-                                <div class="num-title">任务完成数</div>
-                                <div class="num-value">{{ numData.finishTaskTotal }} 个</div>
-                            </div>
-                        </el-col>
-                        <el-col :span="4">
-                            <div class="num-item">
-                                <div class="num-title">总报修数</div>
-                                <div class="num-value">{{ numData.repairTotal }} 个</div>
-                            </div>
-                        </el-col>
-                        <el-col :span="4">
-                            <div class="num-item">
-                                <div class="num-title">总完成数</div>
-                                <div class="num-value">{{ numData.finishRepairTotal }} 个</div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </div>
-            </dv-border-box8>
-            <el-row :gutter="5">
-                <el-col :span="8">
-                    <dv-border-box12 class="box">
-                        <div>
-                            <chart1></chart1>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart2></chart2>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart3></chart3>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-            </el-row>
-            <el-row :gutter="5">
-                <el-col :span="8">
-                    <dv-border-box12 class="box">
-                        <div>
-                            <chart4></chart4>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart5></chart5>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart6></chart6>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-            </el-row>
-            <el-row :gutter="5">
-                <el-col :span="8">
-                    <dv-border-box12 class="box">
-                        <div>
-                            <chart7></chart7>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart8></chart8>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart9></chart9>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-            </el-row>
-        </div>
-    </div>
+    </kbFullScreenBox>
 </template>
 
 <script setup>
 /// ================ 基础组件导入 ======================
-import kbHeader from './components/kbHeader.vue'
-import kbTime from './components/kbTime.vue'
-import logo from './components/logo.vue'
+import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
+import kbGap from '../可视化素材包/components/kbGap.vue'
+import kbHeader from '../可视化素材包/components/kbHeader.vue'
+import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
+import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
+import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
+import kbTitle from '../可视化素材包/components/kbTitle.vue'
 /// ================================================
 
 /// ================== 图表组件导入 ======================
diff --git a/src/views/SmartScreen/OrderScreen/index.css b/src/views/SmartScreen/OrderScreen/index.css
index dd34339..b96690f 100644
--- a/src/views/SmartScreen/OrderScreen/index.css
+++ b/src/views/SmartScreen/OrderScreen/index.css
@@ -60,6 +60,8 @@ body {
 }
 .top-box {
     margin: 20px;
+    padding-top: 1vh;
+    padding-bottom: 1vh;
     /* height: 40px; */
     background-color: rgba(60, 232, 248, 0.1);
     border: 1px solid #a9aabc;
diff --git a/src/views/SmartScreen/OrderScreen/index.vue b/src/views/SmartScreen/OrderScreen/index.vue
index d288d56..d238d54 100644
--- a/src/views/SmartScreen/OrderScreen/index.vue
+++ b/src/views/SmartScreen/OrderScreen/index.vue
@@ -1,15 +1,6 @@
 <template>
     <div class="screen">
         <div class="background"></div>
-        <div class="back" @click="back">
-            <el-icon>
-                <ArrowLeftBold />
-            </el-icon>
-        </div>
-        <div>
-            <kbLogo></kbLogo>
-            <kbTime></kbTime>
-        </div>
         <div class="header">
             <kbHeader>车间订单进度看板</kbHeader>
         </div>
@@ -71,8 +62,6 @@ const { proxy } = getCurrentInstance()
 /// ================ 基础组件导入 ======================
 import kbGap from '../可视化素材包/components/kbGap.vue'
 import kbHeader from '../可视化素材包/components/kbHeader.vue'
-import kbTime from '../可视化素材包/components/kbTime.vue'
-import kbLogo from '../可视化素材包/components/kbLogo.vue'
 import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
 import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
 import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
@@ -125,7 +114,6 @@ onUnmounted(() => {
 
 <style scoped>
 @import './index.css';
-
 .box8 {
     margin-top: 10px;
     margin-bottom: 10px;
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart1.vue b/src/views/SmartScreen/QualityScreen/charts/chart1.vue
deleted file mode 100644
index a88a978..0000000
--- a/src/views/SmartScreen/QualityScreen/charts/chart1.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<!-- 今日工单 -->
-<template>
-    <div>
-        <div class="title">昨日IQC列表</div>
-        <el-table
-            height="300"
-            :data="dataList"
-            v-loading="loading"
-            ref="tableRef"
-            highlight-current-row
-            @mouseover.native="clearScroll"
-            @mouseleave.native="createScroll">
-            <el-table-column prop="lineCode" label="炉号" />
-            <el-table-column prop="defectDesciption" label="工序" />
-            <el-table-column prop="defectDesciption" label="描述" />
-            <el-table-column prop="defectQuantity" label="数量" />
-        </el-table>
-    </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance()
-import { getMoudle02 } from '@/api/smartScreen/QualityScreen/index.js'
-const loading = ref(false)
-const dataList = ref([])
-function getList() {
-    getMoudle02().then((res) => {
-        const { code, data } = res
-        if (code == 200) {
-            dataList.value = data
-        }
-    })
-}
-// 查询
-function handleQuery() {
-    getList()
-}
-handleQuery()
-// 自动获取数据
-let timer1 = null
-const clearSearchTimer = () => {
-    clearInterval(timer1)
-    timer1 = null
-}
-const createSearchTimer = () => {
-    clearSearchTimer()
-    timer1 = setInterval(() => {
-        handleQuery()
-    }, 1000 * 60 * 5)
-}
-
-// 自动滚动
-let timer2 = null
-let tableRef = ref(null)
-
-const clearScroll = () => {
-    clearInterval(timer2)
-    timer2 = null
-}
-const createScroll = () => {
-    clearScroll()
-    // 拿到 table
-    const _table = tableRef.value.layout.table.refs
-    // // 拿到可以滚动的元素
-    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
-    timer2 = setInterval(() => {
-        tableWrapper.scrollTop += 1
-        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
-        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
-            tableWrapper.scrollTop = 0
-        }
-    }, 100)
-}
-
-onMounted(() => {
-    createSearchTimer()
-    createScroll()
-})
-onUnmounted(() => {
-    clearScroll()
-    clearSearchTimer()
-})
-</script>
-
-<style scoped>
-@import './table.css';
-</style>
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart10.vue b/src/views/SmartScreen/QualityScreen/charts/chart10.vue
index 11ba23b..12386e6 100644
--- a/src/views/SmartScreen/QualityScreen/charts/chart10.vue
+++ b/src/views/SmartScreen/QualityScreen/charts/chart10.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '400px'
+        default: '35vh'
     }
 })
 let options = {
@@ -32,14 +32,8 @@ let options = {
             type: 'shadow'
         }
     },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
     xAxis: {
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        data: [],
         boundaryGap: true,
         axisTick: {
             show: false
@@ -61,8 +55,16 @@ let options = {
     series: [
         {
             name: '',
-            type: 'bar',
-            data: [1, 2, 3, 4, 5, 6, 7]
+            type: 'line',
+            data: [],
+            label: {
+                position: 'outside',
+                formatter: '{b}%',
+                textBorderColor: '#fff',
+                textBorderWidth: 0,
+                fontSize: '2vh',
+                color: '#fff'
+            }
         }
     ]
 }
@@ -86,16 +88,20 @@ function updateData() {
             options.xAxis.data = res.data.xAxis.data
             let _series = res.data.series
             _series.forEach((item) => {
+                item.type = 'line'
                 // item.stack = 'group'
                 // item.emphasis = { focus: 'series' }
-                // item.label = {
-                //     show: true,
-                //     position: 'inside',
-                //     textBorderColor: '#fff',
-                //     textBorderWidth: 0,
-                //     formatter: '{c}',
-                //     color: '#fff'
-                // }
+                item.itemStyle = {
+                    color: 'green'
+                }
+                item.label = {
+                    show: true,
+                    position: 'inside',
+                    textBorderColor: '#fff',
+                    textBorderWidth: 0,
+                    formatter: '{b}%',
+                    color: '#fff'
+                }
             })
             options.series = _series
             chart.value?.setOption(options)
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart2.vue b/src/views/SmartScreen/QualityScreen/charts/chart2.vue
deleted file mode 100644
index d70f7f5..0000000
--- a/src/views/SmartScreen/QualityScreen/charts/chart2.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<!-- 今日工单 -->
-<template>
-    <div>
-        <div class="title">昨日IPQC列表</div>
-        <el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
-            <el-table-column prop="lineCode" label="产线" :show-overflow-tooltip="true" />
-            <el-table-column prop="defectDesciption" label="描述" :show-overflow-tooltip="true" />
-            <el-table-column prop="defectQuantity" label="数量" :show-overflow-tooltip="true" />
-        </el-table>
-    </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance()
-import { getMoudle05 } from '@/api/smartScreen/QualityScreen/index.js'
-const loading = ref(false)
-const dataList = ref([])
-function getList() {
-    getMoudle05().then((res) => {
-        const { code, data } = res
-        if (code == 200) {
-            dataList.value = data
-        }
-    })
-}
-// 查询
-function handleQuery() {
-    getList()
-}
-handleQuery()
-// 自动获取数据
-let timer1 = null
-const clearSearchTimer = () => {
-    clearInterval(timer1)
-    timer1 = null
-}
-const createSearchTimer = () => {
-    clearSearchTimer()
-    timer1 = setInterval(() => {
-        handleQuery()
-    }, 1000 * 60 * 5)
-}
-
-// 自动滚动
-let timer2 = null
-let tableRef = ref(null)
-
-const clearScroll = () => {
-    clearInterval(timer2)
-    timer2 = null
-}
-const createScroll = () => {
-    clearScroll()
-    // 拿到 table
-    const _table = tableRef.value.layout.table.refs
-    // // 拿到可以滚动的元素
-    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
-    timer2 = setInterval(() => {
-        tableWrapper.scrollTop += 1
-        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
-        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
-            tableWrapper.scrollTop = 0
-        }
-    }, 100)
-}
-
-onMounted(() => {
-    createSearchTimer()
-    createScroll()
-})
-onUnmounted(() => {
-    clearScroll()
-    clearSearchTimer()
-})
-</script>
-
-<style scoped>
-@import './table.css';
-</style>
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart3.vue b/src/views/SmartScreen/QualityScreen/charts/chart3.vue
deleted file mode 100644
index 5c62650..0000000
--- a/src/views/SmartScreen/QualityScreen/charts/chart3.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<!-- 今日工单 -->
-<template>
-    <div>
-        <div class="title">昨日FQC列表</div>
-        <el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
-            <el-table-column prop="lineCode" label="产线" :show-overflow-tooltip="true" />
-            <el-table-column prop="defectDesciption" label="描述" :show-overflow-tooltip="true" />
-            <el-table-column prop="defectQuantity" label="数量" :show-overflow-tooltip="true" />
-        </el-table>
-    </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance()
-import { getMoudle08 } from '@/api/smartScreen/QualityScreen/index.js'
-const loading = ref(false)
-const dataList = ref([])
-function getList() {
-    getMoudle08().then((res) => {
-        const { code, data } = res
-        if (code == 200) {
-            dataList.value = data
-        }
-    })
-}
-// 查询
-function handleQuery() {
-    getList()
-}
-handleQuery()
-// 自动获取数据
-let timer1 = null
-const clearSearchTimer = () => {
-    clearInterval(timer1)
-    timer1 = null
-}
-const createSearchTimer = () => {
-    clearSearchTimer()
-    timer1 = setInterval(() => {
-        handleQuery()
-    }, 1000 * 60 * 5)
-}
-
-// 自动滚动
-let timer2 = null
-let tableRef = ref(null)
-
-const clearScroll = () => {
-    clearInterval(timer2)
-    timer2 = null
-}
-const createScroll = () => {
-    clearScroll()
-    // 拿到 table
-    const _table = tableRef.value.layout.table.refs
-    // // 拿到可以滚动的元素
-    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
-    timer2 = setInterval(() => {
-        tableWrapper.scrollTop += 1
-        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
-        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
-            tableWrapper.scrollTop = 0
-        }
-    }, 100)
-}
-
-onMounted(() => {
-    createSearchTimer()
-    createScroll()
-})
-onUnmounted(() => {
-    clearScroll()
-    clearSearchTimer()
-})
-</script>
-
-<style scoped>
-@import './table.css';
-</style>
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart4.vue b/src/views/SmartScreen/QualityScreen/charts/chart4.vue
index 5620a74..902c2dd 100644
--- a/src/views/SmartScreen/QualityScreen/charts/chart4.vue
+++ b/src/views/SmartScreen/QualityScreen/charts/chart4.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '400px'
+        default: '40vh'
     }
 })
 const options = {
@@ -47,15 +47,15 @@ const options = {
             name: '参数1',
             type: 'pie',
             data: [],
-            radius: ['50%', '80%'],
+            radius: ['50%', '70%'],
             avoidLabelOverlap: false,
             padAngle: 5,
             label: {
                 position: 'outside',
-                formatter: '{b}\n{d}%',
+                formatter: '{b}-{c}\n{d}%',
                 textBorderColor: '#fff',
                 textBorderWidth: 0,
-                fontSize: 24,
+                fontSize: '2vh',
                 color: '#fff'
             }
         }
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart5.vue b/src/views/SmartScreen/QualityScreen/charts/chart5.vue
index c6fecaf..3ec78c4 100644
--- a/src/views/SmartScreen/QualityScreen/charts/chart5.vue
+++ b/src/views/SmartScreen/QualityScreen/charts/chart5.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '400px'
+        default: '40vh'
     }
 })
 const options = {
@@ -47,15 +47,15 @@ const options = {
             name: '参数1',
             type: 'pie',
             data: [],
-            radius: ['50%', '80%'],
+            radius: ['50%', '70%'],
             avoidLabelOverlap: false,
             padAngle: 5,
             label: {
                 position: 'outside',
-                formatter: '{b}\n{d}%',
+                formatter: '{b}-{c}\n{d}%',
                 textBorderColor: '#fff',
                 textBorderWidth: 0,
-                fontSize: 24,
+                fontSize: '2vh',
                 color: '#fff'
             }
         }
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart6.vue b/src/views/SmartScreen/QualityScreen/charts/chart6.vue
deleted file mode 100644
index 74ffd8a..0000000
--- a/src/views/SmartScreen/QualityScreen/charts/chart6.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <div ref="chartRef" :style="{ height: height, width: width }" />
-</template>
-
-<script setup>
-import { getCurrentInstance, watch, onMounted, ref } from 'vue'
-import * as echarts from 'echarts'
-import theme from '../theme/qc.json'
-echarts.registerTheme('theme', theme)
-import { CanvasRenderer } from 'echarts/renderers'
-echarts.use([CanvasRenderer])
-const { proxy } = getCurrentInstance()
-const chartRef = ref(null)
-const props = defineProps({
-    width: {
-        type: String,
-        default: '100%'
-    },
-    height: {
-        type: String,
-        default: '350px'
-    }
-})
-const options = {
-    title: {
-        text: '',
-        left: 'left'
-    },
-    legend: {
-        type: 'scroll',
-        orient: 'vertical',
-        bottom: 0,
-        left: 0,
-        height: 200,
-        textStyle: {
-            color: '#fff'
-        }
-    },
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow'
-        }
-    },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    series: [
-        {
-            name: '缺陷数',
-            type: 'pie',
-            data: [
-                { value: 1048, name: '模块1' },
-                { value: 735, name: '模块2' },
-                { value: 580, name: '模块3' },
-                { value: 484, name: '模块4' },
-                { value: 300, name: '模块5' }
-            ],
-            label: {
-                position: 'outside',
-                formatter: '{b}-{c}\n{d}%',
-                textBorderColor: '#fff',
-                textBorderWidth: 0,
-                color: '#fff'
-            }
-        }
-    ]
-}
-const chart = ref(null)
-function initChart() {
-    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
-    chart.value.setOption(options)
-}
-onMounted(() => {
-    initChart()
-    window.addEventListener('resize', () => {
-        chart.value?.resize()
-    })
-})
-/// ============ 修改数据 ===========
-import { getMoudle09 } from '@/api/smartScreen/QualityScreen/index.js'
-function updateData() {
-    getMoudle09().then((res) => {
-        if (res.code === 200) {
-            options.title = res.data.title
-            let _series = res.data.series
-            // _series.forEach((item) => {
-            //     item.label = {
-            //         // 设置label在扇区内部
-            //         position: 'inner',
-            //         // 自定义显示格式，{b}表示名称，{d}表示百分比
-            //         formatter: '{b}\n{d}%'
-            //     }
-            // })
-            options.series = _series
-            chart.value.setOption(options)
-            // console.log(res.data.title.text, res.data)
-        }
-    })
-}
-function handleQuery() {
-    updateData()
-}
-handleQuery()
-let timer1 = null
-const clearSearchTimer = () => {
-    clearInterval(timer1)
-    timer1 = null
-}
-const createSearchTimer = () => {
-    clearSearchTimer()
-    timer1 = setInterval(() => {
-        handleQuery()
-    }, 1000 * 60 * 5)
-}
-onMounted(() => {
-    createSearchTimer()
-})
-onUnmounted(() => {
-    clearSearchTimer()
-})
-/// ==========================================
-</script>
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart7.vue b/src/views/SmartScreen/QualityScreen/charts/chart7.vue
deleted file mode 100644
index 3ebb53d..0000000
--- a/src/views/SmartScreen/QualityScreen/charts/chart7.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <div ref="chartRef" :style="{ height: height, width: width }" />
-</template>
-
-<script setup>
-import { getCurrentInstance, watch, onMounted, ref } from 'vue'
-import * as echarts from 'echarts'
-import theme from '../theme/qc.json'
-echarts.registerTheme('theme', theme)
-import { CanvasRenderer } from 'echarts/renderers'
-echarts.use([CanvasRenderer])
-const { proxy } = getCurrentInstance()
-const chartRef = ref(null)
-const props = defineProps({
-    width: {
-        type: String,
-        default: '100%'
-    },
-    height: {
-        type: String,
-        default: '350px'
-    }
-})
-let options = {
-    title: {
-        text: '',
-        left: 'left'
-    },
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow'
-        }
-    },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    xAxis: {
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-        boundaryGap: true,
-        axisTick: {
-            show: false
-        }
-    },
-    yAxis: {
-        type: 'value',
-        axisTick: {
-            show: false
-        }
-    },
-    // 图例
-    legend: {
-        data: ['缺陷数']
-    },
-    series: [
-        {
-            name: '缺陷数',
-            type: 'line',
-            data: [1, 2, 3, 4, 5, 6, 7],
-            label: {
-                show: true,
-                position: 'outside',
-                textBorderColor: '#fff',
-                textBorderWidth: 0,
-                color: '#fff'
-            }
-        }
-    ]
-}
-
-const chart = ref(null)
-function initChart() {
-    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
-    chart.value.setOption(options)
-}
-onMounted(() => {
-    initChart()
-    window.addEventListener('resize', () => {
-        chart.value?.resize()
-    })
-})
-/// ============ 修改数据 ===========
-import { getMoudle04 } from '@/api/smartScreen/QualityScreen/index.js'
-function updateData() {
-    getMoudle04().then((res) => {
-        if (res.code === 200) {
-            options.title = res.data.title
-            options.xAxis.data = res.data.xAxis.data
-            options.series = res.data.series
-            chart.value.setOption(options)
-            // console.log(res.data.title.text, res.data)
-        }
-    })
-}
-function handleQuery() {
-    updateData()
-}
-handleQuery()
-let timer1 = null
-const clearSearchTimer = () => {
-    clearInterval(timer1)
-    timer1 = null
-}
-const createSearchTimer = () => {
-    clearSearchTimer()
-    timer1 = setInterval(() => {
-        handleQuery()
-    }, 1000 * 60 * 5)
-}
-onMounted(() => {
-    createSearchTimer()
-})
-onUnmounted(() => {
-    clearSearchTimer()
-})
-/// ==========================================
-</script>
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart8.vue b/src/views/SmartScreen/QualityScreen/charts/chart8.vue
deleted file mode 100644
index 5dde905..0000000
--- a/src/views/SmartScreen/QualityScreen/charts/chart8.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-    <div ref="chartRef" :style="{ height: height, width: width }" />
-</template>
-
-<script setup>
-import { getCurrentInstance, watch, onMounted, ref } from 'vue'
-import * as echarts from 'echarts'
-import theme from '../theme/qc.json'
-echarts.registerTheme('theme', theme)
-import { CanvasRenderer } from 'echarts/renderers'
-echarts.use([CanvasRenderer])
-const { proxy } = getCurrentInstance()
-const chartRef = ref(null)
-const props = defineProps({
-    width: {
-        type: String,
-        default: '100%'
-    },
-    height: {
-        type: String,
-        default: '350px'
-    }
-})
-let options = {
-    title: {
-        text: '前7日IPQC缺陷数量直方图',
-        left: 'left'
-    },
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow'
-        }
-    },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    xAxis: {
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-        boundaryGap: true,
-        axisTick: {
-            show: false
-        }
-    },
-    yAxis: {
-        type: 'value',
-        axisTick: {
-            show: false
-        }
-    },
-    // 图例
-    legend: {
-        data: ['缺陷数']
-    },
-    series: [
-        {
-            name: '缺陷数',
-            type: 'line',
-            data: [1, 2, 3, 4, 5, 6, 7],
-            label: {
-                show: true,
-                position: 'outside',
-                textBorderColor: '#fff',
-                textBorderWidth: 0,
-                color: '#fff'
-            }
-        }
-    ]
-}
-
-const chart = ref(null)
-function initChart() {
-    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
-    chart.value.setOption(options)
-}
-onMounted(() => {
-    initChart()
-    window.addEventListener('resize', () => {
-        chart.value?.resize()
-    })
-})
-/// ============ 修改数据 ===========
-import { getMoudle07 } from '@/api/smartScreen/QualityScreen/index.js'
-function updateData() {
-    getMoudle07().then((res) => {
-        if (res.code === 200) {
-            options.title = res.data.title
-            options.xAxis.data = res.data.xAxis.data
-            options.series = res.data.series
-            chart.value.setOption(options)
-        }
-    })
-}
-function handleQuery() {
-    updateData()
-}
-handleQuery()
-let timer1 = null
-const clearSearchTimer = () => {
-    clearInterval(timer1)
-    timer1 = null
-}
-const createSearchTimer = () => {
-    clearSearchTimer()
-    timer1 = setInterval(() => {
-        handleQuery()
-    }, 1000 * 60 * 5)
-}
-onMounted(() => {
-    createSearchTimer()
-})
-onUnmounted(() => {
-    clearSearchTimer()
-})
-/// ==========================================
-</script>
diff --git a/src/views/SmartScreen/QualityScreen/charts/chart9.vue b/src/views/SmartScreen/QualityScreen/charts/chart9.vue
index a06ab54..b26ed92 100644
--- a/src/views/SmartScreen/QualityScreen/charts/chart9.vue
+++ b/src/views/SmartScreen/QualityScreen/charts/chart9.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '400px'
+        default: '35vh'
     }
 })
 let options = {
@@ -39,7 +39,7 @@ let options = {
         containLabel: true
     },
     xAxis: {
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        data: [],
         boundaryGap: true,
         axisTick: {
             show: false
@@ -62,7 +62,7 @@ let options = {
         {
             name: '',
             type: 'bar',
-            data: [1, 2, 3, 4, 5, 6, 7]
+            data: []
         }
     ]
 }
@@ -88,14 +88,15 @@ function updateData() {
             _series.forEach((item) => {
                 item.stack = 'group'
                 item.emphasis = { focus: 'series' }
-                // item.label = {
-                //     show: true,
-                //     position: 'inside',
-                //     textBorderColor: '#fff',
-                //     textBorderWidth: 0,
-                //     formatter: '{c}',
-                //     color: '#fff'
-                // }
+                item.label = {
+                    show: true,
+                    position: 'outside',
+                    textBorderColor: '#fff',
+                    textBorderWidth: 0,
+                    formatter: '{c}',
+                    fontSize: '2vh',
+                    color: '#fff'
+                }
             })
             options.series = _series
             chart.value?.setOption(options)
diff --git a/src/views/SmartScreen/QualityScreen/index.css b/src/views/SmartScreen/QualityScreen/index.css
index 4a94087..9828614 100644
--- a/src/views/SmartScreen/QualityScreen/index.css
+++ b/src/views/SmartScreen/QualityScreen/index.css
@@ -21,13 +21,38 @@ body {
     border: 2px solid #a9aabc;
 }
 .screen {
-    padding: 0;
+    box-sizing: border-box;
+    padding: 20px; /* Default padding */
     margin: 0;
     width: 100%;
     height: 100%;
     color: #eeeeee;
     background-color: rgba(32, 163, 250, 0.2);
 }
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .screen {
+        padding: 10px;
+    }
+}
+
+@media (max-width: 992px) {
+    .screen {
+        padding: 5px;
+    }
+}
+
+@media (max-width: 768px) {
+    .screen {
+        padding: 5px;
+    }
+}
+
+@media (max-width: 576px) {
+    .screen {
+        padding: 2px;
+    }
+}
 .screen .header {
     /* width: 100%;
     height: 100px;
@@ -41,12 +66,6 @@ body {
     font-weight: 700;
     color: #eeeeee;
 }
-.screen .back {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    color: #eeeeee;
-}
 .body {
     display: flex;
     flex-direction: column;
diff --git a/src/views/SmartScreen/QualityScreen/index.vue b/src/views/SmartScreen/QualityScreen/index.vue
index 7f8645a..1f83bdd 100644
--- a/src/views/SmartScreen/QualityScreen/index.vue
+++ b/src/views/SmartScreen/QualityScreen/index.vue
@@ -1,109 +1,67 @@
 <template>
-    <div class="screen">
-        <div class="background"></div>
-        <div class="back" @click="$router.go(-1)">
-            <el-icon><ArrowLeftBold /></el-icon>
-        </div>
-        <div>
-            <kbLogo></kbLogo>
-            <kbTime></kbTime>
-        </div>
-        <div class="header">
-            <kbHeader>车间质量看板</kbHeader>
-        </div>
-        <div class="body">
-            <el-row :gutter="5">
-                <!-- <el-col :span="24">
-                    <dv-border-box12 class="box">
-                        <div>
-                            <chart1></chart1>
-                        </div>
-                    </dv-border-box12>
-                </el-col> -->
-                <!-- <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart2></chart2>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart3></chart3>
-                        </div>
-                    </dv-border-box12>
-                </el-col> -->
-            </el-row>
+    <kbFullScreenBox>
+        <div class="screen">
+            <div class="header">
+                <kbHeader>车间质量看板</kbHeader>
+            </div>
             <kbGap></kbGap>
-            <el-row :gutter="20">
-                <el-col :span="8">
-                    <kbChartBox>
-                        <kbTitle>本周异常分布比例饼图</kbTitle>
-                        <chart4></chart4>
-                    </kbChartBox>
-                </el-col>
-                <el-col :span="8">
-                    <kbCountBox>
-                        <div class="top">
-                            <el-row :gutter="20">
-                                <el-col :span="12" v-for="(value, key, index) in topData" :key="index" style="margin-bottom: 10px">
-                                    <kbNumBox class="num-item">
-                                        <div class="num-title">{{ topTitleOptions[index] }}</div>
-                                        <div class="num-value">{{ value }}</div>
-                                    </kbNumBox>
-                                </el-col>
-                            </el-row>
-                        </div>
-                    </kbCountBox>
-                </el-col>
-                <el-col :span="8">
-                    <kbChartBox>
-                        <kbTitle>本月异常分布Top10比例饼图</kbTitle>
-                        <chart5></chart5>
-                    </kbChartBox>
-                </el-col>
-            </el-row>
             <kbGap></kbGap>
-            <el-row :gutter="20">
-                <!-- <el-col :span="8">
-                    <dv-border-box12 class="box">
-                        <div>
-                            <chart7></chart7>
-                        </div>
-                    </dv-border-box12>
-                </el-col>
-                <el-col :span="8"
-                    ><dv-border-box12 class="box">
-                        <div>
-                            <chart8></chart8>
-                        </div>
-                    </dv-border-box12>
-                </el-col> -->
-
-                <el-col :span="24">
-                    <kbChartBox>
-                        <kbTitle>本月异常柱状图</kbTitle>
-                        <chart9></chart9>
-                    </kbChartBox>
-                </el-col>
-                <el-col :span="24">
-                    <kbChartBox>
-                        <kbTitle>本月合格率趋势图</kbTitle>
-                        <chart10></chart10>
-                    </kbChartBox>
-                </el-col>
-            </el-row>
+            <div class="body">
+                <el-row :gutter="20">
+                    <el-col :span="7">
+                        <kbChartBox>
+                            <kbTitle>本周异常分布比例饼图</kbTitle>
+                            <chart4></chart4>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="10">
+                        <kbCountBox>
+                            <div class="top">
+                                <el-row :gutter="0">
+                                    <el-col :span="12" v-for="(value, key, index) in topData" :key="index" style="margin-bottom: 10px">
+                                        <div class="qc-num-item-box">
+                                            <kbNumBox>
+                                                <div class="qc-num-item-title">{{ topTitleOptions[index] }}</div>
+                                                <div :class="`qc-num-item-value ${changeUpDownValue(topTitleOptions[index], value)}`">{{ value }}</div>
+                                            </kbNumBox>
+                                        </div>
+                                    </el-col>
+                                </el-row>
+                            </div>
+                        </kbCountBox>
+                    </el-col>
+                    <el-col :span="7">
+                        <kbChartBox>
+                            <kbTitle>本月异常分布比例饼图</kbTitle>
+                            <chart5></chart5>
+                        </kbChartBox>
+                    </el-col>
+                </el-row>
+                <kbGap></kbGap>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <kbChartBox>
+                            <kbTitle>本月异常柱状图</kbTitle>
+                            <chart9></chart9>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="12">
+                        <kbChartBox>
+                            <kbTitle>本月合格率趋势图</kbTitle>
+                            <chart10></chart10>
+                        </kbChartBox>
+                    </el-col>
+                </el-row>
+            </div>
         </div>
-    </div>
+    </kbFullScreenBox>
 </template>
 
 <script setup>
 /// ================ 基础组件导入 ======================
+import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
 import kbGap from '../可视化素材包/components/kbGap.vue'
 import kbHeader from '../可视化素材包/components/kbHeader.vue'
-import kbTime from '../可视化素材包/components/kbTime.vue'
-import kbLogo from '../可视化素材包/components/kbLogo.vue'
 import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
 import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
 import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
@@ -111,15 +69,8 @@ import kbTitle from '../可视化素材包/components/kbTitle.vue'
 /// ================================================
 
 /// ================== 图表组件导入 ======================
-// import barChart1 from './charts/BarChart.vue'
-// import chart1 from './charts/chart1.vue'
-// import chart2 from './charts/chart2.vue'
-// import chart3 from './charts/chart3.vue'
 import chart4 from './charts/chart4.vue'
 import chart5 from './charts/chart5.vue'
-// import chart6 from './charts/chart6.vue'
-// import chart7 from './charts/chart7.vue'
-// import chart8 from './charts/chart8.vue'
 import chart9 from './charts/chart9.vue'
 import chart10 from './charts/chart10.vue'
 /// ====================================================
@@ -129,7 +80,16 @@ const { proxy } = getCurrentInstance()
 
 /// =================== 获取工单数据 ======================
 import { getTopData } from '@/api/smartScreen/QualityScreen/index.js'
-const topTitleOptions = ref(['本月质量异常数', '本周质量异常数', '本月合格率', '本周合格率'])
+const topTitleOptions = ref([
+    '本月质量异常数',
+    '本周质量异常数',
+    '本月合格率',
+    '本周合格率',
+    '本月合格率同比增长',
+    '本周合格率同比增长',
+    '本月订单数',
+    '本周订单数'
+])
 const topData = ref({})
 function initData() {
     getTopData().then((res) => {
@@ -137,6 +97,17 @@ function initData() {
     })
 }
 initData()
+
+function changeUpDownValue(title, value) {
+    if (title.includes('同比增长')) {
+        if (value.includes('-')) {
+            return 'down'
+        } else {
+            return 'up'
+        }
+    }
+}
+
 let timer1 = null
 const clearSearchTimer = () => {
     clearInterval(timer1)
@@ -159,44 +130,56 @@ onUnmounted(() => {
 
 <style scoped>
 @import './index.css';
-.box8 {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
 .top {
-    height: 100%;
+    height: 4rem;
 }
-.num-item {
-    margin-bottom: 10px;
-    padding: 10px;
+
+.qc-num-item-box {
+    padding-top: 1vh;
+    padding-left: 4vh;
+    padding-right: 4vh;
     width: 100%;
-    height: 100px;
+    height: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
 }
-.num-title {
-    width: 100%;
-    font-size: 30px;
+.qc-num-item-title {
+    color: #ffffff; /* 白色 */
+    font-size: 3vh;
     font-weight: bold;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 阴影效果 */
+    -webkit-text-stroke: 1px #000; /* 描边效果 */
 }
-.num-value {
-    width: 100%;
-    font-size: 40px;
+
+.qc-num-item-value {
+    color: #ffd700; /* 数字颜色：金色 */
+    font-size: 3vh;
     font-weight: 800;
-    background-clip: text;
-    -webkit-background-clip: text; /* 仅将背景应用于文本 */
-    -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
-    color: transparent; /* 兼容非WebKit浏览器 */
-    background-image: linear-gradient(65deg, #0072ff 0%, #00eaff 50%, #01aaff 100%);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
+    text-align: center;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 阴影效果 */
+}
+.qc-num-item-value.up::before {
+    content: '\25B2'; /* 向上的三角形 */
+    color: #66ff33;
+    margin-right: 5px;
+}
+.qc-num-item-value.up {
+    color: #66ff33;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+}
+.qc-num-item-value.down::before {
+    content: '\25BC'; /* 向下的三角形 */
+    color: #ff3300;
+    margin-right: 5px;
+}
+.qc-num-item-value.down {
+    color: #ff3300;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
 }
 </style>
diff --git a/src/views/SmartScreen/QualityScreen/theme/qc.json b/src/views/SmartScreen/QualityScreen/theme/qc.json
index 4429e0d..37f9e22 100644
--- a/src/views/SmartScreen/QualityScreen/theme/qc.json
+++ b/src/views/SmartScreen/QualityScreen/theme/qc.json
@@ -1,26 +1,26 @@
 {
     "color": [
-        "#c1232b",
-        "#27727b",
-        "#fcce10",
-        "#e87c25",
-        "#b5c334",
-        "#fe8463",
-        "#9bca63",
-        "#fad860",
-        "#f3a43b",
-        "#60c0dd",
-        "#d7504b",
-        "#c6e579",
-        "#f4e001",
-        "#f0805a",
-        "#26c0c0",
-        "#d851cc",
-        "#b91dd8",
-        "#2418ea",
-        "#696969",
-        "#060606",
-        "#9c3f3f"
+        "#FF4444",
+        "#0077CC",
+        "#FFAA00",
+        "#00A874",
+        "#A020F0",
+        "#FF6B6B",
+        "#00CED1",
+        "#FFD700",
+        "#FF69B4",
+        "#32CD32",
+        "#8A2BE2",
+        "#FF6347",
+        "#1E90FF",
+        "#7CFC00",
+        "#FF1493",
+        "#00FF7F",
+        "#9400D3",
+        "#FF8C00",
+        "#00FF00",
+        "#4B0082",
+        "#FF0000"
     ],
     "backgroundColor": "rgba(0,0,0,0)",
     "textStyle": {},
diff --git a/src/views/SmartScreen/ReportScreen/charts/chart1.vue b/src/views/SmartScreen/ReportScreen/charts/chart1.vue
index 4a164fd..9f1163f 100644
--- a/src/views/SmartScreen/ReportScreen/charts/chart1.vue
+++ b/src/views/SmartScreen/ReportScreen/charts/chart1.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '350px'
+        default: '30vh'
     }
 })
 let options = {
diff --git a/src/views/SmartScreen/ReportScreen/charts/chart2.vue b/src/views/SmartScreen/ReportScreen/charts/chart2.vue
index b9ac4e4..d363bb7 100644
--- a/src/views/SmartScreen/ReportScreen/charts/chart2.vue
+++ b/src/views/SmartScreen/ReportScreen/charts/chart2.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '350px'
+        default: '30vh'
     }
 })
 let options = {
diff --git a/src/views/SmartScreen/ReportScreen/charts/chart3.vue b/src/views/SmartScreen/ReportScreen/charts/chart3.vue
index 887930e..f92d36b 100644
--- a/src/views/SmartScreen/ReportScreen/charts/chart3.vue
+++ b/src/views/SmartScreen/ReportScreen/charts/chart3.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '350px'
+        default: '30vh'
     }
 })
 let options = {
diff --git a/src/views/SmartScreen/ReportScreen/charts/chart4.vue b/src/views/SmartScreen/ReportScreen/charts/chart4.vue
index 1138d03..9583ced 100644
--- a/src/views/SmartScreen/ReportScreen/charts/chart4.vue
+++ b/src/views/SmartScreen/ReportScreen/charts/chart4.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '300px'
+        default: '40vh'
     }
 })
 let options = {
diff --git a/src/views/SmartScreen/ReportScreen/charts/chart5.vue b/src/views/SmartScreen/ReportScreen/charts/chart5.vue
index 4ef012c..75d7936 100644
--- a/src/views/SmartScreen/ReportScreen/charts/chart5.vue
+++ b/src/views/SmartScreen/ReportScreen/charts/chart5.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '300px'
+        default: '40vh'
     }
 })
 let options = {
diff --git a/src/views/SmartScreen/ReportScreen/index.vue b/src/views/SmartScreen/ReportScreen/index.vue
index 9d40bd4..3e4a49a 100644
--- a/src/views/SmartScreen/ReportScreen/index.vue
+++ b/src/views/SmartScreen/ReportScreen/index.vue
@@ -1,29 +1,22 @@
 <template>
-    <div class="screen">
-        <div class="background"></div>
-        <div class="back" @click="$router.go(-1)">
-            <el-icon>
-                <ArrowLeftBold />
-            </el-icon>
-        </div>
-        <div>
-            <kbLogo></kbLogo>
-            <kbTime></kbTime>
-        </div>
-        <div class="header">
-            <kbHeader>车间生产看板</kbHeader>
-        </div>
-        <kbGap></kbGap>
-        <div class="body">
-            <kbCountBox>
-                <el-row :gutter="20">
-                    <el-col :span="4" v-for="(value, key, index) in orderData" :key="index">
-                        <kbNumBox class="num-item">
-                            <div class="num-title">{{ orderTitleList[index] }}</div>
-                            <div class="num-value">{{ value }}</div>
-                        </kbNumBox>
-                    </el-col>
-                    <!-- <el-col :span="4">
+    <kbFullScreenBox>
+        <div class="screen">
+            <div class="background"></div>
+            <div class="header">
+                <kbHeader>车间生产看板</kbHeader>
+            </div>
+            <kbGap></kbGap>
+            <kbGap></kbGap>
+            <div class="body">
+                <kbCountBox>
+                    <el-row :gutter="20">
+                        <el-col :span="4" v-for="(value, key, index) in orderData" :key="index">
+                            <kbNumBox class="num-item">
+                                <div class="num-title">{{ orderTitleList[index] }}</div>
+                                <div class="num-value">{{ value }}</div>
+                            </kbNumBox>
+                        </el-col>
+                        <!-- <el-col :span="4">
                         <div class="num-item">
                             <div class="num-title">今日物料领用</div>
                             <div class="num-value">{{ orderData.materialRequisitionQuantity }} 个</div>
@@ -53,52 +46,51 @@
                             <div class="num-value">{{ orderData.groupQuantity }} 组</div>
                         </div>
                     </el-col> -->
+                    </el-row>
+                </kbCountBox>
+                <kbGap></kbGap>
+                <el-row :gutter="5">
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <chart1></chart1>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <chart2></chart2>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="8">
+                        <kbChartBox>
+                            <chart3></chart3>
+                        </kbChartBox>
+                    </el-col>
                 </el-row>
-            </kbCountBox>
-            <kbGap></kbGap>
-            <el-row :gutter="5">
-                <el-col :span="8">
-                    <kbChartBox>
-                        <chart1></chart1>
-                    </kbChartBox>
-                </el-col>
-                <el-col :span="8">
-                    <kbChartBox>
-                        <chart2></chart2>
-                    </kbChartBox>
-                </el-col>
-                <el-col :span="8">
-                    <kbChartBox>
-                        <chart3></chart3>
-                    </kbChartBox>
-                </el-col>
-            </el-row>
-            <kbGap></kbGap>
-            <el-row :gutter="5">
-                <el-col :span="24">
-                    <kbChartBox>
-                        <chart4></chart4>
-                    </kbChartBox>
-                </el-col>
-            </el-row>
-            <kbGap></kbGap>
-            <el-row :gutter="5">
-                <el-col :span="24">
-                    <kbChartBox>
-                        <chart5></chart5>
-                    </kbChartBox>
-                </el-col>
-            </el-row>
+                <kbGap></kbGap>
+                <el-row :gutter="5">
+                    <el-col :span="12">
+                        <kbChartBox>
+                            <chart4></chart4>
+                        </kbChartBox>
+                    </el-col>
+                    <el-col :span="12">
+                        <kbChartBox>
+                            <chart5></chart5>
+                        </kbChartBox>
+                    </el-col>
+                </el-row>
+                <kbGap></kbGap>
+                <el-row :gutter="5"> </el-row>
+            </div>
         </div>
-    </div>
+    </kbFullScreenBox>
 </template>
 
 <script setup>
 /// ================ 基础组件导入 ======================
+import kbFullScreenBox from '../可视化素材包/components/kbFullScreenBox.vue'
 import kbGap from '../可视化素材包/components/kbGap.vue'
 import kbHeader from '../可视化素材包/components/kbHeader.vue'
-import kbTime from '../可视化素材包/components/kbTime.vue'
-import kbLogo from '../可视化素材包/components/kbLogo.vue'
 import kbChartBox from '../可视化素材包/components/kbChartBox.vue'
 import kbCountBox from '../可视化素材包/components/kbCountBox.vue'
 import kbNumBox from '../可视化素材包/components/kbNumBox.vue'
@@ -173,7 +165,6 @@ onUnmounted(() => {
 
 .num-item {
     /* border: #0072ff 1px solid; */
-    padding: 10px;
     width: 100%;
     height: 80px;
     display: flex;
@@ -183,7 +174,7 @@ onUnmounted(() => {
 }
 
 .num-title {
-    font-size: 30px;
+    font-size: 3vh;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -191,7 +182,7 @@ onUnmounted(() => {
 }
 
 .num-value {
-    font-size: 40px;
+    font-size: 4vh;
     font-weight: 800;
     background-clip: text;
     -webkit-background-clip: text;
diff --git a/src/views/SmartScreen/index.vue b/src/views/SmartScreen/index.vue
index f574d0b..6e177c3 100644
--- a/src/views/SmartScreen/index.vue
+++ b/src/views/SmartScreen/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-carousel class="main-box border" height="100%" :autoplay="true" :interval="30000">
+    <el-carousel class="main-box" height="100%" :autoplay="true" :interval="10000">
         <el-carousel-item :key="1">
             <OrderScreen style="height: 100%"></OrderScreen>
         </el-carousel-item>
@@ -9,6 +9,9 @@
         <el-carousel-item :key="3">
             <QualityScreen style="height: 100%"></QualityScreen>
         </el-carousel-item>
+        <el-carousel-item :key="4">
+            <DeviceScreen style="height: 100%"></DeviceScreen>
+        </el-carousel-item>
     </el-carousel>
 </template>
 
@@ -16,6 +19,7 @@
 import { default as OrderScreen } from '@/views/SmartScreen/OrderScreen/index'
 import { default as ReportScreen } from '@/views/SmartScreen/ReportScreen/index'
 import { default as QualityScreen } from '@/views/SmartScreen/QualityScreen/index'
+import { default as DeviceScreen } from '@/views/SmartScreen/DeviceScreen/index'
 // 设备大屏
 // import { default as AndonFullScreen } from '@/views/andonManagement/analysis/fullscreen/index'
 // Andon大屏
@@ -28,4 +32,28 @@ const { proxy } = getCurrentInstance()
     width: 100%;
     height: 100%;
 }
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .el-carousel__item {
+        padding: 20px;
+    }
+}
+
+@media (max-width: 992px) {
+    .el-carousel__item {
+        padding: 15px;
+    }
+}
+
+@media (max-width: 768px) {
+    .el-carousel__item {
+        padding: 10px;
+    }
+}
+
+@media (max-width: 576px) {
+    .el-carousel__item {
+        padding: 5px;
+    }
+}
 </style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbBack.vue b/src/views/SmartScreen/可视化素材包/components/kbBack.vue
new file mode 100644
index 0000000..43db14f
--- /dev/null
+++ b/src/views/SmartScreen/可视化素材包/components/kbBack.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="kb-back" @click="handlerBack">
+        <el-icon><ArrowLeftBold /></el-icon>
+    </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
+const { proxy } = getCurrentInstance()
+function handlerBack() {
+    proxy.$router.push('/')
+}
+</script>
+
+<style scoped>
+.kb-back {
+    float: left;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    font-size: 2vh;
+    color: #eeeeee;
+    z-index: 200;
+}
+</style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbChartBox.vue b/src/views/SmartScreen/可视化素材包/components/kbChartBox.vue
index bd940ef..7abb2f9 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbChartBox.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbChartBox.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="box" :style="`width:${props.width};height:${props.height}`">
-        <div class="box-item"><slot></slot></div>
+    <div class="kb-chart-box" :style="`width:${props.width};height:${props.height}`">
+        <div class="kb-chart-box-item"><slot></slot></div>
     </div>
 </template>
 
@@ -21,7 +21,7 @@ const props = defineProps({
 </script>
 
 <style scoped>
-.box {
+.kb-chart-box {
     width: 100%;
     height: 100%;
     display: flex;
@@ -30,12 +30,9 @@ const props = defineProps({
     background-image: url('../3-组件背景图/41.png');
     background-size: 100% 100%;
 }
-.box-item {
-    margin: 10px;
+.kb-chart-box-item {
     width: 100%;
     height: 100%;
-    min-width: 200px;
-    min-height: 200px;
     font-family: '思源黑体';
 }
 </style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbCountBox.vue b/src/views/SmartScreen/可视化素材包/components/kbCountBox.vue
index df80463..877bb7b 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbCountBox.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbCountBox.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="box" :style="`width:${props.width};height:${props.height}`">
-        <div class="box-item"><slot></slot></div>
+    <div class="kb-count-box" :style="`width:${props.width};height:${props.height}`">
+        <div class="kb-count-box-item"><slot></slot></div>
     </div>
 </template>
 
@@ -21,7 +21,7 @@ const props = defineProps({
 </script>
 
 <style scoped>
-.box {
+.kb-count-box {
     width: 100%;
     height: 100%;
     display: flex;
@@ -30,8 +30,7 @@ const props = defineProps({
     background-image: url('../3-组件背景图/41.png');
     background-size: 100% 100%;
 }
-.box-item {
-    margin: 20px;
+.kb-count-box-item {
     width: 100%;
     height: 100%;
     font-family: '思源黑体';
diff --git a/src/views/SmartScreen/可视化素材包/components/kbFullScreenBox.vue b/src/views/SmartScreen/可视化素材包/components/kbFullScreenBox.vue
new file mode 100644
index 0000000..44e690d
--- /dev/null
+++ b/src/views/SmartScreen/可视化素材包/components/kbFullScreenBox.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="kb-fullScreenBox">
+        <div class="kb-background"></div>
+        <slot></slot>
+    </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
+// const { proxy } = getCurrentInstance()
+// function setRem() {
+//     const designWidth = 1920 // 设计稿宽度（如 1920px）
+//     const baseSize = 100 // 根字体基准值（1rem = 100px 时，设计稿 1920px 对应 19.2rem）
+//     const html = document.documentElement
+//     const width = window.innerWidth
+//     const rem = (width / designWidth) * baseSize
+//     html.style.fontSize = `${rem}px` // 动态计算根字体大小
+// }
+// window.addEventListener('resize', setRem)
+// setRem() // 初始化
+</script>
+
+<style scoped>
+.kb-fullScreenBox {
+    padding: 0;
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.kb-fullScreenBox::-webkit-scrollbar {
+    display: none;
+}
+/* 在父组件中限制 slot 内容的尺寸 */
+.kb-fullScreenBox > :deep(*) {
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+}
+.kb-background {
+    padding: 0;
+    margin: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    /* background: url('./background/2.png') no-repeat; */
+    background-size: 100% 100%;
+    -webkit-filter: brightness(0.1);
+    filter: brightness(0.1);
+    z-index: -1;
+}
+</style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbGap.vue b/src/views/SmartScreen/可视化素材包/components/kbGap.vue
index b40b8e8..f200d3e 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbGap.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbGap.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="box"></div>
+    <div class="kb-gap-box"></div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-.box {
+.kb-gap-box {
     width: 100%;
-    height: 5px;
+    height: 1vh;
 }
 </style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbHeader.vue b/src/views/SmartScreen/可视化素材包/components/kbHeader.vue
index c9d9bd6..94d8025 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbHeader.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbHeader.vue
@@ -1,23 +1,47 @@
 <template>
-    <div class="header">
-        <span class="title"><slot></slot></span>
+    <div class="kb-header-box">
+        <div class="kb-util-box">
+            <kbBack></kbBack>
+            <kbLogo></kbLogo>
+            <kbTime></kbTime>
+        </div>
+        <div class="kb-header">
+            <span class="kb-header-title"><slot></slot></span>
+        </div>
     </div>
 </template>
 
-<script></script>
+<script setup>
+import kbTime from './kbTime.vue'
+import kbLogo from './kbLogo.vue'
+import kbBack from './kbBack.vue'
+</script>
 
 <style scoped>
-.header {
+.kb-header-box {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 10vh;
+}
+.kb-util-box {
+    display: flex;
+    align-items: center;
+}
+.kb-header {
     width: 100%;
-    height: 100px;
+    height: 100%;
     background-image: url('../2-大标题背景图/7.png');
     background-size: 100% 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.title {
-    font-size: 48px;
+.kb-header-title {
+    font-size: 5vh;
     font-weight: 600;
     font-family: '思源黑体';
     background-clip: text; /* 标准属性 */
diff --git a/src/views/SmartScreen/可视化素材包/components/kbLogo.vue b/src/views/SmartScreen/可视化素材包/components/kbLogo.vue
index ec2d6cf..464b1b2 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbLogo.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbLogo.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="box">
-        <div class="row-box">
-            <img class="logo" :src="imgUrl" />
-            <span class="text">北泽阀门(昆山)有限公司</span>
+    <div class="kb-logo-box">
+        <div class="kb-row-box">
+            <img class="kb-logo-icon" :src="imgUrl" />
+            <span class="kb-logo-text">北泽阀门(昆山)有限公司</span>
         </div>
     </div>
 </template>
@@ -12,28 +12,30 @@ import imgUrl from '@/assets/logo/logo.png'
 </script>
 
 <style scoped>
-.box {
+.kb-logo-box {
+    float: left;
     position: absolute;
     left: 1%;
-    top: 15px;
+    top: 3vh;
+    color: #eeeeee;
 }
 
-.row-box {
+.kb-row-box {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
 }
 
-.logo {
-    width: 40px;
-    height: 40px;
+.kb-logo-icon {
+    width: 4vh;
+    height: 4vh;
 }
 
-.text {
+.kb-logo-text {
     margin-left: 10px;
     text-align: center;
     /* line-height: 25px; */
-    font-size: 36px;
+    font-size: 4vh;
 }
 </style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbNumBox.vue b/src/views/SmartScreen/可视化素材包/components/kbNumBox.vue
index 57539bb..d642b6c 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbNumBox.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbNumBox.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="box" :style="`width:${props.width};height:${props.height}`">
-        <div class="box-item"><slot></slot></div>
+    <div class="kb-count-num-box" :style="`width:${props.width};height:${props.height}`">
+        <div class="kb-count-num-box-item"><slot></slot></div>
     </div>
 </template>
 
@@ -21,7 +21,7 @@ const props = defineProps({
 </script>
 
 <style scoped>
-.box {
+.kb-count-num-box {
     width: 100%;
     height: 100%;
     display: flex;
@@ -30,11 +30,9 @@ const props = defineProps({
     background-image: url('../5-图标/6指标卡1文字背景.png');
     background-size: 100% 100%;
 }
-.box-item {
-    margin: 10px;
+.kb-count-num-box-item {
     width: 100%;
     height: 100%;
-    min-height: 60px;
     font-family: '思源黑体';
 }
 </style>
diff --git a/src/views/SmartScreen/可视化素材包/components/kbTime.vue b/src/views/SmartScreen/可视化素材包/components/kbTime.vue
index c4086fc..57582b8 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbTime.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbTime.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="box">
-        <span class="span">{{ datetime }}</span>
+    <div class="kb-time-box">
+        <span>{{ datetime }}</span>
     </div>
 </template>
 
@@ -20,14 +20,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.box {
+.kb-time-box {
+    float: left;
     position: absolute;
-    right: 2%;
-    top: 15px;
+    right: 5%;
+    top: 3vh;
     color: #eeeeee;
-}
-.span {
-    font-size: 36px;
+    font-size: 4vh;
     font-weight: 600;
     color: white;
 }
diff --git a/src/views/SmartScreen/可视化素材包/components/kbTitle.vue b/src/views/SmartScreen/可视化素材包/components/kbTitle.vue
index d13c571..0359fe7 100644
--- a/src/views/SmartScreen/可视化素材包/components/kbTitle.vue
+++ b/src/views/SmartScreen/可视化素材包/components/kbTitle.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="title-box" :style="`width:${props.width};height:${props.height}`">
+    <div class="kb-title-box" :style="`width:${props.width};height:${props.height}`">
         <slot></slot>
     </div>
 </template>
@@ -21,9 +21,8 @@ const props = defineProps({
 </script>
 
 <style scoped>
-.title-box {
-    margin-bottom: 20px;
-    padding-left: 10px;
+.kb-title-box {
+    padding-left: 1vw;
     width: 100%;
     height: 100%;
     display: flex;
@@ -31,7 +30,7 @@ const props = defineProps({
     justify-content: start;
     background-image: url('../4-组件标题背景图/左上背景.png');
     background-size: 100% 100%;
-    font-size: 24px;
+    font-size: 3vh;
     font-weight: 600;
     font-family: '思源黑体';
 }