餐饮油烟智能监测与监管一体化平台
riku
2026-03-04 49e2b7ea866695957633855f71f9e2f943b11ec7
src/components/monitor/DeviceStatus.vue
@@ -6,9 +6,9 @@
        <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">
@@ -126,19 +126,38 @@
          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' } },
            ],
@@ -224,7 +243,7 @@
.chart-container {
  width: 100%;
  height: 100%;
  height: 300px;
}
@keyframes pulse {