| | |
| | | <span>设备在线情况</span> |
| | | </div> |
| | | </template> |
| | | <el-row :gutter="20"> |
| | | <el-row :gutter="0"> |
| | | <el-col :span="12"> |
| | | <el-row :gutter="20"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="12"> |
| | | <el-card class="status-card online-card" shadow="hover"> |
| | | <div class="status-content"> |
| | |
| | | formatter: '{a} <br/>{b}: {c} ({d}%)', |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'left', |
| | | show: false, |
| | | bottom: '0%', |
| | | data: ['在线设备', '离线设备', '正常设备', '故障设备'], |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '设备状态', |
| | | name: '在线状态', |
| | | type: 'pie', |
| | | radius: '60%', |
| | | center: ['50%', '50%'], |
| | | radius: ['20%', '40%'], |
| | | center: ['48%', '50%'], |
| | | startAngle: 270, |
| | | endAngle: 90, |
| | | data: [ |
| | | { value: this.onlineCount, name: '在线设备', itemStyle: { color: '#67C23A' } }, |
| | | { value: this.offlineCount, name: '离线设备', itemStyle: { color: '#909399' } }, |
| | | ], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)', |
| | | }, |
| | | }, |
| | | }, |
| | | { |
| | | name: '运行状态', |
| | | type: 'pie', |
| | | radius: ['30%', '50%'], |
| | | center: ['52%', '50%'], |
| | | startAngle: 90, |
| | | endAngle: 270, |
| | | data: [ |
| | | { value: this.normalCount, name: '正常设备', itemStyle: { color: '#409EFF' } }, |
| | | { value: this.faultCount, name: '故障设备', itemStyle: { color: '#F56C6C' } }, |
| | | ], |
| | |
| | | |
| | | .chart-container { |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 300px; |
| | | } |
| | | |
| | | @keyframes pulse { |