| | |
| | | </template> |
| | | <template v-else-if="test[item]?.name == '机巢保险'"> |
| | | <div |
| | | v-for="statusKey in [1, 0]" |
| | | v-for="statusKey in [1, 0,2]" |
| | | :key="statusKey" |
| | | class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusKey)" |
| | |
| | | <span class="count"> |
| | | {{ newtitleData[item].status_map[statusKey] }} |
| | | {{ test[item]?.name === '无人机' ? '架' : '个' }} |
| | | </span> |
| | | </div> |
| | | </template> |
| | | <template v-else-if="test[item]?.name == '无人机流量'"> |
| | | <div |
| | | v-for="statusKey in [ 0,2,1]" |
| | | :key="statusKey" |
| | | class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusKey)" |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }" |
| | | > |
| | | <span |
| | | class="indicator" |
| | | :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }" |
| | | ></span> |
| | | <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span> |
| | | <span class="count"> |
| | | {{ newtitleData[item].status_map[statusKey] }} |
| | | {{ test[item]?.name === '无人机流量' ? '架' : '个' }} |
| | | </span> |
| | | </div> |
| | | </template> |
| | |
| | | const insureStatus = { |
| | | 0: '临近到期', |
| | | 1: '正常期限', |
| | | 2:'保险过期' |
| | | }; |
| | | const moveListStatus = { |
| | | '-1': '离线中', |
| | |
| | | // 样式配置对象 |
| | | const statusStyles = { |
| | | 机巢保险: { |
| | | 0: { class: 'expired', color: '#7C8091', background: '#7C8091' }, |
| | | 1: { class: 'normal', color: '#1B94FF', background: '#1B94FF' }, |
| | | 0: { class: 'expired', color: '#FFA600', background: '#FFA600' }, |
| | | 1: { class: 'normal', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' }, |
| | | 2: { class: 'flying',color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' }, |
| | | }, |
| | | |
| | | 无人机流量: { |
| | | 0: { class: 'offline', color: '#11CE3E', background: '#11CE3E' }, |
| | | 1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' }, |
| | | 2: { class: 'flying', color: '#7C8091', background: '#7C8091' }, |
| | | 0: { class: 'offline', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' }, |
| | | 1: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' }, |
| | | 2: { class: 'flying', color: '#FFA600', background: '#FFA600' }, |
| | | }, |
| | | 监控设备: { |
| | | 0: { class: 'offline', color: '#bababa', background: '#bababa' }, |
| | | 1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' }, |
| | | 0: { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' }, |
| | | 1: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' }, |
| | | }, |
| | | 移动机巢: { |
| | | '-1': { class: 'offline', color: '#bababa', background: '#bababa' }, |
| | | 4: { class: 'flying', color: '#1B94FF', background: '#1B94FF' }, |
| | | '-1': { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' }, |
| | | 4: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' }, |
| | | }, |
| | | // 默认样式配置 |
| | | default: { |
| | | 0: { class: 'warning', color: '#1b94ff', background: '#1b94ff' }, |
| | | 4: { class: 'success', color: '#11ce3e', background: '#11ce3e' }, |
| | | '-1': { class: 'success', color: '#bababa', background: '#bababa' }, |
| | | 0: { class: 'warning', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' }, |
| | | 4: { class: 'success', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' }, |
| | | '-1': { class: 'success', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' }, |
| | | }, |
| | | }; |
| | | |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | .statistics { |
| | | min-height: 174px; |
| | | // height: 174px; |
| | | height: pxToVh(174); |
| | | background: #ffffff; |
| | | border-radius: 8px 8px 8px 8px; |
| | | margin-bottom: 10px; |
| | |
| | | padding: 0 14px 0 21px; |
| | | // display: grid; |
| | | // grid-template-columns: repeat(4, 1fr); |
| | | height: 80px; |
| | | height: pxToVh(80); |
| | | display: flex; |
| | | justify-content: space-around; |
| | | :deep(.el-empty ){ |
| | | width: 60px; |
| | | height: 60px; |
| | | height: pxToVh(60); |
| | | .el-empty__image{ |
| | | width: 60px !important; |
| | | height: 60px !important;} |
| | | height: pxToVh(60)!important;} |
| | | .custom-text { |
| | | font-size: 12px; |
| | | color: #7c8091; |