fix: 优化应急就医模块多页面原型，重构排班/大屏/模拟急救等核心页面
- 大屏数据配置：增加应急中心下拉切换（西安/银川），各中心独立配置面板，模块开关控制输入框置灰 - 排班配置：改为星期行×操作人员/专业人员列结构，编辑模式带边框输入和人员多选搜索 - 模拟急救联动：列表改为员工维度，点击弹出模拟急救弹窗（疾病Tab/地图选点/急救提示书/资源列表） - 删除 center-employee.html 和 center-seat.html，清理所有侧边栏引用 - 新增多个详情/新增子页面，优化资源管理和异常事件页面 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -267,7 +267,6 @@ const SITE_MAP = [
|
||||
{ file:'center-data-screen.html', label:'大屏数据配置' },
|
||||
{ file:'center-schedule.html', label:'排班配置' },
|
||||
{ file:'center-simulation.html', label:'模拟急救联动' },
|
||||
{ file:'center-employee.html', label:'员工信息' },
|
||||
{ file:'exception-result.html', label:'结果异常' }
|
||||
]},
|
||||
{ name:'应急就医(操作人员)', dir:'web-admin/emergency-dispatch/operator', entry:'emergency-active.html', pages:[
|
||||
|
||||
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 应急中心 - 新增应急中心 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;min-width:320px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-sm{height:30px;padding:0 10px;font-size:var(--font-xs);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 地图选点 */
|
||||
.map-picker{width:480px;height:220px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#e6f7ff;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__bg{position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px);}
|
||||
.map-picker__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;display:none;}
|
||||
.map-picker__label{position:relative;z-index:2;display:flex;align-items:center;gap:6px;}
|
||||
.map-picker__coord{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.92);padding:4px 14px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);z-index:3;display:none;white-space:nowrap;color:var(--text-primary);}
|
||||
|
||||
/* 动态行组 */
|
||||
.dynamic-group{display:flex;flex-direction:column;gap:8px;}
|
||||
.dynamic-row{display:flex;align-items:center;gap:8px;}
|
||||
.dynamic-row .form-input,.dynamic-row .form-select{min-width:auto;}
|
||||
.time-range{display:flex;align-items:center;gap:6px;}
|
||||
.time-range input[type="time"]{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-sm);outline:none;width:130px;}
|
||||
.time-range input[type="time"]:focus{border-color:var(--primary);}
|
||||
.time-range span{color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
|
||||
/* 多选标签下拉 */
|
||||
.tag-select{position:relative;min-width:480px;}
|
||||
.tag-select__box{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 32px 4px 8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;transition:border-color .2s;}
|
||||
.tag-select__box:hover,.tag-select__box.focus{border-color:var(--primary);}
|
||||
.tag-select__placeholder{color:var(--text-placeholder);font-size:var(--font-sm);line-height:28px;user-select:none;}
|
||||
.tag-select__tag{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);color:var(--primary);border:1px solid #91d5ff;border-radius:3px;padding:2px 6px;font-size:var(--font-xs);line-height:20px;white-space:nowrap;}
|
||||
.tag-select__tag-close{cursor:pointer;font-size:14px;line-height:1;opacity:.6;font-style:normal;}
|
||||
.tag-select__tag-close:hover{opacity:1;}
|
||||
.tag-select__dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:20;max-height:220px;overflow-y:auto;display:none;}
|
||||
.tag-select__dropdown.open{display:block;}
|
||||
.tag-select__option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s;}
|
||||
.tag-select__option:hover{background:var(--primary-light);}
|
||||
.tag-select__option.selected{color:var(--primary);font-weight:500;}
|
||||
.tag-select__option .check{width:14px;height:14px;border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.tag-select__option.selected .check{background:var(--primary);border-color:var(--primary);}
|
||||
.tag-select__option.selected .check::after{content:'';width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-1px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="center-basic-info.html">基本信息</a>
|
||||
<span>/</span>
|
||||
<span>新增应急中心</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>中心名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入应急中心名称">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">大屏标题</div>
|
||||
<input class="form-input" type="text" placeholder="请输入大屏显示标题" style="min-width:480px;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>简称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入中心简称" style="min-width:200px;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理单位</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择管理单位</option>
|
||||
<option>长庆油田公司</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采油三厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">大屏路由</div>
|
||||
<input class="form-input" type="text" placeholder="请输入大屏路由地址" style="min-width:480px;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>详细地址</div>
|
||||
<div>
|
||||
<div class="map-picker" id="mapPicker" onclick="pickLocation(event)">
|
||||
<div class="map-picker__bg"></div>
|
||||
<svg class="map-picker__pin" id="mapPin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg>
|
||||
<span class="map-picker__label" id="mapLabel"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" stroke-width="1"/></svg>在地图上点击选择坐标位置</span>
|
||||
<div class="map-picker__coord" id="mapCoord"></div>
|
||||
</div>
|
||||
<input class="form-input" type="text" placeholder="请补充详细地址，如：长庆路XX号办公楼" style="min-width:480px;margin-top:10px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系与运营信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">服务信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>中心电话</div>
|
||||
<input class="form-input" type="tel" placeholder="请输入中心电话">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>值班电话</div>
|
||||
<div class="dynamic-group" id="dutyPhoneGroup">
|
||||
<div class="dynamic-row">
|
||||
<input class="form-input" type="tel" placeholder="请输入值班电话" style="min-width:320px;">
|
||||
<span class="link-danger" onclick="removeDynamicRow(this,'dutyPhoneGroup')" style="cursor:pointer;font-size:var(--font-xs);">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default btn-sm" onclick="addDutyPhone()" style="margin-left:0;align-self:flex-end;">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
添加值班电话
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">上班时间</div>
|
||||
<div class="dynamic-group" id="workTimeGroup">
|
||||
|
||||
<div class="dynamic-row">
|
||||
<div class="time-range">
|
||||
<input type="time" value="14:00">
|
||||
<span>~</span>
|
||||
<input type="time" value="18:00">
|
||||
</div>
|
||||
<!-- <span class="link-danger" onclick="removeDynamicRow(this,'workTimeGroup')" style="cursor:pointer;font-size:var(--font-xs);">删除</span>-->
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default btn-sm" onclick="addWorkTime()" style="margin-left:0;align-self:flex-end;">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
添加时段
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>服务范围</div>
|
||||
<div class="tag-select" id="serviceSelect">
|
||||
<div class="tag-select__box" onclick="toggleDropdown()">
|
||||
<span class="tag-select__placeholder" id="servicePlaceholder">请选择服务范围（可多选）</span>
|
||||
</div>
|
||||
<div class="tag-select__dropdown" id="serviceDropdown">
|
||||
<div class="tag-select__option" data-value="长庆油田公司机关" onclick="toggleOption(this)"><span class="check"></span>长庆油田公司机关</div>
|
||||
<div class="tag-select__option" data-value="采油一厂" onclick="toggleOption(this)"><span class="check"></span>采油一厂</div>
|
||||
<div class="tag-select__option" data-value="采油二厂" onclick="toggleOption(this)"><span class="check"></span>采油二厂</div>
|
||||
<div class="tag-select__option" data-value="采油三厂" onclick="toggleOption(this)"><span class="check"></span>采油三厂</div>
|
||||
<div class="tag-select__option" data-value="采气一厂" onclick="toggleOption(this)"><span class="check"></span>采气一厂</div>
|
||||
<div class="tag-select__option" data-value="油田运输处" onclick="toggleOption(this)"><span class="check"></span>油田运输处</div>
|
||||
<div class="tag-select__option" data-value="供水供电处" onclick="toggleOption(this)"><span class="check"></span>供水供电处</div>
|
||||
<div class="tag-select__option" data-value="勘探开发研究院" onclick="toggleOption(this)"><span class="check"></span>勘探开发研究院</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">负责人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入负责人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">负责电话</div>
|
||||
<input class="form-input" type="tel" placeholder="请输入负责人联系电话">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">建成日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">投用日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">配备金额</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<input class="form-input" type="number" placeholder="请输入金额" style="min-width:200px;" min="0" step="0.01">
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='center-basic-info.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='center-basic-info.html';">取 消</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function pickLocation(e){
|
||||
var picker=document.getElementById('mapPicker');
|
||||
var rect=picker.getBoundingClientRect();
|
||||
var x=e.clientX-rect.left;
|
||||
var y=e.clientY-rect.top;
|
||||
var pin=document.getElementById('mapPin');
|
||||
pin.style.display='block';
|
||||
pin.style.left=x+'px';
|
||||
pin.style.top=y+'px';
|
||||
document.getElementById('mapLabel').style.display='none';
|
||||
var addresses=['陕西省西安市未央区长庆油田总部办公楼','甘肃省庆阳市西峰区长庆大道采油一厂','陕西省榆林市定边县长庆路采油二厂','陕西省延安市宝塔区采油三厂调度中心','宁夏银川市兴庆区长庆大道采气一厂'];
|
||||
var idx=Math.floor(Math.random()*addresses.length);
|
||||
var coord=document.getElementById('mapCoord');
|
||||
coord.innerHTML='<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="vertical-align:-1px;margin-right:4px;"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="#1890FF" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="#1890FF" stroke-width="1"/></svg>'+addresses[idx];
|
||||
coord.style.display='block';
|
||||
}
|
||||
function addDutyPhone(){
|
||||
var g=document.getElementById('dutyPhoneGroup');
|
||||
var row=document.createElement('div');
|
||||
row.className='dynamic-row';
|
||||
row.innerHTML='<input class="form-input" type="tel" placeholder="请输入值班电话" style="min-width:320px;"><span class="link-danger" onclick="removeDynamicRow(this,\'dutyPhoneGroup\')" style="cursor:pointer;font-size:var(--font-xs);">删除</span>';
|
||||
g.appendChild(row);
|
||||
}
|
||||
function addWorkTime(){
|
||||
var g=document.getElementById('workTimeGroup');
|
||||
var row=document.createElement('div');
|
||||
row.className='dynamic-row';
|
||||
row.innerHTML='<div class="time-range"><input type="time"><span>~</span><input type="time"></div><span class="link-danger" onclick="removeDynamicRow(this,\'workTimeGroup\')" style="cursor:pointer;font-size:var(--font-xs);">删除</span>';
|
||||
g.appendChild(row);
|
||||
}
|
||||
function removeDynamicRow(el,groupId){
|
||||
var g=document.getElementById(groupId);
|
||||
if(g.children.length<=1){alert('至少保留一条记录');return;}
|
||||
el.closest('.dynamic-row').remove();
|
||||
}
|
||||
/* 多选标签下拉 */
|
||||
var selectedServices=[];
|
||||
function toggleDropdown(){
|
||||
var dd=document.getElementById('serviceDropdown');
|
||||
dd.classList.toggle('open');
|
||||
document.querySelector('.tag-select__box').classList.toggle('focus',dd.classList.contains('open'));
|
||||
}
|
||||
function toggleOption(el){
|
||||
var val=el.getAttribute('data-value');
|
||||
var idx=selectedServices.indexOf(val);
|
||||
if(idx>-1){selectedServices.splice(idx,1);el.classList.remove('selected');}
|
||||
else{selectedServices.push(val);el.classList.add('selected');}
|
||||
renderTags();
|
||||
}
|
||||
function removeTag(val){
|
||||
var idx=selectedServices.indexOf(val);
|
||||
if(idx>-1) selectedServices.splice(idx,1);
|
||||
var opts=document.querySelectorAll('.tag-select__option');
|
||||
opts.forEach(function(o){if(o.getAttribute('data-value')===val) o.classList.remove('selected');});
|
||||
renderTags();
|
||||
}
|
||||
function renderTags(){
|
||||
var box=document.querySelector('.tag-select__box');
|
||||
var ph=document.getElementById('servicePlaceholder');
|
||||
box.querySelectorAll('.tag-select__tag').forEach(function(t){t.remove();});
|
||||
if(selectedServices.length===0){ph.style.display='';return;}
|
||||
ph.style.display='none';
|
||||
selectedServices.forEach(function(v){
|
||||
var tag=document.createElement('span');
|
||||
tag.className='tag-select__tag';
|
||||
tag.innerHTML=v+'<i class="tag-select__tag-close" onclick="event.stopPropagation();removeTag(\''+v+'\')">×</i>';
|
||||
box.insertBefore(tag,ph);
|
||||
});
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.tag-select')){
|
||||
document.getElementById('serviceDropdown').classList.remove('open');
|
||||
document.querySelector('.tag-select__box').classList.remove('focus');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急中心详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
.detail{padding:24px;}
|
||||
.detail__section{margin-bottom:24px;}
|
||||
.detail__section:last-child{margin-bottom:0;}
|
||||
.detail__section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
|
||||
.detail__section-title svg{width:16px;height:16px;color:var(--primary);}
|
||||
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.info-item{padding:12px 0;border-bottom:1px solid #f5f5f5;}
|
||||
.info-item--full{grid-column:1/-1;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
.info-item__value a{color:var(--primary);text-decoration:none;}
|
||||
.info-item__value a:hover{text-decoration:underline;}
|
||||
|
||||
.tag-list{display:flex;flex-wrap:wrap;gap:6px;}
|
||||
.detail-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);border:1px solid #91d5ff;}
|
||||
|
||||
.detail__map{width:100%;height:160px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 100%);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);gap:6px;margin-bottom:8px;position:relative;overflow:hidden;}
|
||||
.detail__map-bg{position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px);}
|
||||
.detail__map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;}
|
||||
.detail__map-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.92);padding:4px 14px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);z-index:3;white-space:nowrap;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="detail" id="detailRoot"></div>
|
||||
|
||||
<script>
|
||||
var drawerData={
|
||||
'西安应急中心':{name:'西安应急中心',screen:'长庆油田西安应急指挥中心',abbr:'西安中心',unit:'长庆油田公司',route:'/screen/xa-center',addr:'陕西省西安市未央区长庆路',phone:'029-86518000',dutyPhones:['029-86518111','029-86518222'],workTimes:['08:00 ~ 12:00','14:00 ~ 18:00'],services:['长庆油田公司机关','采油一厂','勘探开发研究院'],leader:'张建国',leaderPhone:'13891025612',buildDate:'2018-03-15',useDate:'2018-06-01',amount:'580.00'},
|
||||
'庆阳应急中心':{name:'庆阳应急中心',screen:'长庆油田庆阳应急指挥中心',abbr:'庆阳中心',unit:'采油一厂',route:'/screen/qy-center',addr:'甘肃省庆阳市西峰区长庆大道',phone:'0934-8612000',dutyPhones:['0934-8612111'],workTimes:['08:00 ~ 12:00','14:00 ~ 18:00'],services:['采油一厂','供水供电处'],leader:'李明华',leaderPhone:'13993287456',buildDate:'2019-05-20',useDate:'2019-09-01',amount:'320.00'},
|
||||
'定边应急中心':{name:'定边应急中心',screen:'长庆油田定边应急指挥中心',abbr:'定边中心',unit:'采油二厂',route:'/screen/db-center',addr:'陕西省榆林市定边县长庆路',phone:'0912-4218000',dutyPhones:['0912-4218111'],workTimes:['08:30 ~ 12:00','14:00 ~ 17:30'],services:['采油二厂'],leader:'王秀英',leaderPhone:'13709451823',buildDate:'2020-01-10',useDate:'2020-04-15',amount:'260.00'},
|
||||
'靖边应急中心':{name:'靖边应急中心',screen:'长庆油田靖边应急指挥中心',abbr:'靖边中心',unit:'采油二厂',route:'/screen/jb-center',addr:'陕西省榆林市靖边县长庆路',phone:'0912-4618000',dutyPhones:['0912-4618111'],workTimes:['08:30 ~ 12:00','14:00 ~ 17:30'],services:['采油二厂'],leader:'赵志远',leaderPhone:'13689723156',buildDate:'2021-06-01',useDate:'2021-10-01',amount:'210.00'},
|
||||
'银川应急中心':{name:'银川应急中心',screen:'长庆油田银川应急指挥中心',abbr:'银川中心',unit:'长庆油田公司',route:'/screen/yc-center',addr:'宁夏银川市兴庆区长庆大道',phone:'0951-5018000',dutyPhones:['0951-5018111','0951-5018222'],workTimes:['08:00 ~ 12:00','14:00 ~ 18:00'],services:['采气一厂','油田运输处'],leader:'刘海燕',leaderPhone:'13521648790',buildDate:'2019-11-20',useDate:'2020-03-01',amount:'420.00'}
|
||||
};
|
||||
|
||||
function render(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var name=params.get('name')||'';
|
||||
var d=drawerData[name];
|
||||
if(!d){document.getElementById('detailRoot').innerHTML='<div style="text-align:center;padding:60px 0;color:#999;">未找到该中心信息</div>';return;}
|
||||
var h='';
|
||||
// 基本信息
|
||||
h+='<div class="detail__section"><div class="detail__section-title"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>基本信息</div>';
|
||||
h+='<div class="info-grid">';
|
||||
h+='<div class="info-item"><div class="info-item__label">中心名称</div><div class="info-item__value">'+d.name+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">简称</div><div class="info-item__value">'+d.abbr+'</div></div>';
|
||||
h+='<div class="info-item info-item--full"><div class="info-item__label">大屏标题</div><div class="info-item__value">'+d.screen+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">管理单位</div><div class="info-item__value">'+d.unit+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">大屏路由</div><div class="info-item__value" style="color:var(--primary);">'+d.route+'</div></div>';
|
||||
h+='</div></div>';
|
||||
// 地址
|
||||
h+='<div class="detail__section"><div class="detail__section-title"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>中心地址</div>';
|
||||
h+='<div class="detail__map"><div class="detail__map-bg"></div><svg class="detail__map-pin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg><div class="detail__map-label">'+d.addr+'</div></div></div>';
|
||||
// 联系与运营
|
||||
h+='<div class="detail__section"><div class="detail__section-title"><svg viewBox="0 0 16 16" fill="none"><path d="M10 2a2 2 0 012 2v1a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2" stroke="currentColor" stroke-width="1.4"/><path d="M4 7v5a3 3 0 003 3h2a3 3 0 003-3V7" stroke="currentColor" stroke-width="1.4"/></svg>联系与运营信息</div>';
|
||||
h+='<div class="info-grid">';
|
||||
h+='<div class="info-item"><div class="info-item__label">中心电话</div><div class="info-item__value"><a href="tel:'+d.phone+'">'+d.phone+'</a></div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">值班电话</div><div class="info-item__value">'+d.dutyPhones.map(function(p){return '<a href="tel:'+p+'">'+p+'</a>';}).join('<br>')+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">负责人</div><div class="info-item__value">'+d.leader+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">负责电话</div><div class="info-item__value"><a href="tel:'+d.leaderPhone+'">'+d.leaderPhone+'</a></div></div>';
|
||||
h+='<div class="info-item info-item--full"><div class="info-item__label">上班时间</div><div class="info-item__value">'+d.workTimes.join(' / ')+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">建成日期</div><div class="info-item__value">'+d.buildDate+'</div></div>';
|
||||
h+='<div class="info-item"><div class="info-item__label">投用日期</div><div class="info-item__value">'+d.useDate+'</div></div>';
|
||||
h+='<div class="info-item info-item--full"><div class="info-item__label">配备金额</div><div class="info-item__value" style="color:#fa541c;font-weight:600;">'+d.amount+' 万元</div></div>';
|
||||
h+='</div></div>';
|
||||
// 服务范围
|
||||
h+='<div class="detail__section"><div class="detail__section-title"><svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>服务范围</div>';
|
||||
h+='<div class="tag-list">'+d.services.map(function(s){return '<span class="detail-tag">'+s+'</span>';}).join('')+'</div></div>';
|
||||
document.getElementById('detailRoot').innerHTML=h;
|
||||
}
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -25,19 +25,99 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;}
|
||||
.info-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);}
|
||||
.info-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;}
|
||||
.info-item{display:flex;align-items:flex-start;gap:8px;}
|
||||
.info-item__label{font-size:var(--font-sm);color:var(--text-secondary);min-width:100px;flex-shrink:0;}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;border-collapse:separate;border-spacing:0;}
|
||||
table{width:100%;border-collapse:separate;border-spacing:0;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;position:relative;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;background:#fff;position:relative;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover td{background:#F8FBFF;}
|
||||
/* 固定列 */
|
||||
thead th.sticky-left,tbody td.sticky-left{position:sticky;z-index:2;background:#fff;}
|
||||
thead th.sticky-left{background:#FAFAFA;z-index:3;}
|
||||
tbody tr:hover td.sticky-left{background:#F8FBFF;}
|
||||
thead th.sticky-right,tbody td.sticky-right{position:sticky;right:0;z-index:2;background:#fff;}
|
||||
thead th.sticky-right{background:#FAFAFA;z-index:3;}
|
||||
tbody tr:hover td.sticky-right{background:#F8FBFF;}
|
||||
.sticky-shadow-right{box-shadow:-2px 0 4px rgba(0,0,0,0.06);}
|
||||
.sticky-shadow-left{box-shadow:2px 0 4px rgba(0,0,0,0.06);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.switch{position:relative;width:36px;height:20px;background:#ccc;border-radius:10px;cursor:pointer;transition:background .2s;border:none;padding:0;flex-shrink:0;}
|
||||
.switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;}
|
||||
.switch.on{background:var(--success);}
|
||||
.switch.on::after{transform:translateX(16px);}
|
||||
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:960px;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:20px 24px;overflow:hidden;flex:1;display:flex;gap:0;}
|
||||
.modal__footer{padding:12px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
/* 穿梭框 */
|
||||
.transfer{display:flex;flex:1;gap:0;min-height:0;}
|
||||
.transfer__panel{flex:1;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
|
||||
.transfer__panel-header{padding:10px 14px;background:#FAFAFA;border-bottom:1px solid var(--border);font-size:var(--font-sm);font-weight:500;color:var(--text-secondary);display:flex;align-items:center;justify-content:space-between;}
|
||||
.transfer__panel-header span:last-child{font-weight:400;font-size:var(--font-xs);}
|
||||
.transfer__filter{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;gap:8px;}
|
||||
.transfer__filter input{flex:1;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-xs);outline:none;}
|
||||
.transfer__filter input:focus{border-color:var(--primary);}
|
||||
.transfer__filter select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 22px 0 8px;font-size:var(--font-xs);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 6px center;appearance:none;min-width:100px;}
|
||||
.transfer__list{flex:1;overflow-y:auto;padding:0;}
|
||||
.transfer__item{padding:8px 14px;font-size:var(--font-sm);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0f0;transition:background .15s;cursor:default;}
|
||||
.transfer__item:last-child{border-bottom:none;}
|
||||
.transfer__item:hover{background:#F8FBFF;}
|
||||
.transfer__item-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
|
||||
.transfer__item-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.transfer__item-meta{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.transfer__item-btn{flex-shrink:0;margin-left:8px;}
|
||||
.transfer__empty{text-align:center;padding:32px 0;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
/* 中间箭头区 */
|
||||
.transfer__actions{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;flex-shrink:0;}
|
||||
.transfer__arrow{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:16px;}
|
||||
|
||||
/* 右侧抽屉 */
|
||||
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300;display:none;}.drawer-mask.open{display:block;}
|
||||
.drawer{position:fixed;top:0;right:-560px;bottom:0;width:560px;background:#fff;z-index:301;box-shadow:-4px 0 16px rgba(0,0,0,0.12);display:flex;flex-direction:column;transition:right .3s ease;}.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-base);font-weight:600;}
|
||||
.drawer__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{flex:1;overflow:hidden;}
|
||||
.drawer__body iframe{width:100%;height:100%;border:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -75,18 +155,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -103,66 +182,327 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<div class="info-card">
|
||||
<div class="info-card__header">
|
||||
<span class="info-card__title">应急中心基本信息</span>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.5 1.5l2 2M1 10l7-7 2 2-7 7H1v-2z" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
编辑
|
||||
</button>
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>中心名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入中心名称">
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">中心名称</span>
|
||||
<span class="info-item__value">西安应急中心</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">中心编号</span>
|
||||
<span class="info-item__value">EC-XA-001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">所在地址</span>
|
||||
<span class="info-item__value">陕西省西安市未央区长庆路</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">联系电话</span>
|
||||
<span class="info-item__value">029-86518000</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">负责人</span>
|
||||
<span class="info-item__value">张建国</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">负责人电话</span>
|
||||
<span class="info-item__value">029-86518001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">服务区域</span>
|
||||
<span class="info-item__value">长庆油田全域</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">运营状态</span>
|
||||
<span class="info-item__value"><span class="tag tag-green">已启用</span></span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">创建时间</span>
|
||||
<span class="info-item__value">2024-01-15</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">最后更新时间</span>
|
||||
<span class="info-item__value">2026-04-18</span>
|
||||
<div class="filter-item">
|
||||
<label>管理单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>长庆油田公司</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>开启状态：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>全部</option>
|
||||
<option>已开启</option>
|
||||
<option>已关闭</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<a href="center-basic-info-add.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增应急中心
|
||||
</a>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">应急中心列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 5 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky-left" style="left:0;min-width:50px;">序号</th>
|
||||
<th class="sticky-left" style="left:50px;min-width:140px;">应急中心名称</th>
|
||||
<th class="sticky-left sticky-shadow-left" style="left:190px;min-width:120px;">大屏标题</th>
|
||||
<th>简称</th>
|
||||
<th>管理单位</th>
|
||||
<th>中心电话</th>
|
||||
<th>值班电话</th>
|
||||
<th>详细地址</th>
|
||||
<th>负责人</th>
|
||||
<th>负责人电话</th>
|
||||
<th>操作人员人数</th>
|
||||
<th>专业人员人数</th>
|
||||
<th>开启状态</th>
|
||||
<th>是否默认中心</th>
|
||||
<th class="sticky-right sticky-shadow-right" style="right:0;min-width:220px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sticky-left" style="left:0;">1</td>
|
||||
<td class="sticky-left" style="left:50px;font-weight:500;">西安应急中心</td>
|
||||
<td class="sticky-left sticky-shadow-left" style="left:190px;">长庆油田西安应急指挥中心</td>
|
||||
<td>西安中心</td>
|
||||
<td>长庆油田公司</td>
|
||||
<td>029-86518000</td>
|
||||
<td>029-86518111</td>
|
||||
<td>陕西省西安市未央区长庆路</td>
|
||||
<td>张建国</td>
|
||||
<td>13891025612</td>
|
||||
<td>12</td>
|
||||
<td>8</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-blue">默认</span></td>
|
||||
<td class="sticky-right sticky-shadow-right" style="right:0;"><div class="action-btns"><span class="link" onclick="openModal('西安应急中心')">关联医疗点</span><span class="link" onclick="openDrawer('西安应急中心')">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-left" style="left:0;">2</td>
|
||||
<td class="sticky-left" style="left:50px;font-weight:500;">庆阳应急中心</td>
|
||||
<td class="sticky-left sticky-shadow-left" style="left:190px;">长庆油田庆阳应急指挥中心</td>
|
||||
<td>庆阳中心</td>
|
||||
<td>采油一厂</td>
|
||||
<td>0934-8612000</td>
|
||||
<td>0934-8612111</td>
|
||||
<td>甘肃省庆阳市西峰区长庆大道</td>
|
||||
<td>李明华</td>
|
||||
<td>13993287456</td>
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-gray">否</span></td>
|
||||
<td class="sticky-right sticky-shadow-right" style="right:0;"><div class="action-btns"><span class="link" onclick="openModal('庆阳应急中心')">关联医疗点</span><span class="link" onclick="openDrawer('庆阳应急中心')">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-left" style="left:0;">3</td>
|
||||
<td class="sticky-left" style="left:50px;font-weight:500;">定边应急中心</td>
|
||||
<td class="sticky-left sticky-shadow-left" style="left:190px;">长庆油田定边应急指挥中心</td>
|
||||
<td>定边中心</td>
|
||||
<td>采油二厂</td>
|
||||
<td>0912-4218000</td>
|
||||
<td>0912-4218111</td>
|
||||
<td>陕西省榆林市定边县长庆路</td>
|
||||
<td>王秀英</td>
|
||||
<td>13709451823</td>
|
||||
<td>6</td>
|
||||
<td>4</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-gray">否</span></td>
|
||||
<td class="sticky-right sticky-shadow-right" style="right:0;"><div class="action-btns"><span class="link" onclick="openModal('定边应急中心')">关联医疗点</span><span class="link" onclick="openDrawer('定边应急中心')">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-left" style="left:0;">4</td>
|
||||
<td class="sticky-left" style="left:50px;font-weight:500;">靖边应急中心</td>
|
||||
<td class="sticky-left sticky-shadow-left" style="left:190px;">长庆油田靖边应急指挥中心</td>
|
||||
<td>靖边中心</td>
|
||||
<td>采油二厂</td>
|
||||
<td>0912-4618000</td>
|
||||
<td>0912-4618111</td>
|
||||
<td>陕西省榆林市靖边县长庆路</td>
|
||||
<td>赵志远</td>
|
||||
<td>13689723156</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td><button class="switch" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-gray">否</span></td>
|
||||
<td class="sticky-right sticky-shadow-right" style="right:0;"><div class="action-btns"><span class="link" onclick="openModal('靖边应急中心')">关联医疗点</span><span class="link" onclick="openDrawer('靖边应急中心')">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-left" style="left:0;">5</td>
|
||||
<td class="sticky-left" style="left:50px;font-weight:500;">银川应急中心</td>
|
||||
<td class="sticky-left sticky-shadow-left" style="left:190px;">长庆油田银川应急指挥中心</td>
|
||||
<td>银川中心</td>
|
||||
<td>长庆油田公司</td>
|
||||
<td>0951-5018000</td>
|
||||
<td>0951-5018111</td>
|
||||
<td>宁夏银川市兴庆区长庆大道</td>
|
||||
<td>刘海燕</td>
|
||||
<td>13521648790</td>
|
||||
<td>7</td>
|
||||
<td>5</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-gray">否</span></td>
|
||||
<td class="sticky-right sticky-shadow-right" style="right:0;"><div class="action-btns"><span class="link" onclick="openModal('银川应急中心')">关联医疗点</span><span class="link" onclick="openDrawer('银川应急中心')">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 5 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 关联医疗点弹窗 -->
|
||||
<div class="modal-mask" id="modalMask" onclick="if(event.target===this)closeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="modalTitle">关联医疗点 - 西安应急中心</div>
|
||||
<button class="modal__close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="transfer">
|
||||
<!-- 左侧：未关联 -->
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__panel-header"><span>选择医疗点</span><span id="leftCount">0 项</span></div>
|
||||
<div class="transfer__filter">
|
||||
<input type="text" placeholder="搜索名称" id="leftSearch" oninput="renderLeft()">
|
||||
<select id="leftUnit" onchange="renderLeft()">
|
||||
<option value="">全部单位</option>
|
||||
<option>长庆油田公司</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采油三厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>油田运输处</option>
|
||||
<option>供水供电处</option>
|
||||
<option>勘探开发研究院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="transfer__list" id="leftList"></div>
|
||||
</div>
|
||||
<!-- 中间箭头 -->
|
||||
<div class="transfer__actions">
|
||||
<div class="transfer__arrow">↔</div>
|
||||
</div>
|
||||
<!-- 右侧：已关联 -->
|
||||
<div class="transfer__panel">
|
||||
<div class="transfer__panel-header"><span>已关联医疗点</span><span id="rightCount">0 项</span></div>
|
||||
<div class="transfer__filter">
|
||||
<input type="text" placeholder="搜索名称" id="rightSearch" oninput="renderRight()">
|
||||
</div>
|
||||
<div class="transfer__list" id="rightList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">关 闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title" id="drawerTitle">应急中心详情</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">×</button>
|
||||
</div>
|
||||
<div class="drawer__body"><iframe id="drawerIframe"></iframe></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var allPoints=[
|
||||
{name:'长庆油田总部医疗点',unit:'长庆油田公司',addr:'西安市未央区长庆路总部大楼1层'},
|
||||
{name:'采油一厂医疗站',unit:'采油一厂',addr:'庆阳市西峰区长庆大道采油一厂'},
|
||||
{name:'采油二厂医疗站',unit:'采油二厂',addr:'榆林市定边县长庆路采油二厂'},
|
||||
{name:'采油三厂医疗站',unit:'采油三厂',addr:'延安市宝塔区采油三厂'},
|
||||
{name:'采气一厂医疗站',unit:'采气一厂',addr:'银川市兴庆区长庆大道采气一厂'},
|
||||
{name:'油田运输处医疗点',unit:'油田运输处',addr:'西安市未央区运输处办公区'},
|
||||
{name:'勘探院医疗点',unit:'勘探开发研究院',addr:'西安市未央区勘探院大楼'},
|
||||
{name:'供水供电处医疗点',unit:'供水供电处',addr:'庆阳市西峰区供水供电处'},
|
||||
{name:'靖边作业区医疗点',unit:'采油二厂',addr:'榆林市靖边县靖边作业区'},
|
||||
{name:'华池作业区医疗点',unit:'采油一厂',addr:'庆阳市华池县华池作业区'}
|
||||
];
|
||||
var centerData={
|
||||
'西安应急中心':[0,1,6],
|
||||
'庆阳应急中心':[1,7],
|
||||
'定边应急中心':[2,8],
|
||||
'靖边应急中心':[8],
|
||||
'银川应急中心':[4]
|
||||
};
|
||||
var currentCenter='';
|
||||
var linkedIndexes=[];
|
||||
|
||||
function openModal(name){
|
||||
currentCenter=name;
|
||||
linkedIndexes=(centerData[name]||[]).slice();
|
||||
document.getElementById('modalTitle').textContent='关联医疗点 - '+name;
|
||||
document.getElementById('leftSearch').value='';
|
||||
document.getElementById('rightSearch').value='';
|
||||
document.getElementById('leftUnit').value='';
|
||||
renderLeft();renderRight();
|
||||
document.getElementById('modalMask').classList.add('open');
|
||||
}
|
||||
function closeModal(){document.getElementById('modalMask').classList.remove('open');}
|
||||
function renderLeft(){
|
||||
var kw=document.getElementById('leftSearch').value.trim().toLowerCase();
|
||||
var unit=document.getElementById('leftUnit').value;
|
||||
var list=document.getElementById('leftList');
|
||||
var items=[];
|
||||
allPoints.forEach(function(p,i){
|
||||
if(linkedIndexes.indexOf(i)>-1) return;
|
||||
if(kw&&p.name.toLowerCase().indexOf(kw)===-1) return;
|
||||
if(unit&&p.unit!==unit) return;
|
||||
items.push(i);
|
||||
});
|
||||
document.getElementById('leftCount').textContent=items.length+' 项';
|
||||
if(!items.length){list.innerHTML='<div class="transfer__empty">无匹配医疗点</div>';return;}
|
||||
var h='';
|
||||
items.forEach(function(i){
|
||||
var p=allPoints[i];
|
||||
h+='<div class="transfer__item"><div class="transfer__item-info"><div class="transfer__item-name">'+p.name+'</div><div class="transfer__item-meta">'+p.unit+' · '+p.addr+'</div></div><span class="link transfer__item-btn" onclick="addLinked('+i+')">添加 ›</span></div>';
|
||||
});
|
||||
list.innerHTML=h;
|
||||
}
|
||||
function renderRight(){
|
||||
var kw=document.getElementById('rightSearch').value.trim().toLowerCase();
|
||||
var list=document.getElementById('rightList');
|
||||
var items=[];
|
||||
linkedIndexes.forEach(function(i){
|
||||
var p=allPoints[i];
|
||||
if(kw&&p.name.toLowerCase().indexOf(kw)===-1) return;
|
||||
items.push(i);
|
||||
});
|
||||
document.getElementById('rightCount').textContent=linkedIndexes.length+' 项';
|
||||
if(!linkedIndexes.length){list.innerHTML='<div class="transfer__empty">暂无关联医疗点</div>';return;}
|
||||
if(!items.length){list.innerHTML='<div class="transfer__empty">无匹配结果</div>';return;}
|
||||
var h='';
|
||||
items.forEach(function(i){
|
||||
var p=allPoints[i];
|
||||
h+='<div class="transfer__item"><div class="transfer__item-info"><div class="transfer__item-name">'+p.name+'</div><div class="transfer__item-meta">'+p.unit+' · '+p.addr+'</div></div><span class="link-danger transfer__item-btn" style="cursor:pointer;" onclick="removeLinked('+i+')">‹ 移除</span></div>';
|
||||
});
|
||||
list.innerHTML=h;
|
||||
}
|
||||
function addLinked(idx){
|
||||
if(linkedIndexes.indexOf(idx)===-1) linkedIndexes.push(idx);
|
||||
centerData[currentCenter]=linkedIndexes.slice();
|
||||
renderLeft();renderRight();
|
||||
}
|
||||
function removeLinked(idx){
|
||||
var pos=linkedIndexes.indexOf(idx);
|
||||
if(pos>-1) linkedIndexes.splice(pos,1);
|
||||
centerData[currentCenter]=linkedIndexes.slice();
|
||||
renderLeft();renderRight();
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function openDrawer(name){
|
||||
document.getElementById('drawerTitle').textContent=name+' - 详情';
|
||||
document.getElementById('drawerIframe').src='center-basic-info-detail.html?name='+encodeURIComponent(name);
|
||||
document.getElementById('drawerMask').classList.add('open');
|
||||
setTimeout(function(){document.getElementById('drawer').classList.add('open');},10);
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawer').classList.remove('open');
|
||||
setTimeout(function(){document.getElementById('drawerMask').classList.remove('open');document.getElementById('drawerIframe').src='';},300);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -25,6 +25,10 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
@@ -99,18 +103,17 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent open" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item active">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -127,30 +130,60 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>通话编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入通话编号">
|
||||
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label>通话类型</label>
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>应急中心</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>坐席工号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入坐席工号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>接入电话</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入接入电话">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>接听状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>已接听</option>
|
||||
<option>未接听</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<label>拨打时间</label>
|
||||
<input class="filter-date" type="date" value="2026-04-01">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-date" type="date" value="2026-04-20">
|
||||
@@ -161,10 +194,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
@@ -178,152 +217,131 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>通话编号</th>
|
||||
<th>通话类型</th>
|
||||
<th>关联工单</th>
|
||||
<th>呼叫方</th>
|
||||
<th>接听方</th>
|
||||
<th>开始时间</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>单位部门</th>
|
||||
<th>呼叫中心</th>
|
||||
<th>坐席工号</th>
|
||||
<th>接入电话</th>
|
||||
<th>拨打时间</th>
|
||||
<th>接听状态</th>
|
||||
<th>接听时间</th>
|
||||
<th>结束时间</th>
|
||||
<th>通话时长</th>
|
||||
<th>通话状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>CALL-20260420-001</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260420-001</td>
|
||||
<td>王建军</td>
|
||||
<td>李坐席</td>
|
||||
<td>EMP-20198</td>
|
||||
<td>采油一厂/生产运行科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td>ZX-10001</td>
|
||||
<td>13856785521</td>
|
||||
<td>2026-04-20 09:15:32</td>
|
||||
<td>08:25</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-green">已接听</span></td>
|
||||
<td>2026-04-20 09:15:45</td>
|
||||
<td>2026-04-20 09:23:57</td>
|
||||
<td>08:12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>CALL-20260420-002</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260420-002</td>
|
||||
<td>张丽萍</td>
|
||||
<td>王坐席</td>
|
||||
<td>EMP-30142</td>
|
||||
<td>第五采气厂/安全环保科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td>ZX-10002</td>
|
||||
<td>13998768834</td>
|
||||
<td>2026-04-20 08:42:18</td>
|
||||
<td>03:47</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-green">已接听</span></td>
|
||||
<td>2026-04-20 08:42:30</td>
|
||||
<td>2026-04-20 08:46:05</td>
|
||||
<td>03:35</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>CALL-20260419-018</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260419-015</td>
|
||||
<td>陈伟东</td>
|
||||
<td>赵坐席</td>
|
||||
<td>EMP-10087</td>
|
||||
<td>油气工艺研究院/试验中心</td>
|
||||
<td>西安基地应急中心</td>
|
||||
<td>ZX-10003</td>
|
||||
<td>13612342290</td>
|
||||
<td>2026-04-19 22:05:47</td>
|
||||
<td>12:33</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-green">已接听</span></td>
|
||||
<td>2026-04-19 22:06:02</td>
|
||||
<td>2026-04-19 22:18:20</td>
|
||||
<td>12:18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>CALL-20260419-017</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260419-014</td>
|
||||
<td>刘志强</td>
|
||||
<td>李坐席</td>
|
||||
<td>EMP-20456</td>
|
||||
<td>采油二厂/工程技术科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td>ZX-10001</td>
|
||||
<td>15887656617</td>
|
||||
<td>2026-04-19 18:30:12</td>
|
||||
<td>05:18</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-red">未接听</span></td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>CALL-20260419-016</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260419-013</td>
|
||||
<td>赵国庆</td>
|
||||
<td>王坐席</td>
|
||||
<td>EMP-40321</td>
|
||||
<td>长庆工程监督处/质量监督科</td>
|
||||
<td>西安基地应急中心</td>
|
||||
<td>ZX-10004</td>
|
||||
<td>13756234403</td>
|
||||
<td>2026-04-19 16:12:55</td>
|
||||
<td>00:00</td>
|
||||
<td><span class="tag tag-red">未接</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-green">已接听</span></td>
|
||||
<td>2026-04-19 16:13:08</td>
|
||||
<td>2026-04-19 16:19:50</td>
|
||||
<td>06:42</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>CALL-20260419-015</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260419-012</td>
|
||||
<td>孙明亮</td>
|
||||
<td>赵坐席</td>
|
||||
<td>EMP-10234</td>
|
||||
<td>采油三厂/综合管理科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td>ZX-10002</td>
|
||||
<td>15523459918</td>
|
||||
<td>2026-04-19 14:28:03</td>
|
||||
<td>06:42</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-red">未接听</span></td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>CALL-20260419-014</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260419-011</td>
|
||||
<td>周文博</td>
|
||||
<td>李坐席</td>
|
||||
<td>EMP-50178</td>
|
||||
<td>勘探开发研究院/地质所</td>
|
||||
<td>西安基地应急中心</td>
|
||||
<td>ZX-10005</td>
|
||||
<td>18634563307</td>
|
||||
<td>2026-04-19 11:45:20</td>
|
||||
<td>02:15</td>
|
||||
<td><span class="tag tag-orange">中断</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="tag tag-green">已接听</span></td>
|
||||
<td>2026-04-19 11:45:35</td>
|
||||
<td>2026-04-19 11:48:50</td>
|
||||
<td>03:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>CALL-20260419-013</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260419-010</td>
|
||||
<td>吴海涛</td>
|
||||
<td>王坐席</td>
|
||||
<td>EMP-20789</td>
|
||||
<td>第二采气厂/生产运行科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td>ZX-10001</td>
|
||||
<td>13378907762</td>
|
||||
<td>2026-04-19 09:08:41</td>
|
||||
<td><span class="tag tag-green">已接听</span></td>
|
||||
<td>2026-04-19 09:08:55</td>
|
||||
<td>2026-04-19 09:13:51</td>
|
||||
<td>04:56</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -28,6 +28,10 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 按钮 */
|
||||
@@ -41,15 +45,40 @@
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
/* 下拉选择框 */
|
||||
.center-select{height:36px;padding:0 32px 0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-primary);background:#fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;min-width:180px;}
|
||||
.center-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.15);}
|
||||
/* 配置卡片 */
|
||||
.config-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.config-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
|
||||
.config-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.config-card__title{font-size:var(--font-base);font-weight:600;display:flex;align-items:center;gap:10px;}
|
||||
.config-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
|
||||
.config-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;justify-content:space-between;}
|
||||
.config-item__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.config-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
|
||||
.config-item__info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
|
||||
.config-item__name{font-size:var(--font-sm);font-weight:500;}
|
||||
.config-item__desc{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.config-item__input{width:100px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);text-align:right;color:var(--text-primary);flex-shrink:0;}
|
||||
.config-item__input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.15);}
|
||||
.config-card.disabled .config-grid,.config-card.disabled .clinic-list,.config-card.disabled .btn-add-clinic{opacity:0.45;pointer-events:none;}
|
||||
.config-card.disabled .config-item__input,.config-card.disabled .clinic-field input{background:#f5f5f5;color:#bbb;border-color:#e8e8e8;}
|
||||
/* 医疗点列表 */
|
||||
.clinic-list{display:flex;flex-direction:column;gap:12px;}
|
||||
.clinic-row{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:16px;background:#fff;transition:box-shadow .2s;}
|
||||
.clinic-row:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08);}
|
||||
.clinic-row__drag{cursor:grab;color:var(--text-placeholder);flex-shrink:0;display:flex;align-items:center;}
|
||||
.clinic-row__drag:active{cursor:grabbing;}
|
||||
.clinic-row__name{font-size:var(--font-sm);font-weight:500;min-width:120px;flex-shrink:0;}
|
||||
.clinic-row__fields{display:flex;gap:16px;flex:1;}
|
||||
.clinic-field{display:flex;align-items:center;gap:6px;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.clinic-field input{width:72px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);text-align:right;}
|
||||
.clinic-field input:focus{outline:none;border-color:var(--primary);}
|
||||
.clinic-row__actions{flex-shrink:0;}
|
||||
.btn-icon{width:28px;height:28px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;}
|
||||
.btn-icon:hover{background:#f0f0f0;color:var(--danger);}
|
||||
.btn-add-clinic{border:1px dashed var(--border);border-radius:var(--radius-md);padding:12px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--primary);font-size:var(--font-sm);transition:all .2s;background:none;width:100%;}
|
||||
.btn-add-clinic:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.panel{display:none;}
|
||||
.panel.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -87,18 +116,17 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -115,116 +143,167 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 页面标题 -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
|
||||
<h2 style="font-size:var(--font-xl);font-weight:600;">大屏数据配置</h2>
|
||||
<button class="btn btn-primary">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<h2 style="font-size:var(--font-xl);font-weight:600;">大屏数据配置</h2>
|
||||
<select class="center-select" id="centerSelect" onchange="switchCenter(this.value)">
|
||||
<option value="xian">西安应急中心</option>
|
||||
<option value="yinchuan">银川应急中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7a4.5 4.5 0 018.2-2.5M11.5 7a4.5 4.5 0 01-8.2 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M11 2v3h-3M3 12V9h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
重置
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
保存配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览模块 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">数据概览模块</div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏顶部核心指标展示</span>
|
||||
<!-- ========== 西安应急中心 ========== -->
|
||||
<div id="panel-xian" class="panel active">
|
||||
<!-- 服务详情数据 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">服务详情数据 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏服务详情模块的数据展示</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">最新呼入电话</div></div><input class="config-item__input" type="number" value="128" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">最新受理电话</div></div><input class="config-item__input" type="number" value="96" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">突发重大伤病应急</div></div><input class="config-item__input" type="number" value="12" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">重大伤病应急就医</div></div><input class="config-item__input" type="number" value="8" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">累计受理</div></div><input class="config-item__input" type="number" value="3562" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">累计处置</div></div><input class="config-item__input" type="number" value="3480" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">今日工单数</div>
|
||||
<div class="config-item__desc">展示当日接收的应急工单总数</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<!-- 体检数据 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">体检数据 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏体检数据模块各医院数字</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">在线坐席数</div>
|
||||
<div class="config-item__desc">展示当前在线的坐席人员数量</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">兴隆医院</div></div><input class="config-item__input" type="number" value="420" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">高陵医院</div></div><input class="config-item__input" type="number" value="385" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">宁夏宝石花医院</div></div><input class="config-item__input" type="number" value="310" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">庆阳医院</div></div><input class="config-item__input" type="number" value="275" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">延安市人民医院</div></div><input class="config-item__input" type="number" value="198" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">西京医院</div></div><input class="config-item__input" type="number" value="156" /></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">应急响应中数量</div>
|
||||
<div class="config-item__desc">展示正在处理中的应急事件数量</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<!-- 大病人数 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">大病人数 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏大病人数模块的数据展示</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">高</div><div class="config-item__desc">高风险大病人数</div></div><input class="config-item__input" type="number" value="23" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">中</div><div class="config-item__desc">中风险大病人数</div></div><input class="config-item__input" type="number" value="67" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">低</div><div class="config-item__desc">低风险大病人数</div></div><input class="config-item__input" type="number" value="145" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图展示模块 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">地图展示模块</div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏地图图层的显示内容</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">医院分布</div>
|
||||
<div class="config-item__desc">在地图上标注合作医院位置</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<!-- ========== 银川应急中心 ========== -->
|
||||
<div id="panel-yinchuan" class="panel">
|
||||
<!-- 服务详情 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">服务详情 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏服务详情模块的数据展示</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">AED设备位置</div>
|
||||
<div class="config-item__desc">在地图上标注AED设备分布点</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">救护车位置</div>
|
||||
<div class="config-item__desc">实时显示救护车当前位置</div>
|
||||
</div>
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">最新呼入电话</div></div><input class="config-item__input" type="number" value="86" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">最新受理电话</div></div><input class="config-item__input" type="number" value="72" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">突发重大伤病应急</div></div><input class="config-item__input" type="number" value="5" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">重大伤病应急就医</div></div><input class="config-item__input" type="number" value="3" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计图表模块 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">统计图表模块</div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏底部统计图表的展示</span>
|
||||
<!-- 体检数据 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">体检数据 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏体检数据模块各医院数字</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">兴隆医院</div></div><input class="config-item__input" type="number" value="350" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">高陵医院</div></div><input class="config-item__input" type="number" value="290" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">宁夏宝石花医院</div></div><input class="config-item__input" type="number" value="410" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">庆阳医院</div></div><input class="config-item__input" type="number" value="220" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">延安市人民医院</div></div><input class="config-item__input" type="number" value="175" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">西京医院</div></div><input class="config-item__input" type="number" value="130" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">月度趋势图</div>
|
||||
<div class="config-item__desc">展示近12个月工单数量趋势</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<!-- 一线医疗点数据 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">一线医疗点数据 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">可添加医疗点并配置数据，拖拽排序</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">工单类型分布</div>
|
||||
<div class="config-item__desc">按类型统计工单占比饼图</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<div class="clinic-list" id="clinicList">
|
||||
<!-- CLINIC_PLACEHOLDER -->
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">响应时长统计</div>
|
||||
<div class="config-item__desc">展示平均响应时长柱状图</div>
|
||||
</div>
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<button class="btn-add-clinic" onclick="addClinic()" style="margin-top:12px;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
添加医疗点
|
||||
</button>
|
||||
</div>
|
||||
<!-- 员工健康状况 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">员工健康状况 <div class="switch on" onclick="toggleCard(this)"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏员工健康状况模块的数据展示</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">重大疾病</div></div><input class="config-item__input" type="number" value="15" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">健康高风险</div></div><input class="config-item__input" type="number" value="48" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">慢病人数</div></div><input class="config-item__input" type="number" value="236" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">重点指标异常</div></div><input class="config-item__input" type="number" value="89" /></div>
|
||||
<div class="config-item"><div class="config-item__info"><div class="config-item__name">健康人数</div></div><input class="config-item__input" type="number" value="1520" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
function toggleCard(sw){
|
||||
sw.classList.toggle('on');
|
||||
var card=sw.closest('.config-card');
|
||||
if(sw.classList.contains('on')){card.classList.remove('disabled');}else{card.classList.add('disabled');}
|
||||
}
|
||||
function switchCenter(val){
|
||||
document.querySelectorAll('.panel').forEach(function(p){p.classList.remove('active');});
|
||||
document.getElementById('panel-'+val).classList.add('active');
|
||||
}
|
||||
/* 一线医疗点 - 动态添加 */
|
||||
var clinicId=0;
|
||||
function addClinic(name){
|
||||
clinicId++;
|
||||
var n=name||'医疗点'+clinicId;
|
||||
var list=document.getElementById('clinicList');
|
||||
var row=document.createElement('div');
|
||||
row.className='clinic-row';
|
||||
row.draggable=true;
|
||||
row.innerHTML='<div class="clinic-row__drag" title="拖拽排序"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="6" cy="4" r="1.2" fill="currentColor"/><circle cx="10" cy="4" r="1.2" fill="currentColor"/><circle cx="6" cy="8" r="1.2" fill="currentColor"/><circle cx="10" cy="8" r="1.2" fill="currentColor"/><circle cx="6" cy="12" r="1.2" fill="currentColor"/><circle cx="10" cy="12" r="1.2" fill="currentColor"/></svg></div><div class="clinic-row__name">'+n+'</div><div class="clinic-row__fields"><div class="clinic-field">高风险干预 <input type="number" value="0"/></div><div class="clinic-field">慢病 <input type="number" value="0"/></div><div class="clinic-field">巡诊 <input type="number" value="0"/></div></div><div class="clinic-row__actions"><button class="btn-icon" onclick="this.closest(\'.clinic-row\').remove()" title="删除"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button></div>';
|
||||
/* 拖拽排序 */
|
||||
row.addEventListener('dragstart',function(e){e.dataTransfer.effectAllowed='move';this.style.opacity='0.4';window._dragRow=this;});
|
||||
row.addEventListener('dragend',function(){this.style.opacity='1';});
|
||||
row.addEventListener('dragover',function(e){e.preventDefault();e.dataTransfer.dropEffect='move';});
|
||||
row.addEventListener('drop',function(e){e.preventDefault();if(window._dragRow&&window._dragRow!==this){list.insertBefore(window._dragRow,this);}});
|
||||
list.appendChild(row);
|
||||
}
|
||||
/* 初始化两个示例医疗点 */
|
||||
addClinic('采油一厂医疗点');
|
||||
addClinic('采油二厂医疗点');
|
||||
addClinic('作业区卫生所');
|
||||
</script>
|
||||
|
||||
@@ -1,324 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 员工信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 开关 */
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
/* 操作按钮 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>角色类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>操作人员</option>
|
||||
<option>专业人员</option>
|
||||
<option>驻场人员</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#fff" stroke-width="1.5"/><path d="M11 11l3.5 3.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增员工
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12v2h12v-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工信息列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 56 条记录</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>角色类型</th>
|
||||
<th>联系电话</th>
|
||||
<th>资质证书</th>
|
||||
<th>入职时间</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>李操作员</td>
|
||||
<td>EMP20210101</td>
|
||||
<td>采油一厂</td>
|
||||
<td><span class="tag tag-blue">操作人员</span></td>
|
||||
<td>138****5621</td>
|
||||
<td>急救员证</td>
|
||||
<td>2021-03-15</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>陈医生</td>
|
||||
<td>EMP20200218</td>
|
||||
<td>公司机关</td>
|
||||
<td><span class="tag tag-green">专业人员</span></td>
|
||||
<td>139****8834</td>
|
||||
<td>执业医师资格证</td>
|
||||
<td>2020-06-01</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>张操作员</td>
|
||||
<td>EMP20220315</td>
|
||||
<td>采油二厂</td>
|
||||
<td><span class="tag tag-blue">操作人员</span></td>
|
||||
<td>137****2209</td>
|
||||
<td>急救员证</td>
|
||||
<td>2022-07-20</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>周驻场</td>
|
||||
<td>EMP20230412</td>
|
||||
<td>采气一厂</td>
|
||||
<td><span class="tag tag-orange">驻场人员</span></td>
|
||||
<td>135****7743</td>
|
||||
<td>护士执业证</td>
|
||||
<td>2023-01-10</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>赵医生</td>
|
||||
<td>EMP20190506</td>
|
||||
<td>公司机关</td>
|
||||
<td><span class="tag tag-green">专业人员</span></td>
|
||||
<td>136****3318</td>
|
||||
<td>执业医师资格证、AHA导师证</td>
|
||||
<td>2019-09-01</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>王操作员</td>
|
||||
<td>EMP20240108</td>
|
||||
<td>采油一厂</td>
|
||||
<td><span class="tag tag-blue">操作人员</span></td>
|
||||
<td>158****9902</td>
|
||||
<td>急救员证</td>
|
||||
<td>2024-03-01</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 56 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -25,12 +25,42 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.modal-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:480px;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-item:last-child{margin-bottom:0;}
|
||||
.form-label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;}
|
||||
.form-label .required{color:var(--danger);margin-right:4px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
@@ -96,18 +126,17 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent open" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub">
|
||||
<a href="center-group.html" class="sidebar-item active">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -124,10 +153,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
@@ -135,8 +160,29 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>分组名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入分组名称">
|
||||
<label>坐席工号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入坐席工号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>应急中心：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>坐席状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>已接</option>
|
||||
<option>振铃未接听</option>
|
||||
<option>ivr放弃</option>
|
||||
<option>排队放弃</option>
|
||||
<option>黑名单</option>
|
||||
<option>留言</option>
|
||||
<option>并发限制</option>
|
||||
<option>失败</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
@@ -144,106 +190,87 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">+ 新增分组</button>
|
||||
<button class="btn btn-primary" onclick="document.getElementById('addModal').classList.add('show')">+ 新增坐席</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">分组列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 8 条</span>
|
||||
<span class="table-card__title">坐席列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 24 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>分组名称</th>
|
||||
<th>分组编号</th>
|
||||
<th>组长</th>
|
||||
<th>成员数</th>
|
||||
<th>值班规则</th>
|
||||
<th>状态</th>
|
||||
<th>坐席工号</th>
|
||||
<th>所属应急中心</th>
|
||||
<th>坐席状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>A组-日班</td>
|
||||
<td>GRP-001</td>
|
||||
<td>李晓峰</td>
|
||||
<td>6</td>
|
||||
<td>工作日 08:00-20:00</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>ZX-10001</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td><span class="tag tag-green">已接</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>B组-夜班</td>
|
||||
<td>GRP-002</td>
|
||||
<td>赵文涛</td>
|
||||
<td>4</td>
|
||||
<td>工作日 20:00-08:00</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>ZX-10002</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td><span class="tag tag-orange">振铃未接听</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>C组-周末班</td>
|
||||
<td>GRP-003</td>
|
||||
<td>孙丽华</td>
|
||||
<td>5</td>
|
||||
<td>周末全天 08:00-20:00</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>ZX-10003</td>
|
||||
<td>西安基地应急中心</td>
|
||||
<td><span class="tag tag-red">失败</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>D组-机动组</td>
|
||||
<td>GRP-004</td>
|
||||
<td>周建明</td>
|
||||
<td>3</td>
|
||||
<td>按需调度</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>ZX-10004</td>
|
||||
<td>西安基地应急中心</td>
|
||||
<td><span class="tag tag-gray">排队放弃</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>E组-备用组</td>
|
||||
<td>GRP-005</td>
|
||||
<td>吴海涛</td>
|
||||
<td>2</td>
|
||||
<td>节假日全天</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>ZX-10005</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
<td><span class="tag tag-blue">留言</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
@@ -253,13 +280,43 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 8 条</span>
|
||||
<span>共 24 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增坐席弹窗 -->
|
||||
<div class="modal-mask" id="addModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title">新增坐席</span>
|
||||
<button class="modal__close" onclick="document.getElementById('addModal').classList.remove('show')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-item">
|
||||
<label class="form-label"><span class="required">*</span>坐席工号</label>
|
||||
<input class="form-input" type="text" placeholder="请输入坐席工号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label"><span class="required">*</span>所属应急中心</label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择所属应急中心</option>
|
||||
<option>长庆油田应急中心</option>
|
||||
<option>西安基地应急中心</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="document.getElementById('addModal').classList.remove('show')">取消</button>
|
||||
<button class="btn btn-primary" onclick="document.getElementById('addModal').classList.remove('show')">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -28,15 +28,40 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 周切换器 */
|
||||
.week-switcher{display:flex;align-items:center;gap:8px;}
|
||||
.week-arrow{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;}
|
||||
.week-arrow:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.week-label{font-size:var(--font-sm);font-weight:500;padding:0 8px;cursor:pointer;color:var(--primary);border-bottom:1px dashed var(--primary);}
|
||||
/* 排班单元格 */
|
||||
.schedule-cell{min-height:36px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;padding:4px 8px;color:var(--text-primary);font-size:var(--font-sm);}
|
||||
.schedule-cell--editable{cursor:pointer;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;transition:all .15s;min-width:120px;position:relative;}
|
||||
.schedule-cell--editable:hover{border-color:var(--primary);}
|
||||
.schedule-cell--editable::after{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-placeholder);pointer-events:none;}
|
||||
.schedule-cell--empty{color:var(--text-placeholder);}
|
||||
/* 下拉选择框 */
|
||||
.center-select{height:36px;padding:0 32px 0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-primary);background:#fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;min-width:180px;}
|
||||
.center-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.15);}
|
||||
/* 人员选择弹窗 */
|
||||
.person-picker{position:absolute;z-index:200;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.12);display:none;min-width:180px;max-height:280px;overflow:hidden;display:none;flex-direction:column;}
|
||||
.person-picker.show{display:flex;}
|
||||
.person-picker__search{padding:8px;border-bottom:1px solid var(--border);}
|
||||
.person-picker__search input{width:100%;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);outline:none;}
|
||||
.person-picker__search input:focus{border-color:var(--primary);}
|
||||
.person-picker__search input::placeholder{color:var(--text-placeholder);}
|
||||
.person-picker__list{overflow-y:auto;max-height:210px;padding:4px 0;}
|
||||
.person-picker__item{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;border-radius:0;transition:background .15s;display:flex;align-items:center;gap:8px;}
|
||||
.person-picker__item:hover{background:var(--primary-light);}
|
||||
.person-picker__item.hidden{display:none;}
|
||||
.person-picker__check{width:16px;height:16px;border:1.5px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.person-picker__item.selected .person-picker__check{background:var(--primary);border-color:var(--primary);}
|
||||
.person-picker__item.selected .person-picker__check::after{content:'';display:block;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
@@ -47,20 +72,13 @@
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
.table-card__content table{white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:center;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作按钮 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
@@ -104,18 +122,17 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -132,125 +149,151 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>排班周期</label>
|
||||
<select class="filter-select">
|
||||
<option>本周</option>
|
||||
<option>上周</option>
|
||||
<option>下周</option>
|
||||
<!-- 顶部操作栏 -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<h2 style="font-size:var(--font-xl);font-weight:600;">排班配置</h2>
|
||||
<select class="center-select" id="centerSelect">
|
||||
<option value="xian">西安应急中心</option>
|
||||
<option value="yinchuan">银川应急中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>分组</label>
|
||||
<select class="filter-select">
|
||||
<option>全部分组</option>
|
||||
<option>A组</option>
|
||||
<option>B组</option>
|
||||
<option>C组</option>
|
||||
</select>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<button class="btn btn-primary" id="btnCopy" style="display:none;" onclick="alert('已复制上一周排班')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="4" y="4" width="8" height="8" rx="1.5" stroke="#fff" stroke-width="1.4"/><path d="M10 4V2.5A1.5 1.5 0 008.5 1h-6A1.5 1.5 0 001 2.5v6A1.5 1.5 0 002.5 10H4" stroke="#fff" stroke-width="1.4"/></svg>
|
||||
复制上一周
|
||||
</button>
|
||||
<button class="btn btn-primary" id="btnEdit" onclick="toggleEdit()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M8.5 2.5l3 3M1.5 9.5l-.5 3.5 3.5-.5 8-8-3-3-8 8z" stroke="#fff" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
修改排班
|
||||
</button>
|
||||
<button class="btn btn-primary" id="btnSave" style="display:none;" onclick="toggleEdit()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
保存
|
||||
</button>
|
||||
<button class="btn btn-default" id="btnCancel" style="display:none;" onclick="toggleEdit()">取消</button>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#fff" stroke-width="1.5"/><path d="M11 11l3.5 3.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增排班
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 排班表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">排班表 — 本周（2026-04-14 ~ 2026-04-20）</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 3 组</span>
|
||||
<!-- 周切换 -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
|
||||
<div class="week-switcher">
|
||||
<button class="week-arrow" onclick="switchWeek(-1)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 2L4 7l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||||
<span class="week-label" id="weekLabel">2026-04-20 ~ 2026-04-26</span>
|
||||
<button class="week-arrow" onclick="switchWeek(1)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 2l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
</div>
|
||||
|
||||
<!-- 排班表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__content" style="position:relative;">
|
||||
<table id="scheduleTable">
|
||||
<colgroup><col style="width:120px"><col><col></colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left;">分组</th>
|
||||
<th style="text-align:left;">人员</th>
|
||||
<th>周一(4/14)</th>
|
||||
<th>周二(4/15)</th>
|
||||
<th>周三(4/16)</th>
|
||||
<th>周四(4/17)</th>
|
||||
<th>周五(4/18)</th>
|
||||
<th>周六(4/19)</th>
|
||||
<th>周日(4/20)</th>
|
||||
<th rowspan="2">星期</th>
|
||||
<th colspan="2">值班人员</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>操作人员</th>
|
||||
<th>专业人员</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2" style="text-align:left;font-weight:500;vertical-align:middle;">A组</td>
|
||||
<td style="text-align:left;">李操作员</td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left;">陈医生</td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left;font-weight:500;vertical-align:middle;">B组</td>
|
||||
<td style="text-align:left;">张操作员</td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" style="text-align:left;font-weight:500;vertical-align:middle;">C组</td>
|
||||
<td style="text-align:left;">周操作员</td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left;">赵医生</td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
</tr>
|
||||
<tr><td>星期一</td><td><div class="schedule-cell" data-type="op" data-persons="4号工位">4号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张婧">张婧</div></td></tr>
|
||||
<tr><td>星期二</td><td><div class="schedule-cell" data-type="op" data-persons="4号工位">4号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张婧">张婧</div></td></tr>
|
||||
<tr><td>星期三</td><td><div class="schedule-cell" data-type="op" data-persons="3号工位">3号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张婧">张婧</div></td></tr>
|
||||
<tr><td>星期四</td><td><div class="schedule-cell" data-type="op" data-persons="6号工位">6号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张婧">张婧</div></td></tr>
|
||||
<tr><td>星期五</td><td><div class="schedule-cell" data-type="op" data-persons="2号工位">2号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张婧">张婧</div></td></tr>
|
||||
<tr><td>星期六</td><td><div class="schedule-cell" data-type="op" data-persons="2号工位">2号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张明">张明</div></td></tr>
|
||||
<tr><td>星期日</td><td><div class="schedule-cell" data-type="op" data-persons="2号工位">2号工位</div></td><td><div class="schedule-cell" data-type="pro" data-persons="张明">张明</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 人员选择弹窗 -->
|
||||
<div class="person-picker" id="personPicker"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
var editing=false,activeCell=null;
|
||||
var opList=['1号工位','2号工位','3号工位','4号工位','5号工位','6号工位'];
|
||||
var proList=['张婧','张明','李医生','王护士','赵主任','刘护士长'];
|
||||
|
||||
function toggleEdit(){
|
||||
editing=!editing;
|
||||
document.getElementById('btnEdit').style.display=editing?'none':'';
|
||||
document.getElementById('btnSave').style.display=editing?'':'none';
|
||||
document.getElementById('btnCancel').style.display=editing?'':'none';
|
||||
document.getElementById('btnCopy').style.display=editing?'':'none';
|
||||
document.querySelectorAll('.schedule-cell').forEach(function(c){
|
||||
if(editing){c.classList.add('schedule-cell--editable');}else{c.classList.remove('schedule-cell--editable');}
|
||||
});
|
||||
closePicker();
|
||||
}
|
||||
|
||||
function closePicker(){document.getElementById('personPicker').classList.remove('show');activeCell=null;}
|
||||
|
||||
function openPicker(cell){
|
||||
activeCell=cell;
|
||||
var list=cell.dataset.type==='op'?opList:proList;
|
||||
var selected=(cell.dataset.persons||'').split(',').filter(Boolean);
|
||||
var picker=document.getElementById('personPicker');
|
||||
var html='<div class="person-picker__search"><input type="text" placeholder="搜索姓名..." oninput="filterPicker(this.value)"></div>';
|
||||
html+='<div class="person-picker__list">';
|
||||
html+=list.map(function(name){
|
||||
var sel=selected.indexOf(name)!==-1;
|
||||
return '<div class="person-picker__item'+(sel?' selected':'')+'" data-name="'+name+'" onclick="togglePerson(this)"><div class="person-picker__check"></div>'+name+'</div>';
|
||||
}).join('');
|
||||
html+='</div>';
|
||||
picker.innerHTML=html;
|
||||
var rect=cell.getBoundingClientRect(),tRect=picker.parentElement.getBoundingClientRect();
|
||||
picker.style.left=(rect.left-tRect.left)+'px';
|
||||
picker.style.top=(rect.bottom-tRect.top+4)+'px';
|
||||
picker.classList.add('show');
|
||||
picker.querySelector('input').focus();
|
||||
}
|
||||
|
||||
function filterPicker(keyword){
|
||||
var kw=keyword.trim().toLowerCase();
|
||||
document.querySelectorAll('#personPicker .person-picker__item').forEach(function(it){
|
||||
var name=it.dataset.name.toLowerCase();
|
||||
it.classList.toggle('hidden',kw!==''&&name.indexOf(kw)===-1);
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('scheduleTable').addEventListener('click',function(e){
|
||||
if(!editing)return;
|
||||
var cell=e.target.closest('.schedule-cell');
|
||||
if(!cell)return;
|
||||
if(activeCell===cell){closePicker();return;}
|
||||
openPicker(cell);
|
||||
});
|
||||
|
||||
function togglePerson(el){
|
||||
el.classList.toggle('selected');
|
||||
if(!activeCell)return;
|
||||
var names=[];
|
||||
el.closest('.person-picker__list').querySelectorAll('.selected').forEach(function(it){names.push(it.dataset.name);});
|
||||
activeCell.dataset.persons=names.join(',');
|
||||
activeCell.textContent=names.join('、')||'请选择';
|
||||
if(!names.length)activeCell.classList.add('schedule-cell--empty');else activeCell.classList.remove('schedule-cell--empty');
|
||||
}
|
||||
|
||||
document.addEventListener('click',function(e){if(!e.target.closest('.person-picker')&&!e.target.closest('.schedule-cell'))closePicker();});
|
||||
|
||||
/* 周切换 */
|
||||
var weekOffset=0;
|
||||
function switchWeek(dir){
|
||||
weekOffset+=dir;
|
||||
var base=new Date(2026,3,20);
|
||||
base.setDate(base.getDate()+weekOffset*7);
|
||||
var end=new Date(base);end.setDate(end.getDate()+6);
|
||||
document.getElementById('weekLabel').textContent=fmt(base)+' ~ '+fmt(end);
|
||||
}
|
||||
function fmt(d){return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');}
|
||||
</script>
|
||||
|
||||
@@ -1,284 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 坐席管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>坐席编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入坐席编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>坐席状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>在线</option>
|
||||
<option>离线</option>
|
||||
<option>忙碌</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">+ 新增坐席</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">坐席列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 24 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>坐席编号</th>
|
||||
<th>坐席名称</th>
|
||||
<th>绑定人员</th>
|
||||
<th>联系电话</th>
|
||||
<th>所属分组</th>
|
||||
<th>当前状态</th>
|
||||
<th>今日接单数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>SEAT-001</td>
|
||||
<td>坐席一号</td>
|
||||
<td>李晓峰</td>
|
||||
<td>138****5521</td>
|
||||
<td>A组-日班</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td>12</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>SEAT-002</td>
|
||||
<td>坐席二号</td>
|
||||
<td>王秀英</td>
|
||||
<td>139****8834</td>
|
||||
<td>A组-日班</td>
|
||||
<td><span class="tag tag-orange">忙碌</span></td>
|
||||
<td>8</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>SEAT-003</td>
|
||||
<td>坐席三号</td>
|
||||
<td>赵文涛</td>
|
||||
<td>136****2290</td>
|
||||
<td>B组-夜班</td>
|
||||
<td><span class="tag tag-gray">离线</span></td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>SEAT-004</td>
|
||||
<td>坐席四号</td>
|
||||
<td>孙丽华</td>
|
||||
<td>158****6617</td>
|
||||
<td>A组-日班</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td>15</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>SEAT-005</td>
|
||||
<td>坐席五号</td>
|
||||
<td>周建明</td>
|
||||
<td>137****4403</td>
|
||||
<td>B组-夜班</td>
|
||||
<td><span class="tag tag-gray">离线</span></td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 24 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 大病就医详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
/* 内容卡片 */
|
||||
.card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.card__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
/* 信息网格 - 3列 */
|
||||
.info-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-bottom:0;}
|
||||
.info-cell{padding:10px 0;font-size:var(--font-sm);display:flex;align-items:baseline;gap:0;}
|
||||
.info-cell--full{grid-column:1/-1;}
|
||||
.info-cell__label{color:var(--text-secondary);white-space:nowrap;min-width:84px;flex-shrink:0;}
|
||||
.info-cell__value{color:var(--text-primary);}
|
||||
.status{font-weight:600;}
|
||||
.status--done{color:var(--success);}
|
||||
.status--doing{color:var(--primary);}
|
||||
/* 图片列表 */
|
||||
.photo-row{padding:10px 0;font-size:var(--font-sm);display:flex;align-items:flex-start;gap:0;grid-column:1/-1;}
|
||||
.photo-row__label{color:var(--text-secondary);white-space:nowrap;min-width:84px;flex-shrink:0;padding-top:4px;}
|
||||
.photo-list{display:flex;gap:12px;flex-wrap:wrap;}
|
||||
.photo-item{width:120px;height:90px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 50%,#91d5ff 100%);overflow:hidden;position:relative;cursor:pointer;border:1px solid #d9d9d9;transition:box-shadow .2s;}
|
||||
.photo-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.15);}
|
||||
.photo-item__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-xs);opacity:.6;}
|
||||
.photo-item__icon{display:flex;flex-direction:column;align-items:center;gap:4px;}
|
||||
.photo-item__icon svg{width:24px;height:24px;opacity:.5;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="center-serious-illness.html">大病就医</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span>大病就医详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 工单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">工单信息</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">工单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
|
||||
<div class="info-cell"><span class="info-cell__label">申请时间：</span><span class="info-cell__value">2026-06-24 12:30:30</span></div>
|
||||
|
||||
<div class="info-cell"><span class="info-cell__label">派单时间：</span><span class="info-cell__value">2026-06-24 12:30:30</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">操作人员：</span><span class="info-cell__value">张旭</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">派单说明：</span><span class="info-cell__value">请尽快挂号</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">驻场人员：</span><span class="info-cell__value">王希(15899655523)</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">完成时间：</span><span class="info-cell__value">2026-06-24 12:30:30</span></div>
|
||||
|
||||
<div class="info-cell"><span class="info-cell__label">驻场说明：</span><span class="info-cell__value">张希医生6.24不值班，挂了其他医生的号</span></div>
|
||||
<div class="photo-row"><span class="photo-row__label">驻场图片：</span><div class="photo-list"><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>挂号单</div></div></div><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>就诊现场</div></div></div><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>诊断报告</div></div></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 员工信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">员工预约信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">申请员工：</span><span class="info-cell__value">王旭-男-23</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">员工编号：</span><span class="info-cell__value">256985</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">单位部门：</span><span class="info-cell__value">第三采油厂-XXX作业区</span></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">预约医院：</span><span class="info-cell__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">预约科室：</span><span class="info-cell__value">神经内科</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">预约医生：</span><span class="info-cell__value">张希(副主任医师)</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">挂号类别：</span><span class="info-cell__value">专家号</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">期望预约时间：</span><span class="info-cell__value">2026-06-24 17:30</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">病情描述：</span><span class="info-cell__value">头晕不舒服</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">备注：</span><span class="info-cell__value">请快点安排！！！！</span></div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="info-row">-->
|
||||
<!-- <div class="info-cell"><span class="info-cell__label">手机号：</span><span class="info-cell__value">18566985523</span></div>-->
|
||||
<!-- <div class="info-cell"><span class="info-cell__label">身份证号：</span><span class="info-cell__value">43062619650236</span></div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 就诊信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">实际就诊信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">就诊医院：</span><span class="info-cell__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">就诊科室：</span><span class="info-cell__value">神经内科</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">就诊医生：</span><span class="info-cell__value">王胡(主治医师)</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">就诊时间：</span><span class="info-cell__value">2026-06-24 17:00~17:30</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">就诊序号：</span><span class="info-cell__value">10</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -28,6 +28,10 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
@@ -122,18 +126,17 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -150,10 +153,6 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
@@ -183,6 +182,7 @@
|
||||
<label>工单状态</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>待确认</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
</select>
|
||||
@@ -245,7 +245,7 @@
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-16 12:23:32</td>
|
||||
<td>2026-03-18 15:42:10</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
@@ -262,7 +262,7 @@
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-03-16 12:25:18</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
@@ -276,10 +276,10 @@
|
||||
<td>张明远</td>
|
||||
<td>2026-03-20 14:00</td>
|
||||
<td>徐豪</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td><span class="tag tag-orange">待确认</span></td>
|
||||
<td>2026-03-16 12:28:45</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
@@ -296,7 +296,7 @@
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-14 16:05:18</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
@@ -310,10 +310,10 @@
|
||||
<td>赵国强</td>
|
||||
<td>2026-04-12 14:20</td>
|
||||
<td>赵文博</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td><span class="tag tag-orange">待确认</span></td>
|
||||
<td>2026-04-11 09:32:47</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
@@ -330,7 +330,7 @@
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-04-07 22:18:05</td>
|
||||
<td>2026-04-10 09:15:33</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">7</td>
|
||||
@@ -347,7 +347,7 @@
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-03-23 14:50:33</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">8</td>
|
||||
@@ -364,7 +364,7 @@
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-17 10:25:41</td>
|
||||
<td>2026-03-20 11:08:22</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -28,6 +28,10 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
@@ -72,6 +76,62 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{width:85%;height:90%;background:#fff;border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#001529;color:#fff;flex-shrink:0;}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:20px;}
|
||||
.modal__close:hover{background:rgba(255,255,255,0.15);}
|
||||
.modal__body{flex:1;overflow:hidden;padding:16px 24px;display:flex;flex-direction:column;}
|
||||
/* 提示条 */
|
||||
.sim-tip{background:#FFF7E6;border:1px solid #FFE58F;border-radius:var(--radius-md);padding:10px 16px;display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#D48806;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.sim-tip svg{flex-shrink:0;}
|
||||
/* 疾病Tab */
|
||||
.disease-tabs{display:flex;gap:0;margin-bottom:12px;flex-shrink:0;}
|
||||
.disease-tab{padding:8px 24px;border:1px solid var(--border);font-size:var(--font-sm);cursor:pointer;background:#fff;color:var(--text-primary);transition:all .15s;}
|
||||
.disease-tab:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
|
||||
.disease-tab:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
|
||||
.disease-tab+.disease-tab{border-left:none;}
|
||||
.disease-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 布局 */
|
||||
.sim-layout{display:flex;gap:16px;flex:1;min-height:0;}
|
||||
.sim-left{flex:1;min-width:0;display:flex;flex-direction:column;}
|
||||
.sim-right{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;}
|
||||
/* 员工卡片 */
|
||||
.emp-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;display:flex;gap:12px;align-items:center;flex-shrink:0;}
|
||||
.emp-avatar{width:56px;height:56px;border-radius:var(--radius-md);background:#f0f0f0;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);flex-shrink:0;}
|
||||
.emp-info{font-size:var(--font-sm);line-height:1.8;}
|
||||
.emp-info strong{font-size:var(--font-base);}
|
||||
.emp-info span{color:var(--text-secondary);margin-left:12px;}
|
||||
/* 地图占位 */
|
||||
.map-placeholder{width:100%;flex:1;min-height:0;background:#e8e8e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none'%3E%3Crect x='10' y='10' width='60' height='60' rx='8' stroke='%23bbb' stroke-width='2' stroke-dasharray='6 4'/%3E%3Ctext x='40' y='44' text-anchor='middle' fill='%23999' font-size='12'%3E地图区域%3C/text%3E%3C/svg%3E") no-repeat center;border-radius:var(--radius-md);position:relative;overflow:hidden;}
|
||||
.map-search{position:absolute;top:12px;left:12px;display:flex;gap:8px;z-index:1;}
|
||||
.map-search input{width:220px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px 0 30px;font-size:var(--font-xs);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4.5' stroke='%23999' stroke-width='1.2'/%3E%3Cpath d='M9.5 9.5l3 3' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px center;}
|
||||
.map-search button{height:32px;padding:0 12px;border:none;background:none;color:var(--primary);font-size:var(--font-xs);cursor:pointer;}
|
||||
.map-pin{position:absolute;top:50%;left:45%;transform:translate(-50%,-50%);width:40px;height:40px;background:rgba(255,77,79,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;}
|
||||
.map-pin::after{content:'';width:12px;height:12px;background:var(--danger);border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
|
||||
.map-marker{position:absolute;padding:2px 8px;border-radius:10px;font-size:10px;color:#fff;white-space:nowrap;}
|
||||
.map-btn{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:10px 32px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-sm);cursor:pointer;box-shadow:0 4px 12px rgba(24,144,255,0.4);}
|
||||
.map-btn:hover{background:#40a9ff;}
|
||||
.map-placeholder{cursor:crosshair;}
|
||||
/* 选点标记 */
|
||||
.map-pick{position:absolute;display:none;flex-direction:column;align-items:center;pointer-events:none;transform:translate(-50%,-100%);z-index:2;}
|
||||
.map-pick.show{display:flex;}
|
||||
.map-pick__label{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:var(--font-xs);color:var(--text-primary);box-shadow:0 2px 8px rgba(0,0,0,0.15);white-space:nowrap;margin-bottom:4px;}
|
||||
.map-pick__label::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;}
|
||||
.map-pick__dot{width:14px;height:14px;background:var(--danger);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
|
||||
/* 急救提示书 */
|
||||
.rescue-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;flex-shrink:0;}
|
||||
.rescue-card h4{text-align:center;font-size:var(--font-sm);margin-bottom:10px;}
|
||||
.rescue-card p{font-size:var(--font-xs);line-height:1.7;color:var(--text-primary);text-indent:2em;}
|
||||
/* 急救资源 */
|
||||
.resource-title{font-size:var(--font-sm);font-weight:600;margin-bottom:8px;flex-shrink:0;}
|
||||
.resource-list{display:flex;flex-direction:column;gap:6px;}
|
||||
.resource-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;font-size:var(--font-xs);}
|
||||
.btn-nav{height:30px;padding:0 14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
|
||||
.btn-nav:hover{background:#40a9ff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -109,18 +169,17 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -137,10 +196,6 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
@@ -148,16 +203,22 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>演练编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入演练编号" style="min-width:160px;">
|
||||
<label>姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名" style="min-width:140px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>演练状态</label>
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>已完成</option>
|
||||
<option>进行中</option>
|
||||
<option>待开始</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>长庆油田总医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
@@ -166,10 +227,6 @@
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新建演练
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12v2h12v-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -179,112 +236,121 @@
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">模拟演练列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 18 条记录</span>
|
||||
<div class="table-card__title">模拟急救联动列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 56 条记录</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>演练编号</th>
|
||||
<th>演练名称</th>
|
||||
<th>演练类型</th>
|
||||
<th>参与人数</th>
|
||||
<th>计划时间</th>
|
||||
<th>实际开始时间</th>
|
||||
<th>演练状态</th>
|
||||
<th>评分</th>
|
||||
<th>操作</th>
|
||||
<th rowspan="2">序号</th>
|
||||
<th rowspan="2">姓名</th>
|
||||
<th rowspan="2">员工编号</th>
|
||||
<th rowspan="2">性别</th>
|
||||
<th rowspan="2">年龄</th>
|
||||
<th rowspan="2">单位</th>
|
||||
<th rowspan="2">部门</th>
|
||||
<th rowspan="2">应急求助次数</th>
|
||||
<th colspan="3" style="text-align:center;">移动端模拟急救次数</th>
|
||||
<th rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align:center;">心梗</th>
|
||||
<th style="text-align:center;">猝死</th>
|
||||
<th style="text-align:center;">脑出血/脑梗</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">SIM20260418001</td>
|
||||
<td>采油一厂心脏骤停急救演练</td>
|
||||
<td>心脏骤停急救</td>
|
||||
<td>12</td>
|
||||
<td>2026-04-18 09:00</td>
|
||||
<td>2026-04-18 09:05</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>92</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
<td>张伟</td>
|
||||
<td>EMP20210101</td>
|
||||
<td>男</td>
|
||||
<td>42</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业一区</td>
|
||||
<td>2</td>
|
||||
<td style="text-align:center;">3</td>
|
||||
<td style="text-align:center;">1</td>
|
||||
<td style="text-align:center;">2</td>
|
||||
<td><a class="link" href="javascript:void(0)" onclick="openSimModal(this)">模拟急救</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">SIM20260416002</td>
|
||||
<td>化工车间中毒应急演练</td>
|
||||
<td>中毒应急</td>
|
||||
<td>18</td>
|
||||
<td>2026-04-16 14:00</td>
|
||||
<td>2026-04-16 14:10</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>87</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
<td>李娜</td>
|
||||
<td>EMP20200218</td>
|
||||
<td>女</td>
|
||||
<td>35</td>
|
||||
<td>公司机关</td>
|
||||
<td>安全环保部</td>
|
||||
<td>0</td>
|
||||
<td style="text-align:center;">5</td>
|
||||
<td style="text-align:center;">3</td>
|
||||
<td style="text-align:center;">4</td>
|
||||
<td><a class="link" href="javascript:void(0)" onclick="openSimModal(this)">模拟急救</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">SIM20260420003</td>
|
||||
<td>井场工伤大出血急救演练</td>
|
||||
<td>工伤大出血</td>
|
||||
<td>10</td>
|
||||
<td>2026-04-20 10:00</td>
|
||||
<td>2026-04-20 10:02</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>—</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
<td>王强</td>
|
||||
<td>EMP20220315</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
<td>采油二厂</td>
|
||||
<td>生产运行科</td>
|
||||
<td>1</td>
|
||||
<td style="text-align:center;">2</td>
|
||||
<td style="text-align:center;">2</td>
|
||||
<td style="text-align:center;">0</td>
|
||||
<td><a class="link" href="javascript:void(0)" onclick="openSimModal(this)">模拟急救</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">SIM20260422004</td>
|
||||
<td>办公楼突发晕倒急救演练</td>
|
||||
<td>突发晕倒</td>
|
||||
<td>8</td>
|
||||
<td>2026-04-22 09:00</td>
|
||||
<td>—</td>
|
||||
<td><span class="tag tag-orange">待开始</span></td>
|
||||
<td>—</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
<td>赵敏</td>
|
||||
<td>EMP20230412</td>
|
||||
<td>女</td>
|
||||
<td>29</td>
|
||||
<td>采气一厂</td>
|
||||
<td>集气站</td>
|
||||
<td>0</td>
|
||||
<td style="text-align:center;">1</td>
|
||||
<td style="text-align:center;">0</td>
|
||||
<td style="text-align:center;">1</td>
|
||||
<td><a class="link" href="javascript:void(0)" onclick="openSimModal(this)">模拟急救</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">SIM20260425005</td>
|
||||
<td>多人伤亡事故联合救援演练</td>
|
||||
<td>多人伤亡事故</td>
|
||||
<td>35</td>
|
||||
<td>2026-04-25 08:30</td>
|
||||
<td>—</td>
|
||||
<td><span class="tag tag-orange">待开始</span></td>
|
||||
<td>—</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
<td>刘洋</td>
|
||||
<td>EMP20190506</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>长庆油田总医院</td>
|
||||
<td>急诊科</td>
|
||||
<td>5</td>
|
||||
<td style="text-align:center;">8</td>
|
||||
<td style="text-align:center;">6</td>
|
||||
<td style="text-align:center;">7</td>
|
||||
<td><a class="link" href="javascript:void(0)" onclick="openSimModal(this)">模拟急救</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>陈静</td>
|
||||
<td>EMP20240108</td>
|
||||
<td>女</td>
|
||||
<td>31</td>
|
||||
<td>采油一厂</td>
|
||||
<td>HSE监督站</td>
|
||||
<td>1</td>
|
||||
<td style="text-align:center;">0</td>
|
||||
<td style="text-align:center;">1</td>
|
||||
<td style="text-align:center;">0</td>
|
||||
<td><a class="link" href="javascript:void(0)" onclick="openSimModal(this)">模拟急救</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 18 条</span>
|
||||
<span>共 56 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
@@ -293,5 +359,110 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模拟急救弹窗 -->
|
||||
<div class="modal-mask" id="simModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>模拟急救</h3>
|
||||
<button class="modal__close" onclick="closeSimModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<!-- 提示条 -->
|
||||
<div class="sim-tip">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#D48806" stroke-width="1.4"/><path d="M8 5v4M8 11v.5" stroke="#D48806" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
选择突发疾病，在地图上标定员工位置，进行模拟急救，下发急救提示书
|
||||
</div>
|
||||
<!-- 疾病Tab -->
|
||||
<div class="disease-tabs">
|
||||
<div class="disease-tab active" onclick="switchDisease(this)">心梗</div>
|
||||
<div class="disease-tab" onclick="switchDisease(this)">猝死</div>
|
||||
<div class="disease-tab" onclick="switchDisease(this)">脑梗/脑出血</div>
|
||||
</div>
|
||||
<!-- 主布局 -->
|
||||
<div class="sim-layout">
|
||||
<div class="sim-left">
|
||||
<!-- 地图占位 -->
|
||||
<div class="map-placeholder" id="simMap">
|
||||
<div class="map-search"><input type="text" placeholder="请输入位置信息"><button>搜索</button></div>
|
||||
<div class="map-pin"></div>
|
||||
<div class="map-marker" style="top:28%;left:30%;background:#1890FF;">AED</div>
|
||||
<div class="map-marker" style="top:42%;left:18%;background:var(--success);">医院</div>
|
||||
<div class="map-marker" style="top:65%;left:20%;background:var(--danger);">救护车</div>
|
||||
<div class="map-marker" style="top:62%;left:50%;background:#722ED1;">医疗点</div>
|
||||
<div class="map-pick" id="mapPick"><div class="map-pick__label" id="mapPickLabel"></div><div class="map-pick__dot"></div></div>
|
||||
<button class="map-btn">模拟急救</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sim-right">
|
||||
<!-- 员工卡片 -->
|
||||
<div class="emp-card">
|
||||
<div class="emp-avatar"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4a4 4 0 110 8 4 4 0 010-8zM6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="#bbb" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="emp-info" id="empInfo">
|
||||
<div><strong>张伟</strong></div>
|
||||
<div>男<span>42岁</span><span>EMP20210101</span></div>
|
||||
<div>采油一厂<span>作业一区</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 急救提示书 -->
|
||||
<div class="rescue-card" id="rescueCard">
|
||||
<h4>模拟急救提示书</h4>
|
||||
<p>（1）心率失常，有心梗风险；</p>
|
||||
<p>（2）立即停止活动，保持环境安静，防止不良刺激，平躺休息，以降低心肌耗氧量和交感神经兴奋性；</p>
|
||||
<p>（3）如伴有胸痛或不适、上腹部不适、呼吸困难、出汗、头晕或头昏、恶心或呕吐等症状，请立即拨打120；</p>
|
||||
<p>（4）请准备硝酸甘油舌下含服；</p>
|
||||
</div>
|
||||
<!-- 最近急救资源 -->
|
||||
<div>
|
||||
<div class="resource-title">最近急救资源</div>
|
||||
<div class="resource-list">
|
||||
<div class="resource-item">
|
||||
<span>距离350米处有AED，电话18699588852</span>
|
||||
<button class="btn-nav"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M6 1l3 3M6 1L3 4" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 导航</button>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<span>距离580米处有急救包，电话18699588852</span>
|
||||
<button class="btn-nav"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M6 1l3 3M6 1L3 4" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 导航</button>
|
||||
</div>
|
||||
<div class="resource-item"><span>距离8.5公里处有救护车，电话18699588852</span></div>
|
||||
<div class="resource-item"><span>距离8.5公里处有医疗点，电话18699588852</span></div>
|
||||
<div class="resource-item">
|
||||
<span>距离52公里处有XXX医院，电话18699588852</span>
|
||||
<button class="btn-nav"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M6 1l3 3M6 1L3 4" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 导航</button>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<span>距离521公里处有油田应急就医服务中心，电话18699588852</span>
|
||||
<button class="btn-nav"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M6 1l3 3M6 1L3 4" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openSimModal(row){
|
||||
var cells=row.closest('tr').querySelectorAll('td');
|
||||
var name=cells[1].textContent,sex=cells[3].textContent,age=cells[4].textContent,eid=cells[2].textContent,unit=cells[5].textContent,dept=cells[6].textContent;
|
||||
document.getElementById('empInfo').innerHTML='<div><strong>'+name+'</strong></div><div>'+sex+'<span>'+age+'岁</span><span>'+eid+'</span></div><div>'+unit+'<span>'+dept+'</span></div>';
|
||||
document.getElementById('simModal').classList.add('show');
|
||||
}
|
||||
function closeSimModal(){document.getElementById('simModal').classList.remove('show');}
|
||||
function switchDisease(el){el.parentElement.querySelectorAll('.disease-tab').forEach(function(t){t.classList.remove('active');});el.classList.add('active');}
|
||||
/* 地图选点 */
|
||||
var addrList=['陕西省西安市未央区凤城八路','陕西省西安市雁塔区科技路','陕西省西安市长安区韦曲街道','陕西省咸阳市秦都区人民路','陕西省延安市宝塔区','宁夏银川市兴庆区中山北街'];
|
||||
document.getElementById('simMap').addEventListener('click',function(e){
|
||||
if(e.target.closest('.map-search')||e.target.closest('.map-btn')||e.target.closest('.map-marker'))return;
|
||||
var rect=this.getBoundingClientRect();
|
||||
var x=e.clientX-rect.left,y=e.clientY-rect.top;
|
||||
var pick=document.getElementById('mapPick');
|
||||
pick.style.left=x+'px';
|
||||
pick.style.top=y+'px';
|
||||
document.getElementById('mapPickLabel').textContent=addrList[Math.floor(Math.random()*addrList.length)];
|
||||
pick.classList.add('show');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 工单详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
|
||||
/* 内容卡片 */
|
||||
.card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.card__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
|
||||
/* 信息网格 - 3列 */
|
||||
.info-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-bottom:0;}
|
||||
.info-cell{padding:10px 0;font-size:var(--font-sm);display:flex;align-items:baseline;gap:0;}
|
||||
.info-cell--full{grid-column:1/-1;}
|
||||
.info-cell__label{color:var(--text-secondary);white-space:nowrap;min-width:70px;flex-shrink:0;}
|
||||
.info-cell__value{color:var(--text-primary);}
|
||||
.info-cell__value a{color:var(--primary);text-decoration:none;}
|
||||
|
||||
/* 补充说明 */
|
||||
.desc-block{padding:10px 0;font-size:var(--font-sm);}
|
||||
.desc-block__label{color:var(--text-secondary);margin-bottom:6px;}
|
||||
.desc-block__text{color:var(--text-primary);line-height:1.8;}
|
||||
|
||||
/* 照片 */
|
||||
.photo-block{padding:10px 0;font-size:var(--font-sm);display:flex;align-items:flex-start;gap:0;}
|
||||
.photo-block__label{color:var(--text-secondary);white-space:nowrap;min-width:70px;flex-shrink:0;padding-top:4px;}
|
||||
.photo-list{display:flex;gap:12px;flex-wrap:wrap;}
|
||||
.photo-item{width:140px;height:105px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 50%,#91d5ff 100%);overflow:hidden;position:relative;cursor:pointer;border:1px solid #d9d9d9;}
|
||||
.photo-item__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-xs);opacity:.6;}
|
||||
|
||||
/* 状态标签 */
|
||||
.status{font-weight:600;}
|
||||
.status--done{color:var(--success);}
|
||||
.status--doing{color:var(--primary);}
|
||||
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
|
||||
/* 位置链接 */
|
||||
.location-link{color:var(--primary);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
|
||||
.location-link:hover{text-decoration:underline;}
|
||||
.location-link svg{width:14px;height:14px;flex-shrink:0;}
|
||||
|
||||
/* 地图弹窗 */
|
||||
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:680px;box-shadow:0 8px 24px rgba(0,0,0,0.15);overflow:hidden;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:0;}
|
||||
.map-container{width:100%;height:400px;background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 100%);position:relative;overflow:hidden;}
|
||||
.map-grid{position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(0deg,transparent,transparent 39px,#91d5ff 39px,#91d5ff 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#91d5ff 39px,#91d5ff 40px);}
|
||||
.map-road-h{position:absolute;height:3px;background:rgba(24,144,255,0.18);border-radius:2px;}
|
||||
.map-road-v{position:absolute;width:3px;background:rgba(24,144,255,0.18);border-radius:2px;}
|
||||
.map-pin{position:absolute;top:46%;left:52%;transform:translate(-50%,-100%);z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}
|
||||
.map-pin-pulse{position:absolute;top:46%;left:52%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(24,144,255,0.25);z-index:4;animation:pulse 2s infinite;}
|
||||
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.6;}100%{transform:translate(-50%,-50%) scale(3);opacity:0;}}
|
||||
.map-label{position:absolute;top:calc(46% + 6px);left:52%;transform:translateX(-50%);background:#fff;padding:6px 16px;border-radius:16px;font-size:var(--font-sm);box-shadow:0 2px 8px rgba(0,0,0,0.12);z-index:6;white-space:nowrap;color:var(--text-primary);font-weight:500;}
|
||||
.map-label::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;}
|
||||
.map-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.map-footer svg{width:14px;height:14px;color:var(--primary);flex-shrink:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="center-work-order.html">应急工单</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span>工单详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 员工信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">员工信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">姓名：</span><span class="info-cell__value">王旭</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">性别：</span><span class="info-cell__value">男</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">年龄：</span><span class="info-cell__value">53</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">员工编号：</span><span class="info-cell__value">56985</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属单位：</span><span class="info-cell__value">公司机关</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属部门：</span><span class="info-cell__value">健康科</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">手机号：</span><span class="info-cell__value">18566985523</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">身份证号：</span><span class="info-cell__value">430626196500236</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">工单信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">工单编号：</span><span class="info-cell__value">YJ5633256</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">工单类型：</span><span class="info-cell__value">正常派单</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">工单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">求助方式：</span><span class="info-cell__value">应急视频</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">求助时间：</span><span class="info-cell__value">2026-03-21 15:12:21</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">位置信息：</span><span class="info-cell__value"><span class="location-link" onclick="openMap()"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省西安市雁塔区电子一路56号</span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">应急中心：</span><span class="info-cell__value">西安应急中心</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">操作人员：</span><span class="info-cell__value">刘旭</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">专业人员：</span><span class="info-cell__value">刘旭</span></div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">补充说明：</div>
|
||||
<div class="desc-block__text">接到应急求助后立即抵达现场，查看员工突发头晕伴恶心呕吐，现场监测体征异常、症状无缓解，现场初步处置无效。第一时间联系驻场人员陪同医院急诊，完成挂号就诊、头颅CT拍片检查；目前已陪同完成CT检测，报告待医生解读，员工由同事留守陪护，已同步告知家属及部门负责人，现场隐患排查完毕，本次应急阶段性处置完成，后续跟进诊疗结果归档。</div>
|
||||
</div>
|
||||
<div class="photo-block">
|
||||
<span class="photo-block__label">现场照片：</span>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 1</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 2</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 驻场派单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">驻场派单信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">派单时间：</span><span class="info-cell__value">2026-03-21 16:12:21</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">驻场人员：</span><span class="info-cell__value">王希（15899655523）</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">派单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">派单说明：</div>
|
||||
<div class="desc-block__text">给这个员工紧急挂号就诊，需要拍头颅CT</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<div class="desc-block__text">已经挂号并且开了胸部CT检查单，已陪同就诊</div>
|
||||
</div>
|
||||
<div class="photo-block">
|
||||
<span class="photo-block__label">现场照片：</span>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 1</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 2</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图弹窗 -->
|
||||
<div class="modal-mask" id="mapModal" onclick="if(event.target===this)closeMap()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">位置信息</div>
|
||||
<button class="modal__close" onclick="closeMap()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="map-container">
|
||||
<div class="map-grid"></div>
|
||||
<div class="map-road-h" style="top:30%;left:10%;width:80%;"></div>
|
||||
<div class="map-road-h" style="top:60%;left:5%;width:70%;"></div>
|
||||
<div class="map-road-h" style="top:80%;left:20%;width:60%;"></div>
|
||||
<div class="map-road-v" style="left:25%;top:10%;height:75%;"></div>
|
||||
<div class="map-road-v" style="left:52%;top:5%;height:85%;"></div>
|
||||
<div class="map-road-v" style="left:75%;top:15%;height:65%;"></div>
|
||||
<div class="map-pin-pulse"></div>
|
||||
<svg class="map-pin" width="32" height="42" viewBox="0 0 32 42" fill="none"><path d="M16 0C7.16 0 0 7.16 0 16c0 12 16 26 16 26s16-14 16-26C32 7.16 24.84 0 16 0z" fill="#1890FF"/><circle cx="16" cy="16" r="7" fill="#fff"/><circle cx="16" cy="16" r="3" fill="#1890FF"/></svg>
|
||||
<div class="map-label">陕西省西安市雁塔区电子一路56号</div>
|
||||
</div>
|
||||
<div class="map-footer">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
<span>陕西省西安市雁塔区电子一路56号</span>
|
||||
<span style="margin-left:auto;color:var(--text-placeholder);font-size:var(--font-xs);">经度: 108.9426 纬度: 34.2234</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openMap(){document.getElementById('mapModal').classList.add('open');}
|
||||
function closeMap(){document.getElementById('mapModal').classList.remove('open');}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -25,6 +25,10 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item--parent .arrow{width:12px;height:12px;transition:transform .2s;}
|
||||
.sidebar-item--parent.open .arrow{transform:rotate(90deg);}
|
||||
.sidebar-sub .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
@@ -99,18 +103,17 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<div class="sidebar-item sidebar-item--parent" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">
|
||||
<span style="display:flex;align-items:center;gap:10px;">
|
||||
<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;flex-shrink:0;"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-sub" style="display:none">
|
||||
<a href="center-group.html" class="sidebar-item">分组管理</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">通话记录</a>
|
||||
</div>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
@@ -127,16 +130,20 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入工单编号">
|
||||
@@ -157,6 +164,13 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>应急中心：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态</label>
|
||||
@@ -174,6 +188,14 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<option>应急电话</option>
|
||||
<option>拨打120</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>正常派单</option>
|
||||
<option>事后补单</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
@@ -242,7 +264,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>赵驻场</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
@@ -259,7 +281,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>陈驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
@@ -276,7 +298,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>吴驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
@@ -293,7 +315,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>郑驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
@@ -310,7 +332,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>黄驻场</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
@@ -327,7 +349,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>林驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
@@ -344,7 +366,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>张驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
@@ -361,7 +383,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>吴驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -71,6 +71,8 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.desc-box{background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:var(--font-sm);color:#7C5800;line-height:1.7;}
|
||||
.desc-box strong{color:#5C3D00;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -107,6 +109,14 @@
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
|
||||
|
||||
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>异常数据定义：</strong>应急工单异常（>1个月未完成）、云坐席通话记录异常（未查询到员工信息）等情形。
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
@@ -191,12 +201,12 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420002</td>
|
||||
<td><span class="tag tag-red">设备异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419078</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>AED设备离线，编号AED-QY-003</td>
|
||||
<td>2026-04-20 08:42</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420001</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420035</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>工单处理超时，已超过30分钟未响应</td>
|
||||
<td>2026-04-20 09:15</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
@@ -227,14 +237,14 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260418005</td>
|
||||
<td><span class="tag tag-red">设备异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">—</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419003</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419045</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>监控终端设备掉线，编号MON-XA-012</td>
|
||||
<td>2026-04-18 11:05</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td>赵伟</td>
|
||||
<td>应急通话中断，持续时间不足1分钟</td>
|
||||
<td>2026-04-19 16:30</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>王建国</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -263,15 +273,15 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420008</td>
|
||||
<td><span class="tag tag-red">设备异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420041</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419003</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419045</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>应急呼叫终端电量低于10%</td>
|
||||
<td>2026-04-20 07:20</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
<td>应急通话中断，持续时间不足1分钟</td>
|
||||
<td>2026-04-19 16:30</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>王建国</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -195,7 +195,7 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>姓名</th>
|
||||
<th>工号</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>联系电话</th>
|
||||
|
||||
@@ -114,9 +114,10 @@
|
||||
.map-picker{width:100%;height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#e6f7ff;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__bg{position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px);}
|
||||
.map-picker__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;}
|
||||
.map-picker__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;display:none;}
|
||||
.map-picker__label{position:relative;z-index:2;display:flex;align-items:center;gap:6px;}
|
||||
.map-picker--selected .map-picker__label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.9);padding:4px 12px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);}
|
||||
.map-picker__coord{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.92);padding:4px 14px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);z-index:3;display:none;white-space:nowrap;color:var(--text-primary);}
|
||||
.divider{height:1px;background:var(--border);margin:4px 0 20px;}
|
||||
</style>
|
||||
</head>
|
||||
@@ -246,10 +247,11 @@
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>布点地址</div>
|
||||
<div class="form-control">
|
||||
<div class="map-picker map-picker--selected">
|
||||
<div class="map-picker" id="mapPicker" onclick="pickLocation(event)">
|
||||
<div class="map-picker__bg"></div>
|
||||
<svg class="map-picker__pin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg>
|
||||
<span class="map-picker__label"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" stroke-width="1"/></svg>在地图上点击选择具体坐标位置</span>
|
||||
<svg class="map-picker__pin" id="mapPin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg>
|
||||
<span class="map-picker__label" id="mapLabel"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" stroke-width="1"/></svg>在地图上点击选择坐标位置</span>
|
||||
<div class="map-picker__coord" id="mapCoord"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -274,6 +276,22 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function pickLocation(e){
|
||||
var picker=document.getElementById('mapPicker');
|
||||
var rect=picker.getBoundingClientRect();
|
||||
var x=e.clientX-rect.left;
|
||||
var y=e.clientY-rect.top;
|
||||
var pin=document.getElementById('mapPin');
|
||||
pin.style.display='block';
|
||||
pin.style.left=x+'px';
|
||||
pin.style.top=y+'px';
|
||||
document.getElementById('mapLabel').style.display='none';
|
||||
var addresses=['陕西省西安市未央区长庆油田总部办公楼','陕西省庆阳市西峰区采油一厂调度中心','陕西省延安市宝塔区采油二厂值班室','甘肃省庆阳市华池县采油三厂井站A区','陕西省西安市未央区长庆油田职工食堂'];
|
||||
var idx=Math.floor(Math.random()*addresses.length);
|
||||
var coord=document.getElementById('mapCoord');
|
||||
coord.innerHTML='<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="vertical-align:-1px;margin-right:4px;"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="#1890FF" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="#1890FF" stroke-width="1"/></svg>'+addresses[idx];
|
||||
coord.style.display='block';
|
||||
}
|
||||
function showDropdown(){document.getElementById('deviceDropdown').style.display='block';}
|
||||
function filterDevices(val){
|
||||
var items=document.getElementById('deviceDropdown').querySelectorAll('.search-select__item');
|
||||
|
||||
@@ -102,8 +102,8 @@
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>所属单位：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>
|
||||
<div class="filter-item"><label>单位部门：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<!-- <div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>-->
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED设备信息 - 新增培演记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;min-width:320px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-width:320px;width:480px;height:120px;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.search-select{position:relative;min-width:320px;}
|
||||
.search-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M10 10l3 3M6.5 2a4.5 4.5 0 110 9 4.5 4.5 0 010-9z' stroke='%23999' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:10;max-height:220px;overflow-y:auto;display:none;}
|
||||
.search-select__item{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;}
|
||||
.search-select__item:hover{background:var(--primary-light);}
|
||||
.search-select__item-name{font-weight:500;color:var(--text-primary);}
|
||||
.search-select__item-info{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.device-card{background:var(--primary-light);border:1px solid #91d5ff;border-radius:var(--radius-md);padding:16px;margin-top:12px;display:none;}
|
||||
.device-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;}
|
||||
.device-card__item{font-size:var(--font-sm);}
|
||||
.device-card__label{color:var(--text-placeholder);font-size:var(--font-xs);margin-bottom:2px;}
|
||||
.device-card__value{color:var(--text-primary);}
|
||||
.upload-area{border:1px dashed var(--border);border-radius:var(--radius-sm);padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s;color:var(--text-placeholder);font-size:var(--font-sm);min-width:320px;width:480px;}
|
||||
.upload-area:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-area svg{width:28px;height:28px;}
|
||||
.upload-hint{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item active">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-aed-training.html">培演记录</a>
|
||||
<span>/</span>
|
||||
<span>新增培演记录</span>
|
||||
</div>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">设备信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>选择设备</div>
|
||||
<div>
|
||||
<div class="search-select" id="deviceSearch">
|
||||
<input class="search-select__input" type="text" placeholder="输入设备编号搜索" onfocus="document.getElementById('deviceDropdown').style.display='block'" oninput="filterDevice(this.value)">
|
||||
<div class="search-select__dropdown" id="deviceDropdown">
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-001','迈瑞','BeneHeart C1A','长庆油田总部','安全环保部','总部办公楼1层大厅')"><span class="search-select__item-name">AED-2025-001</span><span class="search-select__item-info">迈瑞 · 总部办公楼1层大厅</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-002','飞利浦','HeartStart FRx','长庆油田总部','综合管理部','职工食堂入口处')"><span class="search-select__item-name">AED-2025-002</span><span class="search-select__item-info">飞利浦 · 职工食堂入口处</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-003','迈瑞','BeneHeart C2','第一采油厂','生产运行部','调度中心1层')"><span class="search-select__item-name">AED-2025-003</span><span class="search-select__item-info">迈瑞 · 调度中心1层</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-004','卓尔','AED Plus','第二采油厂','安全环保部','值班室门口')"><span class="search-select__item-name">AED-2025-004</span><span class="search-select__item-info">卓尔 · 值班室门口</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-005','飞利浦','HeartStart HS1','第三采油厂','综合管理部','体育馆入口')"><span class="search-select__item-name">AED-2025-005</span><span class="search-select__item-info">飞利浦 · 体育馆入口</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-card" id="deviceCard">
|
||||
<div class="device-card__grid">
|
||||
<div class="device-card__item"><div class="device-card__label">设备编号</div><div class="device-card__value" id="devNo">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备厂家</div><div class="device-card__value" id="devBrand">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备型号</div><div class="device-card__value" id="devModel">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属单位</div><div class="device-card__value" id="devUnit">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属部门</div><div class="device-card__value" id="devDept">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">布放地址</div><div class="device-card__value" id="devAddr">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 培演信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">培演信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>活动标题</div>
|
||||
<input class="form-input" type="text" placeholder="请输入活动标题" style="min-width:480px;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>活动日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>负责人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入负责人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>参加人数</div>
|
||||
<input class="form-input" type="number" placeholder="请输入参加人数" min="1">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>活动效果</div>
|
||||
<select class="form-select"><option value="">请选择活动效果</option><option>优</option><option>良</option><option>中</option><option>差</option></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 附件信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">附件信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">签到表</div>
|
||||
<div class="upload-area">
|
||||
<svg viewBox="0 0 32 32" fill="none"><path d="M16 6v14M10 14l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 22v2a2 2 0 002 2h16a2 2 0 002-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
点击或拖拽上传签到表图片
|
||||
<span class="upload-hint">支持 JPG / PNG，不超过 5MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">现场照片</div>
|
||||
<div class="upload-area">
|
||||
<svg viewBox="0 0 32 32" fill="none"><path d="M16 6v14M10 14l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 22v2a2 2 0 002 2h16a2 2 0 002-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
点击或拖拽上传现场照片
|
||||
<span class="upload-hint">支持 JPG / PNG，可上传多张，单张不超过 5MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">现场视频</div>
|
||||
<div class="upload-area">
|
||||
<svg viewBox="0 0 32 32" fill="none"><path d="M16 6v14M10 14l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 22v2a2 2 0 002 2h16a2 2 0 002-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
点击或拖拽上传现场视频
|
||||
<span class="upload-hint">支持 MP4 / AVI，不超过 200MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">活动资料</div>
|
||||
<div class="upload-area">
|
||||
<svg viewBox="0 0 32 32" fill="none"><path d="M16 6v14M10 14l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 22v2a2 2 0 002 2h16a2 2 0 002-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
点击或拖拽上传活动资料
|
||||
<span class="upload-hint">支持 PDF / Word / PPT，不超过 20MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='resource-aed-training.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-aed-training.html';">取 消</button>
|
||||
</div>
|
||||
<script>
|
||||
function filterDevice(val){
|
||||
var dd=document.getElementById('deviceDropdown');
|
||||
dd.style.display='block';
|
||||
dd.querySelectorAll('.search-select__item').forEach(function(item){
|
||||
var match=!val||item.textContent.toLowerCase().indexOf(val.toLowerCase())>-1;
|
||||
item.style.display=match?'flex':'none';
|
||||
});
|
||||
}
|
||||
function selectDevice(no,brand,model,unit,dept,addr){
|
||||
document.querySelector('.search-select__input').value=no;
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
var card=document.getElementById('deviceCard');
|
||||
card.style.display='block';
|
||||
document.getElementById('devNo').textContent=no;
|
||||
document.getElementById('devBrand').textContent=brand;
|
||||
document.getElementById('devModel').textContent=model;
|
||||
document.getElementById('devUnit').textContent=unit;
|
||||
document.getElementById('devDept').textContent=dept;
|
||||
document.getElementById('devAddr').textContent=addr;
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!document.getElementById('deviceSearch').contains(e.target))
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
});
|
||||
</script></body>
|
||||
</html>
|
||||
@@ -108,14 +108,14 @@
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>所属单位：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>
|
||||
<div class="filter-item"><label>单位部门：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<!-- <div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>-->
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增培演记录</button>
|
||||
<a href="resource-aed-training-add.html"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增培演记录</button></a>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED设备信息 - 新增应用记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;min-width:320px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-width:320px;width:480px;height:120px;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.search-select{position:relative;min-width:320px;}
|
||||
.search-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M10 10l3 3M6.5 2a4.5 4.5 0 110 9 4.5 4.5 0 010-9z' stroke='%23999' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:10;max-height:220px;overflow-y:auto;display:none;}
|
||||
.search-select__item{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;}
|
||||
.search-select__item:hover{background:var(--primary-light);}
|
||||
.search-select__item-name{font-weight:500;color:var(--text-primary);}
|
||||
.search-select__item-info{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.device-card{background:var(--primary-light);border:1px solid #91d5ff;border-radius:var(--radius-md);padding:16px;margin-top:12px;display:none;}
|
||||
.device-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;}
|
||||
.device-card__item{font-size:var(--font-sm);}
|
||||
.device-card__label{color:var(--text-placeholder);font-size:var(--font-xs);margin-bottom:2px;}
|
||||
.device-card__value{color:var(--text-primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item active">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-aed-usage.html">应用记录</a>
|
||||
<span>/</span>
|
||||
<span>新增应用记录</span>
|
||||
</div>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">设备信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>选择设备</div>
|
||||
<div>
|
||||
<div class="search-select" id="deviceSearch">
|
||||
<input class="search-select__input" type="text" placeholder="输入设备编号搜索" onfocus="document.getElementById('deviceDropdown').style.display='block'" oninput="filterDevice(this.value)">
|
||||
<div class="search-select__dropdown" id="deviceDropdown">
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-001','迈瑞','BeneHeart C1A','长庆油田总部','安全环保部','总部办公楼1层大厅')"><span class="search-select__item-name">AED-2025-001</span><span class="search-select__item-info">迈瑞 · 总部办公楼1层大厅</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-002','飞利浦','HeartStart FRx','长庆油田总部','综合管理部','职工食堂入口处')"><span class="search-select__item-name">AED-2025-002</span><span class="search-select__item-info">飞利浦 · 职工食堂入口处</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-003','迈瑞','BeneHeart C2','第一采油厂','生产运行部','调度中心1层')"><span class="search-select__item-name">AED-2025-003</span><span class="search-select__item-info">迈瑞 · 调度中心1层</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-004','卓尔','AED Plus','第二采油厂','安全环保部','值班室门口')"><span class="search-select__item-name">AED-2025-004</span><span class="search-select__item-info">卓尔 · 值班室门口</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-005','飞利浦','HeartStart HS1','第三采油厂','综合管理部','体育馆入口')"><span class="search-select__item-name">AED-2025-005</span><span class="search-select__item-info">飞利浦 · 体育馆入口</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-card" id="deviceCard">
|
||||
<div class="device-card__grid">
|
||||
<div class="device-card__item"><div class="device-card__label">设备编号</div><div class="device-card__value" id="devNo">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备厂家</div><div class="device-card__value" id="devBrand">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备型号</div><div class="device-card__value" id="devModel">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属单位</div><div class="device-card__value" id="devUnit">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属部门</div><div class="device-card__value" id="devDept">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">布放地址</div><div class="device-card__value" id="devAddr">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">应用信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>使用日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>被救治人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入被救治人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>症状(呼吸)</div>
|
||||
<select class="form-select"><option value="">请选择</option><option>有呼吸</option><option>无呼吸</option></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>症状(意识)</div>
|
||||
<select class="form-select"><option value="">请选择</option><option>有意识</option><option>无意识</option></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>使用人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入使用人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>使用过程说明</div>
|
||||
<textarea class="form-textarea" placeholder="请详细描述AED使用过程，如：发现患者情况、取用AED时间、电击次数、配合CPR情况等"></textarea>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>应用结果</div>
|
||||
<select class="form-select"><option value="">请选择应用结果</option><option>救治成功</option><option>救治失败</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='resource-aed-usage.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-aed-usage.html';">取 消</button>
|
||||
</div>
|
||||
<script>
|
||||
function filterDevice(val){
|
||||
var dd=document.getElementById('deviceDropdown');
|
||||
dd.style.display='block';
|
||||
dd.querySelectorAll('.search-select__item').forEach(function(item){
|
||||
var match=!val||item.textContent.toLowerCase().indexOf(val.toLowerCase())>-1;
|
||||
item.style.display=match?'flex':'none';
|
||||
});
|
||||
}
|
||||
function selectDevice(no,brand,model,unit,dept,addr){
|
||||
document.querySelector('.search-select__input').value=no;
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
var card=document.getElementById('deviceCard');
|
||||
card.style.display='block';
|
||||
document.getElementById('devNo').textContent=no;
|
||||
document.getElementById('devBrand').textContent=brand;
|
||||
document.getElementById('devModel').textContent=model;
|
||||
document.getElementById('devUnit').textContent=unit;
|
||||
document.getElementById('devDept').textContent=dept;
|
||||
document.getElementById('devAddr').textContent=addr;
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!document.getElementById('deviceSearch').contains(e.target))
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
});
|
||||
</script></body>
|
||||
</html>
|
||||
@@ -105,14 +105,14 @@
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>所属单位：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>
|
||||
<div class="filter-item"><label>单位部门：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<!-- <div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>-->
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增应用记录</button>
|
||||
<a href="resource-aed-usage-add.html"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增应用记录</button></a>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>救护车详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
.detail{padding:0;}
|
||||
.detail__cover-placeholder{width:100%;height:200px;background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 100%);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;gap:8px;}
|
||||
.detail__cover-placeholder svg{width:48px;height:48px;opacity:.5;}
|
||||
|
||||
.detail__body{padding:24px;}
|
||||
.detail__name{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin-bottom:4px;}
|
||||
.detail__type{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);font-weight:600;margin-left:8px;vertical-align:middle;background:#F6FFED;color:var(--success);border:1px solid #b7eb8f;}
|
||||
|
||||
.detail__section{margin-top:24px;}
|
||||
.detail__section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
|
||||
.detail__section-title svg{width:16px;height:16px;color:var(--primary);}
|
||||
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.info-item{padding:12px 0;border-bottom:1px solid #f5f5f5;}
|
||||
.info-item--full{grid-column:1/-1;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
.info-item__value a{color:var(--primary);text-decoration:none;}
|
||||
.info-item__value a:hover{text-decoration:underline;}
|
||||
|
||||
.tag-list{display:flex;flex-wrap:wrap;gap:6px;}
|
||||
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);border:1px solid #91d5ff;}
|
||||
.tag--green{background:#F6FFED;color:var(--success);border:1px solid #b7eb8f;}
|
||||
|
||||
.driver-card{background:var(--background);border-radius:var(--radius-md);padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
|
||||
.driver-card .info-item{padding:0;border-bottom:none;}
|
||||
|
||||
.detail__intro{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.8;white-space:pre-wrap;}
|
||||
.cert-img{width:100%;height:100px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#f0f5ff 0%,#d6e4ff 100%);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-xs);gap:4px;cursor:pointer;border:1px solid #d6e4ff;transition:all .2s;margin-top:4px;}
|
||||
.cert-img:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(24,144,255,0.15);}
|
||||
.cert-img svg{width:24px;height:24px;opacity:.6;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="detail">
|
||||
<!-- 救护车图片 -->
|
||||
<div class="detail__cover-placeholder">
|
||||
<svg viewBox="0 0 64 64" fill="none"><rect x="4" y="18" width="38" height="26" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M42 28h12l6 10v6H42" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="16" cy="47" r="5" stroke="currentColor" stroke-width="2.5"/><circle cx="50" cy="47" r="5" stroke="currentColor" stroke-width="2.5"/><path d="M21 47h24" stroke="currentColor" stroke-width="2"/><path d="M18 28v8M14 32h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
救护车实景图
|
||||
</div>
|
||||
|
||||
<div class="detail__body">
|
||||
<!-- 名称 + 类型 -->
|
||||
<div>
|
||||
<span class="detail__name">宁ALY120</span>
|
||||
<span class="detail__type">转运型</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8.5h6M5 11h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">车型</div>
|
||||
<div class="info-item__value">急救转运</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">所属单位</div>
|
||||
<div class="info-item__value">第二采油厂</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">所属医疗点</div>
|
||||
<div class="info-item__value">第二采油厂南梁健康管理服务中心</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">所属机构</div>
|
||||
<div class="info-item__value">宝石花医院</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">开始服务年份</div>
|
||||
<div class="info-item__value">2019年</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">年支付费用</div>
|
||||
<div class="info-item__value" style="color:#fa541c;font-weight:600;">¥ 128,000.00</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">是否安装GPS</div>
|
||||
<div class="info-item__value">否</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">是否关联公司车辆管理系统</div>
|
||||
<div class="info-item__value">是</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 覆盖区域 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
服务范围
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item info-item--full">
|
||||
<div class="info-item__label">覆盖区域</div>
|
||||
<div class="tag-list" style="margin-top:4px;">
|
||||
<span class="tag tag--green">南梁作业区</span>
|
||||
<span class="tag tag--green">华池作业区</span>
|
||||
<span class="tag tag--green">合水作业区</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">覆盖人数</div>
|
||||
<div class="info-item__value">522 人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 能力配置 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1l2 4h4l-3 3 1 4-4-2-4 2 1-4-3-3h4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
能力配置
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item info-item--full">
|
||||
<div class="info-item__label">所配急救设备</div>
|
||||
<div class="tag-list" style="margin-top:4px;">
|
||||
<span class="tag">车载AED</span>
|
||||
<span class="tag">心电监护仪</span>
|
||||
<span class="tag">呼吸机</span>
|
||||
<span class="tag">吸引器</span>
|
||||
<span class="tag">急救药品箱</span>
|
||||
<span class="tag">担架</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item info-item--full">
|
||||
<div class="info-item__label">救护能力</div>
|
||||
<div class="detail__intro">具备院前急救、伤员转运、现场心肺复苏及基础生命支持能力，可执行60公里半径内的紧急转运任务</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 驾驶员信息 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
驾驶员信息
|
||||
</div>
|
||||
<div class="driver-card">
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">姓名</div>
|
||||
<div class="info-item__value">郭青</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">联系电话</div>
|
||||
<div class="info-item__value"><a href="tel:13402990768">13402990768</a></div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">驾驶证</div>
|
||||
<!-- <div class="info-item__value">B2 · 有效期至 2028-06</div>-->
|
||||
<div class="cert-img">
|
||||
<svg viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="11" r="2.5" stroke="currentColor" stroke-width="1.2"/><path d="M14 9h5M14 12h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M5 16c0-1.7 1.8-3 4-3s4 1.3 4 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
点击查看驾驶证照片
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">资格证</div>
|
||||
<!-- <div class="info-item__value">急救驾驶员资格证 · 有效期至 2027-12</div>-->
|
||||
<div class="cert-img">
|
||||
<svg viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="11" r="2.5" stroke="currentColor" stroke-width="1.2"/><path d="M14 9h5M14 12h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M5 16c0-1.7 1.8-3 4-3s4 1.3 4 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
点击查看资格证照片
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -88,6 +88,16 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.drawer-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;opacity:0;visibility:hidden;transition:all .3s;}
|
||||
.drawer-mask.open{opacity:1;visibility:visible;}
|
||||
.drawer{position:fixed;top:0;right:-560px;bottom:0;width:560px;background:#fff;z-index:201;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:20px;}
|
||||
.drawer__close:hover{background:var(--background);color:var(--text-primary);}
|
||||
.drawer__body{flex:1;overflow:hidden;}
|
||||
.drawer__body iframe{width:100%;height:100%;border:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -248,7 +258,7 @@
|
||||
<td>第二采油厂</td>
|
||||
<td>522</td>
|
||||
<td>否</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
<td><span class="link" onclick="openDrawer()">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
@@ -262,7 +272,7 @@
|
||||
<td>第一采油厂</td>
|
||||
<td>480</td>
|
||||
<td>是</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
<td><span class="link" onclick="openDrawer()">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
@@ -276,7 +286,7 @@
|
||||
<td>长庆油田总部</td>
|
||||
<td>615</td>
|
||||
<td>是</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
<td><span class="link" onclick="openDrawer()">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
@@ -290,7 +300,7 @@
|
||||
<td>第三采油厂</td>
|
||||
<td>398</td>
|
||||
<td>否</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
<td><span class="link" onclick="openDrawer()">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
@@ -304,7 +314,7 @@
|
||||
<td>第二采油厂</td>
|
||||
<td>522</td>
|
||||
<td>是</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
<td><span class="link" onclick="openDrawer()">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -325,5 +335,29 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">救护车详情</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">×</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<iframe id="detailFrame" src="about:blank"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openDrawer(){
|
||||
document.getElementById('detailFrame').src='resource-ambulance-detail.html';
|
||||
document.getElementById('drawerMask').classList.add('open');
|
||||
document.getElementById('drawer').classList.add('open');
|
||||
document.body.style.overflow='hidden';
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawerMask').classList.remove('open');
|
||||
document.getElementById('drawer').classList.remove('open');
|
||||
document.body.style.overflow='';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 急救医生信息 - 新增急救医生 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;min-width:320px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-width:320px;width:480px;height:100px;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
|
||||
/* 头像上传 */
|
||||
.avatar-upload{width:96px;height:96px;border:1px dashed var(--border);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--text-placeholder);font-size:var(--font-xs);gap:4px;background:#FAFAFA;}
|
||||
.avatar-upload:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.avatar-upload svg{width:24px;height:24px;}
|
||||
|
||||
/* 单选组 */
|
||||
.radio-group{display:flex;align-items:center;gap:20px;height:36px;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);cursor:pointer;color:var(--text-primary);}
|
||||
.radio-group input[type="radio"]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item active"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-doctor.html">急救医生信息</a>
|
||||
<span>/</span>
|
||||
<span>新增急救医生</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>照片</div>
|
||||
<div class="avatar-upload">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
上传照片
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>姓名</div>
|
||||
<input class="form-input" type="text" placeholder="请输入医生姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>身份证号</div>
|
||||
<input class="form-input" type="text" placeholder="请输入身份证号码" maxlength="18">
|
||||
</div>
|
||||
<!-- <div class="form-row">-->
|
||||
<!-- <div class="form-label"><span class="required">*</span>性别</div>-->
|
||||
<!-- <div class="radio-group">-->
|
||||
<!-- <label><input type="radio" name="gender" checked> 男</label>-->
|
||||
<!-- <label><input type="radio" name="gender"> 女</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="form-row">-->
|
||||
<!-- <div class="form-label"><span class="required">*</span>年龄</div>-->
|
||||
<!-- <input class="form-input" type="number" placeholder="请输入年龄" min="18" max="80" style="min-width:160px;">-->
|
||||
<!-- </div>-->
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>联系电话</div>
|
||||
<input class="form-input" type="tel" placeholder="请输入联系电话">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 职业信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">职业信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>所在医院</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择所在医院</option>
|
||||
<option>长庆油田职工医院</option>
|
||||
<option>西安市第一医院</option>
|
||||
<option>庆阳市人民医院</option>
|
||||
<option>定边县医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>科室</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择科室</option>
|
||||
<option>急诊科</option>
|
||||
<option>心内科</option>
|
||||
<option>骨科</option>
|
||||
<option>外科</option>
|
||||
<option>内科</option>
|
||||
<option>神经外科</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>职称</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择职称</option>
|
||||
<option>主任医师</option>
|
||||
<option>副主任医师</option>
|
||||
<option>主治医师</option>
|
||||
<option>住院医师</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>急救专长</div>
|
||||
<textarea class="form-textarea" placeholder="请输入急救专长，如：心肺复苏、创伤急救、中毒处理等"></textarea>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>是否签约入库</div>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="contract" checked> 是</label>
|
||||
<label><input type="radio" name="contract"> 否</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='resource-doctor.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-doctor.html';">取 消</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -94,6 +94,9 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* 头像缩略图 */
|
||||
.avatar-thumb{width:36px;height:36px;border-radius:50%;background:#E6F7FF;display:inline-flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-xs);border:1px solid #91d5ff;vertical-align:middle;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -174,7 +177,7 @@
|
||||
<input class="filter-input" type="text" placeholder="请输入医生姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属医院：</label>
|
||||
<label>所在医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部医院</option>
|
||||
<option>长庆油田职工医院</option>
|
||||
@@ -194,12 +197,11 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>职称：</label>
|
||||
<select class="filter-select">
|
||||
<label>是否签约入库：</label>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>全部</option>
|
||||
<option>主任医师</option>
|
||||
<option>副主任医师</option>
|
||||
<option>主治医师</option>
|
||||
<option>是</option>
|
||||
<option>否</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -208,10 +210,10 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<a href="resource-doctor-add.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增急救医生
|
||||
</button>
|
||||
</a>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -230,13 +232,15 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>姓名</th>
|
||||
<th>所属医院</th>
|
||||
<th>科室</th>
|
||||
<th>图片</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
<th>职称</th>
|
||||
<th>科室</th>
|
||||
<th>所在医院</th>
|
||||
<th>急救专长</th>
|
||||
<th>联系电话</th>
|
||||
<th>专长</th>
|
||||
<th>认证状态</th>
|
||||
<th>状态</th>
|
||||
<th>是否签约入库</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -244,62 +248,72 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">张建国</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>急诊科</td>
|
||||
<td><div class="avatar-thumb">张</div></td>
|
||||
<td>男</td>
|
||||
<td>48</td>
|
||||
<td>主任医师</td>
|
||||
<td>138****5612</td>
|
||||
<td>急诊科</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>心肺复苏、创伤急救</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>138****5612</td>
|
||||
<td><span class="tag tag-green">是</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">李明华</td>
|
||||
<td>西安市第一医院</td>
|
||||
<td>心内科</td>
|
||||
<td><div class="avatar-thumb">李</div></td>
|
||||
<td>男</td>
|
||||
<td>42</td>
|
||||
<td>副主任医师</td>
|
||||
<td>139****3287</td>
|
||||
<td>心内科</td>
|
||||
<td>西安市第一医院</td>
|
||||
<td>心血管急症、胸痛处理</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>139****3287</td>
|
||||
<td><span class="tag tag-green">是</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">王秀英</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>急诊科</td>
|
||||
<td><div class="avatar-thumb">王</div></td>
|
||||
<td>女</td>
|
||||
<td>38</td>
|
||||
<td>主治医师</td>
|
||||
<td>137****9451</td>
|
||||
<td>急诊科</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>中毒急救、烧伤处理</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>137****9451</td>
|
||||
<td><span class="tag tag-green">是</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">赵志远</td>
|
||||
<td>定边县医院</td>
|
||||
<td>骨科</td>
|
||||
<td><div class="avatar-thumb">赵</div></td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>副主任医师</td>
|
||||
<td>136****8723</td>
|
||||
<td>骨科</td>
|
||||
<td>定边县医院</td>
|
||||
<td>骨折固定、脊柱损伤</td>
|
||||
<td><span class="tag tag-gray">未认证</span></td>
|
||||
<td><button class="switch" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>136****8723</td>
|
||||
<td><span class="tag tag-gray">否</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">刘海燕</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>外科</td>
|
||||
<td><div class="avatar-thumb">刘</div></td>
|
||||
<td>女</td>
|
||||
<td>35</td>
|
||||
<td>主治医师</td>
|
||||
<td>135****2164</td>
|
||||
<td>外科</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>外伤缝合、止血处理</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>135****2164</td>
|
||||
<td><span class="tag tag-green">是</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -72,6 +72,48 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:620px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__header h3{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;overflow-y:auto;flex:1;}
|
||||
.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__section{margin-bottom:20px;}
|
||||
.modal__section-title{font-size:var(--font-sm);font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
|
||||
.modal__section-title svg{width:16px;height:16px;color:var(--primary);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
|
||||
.form-label{width:100px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-control{flex:1;min-width:0;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-input-sm{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;width:100%;}
|
||||
.form-input-sm:focus{border-color:var(--primary);}
|
||||
.form-select-sm{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 10px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;}
|
||||
/* 搜索下拉 */
|
||||
.search-select{position:relative;}
|
||||
.search-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M10 10l3 3M6.5 2a4.5 4.5 0 110 9 4.5 4.5 0 010-9z' stroke='%23999' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:10;max-height:180px;overflow-y:auto;display:none;}
|
||||
.search-select__item{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;}
|
||||
.search-select__item:hover{background:var(--primary-light);}
|
||||
.search-select__item-name{font-weight:500;color:var(--text-primary);}
|
||||
.search-select__item-info{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.selected-card{background:var(--primary-light);border:1px solid #91d5ff;border-radius:var(--radius-sm);padding:10px 14px;margin-top:8px;display:none;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 亲友列表 */
|
||||
.kin-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
|
||||
.kin-row .form-input-sm{flex:1;}
|
||||
.kin-row .form-select-sm{width:90px;flex-shrink:0;}
|
||||
.btn-sm{height:30px;padding:0 10px;font-size:var(--font-xs);}
|
||||
.btn-icon-danger{width:30px;height:30px;border:1px solid var(--danger);border-radius:var(--radius-sm);background:#fff;color:var(--danger);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
|
||||
.btn-icon-danger:hover{background:#fff1f0;}
|
||||
.emp-info{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;background:#FAFAFA;padding:10px 14px;border-radius:var(--radius-sm);display:flex;gap:24px;}
|
||||
.emp-info span{color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -148,26 +190,27 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<label>姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<label>单位部门</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气厂</option>
|
||||
<option>油田总医院</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">+ 新增紧急联系人</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -185,102 +228,77 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>联系人姓名</th>
|
||||
<th>与员工关系</th>
|
||||
<th>联系电话</th>
|
||||
<th>备用电话</th>
|
||||
<th>状态</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
<th>单位</th>
|
||||
<th>部门</th>
|
||||
<th>单位紧急联系人</th>
|
||||
<th>亲友紧急联系人</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>王建军</td>
|
||||
<td style="font-weight:500;">王建军</td>
|
||||
<td>EMP-20210034</td>
|
||||
<td>采油一厂</td>
|
||||
<td>王秀兰</td>
|
||||
<td>配偶</td>
|
||||
<td>138****2356</td>
|
||||
<td>029-8651****</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>李主任 13892459012</td>
|
||||
<td>王秀兰（配偶）13856782356</td>
|
||||
<td><div class="action-btns"><a class="link" onclick="openEdit('王建军','EMP-20210034','第一采油厂','生产运行部','李主任','13892459012','王秀兰','配偶','13856782356')">编辑</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李明华</td>
|
||||
<td style="font-weight:500;">李明华</td>
|
||||
<td>EMP-20190087</td>
|
||||
<td>采油二厂</td>
|
||||
<td>李国强</td>
|
||||
<td>父亲</td>
|
||||
<td>139****7890</td>
|
||||
<td>—</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>男</td>
|
||||
<td>42</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>张科长 13967235567</td>
|
||||
<td>李国强（父亲）13912457890</td>
|
||||
<td><div class="action-btns"><a class="link" onclick="openEdit('李明华','EMP-20190087','第二采油厂','安全环保部','张科长','13967235567','李国强','父亲','13912457890')">编辑</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>张丽萍</td>
|
||||
<td style="font-weight:500;">张丽萍</td>
|
||||
<td>EMP-20200156</td>
|
||||
<td>采气厂</td>
|
||||
<td>赵文涛</td>
|
||||
<td>配偶</td>
|
||||
<td>136****4512</td>
|
||||
<td>136****9988</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>女</td>
|
||||
<td>35</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>刘主任 13745893345</td>
|
||||
<td>赵文涛（配偶）13623674512</td>
|
||||
<td><div class="action-btns"><a class="link" onclick="openEdit('张丽萍','EMP-20200156','第三采油厂','综合管理部','刘主任','13745893345','赵文涛','配偶','13623674512')">编辑</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>陈伟东</td>
|
||||
<td style="font-weight:500;">陈伟东</td>
|
||||
<td>EMP-20180045</td>
|
||||
<td>油田总医院</td>
|
||||
<td>陈小梅</td>
|
||||
<td>女儿</td>
|
||||
<td>158****3321</td>
|
||||
<td>—</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>信息技术部</td>
|
||||
<td>赵部长 13589128821</td>
|
||||
<td>陈小梅（女儿）15834563321</td>
|
||||
<td><div class="action-btns"><a class="link" onclick="openEdit('陈伟东','EMP-20180045','长庆油田总部','信息技术部','赵部长','13589128821','陈小梅','女儿','15834563321')">编辑</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>刘志强</td>
|
||||
<td style="font-weight:500;">刘志强</td>
|
||||
<td>EMP-20220012</td>
|
||||
<td>采油一厂</td>
|
||||
<td>刘桂芳</td>
|
||||
<td>母亲</td>
|
||||
<td>137****6678</td>
|
||||
<td>029-8659****</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>男</td>
|
||||
<td>29</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>李主任 13892459012</td>
|
||||
<td>刘桂芳（母亲）13756786678</td>
|
||||
<td><div class="action-btns"><a class="link" onclick="openEdit('刘志强','EMP-20220012','第一采油厂','生产运行部','李主任','13892459012','刘桂芳','母亲','13756786678')">编辑</a></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -299,5 +317,123 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑紧急联系人弹窗 -->
|
||||
<div class="modal-mask" id="editModal" onclick="if(event.target===this)closeEdit()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>编辑紧急联系人</h3>
|
||||
<button class="modal__close" onclick="closeEdit()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<!-- 员工信息 -->
|
||||
<div class="emp-info">
|
||||
<div>姓名：<span id="empName">—</span></div>
|
||||
<div>编号：<span id="empNo">—</span></div>
|
||||
<div>单位：<span id="empUnit">—</span></div>
|
||||
<div>部门：<span id="empDept">—</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 单位紧急联系人 -->
|
||||
<div class="modal__section">
|
||||
<div class="modal__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="6" y="9" width="4" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
单位紧急联系人
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>选择人员</div>
|
||||
<div class="form-control">
|
||||
<div class="search-select" id="unitSearch">
|
||||
<input class="search-select__input" id="unitInput" type="text" placeholder="输入姓名或编号搜索本单位人员" onfocus="showUnitDD()" oninput="filterUnit(this.value)">
|
||||
<div class="search-select__dropdown" id="unitDropdown">
|
||||
<div class="search-select__item" onclick="selectUnit('李主任','EMP-20150012','13892459012')"><span class="search-select__item-name">李主任</span><span class="search-select__item-info">EMP-20150012 · 生产运行部</span></div>
|
||||
<div class="search-select__item" onclick="selectUnit('张科长','EMP-20160034','13967235567')"><span class="search-select__item-name">张科长</span><span class="search-select__item-info">EMP-20160034 · 安全环保部</span></div>
|
||||
<div class="search-select__item" onclick="selectUnit('刘主任','EMP-20140078','13745893345')"><span class="search-select__item-name">刘主任</span><span class="search-select__item-info">EMP-20140078 · 综合管理部</span></div>
|
||||
<div class="search-select__item" onclick="selectUnit('赵部长','EMP-20130056','13589128821')"><span class="search-select__item-name">赵部长</span><span class="search-select__item-info">EMP-20130056 · 信息技术部</span></div>
|
||||
<div class="search-select__item" onclick="selectUnit('周处长','EMP-20170023','13678451290')"><span class="search-select__item-name">周处长</span><span class="search-select__item-info">EMP-20170023 · 人力资源部</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selected-card" id="unitCard"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 亲友紧急联系人 -->
|
||||
<div class="modal__section" style="margin-bottom:0;">
|
||||
<div class="modal__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
亲友紧急联系人
|
||||
</div>
|
||||
<div id="kinList"></div>
|
||||
<button class="btn btn-default btn-sm" onclick="addKin('','','')">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
添加亲友联系人
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEdit()">取 消</button>
|
||||
<button class="btn btn-primary" onclick="alert('保存成功！');closeEdit();">保 存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openEdit(name,no,unit,dept,uName,uPhone,kName,kRel,kPhone){
|
||||
document.getElementById('empName').textContent=name;
|
||||
document.getElementById('empNo').textContent=no;
|
||||
document.getElementById('empUnit').textContent=unit;
|
||||
document.getElementById('empDept').textContent=dept;
|
||||
document.getElementById('unitInput').value=uName;
|
||||
var card=document.getElementById('unitCard');
|
||||
card.style.display='block';
|
||||
card.textContent=uName+' · '+uPhone;
|
||||
document.getElementById('kinList').innerHTML='';
|
||||
addKin(kName,kRel,kPhone);
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
function closeEdit(){document.getElementById('editModal').classList.remove('show');}
|
||||
function showUnitDD(){document.getElementById('unitDropdown').style.display='block';}
|
||||
function filterUnit(val){
|
||||
var dd=document.getElementById('unitDropdown');
|
||||
dd.style.display='block';
|
||||
dd.querySelectorAll('.search-select__item').forEach(function(item){
|
||||
var match=!val||item.textContent.toLowerCase().indexOf(val.toLowerCase())>-1;
|
||||
item.style.display=match?'flex':'none';
|
||||
});
|
||||
}
|
||||
function selectUnit(name,no,phone){
|
||||
document.getElementById('unitInput').value=name;
|
||||
document.getElementById('unitDropdown').style.display='none';
|
||||
var card=document.getElementById('unitCard');
|
||||
card.style.display='block';
|
||||
card.textContent=name+' · '+no+' · '+phone;
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!document.getElementById('unitSearch').contains(e.target))
|
||||
document.getElementById('unitDropdown').style.display='none';
|
||||
});
|
||||
function addKin(name,rel,phone){
|
||||
var list=document.getElementById('kinList');
|
||||
var div=document.createElement('div');
|
||||
div.className='kin-row';
|
||||
div.innerHTML='<input class="form-input-sm" type="text" placeholder="姓名" value="'+name+'">'
|
||||
+'<select class="form-select-sm"><option value="">关系</option>'
|
||||
+'<option'+(rel==='配偶'?' selected':'')+'>配偶</option>'
|
||||
+'<option'+(rel==='父亲'?' selected':'')+'>父亲</option>'
|
||||
+'<option'+(rel==='母亲'?' selected':'')+'>母亲</option>'
|
||||
+'<option'+(rel==='子女'||rel==='女儿'||rel==='儿子'?' selected':'')+'>子女</option>'
|
||||
+'<option'+(rel==='兄弟姐妹'?' selected':'')+'>兄弟姐妹</option>'
|
||||
+'<option'+(rel==='朋友'?' selected':'')+'>朋友</option>'
|
||||
+'<option'+(rel==='其他'?' selected':'')+'>其他</option></select>'
|
||||
+'<input class="form-input-sm" type="tel" placeholder="手机号" value="'+phone+'">'
|
||||
+'<button class="btn-icon-danger" onclick="removeKin(this)" title="删除">×</button>';
|
||||
list.appendChild(div);
|
||||
}
|
||||
function removeKin(el){
|
||||
var list=document.getElementById('kinList');
|
||||
if(list.children.length<=1){alert('至少保留一条亲友联系人');return;}
|
||||
el.closest('.kin-row').remove();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 急救包信息 - 新增急救包 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;min-width:320px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-width:320px;width:480px;height:100px;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger-ghost{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger-ghost:hover{background:#fff1f0;}
|
||||
.btn-sm{height:30px;padding:0 10px;font-size:var(--font-xs);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
|
||||
/* 地图选点 */
|
||||
.map-picker{width:480px;height:220px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#e6f7ff;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__bg{position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px);}
|
||||
.map-picker__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;display:none;}
|
||||
.map-picker__label{position:relative;z-index:2;display:flex;align-items:center;gap:6px;}
|
||||
.map-picker__coord{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.92);padding:4px 14px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);z-index:3;display:none;white-space:nowrap;color:var(--text-primary);}
|
||||
|
||||
/* 内配用品表格 */
|
||||
.supplies-table{width:100%;border-collapse:collapse;margin-top:12px;}
|
||||
.supplies-table th{background:#FAFAFA;padding:10px 12px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
.supplies-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
|
||||
.supplies-table .form-input,.supplies-table .form-select{min-width:auto;width:100%;height:32px;}
|
||||
.supplies-wrap{min-width:320px;width:100%;max-width:900px;}
|
||||
.add-row-btn{margin-top:10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item active"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-first-aid-kit.html">急救包信息</a>
|
||||
<span>/</span>
|
||||
<span>新增急救包</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>急救包编号</div>
|
||||
<input class="form-input" type="text" placeholder="请输入急救包编号，如 FK-2025-006">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>所属单位</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择所属单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>布放地址</div>
|
||||
<div>
|
||||
<!-- 交互说明：点击地图区域模拟选点，显示坐标标记 -->
|
||||
<div class="map-picker" id="mapPicker" onclick="pickLocation(event)">
|
||||
<div class="map-picker__bg"></div>
|
||||
<svg class="map-picker__pin" id="mapPin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg>
|
||||
<span class="map-picker__label" id="mapLabel"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" stroke-width="1"/></svg>在地图上点击选择坐标位置</span>
|
||||
<div class="map-picker__coord" id="mapCoord"></div>
|
||||
</div>
|
||||
<input class="form-input" type="text" placeholder="请补充详细地址，如：总部办公楼1层前台" style="min-width:480px;margin-top:10px;"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>布放日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 管理信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">管理信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理部门</div>
|
||||
<input class="form-input" type="text" placeholder="请输入管理部门">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入管理人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理人电话</div>
|
||||
<input class="form-input" type="tel" placeholder="请输入管理人联系电话">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内配用品 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">内配用品</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label" style="line-height:normal;padding-top:8px;"><span class="required">*</span>用品清单</div>
|
||||
<div class="supplies-wrap">
|
||||
<table class="supplies-table" id="suppliesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40px;">序号</th>
|
||||
<th style="width:130px;">类别</th>
|
||||
<th style="width:160px;">物品名称</th>
|
||||
<th style="width:150px;">规格</th>
|
||||
<th>用途说明</th>
|
||||
<th style="width:60px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td><select class="form-select" style="min-width:auto;width:100%;"><option value="">请选择</option><option>止血包扎</option><option>消毒清洁</option><option>辅助器材</option><option>防护用品</option></select></td>
|
||||
<td><input class="form-input" type="text" placeholder="物品名称" style="min-width:auto;width:100%;"></td>
|
||||
<td><input class="form-input" type="text" placeholder="规格" style="min-width:auto;width:100%;"></td>
|
||||
<td><input class="form-input" type="text" placeholder="用途说明" style="min-width:auto;width:100%;"></td>
|
||||
<td style="text-align:center;"><span class="link-danger" style="cursor:pointer;font-size:var(--font-xs);" onclick="removeRow(this)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td><select class="form-select" style="min-width:auto;width:100%;"><option value="">请选择</option><option>止血包扎</option><option>消毒清洁</option><option>辅助器材</option><option>防护用品</option></select></td>
|
||||
<td><input class="form-input" type="text" placeholder="物品名称" style="min-width:auto;width:100%;"></td>
|
||||
<td><input class="form-input" type="text" placeholder="规格" style="min-width:auto;width:100%;"></td>
|
||||
<td><input class="form-input" type="text" placeholder="用途说明" style="min-width:auto;width:100%;"></td>
|
||||
<td style="text-align:center;"><span class="link-danger" style="cursor:pointer;font-size:var(--font-xs);" onclick="removeRow(this)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td><select class="form-select" style="min-width:auto;width:100%;"><option value="">请选择</option><option>止血包扎</option><option>消毒清洁</option><option>辅助器材</option><option>防护用品</option></select></td>
|
||||
<td><input class="form-input" type="text" placeholder="物品名称" style="min-width:auto;width:100%;"></td>
|
||||
<td><input class="form-input" type="text" placeholder="规格" style="min-width:auto;width:100%;"></td>
|
||||
<td><input class="form-input" type="text" placeholder="用途说明" style="min-width:auto;width:100%;"></td>
|
||||
<td style="text-align:center;"><span class="link-danger" style="cursor:pointer;font-size:var(--font-xs);" onclick="removeRow(this)">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn btn-default btn-sm add-row-btn" onclick="addRow()">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
添加用品
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='resource-first-aid-kit.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-first-aid-kit.html';">取 消</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function pickLocation(e){
|
||||
var picker=document.getElementById('mapPicker');
|
||||
var rect=picker.getBoundingClientRect();
|
||||
var x=e.clientX-rect.left;
|
||||
var y=e.clientY-rect.top;
|
||||
var pin=document.getElementById('mapPin');
|
||||
pin.style.display='block';
|
||||
pin.style.left=x+'px';
|
||||
pin.style.top=y+'px';
|
||||
document.getElementById('mapLabel').style.display='none';
|
||||
var addresses=['陕西省西安市未央区长庆油田总部办公楼','陕西省庆阳市西峰区采油一厂调度中心','陕西省延安市宝塔区采油二厂值班室','甘肃省庆阳市华池县采油三厂井站A区','陕西省西安市未央区长庆油田职工食堂'];
|
||||
var idx=Math.floor(Math.random()*addresses.length);
|
||||
var coord=document.getElementById('mapCoord');
|
||||
coord.innerHTML='<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="vertical-align:-1px;margin-right:4px;"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="#1890FF" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="#1890FF" stroke-width="1"/></svg>'+addresses[idx];
|
||||
coord.style.display='block';
|
||||
}
|
||||
function addRow(){
|
||||
var tbody=document.querySelector('#suppliesTable tbody');
|
||||
var idx=tbody.rows.length+1;
|
||||
var tr=document.createElement('tr');
|
||||
tr.innerHTML='<td>'+idx+'</td>'
|
||||
+'<td><select class="form-select" style="min-width:auto;width:100%;"><option value="">请选择</option><option>止血包扎</option><option>消毒清洁</option><option>辅助器材</option><option>防护用品</option></select></td>'
|
||||
+'<td><input class="form-input" type="text" placeholder="物品名称" style="min-width:auto;width:100%;"></td>'
|
||||
+'<td><input class="form-input" type="text" placeholder="规格" style="min-width:auto;width:100%;"></td>'
|
||||
+'<td><input class="form-input" type="text" placeholder="用途说明" style="min-width:auto;width:100%;"></td>'
|
||||
+'<td style="text-align:center;"><span class="link-danger" style="cursor:pointer;font-size:var(--font-xs);" onclick="removeRow(this)">删除</span></td>';
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
function removeRow(el){
|
||||
var tbody=document.querySelector('#suppliesTable tbody');
|
||||
if(tbody.rows.length<=1){alert('至少保留一条用品记录');return;}
|
||||
el.closest('tr').remove();
|
||||
// 重排序号
|
||||
Array.from(tbody.rows).forEach(function(tr,i){tr.cells[0].textContent=i+1;});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -88,6 +88,16 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:680px;max-height:80vh;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:20px 24px;overflow-y:auto;max-height:calc(80vh - 60px);}
|
||||
.modal__body table{width:100%;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -178,8 +188,14 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>存放位置：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入存放位置">
|
||||
<label>管理部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部部门</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -187,10 +203,10 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<a href="resource-first-aid-kit-add.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增急救包
|
||||
</button>
|
||||
</a>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -209,13 +225,13 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>急救包编号</th>
|
||||
<th>配置标准</th>
|
||||
<th>所属单位</th>
|
||||
<th>存放位置</th>
|
||||
<th>责任人</th>
|
||||
<th>药品到期时间</th>
|
||||
<th>上次检查时间</th>
|
||||
<th>状态</th>
|
||||
<th>布放地址</th>
|
||||
<th>布放日期</th>
|
||||
<th>内配用品</th>
|
||||
<th>管理部门</th>
|
||||
<th>管理人</th>
|
||||
<th>管理人电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -223,62 +239,62 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">FK-2025-001</td>
|
||||
<td>企业标准型</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部办公楼1层前台</td>
|
||||
<td>2025-01-10</td>
|
||||
<td><span class="link" onclick="showSupplies(0)">查看（12件）</span></td>
|
||||
<td>安全环保部</td>
|
||||
<td>刘芳</td>
|
||||
<td>2027-03-15</td>
|
||||
<td>2026-03-01</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>138****6721</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">FK-2025-002</td>
|
||||
<td>野外作业型</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>采油一厂调度中心</td>
|
||||
<td>2025-02-18</td>
|
||||
<td><span class="link" onclick="showSupplies(1)">查看（15件）</span></td>
|
||||
<td>生产运行部</td>
|
||||
<td>王刚</td>
|
||||
<td>2026-06-20</td>
|
||||
<td>2026-02-15</td>
|
||||
<td><span class="tag tag-orange">即将过期</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>139****3208</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">FK-2025-003</td>
|
||||
<td>企业标准型</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>采油二厂值班室</td>
|
||||
<td>2025-03-05</td>
|
||||
<td><span class="link" onclick="showSupplies(2)">查看（10件）</span></td>
|
||||
<td>综合管理部</td>
|
||||
<td>陈丽</td>
|
||||
<td>2027-01-10</td>
|
||||
<td>2026-03-20</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>137****5519</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">FK-2025-004</td>
|
||||
<td>野外作业型</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>采油三厂井站A区</td>
|
||||
<td>2025-01-25</td>
|
||||
<td><span class="link" onclick="showSupplies(3)">查看（18件）</span></td>
|
||||
<td>安全环保部</td>
|
||||
<td>孙伟</td>
|
||||
<td>2025-12-01</td>
|
||||
<td>2025-11-15</td>
|
||||
<td><span class="tag tag-red">已过期</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>136****8842</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">FK-2025-005</td>
|
||||
<td>企业标准型</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部职工食堂</td>
|
||||
<td>2025-04-12</td>
|
||||
<td><span class="link" onclick="showSupplies(4)">查看（12件）</span></td>
|
||||
<td>综合管理部</td>
|
||||
<td>赵敏</td>
|
||||
<td>2027-05-08</td>
|
||||
<td>2026-04-10</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>135****2107</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -296,5 +312,124 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 内配用品弹窗 -->
|
||||
<div class="modal-mask" id="suppliesModal" onclick="if(event.target===this)closeSupplies()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span id="modalTitle">内配用品清单</span>
|
||||
<button class="modal__close" onclick="closeSupplies()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<table id="suppliesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>类别</th>
|
||||
<th>物品名称</th>
|
||||
<th>规格</th>
|
||||
<th>用途说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var suppliesData=[
|
||||
[
|
||||
['止血包扎','弹性绷带','7.5cm×4.5m','用于伤口加压包扎止血'],
|
||||
['止血包扎','三角巾','96cm×96cm×136cm','用于骨折固定及悬吊包扎'],
|
||||
['止血包扎','医用纱布','10cm×10cm（8层）','覆盖伤口吸收渗液'],
|
||||
['止血包扎','止血带','橡胶条/卡扣式','四肢大出血时阻断血流'],
|
||||
['止血包扎','创可贴','混合规格（20片）','小型切割伤快速止血'],
|
||||
['消毒清洁','碘伏棉棒','独立包装（30支）','伤口及周围皮肤消毒'],
|
||||
['消毒清洁','酒精湿巾','独立包装（20片）','器械及皮肤表面清洁'],
|
||||
['消毒清洁','医用手套','乳胶/丁腈（5副）','操作防护避免交叉感染'],
|
||||
['辅助器材','医用剪刀','不锈钢圆头','剪裁纱布绷带及衣物'],
|
||||
['辅助器材','镊子','不锈钢12cm','夹取敷料及清理异物'],
|
||||
['防护用品','CPR面膜','一次性单向阀','心肺复苏时隔离防护'],
|
||||
['防护用品','急救毯','210cm×130cm铝箔','保温防风防雨防晒']
|
||||
],
|
||||
[
|
||||
['止血包扎','弹性绷带','7.5cm×4.5m','用于伤口加压包扎止血'],
|
||||
['止血包扎','三角巾','96cm×96cm×136cm','用于骨折固定及悬吊包扎'],
|
||||
['止血包扎','医用纱布','10cm×10cm（8层）','覆盖伤口吸收渗液'],
|
||||
['止血包扎','止血带','橡胶条/卡扣式','四肢大出血时阻断血流'],
|
||||
['止血包扎','创可贴','混合规格（20片）','小型切割伤快速止血'],
|
||||
['消毒清洁','碘伏棉棒','独立包装（30支）','伤口及周围皮肤消毒'],
|
||||
['消毒清洁','酒精湿巾','独立包装（20片）','器械及皮肤表面清洁'],
|
||||
['消毒清洁','医用手套','乳胶/丁腈（5副）','操作防护避免交叉感染'],
|
||||
['消毒清洁','生理盐水','500ml瓶装','伤口冲洗清洁'],
|
||||
['辅助器材','医用剪刀','不锈钢圆头','剪裁纱布绷带及衣物'],
|
||||
['辅助器材','镊子','不锈钢12cm','夹取敷料及清理异物'],
|
||||
['辅助器材','体温计','电子式','测量体温判断伤情'],
|
||||
['防护用品','CPR面膜','一次性单向阀','心肺复苏时隔离防护'],
|
||||
['防护用品','急救毯','210cm×130cm铝箔','保温防风防雨防晒'],
|
||||
['防护用品','反光背心','荧光黄','野外作业现场警示']
|
||||
],
|
||||
[
|
||||
['止血包扎','弹性绷带','7.5cm×4.5m','用于伤口加压包扎止血'],
|
||||
['止血包扎','三角巾','96cm×96cm×136cm','用于骨折固定及悬吊包扎'],
|
||||
['止血包扎','医用纱布','10cm×10cm（8层）','覆盖伤口吸收渗液'],
|
||||
['止血包扎','止血带','橡胶条/卡扣式','四肢大出血时阻断血流'],
|
||||
['消毒清洁','碘伏棉棒','独立包装（30支）','伤口及周围皮肤消毒'],
|
||||
['消毒清洁','酒精湿巾','独立包装（20片）','器械及皮肤表面清洁'],
|
||||
['消毒清洁','医用手套','乳胶/丁腈（5副）','操作防护避免交叉感染'],
|
||||
['辅助器材','医用剪刀','不锈钢圆头','剪裁纱布绷带及衣物'],
|
||||
['防护用品','CPR面膜','一次性单向阀','心肺复苏时隔离防护'],
|
||||
['防护用品','急救毯','210cm×130cm铝箔','保温防风防雨防晒']
|
||||
],
|
||||
[
|
||||
['止血包扎','弹性绷带','7.5cm×4.5m','用于伤口加压包扎止血'],
|
||||
['止血包扎','三角巾','96cm×96cm×136cm','用于骨折固定及悬吊包扎'],
|
||||
['止血包扎','医用纱布','10cm×10cm（8层）','覆盖伤口吸收渗液'],
|
||||
['止血包扎','止血带','橡胶条/卡扣式','四肢大出血时阻断血流'],
|
||||
['止血包扎','创可贴','混合规格（20片）','小型切割伤快速止血'],
|
||||
['止血包扎','蝶形胶带','混合规格（10片）','小型裂伤闭合固定'],
|
||||
['消毒清洁','碘伏棉棒','独立包装（30支）','伤口及周围皮肤消毒'],
|
||||
['消毒清洁','酒精湿巾','独立包装（20片）','器械及皮肤表面清洁'],
|
||||
['消毒清洁','医用手套','乳胶/丁腈（5副）','操作防护避免交叉感染'],
|
||||
['消毒清洁','生理盐水','500ml瓶装','伤口冲洗清洁'],
|
||||
['辅助器材','医用剪刀','不锈钢圆头','剪裁纱布绷带及衣物'],
|
||||
['辅助器材','镊子','不锈钢12cm','夹取敷料及清理异物'],
|
||||
['辅助器材','体温计','电子式','测量体温判断伤情'],
|
||||
['辅助器材','夹板','铝合金可塑型','骨折临时固定'],
|
||||
['防护用品','CPR面膜','一次性单向阀','心肺复苏时隔离防护'],
|
||||
['防护用品','急救毯','210cm×130cm铝箔','保温防风防雨防晒'],
|
||||
['防护用品','反光背心','荧光黄','野外作业现场警示'],
|
||||
['防护用品','防蛇咬套件','负压吸引器','野外蛇咬伤紧急处理']
|
||||
],
|
||||
[
|
||||
['止血包扎','弹性绷带','7.5cm×4.5m','用于伤口加压包扎止血'],
|
||||
['止血包扎','三角巾','96cm×96cm×136cm','用于骨折固定及悬吊包扎'],
|
||||
['止血包扎','医用纱布','10cm×10cm（8层）','覆盖伤口吸收渗液'],
|
||||
['止血包扎','止血带','橡胶条/卡扣式','四肢大出血时阻断血流'],
|
||||
['止血包扎','创可贴','混合规格（20片）','小型切割伤快速止血'],
|
||||
['消毒清洁','碘伏棉棒','独立包装（30支）','伤口及周围皮肤消毒'],
|
||||
['消毒清洁','酒精湿巾','独立包装（20片）','器械及皮肤表面清洁'],
|
||||
['消毒清洁','医用手套','乳胶/丁腈（5副）','操作防护避免交叉感染'],
|
||||
['辅助器材','医用剪刀','不锈钢圆头','剪裁纱布绷带及衣物'],
|
||||
['辅助器材','镊子','不锈钢12cm','夹取敷料及清理异物'],
|
||||
['防护用品','CPR面膜','一次性单向阀','心肺复苏时隔离防护'],
|
||||
['防护用品','急救毯','210cm×130cm铝箔','保温防风防雨防晒']
|
||||
]
|
||||
];
|
||||
var kitNos=['FK-2025-001','FK-2025-002','FK-2025-003','FK-2025-004','FK-2025-005'];
|
||||
function showSupplies(idx){
|
||||
document.getElementById('modalTitle').textContent=kitNos[idx]+' 内配用品清单';
|
||||
var tbody=document.querySelector('#suppliesTable tbody');
|
||||
tbody.innerHTML='';
|
||||
suppliesData[idx].forEach(function(r,i){
|
||||
var tr=document.createElement('tr');
|
||||
tr.innerHTML='<td>'+(i+1)+'</td><td>'+r[0]+'</td><td>'+r[1]+'</td><td>'+r[2]+'</td><td>'+r[3]+'</td>';
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
document.getElementById('suppliesModal').classList.add('show');
|
||||
}
|
||||
function closeSupplies(){document.getElementById('suppliesModal').classList.remove('show');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -107,8 +107,8 @@
|
||||
<div class="form-group"><label>擅长疾病</label><input class="form-input" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>注册日期</label><input class="form-input" type="date"></div>
|
||||
<div class="form-group"><label>出库如期</label><input class="form-input" type="date"></div>
|
||||
<div class="form-group"><label>签约日期</label><input class="form-input" type="date"></div>
|
||||
<div class="form-group"><label>解约日期</label><input class="form-input" type="date"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>是否推荐</label><div class="radio-group"><label><input type="radio" name="recommend"> 是</label><label><input type="radio" name="recommend" checked> 否</label></div></div>
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 说明框 -->
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>异常数据定义：</strong>咨询时长异常（时长 > 168小时）、长时间未回复（>48小时未回复）或评价分数极低（评分 < 2分）等情形。
|
||||
</div>
|
||||
|
||||
@@ -188,6 +188,27 @@
|
||||
|
||||
- 常规校验:如电话、邮箱、身份证号必须加正则校验，姓名（格式+长度）校验，数值类型（如身高、体重、距离、金额等）根据常规知识灵活加校验（如体重不能为负数，身高不能大于300CM等）
|
||||
|
||||
- 字段字数限制规范：所有表单输入字段须按下表设置最大字数限制，前端通过 `maxlength` 属性控制，后端同步校验
|
||||
|
||||
| 字段类型 | 最大字数 | 说明 |
|
||||
|---------|-------|-------------------------------------------------------------------------------------|
|
||||
| 姓名/人名 | 20 | 中文姓名+少数民族长名 |
|
||||
| 手机号 | 11 | 固定位数，正则校验 |
|
||||
| 座机号 | 12 | 正则校验，正则校验 |
|
||||
| 身份证号 | 18 | 固定位数，正则校验 |
|
||||
| 标题/名称 | 50 | 如任务标题、模块名称 |
|
||||
| 短文本输入 | 100 | 如地址、单位名称、一句话备注 |
|
||||
| 多行备注/描述 | 500 | 如简介、问题说明 |
|
||||
| 搜索框 | 50 | 关键词搜索 |
|
||||
| 验证码 | 6 | 短信/邮箱验证码 |
|
||||
| 密码 | 12~30 | 必须包含至少一个小写字母; 必须包含至少一个大写字母; 必须包含至少一个数字; 必须包含至少一个特殊符号(可以根据需要修改特殊符号的定义); 密码长度必须大于等于12 |
|
||||
| 邮箱 | 50 | 常规邮箱地址 ，正则校验 |
|
||||
| URL链接 | 200 | 网址输入 |
|
||||
|
||||
- 多行文本框右下角实时显示字数计数提示，格式为"已输入 X / Y 字"
|
||||
- 达到字数上限后禁止继续输入
|
||||
- 提交校验时，必填字段为空提示"请输入XXX"，超限提示"XXX不能超过N个字"
|
||||
|
||||
### 3．搜索与筛选规范
|
||||
|
||||
- 搜索框支持回车键触发搜索，与点击搜索按钮效果一致
|
||||
@@ -296,6 +317,26 @@
|
||||
|
||||
- 表单提交后按钮进入 loading 状态，防止重复提交
|
||||
|
||||
- 字段字数限制规范：与PC端保持一致，所有表单输入字段须按以下规范设置最大字数限制
|
||||
|
||||
| 字段类型 | 最大字数 | 说明 |
|
||||
|---------|-------|-------------------------------------------------------------------------------------|
|
||||
| 姓名/人名 | 20 | 中文姓名+少数民族长名 |
|
||||
| 手机号 | 11 | 固定位数，正则校验 |
|
||||
| 座机号 | 12 | 正则校验，正则校验 |
|
||||
| 身份证号 | 18 | 固定位数，正则校验 |
|
||||
| 标题/名称 | 50 | 如任务标题、模块名称 |
|
||||
| 短文本输入 | 100 | 如地址、单位名称、一句话备注 |
|
||||
| 多行备注/描述 | 500 | 如简介、问题说明 |
|
||||
| 搜索框 | 50 | 关键词搜索 |
|
||||
| 验证码 | 6 | 短信/邮箱验证码 |
|
||||
| 密码 | 12~30 | 必须包含至少一个小写字母; 必须包含至少一个大写字母; 必须包含至少一个数字; 必须包含至少一个特殊符号(可以根据需要修改特殊符号的定义); 密码长度必须大于等于12 |
|
||||
| 邮箱 | 50 | 常规邮箱地址 ，正则校验 |
|
||||
| URL链接 | 200 | 网址输入 |
|
||||
|
||||
- 多行文本框右下角实时显示字数计数提示，格式为"已输入 X / Y 字"
|
||||
- 达到字数上限后禁止继续输入
|
||||
|
||||
### 3．交互与操作
|
||||
|
||||
- 可点击区域不小于 44×44pt，确保手指触控友好
|
||||
|
||||
Reference in New Issue
Block a user