增加饼状图

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 .idea
 package-lock.json
-dist.zip
+dist.zip
+yarn.lock

package.json

@@ -26,6 +26,7 @@
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "dayjs": "^1.9.7",
+    "echarts": "^5.4.2",
     "html": "^1.0.0",
     "ip": "^1.1.5",
     "jquery": "^3.4.1",

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

@@ -1,85 +1,105 @@
-<!--
-鉴权行为统计
-@Author: linqian
-@Date: 2021-05-28 08:51
--->
 <template>
-  <div>
-    <!-- 搜索项 -->
-    <search-bar ref="searchbar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
-    <!-- 表格 -->
-    <new-table
-      ref="table"
-      :tableUrl="authServiceLogStatisticsTableUrl"
-      :tableHeader="tableHeader"
-      :condition="condition"
-      :lazyLoad="true"
-    >
-    </new-table>
-  </div>
+    <div>
+        <!-- 搜索项 -->
+        <search-bar ref="searchbar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
+        <!-- 操作栏 -->
+        <operate-bar @submitPageOpt="receviceOpt">
+            <dg-button type="primary" @click="receviceOpt('饼状图')" icon="el-icon-bangzhu">饼状图</dg-button>
+        </operate-bar>
+        <!-- 表格 -->
+        <new-table
+            ref="table"
+            :tableUrl="authServiceLogStatisticsTableUrl"
+            :tableHeader="tableHeader"
+            :condition="condition"
+            :lazyLoad="true"
+        >
+        </new-table>
+    </div>
 </template>
 
 <script>
-import newTable from '@/components/new-table';
-import { authServiceLogStatisticsTableUrl } from '@/api/permiss-log-manage';
-import searchBar from '@/components/search-bar';
-import { searchOpt } from '@/mixins/page-opt';
+import newTable from "@/components/new-table"
+import { authServiceLogStatisticsTableUrl } from "@/api/permiss-log-manage"
+import searchBar from "@/components/search-bar"
+import operateBar from "@/components/operate-bar"
+import { searchOpt } from "@/mixins/page-opt"
+import pieChart from "./pie-chart.vue"
 export default {
-  components: {
-    newTable,
-    searchBar
-  },
-  mixins: [searchOpt],
-  data() {
-    return {
-      authServiceLogStatisticsTableUrl,
-      tableHeader: [
-        {
-          label: '鉴权类型',
-          prop: 'type',
-          enum: 'AuthenticationTypeEnum'
-        },
-        {
-          label: '鉴权成功次数',
-          prop: 'susSize'
-        },
-        {
-          label: '鉴权失败次数',
-          prop: 'failSize'
-        },
-        {
-          label: '鉴权总次数',
-          prop: 'totalSize'
+    components: {
+        newTable,
+        searchBar,
+        operateBar
+    },
+    mixins: [searchOpt],
+    data() {
+        return {
+            authServiceLogStatisticsTableUrl,
+            tableHeader: [
+                {
+                    label: "鉴权类型",
+                    prop: "type",
+                    enum: "AuthenticationTypeEnum"
+                },
+                {
+                    label: "鉴权成功次数",
+                    prop: "susSize"
+                },
+                {
+                    label: "鉴权失败次数",
+                    prop: "failSize"
+                },
+                {
+                    label: "鉴权总次数",
+                    prop: "totalSize"
+                }
+            ],
+            conditionForm: [
+                {
+                    label: "鉴权时间",
+                    name: "createTime",
+                    op: "between",
+                    type: "DATE",
+                    value: "",
+                    valueFormat: "yyyyMMddHHmmss",
+                    component: "DgDatePicker",
+                    clearable: false
+                }
+            ]
         }
-      ],
-      conditionForm: [
-        {
-          label: '鉴权时间',
-          name: 'createTime',
-          op: 'between',
-          type: 'DATE',
-          value: '',
-          valueFormat: 'yyyyMMddHHmmss',
-          component: 'DgDatePicker',
-          clearable: false
+    },
+    created() {
+        const startTime =
+            this.$moment()
+                .subtract("1", "year")
+                .format("YYYYMMDD") + "000000"
+        const endTime = this.$moment().format("YYYYMMDD") + "235959"
+        this.conditionForm[0].value = [startTime, endTime]
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.$refs.searchbar.handleSearch()
+        })
+    },
+    methods: {
+        receviceOpt(type) {
+            const dataSource = this.$refs.table.$refs.baseTable._data.dataSource
+            if (type == "饼状图") {
+                const layer = this.$dgLayer({
+                    title: "饼状图",
+                    content: pieChart,
+                    props: {
+                        dataSource
+                    },
+                    on: {
+                        success(form, type) {}
+                    },
+                    area: ["600px", "600px"]
+                })
+            }
         }
-      ]
-    };
-  },
-  computed: {},
-  methods: {},
-  created() {
-    const startTime = this.$moment().subtract('1', 'year').format('YYYYMMDD') + '000000';
-    const endTime = this.$moment().format('YYYYMMDD') + '235959';
-    this.conditionForm[0].value = [startTime, endTime];
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$refs.searchbar.handleSearch();
-    });
-  }
-};
+    }
+}
 </script>
 
-<style lang='scss'>
-</style>
+<style lang="scss"></style>

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

@@ -0,0 +1,68 @@
+<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: [
+                { value: 1048, name: "Search Engine" },
+                { value: 735, name: "Direct" },
+                { value: 580, name: "Email" },
+                { value: 484, name: "Union Ads" },
+                { value: 300, name: "Video Ads" }
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+            }
+        }
+    ]
+}
+
+export default {
+    props: {
+        dataSource: {
+            type: [Array],
+            default: () => [],
+            required: true
+        }
+    },
+    mounted() {
+        const tempDataSource = this.dataSource.map(m => {
+            return {
+                name: m.type,
+                value: m.totalSize
+            }
+        })
+        option.series[0].data = tempDataSource
+        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>