safePower/src/view/largeScreen2/ttes.js

import * as echarts from 'echarts'
import {
  techChartAxisLabel,
  techChartAxisLine,
  techChartCenterText,
  techChartLegend,
  techChartSeriesColors,
  techChartSplitLine,
  techChartTooltip
} from '@/utils/techChartTheme'

const chartNameTextStyle = {
  color: techChartAxisLabel.color,
  fontSize: 10
}

const dashedSplitLine = {
  lineStyle: {
    ...techChartSplitLine.lineStyle,
    type: 'dashed'
  }
}

const compactAxisLabel = {
  ...techChartAxisLabel,
  fontSize: 10
}

const pieItemStyle = {
  borderRadius: 8,
  borderColor: 'rgba(5, 16, 32, 0.96)',
  borderWidth: 2
}

const createCenterLabelRich = (totalFontSize, nameFontSize) => ({
  total: {
    fontSize: totalFontSize,
    fontWeight: 'bold',
    color: techChartCenterText.primary,
    lineHeight: 35
  },
  name: {
    fontSize: nameFontSize,
    color: techChartCenterText.secondary
  }
})

export const getAlarmPendingOption = () => ({
  tooltip: {
    trigger: 'axis',
    ...techChartTooltip
  },
  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: techChartAxisLine,
    axisLabel: compactAxisLabel
  },
  yAxis: {
    type: 'value',
    name: '次数',
    nameTextStyle: chartNameTextStyle,
    splitLine: dashedSplitLine,
    axisLine: techChartAxisLine,
    axisLabel: compactAxisLabel
  },
  series: [
    {
      name: '待处理报警',
      data: [1, 3, 2, 5, 2, 3],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: techChartSeriesColors[0],
        width: 2
      },
      itemStyle: {
        color: techChartSeriesColors[0]
      },
      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: pieItemStyle,
      label: {
        show: true,
        position: 'center',
        formatter: '{total|15}\n{name|报警总数}',
        rich: createCenterLabelRich(28, 14)
      },
      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: ['42%', '68%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: pieItemStyle,
        label: {
          show: true,
          position: 'center',
          formatter: `{total|${total}}\n{name|设备总数}`,
          rich: createCenterLabelRich(16, 10)
        },
        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',
    ...techChartTooltip
  },
  grid: {
    top: '10%',
    left: '10%',
    right: '5%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: projectData.map((item) => item.projectName || item.name || '未知'),
    axisLine: techChartAxisLine,
    axisLabel: {
      ...compactAxisLabel,
      rotate: 30,
      interval: 0,
      overflow: 'truncate',
      width: 60,
      margin: 8
    }
  },
  yAxis: {
    type: 'value',
    name: '数量',
    nameTextStyle: chartNameTextStyle,
    splitLine: dashedSplitLine,
    axisLine: techChartAxisLine,
    axisLabel: compactAxisLabel
  },
  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: techChartSeriesColors[0] },
          { offset: 1, color: techChartSeriesColors[4] }
        ]),
        borderRadius: [4, 4, 0, 0]
      }
    }
  ]
})

export const getAlertTrendOption = () => ({
  tooltip: {
    trigger: 'axis',
    ...techChartTooltip
  },
  legend: {
    data: ['二级报警', '报警', '预警'],
    right: 10,
    top: 0,
    ...techChartLegend,
    textStyle: {
      ...techChartLegend.textStyle,
      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: techChartAxisLine,
    axisLabel: compactAxisLabel
  },
  yAxis: {
    type: 'value',
    name: '数量',
    nameTextStyle: chartNameTextStyle,
    splitLine: dashedSplitLine,
    axisLine: techChartAxisLine,
    axisLabel: compactAxisLabel
  },
  series: [
    {
      name: '二级报警',
      data: [0, 1, 1, 2, 0, 0, 3],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: techChartSeriesColors[5],
        width: 2
      },
      itemStyle: {
        color: techChartSeriesColors[5]
      },
      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: techChartSeriesColors[3],
        width: 2
      },
      itemStyle: {
        color: techChartSeriesColors[3]
      },
      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: techChartSeriesColors[2],
        width: 2
      },
      itemStyle: {
        color: techChartSeriesColors[2]
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: 'Max'
          },
          {
            type: 'min',
            name: 'Min'
          }
        ]
      }
    }
  ]
})