运维工单

config/routes.js

@@ -128,6 +128,19 @@ export default [
                             },
                         ]
                     },
+                    //智能巡检
+                    {
+                        path: '/topnavbar00/business/inspection',
+                        name: 'inspection_inspectionTemplate',
+                        routes: [
+                            // 巡检模板
+                            {
+                                path: '/topnavbar00/business/inspection/inspectionTemplate',
+                                name: 'inspectionTemplate',
+                                component: './inspection_inspectionTemplate/InspectionTemplate',
+                            },
+                        ]
+                    }
                 ],
             },
         ],

src/pages/inspection_inspectionTemplate/InspectionTemplate.js

@@ -0,0 +1,8 @@
+const InspectionTemplate = () => {
+    return (
+        <div>
+            巡检模板
+        </div>
+    )
+}
+export default InspectionTemplate

src/pages/nav_system_content/SystemContentList.js

@@ -231,6 +231,27 @@ const SystemContentList = (props) => {
                     },
                 ]
             },
+            {
+                path: '/topnavbar00/business/inspection',
+                icon: <img
+                    src={icon1}
+                    alt="智能巡检"
+                    style={{
+                        width: '16px',
+                        height: '16px',
+                        opacity: selectedKey.includes('/topnavbar00/business/inspection') ? 1 : 0.6
+                    }}
+                />,
+                key: "/topnavbar00/business/inspection",
+                "label": "智能巡检",
+                children: [
+                    {
+                        path: '/topnavbar00/business/inspection/inspectionTemplate',
+                        key: "/topnavbar00/business/inspection/inspectionTemplate",
+                        "label": "巡检模板"
+                    },
+                ]
+            }
         ]
         setMenuItems(fixedMenuItems)
         // 初始化默认路由

src/pages/serviceticket_analysis/Analysis.js

@@ -1,9 +1,821 @@
-import Title from '@/pages/homepage/compontent/title'
+import React, { useEffect, useRef, useState } from 'react';
+import Title from '@/pages/homepage/compontent/title';
+import {
+  Row,
+  Col,
+  Select,
+  DatePicker,
+  Statistic,
+  Card,
+  Table,
+  Tag,
+  Space,
+  Form, Button,
+} from 'antd';
+import * as echarts from 'echarts';
+import styles from './Analysis.less';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+const Title1=(props)=>{
+  return(
+      <div style={{display:'flex',alignItems:'center',fontSize:20,marginBottom:'20px'}}>
+          <span style={{background:'#006665',display:'inline-block',height:'6px',width:'6px',borderRadius:'50%',marginRight:'7px'}}></span>
+          <span>{props.title}</span>
+      </div>
+  )
+}
+
 const Analysis = () => {
+  const [form] = Form.useForm();
+  const numberLineChartRef=useRef(null)
+  const numberLineChartRef1=useRef(null)
+  const numberLineChartRef2=useRef(null)
+  const pieChartRef = useRef(null);
+  const barChartRef = useRef(null);
+  const lineChartRef = useRef(null);
+  const barChartRef1 = useRef(null);
+  const barChartRef2 = useRef(null);
+  // 初始化图表
+  useEffect(() => {
+      if (numberLineChartRef.current) {
+        const chart = echarts.init(numberLineChartRef.current);
+        const numberLineOption = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line'
+            }
+          },
+          grid: {
+            top: '10%',
+            left: '0%',
+            right: '6%',
+            bottom: '10%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月'],
+              axisTick: {
+                alignWithLabel: true
+              },
+              boundaryGap: false
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '月环比增长15%',
+            }
+          ],
+          series: [
+            {
+              name: '工单数量',
+              type: 'line',
+              data: [900, 1000, 950, 1050, 900, 850, 800],
+              lineStyle: {
+                color:'#006665'
+              },
+              itemStyle:{
+                color:'#006665'
+              },
+              areaStyle:{
+                color:'#DFEAE5'
+              }
+            }
+          ]
+        };
+        chart.setOption(numberLineOption);
+        const handleResize = () => {
+          chart.resize();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+          window.removeEventListener('resize', handleResize);
+          chart?.dispose();
+        };
+      }
+  }, []);
+  useEffect(() => {
+      if (numberLineChartRef1.current) {
+        const chart = echarts.init(numberLineChartRef1.current);
+        const numberLineOption1 = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line'
+            }
+          },
+          grid: {
+            top: '10%',
+            left: '0%',
+            right: '6%',
+            bottom: '10%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月'],
+              axisTick: {
+                alignWithLabel: true
+              },
+              boundaryGap: false
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '月环比增长15%',
+            }
+          ],
+          series: [
+            {
+              name: '工单数量',
+              type: 'line',
+              data: [900, 1000, 950, 1050, 900, 850, 800],
+              lineStyle: {
+                color:'#FF826D'
+              },
+              itemStyle:{
+                color:'#FF826D'
+              },
+              areaStyle:{
+                color:'#F4EDED'
+              }
+            }
+          ]
+        };
+        chart.setOption(numberLineOption1);
+        const handleResize = () => {
+          chart.resize();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+          window.removeEventListener('resize', handleResize);
+          chart?.dispose();
+        };
+      }
+  }, []);
+  useEffect(() => {
+      if (numberLineChartRef2.current) {
+        const chart = echarts.init(numberLineChartRef2.current);
+        const numberLineOption1 = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line'
+            }
+          },
+          grid: {
+            top: '10%',
+            left: '0%',
+            right: '6%',
+            bottom: '10%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月'],
+              axisTick: {
+                alignWithLabel: true
+              },
+              boundaryGap: false
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '月环比增长15%',
+            }
+          ],
+          series: [
+            {
+              name: '工单数量',
+              type: 'line',
+              data: [2.5, 3, 5, 2.5, 4, 4.5, 3.5],
+              lineStyle: {
+                color:'#006665'
+              },
+              itemStyle:{
+                color:'#006665'
+              },
+              areaStyle:{
+                color:'#E2EFEA'
+              }
+            }
+          ]
+        };
+        chart.setOption(numberLineOption1);
+        const handleResize = () => {
+          chart.resize();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+          window.removeEventListener('resize', handleResize);
+          chart?.dispose();
+        };
+      }
+  }, []);
+
+  useEffect(()=>{
+    // 饼图 - 工单分类统计
+    if (pieChartRef.current) {
+      const chart = echarts.init(pieChartRef.current);
+      const pieOption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          textStyle: {
+            fontSize: 16
+          },
+          itemGap:30,
+          itemWidth:0,
+          formatter:'{name}'
+
+        },
+        series: [
+          {
+            name: '工单类型',
+            type: 'pie',
+            radius: '70%',
+            center: ['75%', '40%'],
+            data: [
+              {value: 85, name: '设备维修', itemStyle: {color: '#C1D3D1'}},
+              {value: 60, name: '故障报修', itemStyle: {color: '#045F5E80'}},
+              {value: 45, name: '软件升级', itemStyle: {color: '#FFBC00'}},
+              {value: 30, name: '巡检任务', itemStyle: {color: '#FF826D'}}
+            ],
+            labelLine:{
+              show:false
+            },
+            label:{
+              show:false
+            }
+          }
+        ]
+      };
+      chart.setOption(pieOption);
+      const handleResize = () => {
+        chart.resize();
+      };
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart?.dispose();
+      };
+    }
+
+  },[])
+  useEffect(()=>{
+    // 柱状图 - 工单状态统计
+    if (barChartRef.current) {
+      const chart = echarts.init(barChartRef.current);
+      const barOption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          textStyle: {
+            fontSize: 16
+          },
+          itemGap:30,
+          itemWidth:0,
+          formatter:'{name}'
+
+        },
+        series: [
+          {
+            name: '工单类型',
+            type: 'pie',
+            radius: '70%',
+            center: ['75%', '40%'],
+            data: [
+              {value: 85, name: '设备维修', itemStyle: {color: '#C1D3D1'}},
+              {value: 60, name: '故障报修', itemStyle: {color: '#045F5E80'}},
+              {value: 45, name: '软件升级', itemStyle: {color: '#FFBC00'}},
+              {value: 30, name: '巡检任务', itemStyle: {color: '#FF826D'}}
+            ],
+            labelLine:{
+              show:false
+            },
+            label:{
+              show:false
+            }
+          }
+        ]
+      };
+      chart.setOption(barOption);
+      const handleResize = () => {
+        chart.resize();
+      };
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart?.dispose();
+      };
+    }
+
+  },[])
+  useEffect(()=>{
+    // 柱状图 - 工单状态统计
+    if (barChartRef1.current) {
+      const chart = echarts.init(barChartRef1 .current);
+      const barOption = {
+        // 提示框（鼠标悬浮显示数据）
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' }
+        },
+        // 图例（多系列时开启）
+        // legend: {
+        //   top: 0,
+        //   right: 10
+        // },
+        // 网格（调整图表内边距，适配容器）
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top: '10%',
+          containLabel: true
+        },
+        // X轴（替换为你的实际标签）
+        xAxis: {
+          type: 'category',
+          data: ['传感器', '服务器', '网络设备', '安全设备', '网关','摄像头','执行器','机房环境类','其他'],
+          axisLabel: { fontSize: 12 }
+        },
+        // Y轴
+        yAxis: {
+          type: 'value',
+          axisLabel: { fontSize: 12 }
+        },
+        // 系列数据（替换为你的实际数值）
+        series: [
+          {
+            name: '数据1',
+            type: 'bar',
+            data: [{value: 85, itemStyle: {color: '#C1D3D1'}}, {value: 95, itemStyle: {color: '#045F5E80'}}, {value: 96, itemStyle: {color: '#FFBC00'}}, {value: 65, itemStyle: {color: '#FF826D'}}, {value: 47, itemStyle: {color: '#045F5E80'}}, {value: 61, itemStyle: {color: '#FFBC00'}}, {value: 71, itemStyle: {color: '#FF826D'}}, {value: 45, itemStyle: {color: '#045F5E80'}}, {value: 92, itemStyle: {color: '#FFBC00'}}], // 匹配X轴的数值
+            // 柱子样式（可选）
+            // itemStyle: {
+            //   color: '#1890ff', // 阿里云蓝（可自定义）
+            //   borderRadius: 4 // 圆角
+            // },
+            label:{
+              position:'top',
+              color:'#333333',
+              show: true
+            },
+            // 柱子宽度
+            barWidth: '20%'
+          },
+          // 如需多系列，新增对象即可
+          // {
+          //   name: '数据2',
+          //   type: 'bar',
+          //   data: [18, 35, 25, 48, 30],
+          //   itemStyle: { color: '#52c41a' }
+          // }
+        ]
+      };
+      chart.setOption(barOption);
+      const handleResize = () => {
+        chart.resize();
+      };
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart?.dispose();
+      };
+    }
+
+  },[])
+  useEffect(()=>{
+    // 折线图 - 工单趋势
+    if (lineChartRef.current) {
+      const chart = echarts.init(lineChartRef.current);
+      const lineOption = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        // legend: {
+        //   data: ['申请工单', '完成工单'],
+        //   textStyle: {
+        //     fontSize: 12
+        //   }
+        // },
+        grid: {
+          top:'10%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+
+          {
+            name: '完成工单',
+            type: 'line',
+            stack: '总量',
+            data: [25, 27, 27, 29, 22, 26, 21],
+            lineStyle: {
+              color: '#52c41a'
+            },
+
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 0, color: 'rgba(82, 196, 26, 0.3)'},
+                {offset: 1, color: 'rgba(82, 196, 26, 0.1)'}
+              ])
+            }
+          }
+        ]
+      };
+      chart.setOption(lineOption);
+      const handleResize = () => {
+        chart.resize();
+      };
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart?.dispose();
+      };
+    }
+
+  },[])
+  useEffect(()=>{
+    // 柱状图 - 工单状态统计
+    if (barChartRef2.current) {
+      const chart = echarts.init(barChartRef2 .current);
+      const barOption = {
+        // 提示框（鼠标悬浮显示数据）
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' }
+        },
+        // 图例（多系列时开启）
+        // legend: {
+        //   top: 0,
+        //   right: 10
+        // },
+        // 网格（调整图表内边距，适配容器）
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top: '10%',
+          containLabel: true
+        },
+        // X轴（替换为你的实际标签）
+        xAxis: {
+          type: 'category',
+          data: ['生产部', '研发部', '运维部', '财务部', '人事部'],
+          axisLabel: { fontSize: 12 }
+        },
+        // Y轴
+        yAxis: {
+          type: 'value',
+          axisLabel: { fontSize: 12 }
+        },
+        // 系列数据（替换为你的实际数值）
+        series: [
+          {
+            name: '数据1',
+            type: 'bar',
+            data: [{value: 74, itemStyle: {color: '#C1D3D1'}}, {value: 95, itemStyle: {color: '#045F5E80'}}, {value: 96, itemStyle: {color: '#FFBC00'}}, {value: 65, itemStyle: {color: '#FF826D'}}, {value: 47, itemStyle: {color: '#045F5E80'}}], // 匹配X轴的数值
+            // 柱子样式（可选）
+            itemStyle: {
+              // color: '#1890ff', // 阿里云蓝（可自定义）
+              borderRadius: 4 // 圆角
+            },
+            label:{
+              position:'top',
+              color:'#333333',
+              show: true
+            },
+            // 柱子宽度
+            barWidth: '20%'
+          },
+
+        ]
+      };
+      chart.setOption(barOption);
+      const handleResize = () => {
+        chart.resize();
+      };
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart?.dispose();
+      };
+    }
+
+  },[])
+  // 表格数据
+  const tableColumns = [
+    {
+      title: '部门',
+      dataIndex: 'department',
+      key: 'department'
+    },
+    {
+      title: '申请工单',
+      dataIndex: 'applied',
+      key: 'applied'
+    },
+    {
+      title: '完成工单',
+      dataIndex: 'completed',
+      key: 'completed'
+    },
+    {
+      title: '完成率',
+      dataIndex: 'completionRate',
+      key: 'completionRate',
+      render: (rate) => <Tag color="#52c41a">{rate}</Tag>
+    },
+    {
+      title: '平均处理时长',
+      dataIndex: 'avgDuration',
+      key: 'avgDuration'
+    }
+  ];
+
+  const tableData = [
+    { key: '1', department: '生产部', applied: 120, completed: 108, completionRate: '90%', avgDuration: '2.5天' },
+    { key: '2', department: '技术部', applied: 85, completed: 82, completionRate: '96.5%', avgDuration: '1.8天' },
+    { key: '3', department: '运维部', applied: 156, completed: 148, completionRate: '94.9%', avgDuration: '2.2天' },
+    { key: '4', department: '财务部', applied: 45, completed: 45, completionRate: '100%', avgDuration: '1.2天' },
+    { key: '5', department: '行政部', applied: 68, completed: 62, completionRate: '91.2%', avgDuration: '1.9天' }
+  ];
+  const pieColumns = [
+    {
+      title: '工单类型',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '数量',
+      dataIndex: 'count',
+      key: 'count',
+    },
+    {
+      title: '占比',
+      dataIndex: 'proportion',
+      key: 'proportion',
+    },
+    {
+      title: '平均处理时长',
+      dataIndex: 'avgTime',
+      key: 'avgTime',
+    },
+  ];
+  const pieData = [
+    {
+      key: '1',
+      type: '设备维修',
+      count: 540,
+      proportion: '45%',
+      avgTime: '5.0小时',
+    },
+    {
+      key: '2',
+      type: '软件升级',
+      count: 300,
+      proportion: '25%',
+      avgTime: '3.5小时',
+    },
+    {
+      key: '3',
+      type: '故障报修',
+      count: 240,
+      proportion: '20%',
+      avgTime: '6.0小时',
+    },
+    {
+      key: '4',
+      type: '巡检任务',
+      count: 120,
+      proportion: '10%',
+      avgTime: '2.0小时',
+    },
+  ];
+
+  const pieColumns1=[
+    {
+      title: '排名',
+      dataIndex: 'order',
+      key: 'order',
+    },
+    {
+      title: '故障原因',
+      dataIndex: 'faultReason',
+      key: 'faultReason',
+    },
+  ]
+  const pieData1=[
+    {
+      key: '1',
+      order: 'NO.1',
+      faultReason: '传感器硬件损坏',
+    },
+    {
+      key: '2',
+      order: 'NO.2',
+      faultReason: '网关软件版本不兼容',
+    },
+    {
+      key: '3',
+      order: 'NO.3',
+      faultReason: '摄像头网络波动',
+    },
+
+  ]
   return (
-    <div>
-      <Title title="统计分析" />
+    <div className={styles.container}>
+      {/* 统计卡片 */}
+      <Row gutter={[20, 20]} className={styles.statsSection}>
+        <Col xs={24} sm={12} md={6}>
+          <div className={styles.statCard}>
+            <Row style={{width:'100%'}}>
+                <Col span={8}>
+                  <div style={{height: '100%',margin:'15px 0'}}>
+                      <div className={styles.statValue}>1200</div>
+                      <div className={styles.statTitle}>工单总数</div>
+                  </div>
+                </Col>
+                <Col span={16}>
+                  <div style={{color:'#666666'}}>月环比增长 <span>15</span>%</div>
+                  <div ref={numberLineChartRef} style={{width:'100%',height:'100%',marginBottom:'-15px'}}></div>
+                </Col>
+            </Row>
+          </div>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <div className={styles.statCard}>
+            <Row style={{width: '100%'}}>
+              <Col span={8}>
+                <div style={{height: '100%', margin: '15px 0'}}>
+                  <div className={styles.statValue}>85</div>
+                  <div className={styles.statTitle}>故障设备数</div>
+                </div>
+              </Col>
+              <Col span={16}>
+                <div style={{color: '#666666'}}>月环比下降 <span>15</span>%</div>
+                <div ref={numberLineChartRef1} style={{width: '100%', height: '100%', marginBottom: '-15px'}}></div>
+              </Col>
+            </Row>
+            </div>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <div className={styles.statCard}>
+            <Row style={{width: '100%'}}>
+              <Col span={8}>
+                <div style={{height: '100%', margin: '15px 0'}}>
+                  <div className={styles.statValue}>92%</div>
+                  <div className={styles.statTitle}>工单处理完成率</div>
+                </div>
+              </Col>
+              <Col span={16} >
+                <div style={{color: '#666666',lineHeight:'65px'}}>目标 95%，差距 3%</div>
+                <progress value={92} max={100} style={{height:'28px',padding:0}}>70%</progress>
+              </Col>
+            </Row>
+          </div>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <div className={styles.statCard}>
+            <Row style={{width: '100%'}}>
+              <Col span={8}>
+                <div style={{height: '100%', margin: '15px 0'}}>
+                  <div className={styles.statValue}>4.2小时</div>
+                  <div className={styles.statTitle}>平均处理时长</div>
+                </div>
+              </Col>
+              <Col span={16}>
+                <div style={{color: '#666666'}}>月环比缩短 <span>0.5</span>小时</div>
+                <div ref={numberLineChartRef2} style={{width: '100%', height: '100%', marginBottom: '-15px'}}></div>
+              </Col>
+            </Row>
+          </div>
+        </Col>
+      </Row>
+
+      {/* 图表区域 */}
+      <Row gutter={[20, 20]} className={styles.chartsSection}>
+        {/* 饼图 */}
+        <Col xs={24} lg={6}>
+          <div className={styles.chartContainer}>
+            <Title1 title={'工单类型统计'}></Title1>
+            <div ref={pieChartRef} style={{height:'200px',width:'100%'}} />
+            <div>
+              <Table columns={pieColumns} dataSource={pieData} style={{width:'100%'}} pagination={false}></Table>
+            </div>
+          </div>
+        </Col>
+        {/* 柱状图 */}
+        <Col xs={24} lg={6}>
+          <div className={styles.chartContainer}>
+            <Title1 title={'故障类型统计'}></Title1>
+            <div ref={barChartRef} className={styles.chart}/>
+            <div>
+              <Table columns={pieColumns1} dataSource={pieData1} style={{width: '100%'}} pagination={false}></Table>
+            </div>
+          </div>
+        </Col>
+        {/* 折线图 */}
+        <Col xs={24} lg={12}>
+          <Row gutter={[20, 20]} style={{display:'flex',flexDirection:'column'}}>
+            <Col xs={24} lg={24}>
+              <div className={styles.chartContainer}>
+                <Title1 title={'设备类型统计'}></Title1>
+                <div ref={barChartRef1} className={styles.chart}/>
+              </div>
+            </Col>
+            <Col xs={24} lg={24}>
+              <div className={styles.chartContainer}>
+                <Title1 title={'时间趋势统计'}></Title1>
+                <div ref={lineChartRef} className={styles.chart}/>
+              </div>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+
+      {/* 部门统计表格 */}
+      <Row gutter={20}>
+        <Col span={6}>
+          <div className={styles.chartContainer}>
+            <Title1 title={'部门分布统计'}></Title1>
+            <div ref={barChartRef2} className={styles.chart}/>
+          </div>
+        </Col>
+        <Col span={18}>
+          <div className={styles.chartContainer}>
+            <Title1 title={'筛选导出'}></Title1>
+            <Form layout={"vertical"}>
+              <Row gutter={50} align={'middle'}>
+                <Col span={8}>
+                  <Form.Item label="工单类型" >
+                    <Select>
+                      <Option value="1">故障工单</Option>
+                      <Option value="2">维护工单</Option>
+                    </Select>
+                  </Form.Item>
+                </Col>
+                <Col span={8}>
+                  <Form.Item label="设备类型" >
+                    <Select>
+                      <Option value="1">故障工单</Option>
+                      <Option value="2">维护工单</Option>
+                    </Select>
+                  </Form.Item>
+                </Col>
+                <Col span={8}>
+                  <Form.Item label="故障类型" >
+                    <Select>
+                      <Option value="1">故障工单</Option>
+                      <Option value="2">维护工单</Option>
+                    </Select>
+                  </Form.Item>
+                </Col>
+                <Col span={8}>
+                  <Form.Item label="时间范围" >
+                    <DatePicker style={{width:'100%'}}></DatePicker>
+                  </Form.Item>
+                </Col>
+                <Col span={8} offset={8} style={{textAlign:'right'}}>
+                  <Button className={styles['search-button']} style={{marginRight:30}}>导出图表</Button>
+                  <Button className={styles['reset-button']}>导出数据</Button>
+                </Col>
+              </Row>
+
+            </Form>
+          </div>
+        </Col>
+      </Row>
+
     </div>
-  )
-}
-export default Analysis
+  );
+};
+
+export default Analysis;

src/pages/serviceticket_analysis/Analysis.less

@@ -0,0 +1,189 @@
+.container {
+  padding: 20px;
+  background-color: #fff;
+  //min-height: calc(100vh - 64px);
+  margin-bottom:50px;
+}
+
+.statsSection {
+  margin-bottom: 20px;
+}
+
+.statCard {
+  width:100%;
+  padding: 10px 20px;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  background:
+          linear-gradient(#fff, #fff) padding-box,
+            /* 外层渐变背景作为边框 */
+          conic-gradient(from 102.21deg at 52.75% 38.75%,
+            rgba(249, 249, 249, 0.5) -32.95deg,
+          rgba(64, 64, 64, 0.5) 10.52deg,
+          rgba(64, 64, 64, 0.35) 32.12deg,
+          #FFFFFF 60.28deg,
+          rgba(255, 255, 255, 0.5) 107.79deg,
+          rgba(64, 64, 64, 0.35) 187.59deg,
+          #F9F9F9 207.58deg,
+          #FFFFFF 287.31deg,
+          rgba(249, 249, 249, 0.5) 327.05deg,
+          rgba(64, 64, 64, 0.5) 370.52deg
+          ) border-box;
+
+  /* 关键：设置透明边框，让渐变背景透出来 */
+  border: 2px solid transparent;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  .statValue{
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 32px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #333333;
+  }
+  .statTitle{
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0em;
+    text-align: left;
+    margin-top: 20px;
+    color:#666666;
+    white-space: nowrap;
+  }
+
+
+
+}
+
+.chartsSection {
+  margin-bottom: 20px;
+}
+
+.chartContainer {
+  background:
+          linear-gradient(#fff, #fff) padding-box,
+            /* 外层渐变背景作为边框 */
+          conic-gradient(from 102.21deg at 52.75% 38.75%,
+            rgba(249, 249, 249, 0.5) -32.95deg,
+          rgba(64, 64, 64, 0.5) 10.52deg,
+          rgba(64, 64, 64, 0.35) 32.12deg,
+          #FFFFFF 60.28deg,
+          rgba(255, 255, 255, 0.5) 107.79deg,
+          rgba(64, 64, 64, 0.35) 187.59deg,
+          #F9F9F9 207.58deg,
+          #FFFFFF 287.31deg,
+          rgba(249, 249, 249, 0.5) 327.05deg,
+          rgba(64, 64, 64, 0.5) 370.52deg
+          ) border-box;
+
+  /* 关键：设置透明边框，让渐变背景透出来 */
+  border: 2px solid transparent;
+  padding: 20px;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  //height: 350px;
+  //display: flex;
+  //flex-direction: column;
+  width:100%;
+  height:100%;
+}
+
+.chartTitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.chart {
+  //flex: 1;
+  width: 100%;
+  height:200px;
+}
+
+.tableSection {
+  background: #fff;
+  padding: 20px;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.tableTitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .container {
+    padding: 12px;
+  }
+
+  .queryForm {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .queryForm .ant-form-item {
+    margin-right: 0;
+    margin-bottom: 16px;
+    width: 100%;
+  }
+
+  .queryForm .ant-form-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .chartContainer {
+    height: 300px;
+    padding: 16px;
+  }
+
+  .statCard {
+    padding: 16px;
+  }
+}
+.search-button{
+  background-image: url('../../assets/img/assetmangement1.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: #fff;
+  border-radius: 4px;
+  height: 36px;
+  border-color:#d9d9d9 ;
+  background-color: #045F5E80;
+}
+.reset-button{
+  background-image: url('../../assets/img/assetmangement2.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: rgba(0, 102, 101, 1);
+  border-radius: 4px;
+  height: 36px;
+  border-color:#d9d9d9 ;
+  background-color: #B7E5D533;
+}
+.del-button{
+  background-image: url('../../assets/img/assetmangement3.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: #000;
+  border-radius: 4px;
+  height: 36px;
+  width:88px;
+  border-color:#d9d9d9 ;
+  background-color: #E5B7B733;
+}

src/pages/serviceticket_history/History.css

@@ -1,73 +0,0 @@
-.item {
-  padding: 20px;
-  background: #FFFFFF4D;
-  backdrop-filter: blur(15px);
-  border-radius: 8px;
-  position: relative;
-  margin-top: 20px;
-  box-shadow: -2px 4px 10px 0px #9191910D, -7px 17px 18px 0px #9191910A, -15px 37px 24px 0px #91919108, -27px 66px 29px 0px #91919103, -42px 103px 31px 0px #91919100;
-}
-.item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid transparent;
-  border-image-slice: 1;
-  border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg);
-  border-radius: 8px;
-  pointer-events: none;
-}
-.item-num {
-  font-size: 26px;
-  font-weight: 600;
-  line-height: 32px;
-  letter-spacing: 0em;
-  text-align: left;
-}
-.item-title {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0em;
-  text-align: left;
-  margin-top: 20px;
-  color: #666666;
-  white-space: nowrap;
-}
-.search-button {
-  background-image: url('../../assets/img/assetmangement1.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  color: #fff;
-  border-radius: 4px;
-  height: 36px;
-  border-color: #d9d9d9;
-  background-color: #045F5E80;
-}
-.reset-button {
-  background-image: url('../../assets/img/assetmangement2.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  color: #006665;
-  border-radius: 4px;
-  height: 36px;
-  border-color: #d9d9d9;
-  background-color: #B7E5D533;
-}
-.del-button {
-  background-image: url('../../assets/img/assetmangement3.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  color: #000;
-  border-radius: 4px;
-  height: 36px;
-  width: 88px;
-  border-color: #d9d9d9;
-  background-color: #E5B7B733;
-}

src/pages/serviceticket_history/History.js

@@ -80,6 +80,12 @@ const History = () => {
     const chartDom = document.getElementById('ringChart');
     const myChart = echarts.init(chartDom);
     const option = {
+      grid: {
+        top: '20%',
+        left: '20%',
+        right: '20%',
+        bottom: '20%',
+      },
       tooltip: { trigger: 'item' },
       legend: {
         orient: 'vertical',
@@ -138,7 +144,7 @@ const History = () => {
               </div>
               <div className={styles['item']}>
                 <div id="ringChart" style={{ height: 240 }}></div>
-                
+
               </div>
             </div>
           </div>

src/pages/serviceticket_my/My.js

@@ -1,9 +1,151 @@
-import Title from '@/pages/homepage/compontent/title'
+import { Button, Col, Progress, Row, Tag, Space, Form, Input, Select, DatePicker, } from "antd";
+import Title from '../homepage/compontent/title'
+import styles from './My.less'
+import svg1 from '../../assets/img/asset-main1.svg'
+import { SearchOutlined } from "@ant-design/icons";
+import TableWithPagination from "@/components/assetmangement/table";
+import {useEffect} from 'react'
+import * as echarts from 'echarts';
+const { Option } = Select;
+
+const { RangePicker } = DatePicker;
+
 const My = () => {
-  return (
-    <div>
-      <Title title="我的工单" />
-    </div>
-  )
+    const [form] = Form.useForm();
+    // 表格列配置
+    const ruleColumns = [
+        { title: '工单ID', dataIndex: 'workOrderId', key: 'workOrderId' },
+        { title: '工单类型', dataIndex: 'type', key: 'type' },
+        { title: '申请人', dataIndex: 'applicant', key: 'applicant' },
+        { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime',align:'center'},
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            align: 'center',
+            render: (status) => {
+                // 根据图片中状态的颜色更新渲染逻辑
+                let color = '';
+                switch (status) {
+                    case '已完成':
+                        color = '#52c41a'; // 绿色
+                        break;
+                    case '已驳回':
+                        color = '#f5222d'; // 红色
+                        break;
+                    case '处理中':
+                        color = '#1890ff'; // 蓝色
+                        break;
+                    case '待处理':
+                        color = '#fa8c16'; // 橙色
+                        break;
+                    default:
+                        color = '#8c8c8c';
+                }
+                return <span style={{color:color}}>{status}</span>;
+            }
+        },
+        { title: '进度', dataIndex: 'progress', key: 'progress',align:'center' },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            align:'center',
+            render: (text, record) => {
+                const actions = [];
+                if (record.status === '已完成') {
+                    actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>);
+                    actions.push(<a key="evaluate" style={{ color: '#2C9E9D' }}>评价</a>);
+                    actions.push(<a key="delete" style={{ color: '#2C9E9D' }}>删除</a>);
+                } else if (record.status === '已驳回') {
+                    actions.push(<a key="edit" style={{ color: '#2C9E9D' }}>编辑</a>);
+                    actions.push(<a key="reapply" style={{ color: '#2C9E9D' }}>重新申请</a>);
+                } else if (record.status === '处理中' || record.status === '待处理') {
+                    actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>);
+                    actions.push(<a key="process" style={{ color: '#2C9E9D' }}>处理</a>);
+                    actions.push(<a key="delete" style={{ color: '#2C9E9D' }}>删除</a>);
+                }
+                return <Space>{actions}</Space>;
+            }
+        },
+    ];
+
+    // 表格数据
+    const reminderRuleData = [
+        { key: '1', workOrderId: 'WO-MY01', type: '设备维修', applicant: '李舒萍', applyTime: '2025-10-30', status: '处理中', progress: '50%', priority: '紧急' },
+        { key: '2', workOrderId: 'WO-MY02', type: '软件升级', applicant: '吴洁丽', applyTime: '2025-10-29', status: '待处理', progress: '0%', priority: '高' },
+        { key: '3', workOrderId: 'WO-MY03', type: '故障报修', applicant: '李姝萍', applyTime: '2025-10-28', status: '已完成', progress: '100%', priority: '中' },
+        { key: '4', workOrderId: 'WO-MY04', type: '巡检任务', applicant: '何克金', applyTime: '2025-10-27', status: '处理中', progress: '60%', priority: '中' },
+        { key: '5', workOrderId: 'WO-MY05', type: '设备维修', applicant: '李勇', applyTime: '2025-10-26', status: '已驳回', progress: '0%', priority: '中' },
+        { key: '6', workOrderId: 'WO-MY06', type: '软件升级', applicant: '周校民', applyTime: '2025-10-25', status: '待处理', progress: '0%', priority: '高' },
+        { key: '7', workOrderId: 'WO-MY07', type: '故障报修', applicant: '何艳丽', applyTime: '2025-10-24', status: '已完成', progress: '100%', priority: '中' }
+    ];
+    const conicColors = {
+        '0%': '#006665',
+        '50%': '#45FFEC',
+        '55%': '#006665',
+        '90%': '#45FFEC',
+    };
+
+    return (
+        <div style={{ backgroundColor: '#f0f7f7', overflowX: 'hidden' ,padding:'20px',width:'100%'}}>
+            <Row gutter={20} style={{ height: '100%' ,width:'100%'}}>
+
+                    <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' ,width:'100%'}}>
+                        <Row style={{ marginBottom: '20px', backgroundColor: '#fff' }}>
+                            <Row style={{ width: '100%', marginBottom: '20px' }}>
+                                <Col span={12}>
+                                    <Title title="查询条件" />
+                                </Col>
+                                <Col span={12} style={{ textAlign: 'right' }}>
+                                    <Space>
+                                        <Button icon={<SearchOutlined />} htmlType="submit" className={styles['search-button']}>查询</Button>
+                                        <Button className={styles['reset-button']}>重置</Button>
+                                    </Space>
+                                </Col>
+                            </Row>
+                            <Form layout="inline" form={form} style={{ width: '100%', borderBottom: '1px solid #eeeeee', paddingBottom: '20px' }}>
+                                <Row justify="space-between" style={{ width: '100%' }}>
+                                    <Form.Item name="applicant" >
+                                        <Input placeholder="分组名称、分组 ID" />
+                                    </Form.Item>
+                                    <Form.Item name="type" label="工单类型">
+                                        <Select placeholder="请选择工单类型">
+                                            <Option value="设备维修">设备维修</Option>
+                                            <Option value="设备安装">设备安装</Option>
+                                            <Option value="设备巡检">设备巡检</Option>
+                                            <Option value="设备更换">设备更换</Option>
+                                        </Select>
+                                    </Form.Item>
+                                    <Form.Item name="status" label="工单状态">
+                                        <Select placeholder="请选择状态">
+                                            <Option value="待处理">待处理</Option>
+                                            <Option value="处理中">处理中</Option>
+                                            <Option value="已完成">已完成</Option>
+                                            <Option value="已取消">已取消</Option>
+                                        </Select>
+                                    </Form.Item>
+                                    <Form.Item name="applyTime" label="申请时间">
+                                        <RangePicker style={{ width: 240 }} />
+                                    </Form.Item>
+                                </Row>
+                            </Form>
+                        </Row>
+                        <Row style={{ width: '100%', marginTop: '20px', marginBottom: '50px' }}>
+                            <Title title="待办工单" />
+                            <Row style={{ width: '100%', marginTop: '20px' }}>
+
+                                <Button className={styles['search-button']} style={{marginRight:'30px'}}>导出我的工单</Button>
+                                <Button className={styles['del-button']}>删除</Button>
+                            </Row>
+                            <Row style={{ width: '100%', marginTop: '20px' }}>
+                                <TableWithPagination columns={ruleColumns} dataSource={reminderRuleData} rowSelection={true}></TableWithPagination>
+                            </Row>
+                        </Row>
+                    </div>
+
+            </Row>
+        </div>
+    )
 }
-export default My
+export default My;

src/pages/serviceticket_my/My.less

@@ -0,0 +1,83 @@
+.item{
+  padding: 20px;
+  background: #FFFFFF4D;
+  backdrop-filter: blur(15px);
+  border-radius: 8px;
+  position: relative;
+  margin-top: 20px;
+
+  // 使用伪元素创建边框
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+    border-image-slice: 1;
+    border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg);
+    border-radius: 8px;
+    pointer-events: none;
+  }
+  // 合并多个阴影效果，用逗号分隔
+  box-shadow:
+          -2px 4px 10px 0px #9191910D,
+          -7px 17px 18px 0px #9191910A,
+          -15px 37px 24px 0px #91919108,
+          -27px 66px 29px 0px #91919103,
+          -42px 103px 31px 0px #91919100;
+
+
+}
+.item-num{
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 32px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+.item-title{
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin-top: 20px;
+  color:#666666;
+  white-space: nowrap;
+}
+.search-button{
+  background-image: url('../../assets/img/assetmangement1.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: #fff;
+  border-radius: 4px;
+  height: 36px;
+  border-color:#d9d9d9 ;
+  background-color: #045F5E80;
+}
+.reset-button{
+  background-image: url('../../assets/img/assetmangement2.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: rgba(0, 102, 101, 1);
+  border-radius: 4px;
+  height: 36px;
+  border-color:#d9d9d9 ;
+  background-color: #B7E5D533;
+}
+.del-button{
+  background-image: url('../../assets/img/assetmangement3.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position:center;
+  color: #000;
+  border-radius: 4px;
+  height: 36px;
+  width:88px;
+  border-color:#d9d9d9 ;
+  background-color: #E5B7B733;
+}

src/pages/topnavbar/TopNavBar.js

@@ -74,6 +74,11 @@ const menuItem = [
     label: '统计分析',
     key: '/topnavbar00/business/serviceticket/analysis',
   },
+  // 智能巡检
+  {
+    label: '智能巡检',
+    key: '/topnavbar00/business/inspection/inspectionTemplate',
+  },
 ]
 
 const TopNavBar = (props) => {
@@ -219,7 +224,7 @@ const TopNavBar = (props) => {
         itemHoverColor:'#333333',
         itemSelectedColor:'#333333',
       },
-     
+
     },
   }
   return (