3326 lines
127 KiB
Vue
3326 lines
127 KiB
Vue
<template>
|
|
<div class="dicom-viewer-wrapper">
|
|
<div class="dicom-viewer-container" style="position:relative">
|
|
<div class="dicom-tools">
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:layout')}`" placement="bottom">
|
|
<div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
|
|
<div class="dropdown">
|
|
<div class="icon">
|
|
<svg-icon icon-class="layout" class="svg-icon" />
|
|
<i class="el-icon-arrow-down" style="color:#fff;" />
|
|
</div>
|
|
<!-- 布局 -->
|
|
<!-- <div class="text">{{ $t('trials:reading:button:layout') }}<i class="el-icon-caret-bottom" /></div> -->
|
|
<div class="dropdown-content layout-content">
|
|
<ul style="width:50px">
|
|
<li class="flex_row" @click.stop="changeLayout('A')">
|
|
<div class="layout_box_1_1">
|
|
A
|
|
</div>
|
|
</li>
|
|
<li class="flex_row" @click.stop="changeLayout('A|A')">
|
|
<div class="layout_box_1_1">
|
|
A
|
|
</div>
|
|
<div class="layout_box_1_1">
|
|
A
|
|
</div>
|
|
</li>
|
|
<li v-if="isReadingTaskViewInOrder === 1" class="flex_row" @click.stop="changeLayout('A|B')">
|
|
<div class="layout_box_1_1">
|
|
A
|
|
</div>
|
|
<div class="layout_box_1_1">
|
|
B
|
|
</div>
|
|
</li>
|
|
|
|
<li class="flex_column" @click.stop="changeLayout('A|A|A|A')">
|
|
|
|
<div style="flex:1;display: flex;width:100%;">
|
|
<div class="layout_box_1_2">
|
|
A
|
|
</div>
|
|
<div class="layout_box_1_2">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div style="flex:1;display: flex;width:100%;">
|
|
<div class="layout_box_1_2">
|
|
A
|
|
</div>
|
|
<div class="layout_box_1_2">
|
|
A
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:wwwc')}`" placement="bottom">
|
|
<div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
|
|
<div class="dropdown">
|
|
<div class="icon" data-tool="Wwwc" :class="[activeTool === 'Wwwc' ? 'tool_active' : '']"
|
|
@click.prevent="setToolActive('Wwwc', false)">
|
|
<svg-icon icon-class="reverse" class="svg-icon" />
|
|
<i class="el-icon-arrow-down" style="color:#fff;" />
|
|
</div>
|
|
<!-- 调窗 -->
|
|
<!-- <div class="text">{{ $t('trials:reading:button:wwwc') }}<i class="el-icon-caret-bottom" /></div> -->
|
|
<div class="dropdown-content">
|
|
<ul style="width:165px;">
|
|
|
|
<li v-for="item in wwwcArr" :key="item.label">
|
|
<a href="#" @click.prevent="setDicomCanvasWwwc(item)">
|
|
<div v-if="item.wc !== null"
|
|
style="display:flex;flex-direction: row;justify-content: space-between;">
|
|
<div>{{ item.label }}</div>
|
|
<div>{{ `${item.ww} / ${item.wc}` }}</div>
|
|
</div>
|
|
<div v-else style="text-align:left;">
|
|
{{ item.label }}
|
|
</div>
|
|
</a>
|
|
<!-- <div
|
|
v-if="item.val === 1"
|
|
class="divider"
|
|
>
|
|
W/L {{ $t('trials:reading:title:preset') }}
|
|
</div> -->
|
|
<el-divider v-if="item.val === 1" class="divider" content-position="center">{{ `
|
|
${$t('trials:reading:title:preset')}` }}</el-divider>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<!-- <div class="tool-wrapper">
|
|
|
|
<div
|
|
class="icon"
|
|
data-tool="WwwcRegion"
|
|
:class="[activeTool==='WwwcRegion'?'tool_active':'']"
|
|
|
|
@click.prevent="setToolActive('WwwcRegion',false)"
|
|
>
|
|
<svg-icon icon-class="wwwcRegion" class="svg-icon" />
|
|
</div>
|
|
<div class="text">区域调窗</div>
|
|
|
|
</div> -->
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:reverseColor')}`"
|
|
placement="bottom" v-if="AspectRatio >= 1">
|
|
<div class="tool-wrapper">
|
|
|
|
<div class="icon" :class="[activeTool === 'reversecolor' ? 'tool_active' : '']"
|
|
@click.prevent="toggleInvert">
|
|
<svg-icon icon-class="reversecolor" class="svg-icon" />
|
|
</div>
|
|
<!-- 反色 -->
|
|
<!-- <div class="text">{{ $t('trials:reading:button:reverseColor') }}</div> -->
|
|
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:zoom')}`" placement="bottom"
|
|
v-if="AspectRatio >= 1">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" :class="[activeTool === 'Zoom' ? 'tool_active' : '']" data-tool="Zoom"
|
|
@click.prevent="setToolActive('Zoom', false)">
|
|
<svg-icon icon-class="magnifier" class="svg-icon" />
|
|
</div>
|
|
<!-- 缩放 -->
|
|
<div class="text">{{ $t('trials:reading:button:zoom') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:move')}`" placement="bottom"
|
|
v-if="AspectRatio >= 1">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" :class="[activeTool === 'Pan' ? 'tool_active' : '']" data-tool="Pan"
|
|
@click.prevent="setToolActive('Pan', false)">
|
|
<svg-icon icon-class="move" class="svg-icon" />
|
|
</div>
|
|
<!-- 移动 -->
|
|
<div class="text">{{ $t('trials:reading:button:move') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:rotate')}`" placement="bottom">
|
|
<div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
|
|
<!-- @click.prevent="setToolActive('Rotate',false)" -->
|
|
<div class="dropdown">
|
|
<div class="icon" data-tool="Rotate" :class="[activeTool === 'Rotate' ? 'tool_active' : '']">
|
|
<svg-icon icon-class="rotate" class="svg-icon" />
|
|
<i class="el-icon-arrow-down" style="color:#fff;" />
|
|
</div>
|
|
<!-- 旋转 -->
|
|
<div class="text">{{ $t('trials:reading:button:rotate') }}<i class="el-icon-caret-bottom" /></div>
|
|
<div class="dropdown-content">
|
|
<ul style="width:100px;">
|
|
<li v-for="rotate in rotateArr" :key="rotate.label" style="text-align:left;">
|
|
<a href="#" @click.prevent="setDicomCanvasRotate(rotate.val)">{{ rotate.label }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark"
|
|
:content="fitType === 1 ? `${$t('trials:reading:button:fitWindow')}` : `${$t('trials:reading:button:fitImage')}`"
|
|
placement="bottom">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="fitToType(fitType === 1 ? 'fitToWindow' : 'fitToImage')">
|
|
<svg-icon v-if="fitType === 1" icon-class="fitToWindow" class="svg-icon" />
|
|
<svg-icon v-else icon-class="fitToImage" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ fitType === 1 ? $t('trials:reading:button:fitWindow') :
|
|
$t('trials:reading:button:fitImage')
|
|
}}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:imageIndexSync')}`"
|
|
placement="bottom" v-if="AspectRatio >= 1">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" :class="[isScrollSync ? 'tool_active' : '']" @click.prevent="setImageIndexSync">
|
|
<i v-if="isScrollSync" class="el-icon-lock svg-icon" />
|
|
<i v-else class="el-icon-unlock svg-icon" />
|
|
</div>
|
|
<!-- 同步 -->
|
|
<div class="text">{{ $t('trials:reading:button:imageIndexSync') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<!--
|
|
<div class="tool-wrapper">
|
|
<div
|
|
class="icon"
|
|
@click.prevent="fitToType('fitToImage')"
|
|
>
|
|
<svg-icon icon-class="fitToImage" class="svg-icon" />
|
|
</div>
|
|
<div class="text">适应图像</div>
|
|
</div> -->
|
|
<el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:screenShot')}`" placement="bottom"
|
|
v-if="AspectRatio >= 1">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="saveImage">
|
|
<svg-icon icon-class="image" class="svg-icon" />
|
|
</div>
|
|
<!-- 截屏 -->
|
|
<div class="text">{{ $t('trials:reading:button:screenShot') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-popover v-model="keySeriesPopoverVisible" placement="bottom" trigger="click"
|
|
popper-class="key-series-popper" @show="showKeySeriesPanel">
|
|
<ul class="key-series-list">
|
|
<li v-if="keyStack && keyStack.taskBlindName" class="key-series-header">
|
|
<div class="key-series-header-top">
|
|
<div class="key-series-header-title">
|
|
<span class="key-series-header-dot"></span>
|
|
<div class="key-series-task-name" :title="keyStack.taskBlindName">
|
|
{{ keyStack.taskBlindName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li v-if="keySeriesLoading" class="key-series-empty">
|
|
<i class="el-icon-loading"></i>
|
|
</li>
|
|
<li v-else-if="keySeries.length === 0" class="key-series-empty">
|
|
{{ $t('trials:reading:keySeries:noData') }}
|
|
</li>
|
|
<li v-for="(kf, idx) in keySeries" :key="idx" class="key-series-item"
|
|
@click.stop.prevent="jumpToKeySeries(kf)">
|
|
<div class="key-series-img">
|
|
<img v-if="kf.PicturePath" :src="`${OSSclientConfig.basePath}${kf.PicturePath}`" />
|
|
<svg-icon v-else icon-class="image" class="svg-icon default-icon" />
|
|
</div>
|
|
<div class="key-series-info">
|
|
<div v-if="kf.MarkName" class="key-series-meta">
|
|
<div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div>
|
|
<div class="key-series-uid" :title="kf.MarkName">
|
|
{{ kf.MarkName }}
|
|
</div>
|
|
</div>
|
|
<div class="key-series-meta">
|
|
<div class="key-series-label">{{ $t('trials:reading:keySeries:sopUid') }}</div>
|
|
<div class="key-series-uid" :title="kf.SopInstanceUid">
|
|
{{ kf.SopInstanceUid }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="key-series-star">
|
|
<svg-icon icon-class="star" class="svg-icon" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div slot="reference" class="tool-wrapper">
|
|
<div class="icon" :title="$t('trials:reading:button:keySeries')">
|
|
<i class="el-icon-star-off svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:keySeries') }}</div>
|
|
</div>
|
|
</el-popover>
|
|
|
|
<div v-for="tool in measuredTools" :key="tool.toolName">
|
|
<el-tooltip class="item" effect="dark" placement="bottom">
|
|
<div slot="content">
|
|
<div v-if="tool.disabledReason">
|
|
<h4 style="margin:0;padding-bottom:2px;">{{ tool.text }}</h4>
|
|
<br>{{ tool.disabledReason }}
|
|
</div>
|
|
<div v-else>{{ tool.text }}</div>
|
|
|
|
</div>
|
|
<div class="tool-wrapper">
|
|
<div class="icon" :class="[activeTool === tool.toolName ? 'tool_active' : '']"
|
|
:style="{ cursor: tool.isDisabled ? 'not-allowed' : 'pointer' }" :data-tool="tool.toolName"
|
|
@click.prevent="setToolActive(tool.toolName, true, $event)" @mouseenter="enter($event, tool.toolName)">
|
|
<svg-icon :icon-class="tool.icon" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ tool.text }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- <div v-else class="tool-wrapper">
|
|
<div
|
|
class="icon"
|
|
:class="[activeTool===tool.toolName?'tool_active':'']"
|
|
:style="{cursor:tool.isDisabled?'not-allowed':'pointer'}"
|
|
:data-tool="tool.toolName"
|
|
@click.prevent="setToolActive(tool.toolName,true,$event)"
|
|
@mouseenter="enter($event,tool.toolName)"
|
|
>
|
|
<svg-icon :icon-class="tool.icon" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ tool.text }}</div>
|
|
</div> -->
|
|
</div>
|
|
<el-tooltip v-if="CriterionType === 2 && studyList.length > 0" class="item" effect="dark"
|
|
:content="$t('trials:lugano:button:fusion')" placement="bottom">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="handleFusion">
|
|
<svg-icon icon-class="fusion" class="svg-icon" />
|
|
</div>
|
|
<!-- 截屏 -->
|
|
<div class="text">{{ $t('trials:lugano:button:fusion') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<div class="tool-frame">
|
|
<!-- 第一帧 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:firstframe')" placement="bottom">
|
|
<div class="icon" @click.prevent="scrollPage(-99999)">
|
|
<svg-icon icon-class="firstframe" class="svg-icon" />
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- 上一帧 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:previousframe')" placement="bottom">
|
|
<div class="icon" @click.prevent="scrollPage(-1)">
|
|
<svg-icon icon-class="previousframe" class="svg-icon" />
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- 播放/暂停 -->
|
|
<el-tooltip class="item" effect="dark"
|
|
:content="clipPlaying ? $t('trials:dicom-show:stop') : $t('trials:dicom-show:play')" placement="bottom">
|
|
<div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
|
|
<svg-icon icon-class="stop" class="svg-icon" />
|
|
</div>
|
|
<div v-else class="icon" @click.prevent="toggleClipPlay(true)">
|
|
<svg-icon icon-class="play" class="svg-icon" />
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- 下一帧 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:nextframe')" placement="bottom">
|
|
<div class="icon" @click.prevent="scrollPage(1)">
|
|
<svg-icon icon-class="nextframe" class="svg-icon" />
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- 最后一帧 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:lastframe')" placement="bottom">
|
|
<div class="icon" @click.prevent="scrollPage(99999)">
|
|
<svg-icon icon-class="lastframe" class="svg-icon" />
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:speed')" placement="bottom">
|
|
<select v-model="fps" class="select-wrapper" :disabled="clipPlaying" @change="setDicomCanvasfps($event)">
|
|
<!-- 默认值 -->
|
|
<!-- <option :value="5">{{ $t('trials:dicom-show:default') }}</option> -->
|
|
<option :value="5">5</option>
|
|
<option :value="10">10</option>
|
|
<option :value="15">15</option>
|
|
<option :value="20">20</option>
|
|
<option :value="25">25</option>
|
|
<option :value="30">30</option>
|
|
</select>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:reset')" placement="bottom">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="resetViewport">
|
|
<svg-icon icon-class="refresh" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:reset') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<div :title="$t('trials:reading:button:more')" :class="['tool-item']" @click.stop="showPanel($event)"
|
|
@mouseleave="toolMouseout" v-if="AspectRatio < 1">
|
|
<div class="dropdown">
|
|
<div class="icon" data-tool="more">
|
|
<svg-icon icon-class="more" class="svg-icon" style="color:#ddd;font-size: 20px;" />
|
|
<i class="el-icon-arrow-down" style="color:#fff;" />
|
|
</div>
|
|
<div class="dropdown-content">
|
|
<!--v-if="readingTaskState < 2"-->
|
|
<ul style="width:100px;">
|
|
<!--反色-->
|
|
<li style="text-align:left;" :class="[activeTool === 'reversecolor' ? 'tool_active' : '']">
|
|
<a href="#" @click.prevent="toggleInvert">
|
|
<svg-icon icon-class="reversecolor" class="svg-icon" style="margin-right: 5px;" />
|
|
{{ $t('trials:reading:button:reverseColor') }}
|
|
</a>
|
|
</li>
|
|
<!--缩放-->
|
|
<li style="text-align:left;" :class="[activeTool === 'Zoom' ? 'tool_active' : '']" data-tool="Zoom">
|
|
<a href="#" @click.prevent="setToolActive('Zoom', false)">
|
|
<svg-icon icon-class="magnifier" class="svg-icon" style="margin-right: 5px;" />
|
|
{{ $t('trials:reading:button:zoom') }}
|
|
</a>
|
|
</li>
|
|
<!--移动-->
|
|
<li style="text-align:left;" :class="[activeTool === 'Pan' ? 'tool_active' : '']" data-tool="Pan">
|
|
<a href="#" @click.prevent="setToolActive('Pan', false)">
|
|
<svg-icon icon-class="move" class="svg-icon" style="margin-right: 5px;" />
|
|
{{ $t('trials:reading:button:move') }}
|
|
</a>
|
|
</li>
|
|
<!--同步-->
|
|
<li style="text-align:left;" :class="[isScrollSync ? 'tool_active' : '']">
|
|
<a href="#" @click.prevent="setImageIndexSync">
|
|
<i v-if="isScrollSync" class="el-icon-lock svg-icon" style="margin-right: 5px;" />
|
|
<i v-else class="el-icon-unlock svg-icon" style="margin-right: 5px;" />
|
|
{{ $t('trials:reading:button:imageIndexSync') }}
|
|
</a>
|
|
</li>
|
|
<!--截图-->
|
|
<li style="text-align:left;">
|
|
<a href="#" @click.prevent="saveImage">
|
|
<svg-icon icon-class="image" class="svg-icon" style="margin-right: 5px;" />
|
|
{{ $t('trials:reading:button:screenShot') }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-tooltip v-if="trialCriterion.ImageUploadEnum > 0 && currentReadingTaskState < 2" v-hasPermi="['role:ir']"
|
|
class="item" effect="dark" :content="$t('trials:reading:button:upload')" placement="bottom">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="openUploadImage('upload')">
|
|
<i class="el-icon-upload2 svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:upload') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip v-if="trialCriterion.ImageDownloadEnum > 0" v-hasPermi="[
|
|
'role:ir',
|
|
'role:mim',
|
|
'role:mc',
|
|
'role:pm',
|
|
'role:apm',
|
|
'role:ea',
|
|
'role:qa',
|
|
]" class="item" effect="dark" :content="$t('trials:reading:button:download')" placement="bottom">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="openUploadImage('download')">
|
|
<i class="el-icon-download svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:download') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<div style="margin-left:auto;">
|
|
<div style="padding:5px;display: flex;">
|
|
<!-- 手册 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:handbooks')" placement="bottom"
|
|
v-if="(isExistsManual || isHaveKeyFile) && currentReadingTaskState < 2">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="previewManuals(false)">
|
|
<svg-icon icon-class="constitution" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:handbooks') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- 临床数据 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')"
|
|
placement="bottom" v-if="isExistsClinicalData">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="previewCD">
|
|
<svg-icon icon-class="documentation" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:clinicalData') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
<!-- 个性化配置 -->
|
|
<el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:customCfg')" placement="bottom">
|
|
<div class="tool-wrapper">
|
|
<div class="icon" @click.prevent="previewConfig">
|
|
<svg-icon icon-class="individuation" class="svg-icon" />
|
|
</div>
|
|
<div class="text">{{ $t('trials:reading:button:customCfg') }}</div>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="dicom-viewers">
|
|
<div ref="container" class="viewer-container"
|
|
:class="['box', `box_${AspectRatio < 1 ? layoutCol : layoutRow}_${AspectRatio < 1 ? layoutRow : layoutCol}`]">
|
|
<div v-for="i in maxCanvas" :key="i" :class="['item', i - 1 === currentDicomCanvasIndex ? 'item_active' : '']"
|
|
:data-index="i - 1" :style="i - 1 === currentDicomCanvasIndex ? cornerstoneStyle : {}"
|
|
@click="activateDicomCanvas(i - 1)">
|
|
<dicom-canvas v-if="canvasW" :ref="`dicomCanvas${i - 1}`"
|
|
:style="{ width: fullScreenIndex === i - 1 ? fullScreenWidth : canvasW, height: fullScreenIndex === i - 1 ? fullScreenHeight : canvasH }"
|
|
:canvas-index="i - 1" :is-active="i - 1 === currentDicomCanvasIndex" :is-scroll-sync="isScrollSync"
|
|
:is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
:is-reading-task-view-in-order="isReadingTaskViewInOrder"
|
|
:current-dicom-canvas-index="currentDicomCanvasIndex" :custom-wwc-tpl="customWwcTpl"
|
|
:data-canvas-uid="`dicomCanvas${i - 1}`" @setCornerstoneStyle="setCornerstoneStyle(i - 1)"
|
|
@setMeasureData="setMeasureData" @modifyMeasureData="modifyMeasureData" @scrollSync="scrollSync"
|
|
@selectViewCanvas="selectViewCanvas" />
|
|
</div>
|
|
</div>
|
|
<div ref="form-container" :class="{ 'form-container': true, listHide: !listShow }">
|
|
<div class="list_btn" @click.stop="clickShow"
|
|
:title="listShow ? $t('reading:dicom:dicom-list:hiden') : $t('reading:dicom:dicom-list:show')">
|
|
<i :class="listShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
|
|
</div>
|
|
<transition name="listBox">
|
|
<div class="form-wrapper" v-show="listShow">
|
|
<RecistBMQuestionList v-if="CriterionType === 17" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<IRecistQuestionList v-else-if="CriterionType === 3" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<PCWGQuestionList v-else-if="CriterionType === 10" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<LuganoQuestionList v-else-if="CriterionType === 2" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<LuganoWithoutPETQuestionList v-else-if="CriterionType === 18" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<RecistQuestionList v-else-if="CriterionType === 1" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
|
|
<IVUSList v-else-if="CriterionType === 19" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<OCTList v-else-if="CriterionType === 20" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<MRIPDFF v-else-if="CriterionType === 21" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<MRIPDFFAdvance v-else-if="CriterionType === 22" ref="measurementList"
|
|
:question-form-change-state="questionFormChangeState" :question-form-change-num="questionFormChangeNum"
|
|
:is-show="isShow" :is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@handleReadingChart="handleReadingChart" />
|
|
<h2 v-else style="color:#ddd">
|
|
Developing...
|
|
</h2>
|
|
<div v-if="iseCRFShowInDicomReading && currentReadingTaskState < 2" v-show="listShow" class="form-footer">
|
|
<el-button type="primary" size="small" @click="skipTask">
|
|
<!-- 跳过 -->
|
|
{{ $t('trials:readingReport:button:skip') }}
|
|
</el-button>
|
|
<el-button type="primary" size="small" :loading="submitLoading" :disabled="submitLoading"
|
|
@click="submit">
|
|
<!-- 提交 -->
|
|
{{ $t('common:button:submit') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
</transition>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div v-if="petct.visible" class="petct_wrapper">
|
|
<PetCt
|
|
:is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
@close="petct.visible = false"
|
|
/>
|
|
</div> -->
|
|
</div>
|
|
|
|
<el-dialog v-if="customWwc.visible" :visible.sync="customWwc.visible" :close-on-click-modal="false"
|
|
:title="customWwc.title" width="400px" custom-class="base-dialog-wrapper">
|
|
<CustomWwwcForm :ww="activeCanvasWW" :wc="activeCanvasWC" @close="customWwc.visible = false" @setWwwc="setWwwc" />
|
|
</el-dialog>
|
|
|
|
<el-dialog v-if="personalConfigDialog.visible" :visible.sync="personalConfigDialog.visible"
|
|
:close-on-click-modal="false" :title="personalConfigDialog.title" width="600px">
|
|
<el-tabs v-model="activeName" class="personal_config">
|
|
<!-- 热键 -->
|
|
<el-tab-pane :label="$t('trials:reading:tab:hotkeys')" name="1">
|
|
<Hotkeys v-if="activeName === '1'" :reading-tool="0" @reset="resetHotkeyList" />
|
|
</el-tab-pane>
|
|
<!-- W/L模板 -->
|
|
<el-tab-pane :label="$t('trials:reading:tab:wlTemplate')" name="2">
|
|
<WL v-if="activeName === '2'" @getWwcTpl="getWwcTpl" />
|
|
</el-tab-pane>
|
|
<!-- 其他 -->
|
|
<el-tab-pane :label="$t('trials:reading:tab:others')" name="3">
|
|
<Others v-if="activeName === '3'" :imageToolType="1" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
</el-dialog>
|
|
|
|
<el-dialog v-if="manualsDialog.visible" :visible.sync="manualsDialog.visible"
|
|
:custom-class="isFullscreen ? 'manuals-full-dialog-container' : 'manuals-dialog-container'" :show-close="false"
|
|
:close-on-click-modal="false" :fullscreen="isFullscreen">
|
|
<span slot="title" class="dialog-footer">
|
|
<!-- 手册 -->
|
|
<span>{{ $t('trials:reading:button:handbooks') }}</span>
|
|
<span style="position: absolute;right: 20px;font-size: 20px;">
|
|
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
|
style="margin-right:10px;cursor: pointer;" @click="isFullscreen = !isFullscreen" />
|
|
<svg-icon icon-class="close" style="cursor: pointer;" @click="manualsDialog.visible = false" />
|
|
</span>
|
|
</span>
|
|
<div style="height: 100%;margin:0;">
|
|
<Manuals :trial-id="trialId" :justKeyDoc="manualsDialog.justKeyDoc" />
|
|
<div slot="footer" style="text-align:right;" v-if="openManuals && !ManualsClose">
|
|
<!-- 确认 -->
|
|
<el-button type="primary" size="mini" :loading="keyDocSubmitting" :disabled="keyDocSubmitting"
|
|
@click="handleSubmitKeyDoc">
|
|
{{ $t('common:button:confirm') }}</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
<el-dialog v-if="fusionSeries.visible" :visible.sync="fusionSeries.visible" :close-on-click-modal="false"
|
|
:title="$t('trials:lugano:dialogTitle:fusion')" width="850px">
|
|
<el-form ref="fusionForm" :model="fusionForm" label-width="120px" label-position="left">
|
|
<!-- 任务名称 -->
|
|
<el-form-item :label="$t('trials:lugano:fusionDialog:label:taskBlindName')" prop="taskBlindName">
|
|
<el-input v-model="fusionForm.taskBlindName" :disabled="true" style="width:200px" />
|
|
</el-form-item>
|
|
<!-- 检查 -->
|
|
<el-form-item :label="$t('trials:lugano:fusionDialog:label:study')" prop="studyID" :rules="[
|
|
{ required: true, message: $t('common:ruleMessage:select'), trigger: 'blur' }
|
|
]">
|
|
<el-select v-model="fusionForm.studyID" clearable @change="handleStudyIdChange">
|
|
<el-option v-for="item in studyList" :key="item.StudyId" :label="item.StudyCode" :value="item.StudyId" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 融合图像 -->
|
|
<label style="color: #dfdfdf;line-height: 36px;vertical-align: middle;font-size: 14px;">{{
|
|
$t('trials:lugano:fusionDialog:label:fusionImages') }}</label>
|
|
<div style="display: flex;flex-direction: row;justify-content: space-between;margin-bottom:10px;"
|
|
class="series-table">
|
|
|
|
<div style="border: 1px solid #5e5e5e;border-radius: 5px;padding: 0 10px;">
|
|
<!-- CT/MRI序列 -->
|
|
<h3 style="color:#ddd">{{ $t('trials:lugano:fusionDialog:label:ctSeries') }}</h3>
|
|
<el-table ref="ctSeries" :data="ctSeries" :show-header="false" style="width: 380px" size="mini" height="300"
|
|
:default-sort="{ prop: 'instanceCount', order: 'descending' }" @selection-change="handleCTSelectionChange"
|
|
@select="handleCTSelect">
|
|
|
|
<el-table-column type="selection" width="30" />
|
|
<el-table-column label="" width="100">
|
|
<template slot-scope="scope">
|
|
<el-image style="width: 60px; height: 60px" :src="scope.row.previewImageUrl" fit="fit"
|
|
crossorigin="anonymous" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="" min-width="50" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<div>#{{ scope.row.seriesNumber }} </div>
|
|
<div>{{ scope.row.modality }}: {{ scope.row.instanceCount }} images T: {{
|
|
parseFloat(scope.row.sliceThickness).toFixed(digitPlaces) }}</div>
|
|
<div>{{ scope.row.description }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
</div>
|
|
|
|
<div style="border: 1px solid #5e5e5e;border-radius: 5px;padding: 0 10px;">
|
|
<!-- PET序列 -->
|
|
<h3 style="color:#ddd">{{ $t('trials:lugano:fusionDialog:label:ptSeries') }}</h3>
|
|
<el-table ref="petSeries" :data="petSeries" :show-header="false" style="width: 380px" size="mini"
|
|
height="300" @selection-change="handlePTSelectionChange" @select="handlePTSelect">
|
|
<el-table-column type="selection" width="30" />
|
|
<el-table-column label="" width="100">
|
|
<template slot-scope="scope">
|
|
<el-image style="width: 60px; height: 60px" :src="scope.row.previewImageUrl" fit="fit"
|
|
crossorigin="anonymous" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="" min-width="50" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<div>#{{ scope.row.seriesNumber }} </div>
|
|
<div>{{ scope.row.modality }}: {{ scope.row.instanceCount }} images T: {{
|
|
parseFloat(scope.row.sliceThickness).toFixed(digitPlaces) }}</div>
|
|
<div>{{ scope.row.description }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<el-form-item style="text-align:right;">
|
|
<!-- 取消 -->
|
|
<el-button size="mini" @click="fusionSeries.visible = false">{{ $t('common:button:cancel') }}</el-button>
|
|
<!-- 确认 -->
|
|
<el-button type="primary" size="mini" :loading="fusionSubmitLoading" :disabled="fusionSubmitLoading"
|
|
@click="handleSubmitFusionSeries">
|
|
{{ $t('common:button:confirm') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
<upload-dicom-and-nonedicom v-if="uploadImageVisible" :subject-id="uploadSubjectId"
|
|
:subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible"
|
|
:visit-task-id="taskId" :is-reading-task-view-in-order="isReadingTaskViewInOrder" :isReading="true" />
|
|
<download-dicom-and-nonedicom v-if="downloadImageVisible" :subject-id="uploadSubjectId"
|
|
:subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
|
|
:visible.sync="downloadImageVisible" :isReading="true" />
|
|
<!-- 签名框 -->
|
|
<el-dialog v-if="signVisible" :visible.sync="signVisible" :close-on-click-modal="false" width="600px"
|
|
custom-class="base-dialog-wrapper">
|
|
<div slot="title">
|
|
<span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
|
|
<span style="font-size:12px;margin-left:5px;user-select: text !important;">{{
|
|
`(${$t('common:label:sign')}${currentUser})` }}</span>
|
|
</div>
|
|
<SignForm ref="signForm" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as cornerstone from 'cornerstone-core'
|
|
import * as cornerstoneMath from 'cornerstone-math'
|
|
import * as cornerstoneTools from 'cornerstone-tools'
|
|
import Hammer from 'hammerjs'
|
|
cornerstoneTools.external.cornerstone = cornerstone
|
|
cornerstoneTools.external.Hammer = Hammer
|
|
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
|
|
import { getDoctorShortcutKey, getUserWLTemplateList } from '@/api/user'
|
|
import { mapGetters } from 'vuex'
|
|
import store from '@/store'
|
|
import { getToken } from '@/utils/auth'
|
|
// import DicomCanvas from './DicomCanvas'
|
|
// import PetCt from './Fusion/PetCt'
|
|
import DicomCanvas from '@/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue'
|
|
import RecistQuestionList from './Recist/QuestionList'
|
|
import RecistBMQuestionList from './RecistBM/QuestionList'
|
|
import IRecistQuestionList from './IRecist/QuestionList'
|
|
import PCWGQuestionList from './PCWG/QuestionList'
|
|
import LuganoQuestionList from './Lugano/QuestionList'
|
|
import LuganoWithoutPETQuestionList from './LuganoWithoutPET/QuestionList'
|
|
import IVUSList from './IVUS/QuestionList'
|
|
import OCTList from './OCT/QuestionList'
|
|
import MRIPDFF from './MRIPDFF/QuestionList'
|
|
import MRIPDFFAdvance from './MRIPDFFAdvance/QuestionList'
|
|
import CustomWwwcForm from './CustomWwwcForm'
|
|
import Manuals from './Manuals'
|
|
import Hotkeys from './Hotkeys'
|
|
import WL from './WL'
|
|
import Others from './Others'
|
|
import DicomEvent from './DicomEvent'
|
|
import html2canvas from 'html2canvas'
|
|
import uploadDicomAndNonedicom from '@/components/uploadDicomAndNonedicom'
|
|
import downloadDicomAndNonedicom from '@/components/downloadDicomAndNonedicom'
|
|
import SignForm from '@/views/trials/components/newSignForm'
|
|
import { getCriterionReadingInfo, verifyVisitTaskQuestions, submitDicomVisitTask, setReadKeyFile } from '@/api/trials'
|
|
import { setSkipReadingCache } from '@/api/reading'
|
|
import { getMarkList } from '@/api/reading'
|
|
import { getAutoCutNextTask } from '@/api/user'
|
|
import const_ from '@/const/sign-code'
|
|
import { changeURLStatic } from '@/utils/history.js'
|
|
import SystemInfo from "@/utils/systemInfo";
|
|
import md5 from 'js-md5'
|
|
export default {
|
|
name: 'DicomViewer',
|
|
components: {
|
|
// PetCt,
|
|
DicomCanvas,
|
|
CustomWwwcForm,
|
|
Manuals,
|
|
Hotkeys,
|
|
WL,
|
|
Others,
|
|
RecistQuestionList,
|
|
PCWGQuestionList,
|
|
RecistBMQuestionList,
|
|
IRecistQuestionList,
|
|
LuganoQuestionList,
|
|
LuganoWithoutPETQuestionList,
|
|
IVUSList,
|
|
OCTList,
|
|
MRIPDFF,
|
|
MRIPDFFAdvance,
|
|
'download-dicom-and-nonedicom': downloadDicomAndNonedicom,
|
|
'upload-dicom-and-nonedicom': uploadDicomAndNonedicom,
|
|
SignForm
|
|
},
|
|
props: {
|
|
isShow: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isExistsClinicalData: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isExistsNoDicomFile: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isReadingShowSubjectInfo: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isReadingTaskViewInOrder: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isExistsManual: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isReadKeyFile: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isHaveKeyFile: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
iseCRFShowInDicomReading: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
questionFormChangeState: {
|
|
type: Boolean,
|
|
default() {
|
|
return false
|
|
}
|
|
},
|
|
questionFormChangeNum: {
|
|
type: Number,
|
|
default() {
|
|
return 0
|
|
}
|
|
},
|
|
studyShow: {
|
|
type: Boolean,
|
|
default() {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
cornerstoneStyle: {},
|
|
layouts: [
|
|
{ index: 0, row: 1, col: 1, name: 'A' },
|
|
{ index: 1, row: 1, col: 2, name: 'A|A' },
|
|
{ index: 2, row: 1, col: 2, name: 'A|B' },
|
|
{ index: 3, row: 2, col: 2, name: 'A|A|A|A' }
|
|
// { index: 2, row: 2, col: 1 },
|
|
// { index: 3, row: 2, col: 2 }
|
|
],
|
|
rotateArr: [
|
|
{ label: this.$t('trials:reading:button:rotateDefault'), val: 1 }, // 默认值
|
|
{ label: this.$t('trials:reading:button:rotateVertical'), val: 2 }, // 垂直翻转
|
|
{ label: this.$t('trials:reading:button:rotateHorizontal'), val: 3 }, // 水平翻转
|
|
{ label: this.$t('trials:reading:button:rotateTurnLeft'), val: 4 }, // 左转90度
|
|
{ label: this.$t('trials:reading:button:rotateTurnRight'), val: 5 }// 右转90度
|
|
],
|
|
maxCanvas: 1,
|
|
layoutRow: 1,
|
|
layoutCol: 1,
|
|
currentDicomCanvasIndex: 0,
|
|
currentDicomCanvas: {
|
|
toolState: {
|
|
clipPlaying: false
|
|
}
|
|
},
|
|
colormapsList: [],
|
|
rotateList: [],
|
|
colorList: [],
|
|
wwwcList: [],
|
|
canvasW: null,
|
|
canvasH: null,
|
|
activeTool: '',
|
|
CriterionType: 0,
|
|
measuredTools: [
|
|
// 直径测量
|
|
{ toolName: 'Length', text: this.$t('trials:reading:button:length'), icon: 'length', isDisabled: false, disabledReason: '' },
|
|
// 长短径测量
|
|
{ toolName: 'Bidirectional', text: this.$t('trials:reading:button:bidirectional'), icon: 'bidirection', isDisabled: false, disabledReason: '' },
|
|
// 矩形工具
|
|
{ toolName: 'RectangleRoi', text: this.$t('trials:reading:button:rectangle'), icon: 'rectangle', isDisabled: false, disabledReason: '' },
|
|
// 箭头工具
|
|
{ toolName: 'ArrowAnnotate', text: this.$t('trials:reading:button:arrowAnnotate'), icon: 'arrow', isDisabled: false, disabledReason: '' }
|
|
|
|
],
|
|
fitType: 0,
|
|
isDisabledTool: false,
|
|
canvasObj: {},
|
|
wwwcArr: [],
|
|
defaultWwwc: [
|
|
{ label: this.$t('trials:reading:button:wwwcDefault'), val: -1, ww: null, wc: null }, // 默认值
|
|
{ label: this.$t('trials:reading:button:wwwcCustom'), val: 0, ww: null, wc: null }, // 自定义
|
|
{ label: this.$t('trials:reading:button:wwwcRegion'), val: 1, ww: null, wc: null }, // 区域窗宽
|
|
{ label: 'CT Brain', wc: 40, ww: 80 },
|
|
{ label: 'CT Lungs', wc: -400, ww: 1500 },
|
|
{ label: 'CT Abdomen', wc: 60, ww: 400 },
|
|
{ label: 'CT Liver', wc: 40, ww: 400 },
|
|
{ label: 'CT Bone', wc: 300, ww: 1500 },
|
|
{ label: 'CT Bone1', wc: 0, ww: 0 }
|
|
|
|
],
|
|
activeSeries: {},
|
|
seriesStack: [],
|
|
trialId: '',
|
|
isScrollSync: false,
|
|
imageIndexSync: {
|
|
sourceCanvas: '',
|
|
targetCanvas: []
|
|
},
|
|
isFirstRender: false,
|
|
customWwc: { visible: false, title: null }, // 自定义调窗
|
|
personalConfigDialog: { visible: false, title: this.$t('trials:reading:button:customCfg') }, // 个性化配置
|
|
layout: '',
|
|
isFirstNotLinked: false,
|
|
hotKeyList: [],
|
|
activeName: '1',
|
|
customWwcTpl: [],
|
|
isFullscreen: false,
|
|
manualsDialog: { visible: false, justKeyDoc: false },
|
|
petct: { visible: false },
|
|
fusionSeries: { visible: false },
|
|
fusionForm: {
|
|
studyID: '',
|
|
visitTaskId: '',
|
|
readingTaskState: 2,
|
|
taskBlindName: '',
|
|
subjectCode: '',
|
|
isBaseLineTask: null,
|
|
isCurrentTask: null
|
|
},
|
|
ctSeriesInfo: {},
|
|
petSeriesInfo: {},
|
|
ctSeries: [],
|
|
petSeries: [],
|
|
petctWindow: null,
|
|
studyList: [],
|
|
digitPlaces: 2,
|
|
activeCanvasWW: null,
|
|
activeCanvasWC: null,
|
|
activeTaskInfo: {},
|
|
clipPlaying: false,
|
|
fps: 15,
|
|
trialCriterion: {},
|
|
// 上传
|
|
downloadImageVisible: false,
|
|
uploadImageVisible: false,
|
|
uploadSubjectId: null,
|
|
uploadSubjectCode: null,
|
|
uploadTrialCriterion: {},
|
|
uploadStatus: 'upload',
|
|
taskId: '',
|
|
keySeries: [],
|
|
keyStack: null,
|
|
keySeriesPopoverVisible: false,
|
|
keySeriesLoading: false,
|
|
signVisible: false,
|
|
signCode: null,
|
|
currentUser: zzSessionStorage.getItem('userName'),
|
|
tmpData: null,
|
|
submitLoading: false,
|
|
fusionSubmitLoading: false,
|
|
keyDocSubmitting: false,
|
|
|
|
AspectRatio: 1,
|
|
listShow: true,
|
|
|
|
fullScreenIndex: -1,
|
|
fullScreenWidth: window.innerWidth - 570 + 'px',
|
|
fullScreenHeight: window.innerHeight - 130 + 'px',
|
|
|
|
ManualsClose: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(['visitTaskList', 'currentReadingTaskState', 'lastCanvasTaskId', 'imageQualityIssues']),
|
|
openManuals() {
|
|
return !this.isReadKeyFile && this.isHaveKeyFile
|
|
}
|
|
},
|
|
watch: {
|
|
openManuals: {
|
|
handler() {
|
|
if (this.openManuals) this.previewManuals(true)
|
|
},
|
|
immediate: true
|
|
},
|
|
currentReadingTaskState: {
|
|
immediate: true,
|
|
handler(val) {
|
|
if (val && this.currentDicomCanvasIndex && this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`]) {
|
|
this.canvasObj[this.currentDicomCanvasIndex].readingTaskState = val
|
|
if (this.activeTool) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
this.activeTool = ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
lastCanvasTaskId: {
|
|
immediate: true,
|
|
handler(v) {
|
|
// if (v) {
|
|
// console.log('lastCanvasTaskId')
|
|
// const i = this.visitTaskList.findIndex(i => i.VisitTaskId === v)
|
|
// if (i < 0) return
|
|
// var studyList = this.visitTaskList[i].StudyList || []
|
|
// studyList = studyList.filter(i => !i.IsCriticalSequence && i.Modalities.indexOf('CT') !== -1 && i.Modalities.indexOf('PT') !== -1)
|
|
// if (studyList.length === 0) return
|
|
// this.studyList = studyList
|
|
// } else {
|
|
// this.studyList = []
|
|
// }
|
|
}
|
|
},
|
|
activeSeries: {
|
|
immediate: true,
|
|
handler(v) {
|
|
// console.log('activeSeries', v)
|
|
if (v && v.isCurrentTask && this.studyList.length === 0) {
|
|
this.activeTaskInfo.taskName = v.taskBlindName
|
|
this.activeTaskInfo.visitTaskId = v.visitTaskId
|
|
const i = this.visitTaskList.findIndex(i => i.VisitTaskId === v.visitTaskId)
|
|
if (i < 0) return
|
|
this.activeTaskInfo.visitTaskIndex = i
|
|
var studyList = this.visitTaskList[i].StudyList || []
|
|
studyList = studyList.filter(i => !i.IsCriticalSequence && (i.Modalities.indexOf('CT') !== -1 || i.Modalities.indexOf('MR') !== -1) && i.Modalities.indexOf('PT') !== -1)
|
|
if (studyList.length === 0) return
|
|
this.studyList = studyList
|
|
}
|
|
}
|
|
},
|
|
imageQualityIssues: {
|
|
immediate: true,
|
|
handler(v) { }
|
|
},
|
|
currentDicomCanvasIndex: {
|
|
immediate: true,
|
|
handler(v) {
|
|
if (this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`] && this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]) {
|
|
this.clipPlaying = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toolState.clipPlaying
|
|
} else {
|
|
this.clipPlaying = false
|
|
this.fps = 15
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
console.log(this.iseCRFShowInDicomReading, this.currentReadingTaskState, this.listShow)
|
|
this.getHotKeys()
|
|
this.getWwcTpl()
|
|
this.getTrialCriterion()
|
|
// cornerstone.imageCache.setMaximumSizeBytes(0)
|
|
|
|
// const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
|
|
// // const maximumSizeInBytes = 1024 * 1024 * 500
|
|
// cornerstone.imageCache.setMaximumSizeBytes(maximumSizeInBytes)
|
|
this.customWwc = { visible: false, title: this.$t('trials:reading:dagTitle:wwwcCustom') }
|
|
this.CriterionType = parseInt(localStorage.getItem('CriterionType'))
|
|
if (this.CriterionType === 10) {
|
|
this.measuredTools = [{ toolName: 'ArrowAnnotate', text: this.$t('trials:reading:button:arrowAnnotate'), icon: 'arrow', isDisabled: false, disabledReason: '' }, { toolName: 'RectangleRoi', text: this.$t('trials:reading:button:rectangle'), icon: 'rectangle', isDisabled: false, disabledReason: '' }]
|
|
} else if (this.CriterionType === 17) {
|
|
this.measuredTools = [{ toolName: 'Length', text: this.$t('trials:reading:button:length'), icon: 'length', isDisabled: false, disabledReason: '' }, { toolName: 'RectangleRoi', text: this.$t('trials:reading:button:rectangle'), icon: 'rectangle', isDisabled: false, disabledReason: '' }, { toolName: 'ArrowAnnotate', text: this.$t('trials:reading:button:arrowAnnotate'), icon: 'arrow', isDisabled: false, disabledReason: '' }]
|
|
} else if (this.CriterionType === 19) {
|
|
this.measuredTools = []
|
|
} else if (this.CriterionType === 20) {
|
|
this.measuredTools = []
|
|
} else if (this.CriterionType === 21) {
|
|
this.measuredTools = [{
|
|
toolName: 'Probe', text: this.$t('trials:reading:button:circle'), icon: 'oval', isDisabled: false, disabledReason: ''
|
|
}]
|
|
} else if (this.CriterionType === 22) {
|
|
this.measuredTools = [{
|
|
toolName: 'Probe', text: this.$t('trials:reading:button:circle'), icon: 'oval', isDisabled: false, disabledReason: ''
|
|
}]
|
|
}
|
|
this.rotateList[0] = '1'
|
|
this.colorList[0] = ''
|
|
this.wwwcList[0] = '1'
|
|
this.colormapsList = cornerstone.colors.getColormapsList()
|
|
this.currentDicomCanvas = this.$refs['dicomCanvas0'] ? this.$refs['dicomCanvas0'][0] : ''
|
|
this.trialId = this.$router.currentRoute.query.trialId
|
|
var digitPlaces = Number(localStorage.getItem('digitPlaces'))
|
|
this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
|
|
this.setCanvasStyle()
|
|
window.addEventListener('resize', this.setCanvasStyle)
|
|
DicomEvent.$on('updateImage', (instanceId) => {
|
|
for (let i = 0; i < this.maxCanvas; i++) {
|
|
var stack = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
|
|
if (stack.studyId) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].updateImage(instanceId)
|
|
}
|
|
}
|
|
})
|
|
DicomEvent.$on('getMeasureData', () => {
|
|
for (let i = 0; i < this.maxCanvas; i++) {
|
|
var stack = this.$refs[`dicomCanvas${i}`][0].stack
|
|
if (stack.visitTaskId) {
|
|
this.$refs[`dicomCanvas${i}`][0].getMeasureData()
|
|
}
|
|
}
|
|
console.log('getMeasureData')
|
|
})
|
|
DicomEvent.$on('getScreenshots', async (measuredData, callback) => {
|
|
if (this.currentDicomCanvasIndex <= -1 || typeof callback !== 'function') return
|
|
const shouldRelocate = this.shouldRelocateBeforeScreenshot(measuredData)
|
|
if (shouldRelocate) {
|
|
await this.imageLocation(measuredData)
|
|
}
|
|
if (!measuredData || !measuredData.isMarked) {
|
|
callback()
|
|
return
|
|
}
|
|
const base64Str = await this.captureActiveViewportScreenshot()
|
|
callback(base64Str)
|
|
})
|
|
DicomEvent.$on('imageLocation', async (measuredData) => {
|
|
return new Promise(async resolve => {
|
|
if (!measuredData) return
|
|
|
|
await this.imageLocation(measuredData)
|
|
resolve()
|
|
})
|
|
})
|
|
// DicomEvent.$on('imageLocation', async(measuredData, callback) => {
|
|
// if (measuredData) {
|
|
// await this.imageLocation(measuredData)
|
|
// }
|
|
// console.log('imageLocation')
|
|
// this.$nextTick(() => {
|
|
// if (callback) {
|
|
// callback()
|
|
// }
|
|
// })
|
|
// })
|
|
// DicomEvent.$on('imageLocation', measuredData => {
|
|
// if (!measuredData) return
|
|
// this.imageLocation(measuredData)
|
|
|
|
// console.log('imageLocation')
|
|
// })
|
|
DicomEvent.$on('setReadingState', readingTaskState => {
|
|
this.canvasObj[this.currentDicomCanvasIndex].readingTaskState = readingTaskState
|
|
if (this.activeTool) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
this.activeTool = ''
|
|
}
|
|
})
|
|
DicomEvent.$on('PGWC3Active', res => {
|
|
this.setToolActive('ArrowAnnotate', true, null, 'open')
|
|
})
|
|
DicomEvent.$on('loadImageStacks', seriesList => {
|
|
this.loadImageStacks(seriesList)
|
|
console.log('loadImageStacks')
|
|
})
|
|
DicomEvent.$on('loadLinkedImageStack', seriesInfo => {
|
|
this.loadLinkedImageStack(seriesInfo)
|
|
console.log('loadLinkedImageStack')
|
|
})
|
|
DicomEvent.$on('setMeasuredToolsPassive', () => {
|
|
this.setMeasuredToolsPassive()
|
|
})
|
|
DicomEvent.$on('readingPageUpdate', (data) => {
|
|
if (!this.petctWindow) return
|
|
this.petctWindow.postMessage({ type: 'readingPageUpdate', data: data }, window.location)
|
|
})
|
|
DicomEvent.$on('resetPage', () => {
|
|
if (!this.petctWindow) return
|
|
this.petctWindow.postMessage({ type: 'resetPage' }, window.location)
|
|
})
|
|
DicomEvent.$on('setReadingState', (data) => {
|
|
if (!this.petctWindow) return
|
|
this.petctWindow.postMessage({ type: 'setReadingState', data: data }, window.location)
|
|
})
|
|
DicomEvent.$on('closePetct', () => {
|
|
if (this.petctWindow) {
|
|
this.petctWindow.close()
|
|
}
|
|
})
|
|
DicomEvent.$on('addAnnotation', async obj => {
|
|
this.tmpData = Object.assign({}, obj.question)
|
|
// await this.imageLocation(obj.locateInfo)
|
|
if (this.CriterionType === 21) {
|
|
this.setToolActive('Probe', true, null, 'tableQuestion')
|
|
} else if (this.CriterionType === 22) {
|
|
this.setToolActive('Probe', true, null, 'tableQuestion')
|
|
}
|
|
|
|
})
|
|
window.addEventListener('beforeunload', () => {
|
|
if (this.petctWindow) {
|
|
this.petctWindow.close()
|
|
}
|
|
})
|
|
let windowWidth = document.documentElement.clientWidth;
|
|
let windowHeight = document.documentElement.clientHeight;
|
|
this.AspectRatio = windowWidth / windowHeight
|
|
window.onresize = () => {
|
|
let windowWidth = document.documentElement.clientWidth;
|
|
let windowHeight = document.documentElement.clientHeight;
|
|
this.AspectRatio = windowWidth / windowHeight
|
|
};
|
|
this.getSystemInfoReading()
|
|
},
|
|
beforeDestroy() {
|
|
DicomEvent.$off('updateImage')
|
|
DicomEvent.$off('getMeasureData')
|
|
DicomEvent.$off('imageLocation')
|
|
DicomEvent.$off('setReadingState')
|
|
DicomEvent.$off('loadImageStacks')
|
|
DicomEvent.$off('loadLinkedImageStack')
|
|
DicomEvent.$off('setMeasuredToolsPassive')
|
|
DicomEvent.$off('readingPageUpdate')
|
|
DicomEvent.$off('setReadingState')
|
|
DicomEvent.$off('reload')
|
|
DicomEvent.$off('closePetct')
|
|
if (this.petctWindow) {
|
|
this.petctWindow.close()
|
|
}
|
|
window.removeEventListener('beforeunload', () => {
|
|
if (this.petctWindow) {
|
|
this.petctWindow.close()
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
handleReadingChart(e) {
|
|
this.$emit('handleReadingChart', e)
|
|
},
|
|
async handleSubmitKeyDoc() {
|
|
if (this.keyDocSubmitting) return
|
|
this.keyDocSubmitting = true
|
|
try {
|
|
let data = {
|
|
TrialCriterionId: this.$router.currentRoute.query.TrialReadingCriterionId,
|
|
}
|
|
let res = await setReadKeyFile(data)
|
|
if (res.IsSuccess) {
|
|
this.manualsDialog.visible = false
|
|
this.ManualsClose = true
|
|
}
|
|
} catch (err) {
|
|
console.log(err)
|
|
} finally {
|
|
this.keyDocSubmitting = false
|
|
}
|
|
},
|
|
showPanel(e, toolName) {
|
|
if (toolName === 'layout') return false
|
|
e.currentTarget.firstChild.lastChild.style.display = 'block'
|
|
},
|
|
toolMouseout(e) {
|
|
e.currentTarget.firstChild.lastChild.style.display = 'none'
|
|
},
|
|
clickShow() {
|
|
this.listShow = !this.listShow;
|
|
this.changeLayout()
|
|
},
|
|
getTrialCriterion() {
|
|
getCriterionReadingInfo({
|
|
TrialId: this.trialId || this.$route.query.trialId,
|
|
TrialReadingCriterionId: this.trialReadingCriterionId || this.$route.query.TrialReadingCriterionId
|
|
})
|
|
.then((res) => {
|
|
this.trialCriterion = res.Result
|
|
})
|
|
.catch(() => { })
|
|
},
|
|
openUploadImage(status) {
|
|
const idx = this.visitTaskList.findIndex(i => i.IsCurrentTask)
|
|
if (idx > -1) {
|
|
this.taskId = this.visitTaskList[idx].VisitTaskId
|
|
}
|
|
this.uploadSubjectCode = localStorage.getItem("subjectCode")
|
|
this.uploadSubjectId = localStorage.getItem("subjectId")
|
|
this.uploadTrialCriterion = this.trialCriterion
|
|
this.uploadStatus = status
|
|
this[`${status}ImageVisible`] = true
|
|
},
|
|
async getWwcTpl() {
|
|
// const loading = this.$loading({ fullscreen: true })
|
|
try {
|
|
const res = await getUserWLTemplateList()
|
|
this.customWwcTpl = []
|
|
res.Result.map(i => {
|
|
this.customWwcTpl.push({ label: i.TemplateName, wc: i.WL, ww: i.WW })
|
|
})
|
|
this.wwwcArr = [...this.defaultWwwc, ...this.customWwcTpl]
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
async getHotKeys() {
|
|
// const loading = this.$loading({ fullscreen: true })
|
|
try {
|
|
const res = await getDoctorShortcutKey({ imageToolType: 1 })
|
|
res.Result.map(item => {
|
|
this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
|
|
})
|
|
this.bindHotKey()
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
resetHotkeyList(arr) {
|
|
this.hotKeyList = []
|
|
|
|
arr.map(item => {
|
|
this.hotKeyList.push({ id: item.id, altKey: item.keys.controlKey.altKey, ctrlKey: item.keys.controlKey.ctrlKey, shiftKey: item.keys.controlKey.shiftKey, metaKey: item.keys.controlKey.metaKey, key: item.keys.controlKey.key, code: item.keys.controlKey.code, text: item.keys.text, shortcutKeyEnum: item.label })
|
|
})
|
|
|
|
// const loading = this.$loading({ fullscreen: true })
|
|
// getDoctorShortcutKey({ imageToolType: 0 }).then(res => {
|
|
// res.Result.map(item => {
|
|
// this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
|
|
// })
|
|
// loading.close()
|
|
// }).catch(() => {
|
|
// loading.close()
|
|
// })
|
|
},
|
|
bindHotKey() {
|
|
var container = this.$refs['container']
|
|
// window.addEventListener
|
|
container.addEventListener('keydown', event => {
|
|
// console.log(event)
|
|
event.preventDefault()
|
|
|
|
var idx = this.hotKeyList.findIndex(i => i.code === event.code && i.ctrlKey === event.ctrlKey && i.shiftKey === event.shiftKey && i.altKey === event.altKey)
|
|
if (idx === -1) return
|
|
var shortcutKeyEnum = this.hotKeyList[idx].shortcutKeyEnum
|
|
|
|
if (shortcutKeyEnum === 1) {
|
|
// 前一图像视口
|
|
this.selectViewCanvas(-1)
|
|
} else if (shortcutKeyEnum === 2) {
|
|
// 后一图像视口
|
|
this.selectViewCanvas(1)
|
|
} else if (shortcutKeyEnum === 3) {
|
|
// 上一个序列
|
|
const series = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].series
|
|
DicomEvent.$emit('selectSeries', { seriesId: series.seriesId, studyId: series.studyId, offset: -1 })
|
|
} else if (shortcutKeyEnum === 4) {
|
|
// 下一个序列
|
|
const series = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].series
|
|
DicomEvent.$emit('selectSeries', { seriesId: series.seriesId, studyId: series.studyId, offset: 1 })
|
|
} else if (shortcutKeyEnum === 5) {
|
|
// 上一张图像
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(-1)
|
|
} else if (shortcutKeyEnum === 6) {
|
|
// 下一张图像
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(1)
|
|
} else if (shortcutKeyEnum === 7) {
|
|
// 向左旋转
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(false, false, -90, 4)
|
|
} else if (shortcutKeyEnum === 8) {
|
|
// 向右旋转
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(false, false, 90, 5)
|
|
} else if (shortcutKeyEnum === 9) {
|
|
// 水平翻转
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(true, false, 0, 3)
|
|
} else if (shortcutKeyEnum === 10) {
|
|
// 垂直翻转
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(false, true, 0, 2)
|
|
} else if (shortcutKeyEnum === 11) {
|
|
// 放大
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setZoomScale(1)
|
|
} else if (shortcutKeyEnum === 12) {
|
|
// 缩小
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setZoomScale(0)
|
|
} else if (shortcutKeyEnum === 13) {
|
|
// 适应图像
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].fitToImage()
|
|
} else if (shortcutKeyEnum === 14) {
|
|
// 适应窗口
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].fitToWindow()
|
|
} else if (shortcutKeyEnum === 15) {
|
|
// 截图
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].saveImage()
|
|
} else if (shortcutKeyEnum === 16) {
|
|
// 反色
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleInvert()
|
|
} else if (shortcutKeyEnum === 17) {
|
|
// 窗宽/窗位
|
|
var wwwcArrIdx = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].wwwcArrIdx
|
|
var wwwcArr = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].wwwcArr
|
|
if (wwwcArrIdx + 1 === wwwcArr.length) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].wwwcArrIdx = 0
|
|
} else {
|
|
++this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].wwwcArrIdx
|
|
}
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setWwwc(wwwcArr[wwwcArrIdx].ww, wwwcArr[wwwcArrIdx].wc)
|
|
} else if (shortcutKeyEnum === 18) {
|
|
// 重置
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetViewport()
|
|
} else if (shortcutKeyEnum === 19) {
|
|
// 显示或隐藏标记
|
|
if (this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].readingTaskState < 2) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setMeasureDataVisible()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
resetViewport() {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetViewport()
|
|
},
|
|
getKeySeriesVisitTaskId() {
|
|
const currentCanvas = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`]
|
|
if (currentCanvas && currentCanvas[0] && currentCanvas[0].stack && currentCanvas[0].stack.visitTaskId) {
|
|
return currentCanvas[0].stack.visitTaskId
|
|
}
|
|
return this.activeSeries && this.activeSeries.visitTaskId ? this.activeSeries.visitTaskId : ''
|
|
},
|
|
async showKeySeriesPanel() {
|
|
this.keySeries = []
|
|
const currentCanvas = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`]
|
|
this.keyStack = currentCanvas && currentCanvas[0] ? currentCanvas[0].stack : null
|
|
const visitTaskId = this.keyStack?.visitTaskId
|
|
if (!visitTaskId) return
|
|
this.keySeriesLoading = true
|
|
try {
|
|
const res = await getMarkList({ visitTaskId })
|
|
if (res && res.Result) {
|
|
this.keySeries = res.Result
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
} finally {
|
|
this.keySeriesLoading = false
|
|
}
|
|
},
|
|
jumpToKeySeries(kf) {
|
|
// this.keySeriesPopoverVisible = false
|
|
const visitTaskId = this.keyStack?.visitTaskId
|
|
if (!visitTaskId) return
|
|
// let annotation = {}
|
|
// try {
|
|
// annotation = kf.MeasureData ? JSON.parse(kf.MeasureData) : {}
|
|
// } catch (err) {
|
|
// console.error(err)
|
|
// }
|
|
const series = this.getSeriesInfoByMark(visitTaskId, { lesionName: kf.MarkName })
|
|
if (!series) return
|
|
this.loadImageStack(series)
|
|
},
|
|
previewConfig() {
|
|
this.activeName = '1'
|
|
this.personalConfigDialog.visible = true
|
|
},
|
|
setCornerstoneStyle(i) {
|
|
if (this.layoutCol === 1 && this.layoutRow === 1) {
|
|
this.fullScreenIndex = -1
|
|
return
|
|
}
|
|
if (this.cornerstoneStyle.position) {
|
|
this.cornerstoneStyle = {}
|
|
this.setCanvasStyle()
|
|
this.fullScreenIndex = -1
|
|
} else {
|
|
this.cornerstoneStyle = {
|
|
position: 'absolute',
|
|
top: '67px',
|
|
left: '0px',
|
|
right: '350px',
|
|
zIndex: 10,
|
|
}
|
|
this.fullScreenIndex = this.currentDicomCanvasIndex
|
|
let w = 570
|
|
if (!this.studyShow) w -= 170
|
|
if (!this.listShow) w -= 330
|
|
this.fullScreenWidth = window.innerWidth - w + 'px'
|
|
}
|
|
this.$nextTick(() => {
|
|
for (var i = 0; i < this.maxCanvas; i++) {
|
|
this.$refs[`dicomCanvas${i}`][0].reloadCanvas()
|
|
}
|
|
})
|
|
},
|
|
loadImageStacks(seriesList) {
|
|
if (seriesList.length === 0) {
|
|
const idx = this.visitTaskList.findIndex(i => i.IsCurrentTask)
|
|
if (idx > -1) {
|
|
store.dispatch('reading/setLastCanvasTaskId', this.visitTaskList[idx].VisitTaskId)
|
|
}
|
|
|
|
return
|
|
}
|
|
var l = seriesList.length > 1 ? 'A|B' : 'A'
|
|
this.layout = l
|
|
var i = this.layouts.findIndex(i => i.name === l)
|
|
var layout = this.layouts[i]
|
|
this.layoutRow = layout.row
|
|
this.layoutCol = layout.col
|
|
this.setCanvasStyle()
|
|
this.maxCanvas = layout.row * layout.col
|
|
this.$nextTick(() => {
|
|
const elements = document.querySelectorAll('.cornerstone-element')
|
|
Array.from(elements).forEach((element) => {
|
|
cornerstone.enable(element)
|
|
cornerstone.resize(element)
|
|
})
|
|
seriesList.map((series, index) => {
|
|
this.canvasObj[index] = series
|
|
if (series.isCurrentTask) {
|
|
this.currentDicomCanvasIndex = index
|
|
this.activeSeries = series
|
|
// this.$refs['measurementList'].initPage(series)
|
|
store.dispatch('reading/setActiveSeries', series)
|
|
store.dispatch('reading/setLastCanvasTaskId', series.visitTaskId)
|
|
}
|
|
const s = Object.assign({}, series)
|
|
this.$refs[`dicomCanvas${index}`][0].loadImageStack(s)
|
|
|
|
if (this.activeTool) {
|
|
if (series.isCurrentTask && series.readingTaskState < 2) {
|
|
this.$nextTick(() => {
|
|
this.$refs[`dicomCanvas${index}`][0].setToolPassive(this.activeTool)
|
|
})
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.$refs[`dicomCanvas${index}`][0].setToolEnabled(this.activeTool)
|
|
})
|
|
}
|
|
this.activeTool = ''
|
|
}
|
|
})
|
|
})
|
|
},
|
|
loadImageStack(dicomSeries) {
|
|
this.clipPlaying = false
|
|
this.fps = 15
|
|
this.canvasObj[this.currentDicomCanvasIndex] = dicomSeries
|
|
this.$nextTick(() => {
|
|
this.activeSeries = dicomSeries
|
|
const s = Object.assign({}, dicomSeries)
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].loadImageStack(s).then(res => {
|
|
if (this.activeTool) {
|
|
if (dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2) {
|
|
this.$nextTick(() => {
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolActive(this.activeTool)
|
|
})
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
})
|
|
this.activeTool = ''
|
|
}
|
|
// this.activeTool = ''
|
|
}
|
|
})
|
|
// this.$refs['measurementList'].initPage(dicomSeries)
|
|
store.dispatch('reading/setActiveSeries', dicomSeries)
|
|
if (this.currentDicomCanvasIndex === this.maxCanvas - 1) {
|
|
store.dispatch('reading/setLastCanvasTaskId', dicomSeries.visitTaskId)
|
|
}
|
|
})
|
|
},
|
|
loadLinkedImageStack(dicomSeries) {
|
|
this.currentDicomCanvasIndex = dicomSeries.canvasIndex
|
|
var canvasIndex = dicomSeries.canvasIndex
|
|
this.canvasObj[canvasIndex] = dicomSeries
|
|
|
|
for (let i = 0; i < this.maxCanvas; i++) {
|
|
if (this.activeTool) {
|
|
var series = null
|
|
if (canvasIndex === i) {
|
|
series = dicomSeries
|
|
} else {
|
|
series = this.$refs[`dicomCanvas${i}`][0].stack
|
|
}
|
|
if (series.isCurrentTask && series.readingTaskState < 2) {
|
|
this.$refs[`dicomCanvas${i}`][0].setToolPassive(this.activeTool)
|
|
} else {
|
|
this.$refs[`dicomCanvas${i}`][0].setToolEnabled(this.activeTool)
|
|
}
|
|
}
|
|
}
|
|
this.activeTool = ''
|
|
|
|
// if (this.activeTool) {
|
|
// if (dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2) {
|
|
// this.$nextTick(() => {
|
|
// this.$refs[`dicomCanvas${canvasIndex}`][0].setToolPassive(this.activeTool)
|
|
// })
|
|
// } else {
|
|
// this.$nextTick(() => {
|
|
// this.$refs[`dicomCanvas${canvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
// })
|
|
// }
|
|
// this.activeTool = ''
|
|
// }
|
|
this.$nextTick(() => {
|
|
this.activeSeries = dicomSeries
|
|
const s = Object.assign({}, dicomSeries)
|
|
this.$refs[`dicomCanvas${canvasIndex}`][0].loadImageStack(s)
|
|
|
|
store.dispatch('reading/setActiveSeries', dicomSeries)
|
|
if (this.currentDicomCanvasIndex === this.maxCanvas - 1) {
|
|
store.dispatch('reading/setLastCanvasTaskId', dicomSeries.visitTaskId)
|
|
}
|
|
})
|
|
},
|
|
// 给显示的画布设置显示的序列信息
|
|
async getSeriesShowInCanvas(layout) {
|
|
var activeSeries = Object.assign({}, this.activeSeries)
|
|
const loading = this.$loading({ fullscreen: true })
|
|
if (layout.name === 'A') {
|
|
// 判断当前激活窗口是否有序列信息
|
|
if (activeSeries) {
|
|
this.seriesStack = [activeSeries]
|
|
this.currentDicomCanvasIndex = 0
|
|
store.dispatch('reading/setLastCanvasTaskId', activeSeries.visitTaskId)
|
|
await this.setCanvas(this.seriesStack)
|
|
loading.close()
|
|
}
|
|
} else if (layout.name === 'A|A') {
|
|
if (activeSeries) {
|
|
this.seriesStack = [activeSeries, activeSeries]
|
|
this.currentDicomCanvasIndex = 1
|
|
store.dispatch('reading/setLastCanvasTaskId', activeSeries.visitTaskId)
|
|
await this.setCanvas(this.seriesStack)
|
|
loading.close()
|
|
}
|
|
} else if (layout.name === 'A|B') {
|
|
if (activeSeries) {
|
|
const idx = this.visitTaskList.findIndex(i => i.VisitTaskId === activeSeries.visitTaskId)
|
|
|
|
const visitTaskNum = idx > -1 ? this.visitTaskList[idx].VisitTaskNum : -1
|
|
if (visitTaskNum > 0 && this.visitTaskList.length > 1) {
|
|
var visitTaskId = ''
|
|
if (this.CriterionType === 10) {
|
|
const i = this.visitTaskList.findIndex(i => i.VisitTaskNum === visitTaskNum - 1)
|
|
visitTaskId = this.visitTaskList[i].VisitTaskId
|
|
} else {
|
|
const i = this.visitTaskList.findIndex(i => i.IsBaseLineTask)
|
|
visitTaskId = this.visitTaskList[i].VisitTaskId
|
|
}
|
|
this.getFirstSeries(activeSeries, visitTaskId).then(async baseSerires => {
|
|
console.log(activeSeries)
|
|
this.seriesStack = [baseSerires, activeSeries]
|
|
this.currentDicomCanvasIndex = 1
|
|
store.dispatch('reading/setLastCanvasTaskId', activeSeries.visitTaskId)
|
|
await this.setCanvas(this.seriesStack)
|
|
loading.close()
|
|
})
|
|
} else {
|
|
this.seriesStack = [activeSeries, activeSeries]
|
|
this.currentDicomCanvasIndex = 1
|
|
store.dispatch('reading/setLastCanvasTaskId', activeSeries.visitTaskId)
|
|
await this.setCanvas(this.seriesStack)
|
|
loading.close()
|
|
}
|
|
}
|
|
} else if (layout.name === 'A|A|A|A') {
|
|
if (activeSeries) {
|
|
this.seriesStack = [activeSeries, activeSeries, activeSeries, activeSeries]
|
|
this.currentDicomCanvasIndex = 3
|
|
store.dispatch('reading/setLastCanvasTaskId', activeSeries.visitTaskId)
|
|
await this.setCanvas(this.seriesStack)
|
|
loading.close()
|
|
}
|
|
}
|
|
},
|
|
// 设置画布序列信息
|
|
setCanvas(seriesStack) {
|
|
return new Promise(resolve => {
|
|
var promiseArr = []
|
|
for (let i = 0; i < this.maxCanvas && i < seriesStack.length; i++) {
|
|
this.canvasObj[i] = seriesStack[i]
|
|
const s = Object.assign({}, seriesStack[i])
|
|
promiseArr.push(this.$refs[`dicomCanvas${i}`][0].loadImageStack(s))
|
|
}
|
|
Promise.all(promiseArr).then(() => {
|
|
// this.activateDicomCanvas(this.currentDicomCanvasIndex)
|
|
resolve()
|
|
}).catch(() => { resolve() })
|
|
})
|
|
},
|
|
// 根据病灶标识定位图像
|
|
|
|
// 最后一个窗口显示当前访视下病灶所在的影像序列
|
|
// 其他窗口显示该病灶第一次出现的序列信息
|
|
imageLocation(obj) {
|
|
return new Promise(async resolve => {
|
|
var loading = null
|
|
var loadImagePromises = []
|
|
var isScrollSync = this.isScrollSync
|
|
if (this.isScrollSync) {
|
|
// 取消滚动同步
|
|
this.isScrollSync = false
|
|
}
|
|
|
|
var activeCanvasTaskId = obj.visitTaskId
|
|
|
|
var index = this.visitTaskList.findIndex(i => i.VisitTaskId === activeCanvasTaskId)
|
|
if (index === -1) {
|
|
resolve()
|
|
return
|
|
}
|
|
|
|
var firstAddSeries = null
|
|
var currentAddSeries = null
|
|
if (this.isReadingTaskViewInOrder === 1) {
|
|
// 有序
|
|
// 获取病灶第一次出现的访视序列
|
|
var firstAddVisitTaskId = null
|
|
|
|
var idx = this.visitTaskList[index].MeasureData.findIndex(item => {
|
|
return item.OrderMarkName === obj.lesionName
|
|
})
|
|
if (idx > -1) {
|
|
firstAddVisitTaskId = this.visitTaskList[index].MeasureData[idx].FristAddTaskId
|
|
}
|
|
if (firstAddVisitTaskId) {
|
|
var taskIdx = this.visitTaskList.findIndex(i => i.VisitTaskId === firstAddVisitTaskId)
|
|
if (taskIdx > -1 && !this.visitTaskList[taskIdx].IsInit) {
|
|
loading = this.$loading({ fullscreen: true })
|
|
if (!this.visitTaskList[taskIdx].measureDataInit) {
|
|
await store.dispatch('reading/getMeasuredData', this.visitTaskList[taskIdx].VisitTaskId)
|
|
}
|
|
if (!this.visitTaskList[taskIdx].studyListInit) {
|
|
await store.dispatch('reading/getStudyInfo', { trialId: this.trialId, subjectVisitId: this.visitTaskList[taskIdx].VisitId, visitTaskId: this.visitTaskList[taskIdx].VisitTaskId, taskBlindName: this.visitTaskList[taskIdx].TaskBlindName })
|
|
}
|
|
if (!this.visitTaskList[taskIdx].readingQuestionsInit) {
|
|
await store.dispatch('reading/getReadingQuestionAndAnswer', { trialId: this.trialId, visitTaskId: this.visitTaskList[taskIdx].VisitTaskId })
|
|
}
|
|
if (!this.visitTaskList[taskIdx].questionsInit) {
|
|
await store.dispatch('reading/getDicomReadingQuestionAnswer', { trialId: this.trialId, visitTaskId: this.visitTaskList[taskIdx].VisitTaskId })
|
|
}
|
|
|
|
await store.dispatch('reading/setStatus', { visitTaskId: this.visitTaskList[taskIdx].VisitTaskId })
|
|
}
|
|
if (this.CriterionType === 3 && obj.lesionType === 7 && obj.fromMark) {
|
|
const measureDataInfo = Object.assign({}, obj)
|
|
measureDataInfo.lesionName = obj.fromMark
|
|
firstAddSeries = this.getSeriesInfoByMark(firstAddVisitTaskId, measureDataInfo)
|
|
} else {
|
|
firstAddSeries = this.getSeriesInfoByMark(firstAddVisitTaskId, obj)
|
|
}
|
|
}
|
|
// 获取当前访视病灶所在的序列
|
|
currentAddSeries = this.getSeriesInfoByMark(activeCanvasTaskId, obj)
|
|
if (!firstAddSeries && currentAddSeries) {
|
|
// 存在首次出现的病灶及当前病灶
|
|
firstAddSeries = currentAddSeries
|
|
} else if (!firstAddSeries && !currentAddSeries) {
|
|
// 当前新病灶，且未画标记则显示当前的序列信息，不做处理
|
|
loading && loading.close()
|
|
this.isScrollSync = isScrollSync
|
|
this.setToolToTarget(obj)
|
|
resolve()
|
|
return
|
|
} else if (firstAddSeries && !currentAddSeries) {
|
|
// 当前访视序列与首次出现病灶的序列对齐
|
|
currentAddSeries = this.getLinkedSeries(firstAddSeries, activeCanvasTaskId)
|
|
|
|
if (!currentAddSeries) {
|
|
// 未找到对齐的，则就显示当前最后一个窗口现实的序列信息
|
|
currentAddSeries = this.$refs[`dicomCanvas${this.maxCanvas - 1}`][0].series
|
|
}
|
|
}
|
|
} else {
|
|
// 无序
|
|
currentAddSeries = this.getSeriesInfoByMark(activeCanvasTaskId, obj)
|
|
if (!currentAddSeries) {
|
|
// 未找到对齐的，则就显示当前最后一个窗口现实的序列信息
|
|
currentAddSeries = this.$refs[`dicomCanvas${this.maxCanvas - 1}`][0].series
|
|
}
|
|
firstAddSeries = currentAddSeries
|
|
}
|
|
|
|
for (let i = 0; i < this.maxCanvas; i++) {
|
|
if (i === this.maxCanvas - 1) {
|
|
const s = Object.assign({}, currentAddSeries)
|
|
loadImagePromises.push(this.$refs[`dicomCanvas${i}`][0].loadImageStack(s))
|
|
this.currentDicomCanvasIndex = i
|
|
this.activeSeries = currentAddSeries
|
|
store.dispatch('reading/setActiveSeries', currentAddSeries)
|
|
} else {
|
|
const s = Object.assign({}, firstAddSeries)
|
|
loadImagePromises.push(this.$refs[`dicomCanvas${i}`][0].loadImageStack(s))
|
|
}
|
|
}
|
|
Promise.all(loadImagePromises)
|
|
.then(() => {
|
|
this.isScrollSync = isScrollSync
|
|
this.setToolToTarget(obj)
|
|
resolve()
|
|
}).catch(() => {
|
|
resolve()
|
|
})
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
})
|
|
},
|
|
shouldRelocateBeforeScreenshot(measuredData) {
|
|
if (!measuredData) return false
|
|
const currentCanvas = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`] && this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
|
|
if (!currentCanvas || !currentCanvas.stack) return true
|
|
const currentStack = currentCanvas.stack
|
|
if (currentStack.visitTaskId !== measuredData.visitTaskId) return true
|
|
|
|
// 当前序列与病灶目标序列一致时，避免重复 imageLocation 引发的重载等待
|
|
const targetSeries = this.getSeriesInfoByMark(measuredData.visitTaskId, measuredData)
|
|
if (!targetSeries) return false
|
|
if (currentStack.seriesId !== targetSeries.seriesId) return true
|
|
if (typeof targetSeries.imageIdIndex === 'number' &&
|
|
targetSeries.imageIdIndex !== currentStack.currentImageIdIndex) {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
async captureActiveViewportScreenshot() {
|
|
// const currentCanvas = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`] && this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
|
|
await this.$nextTick()
|
|
const divForDownloadViewport = document.querySelector(
|
|
`div[data-canvas-uid="dicomCanvas${this.currentDicomCanvasIndex}"]`
|
|
)
|
|
if (divForDownloadViewport) {
|
|
try {
|
|
const canvas = await html2canvas(divForDownloadViewport, {
|
|
logging: false,
|
|
useCORS: true,
|
|
scale: 1
|
|
})
|
|
return canvas.toDataURL('image/png')
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
return ''
|
|
},
|
|
setToolToTarget(obj) {
|
|
if (obj.readingTaskState < 2 && obj.markTool && !obj.isMarked) {
|
|
if (this.activeTool) {
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(this.activeTool)
|
|
}
|
|
this.activeTool = obj.markTool
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolActive(obj.markTool)
|
|
} else {
|
|
if (this.activeTool) {
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(this.activeTool)
|
|
this.activeTool = ''
|
|
}
|
|
}
|
|
},
|
|
setToolPassive() {
|
|
if (this.activeTool) {
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(this.activeTool)
|
|
this.activeTool = ''
|
|
}
|
|
},
|
|
selectViewCanvas(offset) {
|
|
var canvasIndex = this.currentDicomCanvasIndex + offset
|
|
if (canvasIndex < 0 || canvasIndex >= this.maxCanvas) return
|
|
this.activateDicomCanvas(canvasIndex)
|
|
},
|
|
// 根据标记获取标记所在的序列信息
|
|
getSeriesInfoByMark(visitTaskId, obj) {
|
|
var seriesInfo = null
|
|
// 根据任务ID测量病灶信息
|
|
var index = this.visitTaskList.findIndex(i => i.VisitTaskId === visitTaskId)
|
|
|
|
if (index > -1) {
|
|
var idx = -1
|
|
idx = this.visitTaskList[index].MeasureData.findIndex(item => item.OrderMarkName === obj.lesionName)
|
|
// if (this.CriterionType === 10) {
|
|
// idx = this.visitTaskList[index].MeasureData.findIndex(item => item.OrderMarkName === obj.lesionName)
|
|
// } else {
|
|
// idx = this.visitTaskList[index].MeasureData.findIndex(item => item.QuestionId === obj.questionId && item.RowIndex === obj.rowIndex)
|
|
// }
|
|
if (idx > -1 && this.visitTaskList[index].MeasureData[idx].MeasureData) {
|
|
var studyList = this.visitTaskList[index].StudyList
|
|
var studyId = this.visitTaskList[index].MeasureData[idx].StudyId
|
|
var seriesId = this.visitTaskList[index].MeasureData[idx].SeriesId
|
|
var instanceId = this.visitTaskList[index].MeasureData[idx].InstanceId
|
|
var studyIdx = studyList.findIndex(study => study.StudyId === studyId)
|
|
if (studyIdx > -1) {
|
|
var seriesIdx = studyList[studyIdx].SeriesList.findIndex(s => s.seriesId === seriesId)
|
|
if (seriesIdx > -1) {
|
|
var series = studyList[studyIdx].SeriesList[seriesIdx]
|
|
const frame = this.visitTaskList[index].MeasureData[idx].MeasureData.frame
|
|
// const filterStr = series.isExistMutiFrames ? `frame=${frame}&instanceId=${instanceId}` : `instanceId=${instanceId}`
|
|
let n = series.instanceInfoList.findIndex(k => k.Id === instanceId)
|
|
let filterStr = ''
|
|
if (n > -1 && series.isExistMutiFrames) {
|
|
if (series.instanceInfoList[n].NumberOfFrames > 0) {
|
|
filterStr = `frame=${frame}&instanceId=${instanceId}`
|
|
} else {
|
|
filterStr = `instanceId=${instanceId}`
|
|
}
|
|
} else {
|
|
filterStr = `instanceId=${instanceId}`
|
|
}
|
|
var instanceIdx = series.imageIds.findIndex(imageId => imageId.includes(filterStr))
|
|
if (instanceIdx > -1) {
|
|
series.imageIdIndex = instanceIdx
|
|
seriesInfo = series
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return seriesInfo
|
|
},
|
|
getLinkedSeries(baseSeries, visitTaskId) {
|
|
var index = this.visitTaskList.findIndex(i => i.VisitTaskId === visitTaskId)
|
|
var visitTaskInfo = this.visitTaskList[index]
|
|
var obj = null
|
|
var studyList = visitTaskInfo.StudyList
|
|
// 查找筛选描述一致
|
|
var seriesList = studyList.map(s => s.SeriesList).flat()
|
|
var similarArr = seriesList.map((i, index) => {
|
|
return { similar: this.strSimilarity2Percent(i.description, baseSeries.description), index }
|
|
})
|
|
similarArr = similarArr.sort((a, b) => {
|
|
return b.similar - a.similar
|
|
})
|
|
const i = similarArr[0] && similarArr[0].similar > 0.95 ? similarArr[0].index : -1
|
|
if (i > -1) {
|
|
obj = seriesList[i]
|
|
}
|
|
// if (!obj) {
|
|
// // 描述不一致,则筛选层厚一致
|
|
// const idx = seriesList.findIndex(series => series.sliceThickness === baseSeries.sliceThickness)
|
|
// idx > -1 ? obj = seriesList[idx] : ''
|
|
// }
|
|
// if (!obj) {
|
|
// // 层厚不一致,则筛选图像数量一致
|
|
// const idx = seriesList.findIndex(series => series.instanceCount === baseSeries.instanceCount)
|
|
// idx > -1 ? obj = seriesList[idx] : ''
|
|
// }
|
|
|
|
if (obj) {
|
|
const index = Math.floor(obj.imageIds.length * ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount))
|
|
obj.imageIdIndex = index > 0 ? index - 1 : 0
|
|
}
|
|
return obj
|
|
},
|
|
strSimilarity2Number(s, t) {
|
|
var n = s.length; var m = t.length; var d = []
|
|
var i, j, s_i, t_j, cost
|
|
if (n === 0) return m
|
|
if (m === 0) return n
|
|
for (i = 0; i <= n; i++) {
|
|
d[i] = []
|
|
d[i][0] = i
|
|
}
|
|
for (j = 0; j <= m; j++) {
|
|
d[0][j] = j
|
|
}
|
|
for (i = 1; i <= n; i++) {
|
|
s_i = s.charAt(i - 1)
|
|
for (j = 1; j <= m; j++) {
|
|
t_j = t.charAt(j - 1)
|
|
if (s_i === t_j) {
|
|
cost = 0
|
|
} else {
|
|
cost = 1
|
|
}
|
|
d[i][j] = this.Minimum(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost)
|
|
}
|
|
}
|
|
return d[n][m]
|
|
},
|
|
// 两个字符串的相似程度，并返回相似度百分比
|
|
strSimilarity2Percent(s, t) {
|
|
var l = s.length > t.length ? s.length : t.length
|
|
var d = this.strSimilarity2Number(s, t)
|
|
return Number((1 - d / l).toFixed(4))
|
|
},
|
|
Minimum(a, b, c) {
|
|
return a < b ? (a < c ? a : c) : (b < c ? b : c)
|
|
},
|
|
// 获取某个任务下可对齐的序列信息
|
|
async getFirstSeries(baseSeries, visitTaskId) {
|
|
var index = this.visitTaskList.findIndex(i => i.VisitTaskId === visitTaskId)
|
|
if (!this.visitTaskList[index].studyListInit) {
|
|
await store.dispatch('reading/getStudyInfo', { trialId: this.trialId, subjectVisitId: this.visitTaskList[index].VisitId, visitTaskId: this.visitTaskList[index].VisitTaskId, taskBlindName: this.visitTaskList[index].TaskBlindName })
|
|
|
|
await store.dispatch('reading/getMeasuredData', this.visitTaskList[index].VisitTaskId)
|
|
}
|
|
var visitTaskInfo = this.visitTaskList[index]
|
|
var obj = null
|
|
var studyList = visitTaskInfo.StudyList
|
|
// 查找筛选描述一致
|
|
var seriesList = studyList.map(s => s.SeriesList).flat()
|
|
var similarArr = seriesList.map((i, index) => {
|
|
return { similar: this.strSimilarity2Percent(i.description, baseSeries.description), index }
|
|
})
|
|
similarArr = similarArr.sort((a, b) => {
|
|
return b.similar - a.similar
|
|
})
|
|
const i = similarArr[0] && similarArr[0].similar > 0.85 ? similarArr[0].index : -1
|
|
if (i > -1) {
|
|
obj = seriesList[i]
|
|
}
|
|
// if (!obj) {
|
|
// // 描述不一致,则筛选层厚一致
|
|
// const idx = seriesList.findIndex(series => series.sliceThickness === baseSeries.sliceThickness)
|
|
// idx > -1 ? obj = seriesList[idx] : ''
|
|
// }
|
|
// if (!obj) {
|
|
// // 层厚不一致,则筛选图像数量一致
|
|
// const idx = seriesList.findIndex(series => series.instanceCount === baseSeries.instanceCount)
|
|
// idx > -1 ? obj = seriesList[idx] : ''
|
|
// }
|
|
if (!obj) {
|
|
// 都不符合要求， 判断是否存在层厚为5的序列，否则显示第一个检查的第一个序列
|
|
const idx = seriesList.findIndex(series => series.isDicom && parseInt(series.instanceCount) === 5)
|
|
idx > -1 ? obj = seriesList[idx] : obj = seriesList[0]
|
|
}
|
|
|
|
if (obj) {
|
|
const index = Math.floor(obj.imageIds.length * ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount))
|
|
obj.imageIdIndex = index > 0 ? index - 1 : 0
|
|
}
|
|
return obj
|
|
},
|
|
async getFirstSeries2(visitTaskList) {
|
|
if (visitTaskList && !visitTaskList.studyListInit) {
|
|
await store.dispatch('reading/getStudyInfo', { trialId: this.trialId, subjectVisitId: visitTaskList.VisitId, visitTaskId: visitTaskList.VisitTaskId, taskBlindName: visitTaskList.TaskBlindName })
|
|
|
|
await store.dispatch('reading/getMeasuredData', visitTaskList.VisitTaskId)
|
|
}
|
|
var index = this.visitTaskList.findIndex(i => i.VisitTaskId === visitTaskList.VisitTaskId)
|
|
var studyList = this.visitTaskList[index].StudyList
|
|
var idx = studyList.findIndex(i => i.SeriesList.length > 0)
|
|
if (idx > -1) {
|
|
const seriesIdx = studyList[idx].SeriesList.findIndex(i => i.isDicom)
|
|
return seriesIdx > -1 ? studyList[idx].SeriesList[seriesIdx] : ''
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
|
|
// 设置画布大小
|
|
setCanvasStyle() {
|
|
let w = 570
|
|
if (!this.studyShow) w -= 170
|
|
if (!this.listShow) w -= 330
|
|
this.canvasW = (window.innerWidth - w) / (this.AspectRatio < 1 ? this.layoutRow : this.layoutCol) + 'px'
|
|
this.canvasH = (window.innerHeight - 130) / (this.AspectRatio < 1 ? this.layoutCol : this.layoutRow) + 'px'
|
|
},
|
|
// 切换布局
|
|
changeLayout(name) {
|
|
this.fullScreenIndex = -1
|
|
if (!name) name = this.layout ? this.layout : 'A'
|
|
if (this.activeTool) {
|
|
if (this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].isCurrentTask && this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].readingTaskState < 2) {
|
|
this.$nextTick(() => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(this.activeTool)
|
|
})
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
})
|
|
}
|
|
this.activeTool = ''
|
|
}
|
|
this.isScrollSync = false
|
|
this.activeSeries = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
|
|
this.layout = name
|
|
var i = this.layouts.findIndex(i => i.name === name)
|
|
var layout = this.layouts[i]
|
|
this.layoutRow = layout.row
|
|
this.layoutCol = layout.col
|
|
this.setCanvasStyle()
|
|
this.maxCanvas = layout.row * layout.col
|
|
this.$nextTick(() => {
|
|
const elements = document.querySelectorAll('.cornerstone-element')
|
|
Array.from(elements).forEach((element) => {
|
|
cornerstone.enable(element)
|
|
cornerstone.resize(element)
|
|
})
|
|
this.getSeriesShowInCanvas(layout)
|
|
this.cornerstoneStyle = {}
|
|
this.setCanvasStyle()
|
|
})
|
|
},
|
|
// 更新画布
|
|
updateCanvas(measureData) {
|
|
for (let i = 0; i < this.maxCanvas; i++) {
|
|
var stack = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
|
|
if (stack.studyId) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].removeToolState(measureData)
|
|
}
|
|
}
|
|
},
|
|
// 旋转
|
|
setDicomCanvasRotate(value) {
|
|
const type = parseInt(value)
|
|
if (type === 1) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetRotate()
|
|
} else if (type === 2) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(false, true, 0, type)
|
|
} else if (type === 3) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(true, false, 0, type)
|
|
} else if (type === 4) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(false, false, -90, type)
|
|
} else if (type === 5) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(false, false, 90, type)
|
|
}
|
|
},
|
|
// 激活画布
|
|
activateDicomCanvas(index) {
|
|
console.log('激活画布')
|
|
|
|
if (index !== this.currentDicomCanvasIndex) {
|
|
this.currentDicomCanvasIndex = index
|
|
// var dicomSeries = this.canvasObj[this.currentDicomCanvasIndex]
|
|
var dicomSeries = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
|
|
this.activeSeries = dicomSeries
|
|
for (let i = 0; i < this.maxCanvas; i++) {
|
|
if (this.activeTool) {
|
|
var series = this.$refs[`dicomCanvas${i}`][0].stack
|
|
if (series.isCurrentTask && series.readingTaskState < 2) {
|
|
this.$refs[`dicomCanvas${i}`][0].setToolPassive(this.activeTool)
|
|
} else {
|
|
this.$refs[`dicomCanvas${i}`][0].setToolEnabled(this.activeTool)
|
|
}
|
|
}
|
|
}
|
|
this.activeTool = ''
|
|
this.isScrollSync = false
|
|
this.currentDicomCanvasIndex = index
|
|
this.currentDicomCanvas = this.$refs[`dicomCanvas${index}`]
|
|
this.currentDicomCanvas.tabIndex = 0
|
|
if (!this.rotateList[this.currentDicomCanvasIndex]) {
|
|
this.rotateList[this.currentDicomCanvasIndex] = '1'
|
|
}
|
|
if (!this.colorList[this.currentDicomCanvasIndex]) {
|
|
this.colorList[this.currentDicomCanvasIndex] = ''
|
|
}
|
|
if (!this.wwwcList[this.currentDicomCanvasIndex]) {
|
|
this.wwwcList[this.currentDicomCanvasIndex] = '1'
|
|
}
|
|
this.$refs['container'].focus()
|
|
// if (stack.studyId) {
|
|
// DicomEvent.$emit('toggleVisitList', stack)
|
|
// }
|
|
store.dispatch('reading/setActiveSeries', dicomSeries)
|
|
}
|
|
},
|
|
// 鼠标移入测量工具时，判断工具是否可激活
|
|
enter(e, toolName) {
|
|
var i = this.measuredTools.findIndex(item => item.toolName === toolName)
|
|
if (i === -1) return
|
|
var isCurrentTask = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].isCurrentTask
|
|
var readingTaskState = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].readingTaskState
|
|
if (!isCurrentTask) {
|
|
this.measuredTools[i].isDisabled = true
|
|
e.target.style.cursor = 'not-allowed'
|
|
if (this.activeTool) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(toolName)
|
|
this.activeTool = ''
|
|
}
|
|
} else if (isCurrentTask && readingTaskState >= 2) {
|
|
this.measuredTools[i].isDisabled = false
|
|
e.target.style.cursor = 'pointer'
|
|
} else if (isCurrentTask && readingTaskState < 2) {
|
|
// var obj = this.$refs['measurementList'].isCanActiveTool(toolName, true)
|
|
var obj = this.$refs['measurementList'].isCanActiveTool(toolName, true)
|
|
this.measuredTools[i].disabledReason = obj.reason
|
|
if (!obj.isCanActiveTool) {
|
|
if (this.activeTool === toolName) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(toolName)
|
|
this.activeTool = ''
|
|
}
|
|
this.measuredTools[i].isDisabled = true
|
|
e.target.style.cursor = 'not-allowed'
|
|
} else {
|
|
this.measuredTools[i].isDisabled = false
|
|
e.target.style.cursor = 'pointer'
|
|
}
|
|
}
|
|
},
|
|
setMeasuredToolsPassive() {
|
|
this.measuredTools.forEach(item => {
|
|
if (this.activeTool === item.toolName) {
|
|
this.activeTool = ''
|
|
}
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
},
|
|
// 设置测量工具启用(不会对输入作出反应)
|
|
setToolActive(toolName, isMeasuredTool, e, type) {
|
|
if (!type) {
|
|
this.tmpData = null
|
|
}
|
|
if (isMeasuredTool) {
|
|
// var i = this.measuredTools.findIndex(item => item.toolName === toolName)
|
|
// if (i === -1 && this.measuredTools[i].isDisabled) return
|
|
|
|
var toolObj = this.measuredTools.find(i => i.toolName === toolName)
|
|
if (!toolObj || toolObj.isDisabled) return
|
|
var dicomSeries = this.canvasObj[this.currentDicomCanvasIndex]
|
|
if (dicomSeries.isCurrentTask && isMeasuredTool) {
|
|
if (this.activeTool) {
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
if (this.activeTool === toolName) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(toolName)
|
|
this.activeTool = ''
|
|
} else {
|
|
this.activeTool = toolName
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolActive(toolName)
|
|
}
|
|
} else {
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(item.toolName)
|
|
})
|
|
this.activeTool = toolName
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolActive(toolName)
|
|
}
|
|
} else {
|
|
if (!this.activeTool) return
|
|
this.measuredTools.forEach(item => {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(item.toolName)
|
|
})
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(toolName)
|
|
this.activeTool = ''
|
|
}
|
|
} else {
|
|
if (this.activeTool === toolName) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(toolName)
|
|
this.activeTool = ''
|
|
} else {
|
|
this.activeTool = toolName
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolActive(toolName)
|
|
}
|
|
}
|
|
},
|
|
// 设置测量工具禁用(不会对输入作出反应)
|
|
setToolEnabled() {
|
|
var dicomSeries = this.canvasObj[this.currentDicomCanvasIndex]
|
|
if (!dicomSeries.isCurrentTask) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
this.activeTool = ''
|
|
return
|
|
}
|
|
if (this.activeTool) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolEnabled(this.activeTool)
|
|
this.activeTool = ''
|
|
}
|
|
},
|
|
// 影像适应图像/适应窗口
|
|
fitToType(toolName) {
|
|
if (this.activeTool !== 'fitToWindow' && this.activeTool !== 'fitToImage') {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolPassive(this.activeTool)
|
|
}
|
|
if (toolName === 'fitToWindow') {
|
|
this.fitType = 0
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].fitToWindow()
|
|
} else if (toolName === 'fitToImage') {
|
|
this.fitType = 1
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].fitToImage()
|
|
}
|
|
this.activeTool = toolName
|
|
},
|
|
// 切换帧
|
|
scrollPage(i) {
|
|
// 获取影像是否下载完成
|
|
const isLoaded = this.getSeriesLoadStatus()
|
|
if (!isLoaded) return
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(i)
|
|
},
|
|
// 播放/暂停
|
|
toggleClipPlay(isPlay) {
|
|
// 获取影像是否下载完成
|
|
const isLoaded = this.getSeriesLoadStatus()
|
|
if (!isLoaded) return
|
|
this.clipPlaying = isPlay
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(this.fps)
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay(isPlay)
|
|
},
|
|
getSeriesLoadStatus() {
|
|
const index = this.visitTaskList.findIndex(i => i.VisitTaskId === this.activeSeries.visitTaskId)
|
|
if (index === -1) return false
|
|
const loadStatus = this.visitTaskList[index].StudyList[this.activeSeries.studyIndex].SeriesList[this.activeSeries.seriesIndex].loadStatus
|
|
return loadStatus
|
|
},
|
|
setDicomCanvasfps(event) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(event.target.value)
|
|
},
|
|
// 添加标记
|
|
setMeasureData(data) {
|
|
if (this.CriterionType === 21 || this.CriterionType === 22) {
|
|
if (this.tmpData) {
|
|
data.tableQuestionId = this.tmpData.Id
|
|
data.tableQuestionMark = this.tmpData.QuestionMark
|
|
this.$refs['measurementList'].setMeasuredData(data)
|
|
}
|
|
} else {
|
|
this.$refs['measurementList'].setMeasuredData(data)
|
|
}
|
|
this.activeTool = ''
|
|
|
|
},
|
|
// 修改标记
|
|
modifyMeasureData(data) {
|
|
if ((this.CriterionType === 21 || this.CriterionType === 22) && data.measureData.tableQuestionId) {
|
|
this.$refs['measurementList'].modifyMeasuredData(data)
|
|
} else {
|
|
this.$refs['measurementList'].modifyMeasuredData(data)
|
|
}
|
|
this.activeTool = ''
|
|
|
|
},
|
|
async saveImage() {
|
|
// this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].saveImage()
|
|
// canvas为转换后的Canvas对象
|
|
const divForDownloadViewport = document.querySelector(
|
|
`div[data-canvas-uid="dicomCanvas${this.currentDicomCanvasIndex}"]`
|
|
)
|
|
var canvas = await html2canvas(divForDownloadViewport)
|
|
let oImg = new Image()
|
|
oImg = canvas.toDataURL('image/png', 1)// 导出图片
|
|
var oA = document.createElement('a')
|
|
var subjectCode = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].subjectCode
|
|
var taskBlindName = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack.taskBlindName
|
|
var timestamp = Date.now()
|
|
oA.download = `${subjectCode}_${taskBlindName}_${timestamp}`// 设置下载的文件名，默认是'下载'
|
|
oA.href = oImg
|
|
document.body.appendChild(oA)
|
|
oA.click()
|
|
oA.remove() // 下载之后把创建的元素删除
|
|
},
|
|
// 设置窗宽/窗位
|
|
setDicomCanvasWwwc(v) {
|
|
if (v.val === -1) {
|
|
// 默认值
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetWwwc()
|
|
} else if (v.val === 0) {
|
|
// 自定义
|
|
this.setCustomWwwc()
|
|
} else if (v.val === 1) {
|
|
// 区域窗宽
|
|
// this.setToolActive('WwwcRegion', false)
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setToolActive('WwwcRegion')
|
|
} else if (v.val === 8) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleInvert()
|
|
} else {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setWwwc(v.ww, v.wc)
|
|
}
|
|
},
|
|
setCustomWwwc() {
|
|
var wwwc = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].dicomInfo.wwwc
|
|
this.activeCanvasWW = wwwc ? parseInt(wwwc.split('/')[0]) : null
|
|
this.activeCanvasWC = wwwc ? parseInt(wwwc.split('/')[1]) : null
|
|
this.customWwc.visible = true
|
|
},
|
|
setWwwc(v) {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setWwwc(v.ww, v.wc)
|
|
this.customWwc.visible = false
|
|
},
|
|
toggleInvert() {
|
|
if (this.activeTool === 'reversecolor') {
|
|
// this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetWwwc()
|
|
this.activeTool = ''
|
|
} else {
|
|
this.activeTool = 'reversecolor'
|
|
// this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleInvert()
|
|
}
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleInvert()
|
|
},
|
|
setImageIndexSync() {
|
|
this.isScrollSync = !this.isScrollSync
|
|
},
|
|
scrollSync(obj) {
|
|
for (var i = 0; i < this.maxCanvas; i++) {
|
|
if (i !== this.currentDicomCanvasIndex) {
|
|
this.$refs[`dicomCanvas${i}`][0].scrollPage(obj.offset)
|
|
}
|
|
}
|
|
},
|
|
showPanel(e) {
|
|
e.currentTarget.firstChild.lastChild.style.display = 'block'
|
|
},
|
|
handleMouseout(e) {
|
|
e.currentTarget.firstChild.lastChild.style.display = 'none'
|
|
},
|
|
// 预览临床数据
|
|
previewCD() {
|
|
this.$emit('previewCD')
|
|
},
|
|
previewNoneDicoms() {
|
|
this.$emit('previewNoneDicoms')
|
|
},
|
|
previewManuals(justKeyDoc = false) {
|
|
this.isFullscreen = false
|
|
this.manualsDialog.visible = true
|
|
this.manualsDialog.justKeyDoc = justKeyDoc
|
|
},
|
|
async skipTask() {
|
|
// 是否确认跳过？
|
|
const confirm = await this.$confirm(
|
|
this.$t('trials:readingReport:message:skipConfirm'),
|
|
{
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
}
|
|
)
|
|
if (confirm !== 'confirm') return
|
|
// const loading = this.$loading({ fullscreen: true })
|
|
try {
|
|
const idx = this.visitTaskList.findIndex(i => i.IsCurrentTask)
|
|
if (idx > -1) {
|
|
var visitTaskId = this.visitTaskList[idx].VisitTaskId
|
|
const res = await setSkipReadingCache({ visitTaskId: visitTaskId })
|
|
if (res.IsSuccess) {
|
|
window.location.reload()
|
|
}
|
|
}
|
|
// loading.close()
|
|
} catch (e) {
|
|
// loading.close()
|
|
console.log(e)
|
|
}
|
|
},
|
|
async submit() {
|
|
if (this.submitLoading) return
|
|
this.submitLoading = true
|
|
const loading = this.$loading({ fullscreen: true })
|
|
try {
|
|
const idx = this.visitTaskList.findIndex(i => i.IsCurrentTask)
|
|
if (idx > -1) {
|
|
var visitTaskId = this.visitTaskList[idx].VisitTaskId
|
|
this.taskId = visitTaskId
|
|
await verifyVisitTaskQuestions({ visitTaskId: visitTaskId })
|
|
const { ImageAssessmentReportConfirmation } = const_.processSignature
|
|
this.signCode = ImageAssessmentReportConfirmation
|
|
this.signVisible = true
|
|
}
|
|
loading.close()
|
|
} catch (e) {
|
|
loading.close()
|
|
} finally {
|
|
this.submitLoading = false
|
|
}
|
|
},
|
|
// 关闭签名框
|
|
closeSignDialog(isSign, signInfo) {
|
|
if (isSign) {
|
|
this.signConfirm(signInfo)
|
|
} else {
|
|
this.signVisible = false
|
|
}
|
|
},
|
|
// 签名并确认
|
|
async signConfirm(signInfo) {
|
|
this.loading = true
|
|
try {
|
|
var params = {
|
|
data: {
|
|
visitTaskId: this.taskId
|
|
},
|
|
signInfo: signInfo
|
|
}
|
|
const res = await submitDicomVisitTask(params)
|
|
if (res.IsSuccess) {
|
|
this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
if (this.$refs['signForm']) {
|
|
this.$refs['signForm'].btnLoading = false
|
|
}
|
|
|
|
this.signVisible = false
|
|
|
|
// 设置当前任务阅片状态为已读
|
|
this.readingTaskState = 2
|
|
await store.dispatch('reading/setVisitTaskReadingTaskState', { visitTaskId: this.visitTaskId, readingTaskState: 2 })
|
|
await store.dispatch('reading/setCurrentReadingTaskState', 2)
|
|
const res = await getAutoCutNextTask({ imageToolType: 1 })
|
|
var isAutoTask = res.Result.AutoCutNextTask
|
|
if (isAutoTask) {
|
|
window.location.reload()
|
|
} else {
|
|
// '当前阅片任务已完成，是否进入下一个阅片任务？'
|
|
this.$confirm(this.$t('trials:readingReport:message:msg4'), {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
window.location.reload()
|
|
})
|
|
.catch(action => {
|
|
changeURLStatic('visitTaskId', this.visitTaskId)
|
|
})
|
|
}
|
|
|
|
window.opener.postMessage('refreshTaskList', window.location)
|
|
}
|
|
this.loading = false
|
|
} catch (e) {
|
|
this.loading = false
|
|
if (this.$refs['signForm'] && this.$refs['signForm'].btnLoading) {
|
|
this.$refs['signForm'].btnLoading = false
|
|
}
|
|
}
|
|
},
|
|
handleFusion() {
|
|
// https 或者 本地开发环境才是安全上下文
|
|
// if (!window.isSecureContext) {
|
|
// this.$alert(this.$t('components:uploadvideo:message:xf3'))
|
|
// return
|
|
// }
|
|
// // 顶部文档是否开启跨源隔离
|
|
// if (!window.crossOriginIsolated) {
|
|
// this.$alert(this.$t('components:uploadvideo:message:xf4'))
|
|
// return
|
|
// }
|
|
if (this.imageQualityIssues && parseInt(this.imageQualityIssues) === 6) {
|
|
this.$alert(this.$t('trials:lugano:message:fusionWarn'))
|
|
return
|
|
}
|
|
const i = this.activeTaskInfo.visitTaskIndex
|
|
if (i < 0) return
|
|
if (this.studyList.length > 0) {
|
|
this.fusionForm.studyID = this.studyList[0].StudyId
|
|
this.handleStudyIdChange(this.studyList[0].StudyId)
|
|
} else {
|
|
this.fusionForm.studyID = ''
|
|
this.ctSeries = []
|
|
this.petSeries = []
|
|
}
|
|
|
|
this.fusionForm.visitTaskId = this.visitTaskList[i].VisitTaskId
|
|
this.fusionForm.readingTaskState = this.visitTaskList[i].ReadingTaskState
|
|
this.fusionForm.taskBlindName = this.visitTaskList[i].TaskBlindName
|
|
this.fusionForm.subjectCode = this.visitTaskList[i].SubjectCode
|
|
this.fusionForm.isBaseLineTask = this.visitTaskList[i].IsBaseLineTask
|
|
this.fusionForm.isCurrentTask = this.visitTaskList[i].IsCurrentTask
|
|
this.fusionSeries.visible = true
|
|
},
|
|
handleStudyIdChange(v) {
|
|
var i = this.studyList.findIndex(i => i.StudyId === v)
|
|
if (i === -1) {
|
|
this.ctSeries = []
|
|
this.petSeries = []
|
|
} else {
|
|
var seriesList = this.studyList[i].SeriesList
|
|
var series = seriesList.filter(series => series.modality === 'CT' || series.modality === 'MR')
|
|
this.ctSeries = series.sort((a, b) => b.instanceCount - a.instanceCount)
|
|
|
|
series = seriesList.filter(series => series.modality === 'PT')
|
|
this.petSeries = series.sort((a, b) => b.instanceCount - a.instanceCount)
|
|
}
|
|
},
|
|
handleCTSelectionChange(rows) {
|
|
if (rows.length > 0) {
|
|
this.ctSeriesInfo = rows[0]
|
|
} else {
|
|
this.ctSeriesInfo = {}
|
|
}
|
|
},
|
|
handleCTSelect(selection) {
|
|
if (selection.length > 1) {
|
|
const del_row = selection.shift()
|
|
this.$refs.ctSeries.toggleRowSelection(del_row, false)
|
|
}
|
|
},
|
|
handlePTSelect(selection) {
|
|
if (selection.length > 1) {
|
|
const del_row = selection.shift()
|
|
this.$refs.petSeries.toggleRowSelection(del_row, false)
|
|
}
|
|
},
|
|
handlePTSelectionChange(rows) {
|
|
if (rows.length > 0) {
|
|
this.petSeriesInfo = rows[0]
|
|
} else {
|
|
this.petSeriesInfo = {}
|
|
}
|
|
},
|
|
async handleSubmitFusionSeries() {
|
|
if (this.fusionSubmitLoading) return
|
|
this.fusionSubmitLoading = true
|
|
try {
|
|
const valid = await this.$refs['fusionForm'].validate()
|
|
if (!valid) return
|
|
if (Object.keys(this.ctSeriesInfo).length === 0 || Object.keys(this.petSeriesInfo).length === 0) {
|
|
// '请选择序列信息！'
|
|
await this.$confirm(this.$t('trials:lugano:fusionDialog:message:checkSeries'), this.$t('trials:lugano:fusionDialog:warning'), {
|
|
showCancelButton: false,
|
|
type: 'warning'
|
|
}).catch(() => { })
|
|
return
|
|
}
|
|
if (this.ctSeriesInfo.instanceCount > 400) {
|
|
let res = await this.getSystemInfo()
|
|
if (!res) return false
|
|
}
|
|
var count = Math.abs(this.ctSeriesInfo.instanceCount - this.petSeriesInfo.instanceCount)
|
|
if (count > 10) {
|
|
// '选择的两组序列，影像数存在较大差距, 是否继续?'
|
|
const confirm = await this.$confirm(this.$t('trials:lugano:fusionDialog:message:validSeries'), this.$t('trials:lugano:fusionDialog:warning'), {
|
|
type: 'warning'
|
|
}).catch(() => false)
|
|
if (confirm !== 'confirm') return
|
|
}
|
|
this.fusion()
|
|
} finally {
|
|
this.fusionSubmitLoading = false
|
|
}
|
|
},
|
|
fusion() {
|
|
// sessionStorage.setItem('ctSeriesInfo', JSON.stringify(this.ctSeriesInfo))
|
|
// sessionStorage.setItem('petSeriesInfo', JSON.stringify(this.petSeriesInfo))
|
|
this.fusionSeries.visible = false
|
|
var token = getToken()
|
|
var trialReadingCriterionId = this.$router.currentRoute.query.TrialReadingCriterionId
|
|
var trialId = this.$router.currentRoute.query.trialId
|
|
var digitPlaces = Number(localStorage.getItem('digitPlaces'))
|
|
var path = `/petct?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&visitTaskId=${this.fusionForm.visitTaskId}&taskBlindName=${this.fusionForm.taskBlindName}&subjectCode=${this.fusionForm.subjectCode}&readingTaskState=${this.fusionForm.readingTaskState}&isBaseLineTask=${this.fusionForm.isBaseLineTask}&isCurrentTask=${this.fusionForm.isCurrentTask}&isReadingShowSubjectInfo=${this.isReadingShowSubjectInfo}&studyId=${this.fusionForm.studyID}&ctseriesId=${this.ctSeriesInfo.seriesId}&ptseriesId=${this.petSeriesInfo.seriesId}&digitPlaces=${digitPlaces}&TokenKey=${token}&lang=${this.$i18n.locale}`
|
|
var routeData = this.$router.resolve({ path })
|
|
if (this.petctWindow) {
|
|
this.petctWindow.close()
|
|
}
|
|
this.petctWindow = window.open(routeData.href, '_blank')
|
|
this.$nextTick(() => { this.petct.visible = true })
|
|
},
|
|
getSystemInfo() {
|
|
return new Promise(async resolve => {
|
|
const systemInfo = new SystemInfo();
|
|
const allInfo = systemInfo.getAllInfo();
|
|
let deviceMemory = allInfo.hardware.deviceMemory; // 设备内存
|
|
let { width, height } = allInfo.screen; // 分辨率
|
|
let discrete = allInfo.webgl.gpuType.discrete; // 是否独立显卡
|
|
let estimatedMemory = allInfo.webgl.memoryInfo.estimatedMemory; // 显卡内存
|
|
// parseFloat(deviceMemory) < 16 ||
|
|
if (width < 1920 || height < 1080 || !discrete || parseFloat(estimatedMemory) < 2) {
|
|
let res = await this.$confirm(this.$t('browser:tip:ReadingConfiguration'))
|
|
resolve(res)
|
|
} else {
|
|
resolve(true)
|
|
}
|
|
|
|
})
|
|
},
|
|
async getSystemInfoReading() {
|
|
return new Promise(async resolve => {
|
|
let whitelisting = localStorage.getItem('whitelisting') ? JSON.parse(localStorage.getItem('whitelisting')) : []
|
|
let user = md5(sessionStorage.getItem('identityUserId'))
|
|
let r = whitelisting.some(item => item === user)
|
|
if (r) return resolve(true)
|
|
const systemInfo = new SystemInfo();
|
|
const allInfo = systemInfo.getAllInfo();
|
|
let deviceMemory = allInfo.hardware.deviceMemory; // 设备内存
|
|
let { width, height } = allInfo.screen; // 分辨率
|
|
// let discrete = allInfo.webgl.gpuType.discrete; // 是否独立显卡
|
|
// let estimatedMemory = allInfo.webgl.memoryInfo.estimatedMemory; // 显卡内存
|
|
// parseFloat(deviceMemory) < 16 ||
|
|
if (width < 1920 || height < 1080) {
|
|
let res = await this.$confirm(this.$t('browser:tip:Configuration'))
|
|
whitelisting.push(user)
|
|
localStorage.setItem('whitelisting', JSON.stringify(whitelisting))
|
|
resolve(res)
|
|
} else {
|
|
resolve(true)
|
|
}
|
|
})
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dicom-viewer-wrapper {
|
|
height: 100%;
|
|
padding: 5px 0px 5px 5px;
|
|
box-sizing: border-box;
|
|
|
|
.divider {
|
|
display: block;
|
|
height: 1px;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
// background-color: #383838;
|
|
// color: #fff;
|
|
// background-color: #DCDFE6;
|
|
}
|
|
|
|
.el-divider__text {
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
background-color: #383838;
|
|
font-size: 12px;
|
|
width: 80px;
|
|
}
|
|
|
|
.dicom-viewer-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
.dicom-tools {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 80px;
|
|
padding: 0 5px;
|
|
border: 1px solid #727272;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.tool-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
|
|
.icon {
|
|
padding: 5px;
|
|
border: 1px solid #404040;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
|
|
.svg-icon {
|
|
font-size: 20px;
|
|
color: #ddd;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
position: relative;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
color: #d0d0d0;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tool-frame {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
border: 1px solid #404040;
|
|
|
|
.icon {
|
|
padding: 5px;
|
|
border-right: 1px solid #404040;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
|
|
.svg-icon {
|
|
font-size: 20px;
|
|
color: #ddd;
|
|
}
|
|
}
|
|
|
|
.select-wrapper {
|
|
width: 60px;
|
|
background-color: black;
|
|
color: #ddd;
|
|
border: none;
|
|
font-size: 13px;
|
|
outline: none;
|
|
}
|
|
|
|
.text {
|
|
position: relative;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
color: #d0d0d0;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tool_active {
|
|
background-color: #607d8b;
|
|
}
|
|
|
|
.tool_disabled {
|
|
cursor: not-allowed
|
|
}
|
|
|
|
.icon:hover {
|
|
background-color: #607d8b;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
.text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #383838;
|
|
color: #fff;
|
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
z-index: 9999;
|
|
font-size: 12px;
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
|
|
li {
|
|
a {
|
|
display: block;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul li:hover {
|
|
background-color: #727272;
|
|
}
|
|
}
|
|
|
|
// .dropdown:hover .dropdown-content {
|
|
// display: block;
|
|
|
|
// }
|
|
.layout-content ul li {
|
|
border-top: 1px solid #ddd;
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
|
|
.layout-content ul .flex_row {
|
|
// border: 1px solid #ddd;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
// padding: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.layout-content ul .flex_column {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.layout_box_1_1 {
|
|
flex: 1;
|
|
// border: 1px solid #ddd;
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #ddd;
|
|
border-right: 1px solid #ddd;
|
|
// padding: 0 5px;
|
|
}
|
|
|
|
.layout_box_1_2 {
|
|
flex: 1;
|
|
// border: 1px solid #ddd;
|
|
line-height: 15px;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #ddd;
|
|
border-right: 1px solid #ddd;
|
|
// padding: 0 5px;
|
|
}
|
|
|
|
.layout-content li .layout_box_1_1 :last-child {
|
|
color: red;
|
|
}
|
|
|
|
// .layout_li:last-child{
|
|
// .layout_box{
|
|
// border-bottom: none;
|
|
// }
|
|
// }
|
|
.layout-content li:hover {
|
|
cursor: pointer;
|
|
background-color: #727272;
|
|
}
|
|
|
|
}
|
|
|
|
.dicom-viewers {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
// width: 100%;
|
|
margin-top: 5px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
|
|
.form-container {
|
|
// box-sizing: border-box;
|
|
width: 350px;
|
|
// height: 100vh;
|
|
border: 1px solid #727272;
|
|
// position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: .5s;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.list_btn {
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
border: 1px solid #607d8b;
|
|
top: 0px;
|
|
left: -25px;
|
|
z-index: 99;
|
|
color: #d5d5d5;
|
|
background-color: #424242;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.listHide {
|
|
width: 20px;
|
|
transition: .5s;
|
|
}
|
|
|
|
.form-wrapper {
|
|
flex-grow: 1;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-footer {
|
|
background: #000;
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.viewer-container {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
height: 100%;
|
|
border: 1px solid #727272;
|
|
}
|
|
|
|
.measurement-container {
|
|
// height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.box {
|
|
display: grid;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
.item {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.21);
|
|
position: relative;
|
|
|
|
&_active {
|
|
// border: 2px solid #ffeb3b;fff;#428bca
|
|
// border: 1.5px dashed #ffeb3b;
|
|
border: 1px dashed rgb(250, 250, 0);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.box_1_1 {
|
|
grid-template-columns: repeat(1, 100%); //1列，占100%
|
|
grid-template-rows: repeat(1, 100%); //1行，占100%
|
|
}
|
|
|
|
.box_1_2 {
|
|
grid-template-columns: repeat(2, 50%); //1列，占50%
|
|
grid-template-rows: repeat(1, 100%); //1行，占100%
|
|
}
|
|
|
|
.box_2_1 {
|
|
grid-template-columns: repeat(1, 100%); //1列，占100%
|
|
grid-template-rows: repeat(2, 50%); //1行，占50%
|
|
}
|
|
|
|
.box_2_2 {
|
|
grid-template-columns: repeat(2, 50%); //1列，占50%
|
|
grid-template-rows: repeat(2, 50%); //1行，占50%
|
|
}
|
|
|
|
// .box_3_1{
|
|
// grid-template-columns: repeat(3, 100%); //1列，占100%
|
|
// grid-template-rows: repeat(3, 33.33%); //1行，占100%
|
|
// }
|
|
// .box_3_2{
|
|
// grid-template-columns: repeat(3, 50%); //1列，占100%
|
|
// grid-template-rows: repeat(3, 50%); //1行，占100%
|
|
// }
|
|
// .box_3_3{
|
|
// grid-template-columns: repeat(3, 33.33%); //1列，占100%
|
|
// grid-template-rows: repeat(3, 33.33%); //1行，占100%
|
|
// }
|
|
|
|
}
|
|
|
|
.personal_config {
|
|
::v-deep .el-tabs__content {
|
|
height: 450px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
::v-deep .manuals-dialog-container {
|
|
margin-top: 50px !important;
|
|
width: 75%;
|
|
height: 80%;
|
|
|
|
.el-dialog__body {
|
|
padding: 10px;
|
|
height: calc(100% - 50px) !important;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
::v-deep .manuals-full-dialog-container {
|
|
.el-dialog__body {
|
|
padding: 10px;
|
|
height: calc(100% - 50px) !important;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.petct_wrapper {
|
|
position: absolute;
|
|
left: -205px;
|
|
right: 345px;
|
|
height: 100%;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.series-table {
|
|
::v-deep .el-table {
|
|
background-color: #1e1e1e !important;
|
|
color: #dfdfdf;
|
|
}
|
|
|
|
::v-deep .el-table td.el-table__cell,
|
|
.el-table th.el-table__cell.is-leaf {
|
|
border-bottom: 1px solid #dfdfdf;
|
|
}
|
|
|
|
.el-table--border::after,
|
|
.el-table--group::after,
|
|
.el-table::before {
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
::v-deep .el-table__header-wrapper {
|
|
th {
|
|
background-color: #1e1e1e !important;
|
|
color: #dfdfdf;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-table__body-wrapper {
|
|
tr {
|
|
background-color: #1e1e1e !important;
|
|
color: #dfdfdf;
|
|
}
|
|
|
|
tr:hover>td {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-table__empty-block {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.listBox-leave-active,
|
|
.listBox-enter-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.listBox-leave-active,
|
|
.listBox-enter {
|
|
// width: 0px !important;
|
|
flex-grow: 0 !important;
|
|
}
|
|
|
|
.listBox-leave,
|
|
.listBox-enter-active {
|
|
// width: 350px;
|
|
flex-grow: 1;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.key-series-popper {
|
|
padding: 8px !important;
|
|
background-color: #1e1e1e !important;
|
|
border: 1px solid #4a4a4a !important;
|
|
|
|
.key-series-list {
|
|
width: 340px;
|
|
max-height: 420px;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #4a4a4a;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.key-series-header {
|
|
padding: 5px 12px;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
|
|
border: 1px solid #474747;
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.key-series-header-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.key-series-header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.key-series-header-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-right: 8px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
|
|
box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
|
|
}
|
|
|
|
.key-series-task-name {
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 22px;
|
|
word-break: break-all;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.key-series-empty {
|
|
text-align: center;
|
|
color: #999;
|
|
padding: 10px;
|
|
}
|
|
|
|
.key-series-item {
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid #353535;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
|
|
// transition: all 0.2s ease;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
|
|
border-color: #5a5a5a;
|
|
// transform: translateY(-1px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.key-series-img {
|
|
width: 60px;
|
|
height: 60px;
|
|
flex-shrink: 0;
|
|
background-color: #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
margin-right: 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid #3a3a3a;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.default-icon {
|
|
font-size: 24px;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.key-series-info {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding-right: 5px;
|
|
|
|
.key-series-meta {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.key-series-label {
|
|
font-size: 13px;
|
|
color: #aaa;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.key-series-uid {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
color: #ddd;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
|
|
.key-series-star {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: rgba(243, 156, 18, 0.08);
|
|
border: 1px solid rgba(243, 156, 18, 0.16);
|
|
|
|
.svg-icon {
|
|
color: #f39c12;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|