<!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>