xj-screen/src/components/body-d-left/twoL.vue

<template>
    <div>
        <public-title title="主诉分类" />
        <div class="inner">
            <div class="title">
                <div class="type-check">
                    <span
                        :class="sexIndex === index ? 'select' : 'unSelect'"
                        v-for="(item, index) in sexType"
                        :key="index"
                        @click="handleSelect(index)"
                        >{{ item.name }}</span
                    >
                </div>
                <div class="type-all">
                    <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
                        <a-select-option value="全部数据">全部数据</a-select-option>
                    </a-select>
                </div>
            </div>
            <div class="line-chart" ref="chiefChart"></div>
            <a-spin :spinning="spinning" class="spin"></a-spin>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref, onMounted, watch } from 'vue';
    import PublicTitle from '../publicTitle.vue';
    import * as echarts from 'echarts';
    import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
    import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';

    const { setSpin, spinning } = useSpin();

    const sexIndex = ref(0);
    const chiefChart = ref<HTMLElement>();

    const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
    const selectValue = ref('all');

    function handleSelect(index: number) {
        sexIndex.value = index;
    }

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

    function init() {
        getDepartOption();
        getList();
    }

    async function getDepartOption() {
        const { code, result } = await getDepart({});
        if (code == 200) {
            const arr = result?.map((item) => ({ ...item, label: item?.departName, value: item?.orgCode }));
            selectOptions.value = [{ label: '全部数据', value: 'all' }, ...arr];
        }
    }

    async function getList() {
        setSpin(true);
        try {
            const searchParams = {
                sex: sexType[sexIndex.value].value,
                depart: selectValue.value == 'all' ? '' : selectValue.value,
            };
            const { code, result } = (await complaint(searchParams)) || {};
            setSpin(false);
            if (code != 200) {
                return;
            }
            if (Array.isArray(result) && result.length == 0) {
                return EmptyChart();
            }
            const xData = result.map((item) => item.name);
            const yData = result.map((item) => item.count);
            initChart(xData, yData);
        } catch {
            setSpin(false);
            EmptyChart();
        }
    }

    watch([selectValue, sexIndex], () => {
        getList();
    });

    function EmptyChart() {
        initChart([], []);
    }

    function initChart(xData, ydata) {
        let myChart = echarts.init(chiefChart.value);
        let options = barOption(xData, ydata);
        myChart.setOption(options);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
</script>
<style scoped lang="less">
    .inner {
        position: relative;
        height: calc(100% - 40px);

        .spin {
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .title {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: right;
            padding: 2% 0;

            .type-check {
                color: #ffffff;
                width: 15%;
                display: flex;
                justify-content: space-around;

                span {
                    padding: 0 2%;
                    cursor: pointer;
                    font-size: 16px;
                }

                .select {
                    color: #45a2ff;
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        display: block;
                        width: 100%;
                        left: 0;
                        bottom: -12px;
                        height: 6px;
                        background: url('../../assets/images/light.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .unSelect {
                    color: #a3a4a4;
                }
            }

            .type-all {
                color: #ffffff;
                margin-right: 10px;

                .type-select {
                    width: 120px;
                    color: #008cff;
                }
            }
        }

        .line-chart {
            margin: 0 auto;
            width: 96%;
            height: 80%;
        }
    }
</style>
<style lang="less">
    .ant-select-dropdown {
        background-color: #00152b !important;
        border-right: 1px solid #1b7ef2;
        border-left: 1px solid #1b7ef2;
        border-bottom: 1px solid #1b7ef2;
    }

    .ant-select-item {
        color: #1b7ef2 !important;
    }

    //框背景色
    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
        color: #1b7ef2;
        background-color: transparent !important;
        border: 1px solid #1b7ef2 !important;
    }

    .ant-select-item-option-selected {
        color: #ffffff !important;
    }

    // 选中字体颜色
    .ant-select-selection-item {
        color: #1b7ef2 !important;
    }

    .ant-select-item-option-active {
        background-color: transparent !important;
    }

    .ant-select-item-option-active:hover {
        background-color: #002e64 !important;
    }

    // 箭头颜色
    .ant-select-arrow {
        color: #1b7ef2 !important;
    }

    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
        background-color: #002e64 !important;
    }
</style>