xj-screen/src/components/secondaryScreen/secondMap/secondMap.vue

<template>
    <div class="center-map">
        <div class="china-map-box">
            <div class="form-container">
                <slot name="rightForm"></slot>
            </div>
            <div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
                <div id="mapSecondMap" class="mapSecondMap"></div>
            </div>
            <div v-show="false" id="container"></div>
            <div v-show="false" id="panel"></div>
            <div v-show="isShow" :class="className" class="footer-data" style="--moveUp: 50px; --moveDown: -90px">
                <div class="empty-png"></div>
                <div
                    v-for="item in footerList"
                    :style="{ cursor: item.key == 'allotDeviceNum' ? 'pointer' : 'default' }"
                    class="col-item nowrap"
                    @click="openWatchList(item)"
                >
                    <div class="col-text">{{ item?.name }}</div>
                    <div :title="item.value" class="col-value nowrap">{{ item?.value }}</div>
                </div>
            </div>
            <div
                v-show="isShowAlarm"
                :class="isShowAlarm ? 'slide-top' : 'slide-bottom'"
                class="footer-dialog-con"
                style="--moveUp: 120px; --moveDown: -120px"
            >
                <FooterDialog :detailLeft="detailLeft" :detailRight="detailRight" @closeDialog="closeDialog"></FooterDialog>
            </div>
        </div>
        <WatchListDialog ref="watchDialogRef" @close="closeWatch"></WatchListDialog>
    </div>
</template>
<script lang="ts" setup>
    import { onMounted, ref, watch } from 'vue';
    import { Map } from '/@/assets/mapUtils/map';
    import $bus from '/@/utils/bus.ts';
    import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
    import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
    import { useAlarmDetail, useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
    import { footerApi, mapListApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
    import { earlyWarning } from '/@/utils/busConstant.ts';
    import { getToday } from '/@/utils/utils.ts';

    const props = defineProps({
        orgCode: String,
        type: String,
    });
    const mapList = ref([]); //地图数据
    // 底部表格
    const { isShow, className, setIsShow } = useMoveClass();

    function init() {
        let mapContainer = document.querySelector('.mapSecondMap');
        mapContainer &&
            Map.initMap({ el: 'mapSecondMap' }).then(() => {
                getMapList();
            });
    }

    const watchDialogRef = ref();

    function openWatchList(item) {
        if (item.key == 'allotDeviceNum') {
            watchDialogRef.value.openModal(item.extData?.deptId);
        }
    }

    const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();

    async function getFooterTable(orgCode) {
        const params = {
            orgCode: orgCode || props.orgCode,
            dataDate: getToday(),
        };
        const { code, result } = await footerApi(params);
        if (code == 200) {
            setFooterList(result);
        }
    }

    async function getMapList() {
        try {
            const { code, result } = await mapListApi({});
            if (code == 200 && result.length > 0) {
                const newArr = result.map((item) => ({ ...item, type: '6' }));
                mapList.value = newArr;
                Map.createOverlay(
                    newArr,
                    {
                        content: (val) => {
                            return `<div style="
                                width: 21px;
                                height: 44px;
                                position: absolute;
                                left: -20px;
                                top: -20px;" title="${val?.departName}">
                            </div>`;
                        },
                    },
                    (val) => {
                        getFooterTable(val.orgCode);
                        setIsShow(true);
                    }
                );
            }
        } catch {}
    }

    watch(
        () => props.orgCode,
        () => {
            getMapList();
        }
    );
    const { detailLeft, detailRight, setDetail } = useAlarmDetail();
    onMounted(() => {
        init();
        //点击预警定位
        $bus.on(earlyWarning, (params) => {
            setDetail(params);
            drawMarker(params);
            setIsShowAlarm(true);
        });
    });

    /**
     *@desc 底部信息
     */
    function closeDialog() {
        setIsShowAlarm(!isShowAlarm.value);
        Map.clearMarker();
    }

    /**
     * @desc  预警弹窗关闭
     */
    function closeWatch() {}

    function drawMarker(data: any) {
        const { lon, lat } = data;
        if (!lon || !lat) return;
        Map.createMarker(data);
    }
</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;
        }

        .form-container {
            position: absolute;
            right: 0;
            top: 17px;
            z-index: 1;
        }

        .mapSecondMap {
            height: calc(100% + 20px);
            margin: 10px 0;
        }

        .footer-data {
            position: absolute;
            left: 0;
            right: 0;
            bottom: var(--moveDown);
            display: flex;
            z-index: 999;

            .empty-png {
                position: absolute;
                top: -16px;
                left: 0;
                width: 100%;
                height: 16px;
                background: url('../../../assets/images/bg.png') no-repeat;
                background-position-y: -500px;
            }

            .col-item {
                flex: 1;
                color: #ffffff;
                text-align: center;

                .col-text {
                    height: 40px;
                    line-height: 40px;
                    background: rgba(35, 132, 221);
                }

                .col-value {
                    height: 40px;
                    line-height: 40px;
                    background-color: #00152b;
                }
            }
        }

        .footer-dialog-con {
            position: absolute;
            left: 0;
            right: 0;
            bottom: var(--moveDown);
            z-index: 999;
        }

        .slide-top {
            animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }

        @keyframes slide-top {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(var(--moveDown));
            }
        }

        .slide-bottom {
            animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }

        @keyframes slide-bottom {
            0% {
                transform: translateY(var(--moveDown));
            }
            100% {
                transform: translateY(var(--moveUp));
            }
        }
    }
</style>