diff --git a/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerBaseFragment.java b/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerBaseFragment.java
index 2bb232e69a..6059ccdf03 100644
--- a/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerBaseFragment.java
+++ b/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerBaseFragment.java
@@ -5,16 +5,15 @@ import android.os.Looper;
 import android.view.View;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
-import android.widget.TextView;
 
 import androidx.annotation.NonNull;
 import androidx.fragment.app.FragmentTransaction;
 
 import com.mogo.commons.AbsMogoApplication;
 import com.mogo.commons.mvp.MvpFragment;
-import com.mogo.eagle.core.data.config.HmiBuildConfig;
 import com.mogo.eagle.core.function.api.autopilot.IMoGoAutopilotStatusListener;
 import com.mogo.eagle.core.function.call.autopilot.CallerAutoPilotStatusListenerManager;
+import com.mogo.eagle.core.function.call.hmi.CallerHmiManager;
 import com.mogo.eagle.core.function.call.map.CallerSmpManager;
 import com.mogo.map.listener.IMogoMapListener;
 import com.mogo.map.uicontroller.VisualAngleMode;
@@ -39,8 +38,7 @@ public class TaxiPassengerBaseFragment extends MvpFragment<TaxiPassengerBaseFrag
     private FrameLayout flNaviPanelContainer;
     private ImageView mAutopilotImage;
     private ImageView mMapswitchBtn;
-    private TextView mLightCountdown;
-    private ImageView mLightIcon;
+    private TaxiPassengerTrafficLightView mTrafficLightView;
 
     protected TaxiPassengerServingOrderFragment ochServingOrderFragment = null;
 
@@ -64,8 +62,8 @@ public class TaxiPassengerBaseFragment extends MvpFragment<TaxiPassengerBaseFrag
         mAutopilotImage = findViewById(R.id.module_och_autopilot_iv);
         flNaviPanelContainer = findViewById(R.id.module_mogo_och_navi_panel_container);
 
-        mLightCountdown = findViewById(R.id.taxi_p_light_countdown_tv);
-        mLightIcon = findViewById(R.id.taxi_p_light_iv);
+        mTrafficLightView = findViewById(R.id.traffic_light_view);
+        CallerHmiManager.INSTANCE.setProxyTrafficLightView(mTrafficLightView);
 
         mMapswitchBtn = findViewById(R.id.module_och_taxi_swich_map_iv);
         mMapswitchBtn.setOnClickListener(new View.OnClickListener() {
diff --git a/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerTrafficLightView.java b/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerTrafficLightView.java
new file mode 100644
index 0000000000..2d7e8ab3aa
--- /dev/null
+++ b/OCH/mogo-och-taxi-passenger/src/main/java/com/mogo/och/taxi/passenger/ui/TaxiPassengerTrafficLightView.java
@@ -0,0 +1,177 @@
+package com.mogo.och.taxi.passenger.ui;
+
+import android.content.Context;
+import android.graphics.LinearGradient;
+import android.graphics.Shader;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import com.mogo.eagle.core.function.api.hmi.view.IViewTrafficLight;
+import com.mogo.eagle.core.utilcode.util.UiThreadHandler;
+import com.mogo.och.taxi.passenger.R;
+
+import org.jetbrains.annotations.Nullable;
+
+/**
+ * Taxi乘客端：红绿灯view
+ *
+ * Created on 2022/3/14
+ */
+public class TaxiPassengerTrafficLightView extends IViewTrafficLight {
+
+    private ImageView mLightIconIV;
+    private TextView mLightTimeTV;
+    private int mCurrentLightId;
+
+    public TaxiPassengerTrafficLightView(@Nullable Context context) {
+        this(context, null, 0);
+    }
+
+    public TaxiPassengerTrafficLightView(@Nullable Context context, @Nullable AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public TaxiPassengerTrafficLightView(@Nullable Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        init(context);
+    }
+
+    private void init(Context context) {
+        LayoutInflater.from(context).inflate(R.layout.taxi_p_traffic_light_view, this, true);
+        mLightIconIV = findViewById(R.id.taxi_p_traffic_light_iv);
+        mLightTimeTV = findViewById(R.id.taxi_p_traffic_light_time_tv);
+    }
+
+    /**
+     * 展示红绿灯预警
+     *
+     * @param checkLightId 0-都是默认，1-红，2-黄，3-绿
+     */
+    @Override
+    public void showWarningTrafficLight(int checkLightId) {
+        super.showWarningTrafficLight(checkLightId);
+        mCurrentLightId = checkLightId;
+        updateTrafficLightIcon(checkLightId);
+    }
+
+    /**
+     * 关闭红绿灯预警展示，并重制灯态
+     */
+    @Override
+    public void disableWarningTrafficLight() {
+        super.disableWarningTrafficLight();
+        UiThreadHandler.post(() -> {
+            mCurrentLightId = 0;
+           TaxiPassengerTrafficLightView.this.setVisibility(GONE);
+        });
+    }
+
+    /**
+     * @param redNum 红灯倒计时
+     * @param yellowNum 黄灯倒计时
+     * @param greenNum 绿灯倒计时
+     */
+    @Override
+    public void changeCountdownTrafficLightNum(int redNum, int yellowNum, int greenNum) {
+        super.changeCountdownTrafficLightNum(redNum, yellowNum, greenNum);
+        switch (mCurrentLightId) {
+            case 1:
+                changeCountdownRed(redNum);
+                break;
+            case 2:
+                changeCountdownYellow(yellowNum);
+                break;
+            case 3:
+                changeCountdownGreen(greenNum);
+                break;
+            default:
+                UiThreadHandler.post(() -> {
+                    mLightTimeTV.setText("");
+                });
+                break;
+        }
+    }
+
+    @Override
+    public void changeCountdownRed(int redNum) {
+        super.changeCountdownRed(redNum);
+        UiThreadHandler.post(() -> {
+            if (redNum > 0) {
+                Shader shader = new LinearGradient(
+                        0, 0, 0, mLightTimeTV.getLineHeight(),
+                        getResources().getColor(R.color.taxi_p_traffic_light_red_color_up),
+                        getResources().getColor(R.color.taxi_p_traffic_light_red_color_down),
+                        Shader.TileMode.REPEAT);
+                mLightTimeTV.getPaint().setShader(shader);
+                mLightTimeTV.setText(String.valueOf(redNum));
+            } else {
+                mLightTimeTV.setText("");
+            }
+        });
+    }
+
+    @Override
+    public void changeCountdownGreen(int greenNum) {
+        super.changeCountdownGreen(greenNum);
+        UiThreadHandler.post(() -> {
+            if (greenNum > 0) {
+                Shader shader = new LinearGradient(
+                        0, 0, 0, mLightTimeTV.getLineHeight(),
+                        getResources().getColor(R.color.taxi_p_traffic_light_green_color_up),
+                        getResources().getColor(R.color.taxi_p_traffic_light_green_color_down),
+                        Shader.TileMode.REPEAT);
+                mLightTimeTV.getPaint().setShader(shader);
+                mLightTimeTV.setText(String.valueOf(greenNum));
+            } else {
+                mLightTimeTV.setText("");
+            }
+        });
+    }
+
+    @Override
+    public void changeCountdownYellow(int yellowNum) {
+        super.changeCountdownYellow(yellowNum);
+        UiThreadHandler.post(() -> {
+            if (yellowNum > 0) {
+                Shader shader = new LinearGradient(
+                        0, 0, 0, mLightTimeTV.getLineHeight(),
+                        getResources().getColor(R.color.taxi_p_traffic_light_yellow_color_up),
+                        getResources().getColor(R.color.taxi_p_traffic_light_yellow_color_down),
+                        Shader.TileMode.REPEAT);
+                mLightTimeTV.getPaint().setShader(shader);
+                mLightTimeTV.setText(String.valueOf(yellowNum));
+            } else {
+                mLightTimeTV.setText("");
+            }
+        });
+    }
+
+    /**
+     * 更新红绿灯icon
+     *
+     * @param lightId 0-都是默认，1-红，2-黄，3-绿
+     */
+    private void updateTrafficLightIcon(int lightId) {
+        UiThreadHandler.post(() -> {
+            switch (lightId) {
+                case 1:
+                    mLightIconIV.setBackgroundResource(R.drawable.taxi_p_light_red_nor);
+                    TaxiPassengerTrafficLightView.this.setVisibility(VISIBLE);
+                    break;
+                case 2:
+                    mLightIconIV.setBackgroundResource(R.drawable.taxi_p_lightyellow_nor);
+                    TaxiPassengerTrafficLightView.this.setVisibility(VISIBLE);
+                    break;
+                case 3:
+                    mLightIconIV.setBackgroundResource(R.drawable.taxi_p_light_green_nor);
+                    TaxiPassengerTrafficLightView.this.setVisibility(VISIBLE);
+                    break;
+                default:
+                    TaxiPassengerTrafficLightView.this.setVisibility(GONE);
+                    break;
+            }
+        });
+    }
+}
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/drawable/bg_taxi_p_traffic_light_background.xml b/OCH/mogo-och-taxi-passenger/src/main/res/drawable/bg_taxi_p_traffic_light_background.xml
new file mode 100644
index 0000000000..941a082881
--- /dev/null
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/drawable/bg_taxi_p_traffic_light_background.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="#ff000000"/>
+    <corners android:radius="@dimen/taxi_p_traffic_light_layout_corner"/>
+</shape>
\ No newline at end of file
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_base_fragment.xml b/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_base_fragment.xml
index 00a8e07265..f013f01624 100644
--- a/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_base_fragment.xml
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_base_fragment.xml
@@ -104,24 +104,13 @@
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent"/>
 
-    <LinearLayout
-        android:layout_width="@dimen/dp_210"
-        android:layout_height="@dimen/dp_120"
-        app:layout_constraintRight_toRightOf="@+id/module_mogo_och_navi_panel_container"
-        app:layout_constraintBottom_toTopOf="@+id/module_mogo_och_navi_panel_container"
-        android:orientation="horizontal"
-        android:gravity="center_vertical"
-        android:background="@drawable/taxi_p_light_bg">
-        
-        <ImageView
-            android:id="@+id/taxi_p_light_iv"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:src="@drawable/taxi_p_light_green_nor"/>
-        <TextView
-            android:id="@+id/taxi_p_light_countdown_tv"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:textSize="60px"/>
-    </LinearLayout>
+    <com.mogo.och.taxi.passenger.ui.TaxiPassengerTrafficLightView
+        android:id="@+id/traffic_light_view"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        android:layout_marginRight="@dimen/taxi_p_traffic_light_layout_margin_right"
+        android:layout_marginTop="@dimen/taxi_p_traffic_light_layout_margin_top"
+        android:visibility="gone"/>
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_traffic_light_view.xml b/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_traffic_light_view.xml
new file mode 100644
index 0000000000..de3920b35a
--- /dev/null
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/layout/taxi_p_traffic_light_view.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="@dimen/taxi_p_traffic_light_layout_width"
+    android:layout_height="@dimen/taxi_p_traffic_light_layout_height"
+    android:visibility="visible">
+
+    <ImageView
+        android:layout_width="@dimen/taxi_p_traffic_light_bg_width"
+        android:layout_height="@dimen/taxi_p_traffic_light_bg_height"
+        android:background="@drawable/bg_taxi_p_traffic_light_background"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        android:layout_marginLeft="@dimen/taxi_p_traffic_light_bg_margin_left"
+        android:layout_marginTop="@dimen/taxi_p_traffic_light_bg_margin_top"/>
+
+    <ImageView
+        android:id="@+id/taxi_p_traffic_light_iv"
+        android:layout_width="@dimen/taxi_p_traffic_light_icon_size"
+        android:layout_height="@dimen/taxi_p_traffic_light_icon_size"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintTop_toTopOf="parent"/>
+
+    <TextView
+        android:id="@+id/taxi_p_traffic_light_time_tv"
+        android:layout_width="@dimen/taxi_p_traffic_light_time_view_width"
+        android:layout_height="match_parent"
+        android:textSize="@dimen/taxi_p_traffic_light_time_size"
+        android:textStyle="bold"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        android:gravity="center" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/values-sw320dp/dimens.xml b/OCH/mogo-och-taxi-passenger/src/main/res/values-sw320dp/dimens.xml
index ff217787bf..c160630cf4 100644
--- a/OCH/mogo-och-taxi-passenger/src/main/res/values-sw320dp/dimens.xml
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/values-sw320dp/dimens.xml
@@ -26,4 +26,17 @@
 
     <dimen name="taxi_p_order_panel_width">520px</dimen>
     <dimen name="taxi_p_order_panel_height">820px</dimen>
+
+    <dimen name="taxi_p_traffic_light_layout_width">225px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_height">154px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_corner">60px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_margin_right">40px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_margin_top">23px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_width">210px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_height">120px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_margin_left">15px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_margin_top">17px</dimen>
+    <dimen name="taxi_p_traffic_light_icon_size">154px</dimen>
+    <dimen name="taxi_p_traffic_light_time_view_width">127px</dimen>
+    <dimen name="taxi_p_traffic_light_time_size">60px</dimen>
 </resources>
\ No newline at end of file
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/values-xhdpi-2560x1440/dimens.xml b/OCH/mogo-och-taxi-passenger/src/main/res/values-xhdpi-2560x1440/dimens.xml
index a2eb014595..1dc9f73763 100644
--- a/OCH/mogo-och-taxi-passenger/src/main/res/values-xhdpi-2560x1440/dimens.xml
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/values-xhdpi-2560x1440/dimens.xml
@@ -90,4 +90,16 @@
     <dimen name="taxi_p_order_panel_width">520px</dimen>
     <dimen name="taxi_p_order_panel_height">820px</dimen>
 
+    <dimen name="taxi_p_traffic_light_layout_width">225px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_height">154px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_corner">60px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_margin_right">40px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_margin_top">23px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_width">210px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_height">120px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_margin_left">15px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_margin_top">17px</dimen>
+    <dimen name="taxi_p_traffic_light_icon_size">154px</dimen>
+    <dimen name="taxi_p_traffic_light_time_view_width">127px</dimen>
+    <dimen name="taxi_p_traffic_light_time_size">60px</dimen>
 </resources>
\ No newline at end of file
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/values/colors.xml b/OCH/mogo-och-taxi-passenger/src/main/res/values/colors.xml
index 082091e63d..3d8d1d88f4 100644
--- a/OCH/mogo-och-taxi-passenger/src/main/res/values/colors.xml
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/values/colors.xml
@@ -16,4 +16,11 @@
 
     <color name="taxi_p_route_line_start">#1FC3FF</color>
     <color name="taxi_p_route_line_end">#57ABFF</color>
+
+    <color name="taxi_p_traffic_light_red_color_up">#FFA28B</color>
+    <color name="taxi_p_traffic_light_red_color_down">#DA1100</color>
+    <color name="taxi_p_traffic_light_green_color_up">#60FFD3</color>
+    <color name="taxi_p_traffic_light_green_color_down">#006D43</color>
+    <color name="taxi_p_traffic_light_yellow_color_up">#FFE198</color>
+    <color name="taxi_p_traffic_light_yellow_color_down">#FF9B00</color>
 </resources>
\ No newline at end of file
diff --git a/OCH/mogo-och-taxi-passenger/src/main/res/values/dimens.xml b/OCH/mogo-och-taxi-passenger/src/main/res/values/dimens.xml
index 2e13cc5ee9..679981a15f 100644
--- a/OCH/mogo-och-taxi-passenger/src/main/res/values/dimens.xml
+++ b/OCH/mogo-och-taxi-passenger/src/main/res/values/dimens.xml
@@ -87,4 +87,17 @@
     <dimen name="taxi_p_order_panel_height">820px</dimen>
     <dimen name="taxi_p_order_map_width">520px</dimen>
     <dimen name="taxi_p_order_map_height">432px</dimen>
+
+    <dimen name="taxi_p_traffic_light_layout_width">225px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_height">154px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_corner">60px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_margin_right">40px</dimen>
+    <dimen name="taxi_p_traffic_light_layout_margin_top">23px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_width">210px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_height">120px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_margin_left">15px</dimen>
+    <dimen name="taxi_p_traffic_light_bg_margin_top">17px</dimen>
+    <dimen name="taxi_p_traffic_light_icon_size">154px</dimen>
+    <dimen name="taxi_p_traffic_light_time_view_width">127px</dimen>
+    <dimen name="taxi_p_traffic_light_time_size">60px</dimen>
 </resources>
\ No newline at end of file