xj-screen/src/views/indexSun/oneR.vue

<template>
    <div class="one-r-box">
        <div class="title">
            <span>健康终端报警</span>
            <span class="look-view" @click="handleView">查看详情</span>
        </div>
        <div class="content">
            <div class="content-item">
                <template v-if="scrollList.length > 0">
                    <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="5" v-bind="{ step: step }">
                        <div class="item-d" v-for="(item, index) in scrollList" :key="index">
                            <div>{{ item.realName }}</div>
                            <div style="color: #f6ff00">{{ item.eventType_dictText }}{{ item.dataValue ? `(${item.dataValue})` : '' }}</div>
                            <div>{{ item.warnTime }}</div>
                            <div class="item-d-img">
                                <img :src="pointPng" alt="" @click="handlePolice(item)" />
                                <img :src="addressPng" alt="" @click="sendPosition(item)" />
                            </div>
                        </div>
                    </vue3-seamless-scroll>
                </template>
                <template v-else>
                    <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
                        <Empty :description="'暂无数据'" />
                    </div>
                </template>
            </div>
        </div>
        <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
            <template #container>
                <div class="police-con" :class="[themeType]">
                    <Row style="font-size: 14px; font-weight: bold"> 个人信息 </Row>
                    <Row>
                        <Col :span="8">姓名：{{ userInfo?.realName || '--' }}</Col>
                        <Col :span="8">性别：{{ userInfo?.sex_dictText || '--' }}</Col>
                        <Col :span="8">年龄：{{ userInfo?.age || '--' }}</Col>
                    </Row>
                    <Row>
                        <Col :span="8">二级单位：{{ userInfo?.orgName2 || '--' }}</Col>
                        <Col :span="8">部门：{{ userInfo?.orgName || '--' }}</Col>
                        <Col :span="8">手机号码：{{ userInfo?.phone || '--' }}</Col>
                    </Row>
                    <Row style="font-size: 14px; font-weight: bold"> 健康信息 </Row>
                    <Row> 异常事件：{{ userInfo?.eventType_dictText || '--' }} </Row>
                    <Row>
                        <Col :span="8">异常值：{{ userInfo?.dataValue || '--' }}</Col>
                        <Col :span="16">发生时间：{{ userInfo?.warnTime || '--' }}</Col>
                    </Row>
                    <div style="display: flex">
                        <div>发生地点：</div>
                        <div style="padding-left: 10px; display: flex; overflow-wrap: anywhere" :style="{ color: userInfo?.address || 'red' }">
                            {{ userInfo?.address || userInfo?.gpsErrorMsg || '--' }}
                        </div>
                    </div>
                </div>
            </template>
        </Dialog>
    </div>
</template>
<script setup lang="ts">
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
    import { Empty, message } from 'ant-design-vue';
    import { ref, onMounted, watch } from 'vue';
    import pointPng from '/@/assets/indexSun/point.png';
    import addressPng from '/@/assets/indexSun/address.png';
    import { oneRApi } from '/@/views/indexSun/indexSun.api.ts';
    import { Row, Col } from 'ant-design-vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { Map } from '/@/assets/mapUtils/map.ts';

    const { themeType } = useTheme();
    const step = ref(0.2);
    const scrollList = ref<any[]>([]);
    const openInfor = ref<boolean>(false); //弹窗显示
    const userInfo = ref({
        realName: '',
        orgName1: '',
        phone: '',
        eventType_dictText: '',
        warnTime: '',
        address: '',
        dataValue: '',
    });

    const props = defineProps({
        bKey: {
            type: Number,
            default: () => 0,
        },
    });

    const emit = defineEmits(['handleView', 'showReset']);
    onMounted(() => {
        getList();
    });

    watch(props, () => {
        getList();
    });
    function getList() {
        oneRApi({}).then((res) => {
            if (res.code == 200) {
                scrollList.value = res.result.records;
            }
        });
    }
    function handlePolice(item) {
        userInfo.value = item;
        openInfor.value = true;
        step.value = 0;
    }
    function handlePoliceClose() {
        openInfor.value = false;
        step.value = 0.2;
    }
    function sendPosition(item) {
        let { lon, lat } = item;
        if (lon && lat) {
            Map.createMarker(item, () => {
                handlePolice(item);
            });
            emit('showReset');
        } else {
            message.warn('暂无经纬度信息！');
        }
    }
    function handleView() {
        emit('handleView');
    }
</script>
<style lang="less" scoped>
    .one-r-box {
        background: rgba(8, 75, 100, 0.2);
        display: flex;
        flex-direction: column;
        letter-spacing: 0px;
        .title {
            height: 40px;
            border-radius: 14px 14px 0 0;
            font-weight: bold;
            font-size: 20px;
            letter-spacing: 2px;
            color: #ffffff;
            line-height: 40px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
            .look-view {
                font-size: 14px;
                cursor: pointer;
            }
        }
        .content {
            padding: 10px 20px;
            height: calc(100% - 40px);
            .content-item {
                height: 100%;
                overflow: hidden;
                .item-d {
                    border-bottom: 1px solid #0076b4;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    color: #ffffff;
                    justify-content: space-between;
                    font-size: 14px;
                    cursor: pointer;
                    .item-d-img {
                        img {
                            display: inline-block;
                            width: 24px;
                            height: 24px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

    .police-con {
        padding: 2% 5% 2% 5%;
        display: grid;
        color: #ffffff;

        .con-item {
            padding: 1.3% 0;
            display: flex;

            div:nth-child(1) {
                font-weight: bold;
                width: 100px;
                text-align: right;
            }

            div:nth-child(2) {
                width: calc(100% - 100px);
            }
        }
    }
    .ant-row {
        margin-bottom: 10px;
    }
</style>