*{box-sizing:border-box;margin:0;padding:0} body{font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;background:#f2f4f7;color:#232a31;font-size:14px} /* ---------------------------------------------------------------- 顶栏 */ .topbar{height:56px;background:#1e88e5;color:#fff;display:flex;align-items:center;padding:0 20px;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.12)} .brand{font-size:18px;font-weight:700;letter-spacing:1px;white-space:nowrap} .tabs{margin-left:36px;display:flex;gap:4px;flex-shrink:0} .tab{background:rgba(255,255,255,.14);color:#fff;border:none;padding:8px 20px;border-radius:4px;cursor:pointer;font-size:14px;white-space:nowrap} .tab.active{background:#fff;color:#1e88e5;font-weight:700} .meta{margin-left:auto;font-size:13px;white-space:nowrap;color:#eaf4fd; display:flex;align-items:center;gap:16px} /* 账号名与时钟之间用一条竖线分组, 避免四个元素读成一串 */ .meta #whoamiName{padding-right:16px;border-right:1px solid rgba(255,255,255,.35)} /* 时钟与退出按钮之间稍宽一点 —— 退出是操作按钮, 要和只读信息分开 */ .meta #clock{padding-right:4px} /* ---------------------------------------------------------------- 布局 */ .view{display:none;padding:18px 20px 40px;max-width:1280px;margin:0 auto} .view.active{display:block} .bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} select{padding:7px 10px;border:1px solid #cfd6de;border-radius:4px;background:#fff;font-size:14px;min-width:180px;max-width:100%} .badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#e0e4e8;color:#5a6570;white-space:nowrap} .badge.on{background:#e6f7ed;color:#1b8a4b} .badge.off{background:#fdeaea;color:#c0392b} /* 型号徽章: 单变频/全变频 参数与地址完全不同, 必须比在线状态更醒目 */ .badge.model{background:#fff4e0;color:#8a5200;border:1px solid #ffd8a8;font-weight:700;letter-spacing:.3px} .badge.model.unknown{background:#fdeaea;color:#c0392b;border-color:#f5c2c2} .dim{color:#7a848e;font-size:13px} /* 顶栏是蓝底, 里面再用灰色的 .dim 就是"灰字压蓝底", 对比度只有约2:1, 正常亮度下看不清。顶栏内的 .dim 一律改成浅色。 */ .topbar .dim{color:#dceaf8} .topbar #clock{color:#eaf4fd} /* 账号名单独再加深一点, 让"我是谁"更醒目 */ .topbar #whoamiName{color:#ffffff;font-weight:600} .btn{padding:7px 16px;border:none;border-radius:4px;background:#1e88e5;color:#fff;cursor:pointer;font-size:13px;white-space:nowrap} .btn:hover{filter:brightness(1.08)} .btn.ghost{background:#fff;color:#1e88e5;border:1px solid #1e88e5} .btn.danger{background:#e74c3c} .btn.sm{padding:4px 10px;font-size:12px} .groups{display:flex;flex-direction:column;gap:14px} /* 参数分组内左右双栏, 宽屏充分利用横向空间 */ .gtwo{display:flex;gap:16px;align-items:flex-start} .gtwo>table{flex:1 1 0;min-width:0;width:auto} /* ================================================================== 宽屏(>=1100px): 每个参数变成一个独立的圆角卡片, 左右两栏并排。 这样即使一行有两个参数, 也不会看串——各自有边框, 一目了然。 ================================================================== */ @media(min-width:1100px){ .gtwo{gap:14px} .gtwo>table{flex:1 1 0;width:auto;border-collapse:separate;border-spacing:0} .gtwo>table>tbody{display:block} .gtwo>table>tbody>tr{ display:flex;align-items:center;gap:10px; border:1px solid #e6eaef;border-radius:8px;background:#fff; padding:10px 14px;margin-bottom:8px;transition:border-color .15s,box-shadow .15s; } .gtwo>table>tbody>tr:hover{border-color:#9fc7f5;box-shadow:0 1px 6px rgba(30,136,229,.12)} .gtwo>table>tbody>tr>td{border:none;padding:0;display:block;overflow:visible;text-overflow:clip} /* 参数名: 占剩余空间, 过长省略 */ .gtwo>table>tbody>tr>td:nth-child(1){ flex:1 1 auto;min-width:0;font-weight:600;color:#232a31; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 当前值 */ .gtwo>table>tbody>tr>td:nth-child(2){ flex:0 0 auto;width:76px;text-align:right;font-family:Consolas,Monaco,monospace; font-weight:700;font-size:15px; } /* 说明: 参数表已由 6 列改为 4 列(名称/当前值/设定值/操作), 第 3/4/5/6 列的旧规则在文件末尾由 #paramGroups 专属规则接管。 */ } @media(max-width:1080px){.gtwo{display:block}.gtwo>table+table{margin-top:0}} /* ---------------------------------------------------------------- 实时数据卡片 */ .gcard{background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.07);overflow:hidden} .gtitle{background:#f7f9fb;padding:10px 16px;font-weight:700;border-bottom:1px solid #e8edf2;color:#39434d} .gtoggle{cursor:pointer;user-select:none;display:flex;align-items:center} .gtoggle:hover{background:#eef3f8} .gcount{margin-left:10px;font-weight:400;font-size:12px;color:#9aa4ae} .caret{margin-left:auto;color:#9aa4ae;font-size:12px} .ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:#eef1f5} .item{background:#fff;padding:12px 16px} .item .k{color:#8a949e;font-size:12px;margin-bottom:5px} .item .v{font-size:19px;font-weight:700;color:#1e88e5;font-family:Consolas,Monaco,monospace;word-break:break-all} .item .v.stale{color:#c0392b} .item .v.ok{color:#1b8a4b} .item .v.bad{color:#c0392b} .item .v.warn{color:#e08e0b} .item .v.idle{color:#7a848e} /* 泵状态: 停止=黑 工频=蓝 */ .item .v.stop{color:#1f2a33} .item .v.info{color:#1e88e5} .item .u{font-size:12px;color:#9aa4ae;margin-left:3px;font-weight:400} /* ---------------- 组织与用户 */ .orgwrap{display:grid;grid-template-columns:210px 250px 1fr;gap:16px;align-items:start} .orgcol{min-width:0} .orglist{display:flex;flex-direction:column;gap:6px} .orgitem{border:1px solid #dfe4ea;border-radius:5px;padding:9px 11px;cursor:pointer; background:#fff;transition:border-color .12s,box-shadow .12s} .orgitem:hover{border-color:#1e88e5} .orgitem.sel{border-color:#1e88e5;box-shadow:0 0 0 2px rgba(30,136,229,.14);background:#f6faff} .orgitem .n{font-size:13.5px;font-weight:600;color:#1f2a33;word-break:break-all} .orgitem .m{font-size:11.5px;color:#8a949e;margin-top:3px;word-break:break-all} .orgempty{border:1px dashed #d7dde4;border-radius:5px;padding:14px;text-align:center; color:#9aa4ae;font-size:12.5px} .tipwarn{background:#fff8e6;border:1px solid #ffe0a3;color:#8a6d1a;padding:8px 11px; border-radius:4px;font-size:12.5px;margin:10px 0 0;line-height:1.6} .orgitem.static{cursor:default} .orgitem.static:hover{border-color:#dfe4ea} @media (max-width:900px){.orgwrap{grid-template-columns:1fr}} .empty{text-align:center;color:#9aa4ae;padding:60px 20px;font-size:14px} .warnbar{background:#fff8e6;border:1px solid #ffe0a3;color:#8a6d1a;padding:10px 14px;border-radius:4px;margin-bottom:14px;font-size:13px;line-height:1.7} /* ---------------------------------------------------------------- 表格(紧凑) 要点: 表格宽度按内容收缩(width:auto), 不撑满整屏。 否则第一列会被拉伸去吃掉剩余宽度, 参数名文字短就出现大片空白。 */ .grid{width:auto;max-width:100%;border-collapse:collapse;background:#fff;table-layout:fixed} .grid th{background:#f7f9fb;text-align:left;padding:9px 12px;font-weight:600;color:#5a6570;font-size:13px;border-bottom:1px solid #e8edf2} .grid td{padding:9px 12px;border-bottom:1px solid #f0f3f6;overflow:hidden;text-overflow:ellipsis} .grid tr:last-child td{border-bottom:none} .grid tbody tr:hover{background:#fafbfc} /* 通用表格宽度: 只约束第 1 列。 参数表(#paramGroups)是 4 列, 其余列宽在文件末尾用 #paramGroups 专属规则; 设备表(#devTable)是 7 列, 有自己的 nth-child 规则。 */ .grid td:nth-child(1),.grid th:nth-child(1){width:auto;min-width:170px} /* 设备表内容多, 单独撑满 */ #devTable{width:100%;table-layout:auto} /* 设备表 7 列 */ #devTable td:nth-child(2),#devTable th:nth-child(2){width:132px} #devTable td:nth-child(3),#devTable th:nth-child(3){width:150px} #devTable td:nth-child(4),#devTable th:nth-child(4){width:82px} #devTable td:nth-child(5),#devTable th:nth-child(5){width:140px} #devTable td:nth-child(6),#devTable th:nth-child(6){width:110px} #devTable td:nth-child(7),#devTable th:nth-child(7){width:150px} .ro{color:#1e88e5;font-family:Consolas,Monaco,monospace;font-weight:600} .ro.ok{color:#1b8a4b} .ro.bad{color:#c0392b} .ro.warn{color:#e08e0b} .ro.idle{color:#7a848e} /* 泵状态: 停止=黑 工频=蓝 */ .ro.stop{color:#1f2a33} .ro.info{color:#1e88e5} td.ro{font-family:Consolas,Monaco,monospace;font-weight:600;color:#1e88e5} .grid input{padding:6px 9px;border:1px solid #cfd6de;border-radius:4px;width:100%;max-width:170px;font-size:13px} .grid input:focus{outline:none;border-color:#1e88e5} .grid select.enumsel{padding:6px 9px;border:1px solid #cfd6de;border-radius:4px;width:100%;max-width:170px;font-size:13px;background:#fff} .grid select.enumsel:focus{outline:none;border-color:#1e88e5} #pSearch{padding:7px 12px;border:1px solid #cfd6de;border-radius:4px;width:220px;font-size:13px} #pSearch:focus{outline:none;border-color:#1e88e5} /* ---------------------------------------------------------------- 弹窗 */ .modal{display:none;position:fixed;inset:0;z-index:50} .modal.open{display:block} /* 弹窗限高 + 可滚动。没有 max-height 时, 内容多的弹窗(如"个人设置" 有四块内容)会直接顶出屏幕底部, 而且没有滚动条够不到下面的按钮。 */ .dialog{position:relative;margin:40px auto;max-width:440px;max-height:calc(100vh - 80px); overflow-y:auto;overflow-x:hidden;background:#fff;border-radius:8px;padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.2);-webkit-overflow-scrolling:touch} /* 遮罩层本身可滚: 小屏时内容超过一屏, 空白处也能滑动 */ .mask{position:absolute;inset:0;background:rgba(0,0,0,.45);overflow-y:auto} /* 滚动条别太丑, 桌面端用窄条 */ .dialog::-webkit-scrollbar{width:8px} .dialog::-webkit-scrollbar-thumb{background:#c8d0d8;border-radius:4px} .dialog::-webkit-scrollbar-track{background:transparent} .dialog h3{margin-bottom:18px;font-size:17px} .dialog label{display:block;margin-bottom:14px;font-size:13px;color:#5a6570} .dialog input,.dialog select{width:100%;padding:8px 10px;border:1px solid #cfd6de;border-radius:4px;margin-top:6px;font-size:14px} .dialog p{margin-bottom:18px;line-height:1.8;color:#39434d} .dlgbtns{text-align:right;display:flex;gap:10px;justify-content:flex-end} .toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:rgba(35,42,49,.94);color:#fff;padding:11px 24px;border-radius:5px;z-index:99;display:none;font-size:14px;max-width:90%} .toast.show{display:block} .toast.err{background:#c0392b} /* ================================================================== 手机 / 平板自适应: 表格转卡片, 顶栏折行, 触控尺寸放大 ================================================================== */ /* 超宽屏: 参数表每组改成两列并排, 一屏能看到更多参数 */ @media(max-width:860px){ .topbar{height:auto;min-height:52px;padding:8px 12px;flex-wrap:wrap;gap:8px} .brand{font-size:15px} .tabs{margin-left:auto;order:3;width:100%;gap:6px} .tab{flex:1;padding:9px 6px;font-size:13px;text-align:center} .meta{order:2;font-size:11px;margin-left:auto;color:#eaf4fd; display:flex;align-items:center;gap:10px} .meta #whoamiName{padding-right:10px} .view{padding:12px 10px 30px} .bar{gap:8px} select{min-width:0;width:100%;flex:1 1 100%} #pSearch{width:100%;flex:1 1 100%} .btn{padding:9px 14px} /* 实时数据: 两列 */ .ggrid{grid-template-columns:repeat(2,1fr)} .item{padding:10px 12px} .item .v{font-size:16px} /* 表格 -> 卡片 */ .grid,.grid tbody,.grid tr,.grid td{display:block;width:auto} .grid thead{display:none} .grid{background:transparent;box-shadow:none} .gcard>.grid{background:transparent} .gcard .tbody{padding:0 8px 8px} .grid tr{background:#fff;border-radius:6px;margin-bottom:8px;padding:8px 12px; box-shadow:0 1px 4px rgba(0,0,0,.07)} .grid td{border:none;padding:5px 0;display:flex;align-items:center;justify-content:space-between;gap:10px} .grid td::before{content:attr(data-l);color:#8a949e;font-size:12px;flex-shrink:0} .grid td:first-child{font-weight:700;color:#232a31;padding-bottom:8px;margin-bottom:4px; border-bottom:1px dashed #eceff2;font-size:15px} .grid td:first-child::before{display:none} .grid input,.grid select{max-width:150px} .grid td:last-child{justify-content:flex-end;padding-top:8px} .dialog{margin:12px;padding:18px;max-height:calc(100vh - 24px)} } @media(max-width:420px){ .ggrid{grid-template-columns:1fr 1fr} .brand{font-size:14px} } /* ================= 参数设置页: 分页标签 ================= */ .ptabs{ display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px; border-bottom:1px solid var(--line);padding-bottom:10px; } .ptab{ appearance:none;border:1px solid var(--line);background:#fff; color:var(--text);border-radius:999px;padding:6px 14px;font-size:13px; cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px; } .ptab:hover{border-color:var(--brand);color:var(--brand)} .ptab.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .ptab .n{ background:rgba(0,0,0,.08);border-radius:999px;padding:0 6px; font-size:11px;line-height:16px;min-width:16px;text-align:center; } .ptab.on .n{background:rgba(255,255,255,.25)} .pnote{ background:#fff8e6;border:1px solid #ffe0a3;color:#8a5a00; border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:12px; } @media(max-width:640px){ .ptab{padding:5px 11px;font-size:12px} } /* ================= 参数页: 时/分合并成一行 ================= */ td.multi{white-space:nowrap} td.multi .cellwrap{display:inline-flex;align-items:center;gap:3px;margin-right:8px} td.multi .cu{font-style:normal;font-size:11px;color:#8a94a6;min-width:22px} td.multi input{max-width:78px} td.ops{white-space:nowrap} td.ops .btn{margin-right:4px} /* ================================================================== 参数设置页布局(2026-10-12 重做) 4 列: 名称 / 当前值 / 设定值(1~4格) / 操作(1~4按钮) 要点: 4 格时(强启时段)内容很宽, 与其挤成两栏不如让整块独占一行, 因此分两档: 3 格及以下走两栏卡片, 4 格走单栏整行。 ================================================================== */ /* 名称与当前值固定, 只有"设定值"伸缩, 保证标题永不被挤没 */ @media(min-width:1100px){ #paramGroups .gtwo>table>tbody>tr>td:nth-child(1){ flex:0 0 132px;width:132px;min-width:0; font-weight:600;color:#232a31; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #paramGroups .gtwo>table>tbody>tr>td:nth-child(2){ flex:0 0 92px;width:92px;text-align:right; font-family:Consolas,Monaco,monospace;font-weight:700;font-size:13px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #paramGroups .gtwo>table>tbody>tr>td:nth-child(3){flex:1 1 auto;min-width:0} #paramGroups .gtwo>table>tbody>tr>td:nth-child(4){flex:0 0 auto;white-space:nowrap} } /* 当前值多格时用小字号紧凑显示, 不再撑开列宽 */ #paramGroups td.ro, #paramGroups td:nth-child(2) > .ro{font-size:13px} #paramGroups td:nth-child(2){font-size:12px !important;line-height:1.5} /* 设定值格子 */ #paramGroups td.multi{white-space:nowrap;overflow:hidden} #paramGroups td.multi .cellwrap{ display:inline-flex;align-items:center;gap:2px;margin-right:5px;vertical-align:middle; } #paramGroups td.multi .cellwrap:last-child{margin-right:0} #paramGroups td.multi input, #paramGroups td.multi select{ width:52px;max-width:52px;min-width:52px;padding:5px 4px;text-align:center; } #paramGroups td.multi .cu{font-style:normal;font-size:10.5px;color:#8a94a6;min-width:18px} /* 单格(绝大多数普通参数)用正常宽度 */ #paramGroups td.multi .cellwrap:only-child input, #paramGroups td.multi .cellwrap:only-child select{width:100px;max-width:100px;min-width:100px} /* 操作列 */ #paramGroups td.ops{white-space:nowrap} #paramGroups td.ops .btn{margin-left:3px;padding:4px 8px} #paramGroups td.ops .btn:first-child{margin-left:0} /* --- 宽屏: 4 格行(强启时段)独占整行, 不参与左右分栏 --- */ @media(min-width:1100px){ #paramGroups .gtwo>table.wide{width:100%;flex:1 1 100%} } /* --- 窄屏 --- */ @media(max-width:1099px){ #paramGroups .grid td:nth-child(1), #paramGroups .grid td:nth-child(2), #paramGroups .grid td:nth-child(3), #paramGroups .grid td:nth-child(4){width:100%;display:block} #paramGroups td.multi .cellwrap input, #paramGroups td.multi .cellwrap select{width:64px;max-width:64px;min-width:64px} } /* 当前值多格: 用斜杠紧凑分隔, 并去掉重复的小单位标签 */ #paramGroups td:nth-child(2){line-height:1.4} #paramGroups td:nth-child(2) > .ro{font-size:12.5px} #paramGroups td:nth-child(2) > .ro .u{display:none} /* 时/分/秒 单位不重复展示 */ #paramGroups td:nth-child(2) > .dim{margin:0 2px;font-size:11px} /* 分页标签: 当前页更醒目(原选中态在高亮背景下不明显) */ .ptab.on{background:#0d6fc4;border-color:#0d6fc4;box-shadow:0 2px 6px rgba(13,111,196,.28)} /* 修正: .ptab 用了 var(--brand) 但样式表里没有定义这个变量, 导致选中态背景解析失败(按钮变透明)。这里改为固定色值。 */ :root{--brand:#1e88e5} .ptab{border-color:#cfd6de;color:#232a31} .ptab:hover{border-color:#1e88e5;color:#1e88e5} .ptab.on{background:#0d6fc4;border-color:#0d6fc4;color:#fff;font-weight:600} .ptab.on .n{background:rgba(255,255,255,.28);color:#fff} /* 补齐样式表里用到但从未定义的 CSS 变量(brand/line/text), 之前 var(--brand) 解析失败, 导致分页标签选中态背景透明、边框色丢失。 */ :root{ --brand:#1e88e5; --line:#cfd6de; --text:#232a31; } /* ================================================================== 当前值列的显示策略 多数参数值很短(数字+单位), 固定宽度即可; 但权重直通车的截止日期天然较长, 用 .val 自适应宽度 + 允许换行, 保证日期和剩余天数完整可见, 不被省略号截掉。 ================================================================== */ #paramGroups .gtwo>table>tbody>tr>td.val{ flex:0 1 auto;min-width:92px;max-width:210px; white-space:normal;overflow:visible;text-overflow:clip; line-height:1.4; } #paramGroups td.val .ro{display:inline} #paramGroups td.val .ro i.sub{ display:block;font-style:normal;font-size:11.5px;color:#7a848e;margin-top:1px; } /* 普通数值仍保持原来的紧凑右对齐观感 */ #paramGroups .gtwo>table>tbody>tr>td.val:not(:has(.sub)){ flex:0 0 92px;width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ---------------- 树形视图: 客户 / 项目 / 设备 ---------------- */ .orgcol.tree{grid-column:1 / 3} .tnode{margin-bottom:2px} .trow{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:5px; font-size:13px;border:1px solid transparent} .trow:hover{background:#f5f9fe;border-color:#e3ebf3} .trow.lv1{background:#f7f9fb;font-weight:600;margin-top:6px} .trow.lv2{margin-left:20px} .trow.lv3{margin-left:40px} .trow.warnrow{background:#fff8e6;color:#8a6d1a} .tcaret{width:20px;color:#a8b2bd;font-size:16px;flex-shrink:0;text-align:center} .ticon{font-size:10.5px;padding:2px 6px;border-radius:3px;flex-shrink:0;font-weight:600} .ticon.c{background:#e3edf9;color:#1a5fa8} .ticon.p{background:#e6f5ec;color:#1b7a45} .ticon.d{background:#f0f1f3;color:#5a6570} .tname{color:#1f2a33;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tmeta{font-size:11.5px;color:#8a949e;font-weight:400;margin-left:4px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .tdot{font-size:11px;padding:1px 6px;border-radius:9px;flex-shrink:0} .tdot.on{background:#e6f7ed;color:#1b8a4b} .tdot.off{background:#fdeaea;color:#c0392b} .tops{margin-left:auto;display:flex;gap:4px;flex-shrink:0} .tops button{border:1px solid #d5dce4;background:#fff;color:#5a6570;border-radius:3px; font-size:11.5px;padding:2px 7px;cursor:pointer} .tops button:hover{border-color:#1e88e5;color:#1e88e5} /* ---------------- 弹窗里的复选框列表 ---------------- .dialog input{width:100%} 会把 checkbox 也撑满导致错位, 这里单独覆盖。 另外原来的结构是