mailbox-lan-vue/src/views/home/components/DataStatistics.vue

<template>
    <h1>数据统计</h1>
    <el-divider />
    <el-row>
        <el-col :span="8">
            <h1>办结率排名</h1>
            <div>
                <div
                    v-for="(item, index) in completeList"
                    :key="index"
                    class="flex bar-item"
                >
                    <label>{{ item.name }}</label>
                    <div class="bar-box">
                        <div :style="{ width: item.rate }" class="bar">
                            <span>{{ item.rate }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <h1>解决率排名</h1>
            <div>
                <div
                    v-for="(item, index) in resolvedList"
                    :key="index"
                    class="flex bar-item"
                >
                    <label>{{ item.name }}</label>
                    <div class="bar-box">
                        <div :style="{ width: item.rate }" class="bar">
                            <span>{{ item.rate }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <h1>满意率排名</h1>
            <div>
                <div
                    v-for="(item, index) in satisfiedList"
                    :key="index"
                    class="flex bar-item"
                >
                    <label>{{ item.name }}</label>
                    <div class="bar-box flex">
                        <div
                            :style="{
                                width: item.rate,
                                background: getColor(item.ratenumber),
                            }"
                            class="bar"
                        >
                            <span>{{ item.rate }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <h1 style="margin-top: 20px">近15日来信趋势</h1>
    <div>
        <v-charts style="height: 350px" :option="options" :autoresize="true" />
    </div>
</template>
<script setup>
import { threeRate, mailTrend } from "@/api/datascreen";
import vCharts from "vue-echarts";

const completeList = ref([]);
const resolvedList = ref([]);
const satisfiedList = ref([]);
threeRate().then((data) => {
    completeList.value = data.completeList;
    resolvedList.value = data.resolvedList;
    satisfiedList.value = data.satisfiedList;
});

function getColor(val) {
    if (val >= 80) {
        return "linear-gradient(270deg, #A2D203 0%, #87B502 100%)";
    }
    if (val >= 70) {
        return "linear-gradient(90deg, #FA8721 0%, #FFC927 100%)";
    }
    return "linear-gradient(90deg, #FD0D0D 0%, #FF8C45 100%)";
}

const options = ref({
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: [],
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            data: [],
            type: "line",
            smooth: true,
            lineStyle: {
                color: "#0D4AFF",
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#162582'
                        }
                    },
                },
            },
            areaStyle: {
                color: "#C8E4FB",
            },
        },
    ],
});

const mailTrendMap = ref({});

mailTrend({
    day: 15,
}).then((data) => {
    mailTrendMap.value = data;
    options.value.xAxis.data = data.dayXList;
    options.value.series[0].data = data.dayYList;
});
</script>
<style lang="scss" scoped>
.el-divider {
    margin: 16px 0;
}
.bar-item {
    --bar-height: 15px;
    --lable-width: 74PX;
    line-height: var(--bar-height);
    margin-bottom: 10px;
    margin-right: 38px;
    label {
        width: var(--lable-width);
        color: var(--primary-color);
        font-weight: bold;
    }
    .bar-box {
        height: var(--bar-height);
        width: calc(100% - var(--lable-width));
        .bar {
            height: 100%;
            background: linear-gradient(270deg, #a2d203 0%, #87b502 100%);
            position: relative;
            span {
                position: absolute;
                right: -30px;
                color: var(--primary-color);
            }
        }
    }
}
</style>