xj-screen/src/views/indexSun/indexSun.ts

import * as echarts from 'echarts';
import { legend1, legend2, legend3, legend4, legend5 } from '/@/components/xianMap/xianMapHooks.ts';
import { SexType, sexTypeList } from '/@/utils/settings.ts';
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
export const legend2 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
export function getClassCharts(dx, dy) {
    return {
        grid: {
            top: 40,
            bottom: 40,
            left: '60',
        },
        xAxis: {
            type: 'category',
            data: dx,
            axisTick: {
                show: false,
                lineStyle: {
                    color: 'rgba(101, 198, 231, .1)',
                },
            },
            axisLabel: {
                color: '#C9DAFF',
                fontSize: 12,
            },
            axisLine: {
                lineStyle: {
                    color: '#65C6E7', // 设置轴线颜色为红色
                },
            },
        },
        yAxis: {
            type: 'value',
            name: '次数',
            // nameLocation: 'end', // 将单位名称位置设置为起始位置
            // nameGap: 10,
            // nameRotate: 0, // 设置旋转角度，0 表示水平
            nameTextStyle: {
                fontSize: 12,
                color: '#65C6E7',
                left: 100,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(101, 198, 231, .1)',
                    width: 1,
                    type: 'solid',
                },
            },
            interval: 25, // 步长
            min: 0, // 起始 - 设置y轴刻度的最小值
            max: 100, // 终止 - 设置y轴刻度的最大值
            axisLabel: {
                color: '#65C6E7',
                formatter: function (value, index) {
                    return value;
                },
            },
        },
        series: [
            {
                data: dy.map((item) => {
                    return {
                        value: item,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#5ABFFF' },
                                { offset: 0.2, color: 'rgba(30, 166, 253, .5)' },
                                { offset: 0.5, color: 'rgba(30, 166, 253, .1)' },
                                { offset: 0.8, color: 'rgba(30, 166, 253, .5)' },
                                { offset: 1, color: '#5ABFFF' },
                            ]),
                            borderColor: '#51caf5', // 黑色边框
                            borderWidth: item ? 1 : 0,
                        },
                    };
                }),
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签显示在柱子顶部
                    color: '#51caf5', // 设置字体颜色
                    fontSize: 12, // 设置字体大小
                },
                type: 'bar',
                barWidth: 18,
            },
        ],
    };
}
export enum TabType {
    all = '', //所有资源
    youTianYiYuan = '1', //油田医院
    jianKangXiaoWu = '2', //健康小屋
    jiuHuChe = '5', //救护车
}
export const tabList = [
    {
        name: '所有资源',
        type: TabType.all,
    },
    {
        name: '健康小屋',
        type: TabType.jianKangXiaoWu,
    },
    {
        name: '油田医院',
        type: TabType.youTianYiYuan,
    },
    {
        name: '救护车',
        type: TabType.jiuHuChe,
    },
    {
        name: '急救路线',
    },
];
export const legendList = [
    { img: legend2, text: '健康小屋', color: '#1BEFF6' },
    { img: legend1, text: '油田医院', color: '#D86AF7' },
    { img: legend3, text: '救护车', color: '#EE7E31' },
];

export function infoContent(res) {
    return `
        <div class="modal-box">
            <div class="modal-item">
                <span class="item-one">单位：</span>
                <span class="item-two">${res.orgName ? res.orgName : '--'}</span>
            </div>
            <div class="modal-item">
                <span class="item-one">关爱人数：</span>
                <span class="item-two">${res.loveNum ? res.loveNum : '--'}</span>
            </div>
            <div class="modal-item">
                <span class="item-one">地点：</span>
                <span class="item-two">${res.name ? res.name : '--'}</span>
            </div>
        <div class="modal-btn">
            <div class="view-btn viewBtn" id='${JSON.stringify(res)}'>查看详情</div>
        </div>
    </div> `;
}

const columns1 = [
    {
        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 columns2 = [
    {
        title: '被救助人',
        dataIndex: 'realName',
        key: 'realName',
    },
    {
        title: '单位',
        dataIndex: 'realName',
        key: 'realName',
    },
    {
        title: '部门',
        dataIndex: 'realName',
        key: 'realName',
    },
    {
        title: '性别',
        dataIndex: 'realName',
        key: 'realName',
    },
    {
        title: '救助方式',
        dataIndex: 'realName',
        key: 'realName',
    },
    {
        title: '救助时间',
        dataIndex: 'realName',
        key: 'realName',
    },
    {
        title: '联系电话',
        dataIndex: 'realName',
        key: 'realName',
    },
];

const fromList = [
    {
        label: '姓名',
        field: 'realName',
        type: 'input',
        placeholder: '请输入姓名',
        defaultValue: '',
    },
    {
        label: '性别',
        field: 'sex',
        type: 'select',
        placeholder: '请选择性别',
        options: sexTypeList,
        defaultValue: SexType.all,
    },
];

const fromList2 = [
    {
        label: '救助人',
        field: 'realName',
        type: 'input',
        placeholder: '请输入',
        defaultValue: '',
    },
    {
        label: '性别',
        field: 'sex',
        type: 'select',
        placeholder: '请选择性别',
        options: sexTypeList,
        defaultValue: SexType.all,
    },
    {
        label: '救助方式',
        field: 'sex',
        type: 'select',
        placeholder: '请选择性别',
        options: sexTypeList,
        defaultValue: SexType.all,
    },
];

export const columns = [columns1, columns2];

export const fromLists = [fromList, fromList2];