授权主体统计增加饼状图

src/pages/auth-subject-manage/statistics/index.vue

@@ -4,117 +4,154 @@
 @date: 2023-06-06 09:39
 -->
 <template>
-  <div>
-    <div class="search-bar">
-      <div>
-        <el-radio v-model="form.radioValue" label="1">
-          按年
-          <el-date-picker v-model="form.year" type="year" placeholder="选择年" style="width: 200px !important">
-          </el-date-picker>
-        </el-radio>
-        <el-radio v-model="form.radioValue" label="2">
-          自定义日期
-          <el-date-picker
-            v-model="form.customValue"
-            type="daterange"
-            style="width: 350px !important"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :default-time="['00:00:00', '23:59:59']"
-            :value-format="'yyyy-MM-dd HH:mm:ss'"
-          >
-          </el-date-picker>
-        </el-radio>
-      </div>
-      <div style="margin-left: 20px">
-        <dg-button type="primary" :icon="'查询' | optIcon" @click="handleSearch()">查询</dg-button>
-        <dg-button :icon="'重置' | optIcon" @click="handleReset()">重置</dg-button>
-      </div>
+    <div>
+        <div class="search-bar">
+            <div>
+                <el-radio v-model="form.radioValue" label="1">
+                    按年
+                    <el-date-picker
+                        v-model="form.year"
+                        type="year"
+                        placeholder="选择年"
+                        style="width: 200px !important"
+                    >
+                    </el-date-picker>
+                </el-radio>
+                <el-radio v-model="form.radioValue" label="2">
+                    自定义日期
+                    <el-date-picker
+                        v-model="form.customValue"
+                        type="daterange"
+                        style="width: 350px !important"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        :default-time="['00:00:00', '23:59:59']"
+                        :value-format="'yyyy-MM-dd HH:mm:ss'"
+                    >
+                    </el-date-picker>
+                </el-radio>
+            </div>
+            <div style="margin-left: 20px">
+                <dg-button type="primary" :icon="'查询' | optIcon" @click="handleSearch()">查询</dg-button>
+                <dg-button :icon="'重置' | optIcon" @click="handleReset()">重置</dg-button>
+            </div>
+        </div>
+        <!-- 操作栏 -->
+        <operate-bar @submitPageOpt="receviceOpt">
+            <dg-button type="primary" @click="receviceOpt('饼状图')" icon="el-icon-bangzhu">饼状图</dg-button>
+        </operate-bar>
+
+        <dg-table ref="table" :data="tableData" :pagination="false" border>
+            <dg-table-column label="授权主体类型" prop="name" align="center"></dg-table-column>
+            <dg-table-column label="数量" prop="num" align="center"></dg-table-column>
+        </dg-table>
     </div>
-    <dg-table ref="table" :data="tableData" :pagination="false" border>
-      <dg-table-column label="授权主体类型" prop="name" align="center"></dg-table-column>
-      <dg-table-column label="数量" prop="num" align="center"></dg-table-column>
-    </dg-table>
-  </div>
 </template>
 
 <script>
-import { subStatisticsTable } from '@/api/statistics.js';
+import { subStatisticsTable } from "@/api/statistics.js"
+import operateBar from "@/components/operate-bar"
+import pieChart from "./pie-chart.vue"
 
 export default {
-  data() {
-    return {
-      form: {
-        radioValue: '1',
-        year: new Date(),
-        customValue: ''
-      },
-      tableData: [],
-      // 主体字段名称map集合
-      nameMap: {
-        appNum: '应用资源',
-        orgNum: '组织机构',
-        taskTypeNum: '任务类型',
-        userNum: '用户'
-      }
-    };
-  },
-  computed: {},
-  methods: {
-    handleSearch() {
-      const { radioValue, year, customValue } = this.form;
-      if (radioValue == '1' && !year) {
-        this.$message.warning('请选择年');
-        return;
-      }
-      if (radioValue == '2' && !customValue) {
-        this.$message.warning('自定义日期不能为空');
-        return;
-      }
-      this.getData();
+    components: {
+        operateBar
     },
-    handleReset() {
-      this.form.radioValue = '1';
-      this.form.year = new Date();
-      this.form.customValue = '';
+    data() {
+        return {
+            form: {
+                radioValue: "1",
+                year: new Date(),
+                customValue: ""
+            },
+            tableData: [],
+            // 主体字段名称map集合
+            nameMap: {
+                appNum: "应用资源",
+                orgNum: "组织机构",
+                taskTypeNum: "任务类型",
+                userNum: "用户"
+            }
+        }
     },
-    getData() {
-      let params = {};
-      const { radioValue, customValue, year } = this.form;
-      if (radioValue == '1') {
-        params = {
-          year: this.$moment(year).format('YYYY')
-        };
-      } else {
-        params = {
-          startTime: customValue[0],
-          endTime: customValue[1]
-        };
-      }
-      subStatisticsTable(params).then((res) => {
-        let attr = [];
-        for (const key in res) {
-          attr.push({
-            name: this.nameMap[key],
-            num: res[key]
-          });
+    computed: {},
+    methods: {
+        receviceOpt(type) {
+            const pieData = this.tableData.map(m => {
+                return {
+                    name: m.name,
+                    value: m.num
+                }
+            })
+
+            if (type == "饼状图") {
+                const layer = this.$dgLayer({
+                    title: "饼状图",
+                    content: pieChart,
+                    props: {
+                        dataSource: pieData
+                    },
+                    on: {
+                        success(form, type) {}
+                    },
+                    area: ["600px", "600px"]
+                })
+            }
+        },
+        handleSearch() {
+            const { radioValue, year, customValue } = this.form
+            if (radioValue == "1" && !year) {
+                this.$message.warning("请选择年")
+                return
+            }
+            if (radioValue == "2" && !customValue) {
+                this.$message.warning("自定义日期不能为空")
+                return
+            }
+            this.getData()
+        },
+        handleReset() {
+            this.form.radioValue = "1"
+            this.form.year = new Date()
+            this.form.customValue = ""
+        },
+        getData() {
+            let params = {}
+            const { radioValue, customValue, year } = this.form
+            if (radioValue == "1") {
+                params = {
+                    year: this.$moment(year).format("YYYY")
+                }
+            } else {
+                params = {
+                    startTime: customValue[0],
+                    endTime: customValue[1]
+                }
+            }
+            subStatisticsTable(params).then(res => {
+                let attr = []
+                for (const key in res) {
+                    attr.push({
+                        name: this.nameMap[key],
+                        num: res[key]
+                    })
+                }
+                this.tableData = attr
+            })
         }
-        this.tableData = attr;
-      });
-    }
-  },
-  created() {
-    this.getData();
-  },
-  mounted() {}
-};
+    },
+    created() {
+        this.getData()
+    },
+    mounted() {}
+}
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .search-bar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
 }
-</style>
+</style>

src/pages/auth-subject-manage/statistics/pie-chart.vue

@@ -0,0 +1,56 @@
+<template>
+    <div style="width: 100%;height: 100%;">
+        <div id="pie-container" class="pie-container"></div>
+        <dg-button v-footer @click="$emit('close')">关闭</dg-button>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+let option = {
+    tooltip: {
+        trigger: "item"
+    },
+    legend: {
+        orient: "vertical",
+        left: "left"
+    },
+    series: [
+        {
+            type: "pie",
+            radius: "50%",
+            data: [],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+            }
+        }
+    ]
+}
+
+export default {
+    props: {
+        dataSource: {
+            type: [Array],
+            default: () => [],
+            required: true
+        }
+    },
+    mounted() {
+        option.series[0].data = this.dataSource
+        const chartDom = document.getElementById("pie-container")
+        const myChart = echarts.init(chartDom)
+        myChart.setOption(option)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.pie-container {
+    width: 552px;
+    height: 447px;
+}
+</style>

src/pages/statistics-manage/auth-behavior-statistic/index.vue

@@ -90,8 +90,11 @@ export default {
     methods: {
         receviceOpt(type) {
             const dataSource = this.$refs.table.$refs.baseTable._data.dataSource
-            dataSource.forEach(e => {
-                e.typeName = this.AuthenticationTypeEnum.filter(f => f.value === e.type)[0].label
+            const pieData = dataSource.map(m => {
+                return {
+                    name: this.AuthenticationTypeEnum.filter(f => f.value === m.type)[0].label,
+                    value: m.totalSize
+                }
             })
 
             if (type == "饼状图") {
@@ -99,7 +102,7 @@ export default {
                     title: "饼状图",
                     content: pieChart,
                     props: {
-                        dataSource
+                        dataSource: pieData
                     },
                     on: {
                         success(form, type) {}

src/pages/statistics-manage/auth-behavior-statistic/pie-chart.vue

@@ -19,13 +19,7 @@ let option = {
         {
             type: "pie",
             radius: "50%",
-            data: [
-                { value: 1048, name: "Search Engine" },
-                { value: 735, name: "Direct" },
-                { value: 580, name: "Email" },
-                { value: 484, name: "Union Ads" },
-                { value: 300, name: "Video Ads" }
-            ],
+            data: [],
             emphasis: {
                 itemStyle: {
                     shadowBlur: 10,
@@ -46,13 +40,7 @@ export default {
         }
     },
     mounted() {
-        const tempDataSource = this.dataSource.map(m => {
-            return {
-                name: m.typeName,
-                value: m.totalSize
-            }
-        })
-        option.series[0].data = tempDataSource
+        option.series[0].data = this.dataSource
         const chartDom = document.getElementById("pie-container")
         const myChart = echarts.init(chartDom)
         myChart.setOption(option)