增加新副屏显示，增加主屏24小时产量图、值班表显示，回车进行修改

wu

2025-11-20 edc2ac91ef657a15c5688f25d8b653121fa9ed6e

 gmms/WebContent/bigScreen/allGlassScreen.jsp

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

<style>
      html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;  
      }
      #header1 {
            width: 100%;
            height: 5%;
            background-color: white;
            display: inline-block;
            text-align: center;
            font-size: 40px;
        }
        #header {
            width: 100%;
            height: 25%;
            background-color: white;
            display: flex;
        }  
        #footer {
            width: 100%;
            height: 70%;
            overflow: visible; /* 确保设备图上移后不被自身容器裁剪 */
            
        }
        #main1 {
            margin-left:1%;
            width: 14%;
            height: 100%;
        }
        #main2 {
            width: 20%;
            height: 100%;
        }
        #main4 {
            width: 20%;
            height: 100%;
        }
        #main3 {
            width: 45%;
            height: 100%;
            display: flex;
        }
        #main1-1 {
            width: 100%;
            height: 25%;
        }
        #main1-2 {
            width: 100%;
            height: 25%;
        }
        #main3-1 {
            width: 50%;
            height: 100%;
        }
        #main3-2 {
            width: 50%;
            height: 100%;

        }
        #main4-1 {
            width: 100%;
            height: 30%;

        }
        #main4-2 {
            width: 100%;
            height: 30%;

        }
        #main4-3 {
            width: 100%;
            height: 30%;

        }
        #main1-1-1 {
            font-size: 25px;
            margin-top: 2%;
        }
        #main1-2-1 {
            font-size: 25px;
            margin-top: 2%;
        }
        #main3-1-1 {
            width: 100%;
            height: 20%;
        }
        #main3-1-2 {
            width: 100%;
            height: 80%;
        }
        #main3-2-1 {
            width: 100%;
            height: 20%;
        }
        #main3-2-2 {
            width: 100%;
            height: 80%;
        }


        .boli {
          opacity:0.5;
          
        }
     
       
    
 
        .divGrenn{
              background-color:green;
              display:block
        }
        .divRed{
              background-color:red;
              display:block
        }
        .divYellow{
              background-color:yellow;
              display:block
        }
        .divnull{
             display:none
        }
         /* -45 
        -50
        */
        #A4 {
            width: 65px;
            height: 55px;
            position: Absolute;
            top: 775px;
            left: 1250px
        }
   #warn-734,#warn-743{
        top: 555px !important;   
        left: 1421px !important;
@@ -875,6 +740,258 @@
  height: 18px !important;
  position: Absolute;
}

  html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;  
        
      }
      #header1 {
            width: 100%;  
            height: 5%;
            background-color: white;
            display: inline-block;
            text-align: center;
            font-size: 40px;
        }
        #header {
            width: 100%;   
            height: 20%;
            background-color: white;
            display: flex;
        }  
        #center {
            width: 100%;
            height: 60%;
            overflow: visible; /* 确保设备图上移后不被自身容器裁剪 */
            
        }
      #footer {
            width: 100%;
            height: 20%;
            overflow: visible; /* 确保设备图上移后不被自身容器裁剪 */
            
        }        
        #main1 {
            margin-left:1%;
            width: 14%;
            height: 100%;
        }
        #main2 {
            width: 20%;
            height: 100%;
        }
        #main4 {
            width: 20%;
            height: 100%;
        }
        #main3 {
            width: 45%;
            height: 100%;
            display: flex;
        }
        #main1-1 {
            width: 100%;
            height: 25%;
        }
        #main1-2 {
            width: 100%;
            height: 25%;
        }
        #main3-1 {
            width: 50%;
            height: 100%;
        }
        #main3-2 {
            width: 50%;
            height: 100%;

        }
        #main4-1 {
            width: 100%;
            height: 30%;

        }
        #main4-2 {
            width: 100%;
            height: 30%;

        }
        #main4-3 {
            width: 100%;
            height: 30%;

        }
        #main1-1-1 {
            font-size: 25px;
            margin-top: 2%;
        }
        #main1-2-1 {
            font-size: 25px;
            margin-top: 2%;
        }
        #main3-1-1 {
            width: 100%;
            height: 20%;
        }
        #main3-1-2 {
            width: 100%;
            height: 80%;
        }
        #main3-2-1 {
            width: 100%;
            height: 20%;
        }
        #main3-2-2 {
            width: 100%;
            height: 80%;
        }


        .boli {
          opacity:0.5;
          
        }           
        .divGrenn{
              background-color:green;
              display:block
        }
        .divRed{
              background-color:red;
              display:block
        }
        .divYellow{
              background-color:yellow;
              display:block
        }
        .divnull{
             display:none
        }
         /* -45 
        -50
        */
        #A4 {
            width: 65px;
            height: 55px;
            position: Absolute;
            top: 775px;
            left: 1250px
        }
        /* 底部 */
        #footer {
  width: 100%;
  height: 20%;
  overflow: visible;
  display: flex; /* 横向布局 */
  background-color: white; /* 与header背景统一 */
  box-sizing: border-box;
  padding: 10px;
}

/* 产量柱状图容器样式 */
#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); /* 减去标题高度 */
}

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

#staff-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  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 3px;
  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>
@@ -909,8 +1026,8 @@
                </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" 
@@ -919,21 +1036,59 @@
       :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;
        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: 100%;">
  <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 +1109,10 @@
        shuzu1:[{}],
          shuzu2:[{}],
          warning:[],
          Hour24:[],
        machineElectric:[{}],
      machineWater:[{}],
        machineWater:[{}],
        operator:[{}],
      
    val: {
            title:{
@@ -1088,11 +1245,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,1);
          document.activeElement.blur();
        },
		  
        echarsInit() {
           // 1. 生成近7天日期（和水耗表逻辑一致）
           var datashijian = [];
@@ -1129,13 +1334,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'; // 电耗表颜色（可自定义，与水耗区分）
@@ -1188,8 +1411,25 @@
                }
              }
            };
           this.val.series[0].name = '水耗(kw.h)'; 
           this.val.title.text = "总耗水(kw.h)"; 
            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; // 绑定电耗数据
@@ -1197,6 +1437,102 @@
           // 5. 应用配置并渲染
           HisArr.setOption(this.val);
           this.loading = false;
         }
        ,
        initProductionChart() {
           // 1. 固定x轴标签（昨天8点→今天7点，共24个时段，无第二天8点）
           const hourLabels = [
             "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", // 昨天8-19点
             "20", "21", "22", "23", // 昨天20-23点
             "00", "01", "02", "03", "04", "05", "06", "07" // 今天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，可调整）			   
           /*  title: {
               text: "24小时产量(片)（昨日8点-今日7点）",
               left: "center",
               textStyle: { fontSize: 15, color: "#333" }
             }, */
             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 }
               }
             ],
             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', () => productionChart.resize());
         }
        ,
   
@@ -1262,6 +1598,9 @@
         machineWater(){
            this.echarsInit1()
         },
         Hour24(){
            this.initProductionChart();
         },
            shuzu1(){
            this.dingdanxiangqing(),
                this.dingdanxiangqing1()
@@ -1281,6 +1620,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")
        
@@ -1303,6 +1646,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")