| | |
| | | <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">保存位置</a-button> |
| | | </div> |
| | | <div class="device-status-info"> |
| | | <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> |
| | | <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> |
| | | <div>{{ item.label }}</div> |
| | | <div class="status-square" :style="{ backgroundColor: item.color }"></div> |
| | | <div>{{ getDeviceNumberByStatus(item.value) }}</div> |
| | | </div> |
| | | </a-space> |
| | | </div> |
| | | </header> |
| | | |
| | |
| | | v-on:resizing="resize($event, index)" |
| | | v-on:dragging="resize($event, index)" |
| | | :parentLimitation="true" |
| | | :minw="100" |
| | | :minh="100" |
| | | :minw="70" |
| | | :minh="70" |
| | | :isDraggable="isDraggable" |
| | | :isResizable="isResizable" |
| | | :stickSize="6" |
| | |
| | | justify-content: space-between; |
| | | |
| | | .single-status-info { |
| | | width: 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | /*width: 70px;*/ |
| | | /*display: flex;*/ |
| | | /*align-items: center;*/ |
| | | /*justify-content: space-between;*/ |
| | | |
| | | .status-square { |
| | | width: 14px; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items:end ; |
| | | |
| | | |
| | | .status-image { |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | width: 45px; |
| | | margin-right: 10px; |
| | | width: 10px; |
| | | height: 60%; |
| | | margin-right: 5px; |
| | | } |
| | | |
| | | .device-image { |