feat(test10): 新增监控图表组件并启用 Turbopack

- 新增 MonitoringCharts 组件，包含液位监测、流量监测和设备状态分布图表
- 在 package.json 中添加 --turbopack 参数以启用 Turbopack

app/(other)/test10/components/MonitoringCharts.tsx

@@ -0,0 +1,112 @@
+"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>
+  )
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"