|
|
|
@ -1,46 +1,48 @@ |
|
|
|
<template> |
|
|
|
<div |
|
|
|
class="tube-item" |
|
|
|
@click="$emit('clickTubeItem', tubeNo || tube.tubeIndex)" |
|
|
|
@click="$emit('clickTubeItem', tubeNo || (tube && tube.tubeIndex))" |
|
|
|
> |
|
|
|
<span v-if="!!showNum" class="order">{{ |
|
|
|
tubeNo ? tubeNo : tube.tubeIndex + 1 |
|
|
|
}}</span> |
|
|
|
<div class="tube-circle" v-if="projIdsOfTube(tube).length === 0"> |
|
|
|
<span class="add-symbol">+</span> |
|
|
|
<div class="tube-circle-empty" v-if="type === 'running'"> |
|
|
|
<img src="@/assets/running/stop_s.svg" alt="empty" /> |
|
|
|
</div> |
|
|
|
<span v-else class="add-symbol">+</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="tube-project" v-else> |
|
|
|
<canvas class="canvas" ref="canvas" width="58" height="58"></canvas> |
|
|
|
<div class="text-layer"> |
|
|
|
<span>{{ |
|
|
|
projIdsOfTube(tube).length === 1 |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]] |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]].projName |
|
|
|
: '' |
|
|
|
: projIdsOfTube(tube).length === 2 |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[1]] |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[1]].projName |
|
|
|
<div class="tube-project" v-else @click="showProjInfo(tube)"> |
|
|
|
<canvas class="canvas" ref="canvas" width="58" height="58"></canvas> |
|
|
|
<div class="text-layer"> |
|
|
|
<span>{{ |
|
|
|
projIdsOfTube(tube).length === 1 |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]] |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]].projName |
|
|
|
: '' |
|
|
|
: projIdsOfTube(tube).length === 2 |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[1]] |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[1]].projName |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
}}</span> |
|
|
|
<span class="blood-text">{{ |
|
|
|
tube && tube.bloodType ? settingTubeStore.bloodTypeKeyMap[tube.bloodType]?.name : '' |
|
|
|
}}</span> |
|
|
|
<span>{{ |
|
|
|
projIdsOfTube(tube).length === 2 |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]] |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]].projName |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
}}</span> |
|
|
|
<span class="blood-text">{{ |
|
|
|
tube && tube.bloodType ? settingTubeStore.bloodTypeKeyMap[tube.bloodType]?.name : '' |
|
|
|
}}</span> |
|
|
|
<span>{{ |
|
|
|
projIdsOfTube(tube).length === 2 |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]] |
|
|
|
? settingTubeStore.projectIdMap[projIdsOfTube(tube)[0]].projName |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <span v-if="showUserId" class="user-id">{{ tube && tube.userid || '-' }}</span> --> |
|
|
|
<el-tooltip v-if="showUserId" :content="tube && tube.userid || '-'" placement="top" trigger="click"> |
|
|
|
<!-- <span class="user-id">{{ tube && tube.userid || '-' }}</span> --> |
|
|
|
<span class="user-id">{{ tube && tube.userid || '-' }}</span> |
|
|
|
</el-tooltip> |
|
|
|
<span v-if="type === 'running'" class="user-id" :style="`color:${tube && emergencyStateColor[tube.state]}`">{{tube && tube.projIds && tube.projIds.length && emergencyStateDesc[tube.state] || '空'}}</span> |
|
|
|
<span v-else class="user-id">{{ tube && tube.userid || '-' }}</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -48,7 +50,10 @@ |
|
|
|
import { ref, watch, useTemplateRef, nextTick, computed } from 'vue' |
|
|
|
import * as R from 'ramda' |
|
|
|
import { useConsumablesStore, useSettingTestTubeStore } from '@/store' |
|
|
|
|
|
|
|
import { |
|
|
|
emergencyStateDesc, |
|
|
|
emergencyStateColor |
|
|
|
} from '@/websocket/socket' |
|
|
|
/* |
|
|
|
tube: {userid,projId:number[],bloodType} |
|
|
|
*/ |
|
|
|
@ -59,6 +64,7 @@ const props = defineProps({ |
|
|
|
showNum: { type: Boolean, default: true }, |
|
|
|
showUserId: {type: Boolean, default: true}, |
|
|
|
tubeNo: { type: Number }, |
|
|
|
type: {type: String} |
|
|
|
}) |
|
|
|
const emit = defineEmits(['clickTubeItem']) |
|
|
|
const settingTubeStore = useSettingTestTubeStore() |
|
|
|
@ -69,10 +75,11 @@ const projIdsOfTube = (tube) => { |
|
|
|
} |
|
|
|
|
|
|
|
const canvas = useTemplateRef('canvas') |
|
|
|
|
|
|
|
const tubeData = ref() |
|
|
|
watch( |
|
|
|
() => props.tube, |
|
|
|
(newVal) => { |
|
|
|
tubeData.value = props.tube |
|
|
|
const projIds = projIdsOfTube(props.tube) |
|
|
|
if (projIds.length > 0) { |
|
|
|
nextTick(() => { |
|
|
|
@ -90,6 +97,10 @@ watch( |
|
|
|
{ immediate: true }, |
|
|
|
) |
|
|
|
|
|
|
|
function showProjInfo(tube){ |
|
|
|
console.log('-----------------------', tubeData.value, tube) |
|
|
|
} |
|
|
|
|
|
|
|
function drawPieChart(ctx, data) { |
|
|
|
let total = data.reduce((acc, val) => acc + val.value, 0) |
|
|
|
let currentAngle = data.length === 2 ? 0 : -0.5 * Math.PI // Start from the top (12 o'clock position) |
|
|
|
@ -139,6 +150,21 @@ function drawPieChart(ctx, data) { |
|
|
|
} |
|
|
|
margin-bottom: 6px; |
|
|
|
} |
|
|
|
.tube-circle-empty{ |
|
|
|
width: 72px; |
|
|
|
height: 72px; |
|
|
|
border-radius: 999px; |
|
|
|
border: solid 1px gray; |
|
|
|
background-color: #fff; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 6px; |
|
|
|
background:#f1f1f1; |
|
|
|
margin-top: 5px; |
|
|
|
border: 0px solid; |
|
|
|
} |
|
|
|
|
|
|
|
.tube-project { |
|
|
|
position: relative; |
|
|
|
.text-layer { |
|
|
|
@ -168,4 +194,8 @@ function drawPieChart(ctx, data) { |
|
|
|
text-overflow: ellipsis; |
|
|
|
margin-left: 0.7rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tube_info{ |
|
|
|
display:flex |
|
|
|
} |
|
|
|
</style> |
LiLongLong
3 months ago