From d242ff1f88b6275b4ae968d2d245338c5671e50c Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Wed, 18 Mar 2026 16:49:17 +0800
Subject: [PATCH] =?UTF-8?q?xghy=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/XghyScreen.vue | 514 +++++++++++++++++----------------------
 1 file changed, 225 insertions(+), 289 deletions(-)

diff --git a/src/pages/XghyScreen.vue b/src/pages/XghyScreen.vue
index 5ccd0e7..553ddc3 100644
--- a/src/pages/XghyScreen.vue
+++ b/src/pages/XghyScreen.vue
@@ -1,19 +1,7 @@
 <template>
   <section class="bg">
-    <header>
-      <p>哈工汽轮机（镇江）有限责任公司数字化焊材库智慧大屏</p>
-      <div class="data_box clearfix">
-        <div class="date_item date">{{date}}</div>
-        <div class="date_item week">{{week}}</div>
-        <div class="date_item time clearfix">
-          <div class="tiem_item hours">{{hours}}</div>
-          <div class="colon">:</div>
-          <div class="tiem_item minutes">{{minutes}}</div>
-          <div class="colon">:</div>
-          <div class="tiem_item seconds">{{seconds}}</div>
-        </div>
-      </div>
-    </header>
+    <t-header title="哈工汽轮机（镇江）有限责任公司数字化焊材库智慧大屏">
+    </t-header>
     <div class="container">
       <div class="left_wrap">
         <div class="item_wrap">
@@ -116,9 +104,11 @@
         </div>
       </div>
       <div class="center_wrap">
+        <div class="item_wrap_2 item_wrap_3">
+        </div>
         <div class="item_wrap_1 inlblock">
           <div class="item_tip item_tip_01">
-            <div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
+            <div class="item_tip_left">AGV监控</div>
           </div>
           <div class="item_content_1">
             <div id="echart_d03" style="width: 100%; height: 100%"></div>
@@ -126,60 +116,28 @@
         </div>
         <div class="item_wrap_1 inlblock">
           <div class="item_tip item_tip_01">
-            <div class="item_tip_left">运行设备大类产能比</div>
+            <div class="item_tip_left">温湿度监控</div>
           </div>
           <div class="item_content_1">
             <div id="echart_d04" style="width: 100%; height: 100%"></div>
           </div>
         </div>
-        <div class="item_wrap_2 item_wrap_3">
-          <div class="item_tip item_tip_2">
-            <div class="item_tip_left">设备综合统计</div>
-          </div>
-          <div class="item_content_1">
-            <div id="echart_d05" style="width: 100%; height: 100%"></div>
-          </div>
-        </div>
-        <div class="item_wrap_2">
-          <div class="item_tip item_tip_2">
-            <div class="item_tip_left">设备状态列表</div>
-          </div>
-          <div class="item_content_2">
-            <div class="scroll_wrap">
-              <ul class="scroll_tab_1">
-                <li>设备编号</li>
-                <li>设备名称</li>
-                <li>设备大类</li>
-                <li>设备状态</li>
-                <li>产量</li>
-                <li>开机时间</li>
-                <li>关机时间</li>
-                <li>生产日期</li>
-              </ul>
-              <div class="scroll_container_1">
-                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
-                  <ul class="scroll-ul_1">
-                    <li v-for="(e, i) in array1" :key="i">
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div"><span :style="{'background-color': ddddcolor}"><i></i></span>{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                    </li>
-                  </ul>
-              </vue-seamless-scroll>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
       <div class="right_wrap">
         <div class="item_wrap">
           <div class="item_tip">
-            <div class="item_tip_left">设备TOP10故障次数</div>
+            <div class="item_tip_left">班组焊材领退</div>
+          </div>
+          <!-- <div class="item_content_1">
+            <div id="echart_d10" style="width: 100%; height: 100%"></div>
+          </div> -->
+          <div class="item_content_1">
+            <div id="echart_d05" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">焊材使用TOP5</div>
           </div>
           <div class="item_content_1">
             <div id="echart_d08" style="width: 100%; height: 100%"></div>
@@ -192,10 +150,11 @@
           <div class="item_content_4">
             <div class="scroll_wrap">
               <ul class="scroll_tab_2">
-                <li>设备编号</li>
-                <li>设备名称</li>
-                <li>报警原因</li>
-                <li>报警时间</li>
+                <li>时间</li>
+                <li>类型</li>
+                <li>物料</li>
+                <li>数量</li>
+                <li>领退人</li>
               </ul>
               <div class="scroll_container_2">
                 <vue-seamless-scroll :data="array2" :class-option="defaultOption2">
@@ -205,6 +164,7 @@
                       <div class="scroll-ul_2_div">{{e.material_code}}</div>
                       <div class="scroll-ul_2_div">{{e.material_code}}</div>
                       <div class="scroll-ul_2_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_2_div">{{e.material_code}}</div>
                     </li>
                   </ul>
               </vue-seamless-scroll>
@@ -212,17 +172,6 @@
             </div>
           </div>
         </div>
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left">近30天设备故障统计</div>
-          </div>
-          <!-- <div class="item_content_5">
-            <div id="echart_d4" style="width: 100%; height: 100%"></div>
-          </div> -->
-          <div class="item_content_1">
-            <div id="echart_d10" style="width: 100%; height: 100%"></div>
-          </div>
-        </div>
       </div>
     </div>
     <section class="bottom"></section>
@@ -230,9 +179,13 @@
 </template>
 
 <script>
+import THeader from '@components/header.vue'
 import * as echarts from 'echarts'
 export default {
-  name: 'MonitoringScreen2',
+  name: 'XghyScreen',
+  components: {
+    THeader
+  },
   data () {
     return {
       ddddcolor: '#f00',
@@ -342,6 +295,7 @@ export default {
       myCharts4: '',
       array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}],
       array2: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
+      array01: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
       num: 8
     }
   },
@@ -371,10 +325,6 @@ export default {
       }
     }
   },
-  created () {
-    this.updateTime()
-    this.timer = window.setInterval(this.updateTime, 1000)
-  },
   beforeDestroy () {
     this.$once('hook:beforeDestroy', () => {
       clearInterval(this.timer)
@@ -382,7 +332,7 @@ export default {
   },
   mounted () {
     this.setEchart08() // 右1
-    this.setEchart10() // 右3
+    // this.setEchart10() // 右3
     this.setEchart01() // 左1
     this.setEchart02() // 左3
     this.setEchart03()
@@ -396,24 +346,6 @@ export default {
       let fontSize = clientWidth * res / 1920
       return fontSize
     },
-    updateTime () {
-      let cd = new Date()
-      let year = cd.getFullYear()
-      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
-      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
-      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
-      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
-      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
-      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      let myddy = new Date().getDay()
-      let week = weekday[myddy]
-      this.time = `${hh}:${mm}:${ss}`
-      this.hours = `${hh}`
-      this.minutes = `${mm}`
-      this.seconds = `${ss}`
-      this.date = `${year}年${month}月${date}日`
-      this.week = `${week}`
-    },
     setEchart08 () {
       // var myColor = ['#81E7ED'] // 内柱状图颜色
       var dataLine = [5, 66, 33, 25, 10]
@@ -617,150 +549,184 @@ export default {
       })
     },
     setEchart04 () {
-      // 多列柱状图
-      // 到外面壳边框的距离
-      let option = {
-        grid: {
-          top: this.fontSize(50),
-          left: 0,
-          right: this.fontSize(25),
-          bottom: 0,
-          containLabel: true
-        },
-        // 图例
-        legend: {
-          // icon: 'rect',
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
-            lineHeight: 14
-          },
-          itemGap: 30.86,
-          itemWidth: 14.16,
-          itemHeight: 7.38,
-          data: [{name: '最大产能', itemStyle: {color: '#0E90FD'}}, {name: '平均产能', itemStyle: {color: '#33CCCC'}}, {name: '最小产能', itemStyle: {color: '#EAAD24'}}]
-        },
-        xAxis: {
-          type: 'category',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              width: 2,
-              color: '#8FABBF'
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 14
-            }
-          },
-          data: this.xData
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            show: false
-          },
-          splitNumber: 2,
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 14
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: [8, 4],
-              dashOffset: 4,
-              color: '#8FABBF',
-              opacity: 0.2
-            }
-          }
-        },
-        series: [
-          {
-            type: 'bar', // 形状为柱状图
-            data: this.yData,
-            name: '最大产能', // legend属性
-            barGap: '150%', // 柱图间距
-            barWidth: '8', // 柱图宽度
-            itemStyle: {
-              normal: {
-                show: true,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 1,
-                    color: 'rgba(96,112,128,0.10)',
-                    opacity: 1
-                  },
-                  {
-                    offset: 0,
-                    color: '#0E90FD',
-                    opacity: 0.1
-                  }
-                ])
-              }
-            }
-          },
-          {
-            type: 'line', // 形状为折线图
-            data: this.taskDate2,
-            name: '最小产能', // legend属性
-            barGap: '150%', // 柱图间距
-            barWidth: '8', // 柱图宽度
-            itemStyle: {
-              normal: {
-                show: true,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#B68845',
-                    opacity: 1
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(134,98,45,0.25)',
-                    opacity: 0.25
-                  }
-                ])
-              }
-            }
-          },
-          {
-            type: 'bar', // 形状为柱状图
-            data: this.taskDate,
-            name: '平均产能', // legend属性
-            barGap: '150%', // 柱图间距
-            barWidth: '8', // 柱图宽度
-            itemStyle: {
-              normal: {
-                show: true,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#33CCCC',
-                    opacity: 1
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(31,89,89,0.25)',
-                    opacity: 0.25
-                  }
-                ])
-              }
-            }
-          }
-        ]
+      // 时间点数组 (保留原始两个0:00, 为了区分但尊重数据)
+      const timePoints = [
+          "0:00", "2:24", "4:43", "7:12", "9:36", 
+          "12:00", "14:24", "16:48", "19:12", "21:36", "0:00"
+      ];
+      
+      // 温度数据 (单位: 摄氏度, 保留一位小数)
+      const temperatureData = [
+          8.3, 8.7, 8.5, 9.0, 10.5,
+          8.3, 8.5, 9.5, 8.3, 8.7, 9.0
+      ];
+      
+      // 湿度数据 (单位: %RH, 保留一位小数)
+      const humidityData = [
+          33.0, 34.0, 30.0, 35.0, 34.0,
+          33.0, 30.0, 35.0, 33.0, 30.0, 32.0
+      ];
+
+      // 校验长度
+      if (timePoints.length !== temperatureData.length || timePoints.length !== humidityData.length) {
+          console.error('数据长度不匹配，请检查解析');
+          return;
       }
+      let option = {
+          // 标题 (可自行添加)
+          // title: {
+          //     text: '温湿度变化曲线',
+          //     subtext: '数据源自图片表格 · 横轴为时间',
+          //     left: 'center',
+          //     top: 0,
+          //     textStyle: { fontSize: 16, fontWeight: 'normal', color: '#2d3748' },
+          //     subtextStyle: { fontSize: 12, color: '#718096' }
+          // },
+          // 提示框
+          tooltip: {
+              trigger: 'axis',
+              axisPointer: { type: 'shadow' },
+              formatter: function(params) {
+                  // 自定义提示框: 显示时间、温度和湿度
+                  let time = params[0].axisValue;  // 横轴时间
+                  let res = `<b>时间: ${time}</b><br/>`;
+                  params.forEach(item => {
+                      if (item.seriesName === '温度') {
+                          res += `🌡️ 温度: ${item.value} °C<br/>`;
+                      } else if (item.seriesName === '湿度') {
+                          res += `💧 湿度: ${item.value} %RH<br/>`;
+                      }
+                  });
+                  return res;
+              }
+          },
+          // 图例
+          legend: {
+              data: ['温度', '湿度'],
+              orient: 'horizontal',
+              left: 'right',
+              top: 6,
+              icon: 'circle',
+              itemWidth: 10,
+              itemHeight: 10,
+              itemGap: 30.86,
+              textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                lineHeight: 14
+              },
+          },
+          // 网格 (调整边距，为标题留空间)
+          grid: {
+              left: '8%',
+              right: '6%',
+              bottom: '10%',
+              top: '20%',
+              containLabel: true
+          },
+          // 横轴: 时间 (category)
+          xAxis: {
+              type: 'category',
+              data: timePoints,
+              name: '时间',
+              nameLocation: 'middle',
+              nameGap: 30,
+              nameTextStyle: { fontWeight: 500, color: '#4a5568' },
+              // axisLine: { lineStyle: { color: '#a0aec0' } },
+              axisTick: { alignWithLabel: true },
+              // axisLabel: {
+              //     rotate: 0,        // 如果标签重叠可开启旋转，这里11个点刚好
+              //     fontSize: 12,
+              //     color: '#2d3748',
+              //     fontWeight: 400,
+              //     // 针对首尾两个0:00加一个小提示 (可选，但为了清晰我们不额外处理，直接显示)
+              // },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  width: 2,
+                  color: '#8FABBF'
+                }
+              },
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: '#8FABBF',
+                  fontSize: 14
+                }
+              },
+              splitLine: { show: false }  // 不显示网格竖线
+          },
+          // 纵轴: 单一数值轴 (温度和湿度共用)
+          yAxis: {
+              type: 'value',
+              name: '数值 (℃ / %RH)',
+              nameTextStyle: { fontWeight: 500, color: '#8FABBF' },
+              // axisLabel: { fontSize: 12, color: '#2d3748' },
+              splitLine: { lineStyle: { type: 'dashed', color: '#e2e8f0' } },
+              // 让纵轴范围稍微宽松一些，包含所有数据 (0~40可以同时覆盖温湿度)
+              min: 0,
+              max: 40,
+              // axisLine: { show: false }
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  width: 2,
+                  color: '#8FABBF'
+                }
+              },
+              axisLabel: {
+                formatter: '{value}',
+                textStyle: {
+                  color: '#8FABBF',
+                  fontSize: 14
+                }
+              },
+          },
+          // 系列: 两条折线
+          series: [
+              {
+                  name: '温度',
+                  type: 'line',
+                  data: temperatureData,
+                  symbol: 'circle',
+                  symbolSize: 8,
+                  lineStyle: { width: 3, color: '#e53e3e' },   // 红色系
+                  itemStyle: { color: '#c53030' },
+                  smooth: false,          // 保持折线，不进行平滑（符合原数据）
+                  connectNulls: false,
+                  markPoint: {
+                      data: [
+                          { type: 'max', name: '最高温' },
+                          { type: 'min', name: '最低温' }
+                      ]
+                  },
+                  tooltip: { valueSuffix: ' °C' }
+              },
+              {
+                  name: '湿度',
+                  type: 'line',
+                  data: humidityData,
+                  symbol: 'diamond',
+                  symbolSize: 10,
+                  lineStyle: { width: 3, color: '#3182ce' },   // 蓝色系
+                  itemStyle: { color: '#2c5282' },
+                  smooth: false,
+                  connectNulls: false,
+                  markPoint: {
+                      data: [
+                          { type: 'max', name: '最高湿' },
+                          { type: 'min', name: '最低湿' }
+                      ]
+                  },
+                  tooltip: { valueSuffix: ' %RH' }
+              }
+          ],
+          // 数据缩放 (如果感觉横轴密集，可启用，这里先不加)
+          dataZoom: [],
+          // 颜色系列 (全局不强制，已在系列中指定)
+          color: ['#e53e3e', '#3182ce']
+      };
       let echart = document.getElementById('echart_d04')
       this.myCharts04 = this.$echarts.init(echart)
       this.myCharts04.setOption(option)
@@ -974,7 +940,7 @@ export default {
           itemGap: 30.86,
           itemWidth: 14.16,
           itemHeight: 7.38,
-          data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
+          data: [{name: '领料', itemStyle: {color: '#0E90FD'}}, {name: '退料', itemStyle: {color: '#07E083'}}, {name: '消耗', itemStyle: {color: '#EAAD24'}}]
         },
         xAxis: {
           type: 'category',
@@ -995,7 +961,7 @@ export default {
               fontSize: 14
             }
           },
-          data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
+          data: ['班组1', '班组2', '班组3', '班组4']
         },
         yAxis: {
           type: 'value',
@@ -1024,7 +990,7 @@ export default {
         },
         series: [
           {
-            name: '运行设备',
+            name: '领料',
             type: 'bar',
             barWidth: '8',
             barGap: '100%', // 柱图间距
@@ -1044,10 +1010,10 @@ export default {
                 ])
               }
             },
-            data: ['390', '390', '390', '390', '390', '390']
+            data: ['390', '390', '390', '390']
           },
           {
-            name: '暂未生产设备',
+            name: '退料',
             type: 'bar',
             barWidth: '8',
             barGap: '100%', // 柱图间距
@@ -1067,10 +1033,10 @@ export default {
                 ])
               }
             },
-            data: ['230', '230', '230', '230', '230', '230']
+            data: ['230', '230', '230', '230']
           },
           {
-            name: '关机设备',
+            name: '消耗',
             type: 'bar',
             barWidth: '8',
             barGap: '100%', // 柱图间距
@@ -1090,30 +1056,7 @@ export default {
                 ])
               }
             },
-            data: ['210', '210', '210', '210', '210', '210']
-          },
-          {
-            name: '故障设备',
-            type: 'bar',
-            barWidth: '8',
-            barGap: '100%', // 柱图间距
-            itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#CC6060',
-                    opacity: 1
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(123,33,33,0.25)',
-                    opacity: 0.25
-                  }
-                ])
-              }
-            },
-            data: ['110', '110', '110', '110', '110', '110']
+            data: ['210', '210', '210', '210']
           }
         ]
       }
@@ -1397,16 +1340,8 @@ export default {
   _wh(100%, 100%)
   background #050d20 center center / 100% 100% url(../assets/images/screen1/bg.png) no-repeat
   overflow hidden
-header
-  width 100%
-  height 1rem
-  position relative
-  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
-  p
-    font-family "PangMenZhengDao"
-    _font(.26rem, 1rem, #ffffff, lighter, center)
-    letter-spacing .05rem
-    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
+.bg >>> header p
+      font-size: 0.26rem;
 .data_box
   position absolute
   right 0
@@ -1508,9 +1443,10 @@ header
   _wh(48.8%, calc((100% - .4rem) / 3))
 .item_wrap_2
   // _wh(100%, calc((100% - .4rem) / 2))
-  _wh(100%, calc((100% - .4rem) / 3))
+  _wh(100%, calc((100% - .4rem) / 3 * 2))
 .item_wrap_3
-  margin-top .26rem
+  margin-bottom .26rem
+  background center bottom / 100% 100% url(../assets/images/screen1/xghy-bg.jpg) no-repeat
 .inlblock
   display inline-block
   margin-right 0.08rem
@@ -1571,7 +1507,7 @@ header
   border-bottom .01rem solid rgba(8,205,248,0.3)
   li
     float left
-    width 25%
+    width 20%
     _font(.14rem,.4rem,#78B1DE,,center)
     word-wrap break-word
     word-break break-all
@@ -1580,7 +1516,7 @@ header
     overflow hidden
     box-sizing border-box
     &:nth-child(4)
-      width 25%
+      width 20%
 .scroll_container_2
   width 100%
   height calc(100% - .4rem)
@@ -1594,7 +1530,7 @@ header
       box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
     .scroll-ul_2_div
       float left
-      _wh(25%, .44rem)
+      _wh(20%, .44rem)
       _fj(center)
       _font(.14rem, .44rem, #fff,,center)
       word-wrap break-word
@@ -1603,7 +1539,7 @@ header
       padding 0 .02rem
       overflow hidden
       &:nth-child(4)
-        width 25%
+        width 20%
 .right_1_up
   clear both
   _wh(100%, 1.6rem)