lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改影像功能以及增加影像界面刷新分检数据按钮

Browse Source
This commit is contained in:
lxd 2024-08-16 23:27:45 +08:00
parent 129030f8e2
commit 9e606cf009
8 changed files with 222 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/static/dicom/dicomViewPc1.html
View File

@ -82,10 +82,12 @@
#dicom-list {
background-color: black;
width: 150px;
height: 868px;
/*height: 100%;*/
display: flex;
/* overflow: auto; */
overflow-y: scroll;
flex-direction: column;
overflow: auto;
max-height:550px;
}
.btn {
@ -102,12 +104,15 @@
}*/
.series_img {
border: 0px solid green;
}
border: 1px solid black;
height:100%;
width:100%;
}
.series_img_active {
border: 1px solid green;
height: 100%;
width: 100%;
}
.border-red {
@ -296,10 +301,34 @@
display: flex;
flex-direction:column;
}
.around-info-right-bottom > .tag-item, around-info-right-top > .tag-item {
display: flex;
flex-direction: row-reverse;
}
.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>
@ -330,7 +359,7 @@
<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="多视窗" />
<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">

181
public/static/dicom/js/dicomViewPc.js
View File

@ -18,7 +18,8 @@ var stateData = {
imgIndex: 0,
element: {},
dicomInfo: {},
showMapping: new Map()
showMapping: new Map(),
processMapping: new Map() //进度条映射 key为序列索引，value为加载完成数量
}
/*切换工具*/
@ -71,7 +72,7 @@ function next(imgId) {
cornerstone.loadAndCacheImage(imgId).then(function (image) {
cornerstone.enable(stateData.element);
cornerstone.displayImage(stateData.element, image);
renderTagText(stateData.element,image)
renderTagText(stateData.element, image)
});
for (var i = 0; i < 10; i++) {
if (index + i == data.imageIds.length - 1) {
@ -397,6 +398,7 @@ function initConerstoneAndData() {
// load images and set the stack
cornerstone.loadImage(imageIds[0]).then((image) => {
updateProcess(stateData.imgIndex,"initConerstoneAndData")
initSlider(stateData.element);
cornerstone.displayImage(stateData.element, image)
cornerstoneTools.addStackStateManager(stateData.element, ['stack'])
@ -407,10 +409,10 @@ function initConerstoneAndData() {
//页面加载完成，执行初始化
$(document).ready(function () {
createElements(1, 1,true);
createElements(1, 1, true);
//激活获取到的用于图片加载的区域
stateData.element = document.getElementById('dicomImage_0_0');
stateData.showMapping.set('dicomImage_0_0',0);
stateData.showMapping.set('dicomImage_0_0', 0);
//cornerstone.enable(stateData.element);
initConerstone(stateData.element);
//初始化数据
@ -427,6 +429,7 @@ $(document).ready(function () {
setAllSliderValue();
setAllTagsValue();
});
setImgListParentHeight();
})
//初始化右侧图片列表
@ -437,10 +440,10 @@ function initImgList(data) {
if (stateData.imgIndex == i) {
className += "_active";
}
$("#dicom-list").append('<div style="height: 200px;" id="img_' + i + '" class="' + className + '" onclick="changeIndex(' + i + ')"> <img style=" width: 130px;height: 130px;" src="' + data.seriesList[i].thumbUrl + '"/> <h4 style="color: white; id="h_' + i + '" >"'+data.seriesList[i].SeriesDesc+'"</h4></div>');
//$("#dicom-list").append('<img id="img_' + i + '" onclick="changeIndex(' + i + ')" class="' + className + '" src="' + data.seriesList[i].thumbUrl + '"/>');
// $("#dicom-list").append('<h4 style="color: white; id="h_' + i + '" onclick="changeIndex(' + i + ')" >"'+data.seriesList[i].SeriesDesc+'"</h4>');
//$("#dicom-list").append('<img id="img_' + i + '" onclick="changeIndex(' + i + ')" class="' + className + '" src="' + data.seriesList[i].thumbUrl + '"/>');
//$("#dicom-list").append('<div class="icon-img-box" onclick="changeIndex(' + i + ')"><img id="img_' + i + '" class="' + className + '" src="' + data.seriesList[i].thumbUrl + '"/><div class="process-div" id="process-' + i + '"></div></div>');
//$("#dicom-list").append('<div class="icon-img-box" id="icon-img-box-'+i+'" onclick="changeIndex(' + i + ')"><img id="img_' + i + '" class="' + className + '"/><div class="process-div" id="process-' + i + '"></div></div>');
$("#dicom-list").append('<div class="icon-img-box ' + className + '" id="icon-img-box-' + i + '" onclick="changeIndex(' + i + ')"><div class="process-div" id="process-' + i + '"></div></div>');
}
}
@ -449,17 +452,22 @@ function changeIndex(i) {
if (stateData.imgIndex == i && stateData.showMapping.get(stateData.element.id) == i) {
return;
}
$("#img_" + stateData.imgIndex).removeClass("series_img_active");
$("#img_" + stateData.imgIndex).addClass("series_img")
$("#img_" + i).removeClass("series_img")
$("#img_" + i).addClass("series_img_active")
//$("#img_" + stateData.imgIndex).removeClass("series_img_active");
//$("#img_" + stateData.imgIndex).addClass("series_img")
//$("#img_" + i).removeClass("series_img")
//$("#img_" + i).addClass("series_img_active")
$("#icon-img-box-" + stateData.imgIndex).removeClass("series_img_active");
$("#icon-img-box-" + stateData.imgIndex).addClass("series_img")
$("#icon-img-box-" + i).removeClass("series_img")
$("#icon-img-box-" + i).addClass("series_img_active")
stateData.imgIndex = i
clearProcess(i)
initConerstone(stateData.element)
initConerstoneAndData();
stateData.showMapping.set(stateData.element.id, i);
}
//获取数据 Handler/Service.ashx idx: idx, no: localData.no, orgId: localData.orgId, method: "getSeries"
//获取数据
function initData() {
var idx = GetQueryString("idx");
var localStorage = window.localStorage;
@ -467,30 +475,19 @@ function initData() {
var data= JSON.parse(localData.do);
console.log("网页接受到数据"+data)
stateData.dicomInfo = data;
initImgList(stateData.dicomInfo);
//初始化进度
initProcess();
initImgList(stateData.dicomInfo);
//加载icon图片
convertDicom2Img();
//缓存文件
setTimeout(function () {
cacheImages();
}, 500)
initConerstoneAndData();
/* alert(localData.regid) */
/* $.getJSON("http://127.0.0.1:5000/get-data", {
},
function (data) {
if ("failed" == data.status) {
alert("获取数据失败")
}
else {
console.log(data)
stateData.dicomInfo = data;
initImgList(stateData.dicomInfo);
initConerstoneAndData();
}
}); */
}
//初始化滚动条
function initSlider(element) {
var idx = stateData.showMapping.get(element.id);
@ -502,7 +499,7 @@ function initSlider(element) {
index = data.currentImageIdIndex;
}
catch (err) {
console.log('err',err)
console.log('err', err)
}
$("#" + element.id + "-slider").attr("min", 1)
$("#" + element.id + "-slider").attr("max", size)
@ -541,7 +538,7 @@ function setSliderValue(imgId) {
var element = document.getElementById(imgId)
var data = cornerstoneTools.getToolState(element, "stack").data[0];
var index = data.currentImageIdIndex;
$("#" + imgId + "-slider").val(index+1);
$("#" + imgId + "-slider").val(index + 1);
}
function changeSlider(imgId, slider) {
@ -553,7 +550,7 @@ function changeSlider(imgId, slider) {
cornerstone.loadAndCacheImage(imgId).then(function (image) {
cornerstone.enable(stateData.element);
cornerstone.displayImage(stateData.element, image);
renderTagText(stateData.element,image)
renderTagText(stateData.element, image)
});
for (var i = 0; i < 10; i++) {
if (index + i == data.imageIds.length - 1) {
@ -584,13 +581,13 @@ function renderTagText(e, i) {
leftTop.empty();
leftTop.append("<div class='tag-item'>" + tagsInfo.patientId + "</div>");//体检编号
leftTop.append("<div class='tag-item'>姓名：" + stateData.dicomInfo.patientname + "</div>");//患者姓名
leftTop.append("<div class='tag-item'>" + tagsInfo.patientBirthDate + " " + (tagsInfo.patientGender == 'F' ? "男":"女") + "</div>");
leftTop.append("<div class='tag-item'>" + tagsInfo.patientBirthDate + " " + (tagsInfo.patientGender == 'F' ? "女" : "男") + "</div>");
leftTop.append("<div class='tag-item'>" + tagsInfo.imageDate + "</div>");
//左下角
var leftBottom = $("#" + boxId + "_left-bottom");
leftBottom.empty();
leftBottom.append("<div class='tag-item'>" + stateData.dicomInfo.hospital +"</div>");
leftBottom.append("<div class='tag-item'>" + stateData.dicomInfo.hospital + "</div>");
//右上角
var rightTop = $("#" + boxId + "_right-top");
rightTop.empty();
@ -605,7 +602,7 @@ function renderTagText(e, i) {
}
//创建视图元素
function createElements(rowCount, columnCount,isInit) {
function createElements(rowCount, columnCount, isInit) {
var container = document.getElementById('dicom-continer');
if (!isInit) {
clearChildren(container);
@ -620,10 +617,10 @@ function createElements(rowCount, columnCount,isInit) {
columnDom.setAttribute("id", 'dicom-img-box_' + i + '_' + j)
var imgId = 'dicomImage_' + i + '_' + j;
$(columnDom).append('<div class="dicom-img" id="' + imgId + '" onclick="changeElement(this)"></div>'
+'<div class="slider-container">'
+ '<i class="iconfont icon-fangxiangjiantou-shang icon-shang operator" id="' + imgId +'-last_btn" onclick="last(' + imgId +')"></i>'
+ '<input type="range" class="lcmf-range lcmf-range-date operator" value="0" id="' + imgId +'-slider" onchange="changeSlider(\'' + imgId + '\',this)" />'
+ '<i class="iconfont icon-fangxiangjiantou-xia icon-xia operator" id="' + imgId +'-next_btn" onclick="next(' + imgId +')"></i>'
+ '<div class="slider-container">'
+ '<i class="iconfont icon-fangxiangjiantou-shang icon-shang operator" id="' + imgId + '-last_btn" onclick="last(' + imgId + ')"></i>'
+ '<input type="range" class="lcmf-range lcmf-range-date operator" value="0" id="' + imgId + '-slider" onchange="changeSlider(\'' + imgId + '\',this)" />'
+ '<i class="iconfont icon-fangxiangjiantou-xia icon-xia operator" id="' + imgId + '-next_btn" onclick="next(' + imgId + ')"></i>'
+ '</div>');
rowDom.appendChild(columnDom);
}
@ -656,3 +653,101 @@ function doCreate() {
stateData.element = null;
stateData.showMapping = new Map()
}
function cacheImages() {
cacheImageIndex(0);
}
var cacheInterval = setInterval(
function () {
let size = stateData.dicomInfo.seriesList.length;
for (var i = 0; i < size; i++) {
let p = stateData.processMapping.get(i);
if (p >= stateData.dicomInfo.seriesList[i].instanceList.length) {
cacheImageIndex(i + 1)
}
}
}, 200
);
function cacheImageIndex(a) {
if (a >= stateData.dicomInfo.seriesList.length) {
clearInterval(cacheInterval);
return;
}
var series = stateData.dicomInfo.seriesList[a].instanceList
const scheme = 'wadouri'
const baseUrl = ''
const imageIds = series.map(seriesImage => `${scheme}:${baseUrl}${seriesImage.imageid}`)
for (var j = 0; j < imageIds.length; j++) {
cornerstone.loadImage(imageIds[j]).then(() => {
updateProcess(a, "cacheImages");
});
}
}
//初始化进度信息
function initProcess() {
console.log("初始化进度 stateData.dicomInfo", stateData.dicomInfo);
var size = stateData.dicomInfo.seriesList.length;
for (var i = 0; i < size; i++) {
stateData.processMapping.set(i, 0);
}
}
//更新进度信息
function updateProcess(i, fun) {
stateData.processMapping.set(i, stateData.processMapping.get(i) + 1)
renderProcess();
}
function clearProcess(i) {
return;
stateData.processMapping.set(i, 0)
}
//渲染进度
function renderProcess() {
var length = stateData.dicomInfo.seriesList.length;
for (var i = 0; i < length; i++) {
var totalSize = stateData.dicomInfo.seriesList[i].instanceList.length;
var currentSize = stateData.processMapping.get(i);
if (totalSize > currentSize) {
$("#process-" + i).show();
$("#process-" + i).text(currentSize + "/" + totalSize);
}
else {
$("#process-" + i).text("");
}
}
}
//生成图片
function convertDicom2Img() {
var length = stateData.dicomInfo.seriesList.length;
for (var i = 0; i < length; i++) {
loadDicomShowIcom(i);
}
}
//加载dicom文件，转换为base64格式
function loadDicomShowIcom(i) {
console.log("加载icon-" + i);
const scheme = 'wadouri'
const baseUrl = ''
const imageId = `${scheme}:${baseUrl}${stateData.dicomInfo.seriesList[i].instanceList[0].imageid}`
console.log("imgId:", imageId);
const imgElement = document.getElementById('icon-img-box-' + i);
cornerstone.loadAndCacheImage(imageId).then(function (image) {
cornerstone.enable(imgElement);
cornerstone.displayImage(imgElement, image);
});
}
function setImgListParentHeight() {
const height = $(window).height() - $("#top-menu").height()
$("#dicom-list").css("max-height", height + "px")
console.log("window的高度",$(window).height());
console.log("topMenu的高度", $("#top-menu").height());
console.log("dicom-list高度", $("#dicom-list").height());
}

3
src/api/applyregistration/applyform/index.ts
View File

@ -49,6 +49,9 @@ export interface DicomworklistVO {
startTime: string // 1
orgId: string // 1
registrant: string // 登记医生
examItemName:string
examItemCode:string
devname:string
}
// 申请登记记录 API

5
src/api/tblist/patientexamlist/index.ts
View File

@ -85,4 +85,9 @@ export const PatientexamlistApi = {
dicomDataSync: async () => {
return await request.get({ url: `/tblist/patientexamlist/dicomDataSync` })
},
// 分检数据刷新
dicomDataRefresh: async () => {
return await request.get({ url: `/tblist/patientexamlist/dicomDataRefresh` })
},
}

14
src/views/applyregistration/applyform/ApplyformForm.vue
View File

@ -130,6 +130,8 @@ const submitForm = async () => {
if (!fordevicemValue.value) {
await message.alert('请选择分检设备')
} else {
// 拿到设备名称
let devname = fordevicemValue.value.split('|')[0]
// 拿到设备类型
let devtype = fordevicemValue.value.split('|')[2]
// 拿到设备AET
@ -169,9 +171,12 @@ const submitForm = async () => {
modality: devtype,
scheduledA: devAET,
startDate: formatDate(datePart),
startTime: formatDate(datePart),
startTime: formatDate(timePart),
orgId: '',
registrant: ''
registrant: '',
examItemName:item.examItemName,
examItemCode:item.examItemCode,
devname:devname
}
array.push(worklistvo)
@ -212,7 +217,10 @@ const submitForm = async () => {
startDate: formatDate(datePart),
startTime: formatTime(timePart),
orgId: '',
registrant: ''
registrant: '',
examItemName:uprow.value.examItemName,
examItemCode:uprow.value.examItemCode,
devname:devname
})
console.log(worklistarrayvo.value)
await ApplyformApi.updateFJApplyform({

4
src/views/dicomForm/dicomViewForm.vue
View File

@ -175,7 +175,7 @@
<el-input
v-model="sj"
style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
:rows="5"
:rows="4"
type="textarea"
placeholder="影像所见"
/>
@ -184,7 +184,7 @@
<el-input
v-model="zdjl"
style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
:rows="5"
:rows="4"
type="textarea"
placeholder="影像结论"
/>

15
src/views/tblist/patientexamlist/index.vue
View File

@ -51,6 +51,7 @@
v-model="examDate_radio_value"
@change="examDate_radio_change"
>
<el-radio style="margin-right: 15px" :value="0">全部</el-radio>
<el-radio style="margin-right: 15px" :value="1">今天</el-radio>
<el-radio style="margin-right: 15px" :value="2">昨天</el-radio>
<el-radio style="margin-right: 15px" :value="3">三天内</el-radio>
@ -266,6 +267,7 @@
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button @click="dicomDataSync"><Icon icon="ep:refresh" class="mr-5px" /> 同步</el-button>
<el-button @click="dicomDataRefresh"><Icon icon="ep:refresh" class="mr-5px" /> 刷新</el-button>
</el-form-item>
</el-form>
</ContentWrap>
@ -473,7 +475,7 @@ function handleEdit(row) {
/** aaaaa **/
const examDate_picker = ref(null)
const examDate_radio = ref(null)
const examDate_radio_value = ref(1)
const examDate_radio_value = ref(3)
const examDate_radio_change = () => {
if ([1, 2, 3, 4].includes(examDate_radio_value.value)) {
@ -497,6 +499,11 @@ const examDate_radio_change = () => {
} else if (5 === examDate_radio_value.value) {
queryParams.examDate = []
}
else if(0===examDate_radio_value.value)
{
queryParams.examDate = []
handleQuery()
}
}
///转换时间格式
@ -527,6 +534,12 @@ const dicomDataSync = async () => {
await PatientexamlistApi.dicomDataSync()
message.success('同步成功')
}
// 分检数据刷新
const dicomDataRefresh=async ()=>
{
await PatientexamlistApi.dicomDataRefresh()
examDate_radio_change()
}
/** 搜索按钮操作 */
const handleQuery = () => {

6
src/views/tblist/patientexamlistultrasonic/index.vue
View File

@ -51,6 +51,7 @@
v-model="examDate_radio_value"
@change="examDate_radio_change"
>
<el-radio style="margin-right: 15px" :value="0">全部</el-radio>
<el-radio style="margin-right: 15px" :value="1">今天</el-radio>
<el-radio style="margin-right: 15px" :value="2">昨天</el-radio>
<el-radio style="margin-right: 15px" :value="3">三天内</el-radio>
@ -495,7 +496,12 @@ const examDate_radio_change = () => {
handleQuery()
} else if (5 === examDate_radio_value.value) {
queryParams.examDate = []
}else if(0 === examDate_radio_value.value)
{
queryParams.examDate = []
handleQuery()
}
}
///转换时间格式