From 094e88a79ec05930549f2cd8848c6778e4c78230 Mon Sep 17 00:00:00 2001
From: zk <k12019@aliyun.com>
Date: Fri, 20 Sep 2024 09:28:11 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=A2=9E=E5=8A=A0=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/legend7.png                    | Bin 0 -> 2048 bytes
 src/assets/img/mapIcon7.png                   | Bin 0 -> 3021 bytes
 src/components/chinaMap/chinaHooks.ts         |   2 -
 src/components/xianMap/xianMapHooks.ts        |   3 -
 src/hooks/autoRefresh/caching.ts              |  10 +
 src/router/index.ts                           |   8 +
 src/views/centralScreen/centralScreen.api.ts  |  30 +
 src/views/centralScreen/centralScreen.vue     | 219 +++++++
 .../components/PhysicalExaminationData.vue    | 127 ++++
 .../centralScreen/components/centerMap.vue    | 607 ++++++++++++++++++
 .../components/centerMapHooks.ts              |  14 +
 .../components/dailyWorkTrends.vue            |  89 +++
 .../components/employeeHealth.vue             | 109 ++++
 .../components/serviceDetails.vue             | 141 ++++
 14 files changed, 1354 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/img/legend7.png
 create mode 100644 src/assets/img/mapIcon7.png
 create mode 100644 src/views/centralScreen/centralScreen.api.ts
 create mode 100644 src/views/centralScreen/centralScreen.vue
 create mode 100644 src/views/centralScreen/components/PhysicalExaminationData.vue
 create mode 100644 src/views/centralScreen/components/centerMap.vue
 create mode 100644 src/views/centralScreen/components/centerMapHooks.ts
 create mode 100644 src/views/centralScreen/components/dailyWorkTrends.vue
 create mode 100644 src/views/centralScreen/components/employeeHealth.vue
 create mode 100644 src/views/centralScreen/components/serviceDetails.vue

diff --git a/src/assets/img/legend7.png b/src/assets/img/legend7.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0a005859fae58eb4f5a9ad21a09bc8761f690cd
GIT binary patch
literal 2048
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/mapIcon7.png b/src/assets/img/mapIcon7.png
new file mode 100644
index 0000000000000000000000000000000000000000..2864f97420d272747dc24630ec0b30e75d970d70
GIT binary patch
literal 3021
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
P00000NkvXXu0mjfDDl?v

literal 0
HcmV?d00001

diff --git a/src/components/chinaMap/chinaHooks.ts b/src/components/chinaMap/chinaHooks.ts
index 4e9de20..acbdd8b 100644
--- a/src/components/chinaMap/chinaHooks.ts
+++ b/src/components/chinaMap/chinaHooks.ts
@@ -126,7 +126,6 @@ export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).hre
 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: '油田医院' },
@@ -134,7 +133,6 @@ export const legendList = [
     { img: legend3, text: '救护车' },
     { img: legend4, text: '合作医院' },
     { img: legend5, text: '地方医院' },
-    // { img: legend6, text: '直升机' },
 ];
 
 /**
diff --git a/src/components/xianMap/xianMapHooks.ts b/src/components/xianMap/xianMapHooks.ts
index 45a1ec1..a86af95 100644
--- a/src/components/xianMap/xianMapHooks.ts
+++ b/src/components/xianMap/xianMapHooks.ts
@@ -126,15 +126,12 @@ export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).hre
 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: '直升机' },
 ];
 
 /**
diff --git a/src/hooks/autoRefresh/caching.ts b/src/hooks/autoRefresh/caching.ts
index dbaff98..c7e5855 100644
--- a/src/hooks/autoRefresh/caching.ts
+++ b/src/hooks/autoRefresh/caching.ts
@@ -23,6 +23,16 @@ export const caching = {
     WORK_DAILY: 'WORK_DAILY',
     //员工队伍健康状况
     TEAM_HEALTH: 'TEAM_HEALTH',
+    /************************新应急中心***************************/
+    //服务详情数据
+    SERVER_DETAIL: 'SERVER_DETAIL',
+    //一线医疗点每日工作动态
+    WORK_DAILY_NEW: 'WORK_DAILY_NEW',
+    //员工队伍健康状况
+    TEAM_HEALTH_NEW: 'TEAM_HEALTH_NEW',
+    //体检数据
+    PHYSICAL_DATA: 'PHYSICAL_DATA',
+    /************************新应急中心***************************/
 };
 
 export function useSession() {
diff --git a/src/router/index.ts b/src/router/index.ts
index 9d34ff5..031a558 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,6 +64,14 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('/@/views/transfer.vue'),
     },
+    {
+        path: '/centralScreen',
+        name: 'centralScreen',
+        meta: {
+            title: '应急大屏',
+        },
+        component: () => import('/@/views/centralScreen/centralScreen.vue'),
+    },
 ];
 
 const router: Router = createRouter({
diff --git a/src/views/centralScreen/centralScreen.api.ts b/src/views/centralScreen/centralScreen.api.ts
new file mode 100644
index 0000000..57fe138
--- /dev/null
+++ b/src/views/centralScreen/centralScreen.api.ts
@@ -0,0 +1,30 @@
+import { get } from '/@/api/request.ts';
+
+enum Api {
+    server = '/health-emergency/emergency/tblUserHelp/statistics',
+    getWorkDaily = '/health-emergency/emergency/ycLargeScreen/medicalCenter',
+    getTeamHealth = '/health-emergency/emergency/ycLargeScreen/userHealthCenter',
+    getDetail = '/health-medical/medical/hospital/getMedicalHospital',
+}
+
+/**
+ * @description: 服务详情数据
+ * @param params
+ */
+export const serverApi = (params: any) => get(Api.server, params);
+
+/**
+ * @description 一线医疗点每日工作动态
+ * @param params
+ */
+export const getWorkDaily = (params: any) => get(Api.getWorkDaily, params);
+/**
+ * @description 员工队伍健康状况
+ * @param params
+ */
+export const getTeamHealthApi = (params: any) => get(Api.getTeamHealth, params);
+/**
+ * @description 获取体检数据
+ * @param params
+ */
+export const getPhysicalData = (params: any) => get(Api.getDetail, params);
diff --git a/src/views/centralScreen/centralScreen.vue b/src/views/centralScreen/centralScreen.vue
new file mode 100644
index 0000000..8f770fe
--- /dev/null
+++ b/src/views/centralScreen/centralScreen.vue
@@ -0,0 +1,219 @@
+<template>
+    <div class="outer">
+        <div class="title-d">
+            <div class="title-d-left">
+                {{ dayTimeO }}
+            </div>
+            <div class="title-d-middle">
+                <span>{{ title }}</span>
+                <span class="phone">({{ phone }})</span>
+            </div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+        </div>
+        <div class="body-d">
+            <div class="central-screen-body-left">
+                <!--服务详情数据-->
+                <ServiceDetails
+                    theme="dark"
+                    :refreshState="refreshState"
+                    :setting="setting"
+                    class="service-details"
+                    @handleClick="handlePhoneDialog"
+                />
+                <!--一线医疗点每日工作动态-->
+                <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
+            </div>
+            <div class="body-d-middle">
+                <CenterMap
+                    :showFooter="false"
+                    :computedCenter="false"
+                    :mapOptions="YinChuanOption"
+                    :showHospitalList="showHospitalList"
+                    :hospitalList="hospitalList"
+                    @clearHospitalList="clearHospitalList"
+                />
+            </div>
+            <div class="body-d-right">
+                <!--健康终端报警-->
+                <TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
+                <!--员工队伍健康状况-->
+                <EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
+                <!--体检数据-->
+                <PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
+            </div>
+        </div>
+        <div class="bottom-d"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, onUnmounted, ref } from 'vue';
+    import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
+    import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
+    import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
+    import TerminalAlarm from '/@/components/body-d-right/oneR.vue';
+    import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
+    import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
+    import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
+    import { useRefresh } from '/@/hooks/autoRefresh';
+    import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
+    import { useUserStore } from '/@/store/modules/user.ts';
+
+    const { refreshState } = useRefresh(DEFAULT_TIME);
+    const dayTimeO = ref();
+    const dayTimeT = ref();
+    const interval = ref(1);
+    const title = ref('新版应急就医服务中心');
+    const phone = ref('0951-6805199');
+
+    function init() {
+        getTime();
+        interval.value = setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+
+    function getTime() {
+        const { timeLeft, timeRight } = useTopTime();
+        dayTimeO.value = timeLeft;
+        dayTimeT.value = timeRight;
+    }
+
+    const setting = getSettings(DataType.yinChuan);
+    onMounted(() => {
+        init();
+        document.title = title.value;
+        document.addEventListener('visibilitychange', checkTabState);
+        //设置主题
+        store.setThemeType(ThemeType.dark);
+    });
+    const store = useUserStore();
+
+    onUnmounted(() => {
+        clearInterval(interval.value);
+        document.removeEventListener('visibilitychange', checkTabState);
+    });
+    const tabState = ref('');
+
+    //判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
+    function checkTabState() {
+        tabState.value = document.hidden ? 'inactive' : 'active';
+    }
+
+    const phoneDialogTitle = ref('呼入电话');
+    const phoneDialogRef = ref();
+    //0:处置 1:处理 2:呼入 3:全部
+    const phoneType = ref('');
+
+    //呼入电话、受理电话弹窗
+    function handlePhoneDialog(item) {
+        const { name, key } = item;
+        //呼入电话
+        if (key == 'gross') {
+            phoneType.value = ServerDetailType['gross'];
+            //受理电话
+            if (key == 'alerdyreceive') {
+                phoneType.value = ServerDetailType['alerdyreceive'];
+            }
+            nextTick(() => {
+                phoneDialogTitle.value = name;
+                phoneDialogRef.value.openDialog();
+            });
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('/@/assets/images/bg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .title-d {
+        height: 80px;
+        line-height: 80px;
+        display: flex;
+        padding-bottom: 9px;
+        background: url('/@/assets/images/top-title.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
+            font-size: 27px;
+            color: #ffffff;
+            line-height: 60px;
+            text-align: center;
+        }
+
+        .title-d-middle {
+            .phone {
+                font-size: 27px;
+                margin-left: 4px;
+            }
+        }
+
+        > :nth-child(1) {
+            width: 29%;
+        }
+
+        > :nth-child(2) {
+            width: 42%;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        > :nth-child(3) {
+            width: 29%;
+        }
+    }
+
+    .body-d {
+        display: flex;
+        height: calc(100% - 120px);
+        padding-top: 10px;
+
+        > :nth-child(1) {
+            width: 24%;
+        }
+
+        > :nth-child(2) {
+            width: 52%;
+        }
+
+        > :nth-child(3) {
+            width: 24%;
+        }
+
+        .central-screen-body-left {
+            .service-details {
+                height: 33%;
+            }
+
+            .daily-work-trends {
+                height: 67%;
+            }
+        }
+
+        .body-d-right {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 3);
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .bottom-d {
+        height: 40px;
+        background: url('/@/assets/images/bottom-b.png') no-repeat;
+        background-size: 100% 100%;
+    }
+</style>
diff --git a/src/views/centralScreen/components/PhysicalExaminationData.vue b/src/views/centralScreen/components/PhysicalExaminationData.vue
new file mode 100644
index 0000000..b7b23e3
--- /dev/null
+++ b/src/views/centralScreen/components/PhysicalExaminationData.vue
@@ -0,0 +1,127 @@
+<template>
+    <div class="common-card" :class="[themeType]">
+        <public-title title="体检数据" :themeType="themeType" />
+        <div class="inner">
+            <div class="type-time">
+                <span
+                    v-for="(item, index) in timeTab"
+                    :key="index"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
+                    @click="handleSelect(index, item.value)"
+                    >{{ item.name }}</span
+                >
+            </div>
+            <div class="physical-container">
+                <a-spin :spinning="spinning" class="spin"></a-spin>
+                <div class="RadarCharts" ref="radarChartsRef"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, ref, unref, watch } from 'vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
+    import * as echarts from 'echarts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { getPhysicalData } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+        setting: Object,
+    });
+    const { themeType } = useTheme();
+    const { setSession, getSession } = useSession();
+    const { PHYSICAL_DATA } = caching;
+    const { setSpin, spinning } = useSpin();
+    const selectIndex = ref(0);
+    const selectVal = ref('2'); //本年
+    function handleSelect(index: number, value: string) {
+        selectIndex.value = index;
+        selectVal.value = value;
+        setSpin(true);
+        setTimeout(() => {
+            setSpin(false);
+        }, 1000);
+        getList();
+    }
+
+    onMounted(() => {
+        getList();
+    });
+
+    const { radarList, setRadarList, getRadarList } = useHospitalList();
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const { code, result } = (await getPhysicalData({ dataType: props.setting.dataType, condition: selectVal.value })) || {};
+            setSpin(!spinning.value);
+            if (code != 200) {
+                return;
+            }
+            setSession(PHYSICAL_DATA, JSON.stringify(result));
+            setValue(result);
+        } catch {
+            const result = JSON.parse(getSession(PHYSICAL_DATA));
+            setValue(result);
+            setSpin(!spinning.value);
+        }
+    }
+
+    function setValue(result) {
+        setRadarList(result);
+        const everyEmpty = allValueEmpty('value', getRadarList());
+        everyEmpty && initChart();
+    }
+
+    const radarChartsRef = ref<HTMLElement>();
+
+    function initChart() {
+        const myChart = echarts.init(radarChartsRef.value);
+        let countList = radarList?.value.map((item) => item?.userCount);
+        if (countList.length < 1) return;
+        let max = Math.max(...countList);
+        const indicator = radarList?.value.map((item) => ({ name: item?.hospitalName, max: max }));
+        const option = radarCharts({ indicator, countList, theme: unref(themeType) });
+        myChart.setOption(option);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+
+    watch(
+        () => props.refreshState,
+        () => {
+            getList();
+        }
+    );
+</script>
+<style lang="less" scoped>
+    .inner {
+        height: calc(100% - 40px);
+
+        .physical-container {
+            width: 96%;
+            height: calc(100% - 35px);
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-around;
+            position: relative;
+
+            .spin {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
+
+            .RadarCharts {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+</style>
diff --git a/src/views/centralScreen/components/centerMap.vue b/src/views/centralScreen/components/centerMap.vue
new file mode 100644
index 0000000..2594d25
--- /dev/null
+++ b/src/views/centralScreen/components/centerMap.vue
@@ -0,0 +1,607 @@
+<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" placeholder="请输入起点"></a-input>
+                    </a-form-item>
+                    <a-form-item class="form-item-self" label="终点">
+                        <a-input v-model:value="formState.end" placeholder="请输入终点"></a-input>
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button class="reset-btn" @click="removeInput">清空</a-button>
+                        <a-button class="search-btn" @click="searchRoute" :loading="searchFlag" :disabled="searchFlag"> 路线规划 </a-button>
+                    </a-form-item>
+                </a-form>
+                <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
+                    <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 v-show="showHospitalList" class="reset-map" @click="resetMap">
+                <RedoOutlined title="重置地图" />
+            </div>
+            <RoutePanel
+                class="driving-route-panel"
+                v-show="showDrivingPanel"
+                :drivingRoute="drivingRoute"
+                :drivingTitle="drivingTitle"
+                @out-click="showDrivingPanel = false"
+            />
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                <div id="centerMap" class="mapContainer"></div>
+            </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 class="level">地图层级：{{ level }}</div>-->
+        </div>
+        <div class="center-footer" v-if="showFooter">
+            <div class="count-item">
+                <div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
+                <div class="text">累计受理</div>
+            </div>
+            <div class="count-item">
+                <div class="num">{{ useDetail?.totalacceptance || '0' }}</div>
+                <div class="text">累计处置</div>
+            </div>
+        </div>
+        <!-- 附近医院、医疗点  -->
+        <div class="hospital-list" v-if="showHospitalList">
+            <div class="hospital-item" v-for="(item, index) in hospitalList" :key="index" @click="showDrivingLine(item)">
+                <div>{{ item.name }}</div>
+                <div>相距{{ item.distance }}</div>
+                <div>驾车大约{{ item.driveTime }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { nextTick, onMounted, ref } from 'vue';
+    import { message } from 'ant-design-vue';
+    import { RedoOutlined } from '@ant-design/icons-vue';
+    import { Map } from '/@/assets/mapUtils/map';
+    import { getKmStr, getTimeStr, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
+    import { useDetailStore } from '/@/store/modules/detailData.ts';
+    import RoutePanel from '/@/components/chinaMap/components/routePanel.vue';
+    import { legendList } from '/@/views/centralScreen/components/centerMapHooks.ts';
+
+    const props = defineProps({
+        //是否展示底部统计
+        showFooter: {
+            type: Boolean,
+            default: () => {
+                return true;
+            },
+        },
+        //地图是否按照接口数据的中心点定位
+        computedCenter: {
+            type: Boolean,
+            default: () => {
+                return true;
+            },
+        },
+        // 地图配置
+        mapOptions: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        //是否展示最近的三个医院
+        showHospitalList: {
+            type: Boolean,
+            default: () => {
+                return false;
+            },
+        },
+        hospitalList: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    });
+    const emits = defineEmits(['clearHospitalList']);
+    const useDetail = useDetailStore();
+    const formState = ref({
+        start: '',
+        end: '',
+    });
+    const list = ref(tabList);
+    const currentIndex = ref(0);
+
+    function changeTab(item, i: number) {
+        currentIndex.value = i; // 地方医院
+        Map.clearActiveHospital();
+        closeDrivingElement();
+        Map.map.off('moveend', logMapinfo);
+        if (TabType.diFangYiYuan == item.type) {
+            Map.removeOverlayGroup();
+            Map.map.on('moveend', logMapinfo);
+            return;
+        } else {
+            getMapData(item.type, { type: item.type });
+        }
+    }
+
+    const currentCityCode = ref('');
+
+    function logMapinfo() {
+        Map.map.getCity(function (info) {
+            const { citycode } = info;
+            if (currentCityCode.value != citycode) {
+                Map.createActiveHospital(citycode);
+                currentCityCode.value = citycode;
+            }
+        });
+    }
+
+    const level = ref(0);
+
+    function setLevel() {
+        //获取当前地图级别
+        level.value = Map.map.getZoom();
+    }
+
+    async function getMapData(type, params = {}) {
+        try {
+            const { code, result } = await mapApiSwitch(type, params);
+            if (code == 200) {
+                if (Array.isArray(result) && result.length > 0) {
+                    Map.createOverlay(
+                        result,
+                        {
+                            content: (val) => {
+                                return `<div style="
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val?.name}">
+                            </div>`;
+                            },
+                        },
+                        () => {},
+                        props.computedCenter
+                    );
+                } else {
+                    Map.removeOverlayGroup();
+                }
+            }
+        } catch (e) {
+            console.warn(e);
+        }
+    }
+
+    onMounted(() => {
+        Map.initMap({ el: 'centerMap', option: props.mapOptions }).then(() => {
+            getMapData(tabList[0].type);
+            Map.map && Map.map.on('zoomend', setLevel);
+            Map.map && Map.map.on('zoomend', setLevel);
+        });
+    });
+    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;
+    }
+
+    let searchFlag = ref(false);
+
+    /**
+     * @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('请输入终点');
+        }
+        searchFlag.value = true;
+        //基本地图加载
+        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') {
+                searchFlag.value = false;
+                //  console.log('绘制驾车路线完成');
+            } else {
+                searchFlag.value = false;
+                //  console.log('获取驾车数据失败：' + result);
+            }
+        });
+        AMap.Event.addListener(driving, 'complete', (res) => {
+            const data = JSON.parse(JSON.stringify(res));
+            searchFlag.value = false;
+            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 = '';
+        searchFlag.value = false;
+    }
+
+    // 驾车路线
+    const drivingRoute = ref([]);
+    const drivingTitle = ref('');
+    const showDrivingPanel = ref(false);
+
+    function showDrivingLine(item) {
+        nextTick(() => {
+            drivingTitle.value = '全程' + item.driveTime + item.distance;
+            drivingRoute.value = item.routeList?.map((item) => item?.instruction);
+            showDrivingPanel.value = true;
+            if (item.lon) {
+                Map.clearNaviLine();
+                Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
+            }
+        });
+    }
+
+    function closeDrivingElement() {
+        Map.clearNavigationElements();
+        formState.value.start = '';
+        formState.value.end = '';
+        showDrivingPanel.value = false;
+        emits('clearHospitalList');
+    }
+
+    function resetMap() {
+        closeDrivingElement();
+        changeTab(list.value[currentIndex.value], currentIndex.value);
+    }
+</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;
+            font-size: 16px;
+
+            .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: 36px;
+            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: 120px;
+                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;
+                    }
+
+                    .line {
+                        width: 1px;
+                        background-color: #1478f5;
+                        margin: 5px 19px 5px 8px;
+                    }
+
+                    .line-desc {
+                        flex: 1;
+                    }
+                }
+
+                .empty-data {
+                    margin-top: 30%;
+                    text-align: center;
+                }
+            }
+        }
+
+        .reset-map {
+            position: absolute;
+            left: 0;
+            top: 50px;
+            z-index: 99;
+            font-size: 20px;
+            color: #05d5ff;
+            cursor: pointer;
+            background: #243b5d;
+            padding: 0px 6px;
+        }
+
+        //驾驶路线导航面板
+        .driving-route-panel {
+            position: absolute;
+            right: 0;
+            top: 86px;
+            width: 288px;
+            padding: 9px 18px;
+            min-height: 200px;
+            max-height: 473px;
+            overflow: auto;
+            background: #2a4164;
+            border-radius: 2px;
+            border: 1px solid #1b7ef2;
+            z-index: 99;
+        }
+
+        .mapContainer {
+            flex: 1;
+            height: calc(100% + 22px);
+            margin: 10px 0;
+        }
+
+        .map-legend {
+            position: absolute;
+            bottom: 15px;
+            left: 10px;
+            width: 200px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .legend-item {
+                width: 50%;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 30px;
+
+                .legend-img {
+                    width: 20px;
+                }
+            }
+        }
+
+        .level {
+            position: absolute;
+            top: 50px;
+            left: 400px;
+            font-size: 18px;
+            color: #fff;
+        }
+
+        .center-footer {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 10px;
+            gap: 20px;
+
+            .count-item {
+                width: 340px;
+                height: 80px;
+                display: flex;
+                color: #ffffff;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                background: #00071b;
+                box-shadow: inset 0 0 40px 0 #1b7ef2;
+                border-radius: 4px;
+
+                .num {
+                    font-size: 24px;
+                    font-weight: 700;
+                }
+
+                .text {
+                    font-size: 16px;
+                    font-weight: 400;
+                }
+            }
+        }
+
+        .hospital-list {
+            position: absolute;
+            bottom: 200px;
+            width: 800px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+
+            .hospital-item {
+                position: relative;
+                flex: 1;
+                gap: 20px;
+                min-width: 230px;
+                max-width: 230px;
+                height: 110px;
+                text-align: center;
+                padding: 10px;
+                margin: 0 10px;
+                color: #fff;
+                font-size: 16px;
+                background-color: #00152b;
+                border: 1px solid #1b7ef2;
+                border-radius: 12px;
+                box-shadow: 0 1px 11px 0 rgba(194, 189, 189, 0.5);
+                cursor: pointer;
+            }
+
+            .hospital-item:hover {
+                background-color: #192a46;
+                box-shadow: inset 0 0 16px 3px #2562a9;
+            }
+        }
+    }
+</style>
diff --git a/src/views/centralScreen/components/centerMapHooks.ts b/src/views/centralScreen/components/centerMapHooks.ts
new file mode 100644
index 0000000..fec4c93
--- /dev/null
+++ b/src/views/centralScreen/components/centerMapHooks.ts
@@ -0,0 +1,14 @@
+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 legend7 = new URL('/@/assets/img/legend7.png', import.meta.url).href;
+export const legendList = [
+    { img: legend1, text: '油田医院' },
+    { img: legend2, text: '医疗点' },
+    { img: legend7, text: '关联医疗点' },
+    { img: legend3, text: '救护车' },
+    { img: legend4, text: '合作医院' },
+    { img: legend5, text: '地方医院' },
+];
diff --git a/src/views/centralScreen/components/dailyWorkTrends.vue b/src/views/centralScreen/components/dailyWorkTrends.vue
new file mode 100644
index 0000000..6282d2a
--- /dev/null
+++ b/src/views/centralScreen/components/dailyWorkTrends.vue
@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <public-title title="一线医疗点每日工作动态" themeType="dark" />
+        <div class="inner">
+            <div class="trends-item" v-for="(item, k) in trendsData" :key="k">
+                <div class="trends-title-con">
+                    <span class="icon-medical"></span>
+                    <span class="trends-item-title">{{ item.name }}</span>
+                </div>
+                <div class="trends-item-span-box">
+                    <span class="trends-item-span">高风险干预{{ item?.high }}人</span>
+                    <span class="trends-item-span">慢病管理{{ item?.slow }}人</span>
+                    <span class="trends-item-span">巡诊{{ item?.tour }}人</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { onMounted, ref } from 'vue';
+    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
+    import { getWorkDaily } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const { setSession, getSession } = useSession();
+    const { WORK_DAILY_NEW } = caching;
+    const trendsData = ref([]);
+
+    async function getTrendsData() {
+        try {
+            const { code, result } = await getWorkDaily({});
+            if (code != 200) {
+                return;
+            }
+            setSession(WORK_DAILY_NEW, result);
+            trendsData.value = result;
+        } catch {
+            trendsData.value = JSON.parse(getSession(WORK_DAILY_NEW));
+        }
+    }
+
+    onMounted(() => {
+        getTrendsData();
+    });
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+        overflow: auto;
+
+        .trends-item {
+            font-size: 16px;
+            padding: 10px 20px;
+
+            .trends-title-con {
+                display: flex;
+                align-items: center;
+            }
+
+            .icon-medical {
+                display: inline-block;
+                width: 26px;
+                height: 26px;
+                background: url('/@/assets/images/medical-center.png') no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .trends-item-title {
+                margin-left: 8px;
+                font-size: 18px;
+                color: #fff;
+            }
+
+            .trends-item-span-box {
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .trends-item-span {
+                flex: 1;
+                color: #ededed;
+            }
+
+            .trends-item-span:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+</style>
diff --git a/src/views/centralScreen/components/employeeHealth.vue b/src/views/centralScreen/components/employeeHealth.vue
new file mode 100644
index 0000000..688dc43
--- /dev/null
+++ b/src/views/centralScreen/components/employeeHealth.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <public-title title="员工队伍健康状况" themeType="dark">
+            <template #right>
+                <!--                <span class="right-text" @click="viewDetail">更多</span>-->
+            </template>
+        </public-title>
+        <div class="inner">
+            <div v-for="item in list" :key="item.label" class="health-item">
+                <span>{{ item.label }}</span>
+                <span>{{ item.value }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, ref } from 'vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
+    import { getTeamHealthApi } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const props = defineProps({
+        setting: Object,
+    });
+    const { setSession, getSession } = useSession();
+    const { TEAM_HEALTH_NEW } = caching;
+    const list = ref([
+        {
+            label: '在册总人数',
+            value: '',
+            key: 'total',
+        },
+        {
+            label: '患重大疾病人数',
+            value: '',
+            key: 'bigIll',
+        },
+        {
+            label: '健康高风险人数',
+            value: '',
+            key: 'highRisk',
+        },
+        {
+            label: '患慢性病人数',
+            value: '',
+            key: 'slowIll',
+        },
+        {
+            label: '健康指标异常人数',
+            value: '',
+            key: 'focusErr',
+        },
+        {
+            label: '健康人数',
+            value: '',
+            key: 'health',
+        },
+    ]);
+
+    function setList(data = {}) {
+        list.value.forEach((item) => {
+            const { key } = item;
+            if (data && data.hasOwnProperty(key)) {
+                item.value = data[key];
+            }
+        });
+    }
+
+    async function viewDetail() {
+        try {
+            const { code, result } = await getTeamHealthApi({ dataType: props.setting?.dataType });
+            if (code != 200) {
+                return;
+            }
+            setList(result);
+            setSession(TEAM_HEALTH_NEW, result);
+        } catch {
+            let data = JSON.parse(getSession(TEAM_HEALTH_NEW));
+            setList(data);
+        }
+    }
+
+    onMounted(() => {
+        viewDetail();
+    });
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+        display: flex;
+        flex-direction: column;
+        padding: 0 10px;
+
+        .right-text {
+            font-weight: 100;
+            cursor: pointer;
+            margin-right: 3px;
+        }
+
+        .health-item {
+            flex: 1;
+            color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 16px;
+        }
+    }
+</style>
diff --git a/src/views/centralScreen/components/serviceDetails.vue b/src/views/centralScreen/components/serviceDetails.vue
new file mode 100644
index 0000000..fbfba07
--- /dev/null
+++ b/src/views/centralScreen/components/serviceDetails.vue
@@ -0,0 +1,141 @@
+<template>
+    <div class="common-card" :class="[themeType]">
+        <public-title title="服务详情数据" :themeType="themeType" />
+        <div class="inner">
+            <div class="type-time">
+                <span
+                    v-for="(item, index) in typeTime"
+                    :key="index"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
+                    @click="handleSelect(index, item.value)"
+                    >{{ item.name }}</span
+                >
+            </div>
+            <div class="server-container">
+                <div
+                    v-for="(item, index) in statistics"
+                    :key="index"
+                    class="server-item"
+                    :class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
+                    @click="handleClick(item)"
+                >
+                    <span>{{ item?.name }}</span>
+                    <span>{{ item?.value }}</span>
+                </div>
+                <a-spin :spinning="spinning" class="spin"></a-spin>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, ref, watch } from 'vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useDetailStore } from '/@/store/modules/detailData.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { serverApi } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const { themeType } = useTheme();
+    const { SERVER_DETAIL } = caching;
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+        setting: {
+            type: Object,
+        },
+        theme: {
+            type: String,
+        },
+    });
+    const emit = defineEmits(['handleClick']);
+    const typeTime = ref(timeTab);
+    const { statistics, setStatistics } = useStatistics();
+    const selectIndex = ref(0);
+    const selectVal = ref('2'); //本年
+    const { setSpin, spinning } = useSpin();
+
+    onMounted(() => {
+        getList();
+    });
+
+    const useDetail = useDetailStore();
+    const { setSession, getSession } = useSession();
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const { code, result } = (await serverApi({ condition: selectVal.value, dataType: props.setting.dataType })) || {};
+            setSpin(false);
+            if (code != 200 || !result) {
+                return;
+            }
+            setSession(SERVER_DETAIL, JSON.stringify(result));
+            setValue(result);
+        } catch {
+            setSpin(false);
+            const result = JSON.parse(getSession(SERVER_DETAIL));
+            setValue(result);
+        }
+    }
+
+    function setValue(result = {}) {
+        let { alerdyreceive = '', totalacceptance = '' } = result;
+        setStatistics(result);
+        if (alerdyreceive || totalacceptance) {
+            useDetail.setAlerdyreceive(alerdyreceive);
+            useDetail.setTotalacceptance(totalacceptance);
+        }
+    }
+
+    function handleSelect(index: number, value: string) {
+        selectIndex.value = index;
+        selectVal.value = value;
+        getList();
+    }
+
+    function handleClick(item) {
+        emit('handleClick', item);
+    }
+
+    watch(
+        () => props.refreshState,
+        () => {
+            getList();
+        }
+    );
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+
+        .server-container {
+            color: #fff;
+            padding-top: 10px;
+            height: 88%;
+            display: grid;
+            align-items: start;
+            overflow-y: auto;
+            position: relative;
+
+            .spin {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
+        }
+
+        .server-item {
+            font-size: 16px;
+            padding: 6px 6% 6px 5%;
+
+            &.hasCursor {
+                cursor: pointer;
+            }
+
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+</style>