Bonus-AI-LargeScreen/src/views/Violation/pieVioResultCount.vue

<template>
    <div class="pieBoxVioResultCount">
        <div class="pieVioResultCount" ref="pieVioResultCount"></div>
        <div class="pieTextBoxVioResultCount">
            <div class='pieTextVioResultCount'>
                识别正确数
            </div>
            <div class='pieTextVioResultCount'>
                识别错误数
            </div>
        </div>
    </div>
</template>

<script>
import { init, graphic } from 'echarts'
import { getPieData } from "@/api/Violation/Violation.js";


function roundToTwo(num) {
    return tmp_num = num.toFixed(2).toString();

}

export default {
    name: 'pieVioResultCount',
    data() {
        return {
            pieOneChart: null,
            pieEntityNameValue: {
                pieright: '',
                pieerror: ''
            }
        }
    },
    mounted() {
        this.getPieDataVio();

    },
    created() {
        this.interval_VioPie = setInterval(() => {
            this.pieVioResultCount();
        }, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
    },
    methods: {

        getPieDataVio() {
            getPieData(1).then(res => {
                try {
                    if (res.code == 200) {

                        this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);

                        this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);

                        this.pieVioResultCount()


                    }
                } catch (error) {
                    this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
                    this.$modal.closeLoading();
                }
            }).catch(error => {
                this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
                this.$modal.closeLoading();
            });
        },
        pieVioResultCount() {
            let pieBlank = {
                color: 'rgba(255,255,255,.8)',
            };
            let pieEntity = {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(0, 255, 225, 0.3)' },
                    { offset: .5, color: 'rgba(100, 255, 100, 1)' },
                    { offset: 1, color: 'rgba(0, 255, 255, 0.7)' },
                ]),

            };
            let pieRadius = [30, 60];
            let pieVioResultCount = init(this.$refs.pieVioResultCount);
            console.log(this.pieEntityNameValue)
            console.log(this.pieEntityNameValue.pieright)
            let pieData = [
                { name: 'pieright', value: this.pieEntityNameValue.pieright },
                { name: 'pieerror', value: this.pieEntityNameValue.pieerror }
            ];
            // console.log(pieData)
            pieVioResultCount.setOption({

                series: pieData.map((data, index) => ({
                    type: 'pie',
                    top: '15%',
                    center: [`${23 + 51 * index}%`, '50%'],
                    radius: pieRadius,
                    label: {
                        show: true,
                        formatter: function (params) {
                            if (params.name === 'blank')
                                return roundToTwo(100 - params.value) + "%"
                            else
                                return roundToTwo(params.value) + "%"//没有这个参数会出现数据漂移的现象，如0.1+0.2=0.3
                        },
                        position: 'center',
                        fontSize: 15,
                        fontWeight: 'bold',
                        color: 'rgba(0, 255, 255, 0.7)'
                    },
                    data: [
                        { name: 'entity', value: data.value, itemStyle: pieEntity },
                        { name: 'blank', value: 100 - data.value, itemStyle: pieBlank }
                    ]
                }))
            });
        },
    }
}
</script>

<style scoped>
.pieBoxVioResultCount {
    height: 20rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

}

.pieVioResultCount {
    flex: 10;
    width: 100%;

}

.pieTextBoxVioResultCount {
    flex: 2;
    display: flex;
    color: #fff;
    width: 100%;
    font-size: 1rem;
    margin-left: 30%;
}

.pieTextVioResultCount {
    flex: 1
}
</style>