xj-screen/src/components/secondaryScreen/secondMap/secondMapHooks.ts

import { cloneDeep } from 'lodash-es';
import { onMounted, ref } from 'vue';
import { allSecondaryDeparts } from '/@/components/secondaryScreen/commonApi';

export const watchIcon = new URL('/@/assets/img/watch.png', import.meta.url).href;

export function useDepart() {
    const orgCode = ref();
    const option = ref([]);
    const fieldNames = { label: 'departName', value: 'orgCode' };
    onMounted(() => {
        getOptionData();
    });

    function setOrgCode(val) {
        orgCode.value = val;
    }

    function setOption(data) {
        option.value = data;
        orgCode.value = data[0]?.orgCode;
    }

    async function getOptionData() {
        const { result = [], code } = await allSecondaryDeparts();
        if (code == 200) {
            let res = [...result];
            setOption(res);
        }
    }

    return {
        orgCode,
        setOrgCode,
        option,
        setOption,
        fieldNames,
    };
}

export function useTimeType(t: string) {
    const type = ref(t || '');
    const timeRangeOption = [
        {
            label: '近一周',
            value: 'week',
        },
        {
            label: '近一月',
            value: 'month',
        },
        {
            label: '近一年',
            value: 'year',
        },
    ];
    return {
        type,
        timeRangeOption,
    };
}

export function useFooterTable() {
    const isShowAlarm = ref(false);

    function setIsShowAlarm(type: boolean) {
        isShowAlarm.value = type;
    }

    const footerList = ref([
        {
            name: '单位名称',
            value: '',
            key: 'orgName',
            extData: {},
        },
        {
            name: '单位人数',
            value: '',
            key: 'userCount',
            extData: {},
        },
        {
            name: '佩戴手表人数',
            value: '',
            key: 'allotDeviceNum',
            extData: {},
        },
        {
            name: '近一周活跃人数',
            value: '',
            key: 'sevenDayNum',
            extData: {},
        },
        {
            name: '近一月活跃人数',
            value: '',
            key: 'thirtyDayNum',
            extData: {},
        },
    ]);

    function setFooterList(res: any) {
        const arrList = cloneDeep(footerList.value);
        if (res) {
            arrList.forEach((item) => {
                item.value = res[item.key];
                // if (['sevenDayNum', 'thirtyDayNum'].includes(item.key)) {
                //     item.value = '-';
                // }
                item.extData = res;
            });
        }
        footerList.value = arrList;
    }

    return {
        footerList,
        setFooterList,
        setIsShowAlarm,
        isShowAlarm,
    };
}

export function useAlarmDetail() {
    const detailLeft = ref([
        {
            name: '员工姓名',
            value: '',
            key: 'userName',
        },
        {
            name: '部门名称',
            value: '',
            key: 'thirdDepart',
        },
        {
            name: '手机号码',
            value: '',
            key: 'phone',
        },
        {
            name: '工具编码',
            value: '',
            key: 'watchNo',
        },
        {
            name: '位置',
            value: '',
            key: '',
            customRender: (record) => {
                if (record?.address) {
                    return `${record.address}`;
                } else {
                    return `<span style="color: #eb3636;">${record?.gpsErrorMsg || ''}</span>`;
                }
            },
        },
    ]);
    const detailRight = ref([
        {
            name: '单位名称',
            value: '',
            key: 'secondDepart',
        },
        {
            name: '事件类型',
            value: '',
            key: 'eventType_dictText',
        },
        {
            name: '异常数据',
            value: '',
            key: 'dataValue',
        },
        {
            name: '报警时间',
            value: '',
            key: 'warnTime',
        },
    ]);

    function setDetail(res) {
        if (res) {
            detailLeft.value.forEach((item) => {
                if (item.customRender) {
                    item.value = res;
                } else {
                    item.value = res[item.key];
                }
            });
            detailRight.value.forEach((item) => {
                if (item.customRender) {
                    item.value = res;
                } else {
                    item.value = res[item.key];
                }
            });
        }
    }

    return {
        detailLeft,
        detailRight,
        setDetail,
    };
}

export function useMoveClass() {
    const isShow = ref(false);
    const className = ref('slide-bottom');

    function setIsShow(type: boolean) {
        isShow.value = type;
        className.value = type ? 'slide-top' : 'slide-bottom';
    }

    return {
        isShow,
        className,
        setIsShow,
    };
}

export function useTree() {
    const treeOption = [
        {
            value: 'Chinese delicious food',
            label: '中国美食',
            children: [
                {
                    value: 'key3',
                    label: '月饼',
                },
            ],
        },
        {
            value: 'Russia delicious food',
            label: '俄罗斯美食',
            children: [
                {
                    value: 'key6',
                    label: '红肠',
                },
            ],
        },
    ];
    const orgCode = ref([]);
    return {
        orgCode,
        treeOption,
    };
}

export const columns = [
    {
        title: '员工姓名',
        dataIndex: 'realName',
        align: 'center',
        key: 'realName',
    },
    {
        title: '单位名称',
        dataIndex: 'orgName',
        align: 'center',
        key: 'orgName',
        ellipsis: true,
    },
    {
        title: '部门名称',
        dataIndex: 'orgName1',
        align: 'center',
        key: 'orgName1',
        ellipsis: true,
    },
    {
        title: '工具编码',
        dataIndex: 'watchNo',
        align: 'center',
        key: 'watchNo',
        ellipsis: true,
    },
    {
        title: '手机号码',
        dataIndex: 'phone',
        align: 'center',
        key: 'phone',
        ellipsis: true,
    },
    {
        title: '心率（次/分）',
        dataIndex: 'heartRate',
        align: 'center',
        key: 'heartRate',
    },
    {
        title: '血氧（%）',
        dataIndex: 'spo2',
        align: 'center',
        key: 'spo2',
    },
    {
        title: '压力',
        dataIndex: 'stress',
        align: 'center',
        key: 'stress',
    },
    {
        title: '睡眠',
        dataIndex: 'sleep',
        align: 'center',
        key: 'sleep',
    },
    {
        title: '体温（℃）',
        dataIndex: 'temp',
        align: 'center',
        key: 'temp',
    },
    {
        title: '锻炼（千卡）',
        dataIndex: 'exercise',
        align: 'center',
        key: 'exercise',
    },
    {
        title: '步数（米）',
        dataIndex: 'workout',
        align: 'center',
        key: 'workout',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        key: 'operation',
        fixed: 'right',
        width: 80,
    },
];

export function useChangeTable() {
    const refresh = ref(true);

    function setRefresh() {
        refresh.value = !refresh.value;
    }

    return {
        refresh,
        setRefresh,
    };
}

export function infoContent(res) {
    return `
        <div class="watch-modal">
         <div class="modal-row">
                <span class="label">单位名称：</span>
                <span class="text">${res?.orgName || ''}</span>
            </div>
            <div class="modal-row">
                <span class="label">部门名称：</span>
                <span class="text">${res?.deptName || ''}</span>
            </div>
            <div class="modal-row">
                <span class="label">部门人数：</span>
                <span class="text">${res?.userCount}</span>
            </div>
            <div class="modal-row">
                <span class="label">佩戴手表人数：</span>
                <span class="text">${res?.allotDeviceNum}</span>
            </div>
            <div class="modal-row">
                <span class="label">近一周活跃人数：</span>
                <span class="text">${res?.sevenDayNum}</span>
            </div>
            <div class="modal-row">
                <span class="label">近一月人数：</span>
                <span class="text">${res?.thirtyDayNum}</span>
            </div>
        </div>
    `;
}