xj-screen/src/components/body-d-right/oneR.vue

<template>
    <div class="terminal-container">
        <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
        <div class="inner">
            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
                <div class="item" v-for="(item, i) in scrollList" :key="i">
                    <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
                    <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
                    <div class="time-icon">
                        <span>{{ item?.warnTime }}</span>
                        <span class="terminal-icon" @click="handlePolice(item)"></span>
                        <span class="position" @click="sendPosition(item)"></span>
                    </div>
                </div>
            </vue3-seamless-scroll>
        </div>
        <Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
            <template #container>
                <div class="dialog-con">
                    <a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />
                </div>
            </template>
        </Dialog>
        <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
            <template #container>
                <div class="police-con">
                    <div class="con-item">
                        <span>姓名：</span>
                        <span>{{ userInfo?.realName }}</span>
                    </div>
                    <div class="con-item">
                        <span>二级单位：</span>
                        <span>{{ userInfo?.orgName1 }}</span>
                    </div>
                    <div class="con-item">
                        <span>手机号码：</span>
                        <span>{{ userInfo?.phone }}</span>
                    </div>
                    <div class="con-item">
                        <span>异常事件：</span>
                        <span>{{ userInfo?.eventType_dictText }}</span>
                    </div>
                    <div class="con-item">
                        <span>发生时间：</span>
                        <span>{{ userInfo?.warnTime }}</span>
                    </div>
                    <div class="con-item">
                        <span>发生地点：</span>
                        <span>{{ userInfo.address }}</span>
                    </div>
                </div>
            </template>
        </Dialog>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import $bus from '/@/utils/bus.ts';
    import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
    import PublicTitle from '/@/components/publicTitle.vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';

    const classOption = ref({
        step: 0.3, // 速度
    });
    const open = ref<boolean>(false);
    const openInfor = ref<boolean>(false);
    const userInfo = ref({
        realName: '',
        orgName1: '',
        phone: '',
        eventType_dictText: '体温异常',
        warnTime: '2023-11-23 16:23',
        address: '陕西省西安市',
    });

    const dataSource = ref([
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
    ]);

    function handleDialog() {
        open.value = true;
    }

    function handleClose() {
        open.value = false;
    }

    /**
     * @desc open员工信息
     */
    function handlePolice(item) {
        userInfo.value = item;
        console.log('item', item);
        openInfor.value = true;
        classOption.value.step = 0;
    }

    /**
     * @desc close员工信息
     */
    function handlePoliceClose() {
        openInfor.value = false;
        classOption.value.step = 0.3;
    }

    onMounted(() => {
        getScrollList();
    });

    /**
     * @desc 终端报警
     * */
    const scrollList = ref([]);

    async function getScrollList() {
        const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
        if (code == 200) {
            scrollList.value = result.records;
        }

        console.log('dd', result);
    }

    function sendPosition(item) {
        let { lon, lat } = item;
        if (lon && lat) {
            $bus.emit('sendPosition', item);
        }
    }
</script>
<style scoped lang="less">
    .inner {
        height: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: center;

        .scroll {
            width: 98%;
            height: 88%;
            overflow: hidden;

            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 3% 0;

                .fixed-width {
                    display: inline-flex;
                    width: 100px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                span {
                    color: #ffffff;
                    font-size: 16px;
                }

                .time-icon {
                    display: flex;
                    align-items: center;
                }

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

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

    .dialog-con {
        background-color: #00152b;
        border: 1px solid #129bff;
    }

    .police-con {
        color: #ffffff;
        background-color: #00152b;
        border: 1px solid #129bff;
        padding: 2% 0 2% 5%;

        .con-item {
            padding: 1.3% 0;

            span:nth-child(1) {
                font-weight: bold;
                display: inline-block;
                width: 20%;
                text-align: right;
            }

            span:nth-child(2) {
                padding-left: 2%;
            }
        }
    }
</style>