| | |
| | | <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; |
| | |
| | | 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> |
| | |
| | | </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" |
| | |
| | | :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> |
| | |
| | | shuzu1:[{}], |
| | | shuzu2:[{}], |
| | | warning:[], |
| | | Hour24:[], |
| | | machineElectric:[{}], |
| | | machineWater:[{}], |
| | | machineWater:[{}], |
| | | operator:[{}], |
| | | |
| | | val: { |
| | | title:{ |
| | |
| | | } |
| | | |
| | | } |
| | | ] |
| | | ], |
| | | |
| | | }, |
| | | |
| | | }, |
| | | },/*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 = []; |
| | |
| | | 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.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; // 绑定电耗数据 |
| | |
| | | // 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()); |
| | | } |
| | | , |
| | | |
| | |
| | | machineWater(){ |
| | | this.echarsInit1() |
| | | }, |
| | | Hour24(){ |
| | | this.initProductionChart(); |
| | | }, |
| | | shuzu1(){ |
| | | this.dingdanxiangqing(), |
| | | this.dingdanxiangqing1() |
| | |
| | | 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") |
| | | |
| | |
| | | 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") |