UNION_NSI/target/classes/views/platform/honor/board.html

<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <guava>
        <el-card shadow="never">
            <el-date-picker
                    v-model="startYear"
                    value-format="yyyy"
                    type="year"
                    placeholder="开始年份">
            </el-date-picker>
            <span>至</span>
            <el-date-picker
                    v-model="endYear"
                    value-format="yyyy"
                    type="year"
                    placeholder="结束年份">
            </el-date-picker>
            <el-button icon="el-icon-search" type="primary" @click="doFilter"></el-button>
        </el-card>

        <el-card class="mt10" shadow="never">
            <template #header>
                <el-row type="flex">
                    <el-col :span="12">
                        <vi-title title="年度获奖趋势"></vi-title>
                    </el-col>
                </el-row>
            </template>
            <div id="honor_type_box"></div>
        </el-card>

        <el-row :gutter="20" class="mt10" type="flex">
            <el-col :span="12">
                <el-card shadow="never">
                    <template #header>
                        <vi-title title="个人荣誉奖项"></vi-title>
                    </template>
                    <div id="single_honor_type_box"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="never">
                    <template #header>
                        <vi-title title="个人荣誉奖项级别"></vi-title>
                    </template>
                    <div id="single_honor_level_box"></div>
                </el-card>
            </el-col>
        </el-row>
    </guava>
</div>
<script>
    let linePlot = null
    let singleHonorTypePlot = null
    let singleLevelTypePlot = null

    var vue = new Vue({
        el: '#app',
        mixins: [initTableMixins],
        data() {
            return {
                startYear: null,
                endYear: null,
                honorTypeList: [],
                singleHonorList: [],
                singleLevelList: []
            }
        },
        methods: {
            async getHonorTypeByYear() {
                const resp_data = await $.get('/platform/honor/board/getHonorTypeByYear')
                if(resp_data.code===0){
                    this.honorTypeList = resp_data.data
                }
            },
            renderHonorTypeByYear(data) {
                console.log(data)

                // data = [{
                //     name: "集体荣誉",
                //     num: 4,
                //     year: 2022
                // },{
                //     name: "个人荣誉",
                //     num:10,
                //     year: 2022
                // }]

                if (linePlot) {
                    linePlot.changeData(data)
                } else {
                    linePlot = new G2Plot.Line('honor_type_box', {
                        data,
                        xField: 'year',
                        yField: 'num',
                        seriesField: 'name',
                        legend: {
                            position: 'top',
                        },
                        smooth: true,
                    });
                    linePlot.render()
                }
            },

            async getSingleHonorByYear() {
                const resp_data = await $.get('/platform/honor/board/getSingleHonorByYear')
                if(resp_data.code===0){
                    this.singleHonorList = resp_data.data
                }
            },
            renderSingleHonorByYear(data) {
                if (singleHonorTypePlot) {
                    singleHonorTypePlot.changeData(data)
                } else {
                    singleHonorTypePlot = new G2Plot.Pie('single_honor_type_box', {
                        appendPadding: 10,
                        data,
                        angleField: 'num',
                        colorField: 'name',
                        radius: 0.9,
                        label: {
                            type: 'inner',
                            offset: '-30%',
                            content: ({percent}) => (percent * 100).toFixed(0) + "%",
                            style: {
                                fontSize: 14,
                                textAlign: 'center',
                            },
                        },
                        interactions: [{type: 'element-active'}],
                    })
                    singleHonorTypePlot.render()
                }
            },

            async getSingleLevelByYear() {
                const resp_data = await $.get('/platform/honor/board/getSingleLevelByYear')
                if(resp_data.code===0){
                    this.singleLevelList = resp_data.data
                }
            },
            renderSingleLevelByYear(data) {
                if (singleLevelTypePlot) {
                    singleLevelTypePlot.changeData(data)
                } else {
                    singleLevelTypePlot = new G2Plot.Column('single_honor_level_box', {
                        data,
                        xField: 'name',
                        yField: 'num',
                        position: 'middle',
                        columnStyle: {
                            radius: [20, 20, 0, 0],
                        },
                    })
                    singleLevelTypePlot.render()
                }
            },

            doFilter() {
                if (this.startYear == null) {
                    this.notifyWarning('请输入开始年份')
                    return
                }
                if (this.endYear == null) {
                    this.notifyWarning('请输入结束年份')
                    return
                }
                if (parseInt(this.startYear) > parseInt(moment().format('YYYY'))) {
                    this.notifyWarning('开始年份不能大于当前年份')
                    return
                }
                if (parseInt(this.endYear) > parseInt(moment().format('YYYY'))) {
                    this.notifyWarning('结束年份不能大于当前年份')
                    return
                }
                if (parseInt(this.startYear) > parseInt(this.endYear)) {
                    this.notifyWarning('开始年份不能大于结束年份')
                    return
                }

                const startYear = parseInt(this.startYear)
                const endYear = parseInt(this.endYear)

                const htl = this.honorTypeList.filter(v => {
                    return startYear <= v.year && v.year <= endYear
                })
                console.log(htl)
                this.renderHonorTypeByYear(htl)

                const shl = this.singleHonorList.filter(v => {
                    return startYear <= v.year && v.year <= endYear
                })
                this.renderSingleHonorByYear(shl)

                const sll = this.singleLevelList.filter(v => {
                    return startYear <= v.year && v.year <= endYear
                })
                this.renderSingleLevelByYear(sll)

            }
        },
        async created() {
            this.startYear = (parseInt(moment().format('YYYY')) - 10).toString()
            this.endYear = moment().format('YYYY')
            await this.getHonorTypeByYear()
            await this.getSingleHonorByYear()
            await this.getSingleLevelByYear()
            this.doFilter()
        }
    })
</script>

<!--#
}
#-->