2600 lines
82 KiB
Vue
2600 lines
82 KiB
Vue
<template>
|
|
<div class="dicom-viewer-wrapper">
|
|
<div class="dicom-viewer-container">
|
|
<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; padding: 0 10px">
|
|
<li v-for="item in wwwcArr" :key="item.label">
|
|
<a href="#" @click.prevent="setDicomCanvasWwwc(item)">
|
|
<div
|
|
v-if="item.wc"
|
|
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"
|
|
>
|
|
<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"
|
|
>
|
|
<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"
|
|
>
|
|
<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; padding: 0 10px">
|
|
<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"
|
|
>
|
|
<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"
|
|
>
|
|
<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>
|
|
|
|
<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
|
|
class="item"
|
|
effect="dark"
|
|
:content="`${$t('trials:dicom-show:Eraser')}`"
|
|
placement="bottom"
|
|
>
|
|
<div class="tool-wrapper">
|
|
<div
|
|
class="icon"
|
|
:class="[activeTool === 'Eraser' ? 'tool_active' : '']"
|
|
data-tool="Zoom"
|
|
@click.prevent="setToolActive('Eraser', false)"
|
|
>
|
|
<svg-icon icon-class="clear" class="svg-icon" />
|
|
</div>
|
|
<!-- 缩放 -->
|
|
<div class="text">{{ $t("trials:dicom-show:Eraser") }}</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">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>
|
|
<el-tooltip
|
|
v-if="trialCriterion.ImageUploadEnum > 0"
|
|
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">
|
|
<el-button
|
|
v-if="isExistsManual"
|
|
type="text"
|
|
@click="previewManuals"
|
|
>{{ $t("trials:reading:button:handbooks") }}</el-button>
|
|
<!-- 临床数据 -->
|
|
<el-button
|
|
v-if="isExistsClinicalData"
|
|
type="text"
|
|
@click="previewCD"
|
|
>{{ $t("trials:reading:button:clinicalData") }}</el-button>
|
|
<!-- <el-button v-if="isExistsNoDicomFile" type="text" @click="previewNoneDicoms">非Dicom文件</el-button> -->
|
|
|
|
<el-button type="text" @click="previewConfig">{{
|
|
$t("trials:reading:button:customCfg")
|
|
}}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dicom-viewers">
|
|
<div
|
|
ref="container"
|
|
class="viewer-container"
|
|
:class="['box', `box_${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: canvasW, height: 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"
|
|
@setMeasureData="setMeasureData"
|
|
@modifyMeasureData="modifyMeasureData"
|
|
@scrollSync="scrollSync"
|
|
@selectViewCanvas="selectViewCanvas"
|
|
@setCornerstoneStyle="setCornerstoneStyle(i - 1)"
|
|
@moveMeasureData="moveMeasureData"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div ref="form-container" class="form-container">
|
|
<!-- 激活canvas测量数据 -->
|
|
<MeasurementList
|
|
ref="measurementList"
|
|
:ise-c-r-f-show-in-dicom-reading="IseCRFShowInDicomReading"
|
|
:is-reading-show-subject-info="isReadingShowSubjectInfo"
|
|
/>
|
|
</div>
|
|
</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 @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>
|
|
<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'" />
|
|
</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" />
|
|
</div>
|
|
</el-dialog>
|
|
<!-- <button :title="$t('trials:dicom-show:Eraser')" class="btn-link" data-tool="Eraser" @click="setToolActive($event,'Eraser')">-->
|
|
<!-- <svg-icon icon-class="clear" style="font-size:20px;" />-->
|
|
<!-- </button>-->
|
|
<upload-image
|
|
v-if="uploadImageVisible"
|
|
:visible.sync="uploadImageVisible"
|
|
:subject-id="subjectId"
|
|
:criterion="trialCriterion"
|
|
:status="uploadStatus"
|
|
/>
|
|
</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 DicomCanvas from './DicomCanvas'
|
|
import DicomCanvas from '@/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue'
|
|
import MeasurementList from './CustomizeMeasurementList'
|
|
import CustomWwwcForm from './CustomWwwcForm'
|
|
import Manuals from './Manuals'
|
|
import Hotkeys from './Hotkeys'
|
|
import WL from './WL'
|
|
import Others from './Others'
|
|
import DicomEvent from './../components/DicomEvent'
|
|
import { mapGetters } from 'vuex'
|
|
import store from '@/store'
|
|
import { getDoctorShortcutKey, getUserWLTemplateList } from '@/api/user'
|
|
import uploadImage from '@/components/uploadImage'
|
|
import { getCriterionReadingInfo } from '@/api/trials'
|
|
export default {
|
|
name: 'DicomViewer',
|
|
components: {
|
|
DicomCanvas,
|
|
CustomWwwcForm,
|
|
Hotkeys,
|
|
WL,
|
|
Others,
|
|
Manuals,
|
|
MeasurementList,
|
|
'upload-image': uploadImage
|
|
},
|
|
props: {
|
|
isExistsClinicalData: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isExistsNoDicomFile: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isExistsManual: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isReadingShowSubjectInfo: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isReadingTaskViewInOrder: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
IseCRFShowInDicomReading: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
subjectId: {
|
|
type: String,
|
|
required: true,
|
|
default: ''
|
|
},
|
|
trialReadingCriterionId: {
|
|
type: String,
|
|
required: true,
|
|
default: ''
|
|
},
|
|
trialId: {
|
|
type: String,
|
|
required: true,
|
|
default: ''
|
|
}
|
|
},
|
|
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: 'CircleRoi',
|
|
text: this.$t('trials:reading:button:elliptical'),
|
|
icon: 'oval',
|
|
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 }
|
|
],
|
|
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 },
|
|
clipPlaying: false,
|
|
fps: 15,
|
|
// 上传
|
|
uploadImageVisible: false,
|
|
trialCriterion: {},
|
|
uploadStatus: 'upload'
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(['visitTaskList', 'currentReadingTaskState'])
|
|
},
|
|
watch: {
|
|
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 = ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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() {
|
|
this.getTrialCriterion()
|
|
this.getHotKeys()
|
|
this.getWwcTpl()
|
|
// cornerstone.imageCache.setMaximumSizeBytes(0)
|
|
|
|
// const maximumSizeInBytes = 1024 * 1024 * 1024 * 3 // 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: ''
|
|
}
|
|
]
|
|
}
|
|
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;
|
|
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', (callback) => {
|
|
var base64Str =
|
|
this.$refs[
|
|
`dicomCanvas${this.currentDicomCanvasIndex}`
|
|
][0].getScreenshots()
|
|
callback(base64Str)
|
|
console.log('getScreenshots')
|
|
})
|
|
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')
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
DicomEvent.$off('updateImage')
|
|
DicomEvent.$off('getMeasureData')
|
|
DicomEvent.$off('imageLocation')
|
|
DicomEvent.$off('setReadingState')
|
|
DicomEvent.$off('loadImageStacks')
|
|
DicomEvent.$off('loadLinkedImageStack')
|
|
},
|
|
methods: {
|
|
getTrialCriterion() {
|
|
getCriterionReadingInfo({
|
|
TrialId: this.trialId,
|
|
TrialReadingCriterionId: this.trialReadingCriterionId
|
|
})
|
|
.then((res) => {
|
|
this.trialCriterion = res.Result
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
openUploadImage(status) {
|
|
this.uploadStatus = status
|
|
this.uploadImageVisible = true
|
|
},
|
|
async getWwcTpl() {
|
|
// const loading = this.$loading({ fullscreen: true })
|
|
try {
|
|
let 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 {
|
|
let res = await getDoctorShortcutKey({ imageToolType: 0 })
|
|
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
|
|
console.log(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()
|
|
},
|
|
previewConfig() {
|
|
this.activeName = '1'
|
|
this.personalConfigDialog.visible = true
|
|
},
|
|
setCornerstoneStyle(i) {
|
|
if (this.cornerstoneStyle.position) {
|
|
this.cornerstoneStyle = {}
|
|
this.setCanvasStyle()
|
|
} else {
|
|
this.cornerstoneStyle = {
|
|
position: 'absolute',
|
|
top: '72px',
|
|
left: '205px',
|
|
right: '350px',
|
|
zIndex: 10
|
|
}
|
|
this.canvasW = window.innerWidth - 570 + 'px'
|
|
this.canvasH = window.innerHeight - 130 + 'px'
|
|
}
|
|
this.$nextTick(() => {
|
|
// this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].reloadCanvas()
|
|
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)
|
|
}
|
|
this.$refs[`dicomCanvas${index}`][0].loadImageStack(series)
|
|
|
|
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
|
|
if (this.activeTool) {
|
|
// dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2
|
|
if (dicomSeries.isCurrentTask) {
|
|
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.$nextTick(() => {
|
|
this.activeSeries = dicomSeries
|
|
this.$refs[
|
|
`dicomCanvas${this.currentDicomCanvasIndex}`
|
|
][0].loadImageStack(dicomSeries)
|
|
// 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
|
|
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
|
|
this.$refs[`dicomCanvas${canvasIndex}`][0].loadImageStack(dicomSeries)
|
|
|
|
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) => {
|
|
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]
|
|
promiseArr.push(
|
|
this.$refs[`dicomCanvas${i}`][0].loadImageStack(seriesStack[i])
|
|
)
|
|
}
|
|
Promise.all(promiseArr)
|
|
.then(() => {
|
|
// this.activateDicomCanvas(this.currentDicomCanvasIndex)
|
|
resolve()
|
|
})
|
|
.catch(() => {
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
// 根据病灶标识定位图像
|
|
|
|
// 最后一个窗口显示当前访视下病灶所在的影像序列
|
|
// 其他窗口显示该病灶第一次出现的序列信息
|
|
async imageLocation(obj) {
|
|
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) 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
|
|
})
|
|
}
|
|
firstAddSeries = this.getSeriesInfoByMark(firstAddVisitTaskId, obj)
|
|
}
|
|
|
|
// 获取当前访视病灶所在的序列
|
|
currentAddSeries = this.getSeriesInfoByMark(activeCanvasTaskId, obj)
|
|
if (!firstAddSeries && currentAddSeries) {
|
|
// 存在首次出现的病灶及当前病灶
|
|
firstAddSeries = currentAddSeries
|
|
} else if (!firstAddSeries && !currentAddSeries) {
|
|
// 当前新病灶，且未画标记则显示当前的序列信息，不做处理
|
|
loading && loading.close()
|
|
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) {
|
|
loadImagePromises.push(
|
|
this.$refs[`dicomCanvas${i}`][0].loadImageStack(currentAddSeries)
|
|
)
|
|
this.currentDicomCanvasIndex = i
|
|
this.activeSeries = currentAddSeries
|
|
store.dispatch('reading/setActiveSeries', currentAddSeries)
|
|
} else {
|
|
loadImagePromises.push(
|
|
this.$refs[`dicomCanvas${i}`][0].loadImageStack(firstAddSeries)
|
|
)
|
|
}
|
|
}
|
|
Promise.all(loadImagePromises).then(() => {
|
|
this.isScrollSync = isScrollSync
|
|
})
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
},
|
|
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
|
|
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];
|
|
let frame = this.visitTaskList[index].MeasureData[idx].MeasureData.frame
|
|
let filterStr = series.isExistMutiFrames ? `frame=${frame}&instanceId=${instanceId}` : `instanceId=${instanceId}`
|
|
var instanceIdx = series.imageIds.findIndex(imageId => imageId.includes(filterStr))
|
|
// var instanceIdx = series.instanceList.findIndex(
|
|
// (imageId) => !!~imageId.indexOf(instanceId)
|
|
// );
|
|
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.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) {
|
|
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
|
|
},
|
|
|
|
// 设置画布大小
|
|
setCanvasStyle() {
|
|
this.canvasW = (window.innerWidth - 570) / this.layoutCol + 'px'
|
|
this.canvasH = (window.innerHeight - 130) / this.layoutRow + 'px'
|
|
},
|
|
// 切换布局
|
|
changeLayout(name) {
|
|
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
|
|
// series.isCurrentTask && series.readingTaskState < 2
|
|
if (series.isCurrentTask) {
|
|
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'
|
|
}
|
|
// var stack = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
|
|
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 {
|
|
this.measuredTools[i].isDisabled = false
|
|
e.target.style.cursor = 'pointer'
|
|
}
|
|
},
|
|
// 设置测量工具启用(不会对输入作出反应)
|
|
setToolActive(toolName, isMeasuredTool, e, type) {
|
|
console.log('setToolActive', toolName)
|
|
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 &&
|
|
dicomSeries.readingTaskState < 2
|
|
) {
|
|
if (this.activeTool && !type) {
|
|
this.measuredTools.forEach((item) => {
|
|
this.$refs[
|
|
`dicomCanvas${this.currentDicomCanvasIndex}`
|
|
][0].setToolPassive(item.toolName)
|
|
})
|
|
this.$refs[
|
|
`dicomCanvas${this.currentDicomCanvasIndex}`
|
|
][0].setToolPassive(toolName)
|
|
// this.activeTool = ''
|
|
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 (dicomSeries.isCurrentTask &&
|
|
isMeasuredTool && dicomSeries.readingTaskState >= 2) {
|
|
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)
|
|
}
|
|
} 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) {
|
|
this.$refs['measurementList'].setMeasuredData(data)
|
|
this.activeTool = ''
|
|
},
|
|
// 修改标记
|
|
modifyMeasureData(data) {
|
|
data.temporary = this.readingTaskState >= 2 && !data.Id
|
|
this.$refs['measurementList'].modifyMeasuredData(data)
|
|
this.activeTool = ''
|
|
},
|
|
// 删除标记
|
|
moveMeasureData(data) {
|
|
this.$confirm(
|
|
this.$t('trials:trials-list:table:isDeleted') +
|
|
data.questionInfo.MeasureData.data.remark +
|
|
'?'
|
|
).then(() => {
|
|
this.$refs['measurementList'].moveMeasureData(data)
|
|
})
|
|
},
|
|
saveImage() {
|
|
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].saveImage()
|
|
},
|
|
// 设置窗宽/窗位
|
|
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() {
|
|
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()
|
|
}
|
|
},
|
|
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() {
|
|
this.isFullscreen = false
|
|
this.manualsDialog.visible = 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 0px;
|
|
}
|
|
}
|
|
}
|
|
ul li:hover a {
|
|
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: 100%;
|
|
border: 1px solid #727272;
|
|
// overflow-y: auto;
|
|
}
|
|
.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;
|
|
border: 1px dashed #428bca;
|
|
}
|
|
}
|
|
}
|
|
.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 {
|
|
/deep/ .el-tabs__content {
|
|
height: 450px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
/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;
|
|
}
|
|
}
|
|
/deep/ .manuals-full-dialog-container {
|
|
.el-dialog__body {
|
|
padding: 10px;
|
|
height: calc(100% - 50px) !important;
|
|
}
|
|
.el-dialog__header {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
</style>
|