feat(app): 新增隐患治理统计分析功能

- 添加隐患类型分布、处理状态分布、隐患处理趋势、部门处理效率等统计图表- 实现统计概览卡片，展示隐患总数、已完成、处理中、待处理等数据
-集成 EChart 组件用于图表展示
- 添加时间范围选择和日期范围选择功能

app/(other)/test8/components/hazard-treatment-stats.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+import {Card, Col, DatePicker, Row, Select, Space} from "antd"
+import EChart from "@/components/echarts"
+import {useState} from "react"
+
+const { RangePicker } = DatePicker
+const { Option } = Select
+
+export default function HazardTreatmentStats() {
+  const [timeRange, setTimeRange] = useState("month")
+
+  // 隐患类型统计数据
+  const hazardTypeData = [
+    { type: "压力异常", count: 45, percentage: 28.8 },
+    { type: "泄漏隐患", count: 38, percentage: 24.4 },
+    { type: "设施损坏", count: 35, percentage: 22.4 },
+    { type: "管道老化", count: 25, percentage: 16.0 },
+    { type: "其他", count: 13, percentage: 8.3 },
+  ]
+
+  // 处理状态统计数据
+  const statusData = [
+    { status: "已完成", count: 88, color: "#52c41a" },
+    { status: "处理中", count: 45, color: "#faad14" },
+    { status: "待处理", count: 23, color: "#f5222d" },
+  ]
+
+  // 月度趋势数据
+  const trendData = [
+    { month: "2023-07", 新增: 12, 完成: 8, 处理中: 4 },
+    { month: "2023-08", 新增: 15, 完成: 12, 处理中: 7 },
+    { month: "2023-09", 新增: 18, 完成: 15, 处理中: 10 },
+    { month: "2023-10", 新增: 22, 完成: 18, 处理中: 14 },
+    { month: "2023-11", 新增: 20, 完成: 22, 处理中: 12 },
+    { month: "2023-12", 新增: 16, 完成: 20, 处理中: 8 },
+    { month: "2024-01", 新增: 25, 完成: 16, 处理中: 17 },
+  ]
+
+  // 处理效率数据
+  const efficiencyData = [
+    { department: "管网维护部", 平均处理天数: 8.5, 完成率: 92 },
+    { department: "安全监察部", 平均处理天数: 12.3, 完成率: 88 },
+    { department: "技术服务部", 平均处理天数: 6.8, 完成率: 95 },
+    { department: "应急抢修部", 平均处理天数: 4.2, 完成率: 98 },
+  ]
+
+  const barOption = {
+    title: { text: "隐患类型分布", left: "center" },
+    tooltip: { trigger: "axis" },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: { type: "value" },
+    yAxis: {
+      type: "category",
+      data: hazardTypeData.map((item) => item.type),
+    },
+    series: [
+      {
+        type: "bar",
+        data: hazardTypeData.map((item) => item.count),
+        itemStyle: {
+          color: (params: any) => {
+            const colors = ["#1890ff", "#52c41a", "#faad14", "#f5222d", "#722ed1"]
+            return colors[params.dataIndex % colors.length]
+          },
+        },
+      },
+    ],
+  }
+
+  const pieOption = {
+    title: { text: "处理状态分布", left: "center" },
+    tooltip: { trigger: "item" },
+    legend: { orient: "vertical", left: "left" },
+    series: [
+      {
+        type: "pie",
+        radius: "50%",
+        data: statusData.map((item) => ({
+          value: item.count,
+          name: item.status,
+          itemStyle: { color: item.color },
+        })),
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      },
+    ],
+  }
+
+  const lineOption = {
+    title: { text: "隐患处理趋势", left: "center" },
+    tooltip: { trigger: "axis" },
+    legend: { data: ["新增", "完成", "处理中"] },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: {
+      type: "category",
+      data: trendData.map((item) => item.month),
+    },
+    yAxis: { type: "value" },
+    series: [
+      {
+        name: "新增",
+        type: "line",
+        data: trendData.map((item) => item.新增),
+        itemStyle: { color: "#1890ff" },
+      },
+      {
+        name: "完成",
+        type: "line",
+        data: trendData.map((item) => item.完成),
+        itemStyle: { color: "#52c41a" },
+      },
+      {
+        name: "处理中",
+        type: "line",
+        data: trendData.map((item) => item.处理中),
+        itemStyle: { color: "#faad14" },
+      },
+    ],
+  }
+
+  const efficiencyBarOption = {
+    title: { text: "部门处理效率", left: "center" },
+    tooltip: { trigger: "axis" },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: {
+      type: "category",
+      data: efficiencyData.map((item) => item.department),
+    },
+    yAxis: { type: "value", name: "平均处理天数" },
+    series: [
+      {
+        type: "bar",
+        data: efficiencyData.map((item) => item.平均处理天数),
+        itemStyle: { color: "#722ed1" },
+      },
+    ],
+  }
+
+  return (
+    <div className="p-6">
+      <Card title="隐患治理统计分析">
+        <div className="mb-6">
+          <Space>
+            <Select value={timeRange} onChange={setTimeRange} style={{ width: 120 }}>
+              <Option value="week">本周</Option>
+              <Option value="month">本月</Option>
+              <Option value="quarter">本季度</Option>
+              <Option value="year">本年</Option>
+            </Select>
+            <RangePicker />
+          </Space>
+        </div>
+
+        {/* 统计概览 */}
+        <Row gutter={16} className="mb-6">
+          <Col span={6}>
+            <Card size="small">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-blue-600">156</div>
+                <div className="text-gray-600">隐患总数</div>
+              </div>
+            </Card>
+          </Col>
+          <Col span={6}>
+            <Card size="small">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-green-600">88</div>
+                <div className="text-gray-600">已完成</div>
+                <div className="text-sm text-gray-500">完成率: 56.4%</div>
+              </div>
+            </Card>
+          </Col>
+          <Col span={6}>
+            <Card size="small">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-orange-600">45</div>
+                <div className="text-gray-600">处理中</div>
+                <div className="text-sm text-gray-500">占比: 28.8%</div>
+              </div>
+            </Card>
+          </Col>
+          <Col span={6}>
+            <Card size="small">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-red-600">23</div>
+                <div className="text-gray-600">待处理</div>
+                <div className="text-sm text-gray-500">占比: 14.7%</div>
+              </div>
+            </Card>
+          </Col>
+        </Row>
+
+        {/* 图表展示 */}
+        <Row gutter={16} className="mb-6">
+          <Col span={12}>
+            <Card title="隐患类型分布" size="small">
+              <EChart option={barOption} style={{ height: 300 }} />
+            </Card>
+          </Col>
+          <Col span={12}>
+            <Card title="处理状态分布" size="small">
+              <EChart option={pieOption} style={{ height: 300 }} />
+            </Card>
+          </Col>
+        </Row>
+
+        <Row gutter={16} className="mb-6">
+          <Col span={24}>
+            <Card title="隐患处理趋势" size="small">
+              <EChart option={lineOption} style={{ height: 300 }} />
+            </Card>
+          </Col>
+        </Row>
+
+        <Row gutter={16}>
+          <Col span={12}>
+            <Card title="部门处理效率" size="small">
+              <EChart option={efficiencyBarOption} style={{ height: 300 }} />
+            </Card>
+          </Col>
+          <Col span={12}>
+            <Card title="处理效率统计" size="small">
+              <div className="space-y-4">
+                {efficiencyData.map((item, index) => (
+                  <div key={index} className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                    <div>
+                      <div className="font-medium">{item.department}</div>
+                      <div className="text-sm text-gray-600">平均处理: {item.平均处理天数}天</div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-bold text-green-600">{item.完成率}%</div>
+                      <div className="text-sm text-gray-600">完成率</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  )
+}