<!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;
/*height: 100%;*/
display: flex;
/* overflow: auto; */
overflow-y: scroll;
flex-direction: column;
max-height:550px;
}
.btn {
margin: 5px 5px 5px 0;
}
/* #dicomImage {
flex-grow:1;
height: 100%;
}
#dicomImage1 {
flex-grow: 1;
height: 100%;
}*/
.series_img {
border: 1px solid black;
height:100%;
width:100%;
}
.series_img_active {
border: 1px solid green;
height: 100%;
width: 100%;
}
.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;
}
.process-div {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
display:flex;
flex-direction:column;
align-content:space-around;
justify-content:center;
align-items:center;
font-size:30px;
color:red;
}
.icon-img-box {
position:relative;
width:100%;
height:151px;
}
.icon-img-box > canvas {
height:149px;
width:149px;
}
</style>
</head>
<body>
<div id="container">
<div id="top-menu" class="btn-group">
<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>
<button type="button" id="invert" class="btn btn-default" onclick="invert(1,this)">反转色</button>
<button type="button" id="changeColorx" class="btn btn-default" onclick="changColor(1,this)">彩色对比</button>
<button type="button" class="btn btn-default" onclick="resetTool()">重置</button>
<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="生成" />
</div>
<div id="body-part">
<div id="dicom-continer">
</div>
<div id="dicom-list">
</div>
</div>
</div>
</body>
</html>