新增当月总耗电、电视机样式调整、字体更换、副屏设备图裁剪放大、24小时柱状图更换为昨天晚上8点到今天晚上8点、报警色块位置调整

wu

2025-11-24 3d3e4173c301fd36c16b9a25cd1f8c9f27257ed0

 gmms/WebContent/bigScreen/allGlassScreen.jsp

@@ -6,15 +6,751 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
      html,body{
    
   #warn-734,#warn-743{
        top: 481px !important;   
        left: 1454px !important;
        width: 53px !important;  
        height: 22px !important;   
        position: Absolute;
      }
   #warn-735,#warn-744{
        top: 423px !important;   
        left: 1419px !important;
        width: 16px !important;  
        height: 17px !important; 
        position: Absolute;
      }	
   #warn-736,#warn-745{
        top: 423px !important;   
        left: 1376px !important;
        width: 16px !important;  
        height: 17px !important; 
        position: Absolute;
      }	
   #warn-737,#warn-746{
       top: 462px  !important;
        left: 1413px  !important;
        width: 18px !important;
        height: 14px !important;
        position: Absolute;
      }
   #warn-738,#warn-747{
    top: 462px  !important;
        left: 1386px  !important;
        width: 18px !important;
        height: 14px !important;
        position: Absolute;
      }
   #warn-740,#warn-749{  
       top: 425px  !important;
       left: 1385px !important;
       width: 18px !important;
       height: 13px !important;
        position: Absolute;  
      }
   #warn-739,#warn-748{
       top: 425px  !important;
       left: 1405px !important;
       width: 18px !important;
       height: 13px !important;  
        position: Absolute;  
      }	
   #warn-741,#warn-750{
       top: 425px  !important;
       left: 1366px !important;
       width: 18px !important;
       height: 13px !important;
        position: Absolute;
      }
   #warn-742,#warn-751{
       top: 425px  !important;
       left: 1348px !important;
       width: 18px !important;
       height: 13px !important;
        position: Absolute;
      }
   #warn-812{
top: 427px !important;
    left: 1269px !important;
  width: 20px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-813{
    top: 458px !important;
    left: 1267px !important;
  width: 24px !important;
  height: 20px !important;
  position: Absolute;  
}
#warn-1062{
  top: 431px !important;  /* 原top=581px × 0.8966≈521px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}		
#warn-1063{
  top: 431px !important;  /* 原top=581px × 0.8966≈521px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}
   #warn-3162{
  top: 480px  !important;  /* 原621px × 0.8966≈557px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}		
#warn-3163{
  top: 481px !important;  /* 原621px × 0.8966≈557px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}    
#warn-1153{
    top: 485px !important;
    left: 1266px !important;
  width: 22px !important;
  height: 14px !important;
  position: Absolute;
}		
#warn-1154{
  top: 480px  !important;  /* 原679px × 0.8966≈535px */
  left: 1264px !important;
  width: 23px !important;
  height: 15px !important;
  position: Absolute;
}	
#warn-1155{
  top: 535px !important;  /* 原679px × 0.8966≈535px */
  left: 1247px !important;
  width: 17px !important;
  height: 15px !important;
  position: Absolute;
}	
#warn-1156{
  top: 535px !important;  /* 原679px × 0.8966≈535px */
  left: 1230px !important;
  width: 17px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-1157{
  top: 536px !important;  /* 原681px × 0.8966≈536px */
  left: 1209px !important;
  width: 20px !important;
  height: 12px !important;
  position: Absolute;
}		
#warn-1158{
  top: 535px !important;  /* 原680px × 0.8966≈535px */
  left: 1174px !important;
  width: 34px !important;
  height: 13px !important;
  position: Absolute;
}  
#warn-1159{
  top: 536px !important;  /* 原681px × 0.8966≈536px */
  left: 1153px !important;
  width: 20px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-1160{
  top: 535px !important;  /* 原680px × 0.8966≈535px */
  left: 1137px !important;
  width: 16px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1161{
  top: 510px !important;  /* 原655px × 0.8966≈510px */
  left: 1212px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}    
#warn-1162{
  top: 496px  !important;  /* 原641px × 0.8966≈575px */
  left: 1212px !important;
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}    
#warn-1163{
  top: 472px  !important;  /* 原616px × 0.8966≈472px  */
  left: 1212px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-1164{
  top: 541px !important;  /* 原603px × 0.8966≈541px */
  left: 1212px !important;
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}
#warn-1165{
  top: 541px !important;  /* 原603px × 0.8966≈541px */
  left: 1156px !important; 	
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}
#warn-1166{
  top: 472px  !important;  /* 原616px × 0.8966≈472px  */
  left: 1156px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-1167{
  top: 496px  !important;  /* 原641px × 0.8966≈575px */
  left: 1156px !important;
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}
#warn-1168{
  top: 510px !important;  /* 原655px × 0.8966≈510px */
  left: 1156px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}   
#warn-1254{
  display:None;
  position: Absolute;
}  
#warn-1343{
    top: 534px !important;
    left: 1030px !important;
  width: 16px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-1344{
  top: 535px !important;
    left: 1006px !important;
  width: 22px !important;
  height: 13px !important;
  position: Absolute;
}
 #warn-1345{
top: 537px !important;
    left: 987px !important;
  width: 17px !important;
  height: 13px !important;
  position: Absolute;
}  
#warn-1346{
top: 535px !important;
    left: 969px !important;
  width: 16px !important;
  height: 13px !important;
  position: Absolute;
} 
#warn-1347{
    top: 537px !important;
    left: 766px !important;
  width: 202px !important;
  height: 13px !important;
  position: Absolute;
} 
#warn-1348{
    top: 536px !important;
    left: 746px !important;
  width: 20px !important;
  height: 13px !important;
  position: Absolute;
} 
#warn-1349{
    top: 535px !important;
    left: 716px !important;
  width: 15px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1350{
    top: 535px !important;
    left: 682px !important;
  width: 15px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1351{
    top: 536px !important;
    left: 700px !important;
  width: 15px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1352{ 
    top: 536px !important;
    left: 663px !important;
  width: 18px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1353{
      top: 515px !important;
    left: 986px !important;
  width: 13px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-1354{
top: 491px !important;
    left: 987px !important;
  width: 13px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-1355{
  top: 475px !important;
    left: 986px !important;
  width: 16px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-1661{
  display:none;
  position: Absolute;
}
#warn-1723{
    top: 529px !important;
    left: 1090px !important;
  width: 23px !important;
  height: 22px !important;
  position: Absolute;
}
#warn-1923{
  display:none !important;
}

#warn-2110{
     top: 535px !important;
    left: 466px !important;
  width: 38px !important;
  height: 21px !important;
  position: Absolute;
}   
#warn-2111{
    top: 536px !important;
    left: 447px !important;
    width: 18px !important;
  height: 15px !important;
  position: Absolute;
}  
#warn-2112{
top: 535px !important;
    left: 373px !important;
  width: 40px !important;
  height: 19px !important;
  position: Absolute;
}  
#warn-2113{
  top: 535px !important;
    left: 373px !important;
  width: 40px !important;
  height: 19px !important;
  position: Absolute;
}  
#warn-2114{
     top: 538px !important;
    left: 414px !important;
  width: 31px !important;  
  height: 15px !important;
  position: Absolute;
}	
#warn-2214{
     top: 537px !important;
    left: 339px !important;
  width: 31px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-2215{
top: 517px !important;
    left: 270px !important;
  width: 21px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-2216{
 top: 505px !important;
    left: 268px !important;
  width: 21px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-2217{
      top: 462px !important;
    left: 268px !important;
  width: 21px !important;
  height: 43px !important;
  position: Absolute;
}
#warn-2218{
      top: 418px !important;
    left: 268px !important;
  width: 21px !important;
  height: 43px !important;
  position: Absolute;
}
#warn-2219{
top: 405px !important;
    left: 263px !important;
  width: 32px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-2310{
    top: 531px !important;
    left: 263px !important;
  width: 36px !important;
  height: 22px !important;
  position: Absolute;
}
#warn-2311{
     top: 382px !important;
    left: 259px !important;
  width: 36px !important;
  height: 22px !important;
  position: Absolute;
}
#warn-2314{
    top: 382px !important;
    left: 38px !important;
  width: 36px !important;
  height: 22px !important;
  position: Absolute;
}
#warn-2312{
    top: 383px !important;
    left: 190px !important;
  width: 26px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-2313{
top: 385px !important;
    left: 113px !important;
  width: 27px !important;
  height: 16px !important;
  position: Absolute;
}	
#warn-2421{
top: 415px !important;
    left: 42px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-2422{
  top: 501px !important;  /* 原585px × 0.8966≈524px */
  left: 42px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
}	
#warn-2423{
  top: 437px !important;
    left: 42px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-2424{
   top: 459px !important;
  left: 42px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
}	
#warn-2425{  
  top: 481px !important;  /* 原648px × 0.8966≈581px */
  left: 42px !important;
  width: 22px !important;
  height: 21px !important;  
  position: Absolute;
}
#warn-2426{  
  top: 523px !important;  /* 原669px × 0.8966≈599px */
  left: 42px !important;
  width: 22px !important;
  height: 21px !important;  
  position: Absolute;
}
#warn-2427{  
  top: 547px !important;  /* 原690px × 0.8966≈619px */
  left: 42px !important;
  width: 22px !important;
  height: 21px !important;  
  position: Absolute;
}
#warn-2428{  
  top: 571px !important;  /* 原712px × 0.8966≈638px */
  left: 42px !important;
  width: 22px !important;
  height: 23px !important;  
  position: Absolute;
}
#warn-2429{  
  top: 595px !important;  /* 原736px × 0.8966≈660px */
  left: 42px !important;
  width: 22px !important;
  height: 31px !important;  
  position: Absolute;
}
#warn-2510{  
    top: 663px !important;
    left: 874px !important;
  width: 33px !important;
  height: 19px !important;
  position: Absolute;
}
#warn-2511{  
    top: 667px !important;
    left: 910px !important;
  width: 28px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-2512,#warn-2513{  
      top: 666px !important;
    left: 940px !important;
  width: 39px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-2514{  
    top: 669px !important;
    left: 983px !important;
  width: 26px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2614{  
    top: 638px !important;
    left: 1117px !important;
    width: 33px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2615{  
  top: 638px !important;  /* 原795px × 0.8966≈638px */
  left: 1155px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2616{  
  top: 638px !important;  /* 原795px × 0.8966≈638px */
  left: 1186px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2617{  
  top: 638px !important;  /* 原795px × 0.8966≈638px */
  left: 1216px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2618{  
  top: 638px !important;  /* 原795px × 0.8966≈638px */
  left: 1246px !important;   
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2619{   
  top: 638px !important;  /* 原795px × 0.8966≈638px */
  left: 1276px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2710{   
  top: 660px !important;  /* 原811px × 0.8966≈727px */
  left: 1372px !important;
  width: 38px !important;   
  height: 21px !important;
  position: Absolute;
}
#warn-2711{   
  top: 661px !important;  /* 原815px × 0.8966≈710px */
  left: 1411px !important;
  width: 26px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-2712{   
    top: 662px !important;
    left: 1440px !important;
    width: 88px !important;
    height: 22px !important;
  position: Absolute;
}
#warn-2713{   
top: 660px !important;
    left: 1533px !important;
    width: 33px !important;
    height: 21px !important;
  position: Absolute;
}
#warn-2714{   
      top: 663px !important;
    left: 1571px !important;
    width: 35px !important;
  height: 18px !important; 
  position: Absolute;
}
#warn-2814{   
     top: 641px !important;
    left: 1581px !important;
    width: 40px !important;
  height: 23px !important;
  position: Absolute; 
}
#warn-2815{   
 top: 622px !important;
    left: 1633px !important;
    width: 46px !important;
    height: 27px !important;
  position: Absolute;
}
#warn-2816{   
  top: 622px !important;
    left: 1633px !important;
    width: 46px !important;
    height: 27px !important;
  position: Absolute;
}
#warn-2817{   
      top: 628px !important;
    left: 1741px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2818{   
      top: 628px !important;
    left: 1790px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2819{   
 top: 623px !important;
    left: 1680px !important;
    width: 48px !important;
    height: 26px !important;
  position: Absolute;
}
#warn-2961{   
top: 623px !important;
    left: 1680px !important;
    width: 48px !important;
    height: 26px !important;
  position: Absolute;
}
#warn-3037{   
    top: 690px !important;
    left: 1857px !important;
  width: 19px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-3038{   
  top: 690px !important;  /* 原840px × 0.8966≈690px */
  left: 1825px !important;
  width: 32px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-3039{   
  top: 690px !important;  /* 原840px × 0.8966≈690px */
  left: 1793px !important;
  width: 32px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-3040{   
  top: 690px !important;  /* 原840px × 0.8966≈690px */
  left: 1741px !important;
  width: 52px !important;
  height: 12px !important;
  position: Absolute;
} 
#warn-3041{   
  top: 690px !important;  /* 原840px × 0.8966≈690px */
  left: 1689px !important;
  width: 52px !important;
  height: 12px !important;
  position: Absolute;
} 	
#warn-3042{   
  top: 690px !important;  /* 原840px × 0.8966≈690px */
  left: 1637px !important;
  width: 52px !important;
  height: 12px !important;
  position: Absolute;
} 	
#warn-3043{   
    top: 690px !important;
    left: 1619px !important;
    width: 18px !important;
  height: 12px !important;
  position: Absolute;
}	
#warn-3044{   
  top: 721px !important;  /* 原860px × 0.8966≈771px */
  left: 1623px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}	
#warn-3045{   
  top: 762px !important;  /* 原881px × 0.8966≈790px */
  left: 1623px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}	
#warn-3046{   
  top: 706px !important;  /* 原860px × 0.8966≈771px */
  left: 1623px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-3047{    
  top: 744px !important;  /* 原881px × 0.8966≈790px */
  left: 1623px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}

  html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;  
          
      }
      #header1 {
            width: 100%;
            width: 100%;  
            height: 5%;
            background-color: white;
            display: inline-block;
@@ -22,17 +758,27 @@
            font-size: 40px;
        }
        #header {
            width: 100%;
            height: 25%;
            width: 100%;   
            height: 20%;
            background-color: white;
            display: flex;
        }  
        #footer {
        #center {
            width: 100%;
            height: 70%;
            height: 55%;
            overflow: visible; /* 确保设备图上移后不被自身容器裁剪 */
            
        }
        /* 底部 */
        #footer {
  width: 100%;
  height: 25%;
  overflow: visible;
  display: flex; /* 横向布局 */
  background-color: white; /* 与header背景统一 */
  box-sizing: border-box;
  padding: 10px;
}      
        #main1 {
            margin-left:1%;
            width: 14%;
@@ -112,11 +858,7 @@
        .boli {
          opacity:0.5;
          
        }
     
       
    
 
        }           
        .divGrenn{
              background-color:green;
              display:block
@@ -142,739 +884,110 @@
            top: 775px;
            left: 1250px
        }
   #warn-734,#warn-743{
        top: 555px !important;   
        left: 1421px !important;
        width: 64px !important;  
        height: 22px !important;   
        position: Absolute;
      }
   #warn-735,#warn-744{
        top: 555px !important;   
        left: 1406px !important;
        width: 12px !important;  
        height: 22px !important; 
        position: Absolute;
      }	
   #warn-736,#warn-745{
        top: 555px !important;   
        left: 1376px !important;
        width: 15px !important;  
        height: 22px !important; 
        position: Absolute;
      }	
   #warn-737,#warn-746{
       top: 523px !important;
        left: 1401px !important;
        width: 18px !important;
        height: 14px !important;
        position: Absolute;
      }
   #warn-738,#warn-747{
    top: 523px !important;
        left: 1373px !important;
        width: 18px !important;
        height: 14px !important;
        position: Absolute;
      }
   #warn-740,#warn-749{  
       top: 510px !important;
       left: 1385px !important;
       width: 18px !important;
       height: 13px !important;
        position: Absolute;  
      }
   #warn-739,#warn-748{
       top: 510px !important;
       left: 1405px !important;
       width: 18px !important;
       height: 13px !important;  
        position: Absolute;  
      }	
   #warn-741,#warn-750{
       top: 510px !important;
       left: 1366px !important;
       width: 18px !important;
       height: 13px !important;
        position: Absolute;
      }
   #warn-742,#warn-751{
       top: 510px !important;
       left: 1348px !important;
       width: 18px !important;
       height: 13px !important;
        position: Absolute;
      }
   #warn-812{
  top: 509px !important;  /* 原top=562px × 0.8966≈504px */
  left: 1266px !important;
  width: 20px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-813{
  top: 570px !important;  /* 原top=636px × 0.8966≈570px */
  left: 1262px !important;
  width: 24px !important;
  height: 20px !important;
  position: Absolute;  
}
#warn-1062{
  top: 521px !important;  /* 原top=581px × 0.8966≈521px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}		
#warn-1063{
  top: 521px !important;  /* 原top=581px × 0.8966≈521px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}
   #warn-3162{
  top: 557px !important;  /* 原621px × 0.8966≈557px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}		
#warn-3163{
  top: 557px !important;  /* 原621px × 0.8966≈557px */
  left: 1180px !important;
  width: 25px !important;
  height: 20px !important;
  position: Absolute;
}    
#warn-1153{
  top: 595px !important;  /* 原663px × 0.8966≈595px */
  left: 1263px !important;
  width: 22px !important;
  height: 14px !important;
  position: Absolute;
}		
#warn-1154{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 1264px !important;
  width: 23px !important;
  height: 15px !important;
  position: Absolute;
}	
#warn-1155{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 1247px !important;
  width: 17px !important;
  height: 15px !important;
  position: Absolute;
}	
#warn-1156{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 1230px !important;
  width: 17px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-1157{
  top: 610px !important;  /* 原681px × 0.8966≈610px */
  left: 1209px !important;
  width: 20px !important;
  height: 12px !important;
  position: Absolute;
}		
#warn-1158{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 1174px !important;
  width: 34px !important;
  height: 13px !important;
  position: Absolute;
}  
#warn-1159{
  top: 610px !important;  /* 原681px × 0.8966≈610px */
  left: 1153px !important;
  width: 20px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-1160{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 1137px !important;
  width: 16px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1161{
  top: 587px !important;  /* 原655px × 0.8966≈587px */
  left: 1212px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}    
#warn-1162{
  top: 575px !important;  /* 原641px × 0.8966≈575px */
  left: 1212px !important;
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}    
#warn-1163{
  top: 552px !important;  /* 原616px × 0.8966≈552px */
  left: 1212px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-1164{
  top: 541px !important;  /* 原603px × 0.8966≈541px */
  left: 1212px !important;
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}
#warn-1165{
  top: 541px !important;  /* 原603px × 0.8966≈541px */
  left: 1156px !important; 	
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}
#warn-1166{
  top: 552px !important;  /* 原616px × 0.8966≈552px */
  left: 1156px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-1167{
  top: 575px !important;  /* 原641px × 0.8966≈575px */
  left: 1156px !important;
  width: 16px !important;
  height: 12px !important;      
  position: Absolute;
}
#warn-1168{
  top: 587px !important;  /* 原655px × 0.8966≈587px */
  left: 1156px !important;
  width: 16px !important;
  height: 21px !important;
  position: Absolute;
}   
#warn-1254{
  display:None;
  position: Absolute;
}  
#warn-1343{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 1042px !important;
  width: 16px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-1344{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 1018px !important;
  width: 22px !important;
  height: 13px !important;
  position: Absolute;
}
 #warn-1345{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 999px !important;
  width: 17px !important;
  height: 13px !important;
  position: Absolute;
}  
#warn-1346{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 982px !important; 
  width: 16px !important;
  height: 13px !important;
  position: Absolute;
} 
#warn-1347{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 780px !important; 
  width: 202px !important;
  height: 13px !important;
  position: Absolute;
} 
#warn-1348{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 760px !important; 
  width: 20px !important;
  height: 13px !important;
  position: Absolute;
} 
#warn-1349{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 746px !important; 
  width: 15px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1350{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 710px !important; 
  width: 15px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1351{
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 715px !important; 
  width: 15px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1352{ 
  top: 603px !important;  /* 原680px × 0.8966≈603px */
  left: 697px !important; 
  width: 18px !important;
  height: 13px !important;
  position: Absolute;
}
#warn-1353{
  top: 589px !important;  /* 原657px × 0.8966≈589px */
  left: 1000px !important;
  width: 13px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-1354{
  top: 570px !important;  /* 原636px × 0.8966≈570px */
  left: 1000px !important;
  width: 13px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-1355{
  top: 553px !important;  /* 原617px × 0.8966≈553px */
  left: 999px !important;
  width: 16px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-1661{
  display:none;
  position: Absolute;
}
#warn-1723{
  top: 600px !important;  /* 原675px × 0.8966≈605px */
  left: 1096px !important;
  width: 23px !important;
  height: 22px !important;
  position: Absolute;
}
#warn-1923{
  display:none !important;


/* 产量柱状图容器样式 */
#production-chart-wrap {
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}

#warn-2110{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 494px !important;
  width: 38px !important;
  height: 21px !important;
  position: Absolute;
}   
#warn-2111{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 467px !important;
  width: 26px !important;
  height: 15px !important;
  position: Absolute;
#production-chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  text-align: center;
}

#production-chart-container {
  width: 100%;
  height: calc(100% - 30px); /* 减去标题高度 */
  top:-20px;
}  
#warn-2112{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 425px !important;
  width: 40px !important;
  height: 19px !important;
  position: Absolute;
}  
#warn-2113{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 425px !important;
  width: 40px !important;
  height: 19px !important;
  position: Absolute;
}  
#warn-2114{
  top: 603px !important;  /* 原679px × 0.8966≈603px */
  left: 392px !important;
  width: 31px !important;  
  height: 15px !important;
  position: Absolute;
}	
#warn-2214{
  top: 592px !important;  /* 原660px × 0.8966≈592px */
  left: 323px !important;
  width: 31px !important;
  height: 15px !important;
  position: Absolute;

#staff-container {
  width: 30%;
  height: 100%;
  box-sizing: border-box;
  padding: 0px;
  background-color: white;
}
#warn-2215{
  top: 567px !important;  /* 原632px × 0.8966≈567px */
  left: 325px !important;
  width: 21px !important;
  height: 18px !important;
  position: Absolute;

#staff-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
  text-align: center;
}
#warn-2216{
  top: 549px !important;  /* 原612px × 0.8966≈549px */
  left: 325px !important;
  width: 21px !important;
  height: 18px !important;
  position: Absolute;

/* 滚动容器：行数超出时显示滚动条 */
#staff-scroll-wrapper {
  padding-right: 5px; /* 预留滚动条宽度，避免内容被遮挡 */
}
#warn-2217{
  top: 504px !important;  /* 原562px × 0.8966≈504px */
  left: 325px !important;
  width: 21px !important;
  height: 43px !important;
  position: Absolute;

#staff-table-wrapper {
  gap: 0px; /* 两组表格间距 */
  width: 100%; /* 占满滚动容器宽度 */
}
#warn-2218{
  top: 504px !important;  /* 原562px × 0.8966≈504px */
  left: 325px !important;
  width: 21px !important;
  height: 43px !important;
  position: Absolute;

/* 子表格样式（每组两列，共四列） */
.staff-subtable {
  width: 50%; /* 每组占50%宽度，四列总占满30%容器 */
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}
#warn-2219{
  top: 485px !important;  /* 原541px × 0.8966≈485px */
  left: 320px !important;
  width: 32px !important;
  height: 13px !important;
  position: Absolute;

.staff-subtable th, .staff-subtable td {
  border: 1px solid #ddd;
  padding: 6px 3px;
  width: 50%; /* 组内两列等宽 */
}
#warn-2310{
  top: 596px !important;  /* 原677px × 0.8966≈607px */
  left: 322px !important;
  width: 36px !important;
  height: 22px !important;
  position: Absolute;

.staff-subtable th {
  background-color: #f0f0f0;
  font-size: 13px;
}
#warn-2311{
  top: 476px !important;  /* 原519px × 0.8966≈476px */
  left: 317px !important;
  width: 36px !important;
  height: 22px !important;
  position: Absolute;

.staff-subtable input {
  width: 100%;
  height: 20px;
  padding: 0 3px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}
#warn-2314{
  top: 476px !important;  /* 原519px × 0.8966≈476px */
  left: 108px !important;
  width: 36px !important;
  height: 22px !important;
  position: Absolute;

/* 滚动条样式优化（可选） */
#staff-scroll-wrapper::-webkit-scrollbar {
  width: 6px;
}
#warn-2312{
  top: 477px !important;  /* 原522px × 0.8966≈477px */
  left: 253px !important;
  width: 26px !important;
  height: 16px !important;
  position: Absolute;
#staff-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
#warn-2313{
  top: 477px !important;  /* 原522px × 0.8966≈477px */
  left: 182px !important;
  width: 27px !important;
  height: 16px !important;
  position: Absolute;
}	
#warn-2421{
  top: 506px !important;  /* 原564px × 0.8966≈506px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
/* 去除输入框边框及聚焦轮廓 */
.staff-subtable input {
  width: 100%;
  height: 20px;
  padding: 0 0px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
  border: none; 
  /* 去除聚焦时的默认轮廓（浏览器自带） */
  outline: none; 
  /* 可选：添加背景色透明，让输入框更融入表格 */
  background: transparent; 
}
#warn-2422{
  top: 524px !important;  /* 原585px × 0.8966≈524px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
}	
#warn-2423{
  top: 543px !important;  /* 原606px × 0.8966≈543px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
.staff-subtable input:hover {
  background-color: #f5f5f5; /* 浅灰色背景 */
}
#warn-2424{
  top: 562px !important;  /* 原627px × 0.8966≈562px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;
  position: Absolute;
}	
#warn-2425{  
  top: 581px !important;  /* 原648px × 0.8966≈581px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;  
  position: Absolute;
}
#warn-2426{  
  top: 599px !important;  /* 原669px × 0.8966≈599px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;  
  position: Absolute;
}
#warn-2427{  
  top: 619px !important;  /* 原690px × 0.8966≈619px */
  left: 113px !important;
  width: 22px !important;
  height: 21px !important;  
  position: Absolute;
}
#warn-2428{  
  top: 638px !important;  /* 原712px × 0.8966≈638px */
  left: 113px !important;
  width: 22px !important;
  height: 23px !important;  
  position: Absolute;
}
#warn-2429{  
  top: 660px !important;  /* 原736px × 0.8966≈660px */
  left: 113px !important;
  width: 22px !important;
  height: 31px !important;  
  position: Absolute;
}
#warn-2510{  
  top: 707px !important;  /* 原814px × 0.8966≈707px */
  left: 892px !important;
  width: 33px !important;
  height: 19px !important;
  position: Absolute;
}
#warn-2511{  
  top: 710px !important;  /* 原815px × 0.8966≈710px */
  left: 927px !important;
  width: 28px !important;
  height: 15px !important;
  position: Absolute;
}
#warn-2512,#warn-2513{  
  top: 710px !important;  /* 原815px × 0.8966≈710px */
  left: 958px !important;
  width: 39px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-2514{  
  top: 709px !important;  /* 原816px × 0.8966≈693px */
  left: 998px !important;
  width: 26px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2614{  
  top: 693px !important;  /* 原795px × 0.8966≈693px */
  left: 1127px !important;
  width: 28px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2615{  
  top: 693px !important;  /* 原795px × 0.8966≈693px */
  left: 1155px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2616{  
  top: 693px !important;  /* 原795px × 0.8966≈693px */
  left: 1186px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2617{  
  top: 693px !important;  /* 原795px × 0.8966≈693px */
  left: 1216px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2618{  
  top: 693px !important;  /* 原795px × 0.8966≈693px */
  left: 1246px !important;   
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2619{   
  top: 693px !important;  /* 原795px × 0.8966≈693px */
  left: 1276px !important;
  width: 30px !important;
  height: 14px !important;
  position: Absolute;
}
#warn-2710{   
  top: 707px !important;  /* 原811px × 0.8966≈727px */
  left: 1372px !important;
  width: 38px !important;
  height: 21px !important;
  position: Absolute;
}
#warn-2711{   
  top: 710px !important;  /* 原815px × 0.8966≈710px */
  left: 1411px !important;
  width: 26px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-2712{   
  top: 710px !important;  /* 原815px × 0.8966≈710px */
  left: 1440px !important;
  width: 39px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-2713{   
  top: 710px !important;  /* 原815px × 0.8966≈710px */
  left: 1480px !important;
  width: 26px !important;
  height: 16px !important;
  position: Absolute;
}
#warn-2714{   
  top: 707px !important;  /* 原814px × 0.8966≈707px */
  left: 1512px !important;
  width: 32px !important;
  height: 18px !important; 
  position: Absolute;
}
#warn-2814{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1606px !important;
  width: 45px !important;  
  height: 23px !important;
  position: Absolute; 
}
#warn-2815{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1651px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2816{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1651px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2817{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1711px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2818{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1756px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2819{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1711px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-2961{   
  top: 688px !important;  /* 原788px × 0.8966≈707px */
  left: 1711px !important;
  width: 45px !important;
  height: 23px !important;
  position: Absolute;
}
#warn-3037{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1836px !important;
  width: 19px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-3038{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1803px !important;
  width: 32px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-3039{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1771px !important;
  width: 32px !important;
  height: 12px !important;
  position: Absolute;
}
#warn-3040{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1719px !important;
  width: 52px !important;
  height: 12px !important;
  position: Absolute;
} 
#warn-3041{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1667px !important;
  width: 52px !important;
  height: 12px !important;
  position: Absolute;
} 	
#warn-3042{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1615px !important;
  width: 52px !important;
  height: 12px !important;
  position: Absolute;
} 	
#warn-3043{   
  top: 729px !important;  /* 原840px × 0.8966≈729px */
  left: 1595px !important;
  width: 20px !important;
  height: 12px !important;
  position: Absolute;
}	
#warn-3044{   
  top: 764px !important;  /* 原860px × 0.8966≈771px */
  left: 1598px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}	
#warn-3045{   
  top: 790px !important;  /* 原881px × 0.8966≈790px */
  left: 1598px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}	
#warn-3046{   
  top: 743 !important;  /* 原860px × 0.8966≈771px */
  left: 1598px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}
#warn-3047{    
  top: 782px !important;  /* 原881px × 0.8966≈790px */
  left: 1598px !important;
  width: 14px !important;
  height: 18px !important;
  position: Absolute;
}
.staff-subtable input.saving {
  background-color: #fff3cd; /* 浅黄色背景提示 */
 </style>  
<title>大屏显示</title>
</head>
@@ -909,31 +1022,69 @@
                </div>
            </div>
        </div>
        <div id="footer">
            <img style="width: 100%;height: 100%;" src="../img/二期大屏.png">
        <div id="center">
            <img style="width: 100%;height: 100%;" src="../img/新二期大屏.png">
    <div v-if="warning && warning.length > 0">
    <div 
      v-for="warnItem in warning" 
      :key="warnItem['0_id']" 
      :key="warnItem['0_id']"  
      class="warn-item" 
       :id="'warn-' + warnItem['0_id']" 
       v-show="warnItem['4_state'] === '1'"
       :title="warnItem['3_content_value'] || '无详细信息'"
      style="
      style="   
        position: absolute; 
        top: 450px; 
        background: rgba(255, 0, 0, 0.4);
        color: white;
        background: rgba(255, 0, 0, 0.4);  
        color: white;  
        z-index: 10;
        cursor: pointer;	
      "
    >
    
        cursor: pointer;" >	     
    </div> 
  </div>

</div>
   <div id="footer">
  <div id="production-chart-wrap" style="width: 70%; height: 100%;">
    <div id="production-chart-title"></div>
    <div id="production-chart-container"></div> 
    
  </div>
  
 <div id="staff-container" style="width: 30%; height: 111%;">
  <div id="staff-title">当班人员信息</div>
  <!-- 滚动容器：行数过多时出现滚动条 -->
  <div id="staff-scroll-wrapper" style="height: calc(100% - 30px); overflow-y: auto;">
    <!-- 四列布局容器（flex横向排列两组表格） -->
    <div id="staff-table-wrapper" style="display: flex;">
      <!-- 左组：前半部分数据（设备1+姓名1） -->
      <table class="staff-subtable">
<!--         <thead>
          <tr><th>设备</th><th>姓名</th></tr>
        </thead> -->
        <tbody>
          <tr v-for="(item, index) in leftGroup" :key="'left-' + index">
            <td><input type="text" readonly v-model="item['0_machine']" @keydown.enter="saveStaff(leftGroupIndex[index])" placeholder="设备"></td>
            <td><input type="text" v-model="item['1_operator_name']" @keydown.enter="saveStaff(leftGroupIndex[index])" placeholder="姓名"></td>
          </tr>
        </tbody>
      </table>

      <!-- 右组：后半部分数据（设备2+姓名2） -->
      <table class="staff-subtable">
     <!--    <thead>
          <tr><th>设备</th><th>姓名</th></tr>
        </thead> -->
        <tbody>
          <tr v-for="(item, index) in rightGroup" :key="'right-' + index">
            <td><input type="text" readonly v-model="item['0_machine']" @keydown.enter="saveStaff(rightGroupIndex[index])" placeholder="设备"></td>
            <td><input type="text" v-model="item['1_operator_name']" @keydown.enter="saveStaff(rightGroupIndex[index])" placeholder="姓名"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>


<script src="../js/jquery-3.4.1.min.js"></script>
@@ -954,8 +1105,10 @@
        shuzu1:[{}],
          shuzu2:[{}],
          warning:[],
          Hour24:[],
        machineElectric:[{}],
      machineWater:[{}],
        machineWater:[{}],
        operator:[{}],
      
    val: {
            title:{
@@ -1088,11 +1241,59 @@
        }

    }
  ]
  ],

    },
        
     },
     },/*data结尾  */
     computed: {
          // 计算左组数据（前半部分）
          leftGroup() {
            const mid = Math.ceil(this.operator.length / 2);
            return this.operator.slice(0, mid);
          },
          // 计算右组数据（后半部分）
          rightGroup() {
            const mid = Math.ceil(this.operator.length / 2);
            return this.operator.slice(mid);
          },
          // 左组原始索引
          leftGroupIndex() {
            const mid = Math.ceil(this.operator.length / 2);
            return Array.from({ length: mid }, (_, i) => i);
          },
          // 右组原始索引
          rightGroupIndex() {
            const mid = Math.ceil(this.operator.length / 2);
            return Array.from({ length: this.operator.length - mid }, (_, i) => mid + i);
          }
        },
     methods:{
        // 回车提交修改（index：原始operator数组中的索引）
        saveStaff(index) {
          // 1. 获取当前行数据（设备名称+修改后的姓名）
          const currentItem = this.operator[index];
          if (!currentItem) {
              alert("数据异常，无法保存");
              return;
            }
          const machine = currentItem["0_machine"]; // 设备名
          const operatorName = currentItem["1_operator_name"]; // 姓名
          if (!machine || !operatorName.trim()) {
              alert("设备名不能为空，且姓名不可为空！");
              return;
            }
          let updateData = {
                 machine: machine, // 对应IN machine
                 operatorName: operatorName // 对应IN operatorName
               }; 
          //提交数据库
          /*  console.log("姓名：", updateData); */
          let sql = "{call bigScreen_operatorUpdate(?,?,?)}~" + JSON.stringify(updateData);
          this.connects("值班人员信息修改", sql,1,0);
          document.activeElement.blur();  
        },      
		  
        echarsInit() {
           // 1. 生成近7天日期（和水耗表逻辑一致）
           var datashijian = [];
@@ -1129,13 +1330,31 @@
             align: "center", 
                verticalAlign: "middle" 
           },
  			
              padding: [0, 20, 0, 0], 
              axisLine: {
             lineStyle: {
               width: 0 
                }
              }
            };
            };  
           this.val.series[0] = {
                   ...this.val.series[0],
                   name: '电耗(kw.h)', // 电耗单位
                   itemStyle: {
                     color: '#5470c6' // 电耗表颜色
                   },
                   // 新增：显示柱状图数值
                   label: {
                     show: true, // 开启显示
                     position: 'top', // 数值显示在柱子顶部
                     textStyle: {
                       color: '#333', // 文字颜色
                       fontSize: 12 // 文字大小
                     },
                     formatter: '{c}' // 格式化显示，{c}表示当前数据值
                   }
                 };
           this.val.series[0].name = '电耗(kw.h)'; // 电耗单位
           this.val.title.text = "总耗电(kw.h)"; // 标题
           this.val.series[0].itemStyle.color = '#5470c6'; // 电耗表颜色（可自定义，与水耗区分）
@@ -1167,9 +1386,46 @@
             dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
           }
           // 4. 复用val配置，统一样式（和水耗表保持一致）
           this.val.yAxis[0].name = "水耗";
           this.val.series[0].name = '水耗(kw.h)'; 
           this.val.title.text = "总耗水(kw.h)"; 
            this.val.yAxis[0] = {
              ...this.val.yAxis[0],
              name: "水耗",   
             show: true,
              nameShow: true,
              nameWidth: 80, 
              nameLocation: "end", // 保持在端
              nameGap: 20,   
              nameTextStyle: {
              fontSize: 14,
              color: "#333", 
             align: "center", 
                verticalAlign: "middle" 
           },
              padding: [0, 20, 0, 0], 
              axisLine: {
             lineStyle: {
               width: 0 
                }
              }
            };
            this.val.series[0] = {
                   ...this.val.series[0],
                   name: '水耗(L.h)',
                   itemStyle: {
                     color: '#5470c6' 
                   },
                   // 新增：显示柱状图数值
                   label: {
                     show: true, 
                     position: 'top',
                     textStyle: {
                       color: '#333',
                       fontSize: 12
                     },
                     formatter: '{c}' 
                   }
                 };
           this.val.series[0].name = '水耗(L.h)'; 
           this.val.title.text = "总耗水(L.h)"; 
           this.val.series[0].itemStyle.color = '#5470c6'; // 电耗表颜色（可自定义，与水耗区分）
           this.val.xAxis[0].data = datashijian; // x轴日期（和水耗一致）
           this.val.series[0].data = dianhao; // 绑定电耗数据
@@ -1177,6 +1433,99 @@
           // 5. 应用配置并渲染
           HisArr.setOption(this.val);
           this.loading = false;
         }
        ,
        initProductionChart() {
           // 1. 固定x轴标签（昨天8点→今天7点，共24个时段，无第二天8点）
           const hourLabels = [
             "20", "21", "22", "23", "00", "01", "02", "03", "04", "05", "06", "07", // 昨天8-19点
             "08", "09", "10", "11", // 昨天20-23点 
             "12", "13", "14", "15", "16", "17", "18", "19" // 今天0-7点（共24个）
           ];

           // 2. 强制设置图表容器高度（避免渲染不可见）
           const chartDom = document.getElementById('production-chart-container');
           if (!chartDom) {
             console.error("图表容器不存在！请检查id：production-chart-container");
             return;
           }
           chartDom.style.width = '100%';
           chartDom.style.height = '100%';

           // 3. 按数据源顺序提取产量（1:1对应标签，极简映射）
           const outputData = this.Hour24.map(item => {
             // 兼容空值、字符串格式，转数字失败设为0
             return item["1_hourly_production"] 
               ? parseInt(item["1_hourly_production"].toString().trim(), 10) || 0 
               : 0;
           });

           // 4. 极简图表配置（清晰直观）
           const chartOption = {
               animation: true, // 首次渲染时播放动画（可选，默认true）
              animationDuration: 500, // 首次动画时长（500ms，可调整）			   
		
             tooltip: {
               trigger: "axis",
               formatter: "{b}时：{c}片" // 提示框显示“XX时：XX片”
             },
             grid: {
               left: "5%",
               right: "5%",
               bottom: "15%",
               top: "12%",
               containLabel: true
             },
             xAxis: [
               {
                 type: "category",
                 data: hourLabels,
                 axisLine: { lineStyle: { color: "#ddd" } },
                 axisLabel: {
                   fontSize: 12,
                   color: "#333",
                   interval: 0 // 强制显示所有24个标签
                 }
               }
             ],
             yAxis: [
               {
                 type: "value",  
                 /* name: "片", */
                 min: 0, // 强制y轴从0开始
                 splitLine: { lineStyle: { color: "#f5f5f5" } },
                 axisLabel: { color: "#333", fontSize: 11 },
                 axisLabel: { show: false }, // 隐藏数字
               }
             ],
             series: [
               {
                 name: "产量",
                 type: "bar",
                 data: outputData,
                 barWidth: "60%",
                 itemStyle: { color: "#fac858", borderRadius: 3 },
                 label: {
                   show: true,
                   position: "top",
                   fontSize: 12,
                   color: "#333",
                   formatter: "{c}" // 柱子顶部显示产量数值
                 }
               }
             ]
           };

           // 初始化图表（全局只初始化1次，避免重复创建）
           if (!this.productionChartInstance) {
             this.productionChartInstance = this.$echarts.init(chartDom);
           }

           // 关键：第2个参数 { animation: false } 禁用更新动画
           this.productionChartInstance.setOption(chartOption, { animation: false });

           // 窗口 resize 时自动重绘
           //window.addEventListener('resize', () => initProductionChart.resize());
         }
        ,
   
@@ -1242,6 +1591,9 @@
         machineWater(){
            this.echarsInit1()
         },
         Hour24(){
            this.initProductionChart();
         },
            shuzu1(){
            this.dingdanxiangqing(),
                this.dingdanxiangqing1()
@@ -1261,6 +1613,10 @@
      this.loadAjxss('大屏总电耗数据',sql,flag,"machineElectric")
        sql="{call machine_warningScreen()}"
      this.loadAjxss('大屏设备警告数据',sql,flag,"warning")
      sql="{call bigScreen_24Hour()}"
      this.loadAjxss('大屏24小时产量数据',sql,flag,"Hour24")
      sql="{call bigScreen_operatorQuery()}"
      this.loadAjxss('大屏工艺值班表',sql,flag,"operator")
        sql="{call bigScreen_water()}"
      this.loadAjxss('大屏总水耗数据',sql,flag,"machineWater")
        
@@ -1283,6 +1639,14 @@
            sql="{call machine_warningScreen()}"
            this.interValLoadAjxs('大屏设备警告数据',sql,flag,"warning")
         },5000)    
        await setInterval(()=>{
         sql="{call bigScreen_24Hour()}"
         this.interValLoadAjxs('大屏24小时产量数据',sql,flag,"Hour24")
      },5000)  
        await setInterval(()=>{
         sql="{call bigScreen_operatorQuery()}"
         this.interValLoadAjxs('大屏值班人员表',sql,flag,"operator")
      },50000)
       await setInterval(()=>{
            sql="{call bigScreen_water()}"
            this.interValLoadAjxs('大屏总水耗数据',sql,flag,"machineWater")