diff --git a/src/assets/less/index.less b/src/assets/less/index.less
index de0a954..17d572a 100644
--- a/src/assets/less/index.less
+++ b/src/assets/less/index.less
@@ -1,106 +1,63 @@
 .type-time {
-  padding-right: 4%;
-  padding-top: 3%;
-  font-size: 16px;
-  display: flex;
-  justify-content: right;
+    padding-right: 4%;
+    padding-top: 3%;
+    font-size: 16px;
+    display: flex;
+    justify-content: right;
 
-  span {
-    padding: 0 2%;
-    cursor: pointer;
-  }
-
-  .select {
-    color: #45a2ff;
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      display: block;
-      width: 72%;
-      left: 6px;
-      bottom: -12px;
-      height: 6px;
-      background: url('../images/light.png') no-repeat;
-      background-size: 100% 100%;
+    span {
+        padding: 0 2%;
+        cursor: pointer;
     }
-  }
 
-  .unSelect {
-    color: #a3a4a4;
-  }
+    .select {
+        color: #45a2ff;
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 72%;
+            left: 6px;
+            bottom: -12px;
+            height: 6px;
+            background: url('../images/light.png') no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .unSelect {
+        color: #a3a4a4;
+    }
 }
 
 *::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+    width: 12px;
+    height: 12px;
 }
 
 *::-webkit-scrollbar-button {
-  width: 0;
-  height: 0;
-  display: none;
+    width: 0;
+    height: 0;
+    display: none;
 }
 
 *::-webkit-scrollbar-corner {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-  height: 6px;
-  border-radius: 25px;
-  background-clip: padding-box;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-/*
-  antd表格样式
-*/
-.ant-table-thead > tr > th {
-  border-bottom: 1px solid #1e73c2 !important;
-}
-
-.ant-table-body {
-  background-color: #00152b;
-}
-
-.ant-modal-header {
-  border-bottom: none !important;
-}
-
-.ant-table-tbody > tr > td {
-  border-bottom: 1px solid #1e73c2 !important;
-  background-color: #00152b;
-  color: #ffffff;
-}
-
-.ant-table-tbody > tr.ant-table-row:hover > td,
-.ant-table-tbody > tr > td.ant-table-cell-row-hover,
-.ant-table-thead > tr > th {
-  background-color: #00152b !important;
-  color: #ffffff !important;
-}
-
-.ant-table-cell-scrollbar {
-  box-shadow: none !important;
-}
-
-/*
-  表格滚动条
-*/
-.ant-table-body::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-  height: 6px;
-  border-radius: 25px;
-  background-clip: padding-box;
-  background-color: rgba(30, 115, 194, 0.3);
+    border: 4px solid rgba(0, 0, 0, 0);
+    height: 6px;
+    border-radius: 25px;
+    background-clip: padding-box;
+    background-color: rgba(0, 0, 0, 0.3);
 }
 
 .helicopter {
-  width: 60px;
-  height: 60px;
-  background: url("../img/helicopter.png") no-repeat;
-  background-size: 100% 100%;
-}
\ No newline at end of file
+    width: 60px;
+    height: 60px;
+    background: url('../img/helicopter.png') no-repeat;
+    background-size: 100% 100%;
+}
diff --git a/src/components/body-d-left/oneL.vue b/src/components/body-d-left/oneL.vue
index d1d2854..8457a17 100644
--- a/src/components/body-d-left/oneL.vue
+++ b/src/components/body-d-left/oneL.vue
@@ -105,4 +105,4 @@
             }
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/body-d-left/threeL.vue b/src/components/body-d-left/threeL.vue
index 7feec2c..e772307 100644
--- a/src/components/body-d-left/threeL.vue
+++ b/src/components/body-d-left/threeL.vue
@@ -112,4 +112,4 @@
             }
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/body-d-left/twoL.vue b/src/components/body-d-left/twoL.vue
index 7d70697..37b9f3d 100644
--- a/src/components/body-d-left/twoL.vue
+++ b/src/components/body-d-left/twoL.vue
@@ -214,4 +214,4 @@
     .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
         background-color: #002e64 !important;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/body-d-right/oneR.vue b/src/components/body-d-right/oneR.vue
index 76e6521..ad38a65 100644
--- a/src/components/body-d-right/oneR.vue
+++ b/src/components/body-d-right/oneR.vue
@@ -158,11 +158,6 @@
         }
     }
 
-    .dialog-con {
-        background-color: #00152b;
-        border: 1px solid #129bff;
-    }
-
     .police-con {
         color: #ffffff;
         background-color: #00152b;
@@ -184,4 +179,54 @@
             }
         }
     }
-</style>
\ No newline at end of file
+</style>
+<style lang="less">
+    .dialog-con {
+        background-color: #00152b;
+        border: 1px solid #129bff;
+        /*
+  antd表格样式
+*/
+
+        .ant-table-thead > tr > th {
+            border-bottom: 1px solid #1e73c2 !important;
+        }
+
+        .ant-table-body {
+            background-color: #00152b !important;
+        }
+
+        .ant-modal-header {
+            border-bottom: none !important;
+        }
+
+        .ant-table-tbody > tr > td {
+            border-bottom: 1px solid #1e73c2 !important;
+            background-color: #00152b !important;
+            color: #ffffff !important;
+        }
+
+        .ant-table-tbody > tr.ant-table-row:hover > td,
+        .ant-table-tbody > tr > td.ant-table-cell-row-hover,
+        .ant-table-thead > tr > th {
+            background-color: #00152b !important;
+            color: #ffffff !important;
+        }
+
+        .ant-table-cell-scrollbar {
+            box-shadow: none !important;
+        }
+
+        /*
+    表格滚动条
+  */
+
+        .ant-table-body::-webkit-scrollbar-thumb {
+            border: 4px solid rgba(0, 0, 0, 0);
+            height: 6px;
+            border-radius: 25px;
+            background-clip: padding-box;
+            background-color: rgba(30, 115, 194, 0.3);
+        }
+    }
+</style>
diff --git a/src/components/chinaMap/chinaMap.vue b/src/components/chinaMap/chinaMap.vue
index 1b9c040..9787c4f 100644
--- a/src/components/chinaMap/chinaMap.vue
+++ b/src/components/chinaMap/chinaMap.vue
@@ -398,4 +398,4 @@
             }
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/item-d/item-d.vue b/src/components/item-d/item-d.vue
index c24051f..8f3e2be 100644
--- a/src/components/item-d/item-d.vue
+++ b/src/components/item-d/item-d.vue
@@ -1,15 +1,21 @@
 <template>
     <div>
-        <public-title :title="props.title" />
+        <public-title :title="props.title">
+            <template #title>
+                {{ props.tips }}
+            </template>
+        </public-title>
         <div class="inner" ref="healthChart"></div>
     </div>
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/publicTitle.vue';
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { screenPie } from '/@/components/item-d/pieCharts.ts';
     import { onMounted, ref, unref, watch } from 'vue';
     import * as echarts from 'echarts';
+
     const props = defineProps({
         title: {
             type: String,
@@ -19,6 +25,14 @@
             type: Array,
             default: () => [],
         },
+        color: {
+            type: Array,
+            default: () => [],
+        },
+        tips: {
+            type: String,
+            default: () => '',
+        },
     });
     const healthChart = ref<HTMLElement>();
 
@@ -38,15 +52,15 @@
     const { healthData, getValue, setHealth } = useHealth();
 
     async function init() {
-        setHealth(props.data);
-        const yData = unref(getValue);
-        let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-        initChart(unref(healthData), total);
+        // setHealth(props.data);
+        // const yData = unref(getValue);
+        // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+        initChart(props.data, 78, props.color);
     }
 
-    function initChart(chartData, total) {
+    function initChart(chartData, total, color) {
         let myChart = echarts.init(healthChart.value);
-        let options = ringOption(chartData, total);
+        let options = screenPie(chartData, total, color);
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
diff --git a/src/components/item-d/pieCharts.ts b/src/components/item-d/pieCharts.ts
new file mode 100644
index 0000000..108380e
--- /dev/null
+++ b/src/components/item-d/pieCharts.ts
@@ -0,0 +1,59 @@
+export function screenPie(chartData, total, color) {
+    return {
+        title: {
+            text: '总人数',
+            subtext: total + '',
+            x: 'center',
+            y: '35%',
+            textStyle: {
+                fontSize: 14,
+                color: '#ffffff',
+                fontWeight: 'normal',
+            },
+            subtextStyle: {
+                color: '#ffffff',
+                fontSize: 24,
+                fontWeight: 'bold',
+            },
+        },
+        color: color,
+        tooltip: {
+            trigger: 'item',
+            show: true,
+            textStyle: {
+                color: '#fff',
+            },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
+        },
+        legend: {
+            left: '80%',
+            top: 'center',
+            orient: 'vertical',
+            icon: 'circle',
+            itemGap: 26,
+            textStyle: {
+                color: '#ffffff',
+                fontSize: 16,
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['50%', '90%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'inner',
+                    formatter: '{d}%',
+                    color: '#ffffff',
+                    fontSize: 14,
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: chartData,
+            },
+        ],
+    };
+}
\ No newline at end of file
diff --git a/src/components/publicTitle.vue b/src/components/publicTitle.vue
index 402b016..5f95063 100644
--- a/src/components/publicTitle.vue
+++ b/src/components/publicTitle.vue
@@ -2,6 +2,7 @@
     <div class="title-d">
         <span>{{ props.title }}</span>
         <div>
+            <span class="tips"><slot name="title"></slot></span>
             <span v-if="isShowMore" style="font-size: 14px; font-weight: 100; cursor: pointer; margin-right: 3px" @click="clickMore">更多&gt;</span>
             <img src="../assets/img/point.png" alt="" />
         </div>
@@ -19,6 +20,7 @@
         },
     });
     const emit = defineEmits(['clickMore']);
+
     function clickMore() {
         emit('clickMore');
     }
@@ -55,5 +57,11 @@
             left: 0;
             background-color: #45a2ff;
         }
+
+        .tips {
+            font-size: 13px;
+            padding-right: 10px;
+            font-weight: normal;
+        }
     }
 </style>
diff --git a/src/components/secondaryScreen/chinaMap/chinaHooks.ts b/src/components/secondaryScreen/chinaMap/chinaHooks.ts
new file mode 100644
index 0000000..372d3ca
--- /dev/null
+++ b/src/components/secondaryScreen/chinaMap/chinaHooks.ts
@@ -0,0 +1,152 @@
+import { getAllList, getAmbulanceList } from '/@/components/chinaMap/chinaMapApi.ts';
+
+export enum TabType {
+    all = '', //所有资源
+    youTianYiYuan = '1', //油田医院
+    heZuoYiYuan = '2', //合作医院
+    yiLiaoDian = '3', //医疗点
+    jiuHuChe = '4', //救护车
+    zhiShengJi = '5', //直升机
+}
+
+export const tabList = [
+    {
+        name: '所有资源',
+        type: TabType.all,
+    },
+    {
+        name: '油田医院',
+        type: TabType.youTianYiYuan,
+    },
+    {
+        name: '医疗点',
+        type: TabType.yiLiaoDian,
+    },
+    {
+        name: '救护车',
+        type: TabType.jiuHuChe,
+    },
+    {
+        name: '合作医院',
+        type: TabType.heZuoYiYuan,
+    },
+    {
+        name: '地方医院',
+    },
+    {
+        name: '直升机',
+        type: TabType.zhiShengJi,
+    },
+    {
+        name: '急救路线',
+    },
+];
+
+export const helicopter = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
+export const mapbg = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
+
+// 直升机位置数据
+export const aircraft = [
+    {
+        category: 3,
+        lon: '108.861377',
+        lat: '34.35965',
+        img: helicopter,
+        name: '直升机',
+    },
+    {
+        category: 3,
+        lon: '106.267358',
+        lat: '38.520079',
+        img: helicopter,
+        name: '直升机',
+    },
+    {
+        category: 3,
+        lon: '109.505282',
+        lat: '36.579381',
+        img: helicopter,
+        name: '直升机',
+    },
+    {
+        category: 3,
+        lon: '107.638372',
+        lat: '35.734218',
+        img: helicopter,
+        name: '直升机',
+    },
+];
+
+export function mapApiSwitch(type, params: any) {
+    const basicParams = {
+        lat: 34, //纬度34
+        lon: 108, //经度
+    };
+    // 全部 油田 医疗点 合作医院
+    if ([TabType.all, TabType.youTianYiYuan, TabType.yiLiaoDian, TabType.heZuoYiYuan].includes(type)) {
+        return getAllList({ ...basicParams, ...params });
+    }
+    if ([TabType.jiuHuChe].includes(type)) {
+        return getAmbulanceList({});
+    }
+}
+
+export const mapIcon1 = new URL('/@/assets/img/mapIcon1.png', import.meta.url).href;
+export const mapIcon2 = new URL('/@/assets/img/mapIcon2.png', import.meta.url).href;
+export const mapIcon3 = new URL('/@/assets/img/mapIcon3.png', import.meta.url).href;
+export const mapIcon4 = new URL('/@/assets/img/mapIcon4.png', import.meta.url).href;
+export const mapIcon5 = new URL('/@/assets/img/mapIcon5.png', import.meta.url).href;
+export const mapIcon6 = new URL('/@/assets/img/mapIcon6.png', import.meta.url).href;
+
+export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
+export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href;
+export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
+export const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
+export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
+export const legend6 = new URL('/@/assets/img/legend6.png', import.meta.url).href;
+
+export const legendList = [
+    { img: legend1, text: '油田医院' },
+    { img: legend2, text: '医疗点' },
+    { img: legend3, text: '救护车' },
+    { img: legend4, text: '合作医院' },
+    { img: legend5, text: '地方医院' },
+    { img: legend6, text: '直升机' },
+];
+
+/**
+ * @description 秒转小时
+ * */
+export function convertSeconds(seconds: number) {
+    let hours = Math.floor(seconds / 3600);
+    let minutes = Math.floor((seconds % 3600) / 60);
+    let remainingSeconds = seconds % 60;
+    return {
+        hours: hours,
+        minutes: minutes,
+        seconds: remainingSeconds,
+    };
+}
+
+export function getTimeStr(time: number): string {
+    let str = '';
+    const { hours, minutes } = convertSeconds(time);
+    if (hours) {
+        str += hours + '小时';
+    }
+    if (minutes) {
+        str += minutes + '分钟';
+    }
+    return str;
+}
+
+export function convertMetersToKilometers(meters: number): number {
+    let kilometers = meters / 1000;
+    return Math.round(kilometers * 100) / 100;
+}
+
+export function getKmStr(distance: number): string {
+    if (!distance) return '';
+    let d = convertMetersToKilometers(distance);
+    return d >= 1 ? d + '公里' : d * 100 + '米';
+}
\ No newline at end of file
diff --git a/src/components/secondaryScreen/chinaMap/chinaMap.vue b/src/components/secondaryScreen/chinaMap/chinaMap.vue
new file mode 100644
index 0000000..b43bd82
--- /dev/null
+++ b/src/components/secondaryScreen/chinaMap/chinaMap.vue
@@ -0,0 +1,362 @@
+<template>
+    <div class="center-map">
+        <div class="china-map-box">
+            <!--      <div class="tab-list">-->
+            <!--        <div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab"-->
+            <!--             @click="changeTab(item, i)">-->
+            <!--          {{ item.name }}-->
+            <!--        </div>-->
+            <!--      </div>-->
+            <div v-show="currentIndex == list.length - 1" class="route-navigation">
+                <a-form :model="formState" layout="inline">
+                    <a-form-item class="form-item-self" label="起点">
+                        <a-input v-model:value="formState.start"></a-input>
+                    </a-form-item>
+                    <a-form-item class="form-item-self" label="终点">
+                        <a-input v-model:value="formState.end"></a-input>
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button class="reset-btn" @click="removeInput">清空</a-button>
+                        <a-button class="search-btn" @click="searchRoute">路线规划</a-button>
+                    </a-form-item>
+                </a-form>
+                <div class="line-container" v-show="showRoutePanel" v-click-outside="outClick">
+                    <div v-show="routeList.length" class="has-data">
+                        <div class="line-title"> {{ panelTitle }}</div>
+                        <div class="line-content">
+                            <div class="start">起点</div>
+                            <div class="line-body">
+                                <div class="line"></div>
+                                <div class="line-desc">
+                                    <p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
+                                </div>
+                            </div>
+                            <div class="end">终点</div>
+                        </div>
+                    </div>
+                    <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
+                </div>
+            </div>
+            <div class="mapContainer" id="mapContainer"></div>
+            <div v-show="false" id="container"></div>
+            <div v-show="false" id="panel"></div>
+            <div class="map-legend">
+                <div v-for="(item, i) in legendList" :key="i" class="legend-item">
+                    <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, ref } from 'vue';
+    import { message } from 'ant-design-vue';
+    import { Map } from '/@/assets/mapUtils/map';
+    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
+
+    const formState = ref({
+        start: '西安北站',
+        end: '',
+    });
+    const list = ref(tabList);
+    const currentIndex = ref(0);
+
+    function changeTab(item, i: number) {
+        // if (i == currentIndex.value) {
+        //     return;
+        // }
+        currentIndex.value = i;
+        // 直升机
+        if (TabType.zhiShengJi == item.type) {
+            Map.createAircraft(aircraft);
+            return;
+        }
+        getMapData(item.type, { type: item.type });
+    }
+
+    async function getMapData(type, params = {}) {
+        const { code, result } = await mapApiSwitch(type, params);
+        if (code == 200 && Array.isArray(result) && result.length > 0) {
+            Map.createOverlay(result);
+        }
+        console.log('--->data', result);
+    }
+
+    onMounted(() => {
+        console.log('reload');
+        initMap();
+        getMapData(tabList[0].type);
+    });
+
+    function initMap() {
+        Map.initMap({ el: 'mapContainer' });
+    }
+
+    const routeList = ref([]);
+    const showRoutePanel = ref(false);
+    const panelTitle = ref();
+
+    function outClick() {
+        showRoutePanel.value = false;
+    }
+
+    function setTitle({ time, distance }) {
+        let str = '全程';
+        str += getTimeStr(time);
+        str += getKmStr(distance);
+        panelTitle.value = str;
+    }
+
+    /**
+     * @desc 路线规划
+     * @param callback
+     */
+    function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
+        showRoutePanel.value = false;
+        panelTitle.value = '';
+        if (!formState.value.start) {
+            return message.warn('请输入起点');
+        }
+        if (!formState.value.end) {
+            return message.warn('请输入终点');
+        }
+        //基本地图加载
+        let map = new AMap.Map('container', {
+            resizeEnable: true,
+            center: [116.397428, 39.90923], //地图中心点
+            zoom: 13, //地图显示的缩放级别
+        });
+        //构造路线导航类
+        let driving = new AMap.Driving({
+            map: map,
+            panel: 'panel',
+        });
+        // 根据起终点名称规划驾车导航路线
+        driving.search([{ keyword: formState.value.start }, { keyword: formState.value.end }], function (status, result) {
+            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
+            if (status === 'complete') {
+                //  console.log('绘制驾车路线完成');
+            } else {
+                //  console.log('获取驾车数据失败：' + result);
+            }
+        });
+        AMap.Event.addListener(driving, 'complete', (res) => {
+            const data = JSON.parse(JSON.stringify(res));
+            if (data.info == 'OK') {
+                const { routes } = data;
+                setTitle(routes[0]);
+                let arr = [];
+                arr.push(data.originName);
+                routes[0].steps.map((item: any) => {
+                    arr.push(item.instruction);
+                });
+                arr.push(data.destinationName);
+                showRoutePanel.value = true;
+                routeList.value = arr;
+            }
+        });
+    }
+
+    function removeInput() {
+        formState.value.start = '';
+        formState.value.end = '';
+    }
+</script>
+<style lang="less" scoped>
+    .center-map {
+        flex: 1;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-content: space-between;
+
+        .china-map-box {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        .tab-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
+            .tab {
+                width: calc(100% / 8);
+                height: 40px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #29f1fa;
+                background: url('/@/assets/img/tab-default.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+                transition: all 0.3s;
+
+                &.active {
+                    color: #fff;
+                    background: url('/@/assets/img/tab-active.png') no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+        }
+
+        .route-navigation {
+            margin: 12px 0;
+            width: 100%;
+            height: 46px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #002e64;
+            border-radius: 6px;
+            position: absolute;
+            top: 40px;
+            z-index: 999;
+            transition: all 0.3s;
+
+            :deep(.form-item-self) {
+                label {
+                    color: #29f1fa;
+                }
+
+                .ant-input {
+                    width: 280px;
+                    color: #d6d9e0;
+                    background: #2a4164;
+                    border-radius: 2px 2px 2px 2px;
+                    border: 1px solid #1b7ef2;
+                }
+            }
+
+            .reset-btn {
+                width: 64px;
+                height: 32px;
+                border-radius: 5px;
+                color: #45a2ff;
+                background: #002e64;
+                border: 1px solid #45a2ff;
+            }
+
+            .search-btn {
+                margin-left: 10px;
+                width: 88px;
+                height: 32px;
+                color: #efefef;
+                background: #45a2ff;
+                border-radius: 5px;
+                border-color: #45a2ff;
+            }
+
+            .line-container {
+                position: absolute;
+                right: 0;
+                top: 54px;
+                width: 288px;
+                padding: 9px 18px;
+                min-height: 200px;
+                max-height: 473px;
+                overflow: auto;
+                background: #2a4164;
+                border-radius: 2px;
+                border: 1px solid #1b7ef2;
+
+                .line-title {
+                    margin-bottom: 9px;
+                    font-size: 14px;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.8);
+                }
+
+                .line-content {
+                    font-size: 12px;
+
+                    .start {
+                        display: flex;
+                        align-items: center;
+
+                        &::before {
+                            content: '起';
+                            color: #fff;
+                            width: 20px;
+                            height: 20px;
+                            margin-right: 7px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: 50%;
+                            background: #1478f5;
+                        }
+                    }
+
+                    .end {
+                        display: flex;
+                        align-items: center;
+
+                        &::before {
+                            content: '终';
+                            color: #fff;
+                            width: 20px;
+                            height: 20px;
+                            margin-right: 7px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: 50%;
+                            background: #1478f5;
+                        }
+                    }
+
+                    .line-body {
+                        display: flex;
+                        //max-height: 370px;
+                    }
+
+                    .line {
+                        width: 1px;
+                        //max-height: 370px;
+                        background-color: #1478f5;
+                        margin: 5px 19px 5px 8px;
+                    }
+
+                    .line-sesc {
+                        flex: 1;
+                    }
+                }
+
+                .empty-data {
+                    margin-top: 30%;
+                    text-align: center;
+                }
+            }
+        }
+
+        .mapContainer {
+            flex: 1;
+            margin: 10px 0;
+            //border: 1px solid red;
+        }
+
+        .map-legend {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            width: 200px;
+            //border: 1px solid red;
+            display: flex;
+            flex-wrap: wrap;
+
+            .legend-item {
+                width: 50%;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 30px;
+
+                .legend-img {
+                    width: 20px;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/components/secondaryScreen/chinaMap/chinaMapApi.ts b/src/components/secondaryScreen/chinaMap/chinaMapApi.ts
new file mode 100644
index 0000000..5f51cc7
--- /dev/null
+++ b/src/components/secondaryScreen/chinaMap/chinaMapApi.ts
@@ -0,0 +1,11 @@
+import { get } from '/@/api/request.ts';
+
+export enum Api {
+    allList = '/health-emergency/emergency/tblAmbulanceGps/getAllList',
+    getAmbulanceList = '/health-emergency/emergency/tblAmbulanceGps/getAmbulanceList',
+}
+
+// 获取所有资源
+export const getAllList = (params) => get(Api.allList, params);
+//获取救护车GPS信息
+export const getAmbulanceList = (params) => get(Api.getAmbulanceList, params);
\ No newline at end of file
diff --git a/src/components/secondaryScreen/screen-right/oneR.vue b/src/components/secondaryScreen/screen-right/oneR.vue
new file mode 100644
index 0000000..097b08f
--- /dev/null
+++ b/src/components/secondaryScreen/screen-right/oneR.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="terminal-container">
+        <public-title title="睡眠">
+            <template #title>平均睡眠时长：6小时30分</template>
+        </public-title>
+        <div class="inner">
+            <div class="title">
+                <span class="count">6.5h</span>
+                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
+            </div>
+            <div class="sleepChart" ref="sleepChart"></div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import * as echarts from 'echarts';
+    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
+    import { ref, onMounted, unref } from 'vue';
+    import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+
+    const sleepChart = ref<HTMLElement>();
+    onMounted(() => {
+        init();
+    });
+    const { healthData, getValue, setHealth } = useHealth();
+
+    function init() {
+        initChart();
+    }
+
+    function initChart() {
+        let myChart = echarts.init(sleepChart.value);
+        let options = sleepCharts();
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+
+        .title {
+            color: #cfcfcf;
+            text-align: left;
+            padding: 1% 6%;
+
+            .count {
+                font-size: 28px;
+                font-weight: bold;
+            }
+
+            .lightSleep {
+                padding-left: 2%;
+            }
+        }
+
+        .sleepChart {
+            height: 80%;
+        }
+    }
+</style>
diff --git a/src/components/secondaryScreen/screen-right/screenRightHooks.ts b/src/components/secondaryScreen/screen-right/screenRightHooks.ts
new file mode 100644
index 0000000..ac6cc25
--- /dev/null
+++ b/src/components/secondaryScreen/screen-right/screenRightHooks.ts
@@ -0,0 +1,119 @@
+import {computed, ref} from 'vue';
+
+export function sleepCharts() {
+    return {
+        grid: {
+            top: '15%',
+            left: '8%',
+            right: '3%',
+            bottom: '18%',
+        },
+        legend: {
+            data: ['清醒', '浅睡', '深睡'],
+            textStyle: {
+                color: '#ffffff'
+            },
+            left: '60%',
+        },
+        color: ['#14B3F8', '#6D7BEB', '#5451DC'],
+        xAxis: {
+            type: 'category',
+            axisLabel: {
+                color: '#ffffff'
+            },
+            data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff'
+            },
+            axisLine: {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#696969'
+                }
+            }
+        },
+        series: [
+            {
+                name: '清醒',
+                type: 'bar',
+                data: [
+                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+                ],
+            },
+            {
+                name: '浅睡',
+                type: 'bar',
+                data: [
+                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+                ],
+            },
+            {
+                name: '深睡',
+                type: 'bar',
+                data: [
+                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+                ],
+            }
+        ]
+    };
+}
+
+export function useHealth() {
+    const healthData = ref([
+        {
+            name: '5000以下',
+            value: '0',
+            type: '1',
+            type_dictText: '恶性肿瘤',
+        },
+        {
+            name: '5000~1w',
+            value: '2',
+            type: '2',
+            type_dictText: '其他',
+        },
+        {
+            name: '1~1.5w',
+            value: '34',
+            type: '3',
+            type_dictText: '其他',
+        },
+        {
+            name: '1.5w~2w',
+            value: '43',
+            type: '3',
+            type_dictText: '其他',
+        },
+        {
+            name: '2以上',
+            value: '43',
+            type: '3',
+            type_dictText: '其他',
+        },
+    ]);
+    const getValue = computed(() => healthData.value.map((item) => item.value));
+    const getName = computed(() => healthData.value.map((item) => item.name));
+
+    function setHealth(data) {
+        data?.map((item1) => {
+            healthData.value.map((item2) => {
+                if (item1.type == item2.type) {
+                    item2.value = item1.count;
+                }
+            });
+        });
+    }
+
+    return {
+        healthData,
+        getValue,
+        getName,
+        setHealth,
+    };
+}
\ No newline at end of file
diff --git a/src/components/secondaryScreen/screen-right/threeR.vue b/src/components/secondaryScreen/screen-right/threeR.vue
new file mode 100644
index 0000000..607ae97
--- /dev/null
+++ b/src/components/secondaryScreen/screen-right/threeR.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <public-title title="预警"/>
+    <div class="inner-screen">
+      <a-table :dataSource="dataSource" :columns="columns"/>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue';
+import PublicTitle from '/@/components/publicTitle.vue';
+
+const dataSource = ref([
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '3',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+]);
+
+const columns = ref([
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+]);
+</script>
+<style scoped lang="less">
+.inner-screen {
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 20px 0;
+
+  :deep(.ant-table-thead) {
+    display: none !important;
+  }
+
+  :deep(.ant-table-tbody tr:nth-child(even)) {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :deep(.ant-table-tbody tr:nth-child(odd)) {
+    background-color: #0A0A0C;
+    color: #ffffff;
+  }
+}
+</style>
diff --git a/src/components/secondaryScreen/screen-right/twoR.vue b/src/components/secondaryScreen/screen-right/twoR.vue
new file mode 100644
index 0000000..35f52cb
--- /dev/null
+++ b/src/components/secondaryScreen/screen-right/twoR.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <public-title title="步数" />
+        <div class="inner" ref="healthChart"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref, unref, onMounted } from 'vue';
+    import * as echarts from 'echarts';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { getHealthDataList } from '/@/components/body-d-right/right.api';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useHealth } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+    import { screenPie } from '/@/components/item-d/pieCharts.ts';
+
+    const { setSpin, spinning } = useSpin();
+    const healthChart = ref<HTMLElement>();
+
+    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
+    onMounted(() => {
+        init();
+    });
+    const { healthData, getValue, setHealth } = useHealth();
+
+    async function init() {
+        try {
+            const { code, result } = await getHealthDataList({});
+            setSpin(true);
+            if (code != 200) {
+                return;
+            }
+            setHealth(result);
+            const yData = unref(getValue);
+            let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+            initChart(unref(healthData), total);
+        } catch {
+            initChart(unref(healthData), 0);
+        }
+    }
+
+    function initChart(chartData, total) {
+        let myChart = echarts.init(healthChart.value);
+        let options = screenPie(chartData, total, color.value);
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        width: 90%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 00d655f..e4e3c35 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -150,4 +150,4 @@
         background: url('../assets/images/bottom-b.png') no-repeat;
         background-size: 100% 100%;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/indexSon.vue b/src/views/indexSon.vue
index 571683d..008c639 100644
--- a/src/views/indexSon.vue
+++ b/src/views/indexSon.vue
@@ -14,8 +14,8 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <template v-for="(item, index) in dataList" :key="`list${data}`">
-                    <item-d :title="item" :data="[]" />
+                <template v-for="(item, index) in dataList" :key="`list${index}`">
+                    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
                 </template>
             </div>
             <div class="body-d-middle">
@@ -33,17 +33,59 @@
 <script setup lang="ts">
     import { RollbackOutlined } from '@ant-design/icons-vue';
     import { ref } from 'vue';
-    import OneR from '../components/body-d-right/oneR.vue';
-    import TwoR from '../components/body-d-right/twoR.vue';
-    import ThreeR from '../components/body-d-right/threeR.vue';
-    import ChinaMap from '../components/chinaMap/chinaMap.vue';
+    import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
+    import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
+    import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
+    import ChinaMap from '/@/components/secondaryScreen/chinaMap/chinaMap.vue';
     import * as dayjs from 'dayjs';
     import router from '/@/router';
     import ItemD from '/@/components/item-d/item-d.vue';
 
     const dayTimeO = ref();
     const dayTimeT = ref();
-    const dataList = ref(['心率', '血氧', '压力', '体温']);
+    const dataList = ref([
+        {
+            title: '心率',
+            data: [
+                { name: '正常', value: 234 },
+                { name: '警戒', value: 204 },
+                { name: '危险', value: 34 },
+            ],
+            color: ['#0098FA', '#FF6648', '#FB466C'],
+            tips: '正常范围60~100次/分',
+        },
+        {
+            title: '血氧',
+            data: [
+                { name: '正常', value: 234 },
+                { name: '警戒', value: 204 },
+                { name: '危险', value: 34 },
+            ],
+            color: ['#0098FA', '#FF6648', '#FB466C'],
+            tips: '血氧饱和度范围95%~100%',
+        },
+        {
+            title: '压力',
+            data: [
+                { name: '正常', value: 234 },
+                { name: '放松', value: 204 },
+                { name: '中等', value: 34 },
+                { name: '偏高', value: 78 },
+            ],
+            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
+            tips: '',
+        },
+        {
+            title: '体温',
+            data: [
+                { name: '37.2', value: 234 },
+                { name: '37.2-38', value: 204 },
+                { name: '>38', value: 34 },
+            ],
+            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+            tips: '',
+        },
+    ]);
 
     function init() {
         getTime();
@@ -146,12 +188,25 @@
         }
 
         .body-d-right {
-            > :nth-child(n) {
+            > :nth-child(1) {
                 width: 100%;
-                height: calc(100% / 3);
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+
+            > :nth-child(2) {
+                width: 100%;
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+
+            > :nth-child(3) {
+                width: 100%;
+                height: calc(100% / 2);
                 padding: 10px;
             }
         }
+
         .body-d-left {
             > :nth-child(n) {
                 width: 100%;