From 3a789f5065cc6cdc4e28d8e086a68fff10dceb3b 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, 14 Mar 2025 17:02:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E7=81=AF=E5=A4=A7=E5=B1=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SmartScreen/AndonScreen/charts/chart1.vue | 35 +++++++++++++--
 .../SmartScreen/AndonScreen/charts/chart2.vue | 23 ++++++++--
 .../SmartScreen/AndonScreen/charts/chart3.vue | 29 +++++++-----
 .../SmartScreen/AndonScreen/charts/table.css  | 45 ++++++++++++-------
 .../AndonScreen/components/kbHeader.vue       |  2 +-
 .../AndonScreen/components/logo.vue           |  2 +-
 src/views/SmartScreen/AndonScreen/index.css   | 42 ++++++++++++-----
 src/views/SmartScreen/AndonScreen/index.vue   | 34 +++++++++++++-
 .../SmartScreen/AndonScreen/theme/chalk.json  |  2 +-
 9 files changed, 166 insertions(+), 48 deletions(-)

diff --git a/src/views/SmartScreen/AndonScreen/charts/chart1.vue b/src/views/SmartScreen/AndonScreen/charts/chart1.vue
index 46971da..2939480 100644
--- a/src/views/SmartScreen/AndonScreen/charts/chart1.vue
+++ b/src/views/SmartScreen/AndonScreen/charts/chart1.vue
@@ -1,10 +1,16 @@
 <!-- 今日工单 -->
 <template>
     <div>
-        <div class="title">安灯记录</div>
+        <!-- <div class="title">安灯记录</div> -->
         <el-table height="600" :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="faultDict" label="异常类型" />
+            <el-table-column prop="faultDict" label="异常类型">
+                <template #default="scope">
+                    <el-tag class="tag" effect="dark" size="large" :color="getTagColor(scope.row.faultDict)">
+                        <span>{{ scope.row.faultDict }}</span>
+                    </el-tag>
+                </template>
+            </el-table-column>
             <el-table-column prop="faultContext" label="异常内容" />
             <el-table-column prop="startTime" label="开始时间" />
             <el-table-column prop="duration" label="持续时长" />
@@ -31,6 +37,29 @@ function handleQuery() {
     getList()
 }
 handleQuery()
+
+/// 获取异常类型清单 =====================
+import { GetListFault } from '@/api/andonManagement/dataAnalysis.js'
+const faultType = ref([])
+function initFaultType() {
+    GetListFault().then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            faultType.value = data
+        }
+    })
+}
+initFaultType()
+
+function getTagColor(faultDict) {
+    for (let item of faultType.value) {
+        if (faultDict === item.name) {
+            return item.color
+        }
+    }
+    return '#409EFF'
+}
+
 // 自动获取数据
 let timer1 = null
 const clearSearchTimer = () => {
@@ -41,7 +70,7 @@ const createSearchTimer = () => {
     clearSearchTimer()
     timer1 = setInterval(() => {
         handleQuery()
-    }, 1000 * 60 * 5)
+    }, 1000 * 60 * 1)
 }
 
 // 自动滚动
diff --git a/src/views/SmartScreen/AndonScreen/charts/chart2.vue b/src/views/SmartScreen/AndonScreen/charts/chart2.vue
index 5bb5665..27cbfea 100644
--- a/src/views/SmartScreen/AndonScreen/charts/chart2.vue
+++ b/src/views/SmartScreen/AndonScreen/charts/chart2.vue
@@ -24,7 +24,11 @@ const props = defineProps({
 let options = {
     title: {
         text: '本月异常停机时间统计',
-        left: 'left'
+        left: 'left',
+        textStyle: {
+            fontSize: 36, // 设置标题字体大小
+            fontWeight: 'bold' // 可选：设置字体粗细
+        }
     },
     tooltip: {
         trigger: 'axis',
@@ -43,12 +47,18 @@ let options = {
         boundaryGap: true,
         axisTick: {
             show: false
+        },
+        axisLabel: {
+            fontSize: 24 // 设置X轴标签字体大小
         }
     },
     yAxis: {
         type: 'value',
         axisTick: {
             show: false
+        },
+        axisLabel: {
+            fontSize: 24 // 设置X轴标签字体大小
         }
     },
     // 图例
@@ -56,7 +66,11 @@ let options = {
         type: 'scroll',
         top: 'top',
         width: '70%',
-        left: '20%'
+        left: '20%',
+        textStyle: {
+            fontSize: 24, // 设置标题字体大小
+            fontWeight: 'bold' // 可选：设置字体粗细
+        }
     },
     series: [
         {
@@ -91,8 +105,6 @@ import { ShutdownBar } from '@/api/smartScreen/AndonScreen/index.js'
 function updateData() {
     ShutdownBar().then((res) => {
         if (res.code === 200) {
-            console.log('ShutdownBar', res.data)
-
             options.title = res.data.title
             options.xAxis.data = res.data.xAxis.data
             let _series = res.data.series
@@ -100,6 +112,9 @@ function updateData() {
                 if (item.type === 'bar') {
                     item.stack = 'group'
                 }
+                item.label = {
+                    fontSize: 20 // 设置数据标签字体大小
+                }
             })
             options.series = _series
             chart.value.setOption(options)
diff --git a/src/views/SmartScreen/AndonScreen/charts/chart3.vue b/src/views/SmartScreen/AndonScreen/charts/chart3.vue
index 9f57374..afd9f9d 100644
--- a/src/views/SmartScreen/AndonScreen/charts/chart3.vue
+++ b/src/views/SmartScreen/AndonScreen/charts/chart3.vue
@@ -24,13 +24,18 @@ const props = defineProps({
 const options = {
     title: {
         text: '本月异常占比',
-        left: 'left'
+        left: 'left',
+        textStyle: {
+            fontSize: 36, // 设置标题字体大小
+            fontWeight: 'bold' // 可选：设置字体粗细
+        }
     },
     legend: {
         type: 'scroll',
         top: 20,
         right: 10,
         textStyle: {
+            fontSize: 24, // 设置标题字体大小
             color: '#fff'
         }
     },
@@ -78,17 +83,17 @@ import { AbnormalDurationRatio } from '@/api/smartScreen/AndonScreen/index.js'
 function updateData() {
     AbnormalDurationRatio().then((res) => {
         if (res.code === 200) {
-            console.log('AbnormalDurationRatio', res.data)
-            let data = res.data
-            // _series.forEach((item) => {
-            //     item.label = {
-            //         // 设置label在扇区内部
-            //         position: 'inner',
-            //         // 自定义显示格式，{b}表示名称，{d}表示百分比
-            //         formatter: '{b}\n{d}%'
-            //     }
-            // })
-            options.series[0].data = data
+            let _series = res.data
+            _series.forEach((item) => {
+                item.label = {
+                    // 设置label在扇区内部
+                    // position: 'inner',
+                    // 自定义显示格式，{b}表示名称，{d}表示百分比
+                    // formatter: '{b}\n{d}%'
+                    fontSize: 20 // 设置数据标签字体大小
+                }
+            })
+            options.series[0].data = _series
             chart.value.setOption(options)
         }
     })
diff --git a/src/views/SmartScreen/AndonScreen/charts/table.css b/src/views/SmartScreen/AndonScreen/charts/table.css
index 7f54086..d8b8853 100644
--- a/src/views/SmartScreen/AndonScreen/charts/table.css
+++ b/src/views/SmartScreen/AndonScreen/charts/table.css
@@ -1,29 +1,44 @@
 .el-table {
+    font-size: 28px;
+    font-weight: 600;
     background-color: transparent !important; /* Set the background color for the table */
-	--el-table-text-color: #eee !important;
-	
-	--el-table-border-color: transparent !important; /* Set the border color for the table */
-	--el-table-border: 1px solid #fff !important; /* Set the border for the table */
+    --el-table-text-color: #eee !important;
+    --el-table-border-color: transparent !important; /* Set the border color for the table */
+    --el-table-border: 1px solid #fff !important; /* Set the border for the table */
     --el-table-border-style: none !important; /* Set the border style for the table */
     --el-table-border-width: 0 !important; /* Set the border width for the table */
     --el-table-header-bg-color: transparent !important; /* Set the background color for the table header */
     --el-table-header-text-color: #eee !important; /* Set the text color for the table header */
-	--el-table-header-cell-padding: 0 0 0 0 !important; /* Set the padding for the table header cell */
+    --el-table-header-cell-padding: 0 0 0 0 !important; /* Set the padding for the table header cell */
     --el-table-row-hover-bg-color: transparent !important; /* Set the background color for the table row on hover */
     --el-table-row-hover-text-color: #fff !important; /* Set the text color for the table row on hover */
     --el-table-row-text-color: #fff !important; /* Set the text color for the table row */
     --el-table-row-bg-color: transparent !important; /* Set the background color for the table row */
     --el-table-header-cell-height: 40px !important; /* Set the height for the table header cell */
     --el-table-cell-height: 40px !important; /* Set the height for the table cell */
---el-table-cell-padding: 0 0 0 0 !important; /* Set the padding for the table cell */
-	--el-table-tr-bg-color: transparent !important; /* Set the background color for the table row */
+    --el-table-cell-padding: 0 0 0 0 !important; /* Set the padding for the table cell */
+    --el-table-tr-bg-color: transparent !important; /* Set the background color for the table row */
 }
 
-.title{
-	height: 20px;
-	font-size: 18px;
-	font-weight: 700;
-	display: flex;
-	align-items: center;
-	color: #fff;
-}
\ No newline at end of file
+::v-deep(.el-table__row) {
+    height: 100px;
+}
+::v-deep(.cell) {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    line-height: 40px;
+}
+
+.title {
+    height: 20px;
+    font-size: 24px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    color: #fff;
+}
+.tag {
+    font-size: 28px;
+    height: 60px;
+}
diff --git a/src/views/SmartScreen/AndonScreen/components/kbHeader.vue b/src/views/SmartScreen/AndonScreen/components/kbHeader.vue
index 28b6622..d8e8658 100644
--- a/src/views/SmartScreen/AndonScreen/components/kbHeader.vue
+++ b/src/views/SmartScreen/AndonScreen/components/kbHeader.vue
@@ -18,7 +18,7 @@
     justify-content: center;
 }
 .title {
-    font-size: 36px;
+    font-size: 48px;
     font-weight: 600;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     -webkit-background-clip: text; /* 仅将背景应用于文本 */
diff --git a/src/views/SmartScreen/AndonScreen/components/logo.vue b/src/views/SmartScreen/AndonScreen/components/logo.vue
index 66a5b74..9326993 100644
--- a/src/views/SmartScreen/AndonScreen/components/logo.vue
+++ b/src/views/SmartScreen/AndonScreen/components/logo.vue
@@ -31,6 +31,6 @@ import imgUrl from '@/assets/logo/logo.png'
     margin-left: 10px;
     text-align: center;
     /* line-height: 25px; */
-    font-size: 24px;
+    font-size: 36px;
 }
 </style>
diff --git a/src/views/SmartScreen/AndonScreen/index.css b/src/views/SmartScreen/AndonScreen/index.css
index 035257f..d0b4a78 100644
--- a/src/views/SmartScreen/AndonScreen/index.css
+++ b/src/views/SmartScreen/AndonScreen/index.css
@@ -1,6 +1,6 @@
-body{
-	margin: 0;
-	padding: 0;
+body {
+    margin: 0;
+    padding: 0;
 }
 .background {
     padding: 0;
@@ -26,7 +26,7 @@ body{
     width: 99%;
     height: 100%;
     color: #eeeeee;
-	background-color: rgba(32, 163, 250, 0.2);
+    background-color: rgba(32, 163, 250, 0.2);
 }
 .screen .header {
     width: 100%;
@@ -47,10 +47,32 @@ body{
     top: 10px;
     color: #eeeeee;
 }
-.body{
-	display: flex;
-	flex-direction: column;
+.body {
+    display: flex;
+    flex-direction: column;
+}
+.box {
+    padding: 20px;
+}
+.tag-title {
+    font-size: 56px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.tag-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px; /* 设置所有方向上的间隔 */
+    justify-content: space-between; /* 使第一项和最后一项分别贴紧容器的两侧 */
+}
+
+.tag-box .tag-example {
+    flex: 1 1 48%; /* 每个tag占据近似一半宽度，考虑到gap的存在，这里设置为48% */
+    box-sizing: border-box;
+    min-width: 0; /* 确保即使内容超出也能正常换行 */
+}
+.tag-example {
+    /* width: 300px; */
+    height: 80px;
+    font-size: 48px;
 }
-.box{
-	padding: 20px;
-}
\ No newline at end of file
diff --git a/src/views/SmartScreen/AndonScreen/index.vue b/src/views/SmartScreen/AndonScreen/index.vue
index cbe64d7..6597590 100644
--- a/src/views/SmartScreen/AndonScreen/index.vue
+++ b/src/views/SmartScreen/AndonScreen/index.vue
@@ -13,13 +13,23 @@
         </div>
         <div class="body">
             <el-row :gutter="5">
-                <el-col :span="24">
+                <el-col :span="18">
                     <dv-border-box12 class="box">
                         <div>
                             <chart1></chart1>
                         </div>
                     </dv-border-box12>
                 </el-col>
+                <el-col :span="6">
+                    <dv-border-box12 class="box">
+                        <div class="tag-title">异常类型</div>
+                        <div class="tag-box">
+                            <el-tag class="tag-example" v-for="fault in faultType" effect="dark" :color="fault.color">
+                                <span>{{ fault.name }}</span>
+                            </el-tag>
+                        </div>
+                    </dv-border-box12>
+                </el-col>
             </el-row>
             <el-row :gutter="5">
                 <el-col :span="18">
@@ -54,6 +64,28 @@ const { proxy } = getCurrentInstance()
 function goBack() {
     proxy.$router.push('/')
 }
+
+/// 获取异常类型清单 =====================
+import { GetListFault } from '@/api/andonManagement/dataAnalysis.js'
+const faultType = ref([])
+function initFaultType() {
+    GetListFault().then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            faultType.value = data
+        }
+    })
+}
+initFaultType()
+
+function getTagColor(faultDict) {
+    for (let item of faultType.value) {
+        if (faultDict === item.name) {
+            return item.color
+        }
+    }
+    return '#409EFF'
+}
 </script>
 
 <style scoped>
diff --git a/src/views/SmartScreen/AndonScreen/theme/chalk.json b/src/views/SmartScreen/AndonScreen/theme/chalk.json
index 043843b..8a8a936 100644
--- a/src/views/SmartScreen/AndonScreen/theme/chalk.json
+++ b/src/views/SmartScreen/AndonScreen/theme/chalk.json
@@ -1,5 +1,5 @@
 {
-    "color": ["#0082fc", "#05f8d6", "#fdd845", "#22ed7c", "#09b0d3", "#1d27c9", "#f9e264", "#f47a75", "#72ccff"],
+    "color": ["#72ccff", "#fe0000", "#f36a00", "#cc217f", "#0168b7", "#22ad3a", "#fc217f", "#f9e264", "#f47a75", "#72ccff"],
     "backgroundColor": "transparent",
     "textStyle": {},
     "title": {