阅片页面增加患者信息、检查信息
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
ae2cb2c5fb
commit
64581a3e07
|
|
@ -1,15 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
id="canvas"
|
||||
ref="canvas"
|
||||
v-loading="loading"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
style="position:relative;"
|
||||
class="cornerstone-element"
|
||||
@mouseup="sliderMouseup"
|
||||
@contextmenu.prevent="onContextmenu"
|
||||
>
|
||||
<div id="canvas" ref="canvas" v-loading="loading" element-loading-text="Loading..."
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" style="position:relative;" class="cornerstone-element"
|
||||
@mouseup="sliderMouseup" @contextmenu.prevent="onContextmenu">
|
||||
<!-- 临床数据 -->
|
||||
<div v-if="stack.isExistsClinicalData" class="info-cd" @click.stop="handleViewCD($event)">
|
||||
<el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')" placement="bottom">
|
||||
|
|
@ -18,46 +10,40 @@
|
|||
|
||||
</div>
|
||||
<!-- 切换访视 -->
|
||||
<div
|
||||
v-if="stack.imageRendered && isReadingTaskViewInOrder === 1"
|
||||
class="info-visit"
|
||||
@dblclick.stop="preventDefault($event)"
|
||||
>
|
||||
<div
|
||||
class="arrw_div_wrapper"
|
||||
:style="{cursor:stack.visitTaskNum <= minVistNum?'not-allowed':'pointer',color:stack.visitTaskNum <= minVistNum?'#888':'#fff'}"
|
||||
@click.stop.prevent="toggleSeries($event,-1)"
|
||||
@dblclick.stop="preventDefault($event)"
|
||||
>
|
||||
<div v-if="stack.imageRendered && isReadingTaskViewInOrder === 1" class="info-visit"
|
||||
@dblclick.stop="preventDefault($event)">
|
||||
<div class="arrw_div_wrapper"
|
||||
:style="{ cursor: stack.visitTaskNum <= minVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum <= minVistNum ? '#888' : '#fff' }"
|
||||
@click.stop.prevent="toggleSeries($event, -1)" @dblclick.stop="preventDefault($event)">
|
||||
<i class="el-icon-caret-left" />
|
||||
</div>
|
||||
<div class="blind_name_wrapper">
|
||||
{{ stack.taskBlindName }}
|
||||
</div>
|
||||
<div
|
||||
class="arrw_div_wrapper"
|
||||
:style="{cursor:stack.visitTaskNum >= maxVistNum?'not-allowed':'pointer',color:stack.visitTaskNum >= maxVistNum?'#888':'#fff'}"
|
||||
@click.stop.prevent="toggleSeries($event,1)"
|
||||
@dblclick.stop="preventDefault($event)"
|
||||
>
|
||||
<div class="arrw_div_wrapper"
|
||||
:style="{ cursor: stack.visitTaskNum >= maxVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum >= maxVistNum ? '#888' : '#fff' }"
|
||||
@click.stop.prevent="toggleSeries($event, 1)" @dblclick.stop="preventDefault($event)">
|
||||
<i class="el-icon-caret-right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-series">
|
||||
<h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{ stack.taskBlindName }}</h2>
|
||||
<h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{
|
||||
stack.taskBlindName }}</h2>
|
||||
<div v-show="dicomInfo.series">Series: #{{ dicomInfo.series }}</div>
|
||||
<div>Image: #{{ dicomInfo.frame }}</div>
|
||||
<div>{{ dicomInfo.modality }}</div>
|
||||
</div>
|
||||
<div class="info-image">
|
||||
<div v-show="mousePosition.mo">
|
||||
Pos: {{ mousePosition.x?mousePosition.x.toFixed(0):'' }}, {{ mousePosition.y?mousePosition.y.toFixed(0):'' }}
|
||||
Pos: {{ mousePosition.x ? mousePosition.x.toFixed(0) : '' }}, {{ mousePosition.y ? mousePosition.y.toFixed(0) :
|
||||
'' }}
|
||||
</div>
|
||||
<div v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
|
||||
<div
|
||||
v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
|
||||
HU: {{ mousePosition.mo }}
|
||||
</div>
|
||||
<div v-else-if="(dicomInfo.modality === 'PT' && mousePosition.suv)">
|
||||
SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.suv.toFixed(3) :mousePosition.suv.toFixed(digitPlaces) }}
|
||||
SUVbw(g/ml): {{ digitPlaces === -1 ? mousePosition.suv.toFixed(3) : mousePosition.suv.toFixed(digitPlaces) }}
|
||||
</div>
|
||||
<div v-else-if="mousePosition.mo">
|
||||
Density: {{ mousePosition.mo }}
|
||||
|
|
@ -75,14 +61,20 @@
|
|||
<div class="info-subject">
|
||||
<div>{{ stack.description }}</div>
|
||||
<!-- <div>{{ dicomInfo.hospital }}</div> -->
|
||||
<!-- <div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div> -->
|
||||
<div v-if="dicomInfo.pid">{{ dicomInfo.pid }}</div>
|
||||
<div v-if="dicomInfo.patientName">{{ dicomInfo.patientName }}</div>
|
||||
<!-- <div>{{ subjectCode }}</div> -->
|
||||
<!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
|
||||
<!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
|
||||
<!-- <div>{{ dicomInfo.time }}</div> -->
|
||||
<div v-if="dicomInfo.modality">{{ dicomInfo.modality }}</div>
|
||||
<div v-if="dicomInfo.time">{{ dicomInfo.time }}</div>
|
||||
</div>
|
||||
<div ref="sliderBox" class="my_slider_box" style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer" @click.stop="goViewer($event)">
|
||||
<div :style="{top: height + '%'}" style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
|
||||
<div ref="sliderBox" class="my_slider_box"
|
||||
style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer"
|
||||
@click.stop="goViewer($event)">
|
||||
<div :style="{ top: height + '%' }"
|
||||
style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move"
|
||||
@click.stop.prevent="() => { return }" @mousedown.stop="sliderMousedown($event)" />
|
||||
</div>
|
||||
<div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
|
||||
{{ markers.top }}
|
||||
|
|
@ -117,7 +109,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.my_slider_box:after{
|
||||
.my_slider_box:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
|
|
@ -152,6 +144,7 @@ import getOrientationString from '@/views/trials/trials-panel/reading/dicoms/too
|
|||
import invertOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/invertOrientationString'
|
||||
// import calculateLongestAndShortestDiameters from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/calculateLongestAndShortestDiameters'
|
||||
import calculateSUV from '@/views/trials/trials-panel/reading/dicoms/tools/calculateSUV'
|
||||
import { convertBytes } from '@/utils/dicom-character-set'
|
||||
cornerstoneTools.external.cornerstone = cornerstone
|
||||
cornerstoneTools.external.Hammer = Hammer
|
||||
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
|
||||
|
|
@ -568,7 +561,7 @@ export default {
|
|||
type: 'warning'
|
||||
}).then(() => {
|
||||
|
||||
}).catch(() => {})
|
||||
}).catch(() => { })
|
||||
e.stopImmediatePropagation()
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
|
@ -1141,7 +1134,7 @@ export default {
|
|||
|
||||
// const scope = this
|
||||
Array.from(toolButtons).forEach((toolBtn) => {
|
||||
// Add the tool
|
||||
// Add the tool
|
||||
const toolName = toolBtn.getAttribute('data-tool')
|
||||
const apiTool = cornerstoneTools[`${toolName}Tool`]
|
||||
if (apiTool) {
|
||||
|
|
@ -1149,15 +1142,15 @@ export default {
|
|||
|
||||
if (!toolAlreadyAddedToElement) {
|
||||
if (toolName === 'Length') {
|
||||
cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true }})
|
||||
cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true } })
|
||||
} else if (toolName === 'Bidirectional') {
|
||||
// cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
|
||||
// , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
|
||||
cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true }})
|
||||
// cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
|
||||
// , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
|
||||
cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true } })
|
||||
} else if (toolName === 'ArrowAnnotate') {
|
||||
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
|
||||
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
|
||||
} else if (toolName === 'RectangleRoi') {
|
||||
cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
|
||||
cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
|
||||
} else {
|
||||
cornerstoneTools.addToolForElement(element, apiTool)
|
||||
}
|
||||
|
|
@ -1183,10 +1176,10 @@ export default {
|
|||
mouseButtonMask: 4
|
||||
})
|
||||
|
||||
// if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
|
||||
// cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
|
||||
// }
|
||||
// cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
|
||||
// if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
|
||||
// cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
|
||||
// }
|
||||
// cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
|
||||
}
|
||||
|
||||
// cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
|
||||
|
|
@ -1218,9 +1211,24 @@ export default {
|
|||
ToolStateManager.clearImageIdToolState(imageId)
|
||||
e.detail.enabledElement.options = {}
|
||||
var data = e.detail.image.data
|
||||
const patientNameElement = data.elements.x00100010
|
||||
const patientNameBytes = new Uint8Array(
|
||||
data.byteArray.buffer,
|
||||
patientNameElement ? patientNameElement.dataOffset : 0,
|
||||
patientNameElement ? patientNameElement.length : 0
|
||||
)
|
||||
// 解析dicom中字符集字段与解析库不一致 2025.03.04
|
||||
let SpecificCharacterSet = data.string('x00080005')
|
||||
? data.string('x00080005').replace('ISO IR', 'ISO_IR')
|
||||
: ''
|
||||
const patientNameStr = convertBytes(
|
||||
SpecificCharacterSet,
|
||||
patientNameBytes
|
||||
)
|
||||
this.dicomInfo.hospital = data.string('x00080080')
|
||||
// this.dicomInfo.pid = data.string('x00100020')
|
||||
this.dicomInfo.pid = data.string('x00120040')
|
||||
this.dicomInfo.pid = data.string('x00100020')
|
||||
this.dicomInfo.patientName = patientNameStr
|
||||
// this.dicomInfo.pid = data.string('x00120040')
|
||||
this.dicomInfo.name = data.string('x00100010')
|
||||
this.dicomInfo.age = data.string('x00101010')
|
||||
this.dicomInfo.sex = data.string('x00100040')
|
||||
|
|
@ -1231,9 +1239,8 @@ export default {
|
|||
data.string('x00080030')
|
||||
)
|
||||
this.dicomInfo.series = data.string('x00200011')
|
||||
this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
|
||||
this.stack.imageIds.length
|
||||
}`
|
||||
this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${this.stack.imageIds.length
|
||||
}`
|
||||
this.dicomInfo.size = `${data.uint16('x00280011')}*${data.uint16(
|
||||
'x00280010'
|
||||
)}`
|
||||
|
|
@ -1413,9 +1420,9 @@ export default {
|
|||
var element = cornerstone.getEnabledElement(this.canvas)
|
||||
const { rowPixelSpacing, colPixelSpacing } = this.getPixelSpacing(element.image)
|
||||
const dx =
|
||||
(data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
|
||||
(data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
|
||||
const dy =
|
||||
(data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
|
||||
(data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
|
||||
const length = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
return length.toFixed(this.digitPlaces)
|
||||
|
|
@ -1429,9 +1436,9 @@ export default {
|
|||
if (imagePlane) {
|
||||
return {
|
||||
rowPixelSpacing:
|
||||
imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
|
||||
imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
|
||||
colPixelSpacing:
|
||||
imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
|
||||
imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1482,7 +1489,7 @@ export default {
|
|||
},
|
||||
debounce(callback, delay) {
|
||||
let timerId
|
||||
return function() {
|
||||
return function () {
|
||||
clearTimeout(timerId)
|
||||
timerId = setTimeout(() => {
|
||||
callback.apply(this, arguments)
|
||||
|
|
@ -1963,88 +1970,102 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.context-menu-wrapper{
|
||||
position: absolute;
|
||||
ul{
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background: #343333;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
line-height: 1.5em;
|
||||
width: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.menu {
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #666;
|
||||
|
||||
div {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
left: 77px;
|
||||
top: -1px;
|
||||
background: #343333;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
line-height: 1.5em;
|
||||
width:80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu{
|
||||
display: none;
|
||||
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #666;
|
||||
div{
|
||||
|
||||
div {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.submenu{
|
||||
position: absolute;
|
||||
left: 77px;
|
||||
top: -1px;
|
||||
background: #343333;
|
||||
color: #fff;
|
||||
display: none;
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px solid #666;
|
||||
div{
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.menu li:hover{
|
||||
background-color: #ff5722;
|
||||
.submenu{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
.menu_active{
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu_disabled{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
}
|
||||
.info-visit{
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top: 5px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.arrw_div_wrapper{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #3f3f3f;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.blind_name_wrapper{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: #00000057;
|
||||
color: #fff;
|
||||
padding:0 10px;
|
||||
font-size: 14px;
|
||||
|
||||
.menu li:hover {
|
||||
background-color: #ff5722;
|
||||
|
||||
.submenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.info-cd{
|
||||
|
||||
.menu_active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu_disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info-visit {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.arrw_div_wrapper {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #3f3f3f;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.blind_name_wrapper {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: #00000057;
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-cd {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 5px;
|
||||
|
|
@ -2053,6 +2074,7 @@ export default {
|
|||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-series {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
|
@ -2062,6 +2084,7 @@ export default {
|
|||
font-size: 12px;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.info-image {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
|
@ -2081,6 +2104,7 @@ export default {
|
|||
font-size: 12px;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.info-instance {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
|
|
@ -2113,6 +2137,7 @@ export default {
|
|||
margin: 10px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.menu__item:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
|
@ -2132,11 +2157,12 @@ li:hover {
|
|||
background-color: #e0e0e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.msg-div {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #000;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #000;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
id="canvas"
|
||||
ref="canvas"
|
||||
v-loading="loading"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
style="position:relative;"
|
||||
class="cornerstone-element"
|
||||
@mouseup="sliderMouseup"
|
||||
@contextmenu.prevent="onContextmenu"
|
||||
>
|
||||
<div id="canvas" ref="canvas" v-loading="loading" element-loading-text="Loading..."
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" style="position:relative;" class="cornerstone-element"
|
||||
@mouseup="sliderMouseup" @contextmenu.prevent="onContextmenu">
|
||||
<!-- 临床数据 -->
|
||||
<div v-if="stack.isExistsClinicalData" class="info-cd" @click.stop="handleViewCD($event)">
|
||||
<el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')" placement="bottom">
|
||||
|
|
@ -18,46 +10,40 @@
|
|||
|
||||
</div>
|
||||
<!-- 切换访视 -->
|
||||
<div
|
||||
v-if="stack.imageRendered && isReadingTaskViewInOrder === 1"
|
||||
class="info-visit"
|
||||
@dblclick.stop="preventDefault($event)"
|
||||
>
|
||||
<div
|
||||
class="arrw_div_wrapper"
|
||||
:style="{cursor:stack.visitTaskNum <= minVistNum?'not-allowed':'pointer',color:stack.visitTaskNum <= minVistNum?'#888':'#fff'}"
|
||||
@click.stop.prevent="toggleSeries($event,-1)"
|
||||
@dblclick.stop="preventDefault($event)"
|
||||
>
|
||||
<div v-if="stack.imageRendered && isReadingTaskViewInOrder === 1" class="info-visit"
|
||||
@dblclick.stop="preventDefault($event)">
|
||||
<div class="arrw_div_wrapper"
|
||||
:style="{ cursor: stack.visitTaskNum <= minVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum <= minVistNum ? '#888' : '#fff' }"
|
||||
@click.stop.prevent="toggleSeries($event, -1)" @dblclick.stop="preventDefault($event)">
|
||||
<i class="el-icon-caret-left" />
|
||||
</div>
|
||||
<div class="blind_name_wrapper">
|
||||
{{ stack.taskBlindName }}
|
||||
</div>
|
||||
<div
|
||||
class="arrw_div_wrapper"
|
||||
:style="{cursor:stack.visitTaskNum >= maxVistNum?'not-allowed':'pointer',color:stack.visitTaskNum >= maxVistNum?'#888':'#fff'}"
|
||||
@click.stop.prevent="toggleSeries($event,1)"
|
||||
@dblclick.stop="preventDefault($event)"
|
||||
>
|
||||
<div class="arrw_div_wrapper"
|
||||
:style="{ cursor: stack.visitTaskNum >= maxVistNum ? 'not-allowed' : 'pointer', color: stack.visitTaskNum >= maxVistNum ? '#888' : '#fff' }"
|
||||
@click.stop.prevent="toggleSeries($event, 1)" @dblclick.stop="preventDefault($event)">
|
||||
<i class="el-icon-caret-right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-series">
|
||||
<h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{ stack.taskBlindName }}</h2>
|
||||
<h2 v-if="isReadingShowSubjectInfo" style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{
|
||||
stack.taskBlindName }}</h2>
|
||||
<div v-show="dicomInfo.series">Series: #{{ dicomInfo.series }}</div>
|
||||
<div>Image: #{{ dicomInfo.frame }}</div>
|
||||
<div>{{ dicomInfo.modality }}</div>
|
||||
</div>
|
||||
<div class="info-image">
|
||||
<div v-show="mousePosition.mo">
|
||||
Pos: {{ mousePosition.x?mousePosition.x.toFixed(0):'' }}, {{ mousePosition.y?mousePosition.y.toFixed(0):'' }}
|
||||
Pos: {{ mousePosition.x ? mousePosition.x.toFixed(0) : '' }}, {{ mousePosition.y ? mousePosition.y.toFixed(0) :
|
||||
'' }}
|
||||
</div>
|
||||
<div v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
|
||||
<div
|
||||
v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
|
||||
HU: {{ mousePosition.mo }}
|
||||
</div>
|
||||
<div v-else-if="(dicomInfo.modality === 'PT' && mousePosition.suv)">
|
||||
SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.suv.toFixed(3) :mousePosition.suv.toFixed(digitPlaces) }}
|
||||
SUVbw(g/ml): {{ digitPlaces === -1 ? mousePosition.suv.toFixed(3) : mousePosition.suv.toFixed(digitPlaces) }}
|
||||
</div>
|
||||
<div v-else-if="mousePosition.mo">
|
||||
Density: {{ mousePosition.mo }}
|
||||
|
|
@ -75,14 +61,20 @@
|
|||
<div class="info-subject">
|
||||
<div>{{ stack.description }}</div>
|
||||
<!-- <div>{{ dicomInfo.hospital }}</div> -->
|
||||
<!-- <div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div> -->
|
||||
<div v-if="dicomInfo.pid">{{ dicomInfo.pid }}</div>
|
||||
<div v-if="dicomInfo.patientName">{{ dicomInfo.patientName }}</div>
|
||||
<!-- <div>{{ subjectCode }}</div> -->
|
||||
<!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
|
||||
<!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
|
||||
<!-- <div>{{ dicomInfo.time }}</div> -->
|
||||
<div v-if="dicomInfo.modality">{{ dicomInfo.modality }}</div>
|
||||
<div v-if="dicomInfo.time">{{ dicomInfo.time }}</div>
|
||||
</div>
|
||||
<div ref="sliderBox" class="my_slider_box" style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer" @click.stop="goViewer($event)">
|
||||
<div :style="{top: height + '%'}" style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
|
||||
<div ref="sliderBox" class="my_slider_box"
|
||||
style="position: absolute;right: 1px;height: calc(100% - 140px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer"
|
||||
@click.stop="goViewer($event)">
|
||||
<div :style="{ top: height + '%' }"
|
||||
style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move"
|
||||
@click.stop.prevent="() => { return }" @mousedown.stop="sliderMousedown($event)" />
|
||||
</div>
|
||||
<div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
|
||||
{{ markers.top }}
|
||||
|
|
@ -117,7 +109,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.my_slider_box:after{
|
||||
.my_slider_box:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
|
|
@ -153,6 +145,7 @@ import getOrientationString from '@/views/trials/trials-panel/reading/dicoms/too
|
|||
import invertOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/invertOrientationString'
|
||||
// import calculateLongestAndShortestDiameters from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/calculateLongestAndShortestDiameters'
|
||||
import calculateSUV from '@/views/trials/trials-panel/reading/dicoms/tools/calculateSUV'
|
||||
import { convertBytes } from '@/utils/dicom-character-set'
|
||||
cornerstoneTools.external.cornerstone = cornerstone
|
||||
cornerstoneTools.external.Hammer = Hammer
|
||||
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
|
||||
|
|
@ -560,7 +553,7 @@ export default {
|
|||
mouseDown(e) {
|
||||
this.image = e.detail.image
|
||||
var pointNearTool = this.pointNearTool(e)
|
||||
if (pointNearTool) {
|
||||
if (pointNearTool) {
|
||||
e.stopImmediatePropagation()
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
|
@ -572,7 +565,7 @@ export default {
|
|||
type: 'warning'
|
||||
}).then(() => {
|
||||
|
||||
}).catch(() => {})
|
||||
}).catch(() => { })
|
||||
e.stopImmediatePropagation()
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
|
@ -989,31 +982,31 @@ export default {
|
|||
var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
|
||||
if (idx > -1) {
|
||||
DicomEvent.$emit('setCollapseActive', this.measureData[idx])
|
||||
const measureData = {}
|
||||
// var markName = this.measureData[idx].OrderMarkName
|
||||
var markName = this.measureData[idx].MeasureData.data.remark
|
||||
if (this.activeToolName === 'Eraser' && this.disabledMarks.indexOf(markName) === -1) {
|
||||
const questionInfo = this.measureData[idx]
|
||||
measureData.orderMarkName = markName
|
||||
this.$emit('moveMeasureData', { measureData, questionInfo, orderMarkName: markName})
|
||||
}
|
||||
if ((this.disabledMarks.indexOf(markName) === -1 || !this.disabledMarks) && this.activeToolName !== 'Eraser') {
|
||||
const questionInfo = this.measureData[idx]
|
||||
const canvas = this.canvas.querySelector('canvas')
|
||||
measureData.pictureBaseStr = canvas.toDataURL('image/png', 1)
|
||||
measureData.studyId = this.stack.studyId
|
||||
measureData.seriesId = this.stack.seriesId
|
||||
measureData.instanceId = instanceId
|
||||
measureData.frame = this.stack.frame ? this.stack.frame : 0
|
||||
measureData.data = toolState.data[i]
|
||||
measureData.type = toolType
|
||||
measureData.thick = this.dicomInfo.thick
|
||||
measureData.location = this.dicomInfo.location
|
||||
measureData.ww = Math.round(viewport.voi.windowWidth)
|
||||
measureData.wc = Math.round(viewport.voi.windowCenter)
|
||||
measureData.data.active = false
|
||||
this.$emit('modifyMeasureData', { measureData, questionInfo })
|
||||
}
|
||||
const measureData = {}
|
||||
// var markName = this.measureData[idx].OrderMarkName
|
||||
var markName = this.measureData[idx].MeasureData.data.remark
|
||||
if (this.activeToolName === 'Eraser' && this.disabledMarks.indexOf(markName) === -1) {
|
||||
const questionInfo = this.measureData[idx]
|
||||
measureData.orderMarkName = markName
|
||||
this.$emit('moveMeasureData', { measureData, questionInfo, orderMarkName: markName })
|
||||
}
|
||||
if ((this.disabledMarks.indexOf(markName) === -1 || !this.disabledMarks) && this.activeToolName !== 'Eraser') {
|
||||
const questionInfo = this.measureData[idx]
|
||||
const canvas = this.canvas.querySelector('canvas')
|
||||
measureData.pictureBaseStr = canvas.toDataURL('image/png', 1)
|
||||
measureData.studyId = this.stack.studyId
|
||||
measureData.seriesId = this.stack.seriesId
|
||||
measureData.instanceId = instanceId
|
||||
measureData.frame = this.stack.frame ? this.stack.frame : 0
|
||||
measureData.data = toolState.data[i]
|
||||
measureData.type = toolType
|
||||
measureData.thick = this.dicomInfo.thick
|
||||
measureData.location = this.dicomInfo.location
|
||||
measureData.ww = Math.round(viewport.voi.windowWidth)
|
||||
measureData.wc = Math.round(viewport.voi.windowCenter)
|
||||
measureData.data.active = false
|
||||
this.$emit('modifyMeasureData', { measureData, questionInfo })
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
|
|
@ -1115,7 +1108,7 @@ export default {
|
|||
const toolButtons = document.querySelectorAll('[data-tool]')
|
||||
// const scope = this
|
||||
Array.from(toolButtons).forEach((toolBtn) => {
|
||||
// Add the tool
|
||||
// Add the tool
|
||||
const toolName = toolBtn.getAttribute('data-tool')
|
||||
const apiTool = cornerstoneTools[`${toolName}Tool`]
|
||||
if (apiTool) {
|
||||
|
|
@ -1123,17 +1116,17 @@ export default {
|
|||
|
||||
if (!toolAlreadyAddedToElement) {
|
||||
if (toolName === 'Length') {
|
||||
cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true }})
|
||||
cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true } })
|
||||
} else if (toolName === 'Bidirectional') {
|
||||
// cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
|
||||
// , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
|
||||
cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true }})
|
||||
// cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
|
||||
// , handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true
|
||||
cornerstoneTools.addToolForElement(element, BidirectionalTool, { configuration: { digits: this.digitPlaces, hideHandlesIfMoving: true } })
|
||||
} else if (toolName === 'ArrowAnnotate') {
|
||||
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
|
||||
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
|
||||
} else if (toolName === 'RectangleRoi') {
|
||||
cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
|
||||
cornerstoneTools.addToolForElement(element, RectangleRoiTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true } })
|
||||
} else if (toolName === 'CircleRoi') {
|
||||
cornerstoneTools.addToolForElement(element, CircleRoiTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true, showMinMax: true }})
|
||||
cornerstoneTools.addToolForElement(element, CircleRoiTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces, drawHandles: true, showMinMax: true } })
|
||||
} else {
|
||||
cornerstoneTools.addToolForElement(element, apiTool)
|
||||
}
|
||||
|
|
@ -1159,10 +1152,10 @@ export default {
|
|||
mouseButtonMask: 4
|
||||
})
|
||||
|
||||
// if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
|
||||
// cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
|
||||
// }
|
||||
// cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
|
||||
// if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
|
||||
// cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
|
||||
// }
|
||||
// cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
|
||||
}
|
||||
|
||||
// cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
|
||||
|
|
@ -1194,9 +1187,24 @@ export default {
|
|||
ToolStateManager.clearImageIdToolState(imageId)
|
||||
e.detail.enabledElement.options = {}
|
||||
var data = e.detail.image.data
|
||||
const patientNameElement = data.elements.x00100010
|
||||
const patientNameBytes = new Uint8Array(
|
||||
data.byteArray.buffer,
|
||||
patientNameElement ? patientNameElement.dataOffset : 0,
|
||||
patientNameElement ? patientNameElement.length : 0
|
||||
)
|
||||
// 解析dicom中字符集字段与解析库不一致 2025.03.04
|
||||
let SpecificCharacterSet = data.string('x00080005')
|
||||
? data.string('x00080005').replace('ISO IR', 'ISO_IR')
|
||||
: ''
|
||||
const patientNameStr = convertBytes(
|
||||
SpecificCharacterSet,
|
||||
patientNameBytes
|
||||
)
|
||||
this.dicomInfo.hospital = data.string('x00080080')
|
||||
// this.dicomInfo.pid = data.string('x00100020')
|
||||
this.dicomInfo.pid = data.string('x00120040')
|
||||
this.dicomInfo.pid = data.string('x00100020')
|
||||
this.dicomInfo.patientName = patientNameStr
|
||||
// this.dicomInfo.pid = data.string('x00120040')
|
||||
this.dicomInfo.name = data.string('x00100010')
|
||||
this.dicomInfo.age = data.string('x00101010')
|
||||
this.dicomInfo.sex = data.string('x00100040')
|
||||
|
|
@ -1207,9 +1215,8 @@ export default {
|
|||
data.string('x00080030')
|
||||
)
|
||||
this.dicomInfo.series = data.string('x00200011')
|
||||
this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
|
||||
this.stack.imageIds.length
|
||||
}`
|
||||
this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${this.stack.imageIds.length
|
||||
}`
|
||||
this.dicomInfo.size = `${data.uint16('x00280011')}*${data.uint16(
|
||||
'x00280010'
|
||||
)}`
|
||||
|
|
@ -1390,9 +1397,9 @@ export default {
|
|||
var element = cornerstone.getEnabledElement(this.canvas)
|
||||
const { rowPixelSpacing, colPixelSpacing } = this.getPixelSpacing(element.image)
|
||||
const dx =
|
||||
(data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
|
||||
(data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1)
|
||||
const dy =
|
||||
(data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
|
||||
(data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1)
|
||||
const length = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
return length.toFixed(this.digitPlaces)
|
||||
|
|
@ -1406,9 +1413,9 @@ export default {
|
|||
if (imagePlane) {
|
||||
return {
|
||||
rowPixelSpacing:
|
||||
imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
|
||||
imagePlane.rowPixelSpacing || imagePlane.rowImagePixelSpacing,
|
||||
colPixelSpacing:
|
||||
imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
|
||||
imagePlane.columnPixelSpacing || imagePlane.colImagePixelSpacing
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1460,7 +1467,7 @@ export default {
|
|||
},
|
||||
debounce(callback, delay) {
|
||||
let timerId
|
||||
return function() {
|
||||
return function () {
|
||||
clearTimeout(timerId)
|
||||
timerId = setTimeout(() => {
|
||||
callback.apply(this, arguments)
|
||||
|
|
@ -1478,7 +1485,7 @@ export default {
|
|||
if (imageId) {
|
||||
ToolStateManager.clearImageIdToolState(imageId)
|
||||
let elements = cornerstone.getEnabledElementsByImageId(imageId)
|
||||
elements.map(el=>{
|
||||
elements.map(el => {
|
||||
cornerstone.updateImage(el.element)
|
||||
})
|
||||
}
|
||||
|
|
@ -1918,7 +1925,7 @@ export default {
|
|||
for (const [key, value] of searchParams.entries()) {
|
||||
params[key] = value
|
||||
}
|
||||
if (isNaN(params.frame)){
|
||||
if (isNaN(params.frame)) {
|
||||
params.frame = 0
|
||||
}
|
||||
return params
|
||||
|
|
@ -1940,88 +1947,102 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.context-menu-wrapper{
|
||||
position: absolute;
|
||||
ul{
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background: #343333;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
line-height: 1.5em;
|
||||
width: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.menu {
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #666;
|
||||
|
||||
div {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
left: 77px;
|
||||
top: -1px;
|
||||
background: #343333;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
line-height: 1.5em;
|
||||
width:80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu{
|
||||
display: none;
|
||||
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #666;
|
||||
div{
|
||||
|
||||
div {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.submenu{
|
||||
position: absolute;
|
||||
left: 77px;
|
||||
top: -1px;
|
||||
background: #343333;
|
||||
color: #fff;
|
||||
display: none;
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px solid #666;
|
||||
div{
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.menu li:hover{
|
||||
background-color: #ff5722;
|
||||
.submenu{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
.menu_active{
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu_disabled{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
}
|
||||
.info-visit{
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top: 5px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.arrw_div_wrapper{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #3f3f3f;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.blind_name_wrapper{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: #00000057;
|
||||
color: #fff;
|
||||
padding:0 10px;
|
||||
font-size: 14px;
|
||||
|
||||
.menu li:hover {
|
||||
background-color: #ff5722;
|
||||
|
||||
.submenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.info-cd{
|
||||
|
||||
.menu_active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu_disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info-visit {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.arrw_div_wrapper {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #3f3f3f;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.blind_name_wrapper {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: #00000057;
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-cd {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 5px;
|
||||
|
|
@ -2030,6 +2051,7 @@ export default {
|
|||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-series {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
|
@ -2039,6 +2061,7 @@ export default {
|
|||
font-size: 12px;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.info-image {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
|
@ -2058,6 +2081,7 @@ export default {
|
|||
font-size: 12px;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.info-instance {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
|
|
@ -2090,6 +2114,7 @@ export default {
|
|||
margin: 10px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.menu__item:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
|
@ -2109,11 +2134,12 @@ li:hover {
|
|||
background-color: #e0e0e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.msg-div {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #000;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #000;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue