| | |
| | | <div class="name">机巢总数</div> |
| | | </div> |
| | | <div class="status"> |
| | | <div v-for="item in listNum"> |
| | | <div :style="{ color: item.color }" class="value">{{ item.value }}</div> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="item" v-for="(item, index) in listNum" > |
| | | <div> |
| | | <div :style="{ color: item.color }" class="value">{{ item.value }}</div> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | <div class="right-line" v-if="index !== listNum.length - 1"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | let total = ref(0); |
| | | // 机巢统计 |
| | | let listNum = ref([ |
| | | { name: '空闲中', value: 89, color: '#FFA768' }, |
| | | { name: '作业中', value: 100, color: '#8EFFAC' }, |
| | | { name: '离线中', value: 66, color: '#FFFFFF' }, |
| | | { name: '空闲中', value: 0, color: '#8EFFAC' }, |
| | | { name: '作业中', value: 0, color: '#FFA768' }, |
| | | { name: '离线中', value: 0, color: '#FFFFFF' }, |
| | | // { name: '异常', value: 10, color: '#FF8E8E' }, |
| | | ]); |
| | | // 获取机巢列表 |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | line-height: 30px; |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .right-line { |
| | | width: 0px; |
| | | height: 36px; |
| | | border-radius: 0px 0px 0px 0px; |
| | | border: 1px solid; |
| | | border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1; |
| | | margin-left: 10px; |
| | | } |
| | | .name { |
| | | text-align: center; |
| | | width: 42px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | } |
| | | .value { |
| | | text-align: center; |
| | | width: 42px; |
| | | font-weight: 400; |
| | | font-size: 26px; |
| | | } |