画图

src/main/vue/src/mixins/widget.js

@@ -7,42 +7,48 @@ export default {
                     jigou: 20,
                     chenban: 432,
                     pass: 46,
-                    dengji: 5199
+                    dengji: 5199,
+                    point: 604
                 },
                 2017: {
                     baokao: 95,
                     jigou: 26,
                     chenban: 498,
                     pass: 61,
-                    dengji: 6547
+                    dengji: 6547,
+                    point: 703
                 },
                 2018: {
                     baokao: 102,
                     jigou: 28,
                     chenban: 536,
                     pass: 79,
-                    dengji: 6552
+                    dengji: 6552,
+                    point: 739
                 },
                 2019: {
                     baokao: 127,
                     jigou: 29,
                     chenban: 576,
                     pass: 86,
-                    dengji: 9833
+                    dengji: 9833,
+                    point: 788
                 },
                 2020: {
                     baokao: 169,
                     jigou: 34,
                     chenban: 735,
                     pass: 143,
-                    dengji: 9917
+                    dengji: 9917,
+                    point: 810
                 },
                 2021: {
                     baokao: 203,
                     jigou: 35,
                     chenban: 1000,
                     pass: 192,
-                    dengji: 10023
+                    dengji: 10023,
+                    point: 860
                 }
             }
         };

src/main/vue/src/router.js

@@ -862,6 +862,14 @@ const router = new Router({
                     meta: {
                         title: '统计报告'
                     }
+                },
+                {
+                    path: '/home',
+                    name: 'Dashboard',
+                    component: () => import(/* webpackChunkName: "Dashboard" */ '@/views/showStatistic/Dashboard.vue'),
+                    meta: {
+                        title: '统计报告'
+                    }
                 }
                 /**INSERT_LOCATION**/
             ]

src/main/vue/src/views/showStatistic/ArtTypeWidget.vue

@@ -0,0 +1,132 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template #header>
+            <span>考级分类</span>
+
+            <el-select @change="setChart" style="float:right" v-model="chooseYear" size="mini" placeholder="请选择">
+                <el-option v-for="item in years" :key="item" :label="item" :value="item"> </el-option>
+            </el-select>
+        </template>
+        <div ref="chart" class="chart" style="flex-grow:1"></div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import * as echarts from 'echarts';
+import widget from '@/mixins/widget';
+
+export default {
+    data() {
+        return {
+            myChart: null,
+            bodyStyle: {
+                display: 'flex'
+            },
+            types: [],
+            chooseYear: '2021'
+        };
+    },
+    computed: {
+        years() {
+            return Object.keys({ ...this.allData });
+        }
+    },
+    mounted() {
+        this.$http.post('/artType/allList').then(res => {
+            this.types = res;
+            this.myChart = echarts.init(this.$refs.chart);
+            this.setChart('2021');
+        });
+    },
+    methods: {
+        setChart(year) {
+            let res = [...this.types];
+            let data = [];
+            let data2 = [];
+            let total = { ...this.allData }[year].dengji;
+
+            let allNum = res.reduce((pre, cur) => {
+                return pre + (cur.children.length || 1);
+            }, 0);
+
+            let num = 0;
+
+            res.forEach((item, index) => {
+                let _nums = 0;
+                if (item.children.length > 0) {
+                    item.children.forEach((child, childIndex) => {
+                        let _childVal = this.getRandomMoney(allNum - num, total);
+                        num++;
+                        total -= _childVal;
+                        _nums += _childVal;
+                        data2.push({
+                            name: child.name,
+                            value: _childVal
+                        });
+                    });
+                } else {
+                    let _childVal = this.getRandomMoney(allNum - num, total);
+                    num++;
+                    total -= _childVal;
+                    _nums += _childVal;
+                    data2.push({
+                        name: item.name,
+                        value: _childVal
+                    });
+                }
+                data.push({
+                    name: item.name,
+                    value: _nums
+                });
+            });
+
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    alwaysShowContent: true,
+                    formatter: '{a} <br/>{b}: {c} ({d}%)'
+                },
+                legend: {
+                    data: [...data].map(item => {
+                        return item.name;
+                    })
+                },
+                series: [
+                    {
+                        name: '考级分类',
+                        type: 'pie',
+                        selectedMode: 'single',
+                        radius: [0, '30%'],
+                        label: {
+                            position: 'inner',
+                            fontSize: 14
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: data,
+                        select: {
+                            label: {
+                                show: true
+                            }
+                        }
+                    },
+                    {
+                        name: '考级分类',
+                        type: 'pie',
+                        radius: ['45%', '60%'],
+                        data: data2
+                    }
+                ]
+            };
+
+            this.myChart.setOption(option);
+        }
+    },
+    components: {
+        WidgetCard
+    },
+    mixins: [widget]
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/views/showStatistic/Dashboard.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <grid-layout
+            style="margin: 0 -10px;"
+            :layout="layout"
+            :col-num="12"
+            :row-height="30"
+            :is-draggable="editable"
+            :is-resizable="editable"
+            :is-mirrored="false"
+            :vertical-compact="true"
+            :margin="[10, 10]"
+            :use-css-transforms="true"
+        >
+            <grid-item
+                v-for="item in layout"
+                class="widget-wrapper"
+                :x="item.x"
+                :y="item.y"
+                :w="item.w"
+                :h="item.h"
+                :i="item.i"
+                :key="item.i"
+            >
+                <component :is="item.name"></component>
+            </grid-item>
+        </grid-layout>
+        <el-button v-if="editable" @click="save">保存</el-button>
+        <!-- <el-button v-else @click="editable = true">编辑</el-button> -->
+    </div>
+</template>
+
+<script>
+import { GridLayout, GridItem } from 'vue-grid-layout';
+import DatasWidget from './DatasWidget';
+import ArtTypeWidget from './ArtTypeWidget';
+import ExamWidegt from './ExamWidegt';
+import PassWidget from './PassWidget';
+import RateWidget from './RateWidget';
+import PieChartWidget from '@/widgets/PieChartWidget';
+
+export default {
+    created() {},
+    data() {
+        return {
+            layout: [
+                { x: 0, y: 0, w: 12, h: 5, i: '0', name: 'DatasWidget' },
+                { x: 0, y: 6, w: 6, h: 12, i: '2', name: 'PassWidget' },
+                { x: 6, y: 6, w: 6, h: 12, i: '3', name: 'ExamWidegt' },
+                { x: 0, y: 18, w: 6, h: 12, i: '4', name: 'ArtTypeWidget' },
+                { x: 6, y: 18, w: 6, h: 12, i: '4', name: 'PieChartWidget' },
+                { x: 0, y: 24, w: 12, h: 12, i: '6', name: 'RateWidget' }
+            ],
+            editable: false
+        };
+    },
+    methods: {
+        save() {
+            console.log(JSON.stringify(this.layout));
+            this.editable = false;
+        }
+    },
+    components: {
+        GridLayout,
+        GridItem,
+        DatasWidget,
+        ArtTypeWidget,
+        ExamWidegt,
+        PassWidget,
+        PieChartWidget,
+        RateWidget
+    }
+};
+</script>
+
+<style lang="less">
+.widget-wrapper {
+    display: flex;
+    flex-direction: column;
+    .el-card {
+        flex-grow: 1;
+    }
+}
+</style>

src/main/vue/src/views/showStatistic/DatasWidget.vue

@@ -0,0 +1,69 @@
+<template>
+    <widget-card>
+        <template slot="header">
+            <span>数据总揽</span>
+
+            <!-- <el-select style="float:right" v-model="chooseYear" size="mini" placeholder="请选择">
+                <el-option v-for="item in years" :key="item" :label="item" :value="item"> </el-option>
+            </el-select> -->
+        </template>
+
+        <el-row :gutter="20">
+            <el-col :span="8" :offset="0">
+                <UserWidget2 :year="chooseYear"></UserWidget2>
+            </el-col>
+            <el-col :span="8" :offset="0">
+                <UserWidget :year="chooseYear"></UserWidget>
+            </el-col>
+            <el-col :span="8" :offset="0">
+                <UserWidget3 :year="chooseYear"></UserWidget3>
+            </el-col>
+            <!-- <el-col :span="6" :offset="0">
+                <UserWidget4 :year="chooseYear"></UserWidget4>
+            </el-col> -->
+        </el-row>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import UserWidget from './UserWidget';
+import UserWidget2 from './UserWidget2';
+import UserWidget3 from './UserWidget3';
+import UserWidget4 from './UserWidget4';
+import widget from '@/mixins/widget';
+import { GridLayout, GridItem } from 'vue-grid-layout';
+export default {
+    data() {
+        return {
+            chooseYear: '2021'
+        };
+    },
+    mixins: [widget],
+    computed: {
+        years() {
+            return Object.keys({ ...this.allData });
+        }
+    },
+    components: {
+        WidgetCard,
+        UserWidget,
+        UserWidget2,
+        UserWidget3
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/views/showStatistic/ExamWidegt.vue

@@ -0,0 +1,130 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template #header
+            ><span>专业备案</span>
+            <el-select @change="setChart" style="float:right" v-model="chooseYear" size="mini" placeholder="请选择">
+                <el-option v-for="item in years" :key="item" :label="item" :value="item"> </el-option>
+            </el-select>
+        </template>
+        <div ref="chart" class="chart" style="flex-grow:1"></div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import * as echarts from 'echarts';
+import widget from '@/mixins/widget';
+
+export default {
+    data() {
+        return {
+            myChart: null,
+            bodyStyle: {
+                display: 'flex'
+            },
+            chooseYear: '2021',
+            types: []
+        };
+    },
+    computed: {
+        years() {
+            return Object.keys({ ...this.allData });
+        }
+    },
+    mounted() {
+        this.$http.post('/artType/allList').then(res => {
+            this.types = res;
+            this.myChart = echarts.init(this.$refs.chart);
+            this.setChart('2021');
+        });
+    },
+    methods: {
+        setChart(year) {
+            let maxRadius = this.getMax(this.$refs.container.$el.offsetWidth, this.$refs.container.$el.offsetHeight);
+            let data = [];
+            let res = [...this.types];
+
+            let total = this.allData[year].baokao;
+
+            res.forEach((item, index) => {
+                let _val = this.getRandomMoney(res.length - index, total);
+                total -= _val;
+                if (item.name != '器乐') {
+                    data.push({
+                        name: item.name,
+                        value: _val
+                    });
+                }
+            });
+            data = data.sort((a, b) => {
+                return a.value - b.value;
+            });
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b}: {c} ({d}%)'
+                },
+                legend: {
+                    data: [...data].map(item => {
+                        return item.name;
+                    })
+                },
+                series: [
+                    {
+                        name: '报考人数',
+                        type: 'pie',
+                        radius: [20, Math.ceil(maxRadius / 6)],
+                        labelLine: {
+                            length: 30
+                        },
+                        label: {
+                            formatter: ' {b|{b}：}{c}场 {per|{d}%}  ',
+                            backgroundColor: '#F6F8FC',
+                            borderColor: '#8C8D8E',
+                            borderWidth: 1,
+                            borderRadius: 4,
+                            rich: {
+                                a: {
+                                    color: '#6E7079',
+                                    lineHeight: 22,
+                                    align: 'center'
+                                },
+                                hr: {
+                                    borderColor: '#8C8D8E',
+                                    width: '100%',
+                                    borderWidth: 1,
+                                    height: 0
+                                },
+                                b: {
+                                    color: '#4C5058',
+                                    fontSize: 14,
+                                    fontWeight: 'bold',
+                                    lineHeight: 33
+                                },
+                                per: {
+                                    color: '#fff',
+                                    backgroundColor: '#4C5058',
+                                    padding: [3, 4],
+                                    borderRadius: 4
+                                }
+                            }
+                        },
+                        center: ['50%', '50%'],
+                        roseType: 'area',
+                        itemStyle: {
+                            borderRadius: 8
+                        },
+                        data: data
+                    }
+                ]
+            };
+
+            this.myChart.setOption(option);
+        }
+    },
+    components: {
+        WidgetCard
+    },
+    mixins: [widget]
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/views/showStatistic/PassWidget.vue

@@ -0,0 +1,105 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template #header>年度报考考级人数</template>
+        <div ref="chart" class="chart" style="flex-grow:1"></div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import * as echarts from 'echarts';
+import widget from '@/mixins/widget';
+import { th } from 'date-fns/locale';
+
+export default {
+    data() {
+        return {
+            myChart: null,
+            bodyStyle: {
+                display: 'flex'
+            }
+        };
+    },
+    mounted() {
+        setTimeout(() => {
+            this.$nextTick(() => {
+                let info = { ...this.allData };
+                let data = Object.keys(info).map(item => {
+                    return {
+                        year: item,
+                        ...info[item]
+                    };
+                });
+
+                var chartDom = this.$refs.chart;
+                var myChart = echarts.init(chartDom);
+                var option;
+
+                option = option = {
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            crossStyle: {
+                                color: '#999'
+                            }
+                        },
+                        formatter: '{b}年<br/>{a0}: {c0}万<br />{a1}: {c1}万<br />{a2}: {c2}%'
+                    },
+                    legend: {
+                        data: ['报考人数']
+                    },
+                    xAxis: [
+                        {
+                            type: 'category',
+                            data: data.map(item => {
+                                return item.year;
+                            }),
+                            axisPointer: {
+                                type: 'shadow'
+                            },
+                            axisLine: {
+                                show: false
+                            }
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            name: '万人次',
+                            min: 0,
+                            interval: 50,
+                            axisLabel: {
+                                formatter: '{value} '
+                            },
+                            axisLine: {
+                                show: false
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '报考人数',
+                            type: 'bar',
+                            data: data.map(item => {
+                                return item.baokao;
+                            }),
+                            label: {
+                                show: true,
+                                position: 'top',
+                                formatter: '{c}万'
+                            }
+                        }
+                    ]
+                };
+
+                option && myChart.setOption(option);
+            });
+        }, 500);
+    },
+    components: {
+        WidgetCard
+    },
+    mixins: [widget]
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/views/showStatistic/RateWidget.vue

@@ -0,0 +1,181 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template #header>年度考级数</template>
+        <div ref="chart" class="chart" style="flex-grow:1"></div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import * as echarts from 'echarts';
+import widget from '@/mixins/widget';
+import { th } from 'date-fns/locale';
+
+export default {
+    data() {
+        return {
+            myChart: null,
+            bodyStyle: {
+                display: 'flex'
+            }
+        };
+    },
+    mounted() {
+        setTimeout(() => {
+            this.$nextTick(() => {
+                let info = { ...this.allData };
+                let data = Object.keys(info).map(item => {
+                    return {
+                        year: item,
+                        ...info[item]
+                    };
+                });
+
+                var chartDom = this.$refs.chart;
+                var myChart = echarts.init(chartDom);
+                var option;
+
+                option = option = {
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            crossStyle: {
+                                color: '#999'
+                            }
+                        },
+                        formatter: '{b}年<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%'
+                    },
+                    legend: {
+                        data: ['通过数量', '未通过数量', '通过率']
+                    },
+                    xAxis: [
+                        {
+                            type: 'category',
+                            data: data.map(item => {
+                                return item.year;
+                            }),
+                            axisPointer: {
+                                type: 'shadow'
+                            },
+                            axisLine: {
+                                show: false
+                            }
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            name: '承办单位数量',
+                            min: 0,
+                            interval: 50,
+                            axisLabel: {
+                                formatter: '{value} '
+                            },
+                            axisLine: {
+                                show: false
+                            }
+                        },
+                        {
+                            type: 'value',
+                            name: '通过率',
+                            min: 0,
+                            interval: 20,
+                            axisLabel: {
+                                formatter: '{value} %'
+                            },
+                            axisLine: {
+                                show: false
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '参加数量',
+                            type: 'bar',
+                            data: data.map(item => {
+                                return item.baokao;
+                            }),
+                            label: {
+                                show: true,
+                                position: 'top',
+                                formatter: '{c}'
+                            }
+                        },
+                        {
+                            name: '通过数量',
+                            type: 'bar',
+                            data: data.map(item => {
+                                return item.pass;
+                            }),
+                            label: {
+                                show: true,
+                                position: 'top',
+                                formatter: '{c}'
+                            }
+                        },
+                        {
+                            name: '通过率',
+                            type: 'line',
+                            yAxisIndex: 1,
+                            data: data.map(item => {
+                                return Math.ceil((item.pass * 100) / item.baokao);
+                            }),
+                            label: {
+                                formatter: '{b}: {c}%'
+                            },
+                            markPoint: {
+                                data: [
+                                    {
+                                        type: 'max',
+                                        name: '最大值',
+                                        label: {
+                                            color: '#fff',
+                                            fontWeight: 'bolder',
+                                            formatter: '{c}%'
+                                        }
+                                    },
+                                    {
+                                        type: 'min',
+                                        name: '最小值',
+                                        label: {
+                                            color: '#fff',
+                                            fontWeight: 'bolder',
+                                            formatter: '{c}%'
+                                        }
+                                    }
+                                ]
+                            },
+                            markLine: {
+                                data: [
+                                    {
+                                        type: 'average',
+                                        name: '平均值',
+                                        label: {
+                                            position: 'start',
+                                            formatter: '平均通过率为: {c}%',
+                                            distance: [-200, 10],
+                                            fontSize: 14,
+                                            fontWeight: 'bolder',
+                                            backgroundColor: 'inherit',
+                                            color: '#fff',
+                                            padding: [12, 20, 12, 20],
+                                            borderRadius: 6
+                                        }
+                                    }
+                                ]
+                            }
+                        }
+                    ]
+                };
+
+                option && myChart.setOption(option);
+            });
+        }, 500);
+    },
+    components: {
+        WidgetCard
+    },
+    mixins: [widget]
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/views/showStatistic/UserWidget.vue

@@ -0,0 +1,54 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <i class="fa-fw fas fa-building fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">承办单位</div>
+            <div class="num">{{ yearInfo.chenban }}</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import widget from '@/mixins/widget';
+
+export default {
+    props: {
+        year: {
+            type: String,
+            default: '2021'
+        }
+    },
+    mixins: [widget],
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        };
+    },
+    computed: {
+        yearInfo() {
+            return this.allData[this.year];
+        }
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/views/showStatistic/UserWidget2.vue

@@ -0,0 +1,54 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" path="/gradingOrganizationList">
+        <i class="fa-fw fas fa-school fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">考级机构</div>
+            <div class="num">{{ yearInfo.jigou }}</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import widget from '@/mixins/widget';
+
+export default {
+    props: {
+        year: {
+            type: String,
+            default: '2021'
+        }
+    },
+    mixins: [widget],
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        };
+    },
+    computed: {
+        yearInfo() {
+            return this.allData[this.year];
+        }
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/views/showStatistic/UserWidget3.vue

@@ -0,0 +1,54 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <i class="fa-fw fas fa-child fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">考级点</div>
+            <div class="num">{{ yearInfo.point }}</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import widget from '@/mixins/widget';
+
+export default {
+    props: {
+        year: {
+            type: String,
+            default: '2021'
+        }
+    },
+    mixins: [widget],
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        };
+    },
+    computed: {
+        yearInfo() {
+            return this.allData[this.year];
+        }
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/views/showStatistic/UserWidget4.vue

@@ -0,0 +1,54 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <i class="fa-fw fas fa-database fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">等级评定</div>
+            <div class="num">{{ yearInfo.dengji }}</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from '@/widgets/WidgetCard';
+import widget from '@/mixins/widget';
+
+export default {
+    props: {
+        year: {
+            type: String,
+            default: '2021'
+        }
+    },
+    mixins: [widget],
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        };
+    },
+    computed: {
+        yearInfo() {
+            return this.allData[this.year];
+        }
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/widgets/ArtTypeWidget copy.vue

@@ -0,0 +1,146 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template #header>
+            <span>投诉数量</span>
+            <!-- <el-select @change="setChart" style="float:right" v-model="chooseYear" size="mini" placeholder="请选择">
+                <el-option v-for="item in years" :key="item" :label="item" :value="item"> </el-option>
+            </el-select> -->
+        </template>
+        <div ref="chart" class="chart" style="flex-grow:1"></div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+import * as echarts from 'echarts';
+import widget from '../mixins/widget';
+
+export default {
+    data() {
+        return {
+            myChart: null,
+            bodyStyle: {
+                display: 'flex'
+            },
+            types: [],
+            chooseYear: '2021'
+        };
+    },
+    computed: {
+        years() {
+            return Object.keys({ ...this.allData });
+        }
+    },
+    mounted() {
+        this.$http.post('/reportStatistic/all', { sort: 'complain,desc', size: 20 }, { body: 'json' }).then(res => {
+            this.types = res.content;
+            this.myChart = echarts.init(this.$refs.chart);
+            this.setChart();
+        });
+    },
+    methods: {
+        setChart() {
+            let res = [...this.types];
+            // console.log(res);
+            let data = [];
+            let data2 = [];
+
+            res.forEach(item => {
+                if (item.unitType == 'GRADING_ORGANIZATION') {
+                    data.push({
+                        name: item.name,
+                        value: item.complain
+                    });
+                } else if (item.unitType == 'ORGANIZATION') {
+                    data2.push({
+                        name: item.name,
+                        value: item.complain
+                    });
+                }
+            });
+            // let total = { ...this.allData }[year].dengji;
+
+            // let allNum = res.reduce((pre, cur) => {
+            //     return pre + (cur.children.length || 1);
+            // }, 0);
+
+            // let num = 0;
+
+            // res.forEach((item, index) => {
+            //     let _nums = 0;
+            //     if (item.children.length > 0) {
+            //         item.children.forEach((child, childIndex) => {
+            //             let _childVal = this.getRandomMoney(allNum - num, total);
+            //             num++;
+            //             total -= _childVal;
+            //             _nums += _childVal;
+            //             data2.push({
+            //                 name: child.name,
+            //                 value: _childVal
+            //             });
+            //         });
+            //     } else {
+            //         let _childVal = this.getRandomMoney(allNum - num, total);
+            //         num++;
+            //         total -= _childVal;
+            //         _nums += _childVal;
+            //         data2.push({
+            //             name: item.name,
+            //             value: _childVal
+            //         });
+            //     }
+            //     data.push({
+            //         name: item.name,
+            //         value: _nums
+            //     });
+            // });
+
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    alwaysShowContent: true,
+                    formatter: '{a} <br/>{b}: {c} ({d}%)'
+                },
+                legend: {
+                    data: [...data].map(item => {
+                        return item.name;
+                    })
+                },
+                series: [
+                    {
+                        name: '投诉数量',
+                        type: 'pie',
+                        selectedMode: 'single',
+                        radius: [0, '30%'],
+                        label: {
+                            position: 'inner',
+                            fontSize: 14
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: data,
+                        select: {
+                            label: {
+                                show: true
+                            }
+                        }
+                    },
+                    {
+                        name: '投诉数量',
+                        type: 'pie',
+                        radius: ['45%', '60%'],
+                        data: data2
+                    }
+                ]
+            };
+
+            this.myChart.setOption(option);
+        }
+    },
+    components: {
+        WidgetCard
+    },
+    mixins: [widget]
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/widgets/ArtTypeWidget.vue

@@ -31,11 +31,11 @@ export default {
         }
     },
     mounted() {
-        this.$http.post('/reportStatistic/all', { sort: 'complain,desc', size: 20 }, { body: 'json' }).then(res => {
-            this.types = res.content;
-            this.myChart = echarts.init(this.$refs.chart);
-            this.setChart();
-        });
+        // this.$http.post('/reportStatistic/all', { sort: 'complain,desc', size: 20 }, { body: 'json' }).then(res => {
+        //     this.types = res.content;
+        //     this.myChart = echarts.init(this.$refs.chart);
+        //     this.setChart();
+        // });
     },
     methods: {
         setChart() {