diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/components/RealtimeMonitoring/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/components/RealtimeMonitoring/index.tsx
index 7bbaa1d987271ca8651539af1ba070674032ee8c..55b4d3fd38dc56d044e645ce55707d635a8dd6c7 100644
--- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/components/RealtimeMonitoring/index.tsx
+++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/components/RealtimeMonitoring/index.tsx
@@ -43,6 +43,8 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
   
   // 添加标志位以强制刷新数据
   const shouldRefreshRef = useRef(false);
+  // 添加标志位控制初始加载，防止重复
+  const isInitialMountRef = useRef(true);
   
   // 日期格式化工具
   const { formatDateParams } = useDateParamFormatter();
@@ -113,7 +115,7 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
       setTotal(0);
     },
     formatParams: formatDateParams,
-    enableDebug: true,
+    // enableDebug: true,
     apiName: '实时监测'
   });
   
@@ -163,37 +165,36 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
     return hasChanged;
   }, [startTime, endTime, regionParams]);
   
-  // 初始加载数据 - 组件挂载时
+  // 单一的数据加载useEffect，负责所有的数据加载情况
   useEffect(() => {
-    console.log('RealtimeMonitoring - 初始挂载');
+    console.log('RealtimeMonitoring - useEffect触发');
     if (!startTime || !endTime) {
+      console.log('缺少必要的日期参数，不加载数据');
       return;
     }
     
-    // 初始设置引用值
+    // 设置最新的参数引用
     startTimeRef.current = startTime;
     endTimeRef.current = endTime;
     regionParamsRef.current = regionParams;
-    
-    // 重置API控制器状态和分页
-    monitoringApi.reset();
-    setCurrentPage(1);
-    shouldRefreshRef.current = true;
-    
-    // 加载第一页数据
-    loadData(1, true);
-    
-    // 组件卸载时重置状态
-    return () => {
+
+    // 初始挂载时
+    if (isInitialMountRef.current) {
+      console.log('RealtimeMonitoring - 首次挂载，加载数据');
+      isInitialMountRef.current = false;
+      
+      // 重置状态
       monitoringApi.reset();
-      loadCountRef.current = 0;
-    };
-  }, []);
-  
-  // 当props变化时重新加载数据
-  useEffect(() => {
-    // 检查参数是否变化或强制刷新标志
-    if (checkParamsChanged() || shouldRefreshRef.current) {
+      setCurrentPage(1);
+      
+      // 加载第一页数据
+      loadData(1, true);
+      return;
+    }
+    
+    // 参数变化时
+    const paramsChanged = checkParamsChanged();
+    if (paramsChanged || shouldRefreshRef.current) {
       console.log('参数变化或需要强制刷新，重新加载数据');
       
       // 重置强制刷新标志
@@ -206,26 +207,15 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
       // 加载第一页数据
       loadData(1, true);
     }
-  }, [startTime, endTime, regionParams, loadData, monitoringApi, checkParamsChanged]);
-  
-  // 监听全局日期变更事件
-  useEffect(() => {
-    const handleDateChange = (event: any) => {
-      const { type, startTime: newStartTime, endTime: newEndTime } = event.detail || {};
-      
-      // 只有当是日视图时才触发刷新
-      if (type === 'day' && (newStartTime !== startTimeRef.current || newEndTime !== endTimeRef.current)) {
-        console.log('接收到全局日期变更事件，设置强制刷新标志');
-        shouldRefreshRef.current = true;
-      }
-    };
-    
-    window.addEventListener('mapDateChange', handleDateChange);
     
+    // 组件卸载时重置状态
     return () => {
-      window.removeEventListener('mapDateChange', handleDateChange);
+      if (!isInitialMountRef.current) { // 只在非初始挂载时执行清理
+        monitoringApi.reset();
+        loadCountRef.current = 0;
+      }
     };
-  }, []);
+  }, [startTime, endTime, monitoringApi, loadData, checkParamsChanged]);
   
   // 处理分页变化
   // const handlePageChange = useCallback((page: number) => {
diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/index.tsx
index def2c6258e16f885575586e5eff45f0bed360640..8a1086742de331c7d33050b5ba124d06dfb69516 100644
--- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/index.tsx
+++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/index.tsx
@@ -72,26 +72,8 @@ const LeftContent: React.FC = () => {
   // 设置区域类型
   const [areaType, setAreaType] = useState<string>('all');
   
-  const [alertRankingData, setAlertRankingData] = useState<AreaData[]>([
-    { name: '成都麻辣传奇火锅店', percentage: 87.2, count: 7582 },
-    { name: '宽窄巷子老灶火锅', percentage: 83.5, count: 7277 },
-    { name: '锦鲤古街风情火锅', percentage: 70.8, count: 7004 },
-    { name: '辣斗拉火锅春熙路店', percentage: 65.6, count: 6985 },
-    { name: '川西坝子火锅', percentage: 62.9, count: 6932 },
-    { name: '蜀九香火锅', percentage: 60.6, count: 6820 },
-    { name: '巴蜀大将火锅', percentage: 58.5, count: 6755 },
-    { name: '龙抄手火锅', percentage: 55.4, count: 6666 },
-    { name: '老妈蹄花火锅', percentage: 50.3, count: 6338 },
-    { name: '钢管厂老火锅', percentage: 48.2, count: 6000 },
-    { name: '洞子口张老二凉粉', percentage: 45.1, count: 5882 },
-    { name: '川西印象火锅', percentage: 42.0, count: 5661 },
-    { name: '成都麻辣传奇火锅店', percentage: 87.2, count: 7582 },
-    { name: '宽窄巷子老灶火锅', percentage: 83.5, count: 7277 },
-    { name: '锦鲤古街风情火锅', percentage: 70.8, count: 7004 },
-    { name: '辣斗拉火锅春熙路店', percentage: 65.6, count: 6985 },
-    { name: '川西坝子火锅', percentage: 62.9, count: 6932 },
-    { name: '蜀九香火锅', percentage: 60.6, count: 6820 },
-  ]);
+  const [alertRankingData, setAlertRankingData] = useState<AreaData[]>([]);
+
 
   // 使用ref存储最新状态，避免闭包问题
   const currentStateRef = useRef({
@@ -195,7 +177,7 @@ const LeftContent: React.FC = () => {
       });
     },
     formatParams: formatDateParams,
-    enableDebug: true,
+    // enableDebug: true,
     apiName: '油烟统计'
   });
   
@@ -234,10 +216,157 @@ const LeftContent: React.FC = () => {
       setAlertAreaData([]);
     },
     formatParams: formatDateParams,
-    enableDebug: true,
+    // enableDebug: true,
     apiName: '告警区域'
   });
 
+  // 使用useApiControl管理设备告警排行API调用
+  const alertRankingApi = useApiControl({
+    apiFunction: async (params) => {
+      if (!params.startTime || !params.endTime) {
+        throw new Error('缺少必要的日期参数');
+      }
+      
+      const response = await services.DataBase.getSjdzInfoData({
+        typeCode: 'dp-yyyzt-gjph',
+        params,
+      });
+      
+      if (response.code === 200 && response.data?.data) {
+        return response.data.data;
+      }
+      
+      throw new Error('获取告警排行数据失败');
+    },
+    onSuccess: (data) => {
+      // 提取正确路径下的数据并格式化
+      const records = data?.records || [];
+      const formattedData = records.map((item: any) => ({
+        name: item.mn || '', // 企业名称
+        // percentage: item.bzgjl || 0, // 百分比
+        count: item.num || 0 // 告警次数
+      }));
+      
+      console.log('告警排行数据成功:', formattedData);
+      setAlertRankingData(formattedData);
+    },
+    onError: (error) => {
+      console.error('获取告警排行数据出错:', error);
+      setAlertRankingData([]);
+    },
+    formatParams: formatDateParams,
+    // enableDebug: true,
+    apiName: '告警排行'
+  });
+
+  // 使用useApiControl管理油烟告警趋势API调用
+  const alertTrendApi = useApiControl({
+    apiFunction: async (params) => {
+      if (!params.startTime || !params.endTime) {
+        throw new Error('缺少必要的日期参数');
+      }
+      
+      const response = await services.DataBase.getSjdzInfoData({
+        typeCode: 'dp-yyyzt-yygjqs',
+        params,
+      });
+      
+      if (response.code === 200 && response.data?.data) {
+        return response.data.data;
+      }
+      
+      throw new Error('获取油烟告警趋势数据失败');
+    },
+    onSuccess: (data) => {
+      // 提取正确路径下的数据并格式化
+      const records = data?.records || [];
+      
+      if (records.length > 0) {
+        // 转换接口返回的数据格式为AlertTrend组件需要的格式
+        const formattedData = records.map((item: any) => ({
+          time: translateTrendTime(item.sj) || '',
+          value: item.num || 0
+        }));
+        
+        console.log('油烟告警趋势数据成功:', formattedData);
+        setAlertTrendData(formattedData);
+      } else {
+        setAlertTrendData([]);
+      }
+    },
+    onError: (error) => {
+      console.error('获取油烟告警趋势数据出错:', error);
+      setAlertTrendData([]);
+    },
+    formatParams: formatDateParams,
+    // enableDebug: true,
+    apiName: '油烟告警趋势'
+  });
+
+  const translateTrendTime = (inputDate: string | number) => {
+    if (typeof inputDate === 'string') {
+      // 处理类似'202504'的格式
+      if (inputDate.length === 6) {
+        const month = parseInt(inputDate.substring(4, 6));
+        return `${month}月`;
+      }
+      // 处理类似'20250425'的格式
+      if (inputDate.length === 8) {
+        const month = parseInt(inputDate.substring(4, 6));
+        const day = parseInt(inputDate.substring(6, 8));
+        return `${month}月${day}日`;
+      }
+      return inputDate.substring(0, 10);
+    }
+    // 处理number类型
+    if (typeof inputDate === 'number') {
+      if (inputDate === 23) {
+        return '23:59:59';
+      }
+      return `${inputDate.toString().padStart(2, '0')}:00:00`;
+    }
+    return inputDate;
+  }
+
+  // 使用useApiControl管理街道告警次数API调用
+  const streetAlertAreaApi = useApiControl({
+    apiFunction: async (params) => {
+      if (!params.startTime || !params.endTime || !params.districtCodeList) {
+        throw new Error('缺少必要的参数');
+      }
+      
+      const response = await services.DataBase.getSjdzInfoData({
+        typeCode: 'dp-yyyzt-gjcsajd',
+        params,
+      });
+      
+      if (response.code === 200 && response.data?.data) {
+        return response.data.data;
+      }
+      
+      throw new Error('获取街道告警区域数据失败');
+    },
+    onSuccess: (data) => {
+      // 提取正确路径下的数据并格式化
+      const records = data?.records || [];
+      const formattedData = records.map((item: any) => ({
+        name: item.streetName || '',
+        percentage: item.count || 0,
+        count: item.sbs || 0
+      }));
+      
+      console.log('街道告警区域数据成功:', formattedData);
+      setAlertAreaData(formattedData);
+    },
+    onError: (error) => {
+      console.error('获取街道告警区域数据出错:', error);
+      setAlertAreaData([]);
+    },
+    formatParams: formatDateParams,
+    // enableDebug: true,
+    apiName: '街道告警区域'
+  });
+
   // 加载油烟统计数据 - 使用ref中的最新状态避免闭包问题
   const loadOilStatistics = useCallback(() => {
     // 获取当前最新状态
@@ -266,69 +395,139 @@ const LeftContent: React.FC = () => {
 
   // 加载告警区域数据 - 使用ref中的最新状态避免闭包问题
   const loadAlertAreaData = useCallback(() => {
-    const districtCodeList = getRegionCodes();
-    if (!districtCodeList) return;
-    
     // 获取当前最新状态
     const current = currentStateRef.current;
+    const currentRegionCode = current.mapState.regionCode;
     
-    const params = {
+    const params: any = {
       startTime: current.dateRange.startTime || current.mapState.leftPanelTime.startTime,
       endTime: current.dateRange.endTime || current.mapState.leftPanelTime.endTime,
-      districtCodeList
     };
     
-    console.log('告警区域数据请求参数:', params);
+    // 判断区域代码长度，决定使用哪个API
+    if (currentRegionCode.length === 9) {
+      // 街道级别，使用街道告警区域API
+      const districtCode = currentRegionCode.substring(0, 6);
+      params.districtCodeList = districtCode;
+      
+      console.log('街道告警区域数据请求参数:', params);
+      streetAlertAreaApi.callApiImmediate(params);
+    } else {
+      // 区县级别，使用原告警区域API
+      const districtCodeList = getRegionCodes();
+      if (!districtCodeList) return;
+      
+      params.districtCodeList = districtCodeList;
+      console.log('告警区域数据请求参数:', params);
+      alertAreaApi.callApiImmediate(params);
+    }
+  }, [getRegionCodes, alertAreaApi, streetAlertAreaApi]);
+
+  // 加载告警排行数据
+  const loadAlertRankingData = useCallback(() => {
+    // 获取当前最新状态
+    const current = currentStateRef.current;
+    
+    // 处理区县级别和街道级别的不同参数
+    const params: any = {};
+    
+    if (current.mapState.regionCode.length === 6) {
+      // 区县级别
+      params.districtCode = current.mapState.regionCode;
+    } else if (current.mapState.regionCode.length === 9) {
+      // 街道级别
+      params.districtCode = current.mapState.regionCode.substring(0, 6);
+      params.streetCode = current.mapState.regionCode;
+    }
+    
+    params.startTime = current.dateRange.startTime || current.mapState.leftPanelTime.startTime;
+    params.endTime = current.dateRange.endTime || current.mapState.leftPanelTime.endTime;
+    
+    console.log('告警排行数据请求参数:', params);
     
     // 调用API
-    alertAreaApi.callApiImmediate(params);
-  }, [getRegionCodes, alertAreaApi]);
+    alertRankingApi.callApiImmediate(params);
+  }, [alertRankingApi]);
 
-  // 生成根据日期类型的趋势数据
-  useEffect(() => {
-    let mockData: { time: string; value: number }[] = [];
+  // 加载油烟告警趋势数据
+  const loadAlertTrendData = useCallback(() => {
+    // 获取当前最新状态
+    const current = currentStateRef.current;
     
-    if (dateType === 'day') {
-      // 日期类型为天时，显示24小时数据
-      mockData = Array.from({ length: 24 }, (_, i) => ({
-        time: `${i.toString().padStart(2, '0')}:00`,
-        value: Math.floor(Math.random() * 50) + 10
-      }));
-    } else if (dateType === 'year') {
-      // 日期类型为年时，显示1月到12月的数据
-      mockData = Array.from({ length: 12 }, (_, i) => ({
-        time: `${i + 1}月`,
-        value: Math.floor(Math.random() * 50) + 30
-      }));
-    } else if (dateType === 'range') {
-      // 日期类型为范围时，使用日期范围内的数据
-      const start = new Date(dateRange.startTime);
-      const end = new Date(dateRange.endTime);
-      const dayDiff = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
-      
-      mockData = Array.from({ length: dayDiff + 1 }, (_, i) => {
-        const currentDate = new Date(start);
-        currentDate.setDate(start.getDate() + i);
-        return {
-          time: `${currentDate.getMonth() + 1}月${currentDate.getDate()}日`,
-          value: Math.floor(Math.random() * 50) + 20
-        };
-      });
-    } else {
-      // 日期类型为月时，显示当月每一天的数据
-      const now = new Date();
-      const getMonthDays = () => {
-        return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
-      };
-      
-      mockData = Array.from({ length: getMonthDays() }, (_, i) => ({
-        time: `${now.getMonth() + 1}月${i + 1}日`,
-        value: Math.floor(Math.random() * 50) + 10
-      }));
+    // 处理区县级别和街道级别的不同参数
+    const params: any = {};
+    
+    if (current.mapState.regionCode.length === 6) {
+      // 区县级别
+      params.districtCode = current.mapState.regionCode;
+    } else if (current.mapState.regionCode.length === 9) {
+      // 街道级别
+      params.districtCode = current.mapState.regionCode.substring(0, 6);
+      params.streetCode = current.mapState.regionCode;
     }
     
-    setAlertTrendData(mockData);
-  }, [dateType, dateRange]);
+    params.startTime = current.dateRange.startTime || current.mapState.leftPanelTime.startTime;
+    params.endTime = current.dateRange.endTime || current.mapState.leftPanelTime.endTime;
+    params.type = translateDateType(current.dateType); // 添加日期类型参数
+    
+    console.log('油烟告警趋势数据请求参数:', params);
+    
+    // 调用API
+    alertTrendApi.callApiImmediate(params);
+  }, [alertTrendApi]);
+
+  const translateDateType = (dateType: string) => {
+    if(dateType === 'range') {
+      return 'month';
+    }
+    return dateType;
+  }
+
+  // 生成根据日期类型的趋势数据 - 移除模拟数据生成
+  // useEffect(() => {
+  //   let mockData: { time: string; value: number }[] = [];
+  //   
+  //   if (dateType === 'day') {
+  //     // 日期类型为天时，显示24小时数据
+  //     mockData = Array.from({ length: 24 }, (_, i) => ({
+  //       time: `${i.toString().padStart(2, '0')}:00`,
+  //       value: Math.floor(Math.random() * 50) + 10
+  //     }));
+  //   } else if (dateType === 'year') {
+  //     // 日期类型为年时，显示1月到12月的数据
+  //     mockData = Array.from({ length: 12 }, (_, i) => ({
+  //       time: `${i + 1}月`,
+  //       value: Math.floor(Math.random() * 50) + 30
+  //     }));
+  //   } else if (dateType === 'range') {
+  //     // 日期类型为范围时，使用日期范围内的数据
+  //     const start = new Date(dateRange.startTime);
+  //     const end = new Date(dateRange.endTime);
+  //     const dayDiff = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+  //     
+  //     mockData = Array.from({ length: dayDiff + 1 }, (_, i) => {
+  //       const currentDate = new Date(start);
+  //       currentDate.setDate(start.getDate() + i);
+  //       return {
+  //         time: `${currentDate.getMonth() + 1}月${currentDate.getDate()}日`,
+  //         value: Math.floor(Math.random() * 50) + 20
+  //       };
+  //     });
+  //   } else {
+  //     // 日期类型为月时，显示当月每一天的数据
+  //     const now = new Date();
+  //     const getMonthDays = () => {
+  //       return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+  //     };
+  //     
+  //     mockData = Array.from({ length: getMonthDays() }, (_, i) => ({
+  //       time: `${now.getMonth() + 1}月${i + 1}日`,
+  //       value: Math.floor(Math.random() * 50) + 10
+  //     }));
+  //   }
+  //   
+  //   setAlertTrendData(mockData);
+  // }, [dateType, dateRange]);
 
   // 处理日期变化
   const handleDateChange = useCallback((params: { type: string; startTime: string; endTime: string }) => {
@@ -349,16 +548,32 @@ const LeftContent: React.FC = () => {
       endTime: params.endTime,
     });
     
-    // 重置API状态并加载数据
+    // 重置API状态
     oilStatisticsApi.reset();
     alertAreaApi.reset();
+    alertRankingApi.reset();
+    alertTrendApi.reset();
+    streetAlertAreaApi.reset();
     
-    // 在下一个tick使用新的状态值加载数据
+    // 在下一个tick使用新的状态值加载数据 - 根据日期类型有条件地加载数据
     setTimeout(() => {
-      loadOilStatistics();
+      // 告警区域数据始终加载
       loadAlertAreaData();
+      
+      // 告警趋势数据始终加载
+      loadAlertTrendData();
+      
+      // 油烟统计数据只在日视图加载
+      if (params.type === 'day') {
+        loadOilStatistics();
+      }
+      
+      // 告警排行数据只在非日视图加载
+      if (params.type !== 'day') {
+        loadAlertRankingData();
+      }
     }, 0);
-  }, [dateType, dateRange, oilStatisticsApi, alertAreaApi, loadOilStatistics, loadAlertAreaData]);
+  }, [dateType, dateRange, oilStatisticsApi, alertAreaApi, alertRankingApi, alertTrendApi, streetAlertAreaApi, loadOilStatistics, loadAlertAreaData, loadAlertRankingData, loadAlertTrendData]);
 
   // 处理区域类型变化
   const handleAreaTypeChange = useCallback((type: string) => {
@@ -401,13 +616,26 @@ const LeftContent: React.FC = () => {
       // 重置API控制器状态
       oilStatisticsApi.reset();
       alertAreaApi.reset();
+      alertRankingApi.reset();
+      alertTrendApi.reset();
+      streetAlertAreaApi.reset();
       
       // 更新引用值
       regionCodeRef.current = mapState.regionCode;
       
-      // 加载数据
-      loadOilStatistics();
-      loadAlertAreaData();
+      // 加载数据 - 根据当前日期类型有条件地加载
+      loadAlertAreaData(); // 告警区域数据始终加载
+      loadAlertTrendData(); // 告警趋势数据始终加载
+      
+      // 油烟统计数据只在日视图加载
+      if (dateType === 'day') {
+        loadOilStatistics();
+      }
+      
+      // 告警排行数据只在非日视图加载
+      if (dateType !== 'day') {
+        loadAlertRankingData();
+      }
     }
   }, [
     mapState.regionCode, 
@@ -415,8 +643,14 @@ const LeftContent: React.FC = () => {
     mapState.leftPanelTime.endTime,
     loadOilStatistics,
     loadAlertAreaData,
+    loadAlertRankingData,
+    loadAlertTrendData,
     oilStatisticsApi,
-    alertAreaApi
+    alertAreaApi,
+    alertRankingApi,
+    alertTrendApi,
+    streetAlertAreaApi,
+    dateType
   ]);
 
   // 根据日期类型渲染不同的整体情况组件
@@ -466,11 +700,15 @@ const LeftContent: React.FC = () => {
         });
       }
       
+      // 使用日期+区域代码组合作为key，确保只有在这些值真正变化时才重新创建组件
+      const monitoringKey = `monitoring-${dateRange.startTime || mapState.leftPanelTime.startTime}-${dateRange.endTime || mapState.leftPanelTime.endTime}-${mapState.regionCode}`;
+      
       return (
         <RealtimeMonitoring 
           startTime={dateRange.startTime || mapState.leftPanelTime.startTime}
           endTime={dateRange.endTime || mapState.leftPanelTime.endTime}
           regionParams={params}
+          key={monitoringKey}
         />
       );
     } else {