yxy/web/src/views/backend/dashboard.vue

<template>
    <div class="wrapper">
        <div class="main">
            <el-row class="main-top" :gutter="20">
                <!-- 仪器总数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Member registration') }}</div>
                                <div class="title-center">{{ dbdata.count }} <i class="fa fa-level-up"
                                                                                aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage=dbdata.count :format="format" :width="60"
                                             :color="colors"/>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 总价值 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Attachment uploading') }}</div>
                                <div class="title-center">{{ dbdata.value }}<i class="fa fa-level-up"
                                                                               aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage="83" :format="format" :width="60"
                                             :color="colors"/>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 借出数量 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Total number of members') }}</div>
                                <div class="title-center">{{ dbdata.lent_number }} <i class="fa fa-level-up"
                                                                                      aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage=dbdata.lent_number :format="format"
                                             :width="60" :color="colors"/>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 维修数量 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Module downloads') }}</div>
                                <div class="title-center">{{ dbdata.repair_number }} <i class="fa fa-level-up"
                                                                                        aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage=dbdata.repair_number :format="format"
                                             :width="60" :color="colors"/>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="main-center" :gutter="20">
                <!-- 欢迎区 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="card-message" shadow="hover">
                        <div class="msg-title-box">
                            <h4 class="title">{{ t('dashboard.Wellcom Back') }}, {{ adminInfo.nickname }}!!</h4>
                            <p class="msg">
                                {{ t('dashboard.Notice') }}
                            </p>
                        </div>
                        <div class="wellcom-div"></div>
                    </el-card>
                </el-col>
                <!-- 仪器借取数量 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card class="center-card" shadow="hover">
                        <h6>{{ t('dashboard.Attachment Downloads') }}</h6>
                        <div class="view-column" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <!-- 仪器类型比例 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="center-card" shadow="hover">
                        <h6 class="user-source">{{ t('dashboard.Source Of User') }}</h6>
                        <div class="view-pie" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
            </el-row>
            `                <!-- <el-row class="main-slide" :gutter="20">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12">
                        <el-card shadow="hover">
                            <div class="slide-box">
                                <el-col :span="12">
                                    <div class="slide-box-title">
                                        <i class="fa fa-file-archive-o" aria-hidden="true"></i> ZIP{{ t('dashboard.Export') }}
                                    </div>
                                    <h5>1,245</h5>
                                </el-col>
                                <el-col :span="12"
                                    ><el-progress :text-inside="true" :stroke-width="24" :percentage="52" status="success" color="#188df0"
                                /></el-col>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="12">
                        <el-card shadow="hover">
                            <div class="slide-box">
                                <el-col :span="12">
                                    <div class="slide-box-title"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF{{ t('dashboard.Export') }}</div>
                                    <h5>1,872</h5>
                                </el-col>
                                <el-col :span="12"><el-progress :text-inside="true" :stroke-width="24" :percentage="73" status="success" /></el-col>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>` -->
            <el-row class="main-bottom" :gutter="20">
                <!-- 用户信息-->
                <el-col :xs="24" :sm="24" :md="12" :lg="6">
                    <el-card class="bottom-card" shadow="hover">
                        <h6>{{ t('dashboard.Trading Volume Report') }}</h6>
                        <div class="bottom-reports">
                            <div>{{ t('dashboard.Available balance') }}</div>
                            <h3>{{ dbdata.userinfo['用户总数'] }} </h3>
                            <div class="reports-more">
                                <div class="color-info">{{ t('dashboard.BUY THIS MONTH') }}</div>
                                <h5>{{ dbdata.userinfo['教职工'] }}</h5>
                                <div class="color-info">{{ t('dashboard.SELL THIS MONTH') }}</div>
                                <h5>{{ dbdata.userinfo['学生'] }}</h5>
                            </div>
                            <el-button class="button-more" type="primary" @click="toadmin">{{
                                    t('dashboard.See More')
                                }}
                            </el-button>
                        </div>
                    </el-card>
                </el-col>
                <!-- 仪器借用排行 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="6">
                    <el-card class="bottom-card" shadow="hover">
                        <h6>{{ t('dashboard.Membership Growth') }}</h6>
                        <div class="bottom-content">
                            <div v-for="(data, index) in dbdata.q">
                                <el-row class="content-info" align="middle" justify="space-between">
                                    <el-col :span="15">
                                        <div class="info-circle circle-orange"></div>
                                        <span class="info-title">{{ index }}</span></el-col
                                    >
                                    <el-col :span="9">
                                        <el-progress :percentage=data :format="format"/>
                                    </el-col>
                                    <el-divider/>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <!-- 访问增长量 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12"
                >
                    <el-card class="bottom-card" shadow="hover">
                        <h6>{{ t('dashboard.Access Growth') }}</h6>
                        <div class="visitor-box" :ref="chartRefs.set"></div
                        >
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useTemplateRefsList} from '@vueuse/core'
import * as echarts from 'echarts'
import {onMounted, nextTick, reactive, onActivated, onBeforeMount, watch} from 'vue'
import {useNavTabs} from '/@/stores/navTabs'
import {useAdminInfo} from '/@/stores/adminInfo'
import {useI18n} from 'vue-i18n'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import createAxios from '/@/utils/axios'

var dbdata = ref('')
await createAxios({
        url: '/api/ScreenData/getdata',
        method: 'get',
    },
    {
        loading: true,

   }
).then(async (val: any) => {

    dbdata.value = val.data
})

const router  = useRouter()
const  toadmin = () =>{
    router .push('/admin/auth/admin');
}
const format = (percentage) => (percentage === 10000 ? 'Full' : `${percentage}`)
const navTabs = useNavTabs()
const adminInfo = useAdminInfo()

const {t} = useI18n()
const state: {
    charts: any[]
} = reactive({
    charts: [],
})

const chartRefs = useTemplateRefsList<HTMLDivElement>()

const colors = [
    {color: '#f56c6c', percentage: 20},
    {color: '#e6a23c', percentage: 40},
    {color: '#5cb87a', percentage: 60},
    {color: '#1989fa', percentage: 80},
    {color: '#6f7ad3', percentage: 100},
]

const initUserGrowthChart = () => {
    const userGrowthChart = echarts.init(chartRefs.value[0] as HTMLElement)
    // prettier-ignore
    let dataAxis = [
        t('dashboard.Jan'), t('dashboard.Feb'), t('dashboard.Mar'), t('dashboard.Apr'), t('dashboard.May'), t('dashboard.Jun')
        , t('dashboard.Jul'), t('dashboard.Aug'), t('dashboard.Sept'), t('dashboard.Oct'), t('dashboard.Nov'), t('dashboard.Jan'),];
    // prettier-ignore
    let data = [dbdata.value.mq['01'], dbdata.value.mq['02'], dbdata.value.mq['03'], dbdata.value.mq['04'], dbdata.value.mq['05'],
        dbdata.value.mq['06'], dbdata.value.mq['07'], dbdata.value.mq['08'], dbdata.value.mq['09'], dbdata.value.mq['10'], dbdata.value.mq['11'], dbdata.value.mq['12']];
    let yMax = 500
    let dataShadow = []

    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
    }

    const option = {
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff',
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            z: 10,
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#999',
            },
        },
        dataZoom: [
            {
                type: 'inside',
            },
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'},
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'},
                        ]),
                    },
                },
                data: data,
            },
        ],
    }

    // Enable data zoom when user click bar.
    const zoomSize = 6
    userGrowthChart.on('click', function (params) {
        // console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        userGrowthChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
        })
    })
    userGrowthChart.setOption(option)
    state.charts.push(userGrowthChart)
}

const initUserSource = () => {
    const userSource = echarts.init(chartRefs.value[1] as HTMLElement)
    const option = {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: '5%',
            left: 'center',
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: t('dashboard.Source details'),
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    color: '#73767a',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold',
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    {value: dbdata.value.a['水准仪'], name: t('dashboard.sz')},
                    {value: dbdata.value.a['RTK'], name: t('dashboard.rtk')},
                    {value: dbdata.value.a['全站仪'], name: t('dashboard.qzy')},
                    {value: dbdata.value.a['无人机'], name: t('dashboard.wrj')},
                    {value: dbdata.value.a['配件及其他'], name: t('dashboard.Other')},
                ],
            },
        ],
    }
    userSource.setOption(option)
    state.charts.push(userSource)
}

const initUserAdd = () => {
    const userAdd = echarts.init(chartRefs.value[2] as HTMLElement)
    const option = {
        xAxis: {
            type: 'category',
            data: [
                t('dashboard.Monday'),
                t('dashboard.Tuesday'),
                t('dashboard.Wednesday'),
                t('dashboard.Thursday'),
                t('dashboard.Friday'),
                t('dashboard.Saturday'),
                t('dashboard.Sunday'),
            ],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
            },
        ],
    }
    userAdd.setOption(option)
    state.charts.push(userAdd)
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.charts) {
            state.charts[key].resize()
        }
    })
}

onMounted(() => {
    initUserGrowthChart()
    initUserSource()
    initUserAdd()
    window.addEventListener('resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
    window.removeEventListener('resize', echartsResize)
})

onActivated(() => {
    echartsResize()
})
watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
.wrapper {
    margin: 30px;

    .ba-card-border {
        // border style
        border: 1px;
        border-style: dashed;
        border-color: #e9e6e1;
        border-radius: 0.75rem;
    }

    .main {
        .main-top {
            > * {
                margin-top: 1rem;
                max-width: 100%;
            }

            .top-card {
                @extend .ba-card-border;
                --el-card-padding: 2rem;
                display: flex;
                flex-direction: column;

                .title-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;

                    .title-top {
                        font-size: var(--el-font-size-extra-small);
                    }

                    .title-center {
                        font-size: 2rem;
                        font-weight: bold;

                        i {
                            color: #9399a1;
                            font-size: var(--el-font-size-extra-small);
                        }
                    }
                }

                .top-progress {
                    display: flex;
                    justify-content: start;
                }
            }
        }

        .main-center {
            margin-top: 1rem;

            > * {
                margin-top: 1rem;
            }

            .card-message {
                height: 100%;
                @extend .ba-card-border;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;

                :deep(.el-card__body) {
                    padding: 0;
                }

                .msg-title-box {
                    margin-bottom: 8rem;
                    padding: 2rem 4rem 0rem 3rem;

                    .title {
                        color: var(--el-text-color-primary);
                        font-size: 2rem;
                        text-align: center;
                    }

                    .msg {
                        color: var(--el-text-color-primary);
                        text-align: center;
                        margin-top: 1rem;
                    }
                }

                .wellcom-div {
                    margin-top: 2rem;
                    width: 100%;
                    position: relative;
                    text-align: center;
                    background: url('/@/assets/ripple.gif') 100% 40% no-repeat;
                    height: 50px;
                }
            }

            .center-card {
                @extend .ba-card-border;
                --el-card-padding: 25px 15px 15px 20px;
                font-weight: 600;
                height: 100%;

                .user-source {
                    margin-bottom: 20px;
                }

                .view-column {
                    height: 30rem;
                }

                .view-pie {
                    height: 30rem;
                }
            }
        }

        .main-slide {
            margin-top: 1rem;

            > * {
                margin-top: 1rem;
            }

            .el-card {
                @extend .ba-card-border;
                height: 8rem;
                height: 100%;
            }

            :deep(.el-card__body) {
                height: 100%;
            }

            .slide-box {
                display: flex;
                align-items: center;
                height: 100%;
                text-align: center;

                .slide-box-title {
                    display: inline;
                    font-size: var(--el-font-size-medium);
                    margin-right: 0.5rem;
                }
            }
        }

        .main-bottom {
            margin-top: 1rem;

            > * {
                margin-top: 1rem;
            }

            .bottom-card {
                height: 100%;
                @extend .ba-card-border;
                --el-card-padding: 25px 15px 15px 20px;

                :deep(.el-card__body) {
                    height: 100%;
                }

                .bottom-reports {
                    margin: 4rem 1.5rem 0 1.5rem;
                    font-size: var(--el-font-size-medium);

                    h3 {
                        margin-top: 1rem;
                    }

                    h5 {
                        margin: 0.5rem 0 1rem 0;
                    }

                    .reports-more {
                        margin-top: 2rem;

                        .color-info {
                            color: var(--el-color-info);
                            font-size: var(--el-font-size-medium);
                        }
                    }

                    .button-more {
                        width: 100%;
                        margin-top: 1rem;
                    }
                }

                .bottom-content {
                    margin: 4rem 1.5rem 0 1.5rem;

                    .content-info {
                        .info-circle {
                            width: 0.8rem;
                            height: 0.8rem;
                            border-radius: 50%;
                            display: inline-block;
                        }

                        .info-title {
                            margin-left: 0.5rem;
                        }

                        :deep(.el-progress__text) {
                            min-width: 0;
                        }

                        .circle-orange {
                            background-color: orange;
                        }

                        .circle-violet {
                            background-color: #c507f5;
                        }

                        .circle-blue {
                            background-color: blue;
                        }

                        .circle-green {
                            background-color: green;
                        }

                        .circle-silver {
                            background-color: silver;
                        }
                    }
                }

                .visitor-box {
                    height: 400px;
                }
            }
        }
    }
}

h3 {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
}

h5 {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.2;
}

h6 {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 600;
}

// 暗黑样式
@at-root .dark {
    .ba-card-border {
        border-color: #353535;
    }

    .wellcom-div {
        background: none !important;
    }
}
</style>