|
|
@@ -1,31 +1,33 @@
|
|
|
<template>
|
|
|
<div ref="dragRef">
|
|
|
<div class="camera" v-for="camera in cameraGroup.children" :key="camera.cameraGroupDetailId">
|
|
|
- <div class="IconAndCameraName">
|
|
|
- <div class="cameraIcon">
|
|
|
- <WarningFilled
|
|
|
- class="invalidCameraIcon"
|
|
|
- style="color: red"
|
|
|
- v-if="!carouselList.includes(camera) && playingGroup?.id === cameraGroup.id"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="cameraImg"
|
|
|
- src="@/assets/icons/nine-square-grid/camera.png"
|
|
|
- v-if="!cameraInPlay.includes(camera)"
|
|
|
- />
|
|
|
- <img class="cameraImg" src="@/assets/icons/nine-square-grid/playingCamera.png" v-else />
|
|
|
- </div>
|
|
|
+ <Thumbnail :imageUrl="camera.imageUrl" :code="camera.code" position="right">
|
|
|
+ <div class="IconAndCameraName">
|
|
|
+ <div class="cameraIcon">
|
|
|
+ <WarningFilled
|
|
|
+ class="invalidCameraIcon"
|
|
|
+ style="color: red"
|
|
|
+ v-if="!carouselList.includes(camera) && playingGroup?.id === cameraGroup.id"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="cameraImg"
|
|
|
+ src="@/assets/icons/nine-square-grid/camera.png"
|
|
|
+ v-if="!cameraInPlay.includes(camera)"
|
|
|
+ />
|
|
|
+ <img class="cameraImg" src="@/assets/icons/nine-square-grid/playingCamera.png" v-else />
|
|
|
+ </div>
|
|
|
|
|
|
- <div
|
|
|
- class="cameraName"
|
|
|
- :class="{
|
|
|
- playingCamera: cameraInPlay.includes(camera),
|
|
|
- invalidCameraName: !carouselList.includes(camera) && playingGroup?.id === cameraGroup.id,
|
|
|
- }"
|
|
|
- >
|
|
|
- {{ camera.name }}
|
|
|
+ <div
|
|
|
+ class="cameraName"
|
|
|
+ :class="{
|
|
|
+ playingCamera: cameraInPlay.includes(camera),
|
|
|
+ invalidCameraName: !carouselList.includes(camera) && playingGroup?.id === cameraGroup.id,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ camera.name }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </Thumbnail>
|
|
|
|
|
|
<div class="cameraOperation">
|
|
|
<img
|
|
|
@@ -34,10 +36,6 @@
|
|
|
@click.stop="handleDelete(cameraGroup, camera)"
|
|
|
/>
|
|
|
</div>
|
|
|
-
|
|
|
- <Thumbnail :imageUrl="camera.imageUrl" :code="camera.code" position="right">
|
|
|
- <div class="mask"></div>
|
|
|
- </Thumbnail>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -141,6 +139,7 @@
|
|
|
.IconAndCameraName {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ width: 100%;
|
|
|
.cameraIcon {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -183,20 +182,17 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .mask {
|
|
|
- height: 32px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
:deep(.thumb-nail) {
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 9;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.thumb-nail > div) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|