xj-screen/src/components/secondaryScreen/screen-right/threeR.vue

<template>
    <div>
        <public-title title="预警" />
        <div class="inner-screen">
            <a-table
                :scroll="{
                    y: tableHeight,
                }"
                style="overflow-y: auto"
                :columns="monitorColumns"
                :dataSource="dataSource"
                :pagination="pagination"
                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default no-white' : 'table-striped no-white')"
                class="ant-table-striped three-table"
            >
                <template #address="{ text, record }">
                    <div class="police-times" @click="handlePoliceDetail(record)">
                        <span class="position"></span>
                    </div>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { onUnmounted, ref, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
    import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
    import $bus from '/@/utils/bus.ts';
    import { earlyWarning } from '/@/utils/busConstant.ts';
    import { useRefresh } from '/@/hooks/autoRefresh';
    import { PAGE_SWITCH } from '/@/hooks/autoRefresh/pageRefreshTime.ts';

    const props = defineProps({
        orgCode: String,
        type: String,
    });
    const tableHeight = ref(0);
    const dataSource = ref([]);
    const pagination = ref({
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: pageChange,
    });
    const timer = ref(null);
    const pages = ref(0); //总页数

    function handlePoliceDetail(record) {
        $bus.emit(earlyWarning, record);
    }

    watch(
        props,
        () => {
            init(1);
            tableHeight.value == 0 && setHeight();
            window.addEventListener('resize', setHeight);
            timer.value && clearInterval(timer.value);
        },
        { immediate: true }
    );

    onUnmounted(() => {
        window.removeEventListener('resize', setHeight);
    });

    function setHeight() {
        let dom = document.querySelector('.inner-screen');
        if (!dom) return;
        tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
    }

    async function init(page) {
        const { pageSize } = pagination.value;
        const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
        if (code == 200) {
            dataSource.value = result.records;
            pagination.value.total = result.total;
            pages.value = result.pages;
            pagination.value.current = page;
        }
    }

    function pageChange(page, pageS) {
        pagination.value.current = page;
        pagination.value.pageSize = pageS;
        init(page);
    }

    function interval() {
        let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
        init(page);
    }

    const { refreshState } = useRefresh(PAGE_SWITCH, () => {
        interval();
    });
    onUnmounted(() => {
        clearInterval(timer.value);
    });
</script>
<style lang="less" scoped>
    .inner-screen {
        width: 100%;
        height: calc(100% - 40px);
        margin: 20px 0;

        .police-times {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer !important;

            .position {
                margin-left: 5px;
                display: inline-block;
                width: 18px;
                height: 18px;
                background: url('/@/assets/img/position.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }

        :deep(.ant-table-thead) {
            display: none !important;
        }

        :deep(.ant-table) {
            background-color: transparent;
        }

        :deep(.ant-table-tbody > tr > td) {
            border-bottom: none;
            padding: 6px 4px;
        }

        :deep(.ant-table-tbody > tr.ant-table-placeholder:hover > td) {
            background-color: transparent !important;
        }

        :deep(.ant-table-row:hover) {
            background-color: transparent;
            color: #ffffff;
        }
    }

    :deep(.ant-table-tbody > .no-white > td) {
        background-color: blue;
    }

    .no-white,
    .no-white:hover > td {
        background-color: blue;
    }

    //奇行
    .ant-table-striped :deep(.table-striped) td {
        background-color: #0a0a0c;
        color: #ffffff;
    }

    //偶行
    .ant-table-striped :deep(.table-default) td {
        color: #ffffff;
        background: none !important;
    }

    //奇行-hover
    :deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
        background-color: #0a0a0c !important;
        color: #ffffff;
    }

    //偶行-hover
    :deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
        color: #ffffff;
        background: none !important;
    }

    // 分页
    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        background-color: #1f2935;
        color: #8291a9;
        border: none;
    }

    :deep(.ant-pagination-item) {
        background-color: #1f2935;
        color: #ffffff;
        border: none;
    }

    // 当前页选中的样式
    :deep(.ant-pagination-item-active) {
        background-color: #0081ff;
    }

    :deep(.ant-pagination-item-active a) {
        color: #ffffff;
    }

    :deep(.ant-pagination-item a) {
        color: #ffffff;
    }

    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        color: #ffffff;
        background-color: #1f2935;
    }

    // 省略样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
        color: #ffffff;
    }

    // 省略鼠标移入样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
        color: rgba(255, 255, 255, 0.4);
    }

    // 下一页
    :deep(.ant-pagination-next .ant-pagination-item-link) {
        background-color: #1f2935;
        color: #8291a9;
        border: none;
    }
</style>