Files
his/openhis-ui-vue3/src/views/hospitalRecord/components/testHtmlThr.html
2025-12-10 14:20:24 +08:00

804 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.hisSec {
padding: 10px 0;
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
}
.font_1 {
font-size: 14px;
font-weight: bold;
}
.font_2 {
font-size: 14px;
}
.font_3 {
font-size: 13px;
}
.font_4 {
font-size: 12px;
}
.hisSecInner {
width: 1000px;
height: 100%;
}
.tableBox {
margin: 10px 0;
}
.tableBoxInner {
}
.borderRight {
border-right: 1px solid #333333;
}
.borderBottom {
border-bottom: 1px solid #333333;
}
.tableBoxItemHeader {
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
height: 50px;
}
.tableBoxItemHeader .item {
white-space: wrap;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
box-sizing: border-box;
padding: 10px 2px;
height: 100%;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItemHeader .itemIndex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 3.5%;
}
.tableBoxItemHeader .chooseAllBtn {
width: 18px;
height: 18px;
}
.tableBoxItemHeader .itemDate {
width: 10%;
}
.tableBoxItemHeader .itemSurgeryLevel {
width: 7%;
}
.tableBoxItemHeader .itemSurgeryName {
width: 23%;
}
.tableBoxItemHeader .itemCutLevel {
width: 9%;
}
.tableBoxItemHeader .itemCutLevel1 {
width: 12%;
}
.tableBoxItemHeader .itemCutLevel2 {
width: 7%;
}
.tableBoxItemHeader .itemTime {
width: 9%;
}
.tableBoxItemHeader .itemSpec {
width: 20%;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
height: 50px;
}
.tableBoxItemHeader .itemSpec .spec {
width: 100%;
text-align: center;
height: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItemHeader .itemSpec .spec .specItem {
width: 33.33%;
height: 100%;
line-height: 25px;
}
.tableBoxItemHeader .itemSpec .spec_ {
width: 100%;
text-align: center;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItemHeader .itemSpec .spec_ .specItem {
width: 33.33%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItemHeader .itemCheckBox {
width: 18px;
height: 18px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 2px;
}
.tableBoxItemHeader .itemCheckBoxAct {
line-height: 16px;
text-align: center;
font-size: 12px;
width: 18px;
height: 18px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 2px;
background: #333333;
color: #fff;
}
.tableBoxItemHeader .itemCheckBox:hover {
border: 1px solid #333333;
}
.tableBoxItem {
display: flex;
flex-direction: row;
align-items: center;
height: 55px;
}
.tableBoxItem .item {
border-top: 1px solid #333333;
border-left: 1px solid #333333;
//line-height: 40px;
box-sizing: border-box;
padding: 10px 2px;
height: 100%;
text-align: center;
}
.tableBoxItem .itemIndex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 3.5%;
}
.tableBoxItem .itemDate {
width: 10%;
}
.tableBoxItem .itemSurgeryLevel {
width: 7%;
}
.tableBoxItem .itemSurgeryName {
width: 23%;
}
.tableBoxItem .itemCutLevel {
width: 9%;
}
.tableBoxItem .itemCutLevel1 {
width: 12%;
}
.tableBoxItem .itemCutLevel2 {
width: 7%;
}
.tableBoxItem .itemTime {
width: 9%;
}
.tableBoxItem .itemSpec {
width: 20%;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
height: 55px;
}
.tableBoxItem .itemSpec .spec {
width: 100%;
text-align: center;
height: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItem .itemSpec .spec .specItem {
width: 33.33%;
height: 100%;
line-height: 25px;
}
.tableBoxItem .itemSpec .spec_ {
width: 100%;
text-align: center;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItem .itemSpec .spec_ .specItem {
width: 33.33%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tableBoxItem .itemCheckBox {
width: 18px;
height: 18px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 2px;
}
.tableBoxItem .itemCheckBoxAct {
line-height: 16px;
text-align: center;
font-size: 12px;
width: 18px;
height: 18px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 2px;
background: #409eff;
color: #fff;
}
.tableBoxItem .itemCheckBox:hover {
border: 1px solid #409eff;
}
.topBar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #333333;
padding-bottom: 5px;
margin-bottom: 10px;
}
.secItem {
width: 100%;
display: flex;
flex-direction: row;
//align-items: center;
justify-content: left;
border-bottom: 1px solid #333333;
padding-bottom: 5px;
margin-bottom: 10px;
}
.secItem1 {
width: 100%;
border-bottom: 1px solid #333333;
padding-bottom: 5px;
margin-bottom: 10px;
}
.chooseBox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border: 1px solid #333;
font-size: 12px;
margin: 0 5px;
}
.rowBox {
display: flex;
flex-direction: row;
align-items: center;
}
.writeArea {
display: inline-block;
width: 150px;
border-bottom: 1px solid #333333;
padding-bottom: 2px;
}
.writeAreaCenter {
display: inline-block;
width: 100px;
border-bottom: 1px solid #333333;
padding-bottom: 2px;
text-align: center;
}
.writeAreaSort {
display: inline-block;
width: 35px;
border-bottom: 1px solid #333333;
//padding-bottom: 2px;
text-align: center;
}
.marginSmall {
margin: 0 5px;
}
.marginNor {
margin: 0 10px;
}
.marginBig {
margin: 0 20px;
}
.marginB {
margin-bottom: 10px;
}
.marginR_B {
margin-right: 40px;
}
.marginR_S {
margin-right: 20px;
}
.subTable {
}
.tableBarHeader {
text-align: center;
height: 35px;line-height: 35px;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
font-size: 15px;
}
.tableBar {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
height: 35px;
}
.barItem {
height: 100%;
width: 33.33%;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
}
.barItem1 {
height: 100%;
width: 120%;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
}
.barItem2 {
height: 100%;
width: 30%;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
}
.borderR {
border-right: 1px solid #333333;
}
.borderB {
border-bottom: 1px solid #333333;
}
</style>
</head>
<body>
<div class="hisSec">
<div class="hisSecInner">
<div class="topBar">
<div class="font_2">姓名:金长存</div>
<div class="font_2">病案号12345678</div>
</div>
<div class="secItem">
<div class="font_1">住院费用(元):</div>
<div class="rowBox">
<div class="marginSmall font_3">总费用:<span class="writeAreaCenter"></span> (自付金额:<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">1.综合医疗服务类:</div>
<div class="marginSmall font_3">1一般医疗服务费<span class="writeAreaCenter"></span></div>
</div>
<div class="rowBox">
<div class="marginSmall font_3">2一般治疗操作费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">3护理费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">4其他费用<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">2.诊断类:</div>
<div class="marginSmall font_3">5病理诊断费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">6实验室诊断费<span class="writeAreaCenter"></span></div>
</div>
<div class="rowBox">
<div class="marginSmall font_3">7影像学诊断费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">8临床诊断项目费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">3.医疗类:</div>
<div class="marginSmall font_3">9非手术治疗项目费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">(临床物理治疗费:<span class="writeAreaCenter"></span></div>
</div>
<div class="rowBox">
<div class="marginSmall font_3">10手术治疗费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">(麻醉费:<span class="writeAreaCenter"></span>手术费:<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">4.康复类:</div>
<div class="marginSmall font_3">11康复费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">5.中医类:</div>
<div class="marginSmall font_3">12中医治疗费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">6.西药类:</div>
<div class="marginSmall font_3">13西药费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">(抗菌药物费用:<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">7.中药类:</div>
<div class="marginSmall font_3">14中成药费<span class="writeAreaCenter"></span></div>
<div class="marginSmall font_3">15中草药费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">8.血液和血液制品类:</div>
<div class="font_3">16血费<span class="writeAreaCenter"></span></div>
<div class="font_3">17白蛋白类制品费<span class="writeAreaCenter"></span></div>
</div>
<div class="rowBox">
<div class="font_3">18球蛋白类制品费<span class="writeAreaCenter"></span></div>
<div class="font_3">19凝血因子类制品费<span class="writeAreaCenter"></span></div>
</div>
<div class="rowBox">
<div class="font_3">20细胞因子类制品费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">9.耗材类:</div>
<div class="font_3">21检查用一次性医用材料费<span class="writeAreaCenter"></span></div>
</div>
<div class="rowBox">
<div class="font_3">22治疗用一次性医用材料费<span class="writeAreaCenter"></span></div>
<div class="font_3">23手术用用一次性医用材料费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">10.其他类:</div>
<div class="font_3">24其他费<span class="writeAreaCenter"></span></div>
</div>
</div>
<div class="secItem1">
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_1">说明:</div>
<div class="font_3 marginNor">(一)医疗付费方式 </div>
<div class="font_3 marginNor">1.城镇职工基本医疗保险 </div>
<div class="font_3 marginNor">2.城镇居民基本医疗保险 </div>
</div>
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_3 marginNor">3.新型农村合作医疗 </div>
<div class="font_3 marginNor">4.贫困救助 </div>
<div class="font_3 marginNor">5.商业医疗保险 </div>
</div>
<div class="rowBox" style="margin-bottom: 10px;">
<div class="font_3 marginNor">6.全公费 </div>
<div class="font_3 marginNor">7.全自费 </div>
<div class="font_3 marginNor">8.其他社会保险 </div>
<div class="font_3 marginNor">9.其他 </div>
</div>
</div>
<div class="subTable">
<div class="tableBarHeader font_1">其他诊断及手术附加页</div>
<div class="tableBar">
<div class="font_1 barItem1">出院诊断</div>
<div class="font_1 barItem2">疾病编码</div>
<div class="font_1 barItem2">入院病情</div>
<div class="font_1 barItem2 borderR">转归情况</div>
</div>
<div class="tableBar">
<div class="font_3 barItem1"></div>
<div class="font_3 barItem2"></div>
<div class="font_3 barItem2"></div>
<div class="font_3 barItem2 borderR"></div>
</div>
<div class="tableBar borderB">
<div class="font_3 barItem1"></div>
<div class="font_3 barItem2"></div>
<div class="font_3 barItem2"></div>
<div class="font_3 barItem2 borderR"></div>
</div>
</div>
<div class="secItem1" style="padding: 0;">
<div class="rowBox" style="margin: 10px 0 5px;">
<div class="font_2 marginR_S">入院病情:</div>
<div class="font_2 marginR_S">1.有 </div>
<div class="font_2 marginR_S">2.临床未确定</div>
<div class="font_2 marginR_S">3.情况不明</div>
<div class="font_2 marginR_B">4.无 </div>
</div>
<div class="rowBox" style="margin: 10px 0 5px;">
<div class="font_2 marginR_S">转归:</div>
<div class="font_2 marginR_S">1.治愈 </div>
<div class="font_2 marginR_S">2.好转</div>
<div class="font_2 marginR_S">3.未愈</div>
<div class="font_2 marginR_S">4.死亡</div>
<div class="font_2 marginR_S">5.其他</div>
</div>
</div>
<div class="tableBox">
<div class="tableBoxInner">
<div class="tableBoxItemHeader font_4">
<div class="item itemDate">手术操作日期</div>
<div class="item itemSurgeryLevel">手术级别</div>
<div class="item itemSurgeryName">手术及操作名称</div>
<div class="itemSpec">
<div class="spec" style="width: 100%;border-bottom: 1px solid #333333;">手术及操作医师</div>
<div class="spec">
<div class="specItem">术者</div>
<div class="specItem" style="border-left: 1px solid #333333;">Ⅰ助</div>
<div class="specItem" style="border-left: 1px solid #333333;">Ⅱ助</div>
</div>
</div>
<div class="item itemCutLevel">切口愈合等级</div>
<div class="item itemCutLevel1">麻醉方式</div>
<div class="item itemCutLevel">麻醉医师</div>
<div class="item itemCutLevel2">麻醉分级</div>
<div class="item itemTime borderRight">手术时长(H)</div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate">2023-11-6</div>
<div class="item itemSurgeryLevel">5</div>
<div class="item itemSurgeryName">腰椎间盘切除,椎管减压,植骨融合内固定术</div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
牛粪
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
渣渣辉
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
长存
</div>
</div>
</div>
<div class="item itemCutLevel">1/甲</div>
<div class="item itemCutLevel1">静吸复合麻醉</div>
<div class="item itemCutLevel">马本慧</div>
<div class="item itemCutLevel2">2</div>
<div class="item itemTime borderRight">2.35</div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate">2023-11-6</div>
<div class="item itemSurgeryLevel">1</div>
<div class="item itemSurgeryName">PICC管去除</div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
牛粪
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
渣渣辉
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
长存
</div>
</div>
</div>
<div class="item itemCutLevel">1/甲</div>
<div class="item itemCutLevel1">静吸复合麻醉</div>
<div class="item itemCutLevel">马本慧</div>
<div class="item itemCutLevel2">2</div>
<div class="item itemTime borderRight">2.35</div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate">2023-11-6</div>
<div class="item itemSurgeryLevel">1</div>
<div class="item itemSurgeryName">经外周静脉穿刺中心静脉置管技术</div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
王丽丽
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel">1/甲</div>
<div class="item itemCutLevel1">静吸复合麻醉</div>
<div class="item itemCutLevel">马本慧</div>
<div class="item itemCutLevel2">2</div>
<div class="item itemTime borderRight">2.35</div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate"></div>
<div class="item itemSurgeryLevel"></div>
<div class="item itemSurgeryName"></div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel1"></div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel2"></div>
<div class="item itemTime borderRight"></div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate"></div>
<div class="item itemSurgeryLevel"></div>
<div class="item itemSurgeryName"></div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel1"></div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel2"></div>
<div class="item itemTime borderRight"></div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate"></div>
<div class="item itemSurgeryLevel"></div>
<div class="item itemSurgeryName"></div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel1"></div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel2"></div>
<div class="item itemTime borderRight"></div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate"></div>
<div class="item itemSurgeryLevel"></div>
<div class="item itemSurgeryName"></div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel1"></div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel2"></div>
<div class="item itemTime borderRight"></div>
</div>
<div class="tableBoxItem font_4">
<div class="item itemDate"></div>
<div class="item itemSurgeryLevel"></div>
<div class="item itemSurgeryName"></div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel1"></div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel2"></div>
<div class="item itemTime borderRight"></div>
</div>
<div class="tableBoxItem font_4 borderBottom">
<div class="item itemDate"></div>
<div class="item itemSurgeryLevel"></div>
<div class="item itemSurgeryName"></div>
<div class="itemSpec">
<div class="spec_">
<div class="specItem">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
<div class="specItem" style="border-left: 1px solid #333333;">
</div>
</div>
</div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel1"></div>
<div class="item itemCutLevel"></div>
<div class="item itemCutLevel2"></div>
<div class="item itemTime borderRight"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>