@appthen/cli 1.2.10 → 1.2.11

package/tests/test-app/src/pages/digitalLargeScreen.tsx

@@ -0,0 +1,1417 @@
+/**
+ * 数字化大屏
+ * @type Page
+ * @route /doorsystem
+ * @screen 1920x1080 #2c2c2c
+ * @frames web
+ */
+import React from 'react';
+import { Modal, Page, ScrollView, Text, View } from '@appthen/react';
+import BlueBrightGreenBorder from '/src/pages/border/BlueBrightGreenBorder';
+import { Button, DatePicker, Select } from '@appthen/antd';
+import { ECharts } from '@appthen/echarts';
+import FullScreenContainer from '/src/pages/screen/FullScreenContainer';
+import './digitalLargeScreen.css';
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 线路选择 */
+  selectedLine: string;
+  /* 时间范围选择 */
+  startTime: string;
+  endTime: string;
+  /* Mock故障统计数据 */
+  mockStatus: {
+    /* 今日故障数量 */todayFaultCount?: number,
+    /* 活跃故障数量 */activeFaultCount?: number,
+    /* 故障列车数量 */faultTrainCount?: number,
+    /* 故障设备数量 */faultDeviceCount?: number,
+  };
+  /* Mock预警统计数据 */
+  mockWarningStatus: {
+    /* 今日预警数量 */todayWarningCount?: number,
+    /* 预警设备数量 */warningDeviceCount?: number,
+  };
+  /* Mock列车列表数据 */
+  mockTrains: {
+    /* 列车编号 */trainNo?: string,
+    /* 列车状态 */status?: string,
+    /* 车辆数量 */carCount?: number,
+    /* 在线状态 */isOnline?: boolean,
+  }[];
+  /* Mock故障列表 */
+  mockFaultList: {
+    /* 产品名称 */productName?: string,
+    /* 车厢号 */carNo?: string,
+    /* 设备编号 */deviceNo?: string,
+    /* 故障名称 */faultName?: string,
+    /* 故障显示名称 */faultDisplayName?: string,
+    /* 报警时间 */alarmTime?: string,
+    /* 故障描述 */faultDescription?: string,
+    /* 故障状态 */faultStatus?: string,
+    /* 开始时间 */startTime?: string,
+    endTime?: any,
+    /* 应急措施 */emergencyMeasures?: string,
+    /* 库房措施 */warehouseMeasures?: string,
+  }[];
+  /* Mock预警列表 */
+  mockWarningList: {
+    /* 产品名称 */productName?: string,
+    /* 车厢号 */carNo?: string,
+    /* 设备编号 */deviceNo?: string,
+    /* 预警名称 */warningName?: string,
+    /* 预警显示名称 */warningDisplayName?: string,
+    /* 预警时间 */warningTime?: string,
+    /* 预警描述 */warningDescription?: string,
+    /* 预警级别 */warningLevel?: string,
+  }[];
+  /* 当前选中的列车状态类型 */
+  trainStatusFilter: string;
+  /* all, normal, fault, warning */
+  mockBrakeLifeData: {
+    /* @example 制动系统-0601 */deviceName?: string,
+    /* @example 85 */remainingLife?: number,
+    /* @example 2024-06-01 */maintenanceTime?: string,
+  }[];
+  /* Mock故障趋势数据 */
+  mockFaultTrend: {
+    /* @example 00:00 */time?: string,
+    /* @example 5 */faults?: number,
+    /* @example 3 */warnings?: number,
+  }[];
+  /* Mock车辆故障排序数据 */
+  mockVehicleFaultSort: {
+    /* @example 602 */name?: string,
+    /* @example 8 */faults?: number,
+  }[];
+  /* Mock低故障率TOP5数据 */
+  mockLowFaultTop5: {
+    /* @example 604 */name?: string,
+    /* @example 0.2 */value?: number,
+  }[];
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    selectedLine: '6号线',
+    startTime: '',
+    endTime: '',
+    mockStatus: {
+      todayFaultCount: 12,
+      activeFaultCount: 8,
+      faultTrainCount: 5,
+      faultDeviceCount: 23,
+    },
+    mockWarningStatus: { todayWarningCount: 15, warningDeviceCount: 18 },
+    mockTrains: [
+      { trainNo: '0601', status: 'normal', carCount: 6, isOnline: true },
+      { trainNo: '0602', status: 'fault', carCount: 6, isOnline: true },
+      { trainNo: '0603', status: 'warning', carCount: 6, isOnline: true },
+      { trainNo: '0604', status: 'normal', carCount: 6, isOnline: true },
+      { trainNo: '0605', status: 'normal', carCount: 6, isOnline: true },
+      { trainNo: '0606', status: 'warning', carCount: 6, isOnline: true },
+      { trainNo: '0607', status: 'normal', carCount: 6, isOnline: true },
+      { trainNo: '0608', status: 'fault', carCount: 6, isOnline: true },
+    ],
+    mockFaultList: [
+      {
+        productName: '制动系统',
+        carNo: '02',
+        deviceNo: 'B001',
+        faultName: '制动压力异常',
+        faultDisplayName: '制动压力异常',
+        alarmTime: '2024-01-01 10:30:00',
+        faultDescription: '制动系统压力传感器故障',
+        faultStatus: 'active',
+        startTime: '2024-01-01 10:30:00',
+        emergencyMeasures: '立即检修',
+        warehouseMeasures: '更换传感器',
+      },
+      {
+        productName: '车门系统',
+        carNo: '03',
+        deviceNo: 'D001',
+        faultName: '车门无法关闭',
+        faultDisplayName: '车门无法关闭',
+        alarmTime: '2024-01-01 11:45:00',
+        faultDescription: '车门传感器故障',
+        faultStatus: 'active',
+        startTime: '2024-01-01 11:45:00',
+        emergencyMeasures: '手动关闭',
+        warehouseMeasures: '更换传感器',
+      },
+      {
+        productName: '空调系统',
+        carNo: '04',
+        deviceNo: 'A001',
+        faultName: '空调压缩机故障',
+        faultDisplayName: '空调压缩机故障',
+        alarmTime: '2024-01-01 12:20:00',
+        faultDescription: '空调压缩机过热',
+        faultStatus: 'active',
+        startTime: '2024-01-01 12:20:00',
+        emergencyMeasures: '关闭空调',
+        warehouseMeasures: '更换压缩机',
+      },
+      {
+        productName: '牵引系统',
+        carNo: '01',
+        deviceNo: 'T001',
+        faultName: '牵引电机故障',
+        faultDisplayName: '牵引电机故障',
+        alarmTime: '2024-01-01 13:15:00',
+        faultDescription: '牵引电机过热',
+        faultStatus: 'active',
+        startTime: '2024-01-01 13:15:00',
+        emergencyMeasures: '降低功率',
+        warehouseMeasures: '更换电机',
+      },
+      {
+        productName: '制动系统',
+        carNo: '05',
+        deviceNo: 'B002',
+        faultName: '制动片磨损',
+        faultDisplayName: '制动片磨损',
+        alarmTime: '2024-01-01 14:00:00',
+        faultDescription: '制动片磨损严重',
+        faultStatus: 'active',
+        startTime: '2024-01-01 14:00:00',
+        emergencyMeasures: '限制速度',
+        warehouseMeasures: '更换制动片',
+      },
+    ],
+    mockWarningList: [
+      {
+        productName: '制动系统',
+        carNo: '01',
+        deviceNo: 'B001',
+        warningName: '制动压力预警',
+        warningDisplayName: '制动压力预警',
+        warningTime: '2024-01-01 10:30:00',
+        warningDescription: '制动系统压力偏低',
+        warningLevel: '中',
+      },
+      {
+        productName: '车门系统',
+        carNo: '02',
+        deviceNo: 'D001',
+        warningName: '车门传感器预警',
+        warningDisplayName: '车门传感器预警',
+        warningTime: '2024-01-01 11:45:00',
+        warningDescription: '车门传感器响应延迟',
+        warningLevel: '低',
+      },
+      {
+        productName: '空调系统',
+        carNo: '03',
+        deviceNo: 'A001',
+        warningName: '空调温度预警',
+        warningDisplayName: '空调温度预警',
+        warningTime: '2024-01-01 12:20:00',
+        warningDescription: '空调温度控制偏差',
+        warningLevel: '低',
+      },
+      {
+        productName: '制动系统',
+        carNo: '04',
+        deviceNo: 'B002',
+        warningName: '制动片磨损预警',
+        warningDisplayName: '制动片磨损预警',
+        warningTime: '2024-01-01 13:15:00',
+        warningDescription: '制动片磨损达到预警值',
+        warningLevel: '高',
+      },
+      {
+        productName: '牵引系统',
+        carNo: '05',
+        deviceNo: 'T001',
+        warningName: '牵引电机温度预警',
+        warningDisplayName: '牵引电机温度预警',
+        warningTime: '2024-01-01 14:00:00',
+        warningDescription: '牵引电机温度偏高',
+        warningLevel: '中',
+      },
+    ],
+    trainStatusFilter: 'all',
+    mockBrakeLifeData: [
+      {
+        deviceName: '制动系统-0601',
+        remainingLife: 85,
+        maintenanceTime: '2024-06-01',
+      },
+      {
+        deviceName: '制动系统-0602',
+        remainingLife: 72,
+        maintenanceTime: '2024-05-15',
+      },
+      {
+        deviceName: '制动系统-0603',
+        remainingLife: 68,
+        maintenanceTime: '2024-05-10',
+      },
+      {
+        deviceName: '制动系统-0604',
+        remainingLife: 91,
+        maintenanceTime: '2024-07-01',
+      },
+      {
+        deviceName: '制动系统-0605',
+        remainingLife: 45,
+        maintenanceTime: '2024-04-01',
+      },
+    ],
+    mockFaultTrend: [
+      { time: '00:00', faults: 5, warnings: 3 },
+      { time: '04:00', faults: 8, warnings: 6 },
+      { time: '08:00', faults: 12, warnings: 9 },
+      { time: '12:00', faults: 15, warnings: 12 },
+      { time: '16:00', faults: 10, warnings: 8 },
+      { time: '20:00', faults: 7, warnings: 5 },
+      { time: '24:00', faults: 4, warnings: 2 },
+    ],
+    mockVehicleFaultSort: [
+      { name: '0602', faults: 8 },
+      { name: '0608', faults: 6 },
+      { name: '0603', faults: 4 },
+      { name: '0601', faults: 2 },
+      { name: '0605', faults: 1 },
+      { name: '0604', faults: 1 },
+    ],
+    mockLowFaultTop5: [
+      { name: '0604', value: 0.2 },
+      { name: '0601', value: 0.5 },
+      { name: '0607', value: 0.8 },
+      { name: '0605', value: 1.2 },
+      { name: '0606', value: 1.5 },
+    ],
+  };
+
+  /**
+   * 通用修改数据
+   */
+  setStateValue(e, { field, valueField, indexs }, cb) {
+    const state = {
+      ...this.state,
+    };
+    let value = e;
+    if (valueField) {
+      value = valueField.split('.').reduce((obj, key) => obj && obj[key], e);
+    }
+    const _field =
+      indexs?.length > 0
+        ? field
+            .replace(/\\.\\[\\]/g, match => `[${indexs.shift()}].`)
+            .replace('.[item]', '')
+        : field;
+    this.utils.setValue(state, _field, value);
+    this.setState(state, cb);
+  }
+
+  /**
+   * 页面加载后执行
+   */
+  componentDidMount() {
+    // Mock版本 - 无需加载数据
+    console.log('Mock版本已加载');
+  }
+
+  /**
+   * 线路选择变更
+   */
+  handleLineChange(value) {
+    this.setState({
+      selectedLine: value,
+    });
+  }
+
+  /**
+   * 时间范围变更
+   */
+  handleTimeRangeChange(dates) {
+    if (dates && dates.length === 2) {
+      this.setState({
+        startTime: dates[0],
+        endTime: dates[1],
+      });
+    }
+  }
+
+  /**
+   * 查询数据
+   */
+  handleQuery() {
+    // Mock版本 - 仅用于UI展示，无真实数据加载
+    console.log('模拟查询数据');
+  }
+
+  /**
+   * 切换列车状态筛选
+   */
+  handleTrainStatusFilter(status) {
+    this.setState({
+      trainStatusFilter: status,
+    });
+  }
+
+  /**
+   * 查看列车详情
+   */
+  handleViewTrainDetail(train) {
+    // 打开详情弹窗
+    this.$('modal')?.open();
+  }
+
+  /**
+   * 查看故障详情
+   */
+  handleViewFaultDetail(fault) {
+    // 打开详情弹窗
+    this.$('modal')?.open();
+  }
+
+  render() {
+    return (
+      <Page className="h-screen">
+        <Modal
+          animate="pop"
+          renderView={props => (
+            <View className="flex flex-col bg-[#001585] w-[900px] h-[880px] rounded p-[20px]">
+              <View className="flex flex-row justify-center items-center mb-[20px]">
+                <View className="flex flex-row items-center">
+                  <View
+                    style={{
+                      backgroundImage:
+                        'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                      backgroundRepeat: 'no-repeat',
+                      display: 'flex',
+                      flexDirection: 'row',
+                      backgroundSize: '100% 100%',
+                      backgroundPosition: 'center center',
+                      justifyContent: 'center',
+                      height: '40px',
+                      width: '100%',
+                      flex: '1',
+                    }}
+                  >
+                    <View className="h-full flex flex-col justify-center pl-[0px] w-[342px] items-center">
+                      <Text className="text-[#00fcff] text-base [fontFamily:Helvetica]">
+                        设备预警详情
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+              <View className="bg-[#0a0a2e] rounded-lg p-[16px] mb-[16px]">
+                <View className="grid grid-cols-2 gap-4">
+                  <View>
+                    <Text className="text-sm text-[#888888] mb-[4px]">
+                      预警编号
+                    </Text>
+                    <Text className="text-base text-[#ffffff] font-bold">
+                      W20240101001
+                    </Text>
+                  </View>
+                  <View>
+                    <Text className="text-sm text-[#888888] mb-[4px]">
+                      预警级别
+                    </Text>
+                    <View className="flex flex-row items-center">
+                      <View className="w-[12px] h-[12px] bg-[#FFD700] rounded-full mr-[8px]" />
+                      <Text className="text-base text-[#FFD700] font-bold">
+                        中级预警
+                      </Text>
+                    </View>
+                  </View>
+                  <View>
+                    <Text className="text-sm text-[#888888] mb-[4px]">
+                      设备名称
+                    </Text>
+                    <Text className="text-base text-[#ffffff]">
+                      制动系统-0601车
+                    </Text>
+                  </View>
+                  <View>
+                    <Text className="text-sm text-[#888888] mb-[4px]">
+                      预警时间
+                    </Text>
+                    <Text className="text-base text-[#ffffff]">
+                      2024-01-01 10:30:15
+                    </Text>
+                  </View>
+                  <View>
+                    <Text className="text-sm text-[#888888] mb-[4px]">
+                      车厢号
+                    </Text>
+                    <Text className="text-base text-[#ffffff]">01车厢</Text>
+                  </View>
+                  <View>
+                    <Text className="text-sm text-[#888888] mb-[4px]">
+                      设备编号
+                    </Text>
+                    <Text className="text-base text-[#ffffff]">B001</Text>
+                  </View>
+                </View>
+              </View>
+              <View className="flex-1 flex flex-row gap-4">
+                <View className="flex-1 flex flex-col">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '40px',
+                            marginBottom: '16px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[20px]">
+                            <Text className="text-[#00fcff] text-sm [fontFamily:Helvetica]">
+                              预警描述
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="flex-1">
+                          <View className="mb-[12px] flex flex-col">
+                            <Text className="text-sm text-[#888888] mb-[4px]">
+                              预警名称
+                            </Text>
+                            <Text className="text-base text-[#FFD700]">
+                              制动系统压力异常
+                            </Text>
+                          </View>
+                          <View className="mb-[12px]">
+                            <Text className="text-sm text-[#888888] mb-[4px]">
+                              详细描述
+                            </Text>
+                            <Text className="text-sm text-[#ffffff] [lineHeight:1.625] flex flex-col">
+                              制动系统压力传感器检测到压力值低于正常范围，当前压力为0.6MPa，&#10;
+                              正常范围应为0.8-1.2MPa。该异常可能导致制动距离延长，&#10;
+                              影响行车安全。建议立即检查制动系统管路和传感器状态。
+                            </Text>
+                          </View>
+                          <View className="mb-[12px]">
+                            <Text className="text-sm text-[#888888] mb-[4px]">
+                              可能原因
+                            </Text>
+                            <Text className="text-sm text-[#ffffff]">
+                              1. 制动管路泄漏
+                              <br />
+                              2. 压力传感器故障
+                              <br />
+                              3. 制动泵工作异常
+                              <br />
+                              4. 气压不足
+                            </Text>
+                          </View>
+                          <View>
+                            <Text className="text-sm text-[#888888] mb-[4px]">
+                              影响范围
+                            </Text>
+                            <Text className="text-sm text-[#ffffff]">
+                              影响本车厢制动性能，可能导致制动距离增加20-30%
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    }
+                    className="flex flex-col flex-1"
+                  />
+                </View>
+                <View className="flex-1 flex flex-col">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '40px',
+                            marginBottom: '16px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[20px]">
+                            <Text className="text-[#00fcff] text-sm [fontFamily:Helvetica]">
+                              处理措施
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="flex-1">
+                          <View className="mb-[16px] flex flex-col">
+                            <Text className="text-sm text-[#FF6B6B] mb-[4px] font-bold">
+                              应急措施
+                            </Text>
+                            <Text className="text-sm text-[#ffffff] [lineHeight:1.625]">
+                              1. 立即降低行车速度至40km/h以下
+                              <br />
+                              2. 加强制动时的安全距离
+                              <br />
+                              3. 准备应急制动系统
+                              <br />
+                              4. 通知乘务人员做好应急准备
+                            </Text>
+                          </View>
+                          <View className="mb-[16px] flex flex-col">
+                            <Text className="text-sm text-[#4ECDC4] mb-[4px] font-bold">
+                              检查步骤
+                            </Text>
+                            <Text className="text-sm text-[#ffffff] [lineHeight:1.625]">
+                              1. 检查制动管路是否有泄漏
+                              <br />
+                              2. 测试压力传感器工作状态
+                              <br />
+                              3. 检查制动泵压力输出
+                              <br />
+                              4. 验证气压系统压力
+                            </Text>
+                          </View>
+                          <View className="mb-[16px]">
+                            <Text className="text-sm text-[#45B7D1] mb-[4px] font-bold">
+                              维修建议
+                            </Text>
+                            <Text className="text-sm text-[#ffffff] [lineHeight:1.625]">
+                              1. 如发现管路泄漏，立即更换密封件
+                              <br />
+                              2. 传感器故障需更换新传感器
+                              <br />
+                              3. 制动泵异常需进行大修或更换
+                              <br />
+                              4. 补充气压至正常范围
+                            </Text>
+                          </View>
+                          <View>
+                            <Text className="text-sm text-[#96CEB4] mb-[4px] font-bold">
+                              预防措施
+                            </Text>
+                            <Text className="text-sm text-[#ffffff] [lineHeight:1.625]">
+                              1. 增加制动系统巡检频率
+                              <br />
+                              2. 定期校准压力传感器
+                              <br />
+                              3. 建立压力变化趋势监控
+                              <br />
+                              4. 备品备件充足储备
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    }
+                    className="flex flex-col flex-1"
+                  />
+                </View>
+              </View>
+              <View className="flex flex-row justify-between items-center mt-[16px]">
+                <View className="flex flex-row gap-3">
+                  <Button
+                    type="primary"
+                    size="small"
+                    className="bg-[#197dcb] border-[#197dcb] border border-solid"
+                  >
+                    确认处理
+                  </Button>
+                  <Button
+                    type="default"
+                    size="small"
+                    className="bg-[#666] border-[#666] border border-solid text-[#ffffff]"
+                  >
+                    转派维修
+                  </Button>
+                  <Button
+                    type="default"
+                    size="small"
+                    className="bg-[#666] border-[#666] border border-solid text-[#ffffff]"
+                  >
+                    查看历史
+                  </Button>
+                </View>
+                <View className="text-sm text-[#888888]">
+                  <Text>处理时限: 2小时内</Text>
+                </View>
+              </View>
+            </View>
+          )}
+          visible={false}
+          maskClosable={true}
+          ref="modal"
+          className=""
+        />
+        <FullScreenContainer
+          content={
+            <View className="h-full flex flex-col">
+              <View
+                key="header"
+                style={{
+                  height: '80px',
+                  backgroundImage:
+                    'url(https://cdn.appthen.com/Fu5bWQQXD0SVPRCq31hi3903u5xD)',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }}
+              >
+                <View className="flex-1 flex flex-row items-center pl-[32px] pr-[32px]">
+                  <View className="flex-1">
+                    <Text className="text-4xl text-[#81d3fc] font-extrabold">
+                      地铁列车设备监控仪表盘
+                    </Text>
+                  </View>
+                  <View className="flex flex-row items-center gap-6">
+                    <View className="flex flex-col">
+                      <Text className="text-sm text-[#ffffff] mb-[4px]">
+                        线路选择
+                      </Text>
+                      <Select
+                        value={this.state.selectedLine}
+                        onChange={value => this.handleLineChange(value)}
+                        className="w-[120px]"
+                      >
+                        <Select.Option value="1号线">
+                          <Text>1号线</Text>
+                        </Select.Option>
+                        <Select.Option value="2号线">
+                          <Text>2号线</Text>
+                        </Select.Option>
+                        <Select.Option value="3号线">
+                          <Text>3号线</Text>
+                        </Select.Option>
+                        <Select.Option value="4号线">
+                          <Text>4号线</Text>
+                        </Select.Option>
+                        <Select.Option value="5号线">
+                          <Text>5号线</Text>
+                        </Select.Option>
+                        <Select.Option value="6号线">
+                          <Text>6号线</Text>
+                        </Select.Option>
+                      </Select>
+                    </View>
+                    <View className="flex flex-col">
+                      <Text className="text-sm text-[#ffffff] mb-[4px]">
+                        时间范围
+                      </Text>
+                      <DatePicker.RangePicker
+                        onChange={dates => this.handleTimeRangeChange(dates)}
+                        className="w-[240px]"
+                      />
+                    </View>
+                    <Button
+                      type="primary"
+                      onClick={() => this.handleQuery()}
+                      className="mt-[24px]"
+                    >
+                      查询
+                    </Button>
+                  </View>
+                </View>
+              </View>
+              <View key="main" className="flex-1 flex flex-row">
+                <View className="pl-[20px] pr-[10px] flex flex-col w-[680px]">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              设备故障指标
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="flex flex-row justify-between">
+                          <View className="flex flex-col items-center mr-[20px]">
+                            <View
+                              style={{
+                                borderImage:
+                                  'url(https://cdn.appthen.com/FlFgi0fblg9box18PDqEVwWsSiFd) 0 fill stretch',
+                                borderImageWidth: 'auto',
+                                width: '57px',
+                                height: '65px',
+                              }}
+                              __hidePh={true}
+                            />
+                            <View className="mt-[10px] mb-[10px]">
+                              <Text className="text-[32px] text-[#FFD700]">
+                                {this.state.mockWarningStatus
+                                  ?.todayWarningCount || 0}
+                              </Text>
+                            </View>
+                            <View>
+                              <Text className="text-sm text-[#ffffff]">
+                                今日预警
+                              </Text>
+                            </View>
+                          </View>
+                          <View className="flex flex-col items-center mr-[20px]">
+                            <View
+                              style={{
+                                borderImage:
+                                  'url(https://cdn.appthen.com/Fjs_YDcmk37VesLIDaWaF8wmU3DQ) 0 fill stretch',
+                                borderImageWidth: 'auto',
+                                width: '57px',
+                                height: '65px',
+                              }}
+                              __hidePh={true}
+                            />
+                            <View className="mt-[10px] mb-[10px]">
+                              <Text className="text-[32px] text-[#FF0000]">
+                                {this.state.mockStatus?.todayFaultCount || 0}
+                              </Text>
+                            </View>
+                            <View>
+                              <Text className="text-sm text-[#ffffff]">
+                                今日故障
+                              </Text>
+                            </View>
+                          </View>
+                          <View className="flex flex-col items-center">
+                            <View
+                              style={{
+                                borderImage:
+                                  'url(https://cdn.appthen.com/Fl3BCenUwPtZJLVmtt6_zaucdldp) 0 fill stretch',
+                                borderImageWidth: 'auto',
+                                width: '57px',
+                                height: '65px',
+                              }}
+                              __hidePh={true}
+                            />
+                            <View className="mt-[10px] mb-[10px]">
+                              <Text className="text-[32px] text-[#808080]">
+                                {this.state.mockStatus?.activeFaultCount || 0}
+                              </Text>
+                            </View>
+                            <View>
+                              <Text className="text-sm text-[#ffffff]">
+                                活跃故障
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    }
+                    className="flex flex-col h-[281px]"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              故障数量变化趋势
+                            </Text>
+                          </View>
+                        </View>
+                        <ECharts
+                          advanced={false}
+                          title={{ text: '', show: false }}
+                          tooltip={{ trigger: 'axis', show: true }}
+                          legend={{ show: true, data: ['故障数', '预警数'] }}
+                          xAxis={{
+                            type: 'category',
+                            name: '时间',
+                            show: true,
+                            data: this.state.mockFaultTrend?.map(function (
+                              item
+                            ) {
+                              return item.time;
+                            }) || [
+                              '00:00',
+                              '04:00',
+                              '08:00',
+                              '12:00',
+                              '16:00',
+                              '20:00',
+                              '24:00',
+                            ],
+                          }}
+                          yAxis={{ type: 'value', name: '数量', show: true }}
+                          series={[
+                            {
+                              name: '故障数',
+                              type: 'line',
+                              data: this.state.mockFaultTrend?.map(function (
+                                item
+                              ) {
+                                return item.faults;
+                              }) || [12, 8, 15, 22, 18, 25, 20],
+                              smooth: true,
+                              itemStyle: { color: '#FF0000' },
+                              lineStyle: { color: '#FF0000', width: 2 },
+                            },
+                            {
+                              name: '预警数',
+                              type: 'line',
+                              data: this.state.mockFaultTrend?.map(function (
+                                item
+                              ) {
+                                return item.warnings;
+                              }) || [5, 12, 8, 15, 20, 18, 22],
+                              smooth: true,
+                              itemStyle: { color: '#FFD700' },
+                              lineStyle: { color: '#FFD700', width: 2 },
+                            },
+                          ]}
+                        />
+                      </View>
+                    }
+                    className="flex flex-col h-[420px]"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              车辆故障排序
+                            </Text>
+                          </View>
+                        </View>
+                        <ECharts
+                          advanced={false}
+                          title={{ text: '', show: false }}
+                          tooltip={{ trigger: 'item', show: true }}
+                          xAxis={{ type: 'value', name: '故障数', show: true }}
+                          yAxis={{
+                            type: 'category',
+                            name: '车辆',
+                            show: true,
+                            data: this.state.mockVehicleFaultSort?.map(
+                              function (item) {
+                                return item.name;
+                              }
+                            ) || [
+                              '车辆6',
+                              '车辆5',
+                              '车辆4',
+                              '车辆3',
+                              '车辆2',
+                              '车辆1',
+                            ],
+                          }}
+                          series={[
+                            {
+                              name: '故障数',
+                              type: 'bar',
+                              data: this.state.mockVehicleFaultSort?.map(
+                                function (item) {
+                                  return item.faults;
+                                }
+                              ) || [8, 12, 6, 15, 9, 10],
+                              itemStyle: { color: '#FF0000' },
+                            },
+                          ]}
+                        />
+                      </View>
+                    }
+                    className="flex flex-col h-[389px]"
+                  />
+                </View>
+                <View className="flex-1 flex flex-col pl-[10px] pr-[10px]">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              状态统计
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="grid grid-cols-4 gap-4">
+                          <View className="flex flex-col items-center">
+                            <Text className="text-2xl text-[#FFD700] font-bold">
+                              {this.state.mockWarningStatus
+                                ?.warningDeviceCount || 0}
+                            </Text>
+                            <Text className="text-sm text-[#ffffff]">
+                              预警设备数
+                            </Text>
+                          </View>
+                          <View className="flex flex-col items-center">
+                            <Text className="text-2xl text-[#FF0000] font-bold">
+                              {this.state.mockStatus?.faultDeviceCount || 0}
+                            </Text>
+                            <Text className="text-sm text-[#ffffff]">
+                              故障设备数
+                            </Text>
+                          </View>
+                          <View className="flex flex-col items-center">
+                            <Text className="text-2xl text-[#197dcb] font-bold">
+                              {this.state.mockTrains?.filter(t => t.isOnline)
+                                .length || 0}
+                            </Text>
+                            <Text className="text-sm text-[#ffffff]">
+                              在线车辆
+                            </Text>
+                          </View>
+                          <View className="flex flex-col items-center">
+                            <Text className="text-2xl text-[#00FF00] font-bold">
+                              {this.state.mockTrains?.length || 0}
+                            </Text>
+                            <Text className="text-sm text-[#ffffff]">
+                              配车总数
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    }
+                    className="flex flex-col h-[193px]"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              列车线路图
+                            </Text>
+                          </View>
+                        </View>
+                        <ECharts
+                          advanced={false}
+                          title={{ text: '', show: false }}
+                          tooltip={{ trigger: 'item', show: true }}
+                          xAxis={{
+                            type: 'category',
+                            show: false,
+                            data: [
+                              '站点1',
+                              '站点2',
+                              '站点3',
+                              '站点4',
+                              '站点5',
+                              '站点6',
+                              '站点7',
+                              '站点8',
+                            ],
+                          }}
+                          yAxis={{ type: 'value', show: false }}
+                          series={[
+                            {
+                              name: '线路',
+                              type: 'line',
+                              data: [0, 1, 2, 3, 4, 5, 6, 7],
+                              smooth: true,
+                              itemStyle: { color: '#197dcb' },
+                              lineStyle: { color: '#197dcb', width: 4 },
+                              symbol: 'circle',
+                              symbolSize: 12,
+                            },
+                          ]}
+                        />
+                      </View>
+                    }
+                    className="flex flex-col h-[669px]"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              列车状态总览
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="flex flex-row gap-2 mb-[16px]">
+                          <Button
+                            type={
+                              this.state.trainStatusFilter === 'all'
+                                ? 'primary'
+                                : 'default'
+                            }
+                            size="small"
+                            onClick={() => this.handleTrainStatusFilter('all')}
+                          >
+                            全部
+                          </Button>
+                          <Button
+                            type={
+                              this.state.trainStatusFilter === 'normal'
+                                ? 'primary'
+                                : 'default'
+                            }
+                            size="small"
+                            onClick={() =>
+                              this.handleTrainStatusFilter('normal')
+                            }
+                          >
+                            正常
+                          </Button>
+                          <Button
+                            type={
+                              this.state.trainStatusFilter === 'fault'
+                                ? 'primary'
+                                : 'default'
+                            }
+                            size="small"
+                            onClick={() =>
+                              this.handleTrainStatusFilter('fault')
+                            }
+                          >
+                            故障
+                          </Button>
+                          <Button
+                            type={
+                              this.state.trainStatusFilter === 'warning'
+                                ? 'primary'
+                                : 'default'
+                            }
+                            size="small"
+                            onClick={() =>
+                              this.handleTrainStatusFilter('warning')
+                            }
+                          >
+                            预警
+                          </Button>
+                        </View>
+                        <View className="grid grid-cols-3 gap-2">
+                          {this.state.mockTrains
+                            ?.slice(0, 6)
+                            .map((train, index) => (
+                              <View
+                                key={index}
+                                className={`p-2 rounded border cursor-pointer text-center ${
+                                  train.status === 'normal'
+                                    ? 'border-blue-500 bg-blue-900 bg-opacity-20'
+                                    : train.status === 'fault'
+                                    ? 'border-red-500 bg-red-900 bg-opacity-20'
+                                    : train.status === 'warning'
+                                    ? 'border-yellow-500 bg-yellow-900 bg-opacity-20'
+                                    : 'border-gray-500 bg-gray-900 bg-opacity-20'
+                                }`}
+                                onClick={() =>
+                                  this.handleViewTrainDetail(train)
+                                }
+                              >
+                                <Text
+                                  className={`text-sm font-bold ${
+                                    train.status === 'normal'
+                                      ? 'text-blue-400'
+                                      : train.status === 'fault'
+                                      ? 'text-red-400'
+                                      : train.status === 'warning'
+                                      ? 'text-yellow-400'
+                                      : 'text-gray-400'
+                                  }`}
+                                >
+                                  {train.trainNo}
+                                </Text>
+                                <Text className="text-xs text-[#9ca3af]">
+                                  {train.isOnline ? '在线' : '离线'}
+                                </Text>
+                              </View>
+                            ))}
+                        </View>
+                      </View>
+                    }
+                    className="flex flex-col flex-1"
+                  />
+                </View>
+                <View className="pr-[20px] pl-[10px] flex flex-col w-[780px]">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              设备预警信息
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="flex flex-col overflow-hidden h-[280px]">
+                          <View className="flex flex-row items-center h-[36px] bg-[#454545]">
+                            <View className="w-[80px] flex flex-col items-center">
+                              <Text className="text-sm text-[#ffffff]">
+                                车厢号
+                              </Text>
+                            </View>
+                            <View className="w-[80px] flex flex-col items-center">
+                              <Text className="text-sm text-[#ffffff]">
+                                设备
+                              </Text>
+                            </View>
+                            <View className="flex-1 flex flex-col items-center">
+                              <Text className="text-sm text-[#ffffff]">
+                                预警名称
+                              </Text>
+                            </View>
+                            <View className="w-[120px] flex flex-col items-center">
+                              <Text className="text-sm text-[#ffffff]">
+                                预警时间
+                              </Text>
+                            </View>
+                            <View className="w-[80px] flex flex-col items-center">
+                              <Text className="text-sm text-[#ffffff]">
+                                操作
+                              </Text>
+                            </View>
+                          </View>
+                          <ScrollView>
+                            {this.state.mockWarningList
+                              ?.slice(0, 8)
+                              .map((item, index) => (
+                                <View
+                                  key={index}
+                                  className="border-gray-700 cursor-pointer flex flex-row h-[35px] border-b-[1px] border-b-solid"
+                                >
+                                  <View className="w-[80px] flex flex-col items-center justify-center">
+                                    <Text className="text-xs text-[#ffffff]">
+                                      {item?.carNo || '-'}
+                                    </Text>
+                                  </View>
+                                  <View className="w-[80px] flex flex-col items-center justify-center">
+                                    <Text className="text-xs text-[#ffffff]">
+                                      {item?.productName || '-'}
+                                    </Text>
+                                  </View>
+                                  <View className="flex-1 flex flex-col justify-center pl-[8px] pr-[8px]">
+                                    <Text className="text-xs text-[#FFD700]">
+                                      {item?.warningDisplayName || '-'}
+                                    </Text>
+                                  </View>
+                                  <View className="w-[120px] flex flex-col items-center justify-center">
+                                    <Text className="text-xs text-[#ffffff]">
+                                      {item?.warningTime
+                                        ? this.utils
+                                            .dayjs(item.warningTime)
+                                            .format('MM-DD HH:mm')
+                                        : '-'}
+                                    </Text>
+                                  </View>
+                                  <View
+                                    onClick={() =>
+                                      this.handleViewFaultDetail(item)
+                                    }
+                                    className="w-[80px] flex flex-col items-center justify-center cursor-pointer"
+                                  >
+                                    <Text className="text-xs text-[#00fcff]">
+                                      查看
+                                    </Text>
+                                  </View>
+                                </View>
+                              ))}
+                          </ScrollView>
+                        </View>
+                      </View>
+                    }
+                    className="flex flex-col h-[604px]"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <View
+                          style={{
+                            backgroundImage:
+                              'url(https://cdn.appthen.com/Fusc9RzqS6dkjtgdKOjo_HaUzVXC)',
+                            backgroundRepeat: 'no-repeat',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            backgroundSize: '100% 100%',
+                            backgroundPosition: 'center center',
+                            justifyContent: 'center',
+                            height: '52px',
+                            marginBottom: '20px',
+                          }}
+                        >
+                          <View className="h-full flex flex-col justify-center pl-[30px]">
+                            <Text className="text-[#00fcff] text-lg [fontFamily:Helvetica]">
+                              设备故障信息
+                            </Text>
+                          </View>
+                        </View>
+                        <View className="h-[46px] flex flex-row bg-[#494949]">
+                          <View className="flex flex-row justify-center items-center w-[80px]">
+                            <Text className="text-sm text-[#ffffff]">
+                              车厢号
+                            </Text>
+                          </View>
+                          <View className="flex flex-row justify-center items-center w-[80px]">
+                            <Text className="text-sm text-[#ffffff]">设备</Text>
+                          </View>
+                          <View className="flex flex-row justify-center items-center flex-1">
+                            <Text className="text-sm text-[#ffffff]">
+                              故障名称
+                            </Text>
+                          </View>
+                          <View className="flex flex-row justify-center items-center w-[140px]">
+                            <Text className="text-sm text-[#ffffff]">
+                              故障时间
+                            </Text>
+                          </View>
+                          <View className="flex flex-row justify-center items-center w-[80px]">
+                            <Text className="text-sm text-[#ffffff]">操作</Text>
+                          </View>
+                        </View>
+                        <ScrollView>
+                          {this.state.mockFaultList
+                            ?.slice(0, 8)
+                            .map((item, index) => (
+                              <View
+                                key={index}
+                                className="border-gray-700 h-[46px] flex flex-row border-b-[1px] border-b-solid"
+                              >
+                                <View className="flex flex-row justify-center items-center w-[80px]">
+                                  <Text className="text-sm text-[#ffffff]">
+                                    {item?.carNo || '-'}
+                                  </Text>
+                                </View>
+                                <View className="flex flex-row justify-center items-center w-[80px]">
+                                  <Text className="text-sm text-[#ffffff]">
+                                    {item?.productName || '-'}
+                                  </Text>
+                                </View>
+                                <View className="flex flex-row justify-center items-center flex-1 pl-[8px] pr-[8px]">
+                                  <Text className="text-sm text-[#FF0000]">
+                                    {item?.faultDisplayName || '-'}
+                                  </Text>
+                                </View>
+                                <View className="flex flex-row justify-center items-center w-[140px]">
+                                  <Text className="text-sm text-[#ffffff]">
+                                    {item?.startTime
+                                      ? this.utils
+                                          .dayjs(item.startTime)
+                                          .format('MM-DD HH:mm')
+                                      : '-'}
+                                  </Text>
+                                </View>
+                                <View
+                                  onClick={() =>
+                                    this.handleViewFaultDetail(item)
+                                  }
+                                  className="flex flex-row justify-center items-center w-[80px] cursor-pointer"
+                                >
+                                  <Text className="text-sm text-[#00fcff]">
+                                    详情
+                                  </Text>
+                                </View>
+                              </View>
+                            ))}
+                        </ScrollView>
+                      </View>
+                    }
+                    className="flex flex-col flex-1"
+                  />
+                </View>
+              </View>
+              <View key="footer" className="bg-[#1a1b2f] p-[16px]">
+                <Text className="text-[#ffffff]">
+                  系统状态: 在线 | 最后更新:{new Date().toLocaleString()}
+                </Text>
+              </View>
+            </View>
+          }
+          baseWidth={2560}
+          baseHeight={1440}
+          className="h-screen bg-[#0f1129] flex flex-col"
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;