| | |
| | | |
| | | <div v-if="popupVisible" class="device-popup" :style="popupStyle" @click.stop> |
| | | <div class="device-popup__header"> |
| | | <span class="device-popup__title">{{ popupTitle }}</span> |
| | | <el-tooltip |
| | | class="device-popup__title-tooltip" |
| | | :content="popupTitle" |
| | | placement="top" |
| | | effect="dark" |
| | | :show-after="200" |
| | | > |
| | | <span class="device-popup__title">{{ popupTitleDisplay }}</span> |
| | | </el-tooltip> |
| | | |
| | | <img class="device-popup__close" :src="popupClose" alt="" @click.stop="closePopup"> |
| | | </div> |
| | |
| | | top: `${popupPosition.value.y}px`, |
| | | })) |
| | | |
| | | const POPUP_TITLE_MAX = 12 |
| | | const popupTitle = computed(() => selectedDevice.value?.deviceName || selectedDevice.value?.deviceModel || '-') |
| | | const popupTitleOverflow = computed(() => popupTitle.value.length > POPUP_TITLE_MAX) |
| | | const popupTitleDisplay = computed(() => { |
| | | if (!popupTitleOverflow.value) return popupTitle.value |
| | | return `${popupTitle.value.slice(0, POPUP_TITLE_MAX)}……` |
| | | }) |
| | | const popupStatusText = computed(() => { |
| | | const status = selectedDevice.value?.status |
| | | if (status === 0) return '在线' |
| | |
| | | border-radius: 0px 0px 5px 5px; |
| | | } |
| | | |
| | | .device-popup__title-tooltip { |
| | | flex: 1; |
| | | min-width: 0; |
| | | display: block; |
| | | } |
| | | |
| | | .device-popup__title { |
| | | display: inline-block; |
| | | max-width: 100%; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .device-popup__close { |
| | | cursor: pointer; |
| | | } |