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

public/static/dicom/dicomViewPc1.html

@@ -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 {
@@ -100,14 +102,17 @@
             flex-grow: 1;
             height: 100%;
         }*/
-            
+
         .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 {
+        .around-info-right-bottom > .tag-item, around-info-right-top > .tag-item {
-                display: flex;
+            display: flex;
-                flex-direction: row-reverse;
+            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">

public/static/dicom/js/dicomViewPc.js

@@ -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('<img id="img_' + i + '" onclick="changeIndex(' + i + ')" class="' + className + '" src="' + data.seriesList[i].thumbUrl + '"/>');
-        $("#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('<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('<img id="img_' + i + '" onclick="changeIndex(' + i + ')" class="' + className + '"  src="' + data.seriesList[i].thumbUrl + '"/>');
+        //$("#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('<h4 style="color: white; id="h_' + i + '" onclick="changeIndex(' + i + ')" >"'+data.seriesList[i].SeriesDesc+'"</h4>');
+        $("#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,48 +452,42 @@ 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).removeClass("series_img_active");
-    $("#img_" + stateData.imgIndex).addClass("series_img")
+    //$("#img_" + stateData.imgIndex).addClass("series_img")
-    $("#img_" + i).removeClass("series_img")
+    //$("#img_" + i).removeClass("series_img")
-    $("#img_" + i).addClass("series_img_active")
+    //$("#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;
-    var localData = JSON.parse(localStorage.data); 
+    var localData = JSON.parse(localStorage.data);
     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">'
+                + '<div class="slider-container">'
-                + '<i class="iconfont icon-fangxiangjiantou-shang icon-shang operator" id="' + imgId +'-last_btn" onclick="last(' + imgId +')"></i>'
+                + '<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)" />'
+                + '<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>'
+                + '<i class="iconfont icon-fangxiangjiantou-xia icon-xia operator" id="' + imgId + '-next_btn" onclick="next(' + imgId + ')"></i>'
                 + '</div>');
             rowDom.appendChild(columnDom);
         }
@@ -655,4 +652,102 @@ function doCreate() {
     stateData.imgIndex = 0;
     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());
 }

src/api/applyregistration/applyform/index.ts

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

src/api/tblist/patientexamlist/index.ts

@@ -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` })
+    },
 }

src/views/applyregistration/applyform/ApplyformForm.vue

@@ -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({

src/views/dicomForm/dicomViewForm.vue

@@ -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="影像结论"
             />

src/views/tblist/patientexamlist/index.vue

@@ -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 = () => {

src/views/tblist/patientexamlistultrasonic/index.vue

@@ -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()
   }
+
 }
 
 ///转换时间格式