<!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="./js/hammer.js"></script>
<script src="./js/cornerstone.js"></script>
<script src="./js/cornerstoneMath.min.js"></script>
<script src="./js/cornerstoneWADOImageLoader.bundle.min.js"></script>
<script src="./js/cornerstoneWebImageLoader.min.js"></script>
<script src="./js/cornerstoneTools.js"></script>
<!-- https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js -->
<script src="./js/dicomParser.min.js"></script>
<script src="./js/jquery-1.12.2.min.js"></script>
<script src="./js/html2canvas.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: rgb(54, 54, 54);
/*height: 180px;
display: flex;
flex-direction: row;*/
border: 0px solid red;
/* overflow-x: hidden;
overflow-y: hidden; */
position: relative;
/* 确保下拉菜单相对于这个元素定位 */
}
#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 !important;
width: 149px !important;
}
/* 为图片设置过渡效果 */
.img-checkbox {
transition: transform 0.3s ease;
cursor: pointer;
}
/* 点击时的效果 */
.img-checkbox:active {
transform: scale(0.95);
opacity: 0.8;
}
.img-checkbox.active {
border: 1px solid rgb(73, 121, 243);
/* 添加边框 */
}
/* 下拉样式 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
list-style-type: none;
/* 去掉前面的点 */
display: none;
/* 默认隐藏 */
position: absolute;
background-color: #f9f9f9;
min-width: 61px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
/* 确保在最上层 */
padding: 5px;
/* 去掉内边距 */
margin: 0;
/* 去掉外边距 */
}
.dropdown-content a {
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(196, 213, 255);
}
.dropdown:hover .dropdown-content {
display: block;
/* 悬停显示下拉内容 */
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
/* 悬停时的按钮颜色 */
}
</style>
</head>
<body>
<div id="container">
<div id="top-menu">
<img title="放大镜" style="width: 35px;height: 35px; margin-left: 5px;" id="Magnify" class="img-checkbox"
onclick="switchAction('Magnify',1,this)" src="/static/放大镜.jpg" />
<img title="平移" style="width: 50px;height: 50px;" id="Pan" class="img-checkbox"
onclick="switchAction('Pan',1,this)" src="/static/平移.jpg" />
<img title="左键缩放" style="width: 50px;height: 50px;" id="Zoom" class="img-checkbox"
onclick="switchAction('Zoom',1,this)" src="/static/缩放.jpg" />
<img title="滚轮缩放" style="width: 50px;height: 50px;" id="ZoomMouseWheel" class="img-checkbox"
onclick="switchAction('ZoomMouseWheel',1,this)" src="/static/滚轮缩放.jpg" />
<img title="对比度" style="width: 50px;height: 50px;" id="Wwwc" class="img-checkbox"
onclick="switchAction('Wwwc',1,this)" src="/static/对比度.jpg" />
<img title="选区对比度" style="width: 50px;height: 50px;" id="WwwcRegion" class="img-checkbox"
onclick="switchAction('WwwcRegion',1,this)" src="/static/选区对比度.jpg" />
<img title="比例尺" style="width: 50px;height: 50px;" id="ScaleOverlay" class="img-checkbox"
onclick="switchAction('ScaleOverlay',1,this)" src="/static/比例尺.jpg" />
<img title="旋转" style="width: 50px;height: 50px;" id="Rotate" class="img-checkbox"
onclick="switchAction('Rotate',1,this)" src="/static/旋转.jpg" />
<img title="方向标记" style="width: 50px;height: 50px;" id="OrientationMarkers" class="img-checkbox"
onclick="switchAction('OrientationMarkers',1,this)" src="/static/方向标记.jpg" />
<img title="角度" style="width: 50px;height: 50px;" id="Angle" class="img-checkbox"
onclick="switchAction('Angle',1,this)" src="/static/角度.jpg" />
<img title="箭头注释" style="width: 50px;height: 50px;" id="ArrowAnnotate" class="img-checkbox"
onclick="switchAction('ArrowAnnotate',1,this)" src="/static/箭头注释.jpg" />
<img title="长宽尺" style="width: 50px;height: 50px;" id="Bidirectional" class="img-checkbox"
onclick="switchAction('Bidirectional',1,this)" src="/static/长宽尺.jpg" />
<img title="科布角" style="width: 50px;height: 50px;" id="CobbAngle" class="img-checkbox"
onclick="switchAction('CobbAngle',1,this)" src="/static/科布角.jpg" />
<img title="椭圆选区" style="width: 50px;height: 50px;" id="EllipticalRoi" class="img-checkbox"
onclick="switchAction('EllipticalRoi',1,this)" src="/static/椭圆选区.jpg" />
<img title="自由选区" style="width: 50px;height: 50px;" id="FreehandRoi" class="img-checkbox"
onclick="switchAction('FreehandRoi',1,this)" src="/static/自由选区.jpg" />
<img title="长度尺" style="width: 50px;height: 50px;" id="Length" class="img-checkbox"
onclick="switchAction('Length',1,this)" src="/static/长度尺.jpg" />
<img title="探针" style="width: 50px;height: 50px;" id="Probe" class="img-checkbox"
onclick="switchAction('Probe',1,this)" src="/static/探针.jpg" />
<img title="矩形选区" style="width: 50px;height: 50px;" id="RectangleRoi" class="img-checkbox"
onclick="switchAction('RectangleRoi',1,this)" src="/static/矩形选区.jpg" />
<img title="文本标记" style="width: 50px;height: 50px;" id="TextMarker" class="img-checkbox"
onclick="switchAction('TextMarker',1,this)" src="/static/箭头注释.jpg" />
<img title="左键翻页" style="width: 50px;height: 50px;" id="StackScroll" class="img-checkbox"
onclick="switchAction('StackScroll',1,this)" src="/static/左键翻页.jpg" />
<img title="滚轮翻页" style="width: 50px;height: 50px;" id="StackScrollMouseWheel" class="img-checkbox"
onclick="switchAction('StackScrollMouseWheel',1,this)" src="/static/鼠标翻页.jpg" />
<img title="反转色" style="width: 50px;height: 50px;" id="invert" class="img-checkbox" onclick="invert(1,this)"
src="/static/反转色.jpg" />
<img title="色彩对比" style="width: 50px;height: 50px;" id="changeColorx" class="img-checkbox"
onclick="changColor(1,this)" src="/static/色彩对比.jpg" />
<img title="截图" id="screenshot" style="width: 50px;height: 50px;" onclick="screenshotTool()"
class="img-checkbox" src="/static/相机.jpg" />
<img title="重置" id="reset" style="width: 50px;height: 50px;" onclick="resetTool()" class="img-checkbox"
src="/static/重置.jpg" />
<div class="dropdown">
<img style="width: 36px;height: 36px;" class="dropbtn" src="/static/布局2x.jpg" />
<ul class="dropdown-content">
<li><a data-value="1x1"><img src="/static/1.1.jpg" />1x1</a></li>
<li><a data-value="1x2"><img src="/static/1.2.jpg" />1x2</a></li>
<li><a data-value="2x1"><img src="/static/2.1.jpg" />2x1</a></li>
<li><a data-value="2x2"><img src="/static/2.2.jpg" />2x2</a></li>
<li><a data-value="2x3"><img src="/static/2.3.jpg" />2x3</a></li>
<li><a data-value="3x2"><img src="/static/3.2.jpg" />3x2</a></li>
<li><a data-value="3x3"><img src="/static/3.3.jpg" />3x3</a></li>
</ul>
</div>
<input style="display: none;" type="text" id='row-count' placeholder="行数" value='1' /> x <input
style="display: none;" type="text" id='column-count' placeholder="列数" value='1' /> <input
style="display: none;" type='button' onclick="doCreate()" value="生成" />
</div>
<div id="body-part">
<div id="dicom-continer">
</div>
<div id="dicom-list">
</div>
</div>
</div>
<script>
//url参数与请求
var methodStr = GetQueryString("method");
document.getElementById("screenshot").style.display = "none";
if (methodStr && methodStr == "PathologyView") {
document.getElementById("screenshot").style.display = "";
}
//获取下拉菜单的父元素
var dropdownMenu = document.querySelector('.dropdown-content');
dropdownMenu.addEventListener('click', function (event) {
var target = event.target;
while (target != dropdownMenu) {
if (target.tagName === 'A') {
var value = target.getAttribute('data-value');
var parts = value.split('x');
// 更新输入框的值
document.getElementById('row-count').value = parts[0].trim();
document.getElementById('column-count').value = parts[1].trim();
console.log('Clicked item value:', value);
doCreate();
break;
}
target = target.parentElement;
}
});
// 获取容器元素
var container = document.getElementById('top-menu');
var activeImg = null; // 存储当前激活的图片元素
container.addEventListener('click', function (event) {
var target = event.target;
//要排除的图片元素的id
var excludeIds = ['reset', 'screenshot'];
if (target.id && excludeIds.includes(target.id)) {
// 如果点击的是排除的图片，直接返回不执行任何操作
return;
}
// 检查点击的是否是图片元素
if (target.classList.contains('img-checkbox')) {
if (activeImg === target) {
// 如果当前点击的图片已经是激活状态，则移除边框
target.classList.remove('active');
activeImg = null; // 重置当前激活的图片引用
} else {
// 如果当前点击的图片不是激活状态
if (activeImg) {
// 移除之前激活的图片的边框
activeImg.classList.remove('active');
}
// 给当前点击的图片添加边框，并更新激活图片的引用
target.classList.add('active');
activeImg = target;
}
}
});
</script>
</body>
</html>