2024-08-04 18:23:33 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 胶片预览< / title >
< script src = "https://unpkg.com/hammerjs@2.0.8/hammer.js" > < / script >
< script src = "https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js" > < / script >
< script src = "https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js" > < / script >
< script src = "https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js" > < / script >
< script src = "https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js" > < / script >
< script src = "https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js" > < / script >
< script src = "https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js" > < / script >
< script src = "http://code.jquery.com/jquery-1.12.2.min.js" > < / script >
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
< link rel = "stylesheet" href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity = "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin = "anonymous" >
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
< link rel = "stylesheet" href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity = "sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin = "anonymous" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
< script src = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity = "sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin = "anonymous" > < / script >
< script src = "./js/dicomViewPc.js" > < / script >
< link rel = "stylesheet" href = "./css/iconfont/iconfont.css" >
< style >
.info {
position: relative;
left: 0;
top: 0;
font-size: 20px;
display: none;
width: 100px;
height: 100px;
border: 1px solid red;
z-index: 100;
color: white;
margin-top: -100px;
}
/***/
body {
margin: 0;
height: 100vh;
padding: 0px;
}
#app {
height: 100%;
width: 100%;
}
#container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#top-menu {
background-color: black;
/*height: 180px;
display: flex;
flex-direction: row;*/
border: 0px solid red;
overflow-x: hidden;
overflow-y: hidden;
}
#body-part {
width: 100%;
display: flex;
flex-direction: row;
flex-grow: 1;
}
#dicom-continer {
display: flex;
flex-direction: column;
height: 100%;
flex-grow: 1;
}
#dicom-list {
background-color: black;
width: 150px;
2024-08-15 17:17:03 +08:00
height: 868px;
2024-08-04 18:23:33 +08:00
display: flex;
flex-direction: column;
2024-08-15 17:17:03 +08:00
overflow: auto;
2024-08-04 18:23:33 +08:00
}
.btn {
margin: 5px 5px 5px 0;
}
/* #dicomImage {
flex-grow:1;
height: 100%;
}
#dicomImage1 {
flex-grow: 1;
height: 100%;
}*/
2024-08-15 23:07:10 +08:00
2024-08-04 18:23:33 +08:00
.series_img {
2024-08-15 23:07:10 +08:00
border: 0px solid green;
}
2024-08-04 18:23:33 +08:00
.series_img_active {
border: 1px solid green;
}
.border-red {
border: 1px solid red;
}
.left-top {
position: absolute;
top: 0px;
right: 0px;
text-align: right;
width: 100px;
height: 100px;
}
.left-bottom {
position: relative;
left: 0;
bottom: 0;
width: 100px;
height: 100px;
}
.right-top {
position: relative;
right: 0;
top: 0;
width: 100px;
height: 100px;
}
.right-bottom {
position: relative;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
}
.cornerstone-tool-active {
stroke: #FF0000 !important; /* 红色 */
}
.dicom-img-box {
flex-grow: 1;
width: 0;
height: 100%;
margin: 0 1px 0 1px;
display: flex;
flex-direction: row;
align-items: center;
background-color: black;
border: 1px solid white;
position:relative;
}
.dicom-img-box-active {
flex-grow: 1;
width: 0;
height: 100%;
margin: 0 1px 0 1px;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: center;
background-color: black;
position: relative;
}
.dicom-img {
flex-grow: 1;
width: 0;
height: 100%;
margin: 0 1px 0 1px;
}
.dicom-img-active {
flex-grow: 1;
width: 0;
height: 100%;
border: 1px solid red;
}
/*滚动条*/
.slider-container {
height: 100%;
width: 3rem;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
}
/*滑块样式-开始*/
/* range主体样式 */
.lcmf-range {
-webkit-appearance: none;
position: relative;
appearance: none;
height: 0.5rem;
/* outline设置为零防止点到空白区域时会出现边框影响美观性问题 */
outline: 0;
border: 0;
/* 背景色设置为渐变色，有兼容性问题谨慎使用 */
/*background: linear-gradient(to right,rgb(238,222,217),rgb(200,66,67));*/
border-radius: 0 0.5rem 0.5rem 0;
}
.lcmf-range-date {
/* 顺时针旋转90度作为y轴 */
transform: rotate(90deg);
width: 20rem !important;
margin-left: -8.5rem;
/*background: linear-gradient(to right,rgb(200,66,67),rgb(238,222,217));*/
background: linear-gradient(to right,rgb(200,66,67),rgb(200,66,67));
}
/* 滑动块样式 */
.lcmf-range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
height: 2rem;
width: 2rem;
border-radius: 0rem;
background-color: white;
border: 0.15rem solid rgb(245,95,95);
}
/*滑块样式-结束*/
.icon-shang {
color: red;
height: 12rem;
display: flex;
flex-direction: column;
align-items: center;
}
.icon-xia:hover, .icon-shang:hover {
color: white;
}
.icon-xia {
color: red;
height: 12rem;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
height: 0;
}
.around-info-left-top {
position: absolute;
top: 0px;
left: 0px;
color: white;
}
.around-info-right-top {
position: absolute;
top: 0px;
right: 0px;
color: white;
display:flex;
flex-direction:row-reverse;
}
.around-info-left-bottom {
position: absolute;
left: 0px;
bottom: 0px;
color: white;
}
.around-info-right-bottom {
position: absolute;
right: 0px;
bottom: 0px;
color: white;
display: flex;
flex-direction:column;
}
.around-info-right-bottom > .tag-item, around-info-right-top > .tag-item {
display: flex;
flex-direction: row-reverse;
}
< / style >
< / head >
< body >
< div id = "container" >
< div id = "top-menu" class = "btn-group" >
2024-08-15 13:11:18 +08:00
< button type = "button" id = "Magnify" class = "btn btn-default" onclick = "switchAction('Magnify',1,this)" > 放大镜< / button >
< button type = "button" id = "Pan" class = "btn btn-default" onclick = "switchAction('Pan',1,this)" > 平移< / button >
< button type = "button" id = "Zoom" class = "btn btn-default" onclick = "switchAction('Zoom',1,this)" > 缩放< / button >
< button type = "button" id = "ZoomMouseWheel" class = "btn btn-default" onclick = "switchAction('ZoomMouseWheel',1,this)" > 滚轮缩放< / button >
< button type = "button" id = "Wwwc" class = "btn btn-default" onclick = "switchAction('Wwwc',1,this)" > 对比度< / button >
< button type = "button" id = "WwwcRegion" class = "btn btn-default" onclick = "switchAction('WwwcRegion',1,this)" > 选区对比度< / button >
< button type = "button" id = "ScaleOverlay" class = "btn btn-default" onclick = "switchAction('ScaleOverlay',1,this)" > 比例尺< / button >
< button type = "button" id = "Rotate" class = "btn btn-default" onclick = "switchAction('Rotate',1,this)" > 旋转< / button >
< button type = "button" id = "OrientationMarkers" class = "btn btn-default" onclick = "switchAction('OrientationMarkers',1,this)" > 方向标记< / button >
< button type = "button" id = "Angle" class = "btn btn-default" onclick = "switchAction('Angle',1,this)" > 角度< / button >
< button type = "button" id = "ArrowAnnotate" class = "btn btn-default" onclick = "switchAction('ArrowAnnotate',1,this)" > 箭头注释< / button >
< button type = "button" id = "Bidirectional" class = "btn btn-default" onclick = "switchAction('Bidirectional',1,this)" > 长宽尺< / button >
< button type = "button" id = "CobbAngle" class = "btn btn-default" onclick = "switchAction('CobbAngle',1,this)" > 科布角< / button >
< button type = "button" id = "EllipticalRoi" class = "btn btn-default" onclick = "switchAction('EllipticalRoi',1,this)" > 椭圆选区< / button >
< button type = "button" id = "FreehandRoi" class = "btn btn-default" onclick = "switchAction('FreehandRoi',1,this)" > 自由选区< / button >
< button type = "button" id = "Length" class = "btn btn-default" onclick = "switchAction('Length',1,this)" > 长度尺< / button >
< button type = "button" id = "Probe" class = "btn btn-default" onclick = "switchAction('Probe',1,this)" > 探针< / button >
< button type = "button" id = "RectangleRoi" class = "btn btn-default" onclick = "switchAction('RectangleRoi',1,this)" > 矩形选区< / button >
< button type = "button" id = "TextMarker" class = "btn btn-default" onclick = "switchAction('TextMarker',1,this)" > 文本标记< / button >
< button type = "button" id = "StackScroll" class = "btn btn-default" onclick = "switchAction('StackScroll',1,this)" > 左键翻页< / button >
< button type = "button" id = "StackScrollMouseWheel" class = "btn btn-default" onclick = "switchAction('StackScrollMouseWheel',1,this)" > 滚轮翻页< / button >
2024-08-04 18:23:33 +08:00
< button type = "button" id = "invert" class = "btn btn-default" onclick = "invert(1,this)" > 反转色< / button >
2024-08-15 13:11:18 +08:00
< button type = "button" id = "changeColorx" class = "btn btn-default" onclick = "changColor(1,this)" > 彩色对比< / button >
2024-08-04 18:23:33 +08:00
< button type = "button" class = "btn btn-default" onclick = "resetTool()" > 重置< / button >
2024-08-15 13:11:18 +08:00
< input type = "text" id = 'row-count' placeholder = "行数" value = '1' / > x < input type = "text" id = 'column-count' placeholder = "列数" value = '1' / > < input type = 'button' onclick = "doCreate()" value = "多视窗" / >
2024-08-04 18:23:33 +08:00
< / div >
< div id = "body-part" >
< div id = "dicom-continer" >
< / div >
< div id = "dicom-list" >
< / div >
< / div >
< / div >
< / body >
< / html >
