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

wu

2025-11-24 3d3e4173c301fd36c16b9a25cd1f8c9f27257ed0

 gmms/WebContent/bigScreen/allGlassScreen.jsp

@@ -6,33 +6,782 @@
<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;
             text-align: center;
               font-size: 40px;
            text-align: center;
            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 {
            width: 15%;
            margin-left:1%;
            width: 14%;
            height: 100%;
        }
        #main2 {
@@ -109,1012 +858,7 @@
        .boli {
          opacity:0.5;
          
        }
        #cangchu {
            width: 75px;
            height: 25px;
            position: absolute;
            top: 820px;
            left: 1507px;
        }
        /* -45 
        -50
        */
        #A4 {
            width: 65px;
            height: 55px;
            position: Absolute;
            top: 775px;
            left: 1250px
        }
        #A7 {
            width: 15px;
            height: 45px;
            position: Absolute;
            top: 785px;
            left: 1185px
        }
        #A9 {
            width: 15px;
            height: 45px;
            position: Absolute;
            top: 785px;
            left: 1139px
        }
        #A10 {
            width: 15px;
            height: 45px;
            position: Absolute;
            top: 840px;
            left: 1139px
        }
        #A11 {
            width: 15px;
            height: 45px;
            position: Absolute;
            top: 840px;
            left: 1185px
        }
        #A14 {
            width: 12px;
            height: 12px;
            position: Absolute;
            top: 922px;
            left: 1140px
        }
        #A15 {
            width: 12px;
            height: 12px;
            position: Absolute;
            top: 922px;
            left: 1183px
        }
        #A16 {
            width: 12px;
            height: 12px;
            position: Absolute;
            top: 951px;
            left: 1183px
        }
        #A17 {
            width: 12px;
            height: 12px;
            position: Absolute;
            top: 951px;
            left: 1163px
        }
        #A18 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 951px;
            left: 1140px
        }
        #A20 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 951px;
            left: 1122px
        }
        #A21 {
            width: 45px;
            height: 65px;
            
            position: Absolute;
            top: 918px;
            left: 1075px;
            
        }
        #A22 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 953px;
            left: 1061px;
        }
        #A23 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 953px;
            left: 1047px;
        }
        #A24 {
            width: 45px;
            height: 65px;
            
            position: Absolute;
            top: 918px;
            left: 1000px;
        }
        #A25 {
            width: 35px;
            height: 50px;
            
            position: Absolute;
            top: 932px;
            left: 945px;
        }
        #A26 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 953px;
            left: 926px;
        }
        #A28 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 953px;
            left: 912px;
        }
        #A29 {
            width: 25px;
            height: 25px;
            
            position: Absolute;
            top: 949px;
            left: 885px;
        }
        #A30 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 871px;
        }


        #A31 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 851px;
        }
        #A32 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 832px;
        }
        #A33 {
            width: 22px;
            height: 52px;
            
            position: Absolute;
            top: 923px;
            left: 804px;
        }
        #A34 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 956px;
            left: 775px;
        }
        #A35 {
            width: 57px;
            height: 55px;
            
            position: Absolute;
            top:  920px;
            left: 705px;
        }
        #A37 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 956px;
            left: 680px;
        }
        #A38 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 956px;
            left: 642px;
        }
        #A39 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 956px;
            left: 606px;
        }
        #A40 {
            width: 37px;
            height: 44px;
            
            position: Absolute;
            top: 931px;
            left: 556px;
        }
        #A41 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 538px;
        }
        #A42 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 517px;
        }
        #B31 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 884px;
            left: 850px;
        }
        #B32 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 884px;
            left: 832px;
        }
        #B33 {
            width: 22px;
            height: 52px;
            
            position: Absolute;
            top: 853px;
            left: 804px;
        }
        #B34 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 886px;
            left: 775px;
        }
        #B35 {
            width: 57px;
            height: 55px;
            
            position: Absolute;
            top:  850px;
            left: 705px;
        }
        #B37 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 886px;
            left: 680px;
        }
        #B38 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 886px;
            left: 642px;
        }
        #B39 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 886px;
            left: 606px;
        }
        #B40 {
            width: 37px;
            height: 44px;
            
            position: Absolute;
            top: 861px;
            left: 556px;
        }
        #B41 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 884px;
            left: 538px;
        }
        #B42 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 884px;
            left: 517px;
        }
        #C31 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 814px;
            left: 850px;
        }
        #C32 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 814px;
            left: 832px;
        }
        #C33 {
            width: 22px;
            height: 52px;
            
            position: Absolute;
            top: 785px;
            left: 804px;
        }
        #C34 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 817px;
            left: 775px;
        }
        #C35 {
            width: 57px;
            height: 55px;
            
            position: Absolute;
            top:  780px;
            left: 705px;
        }
        #C37 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 817px;
            left: 680px;
        }
        #C38 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 817px;
            left: 642px;
        }
        #C39 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 817px;
            left: 606px;
        }
        #C40 {
            width: 37px;
            height: 44px;
            
            position: Absolute;
            top: 791px;
            left: 556px;
        }
        #C41 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 814px;
            left: 538px;
        }
        #C42 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 814px;
            left: 517px;
        }
        #D31 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 746px;
            left: 850px;
        }
        #D32 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 746px;
            left: 832px;
        }
        #D33 {
            width: 22px;
            height: 52px;
            
            position: Absolute;
            top: 715px;
            left: 804px;
        }
        #D34 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 748px;
            left: 775px;
        }
        #D35 {
            width: 57px;
            height: 55px;
            
            position: Absolute;
            top:  711px;
            left: 705px;
        }
        #D37 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 748px;
            left: 680px;
        }
        #D38 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 748px;
            left: 642px;
        }
        #D39 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 748px;
            left: 606px;
        }
        #D40 {
            width: 37px;
            height: 44px;
            
            position: Absolute;
            top: 723px;
            left: 556px;
        }
        #D41 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 746px;
            left: 538px;
        }
        #D42 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 746px;
            left: 517px;
        }
        #s1 {
            width: 15px;
            height: 40px;
            
            position: Absolute;
            top: 906px;
            left: 850px;
        }
        #s2 {
            width: 15px;
            height: 40px;
            
            position: Absolute;
            top: 838px;
            left: 850px;
        }
        #s3 {
            width: 15px;
            height: 40px;
            
            position: Absolute;
            top: 769px;
            left: 850px;
        }
        #s6 {
            width: 15px;
            height: 40px;
            
            position: Absolute;
            top: 906px;
            left: 515px;
        }
        #s5 {
            width: 15px;
            height: 40px;
            
            position: Absolute;
            top: 838px;
            left: 515px;
        }
        #s4 {
            width: 15px;
            height: 40px;
            
            position: Absolute;
            top: 769px;
            left: 515px;
        }

        #A43 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 498px;
        }
        #A44 {
            width: 190px;
            height: 26px;
            
            position: Absolute;
            top: 949px;
            left: 297px;
        }
        #A45 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 277px;
        }
        #A47 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 258px;
        }
        #A49 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 240px;
        }
        #A49-1 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 223px;
        }
        #A50 {
            width: 25px;
            height: 25px;
            
            position: Absolute;
            top: 950px;
            left: 197px;
        }
        #A51-1 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 954px;
            left: 183px;
        }
        #A51-2 {
            width: 69px;
            height: 34px;
            
            position: Absolute;
            top: 945px;
            left: 110px;
        }
        #A51-3 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 955px;
            left: 95px;
        }
        #A52-1 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 955px;
            left: 75px;
        }
        #A52-2 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 955px;
            left: 55px;
        }
        #A52-3 {
            width: 23px;
            height: 125px;
            
            position: Absolute;
            top: 820px;
            left: 50px;
        }
        #A52-4 {
            width: 17px;
            height: 30px;
            
            position: Absolute;
            top: 787px;
            left: 52px;
        }
        #A52-5 {
            width: 17px;
            height: 75px;
            
            position: Absolute;
            top: 703px;
            left: 52px;
        }
        #A52-6 {
            width: 17px;
            height: 75px;
            
            position: Absolute;
            top: 618px;
            left: 52px;
        }
        #A55-1 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 603px;
            left: 55px;
        }
        #A55-2 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 585px;
            left: 55px;
        }
        #A55-3 {
            width: 17px;
            height: 30px;
            
            position: Absolute;
            top: 546px;
            left: 52px;
        }
        #A55-4 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 522px;
            left: 55px;
        }
        #A55-5 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 522px;
            left: 73px;
        }
        #A55-6 {
            width: 70px;
            height: 40px;
            
            position: Absolute;
            top: 507px;
            left: 89px;
        }
        #A55-7 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 522px;
            left: 162px;
        }
        #A56-1 {
            width: 148px;
            height: 26px;
            
            position: Absolute;
            top: 516px;
            left: 179px;
        }
        #A56-2 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 522px;
            left: 332px;
        }
        #A56-3 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 522px;
            left: 349px;
        }
        #A56-4 {
            width: 22px;
            height: 22px;
            
            position: Absolute;
            top: 516px;
            left: 364px;
        }
        #A56-5 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 521px;
            left: 390px;
        }
        #A59 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 548px;
            left: 390px;
        }
        #A61 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 572px;
            left: 390px;
        }
        #A63 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 592px;
            left: 390px;
        }
        #A64 {
            width: 12px;
            height: 20px;
            
            position: Absolute;
            top: 614px;
            left: 390px;
        }
        #A65 {
            width: 12px;
            height: 20px;
            
            position: Absolute;
            top: 614px;
            left: 405px;
        }
        #A66 {
            width: 684px;
            height: 50px;
            
            position: Absolute;
            top: 600px;
            left: 438px;
        }
        #A67 {
            width: 12px;
            height: 20px;
            
            position: Absolute;
            top: 617px;
            left: 1140px;
        }
        #A68 {
            width: 12px;
            height: 20px;
            
            position: Absolute;
            top: 617px;
            left: 1158px;
        }
        #A69 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 581px;
            left: 1157px;
        }
        #A70 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 545px;
            left: 1157px;
        }
        #A71 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 508px;
            left: 1157px;
        }
        #A72 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 466px;
            left: 1157px;
        }
        #A73 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 430px;
            left: 1157px;
        }
        #A74 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 430px;
            left: 1175px;
        }
        #A75 {
            width: 76px;
            height: 32px;
            
            position: Absolute;
            top: 416px;
            left: 1190px;
        }
        #A76 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 430px;
            left: 1268px;
        }
        #A78 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 430px;
            left: 1284px;
        }
        #A78-1 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 430px;
            left: 1299px;
        }
        #A79 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 432px;
            left: 1333px;
        }
        #A80 {
            width: 18px;
            height: 18px;
            
            position: Absolute;
            top: 429px;
            left: 1312px;
        }
        #A81 {
            width: 130px;
            height: 18px;
            
            position: Absolute;
            top: 429px;
            left: 1349px;
        }
        #A82 {
            width: 82px;
            height: 18px;
            
            position: Absolute;
            top: 429px;
            left: 1485px;
        }
        #A83-1 {
            width: 22px;
            height: 38px;
            
            position: Absolute;
            top: 415px;
            left: 1575px;
        }
        #A83-2 {
            width: 22px;
            height: 38px;
            
            position: Absolute;
            top: 415px;
            left: 1616px;
        }
        #A84 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 432px;
            left: 1655px;
        }
        #A85 {
            width: 145px;
            height: 12px;
            
            position: Absolute;
            top: 432px;
            left: 1675px;
        }
        #A89 {
            width: 12px;
            height: 12px;
            
            position: Absolute;
            top: 432px;
            left: 1832px;
        }
        }           
        .divGrenn{
              background-color:green;
              display:block
@@ -1130,16 +874,121 @@
        .divnull{
             display:none
        }
#A3 {
         /* -45 
        -50
        */
        #A4 {
            width: 65px;
            height: 55px;
            position: Absolute;
            top: 775px;
            left: 1335px;
            background-color:green;
              display:block
            left: 1250px
        }
    </style>


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

#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;
}  

#staff-container {
  width: 30%;
  height: 100%;
  box-sizing: border-box;
  padding: 0px;
  background-color: white;
}

#staff-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
  text-align: center;
}

/* 滚动容器：行数超出时显示滚动条 */
#staff-scroll-wrapper {
  padding-right: 5px; /* 预留滚动条宽度，避免内容被遮挡 */
}

#staff-table-wrapper {
  gap: 0px; /* 两组表格间距 */
  width: 100%; /* 占满滚动容器宽度 */
}

/* 子表格样式（每组两列，共四列） */
.staff-subtable {
  width: 50%; /* 每组占50%宽度，四列总占满30%容器 */
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

.staff-subtable th, .staff-subtable td {
  border: 1px solid #ddd;
  padding: 6px 3px;
  width: 50%; /* 组内两列等宽 */
}

.staff-subtable th {
  background-color: #f0f0f0;
  font-size: 13px;
}

.staff-subtable input {
  width: 100%;
  height: 20px;
  padding: 0 3px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}

/* 滚动条样式优化（可选） */
#staff-scroll-wrapper::-webkit-scrollbar {
  width: 6px;
}
#staff-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
/* 去除输入框边框及聚焦轮廓 */
.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; 
}
.staff-subtable input:hover {
  background-color: #f5f5f5; /* 浅灰色背景 */
}
.staff-subtable input.saving {
  background-color: #fff3cd; /* 浅黄色背景提示 */
 </style>  
<title>大屏显示</title>
</head>
<body>
@@ -1154,36 +1003,88 @@
                  <div id="main1-2-1">{{items1['1_recipe_no']}}</div>
                </div>
         <div id="main1-2">当班计划数量：
                   <div id="main1-2-1">{{items1['4_smallglass_sum']}}</div>
                   <div id="main1-2-1">{{items1['4_count']}}</div>
                </div>
                <div id="main1-2">当班完成数量：
                   <div id="main1-2-1">{{items1['2_smallglass_completed']}}   </div>
                   <div id="main1-2-1">{{items1['6_glassSum']}}   </div>
                </div>
            </div>
            <div id="main4"></div>
            <div id="main2"></div>
            <div id="main3">
                <div id="main3-1">
                    <div id="main3-1-1">总耗电：<span>{{shuzu2[0]['0_@jiqidianliang']}}kw</span></div>
                    <div id="main3-1-1">总耗电：<span>{{machineElectric[0]['2_total_consumption']}}kw</span></div>
                    <div id="main3-1-2"></div>
                </div>
                <div id="main3-2">
                    <div id="main3-2-1">总耗水：<span>{{shuzu2[0]['1_@jiqidianliang1']}}m³</span></div>
                    <div id="main3-2-1">总耗水：<span>{{machineWater[0]['2_total_consumption']}}m³</span></div>
                    <div id="main3-2-2"></div>
                </div>
            </div>
        </div>
        <div id="footer">
            <img style="width: 100%;height: 100%;" src="../img/大屏.png">
        </div>
        <div id="cangchu" >
            <img style="width: 100%;height: 100%;" src="../img/cangchu.png">
        </div>
<div id='A3' class='boli '></div>
       <div v-for="items  in shuzu" :class="items['6_class']" :id="items['3_class_html']" v-if="Object.keys(shuzu[0]).length!=0" class="boli" ></div> 
		
    </div>
        <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']"  
      class="warn-item" 
       :id="'warn-' + warnItem['0_id']" 
       v-show="warnItem['4_state'] === '1'"
       :title="warnItem['3_content_value'] || '无详细信息'"
      style="   
        position: absolute; 
        top: 450px; 
        background: rgba(255, 0, 0, 0.4);  
        color: white;  
        z-index: 10;
        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>
@@ -1200,15 +1101,15 @@
     el:'#app',
     mixins:[mixin],
     data:{
        shuzu:[{}],
       // shuzu:[{}],
        shuzu1:[{}],
          shuzu2:[{}],
          warning:[],
          Hour24:[],
        machineElectric:[{}],
         machineWater:[{}],

		  
		  
		  
        machineWater:[{}],
        operator:[{}],
		
    val: {
            title:{
               text:'',
@@ -1269,32 +1170,16 @@
        },

      ],
      series: [{
          name: '电耗',
      series: [{ 
          name: "", // 初始为空
          type: 'bar',
          barWidth: '80%',
          data: [220, 152, 200, 334, 390, 330, 220],
          itemStyle: {
            color: 'rgb(180, 180, 180)'
          }
        },{
          name: '电耗2',
          type: 'bar',
          barWidth: '40%',
          data: [220, 152, 200, 334, 390, 330, 220],
          itemStyle: {
              color: 'rgb(30, 144, 255)'
          }
      },

      ]
          data: [],
          itemStyle: { color: '' }
        }]
    },
    val1: {
        borderColor:'#082352',
  title: {
    // text: '成品库存',
    // left: '290px',
    // top: '0px'
    text:'合格率',//主标题文本
            left:'center',
            top:'45%',
@@ -1336,7 +1221,7 @@
        // position: 'inside',
        show: true,
        formatter(param) {
          // correct the percentage

          return param.name + ' (' + param.percent + '%)';
        }
    },
@@ -1344,13 +1229,6 @@
        { value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
        { value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
    ],
    //   emphasis: {
    //     itemStyle: {
    //       shadowBlur: 10,
    //       shadowOffsetX: 0,
    //       shadowColor: 'rgba(0, 0, 0, 0.5)'
    //     }
    //   }
      itemStyle: {
        normal:{
        label:{
@@ -1363,94 +1241,310 @@
        }

    }
  ]
  ],

    },
        
     },
     },/*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() {
           var datashijian=[];
              var s=7;
              while(s>0){
                 s=s-1;
	    	    	
                  var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000);
           // 1. 生成近7天日期（和水耗表逻辑一致）
           var datashijian = [];
           var s = 7;
           while (s > 0) {
             s = s - 1;
             var date_day7 = new Date(Date.parse(new Date()) - s * 24 * 60 * 60 * 1000);
             var day7 = (date_day7.getMonth() + 1) + "/" + date_day7.getDate();
             datashijian.push(day7);
           }

                  var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
                  datashijian.push(day7);
	    	        
	    	        
              }
            let HisArr="";
                let dianhao=[];
                let shijian=[];
           // 2. 初始化图表容器（对应电耗表容器main3-1-2）
           let HisArr = "";
           let dianhao = []; // 电耗数据数组
           HisArr = this.$echarts.init(document.getElementById('main3-1-2'));

				
            HisArr = this.$echarts.init(document.getElementById('main3-1-2'));
				
            this.val.yAxis[0].name="电耗";
            this.val.series[0].name='电耗(kw.h)'
                this.val.series[1].name='电耗(kw.h)1'
            for(let i in this.machineElectric){
               dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
                    shijian.push(this.machineElectric[i]["1_date"]);
            }
                console.log(dianhao);
                this.val.title.text="总耗电(kw.h)"
               this.val.series[0].itemStyle.color='rgb(84,112,198)'
               this.val.xAxis[0].data=datashijian;
               this.val.series[0].data=dianhao;
                    this.val.series[1].data=dianhao;
               HisArr.setOption(this.val);
            this.loading=false
          },
         echarsInit1(){
          var datashijian=[];
           var s=7;
           while(s>0){
              s=s-1;
    	    	
               var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000);
           // 3. 从数据源提取电耗数据（复用water的逻辑，变量名对应电耗）
           for (let i in this.machineElectric) { // 已统一为machineElectric
             dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
           }

               var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
               datashijian.push(day7);
    	        
    	        
           }
            let HisArr="";
                let dianhao=[];
                let shijian=[];
            HisArr = this.$echarts.init(document.getElementById('main3-2-2'));
            this.val.yAxis[0].name="水耗";
            this.val.series[0].name='水耗(m³)'
            for(let i in this.machineWater){
               dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
                    shijian.push(this.machineWater[i]["1_date"]);
            }
                this.val.title.text="总耗水(m³)"
               this.val.series[0].itemStyle.color='#00ff00'
               this.val.xAxis[0].data=datashijian;
               this.val.series[0].data=[78,80,84,75,82,77,80];
               HisArr.setOption(this.val);
            this.loading=false
         },
           // 4. 复用val配置，统一样式（和水耗表保持一致）  
           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: '电耗(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'; // 电耗表颜色（可自定义，与水耗区分）
           this.val.xAxis[0].data = datashijian; // x轴日期（和水耗一致）
           this.val.series[0].data = dianhao; // 绑定电耗数据

           // 5. 应用配置并渲染
           HisArr.setOption(this.val);
           this.loading = false;
         }
        ,
        echarsInit1() {
           // 1. 生成近7天日期（和水耗表逻辑一致）
           var datashijian = [];
           var s = 7;
           while (s > 0) {
             s = s - 1;
             var date_day7 = new Date(Date.parse(new Date()) - s * 24 * 60 * 60 * 1000);
             var day7 = (date_day7.getMonth() + 1) + "/" + date_day7.getDate();
             datashijian.push(day7);
           }

           // 2. 初始化图表容器（对应电耗表容器main3-1-2）
           let HisArr = "";
           let dianhao = []; 
           HisArr = this.$echarts.init(document.getElementById('main3-2-2'));

           for (let i in this.machineWater) { // 
             dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
           }
           // 4. 复用val配置，统一样式（和水耗表保持一致）
            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; // 绑定电耗数据

           // 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());
         }
        ,
	
            dingdanxiangqing(){
            let HisArr="";
            HisArr = this.$echarts.init(document.getElementById('main2'));
                let a = {
                    value: 942,

                    name: "成品",
                    name: "已完成",
                    itemStyle: { color: '#53a2ff' }

                }
                let b = {
                    value: 58,
                    name: "次品",
                    name: "未完成",
                    itemStyle: { color: 'darkseagreen' }

                }
                this.val1.title.text="合格率"
                this.val1.title.text="今日产量"
                this.val1.title.top="45%"
                this.val1.title.left="40%"
                this.val1.series[0].data[0]=a
@@ -1488,59 +1582,17 @@
        
     },
     watch:{
        shuzu(){
           for(item of this.shuzu){
                
                if((item["3_class_html"].indexOf("33")>-1) || (item["3_class_html"].indexOf("35")>-1) || (item["3_class_html"].indexOf("40")>-1)){
                    if(item["1_connect_state"]=="已连接"){
                 if(item["5_baojin"]>0){
                        //水刀
                        if(item["3_class_html"].indexOf("35")>-1){
                            if(item["5_baojin"]>1){
                                item["6_class"]='divYellow';
                            }else{
                                item["4_shuliang"]==4?item["6_class"]='divGrenn':item["6_class"]='divnull';
                            }
                            
                        }else{
                            item["6_class"]='divYellow';
                        }
						  
                 }else{
                       
                            //钻孔 加工中心
                            item["4_shuliang"]==2?item["6_class"]='divGrenn':item["6_class"]='divnull';
                        
						  
                 }
                }else{
                   item["6_class"]='divRed';
                } 
                }
            else{
                    if(item["1_connect_state"]=="已连接"){
                 if(item["5_baojin"]>0){
                    item["6_class"]='divYellow';
                 }else{
                   if((item["0_machine_id"]==76)||(item["0_machine_id"]==77)||(item["0_machine_id"]==26)||(item["0_machine_id"]==53)){

                     item["6_class"]='divGrenn';
                    }else{
                    item["4_shuliang"]>0?item["6_class"]='divGrenn':item["6_class"]='divnull';}
                    }
                }else{
                   item["6_class"]='divRed';
                }
				  
                }
				  
           }
         },
        //shuzu(){},
			
			
         machineElectric(){
            this.echarsInit()
         },
         machineWater(){
            this.echarsInit1()
         },
         Hour24(){
            this.initProductionChart();
         },
            shuzu1(){
            this.dingdanxiangqing(),
@@ -1549,53 +1601,54 @@
            
      },
     async mounted(){
      //  let canshu={
      //          sql:"{call AXJ_dapingxianshijiqishuju()}",
      //          flag:2,
      //          vals:"shuzu"
      //       }
      //  let canshu1={
      //          sql:"{call AXJ_dapingxianshi_dingdanshuju()}",
      //          flag:2,
      //          vals:"shuzu1"
      //       }
      //  this.shuzu1=await this.returnloadAjxss(canshu1);
		
	
 
        let sql=""
        let flag=2
        sql="{call AXJ_dapingxianshijiqishuju()}"
      this.loadAjxss('大屏显示',sql,flag,"shuzu")
        sql="{call AXJ_dapingxianshi_dingdanshuju()}"
       // sql="{call AXJ_dapingxianshijiqishuju()}"
      //this.loadAjxss('大屏显示',sql,flag,"shuzu")
        sql="{call bigScreen_order()}"
      this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")
        sql="{call AXJ_a_largeScreen_sumelectric_select()}"
        sql="{call bigScreen_ammeter()}"
      this.loadAjxss('大屏总电耗数据',sql,flag,"machineElectric")
        sql="{call AXJ_a_largeScreen_sumselect()}"
      this.loadAjxss('大屏总能耗总数据',sql,flag,"shuzu2")
        sql="{call AXJ_a_largeScreen_sumwater_select()}"
        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")
        

      //  await setInterval(()=>{
            
        //    sql="{call AXJ_dapingxianshijiqishuju()}"
       //   this.interValLoadAjxs('大屏显示',sql,flag,"shuzu")
       // },5000)
        await setInterval(()=>{
            
            sql="{call AXJ_dapingxianshijiqishuju()}"
          this.interValLoadAjxs('大屏显示',sql,flag,"shuzu")
        },5000)
        await setInterval(()=>{
            
            sql="{call AXJ_dapingxianshi_dingdanshuju()}"
            sql="{call bigScreen_order()}"
            this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
         },5000)
       await setInterval(()=>{
            sql="{call AXJ_a_largeScreen_sumelectric_select()}"
            sql="{call bigScreen_ammeter()}"
            this.interValLoadAjxs('大屏总电耗数据',sql,flag,"machineElectric")
         },5000)
        await setInterval(()=>{
            sql="{call AXJ_a_largeScreen_sumselect()}"
            this.interValLoadAjxs('大屏总能耗总数据',sql,flag,"shuzu2")
            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 AXJ_a_largeScreen_sumwater_select()}"
            sql="{call bigScreen_water()}"
            this.interValLoadAjxs('大屏总水耗数据',sql,flag,"machineWater")
         },5000)
      
@@ -1608,310 +1661,6 @@






// function drawLine2(){

// var chartDom = document.getElementById('main2');
// var myChart = echarts.init(chartDom);
// var option;
// alert(app.$data.shuzu1[0]['2_smallglass_completed']);
// option = {
    

//   borderColor:'#082352',
//   title: {
//     // text: '成品库存',
//     // left: '290px',
//     // top: '0px'
//     text:'合格率',//主标题文本
//             left:'center',
//             top:'45%',
//             left:'40%',
//             textStyle:{
//             color:'#454c5c',
//             align:'center'
//             },
//             subtextStyle:{
//                 fontFamily : "微软雅黑",
//                 color:'#6c7a89',
//             }

//   },
  
//   tooltip: {
//     trigger: 'item',
//     textStyle:{   
//     }
//   },
//   legend: {
//     // orient: 'vertical',
//     left: 'left',
//     textStyle:{   
        
//     }
//   },
//   textStyle:{
    
//   },
//   series: [
//     {

//     type: 'pie',
//     radius : ['40%','70%'],
//     center: ['50%', '50%'],
//     minAngle:'15',
//     label: {
//         // position: 'inside',
//         show: true,
//         formatter(param) {
//           // correct the percentage
//           return param.name + ' (' + param.percent + '%)';
//         }
//     },
//     data: [
//         { value: app.$data.shuzu1[0]['2_smallglass_completed'], name: '成品',itemStyle:{color:'#53a2ff'} },
//         { value: app.$data.shuzu1[0]['3_smallglass_processing'], name: '次品',itemStyle:{color:'darkseagreen'} }
//     ],
//     //   emphasis: {
//     //     itemStyle: {
//     //       shadowBlur: 10,
//     //       shadowOffsetX: 0,
//     //       shadowColor: 'rgba(0, 0, 0, 0.5)'
//     //     }
//     //   }
//       itemStyle: {
//         normal:{
//         label:{
//             show:true,
//                 //formatter: "{b} :\n  {c} \n ({d}%)",
//                 formatter: "{b} :\n   ({d}%)",
//                     position:"inner"
//                  }
//             }
//         }

//     }
//   ]
// };

// option && myChart.setOption(option);



// var chartDom4 = document.getElementById('main4');
// var myChart4 = echarts.init(chartDom4);
// var option4;
// option4 = {
    

//   borderColor:'#082352',
//   title: {
//     // text: '成品库存',
//     // left: '290px',
//     // top: '0px'
//     text:'订单加工',//主标题文本
//             left:'center',
//             top:'45%',
//             left:'40%',
//             textStyle:{
//             color:'#454c5c',
//             align:'center'
//             },
//             subtextStyle:{
//                 fontFamily : "微软雅黑",
//                 color:'#6c7a89',
//             }

//   },
  
//   tooltip: {
//     trigger: 'item',
//     textStyle:{   
//       fontsize: 12,
//     }
//   },
//   legend: {
//     // orient: 'vertical',
//     left: 'left',
//     textStyle:{   
//       fontsize: 12,
//     }
//   },
//   textStyle:{
//     fontsize: 12,
//   },
//   series: [
//     {

//     type: 'pie',
//     radius : ['40%','70%'],
//     center: ['50%', '50%'],
//     minAngle:'15',
//     label: {
//         // position: 'inside',
//         show: true,
//         formatter(param) {
//           // correct the percentage
//           return param.name + ' (' + param.percent + '%)';
//         }
//     },
//     data: [
//         { value: 700, name: '已完成',itemStyle:{color:'#53a2ff'} },
//         { value: 300, name: '未完成',itemStyle:{color:'darkseagreen'} }
//     ],
//     //   emphasis: {
//     //     itemStyle: {
//     //       shadowBlur: 10,
//     //       shadowOffsetX: 0,
//     //       shadowColor: 'rgba(0, 0, 0, 0.5)'
//     //     }
//     //   }
//       itemStyle: {
//         normal:{
//         label:{
//             show:true,
//                 //formatter: "{b} :\n  {c} \n ({d}%)",
//                 formatter: "{b} :\n   ({d}%)",
//                     position:"inner"
//                  }
//             }
//         }

//     }
//   ]
// };

// option4 && myChart4.setOption(option4);



// var chartDom1 = document.getElementById('main3-1-2');
// var myChart1 = echarts.init(chartDom1);
// var option1;

// option1 = {
// title: {
//     text: '耗电统计图',
//     right: '0px',
//     textStyle:{
              
        
//     }
     
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     },
//     textStyle:{   
  
//     }
//   },
//   grid: {
//     left: '3%',
//     right: '4%',
//     bottom: '3%',
//     containLabel: true
//   },
//   xAxis: [
//     {
//       type: 'category',
//       data: datashijian,
//       axisTick: {
//         alignWithLabel: true
//       },
//       axisLabel:{
        
//       }
//     }
//   ],
//   yAxis: [
//     {
//       type: 'value',
//       axisLabel:{
      
//       }
//     }
//   ],
//   series: [
//     {
//       name: '产量',
//       type: 'bar',
//       barWidth: '40%',
//       data: [100, 52, 200, 334, 330, 220, 80, 460, 310, 120, 430, 260, 250],
//       itemStyle:{color:'#53a2ff'}
//     }
//   ]
// };

// option1 && myChart1.setOption(option1);


// var chartDom2 = document.getElementById('main3-2-2');
// var myChart2 = echarts.init(chartDom2);
// var option2;

// option2 = {
// title: {
//     text: '耗水统计图',
//     right: '0px',
//     textStyle:{
              
      
//     }
     
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     },
//     textStyle:{   
        
//     }
//   },
//   grid: {
//     left: '3%',
//     right: '4%',
//     bottom: '3%',
//     containLabel: true
//   },
//   xAxis: [
//     {
//       type: 'category',
//       data: datashijian,
//       axisTick: {
//         alignWithLabel: true
//       },
//       axisLabel:{
        
//       }
//     }
//   ],
//   yAxis: [
//     {
//       type: 'value',
//       axisLabel:{
        
//       }
//     }
//   ],
//   series: [
//     {
//       name: '产量',
//       type: 'bar',
//       barWidth: '40%',
//       data: [100, 52, 200, 334, 330, 220, 80, 460, 310, 120, 430, 260, 250],
//       itemStyle:{color:'#53a2ff'}
//     }
//   ]
// };

// option2 && myChart2.setOption(option2);
//}
</script>
</body>
</html>