ruoyi-react-front/app/(other)/test10/components/MonitoringCharts.tsx

"use client"

import {Tabs} from "antd"
import EChart from "@/components/echarts"

const { TabPane } = Tabs

export default function MonitoringCharts() {
  // 液位监测数据
  const levelOption = {
    title: {
      text: "液位监测",
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
    },
    yAxis: {
      type: "value",
      name: "液位(m)",
    },
    series: [
      {
        data: [0.2, 0.3, 0.4, 0.8, 0.6, 0.4, 0.3],
        type: "line",
        smooth: true,
        areaStyle: {
          opacity: 0.3,
        },
        markLine: {
          data: [{ yAxis: 0.5, name: "报警线", lineStyle: { color: "red" } }],
        },
      },
    ],
  }

  // 流量监测数据
  const flowOption = {
    title: {
      text: "流量监测",
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
    },
    yAxis: {
      type: "value",
      name: "流量(m³/s)",
    },
    series: [
      {
        data: [1.2, 1.5, 2.1, 2.8, 2.3, 1.8, 1.4],
        type: "line",
        smooth: true,
        itemStyle: { color: "#1890ff" },
      },
    ],
  }

  // 设备状态饼图
  const deviceStatusOption = {
    title: {
      text: "设备状态分布",
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: "60%",
        data: [
          { value: 1180, name: "在线", itemStyle: { color: "#52c41a" } },
          { value: 34, name: "离线", itemStyle: { color: "#d9d9d9" } },
          { value: 20, name: "故障", itemStyle: { color: "#ff4d4f" } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  }

  return (
    <div className="h-full">
      <Tabs defaultActiveKey="1" size="small">
        <TabPane tab="液位监测" key="1">
          <EChart option={levelOption} style={{ height: 280 }} />
        </TabPane>
        <TabPane tab="流量监测" key="2">
          <EChart option={flowOption} style={{ height: 280 }} />
        </TabPane>
        <TabPane tab="设备状态" key="3">
          <EChart option={deviceStatusOption} style={{ height: 280 }} />
        </TabPane>
      </Tabs>
    </div>
  )
}