update 增加新版大屏

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: '直升机' },
 ];
 
 /**

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: '直升机' },
 ];
 
 /**

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() {

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({

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);

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>

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>

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>

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: '地方医院' },
+];

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>

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>

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>