safePower/src/view/largeScreen2/ttes.js

import * as echarts from 'echarts'

export const getAlarmPendingOption = () => ({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#1e3a8a',
    textStyle: {
      color: '#e2e8f0'
    }
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['02-17', '02-22', '02-27', '03-04', '03-09', '03-14'],
    axisLine: {
      lineStyle: {
        color: '#1e3a8a'
      }
    },
    axisLabel: {
      color: '#64748b',
      fontSize: 10
    }
  },
  yAxis: {
    type: 'value',
    name: '次数',
    nameTextStyle: {
      color: '#64748b',
      fontSize: 10
    },
    splitLine: {
      lineStyle: {
        color: '#1e3a8a',
        type: 'dashed'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#1e3a8a'
      }
    },
    axisLabel: {
      color: '#64748b',
      fontSize: 10
    }
  },
  series: [
    {
      name: '待处理报警',
      data: [1, 3, 2, 5, 2, 3],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#00d4ff',
        width: 2
      },
      itemStyle: {
        color: '#00d4ff'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
        ])
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: 'Max'
          },
          {
            type: 'min',
            name: 'Min'
          }
        ]
      }
    }
  ]
})

export const getAlertDistributionOption = (alertTypes) => ({
  series: [
    {
      type: 'pie',
      radius: ['45%', '70%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 8,
        borderColor: '#0f172a',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'center',
        formatter: '{total|15}\n{name|报警总数}',
        rich: {
          total: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#e2e8f0',
            lineHeight: 35
          },
          name: {
            fontSize: 14,
            color: '#94a3b8'
          }
        }
      },
      labelLine: {
        show: false
      },
      data: alertTypes.map((item) => ({
        value: item.count,
        name: item.name,
        itemStyle: {
          color: item.color
        }
      }))
    }
  ]
})

export const getDeviceStatOption = (deviceTypes) => {
  const total = deviceTypes.reduce((sum, item) => sum + (item.count || item.value || 0), 0)
  return {
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: false
    },
    series: [
      {
        type: 'pie',
        radius: ['45%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#0f172a',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'center',
          formatter: `{total|${total}}\n{name|设备总数}`,
          rich: {
            total: {
              fontSize: 18,
              fontWeight: 'bold',
              color: '#e2e8f0',
              lineHeight: 35
            },
            name: {
              fontSize: 12,
              color: '#94a3b8'
            }
          }
        },
        labelLine: {
          show: false
        },
        data: deviceTypes.map((item) => ({
          value: item.count || 0,
          name: item.cb_type_name || '未知',
          itemStyle: {
            color: item.color
          }
        }))
      }
    ]
  }
}

export const getProjectBarOption = (projectData) => ({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#1e3a8a',
    textStyle: {
      color: '#e2e8f0'
    }
  },
  grid: {
    top: '10%',
    left: '10%',
    right: '5%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: projectData.map((item) => item.projectName || item.name || '未知'),
    axisLine: {
      lineStyle: {
        color: '#1e3a8a'
      }
    },
    axisLabel: {
      color: '#64748b',
      fontSize: 9,
      rotate: 30,
      interval: 0,
      overflow: 'truncate',
      width: 60,
      margin: 8
    }
  },
  yAxis: {
    type: 'value',
    name: '数量',
    nameTextStyle: {
      color: '#64748b',
      fontSize: 10
    },
    splitLine: {
      lineStyle: {
        color: '#1e3a8a',
        type: 'dashed'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#1e3a8a'
      }
    },
    axisLabel: {
      color: '#64748b',
      fontSize: 10
    }
  },
  series: [
    {
      name: '网关数量',
      data: projectData.map((item) => item.gatewayNum || item.count || 0),
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00d4ff' },
          { offset: 1, color: '#3b82f6' }
        ]),
        borderRadius: [4, 4, 0, 0]
      }
    }
  ]
})

export const getAlertTrendOption = () => ({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#1e3a8a',
    textStyle: {
      color: '#e2e8f0'
    }
  },
  legend: {
    data: ['二级报警', '报警', '预警'],
    right: 10,
    top: 0,
    textStyle: {
      color: '#94a3b8',
      fontSize: 10
    },
    itemWidth: 10,
    itemHeight: 10
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['01', '05', '10', '15', '20', '25', '30'],
    axisLine: {
      lineStyle: {
        color: '#1e3a8a'
      }
    },
    axisLabel: {
      color: '#64748b',
      fontSize: 10
    }
  },
  yAxis: {
    type: 'value',
    name: '数量',
    nameTextStyle: {
      color: '#64748b',
      fontSize: 10
    },
    splitLine: {
      lineStyle: {
        color: '#1e3a8a',
        type: 'dashed'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#1e3a8a'
      }
    },
    axisLabel: {
      color: '#64748b',
      fontSize: 10
    }
  },
  series: [
    {
      name: '二级报警',
      data: [0, 1, 1, 2, 0, 0, 3],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#a855f7',
        width: 2
      },
      itemStyle: {
        color: '#a855f7'
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: 'Max'
          },
          {
            type: 'min',
            name: 'Min'
          }
        ]
      }
    },
    {
      name: '报警',
      data: [1, 0, 0, 1, 1, 1, 0],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#ef4444',
        width: 2
      },
      itemStyle: {
        color: '#ef4444'
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: 'Max'
          },
          {
            type: 'min',
            name: 'Min'
          }
        ]
      }
    },
    {
      name: '预警',
      data: [0, 1, 1, 0, 1, 1, 1],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#f59e0b',
        width: 2
      },
      itemStyle: {
        color: '#f59e0b'
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: 'Max'
          },
          {
            type: 'min',
            name: 'Min'
          }
        ]
      }
    }
  ]
})