update: 几个弹窗

2024-09-20 13:59:12 +08:00
parent 51af62e164
commit b871eabb08
3 changed files with 486 additions and 0 deletions
@@ -0,0 +1,125 @@
+<template>
+    <Dialog class="phone-dialog" :openVis="visible" width="60%" :title="dialogTitle" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <div v-if="useForm" class="form-container">
+                <Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
+                    <a-form-item label="性别">
+                        <a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList"></a-select>
+                    </a-form-item>
+                </Form>
+            </div>
+            <BasicTable
+                ref="registerTable"
+                class="table-container"
+                :class="[themeType]"
+                :key="visible"
+                :columns="columns"
+                :api="getPhoneList"
+                :apiParams="formState"
+            ></BasicTable>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import { computed, ref, watch } from 'vue';
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
+    import { Form } from 'ant-design-vue';
+    import { SexType, sexTypeList } from '/@/utils/settings.ts';
+    import { getPhoneList } from '/@/views/centralScreen/centralScreen.api.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+
+    const props = defineProps({
+        record: Object,
+        title: String,
+        useForm: Boolean,
+        labelCol: Object,
+        wrapperCol: Object,
+        setting: Object,
+        phoneType: String,
+    });
+    const { themeType } = useTheme();
+    const formItemLayout = {
+        labelCol: {
+            style: { width: '100px' },
+            ...props.labelCol,
+        },
+        wrapperCol: {
+            span: 6,
+            ...props.wrapperCol,
+        },
+    };
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'realName',
+            key: 'realName',
+        },
+        {
+            title: '单位',
+            dataIndex: 'departName',
+            key: 'departName',
+            ellipsis: true,
+        },
+        {
+            title: '部门',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            ellipsis: true,
+        },
+        {
+            title: '性别',
+            dataIndex: 'sex_dictText',
+            key: 'sex_dictText',
+            width: 80,
+        },
+        {
+            title: '时间',
+            dataIndex: 'time',
+            key: 'time',
+        },
+        {
+            title: '电话',
+            dataIndex: 'phone',
+            key: 'phone',
+        },
+    ];
+    const formRecord = ref({
+        sex: SexType.all,
+    });
+    const formState = computed(() => ({
+        ...formRecord.value,
+        dataType: props.setting.dataType,
+        phoneType: props.phoneType,
+        showType: '0',
+    }));
+    const dialogTitle = ref();
+    const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
+    const registerTable = ref();
+    watch(props, () => {
+        registerTable.value?.getRecords();
+        dialogTitle.value = props.title;
+    });
+    defineExpose({
+        openDialog,
+    });
+</script>
+<style scoped lang="less">
+    .phone-dialog {
+        overflow: auto;
+    }
+
+    .form-container {
+        margin: 10px 0;
+
+        :deep(.ant-form-item-label > label) {
+            color: var(--formLabel);
+        }
+    }
+
+    .table-container {
+        margin: 0 10px;
+    }
+</style>
@@ -0,0 +1,92 @@
+<template>
+    <Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
+                <template #address="{ record, column, index }">
+                    <span v-if="record['address']">{{ record?.address }}</span>
+                    <span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
+                </template>
+            </BasicTable>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import { computed, ref, watch, h } from 'vue';
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
+    import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const props = defineProps({
+        record: Object,
+        title: String,
+        useForm: Boolean,
+        labelCol: Object,
+        wrapperCol: Object,
+        setting: Object,
+        phoneType: String,
+    });
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'realName',
+            key: 'realName',
+        },
+        {
+            title: '二级单位',
+            dataIndex: 'orgName2',
+            key: 'orgName2',
+        },
+        {
+            title: '联系电话',
+            dataIndex: 'phone',
+            key: 'phone',
+        },
+        {
+            title: '异常事件',
+            dataIndex: 'eventType_dictText',
+            key: 'eventType_dictText',
+        },
+        {
+            title: '异常值',
+            dataIndex: 'dataValue',
+            key: 'dataValue',
+        },
+        {
+            title: '发生时间',
+            dataIndex: 'warnTime',
+            key: 'warnTime',
+        },
+        {
+            title: '发生地点',
+            dataIndex: 'address',
+            key: 'address',
+            slot: 'address',
+            // customRender: ({ record }) => {
+            //     if (record?.address) {
+            //         return record?.address;
+            //     } else {
+            //         return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
+            //     }
+            // },
+        },
+    ];
+    const formState = computed(() => ({
+        dataType: props.setting.dataType,
+        orgCode: props.setting?.orgCode,
+    }));
+    const { visible, closeDialog, openDialog } = useDialog({ title: props.title });
+    const registerTable = ref();
+    watch(props, () => {
+        registerTable.value?.getRecords();
+    });
+    defineExpose({
+        openDialog,
+    });
+</script>
+<style scoped lang="less">
+    .table-container {
+        margin: 0 10px;
+    }
+</style>
@@ -0,0 +1,269 @@
+<template>
+    <div class="terminal-container common-card" :class="[themeType]">
+        <public-title title="健康终端报警" :themeType="themeType">
+            <template #right>
+                <span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
+            </template>
+        </public-title>
+        <div class="inner">
+            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
+                <div class="item right-top-item" :class="themeType" 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)" title="健康报警员工信息"></span>
+                        <span class="position" @click="sendPosition(item)" title="员工定位"></span>
+                    </div>
+                </div>
+            </vue3-seamless-scroll>
+        </div>
+        <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
+            <template #container>
+                <div class="police-con" :class="[themeType]">
+                    <div class="con-item">
+                        <div>姓名：</div>
+                        <div>{{ userInfo?.realName }}</div>
+                    </div>
+                    <div class="con-item">
+                        <div>二级单位：</div>
+                        <div>{{ userInfo?.orgName1 }}</div>
+                    </div>
+                    <div class="con-item">
+                        <div>手机号码：</div>
+                        <div>{{ userInfo?.phone }}</div>
+                    </div>
+                    <div class="con-item">
+                        <div>异常事件：</div>
+                        <div>{{ userInfo?.eventType_dictText }}</div>
+                    </div>
+                    <div class="con-item">
+                        <div>异常值：</div>
+                        <div>{{ userInfo?.dataValue }}</div>
+                    </div>
+                    <div class="con-item">
+                        <div>发生时间：</div>
+                        <div>{{ userInfo?.warnTime }}</div>
+                    </div>
+                    <div class="con-item">
+                        <div>发生地点：</div>
+                        <div v-if="userInfo?.address">{{ userInfo?.address }} </div>
+                        <div style="color: #eb3636" v-else>{{ userInfo?.gpsErrorMsg }}</div>
+                    </div>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, ref } from 'vue';
+    import { useRouter } from 'vue-router';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+    import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
+    import { Map } from '/@/assets/mapUtils/map.ts';
+    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
+    import { DataType } from '/@/utils/settings.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { message } from 'ant-design-vue';
+
+    const props = defineProps({
+        setting: Object,
+    });
+    const { themeType } = useTheme();
+    const emit = defineEmits(['emit-view-detail']);
+    const router = useRouter();
+    const { setSession, getSession } = useSession();
+    const { RIGHT_KEY1_NEW } = caching;
+
+    const classOption = ref({
+        step: 0.3, // 速度
+    });
+    const openInfor = ref<boolean>(false); //弹窗显示
+    const userInfo = ref({
+        realName: '',
+        orgName1: '',
+        phone: '',
+        eventType_dictText: '',
+        warnTime: '',
+        address: '',
+        dataValue: '',
+    });
+    onMounted(() => {
+        getScrollList();
+    });
+
+    /**
+     * @desc open员工信息
+     */
+    function handlePolice(item) {
+        userInfo.value = item;
+        openInfor.value = true;
+        classOption.value.step = 0;
+    }
+
+    /**
+     * @desc close员工信息
+     */
+    function handlePoliceClose() {
+        openInfor.value = false;
+        classOption.value.step = 0.3;
+    }
+
+    /**
+     * @desc 终端报警
+     * */
+    const scrollList = ref([]);
+
+    async function getScrollList() {
+        try {
+            const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1, orgCode: props.setting?.orgCode });
+            if (code == 200) {
+                setSession(RIGHT_KEY1_NEW, JSON.stringify(result.records));
+                scrollList.value = result.records;
+            }
+        } catch {
+            scrollList.value = JSON.parse(getSession(RIGHT_KEY1_NEW));
+        }
+    }
+
+    function sendPosition(item) {
+        let { lon, lat } = item;
+        if (lon && lat) {
+            Map.createMarker(item, () => {
+                handlePolice(item);
+            });
+        } else {
+            message.warn('暂无经纬度信息！');
+        }
+    }
+
+    function viewDetail() {
+        emit('emit-view-detail');
+    }
+</script>
+<style scoped lang="less">
+    .right-text {
+        font-weight: 100;
+        cursor: pointer;
+        margin-right: 3px;
+        font-size: 18px;
+    }
+
+    .right-text.light {
+        color: #667ecc;
+    }
+
+    .right-text:hover {
+        color: #129bff;
+    }
+
+    .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;
+
+                .time-icon {
+                    display: flex;
+                    align-items: center;
+                }
+
+                .terminal-icon {
+                    margin-left: 15px;
+                    display: inline-block;
+                    width: 18px;
+                    height: 18px;
+                    background-size: 100% 100%;
+                    cursor: pointer;
+                }
+
+                .position {
+                    width: 18px;
+                    height: 18px;
+                    background-size: 100% 100%;
+                    margin-left: 5px;
+                    display: inline-block;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .police-con {
+        padding: 2% 0 2% 5%;
+
+        .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);
+            }
+        }
+    }
+</style>
+<!--<style lang="less">-->
+<!--    .dialog-con {-->
+<!--        background-color: #00152b;-->
+<!--        //  antd表格样式-->
+<!--        .ant-table-thead > tr > th {-->
+<!--            //border-bottom: 1px solid #1e73c2 !important;-->
+<!--        }-->
+
+<!--        .ant-table-body {-->
+<!--            background-color: #00152b !important;-->
+<!--        }-->
+
+<!--        .ant-modal-header {-->
+<!--            border-bottom: none !important;-->
+<!--        }-->
+
+<!--        .ant-table-tbody > tr > td {-->
+<!--            border-bottom: 1px solid #1e73c2 !important;-->
+<!--            background-color: #00152b !important;-->
+<!--            color: #ffffff !important;-->
+<!--        }-->
+
+<!--        .ant-table-tbody > tr.ant-table-row:hover > td,-->
+<!--        .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
+<!--        .ant-table-thead > tr > th {-->
+<!--            background-color: #00152b !important;-->
+<!--            color: #ffffff !important;-->
+<!--        }-->
+
+<!--        .ant-table-cell-scrollbar {-->
+<!--            box-shadow: none !important;-->
+<!--        }-->
+
+<!--        /*-->
+<!--表格滚动条-->
+<!--*/-->
+
+<!--        .ant-table-body::-webkit-scrollbar-thumb {-->
+<!--            border: 4px solid rgba(0, 0, 0, 0);-->
+<!--            height: 6px;-->
+<!--            border-radius: 25px;-->
+<!--            background-clip: padding-box;-->
+<!--            background-color: rgba(30, 115, 194, 0.3);-->
+<!--        }-->
+<!--    }-->
+<!--</style>-->