From 3a4591c75bf357b4abb98bd983651a393f8a5fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=B4=E6=9C=97?= <464174023@qq.com>
Date: Sat, 31 Aug 2024 17:57:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=87=E4=BB=B6=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/document/document.js               |  10 ++
 src/views/filestatistic/DownStatDetail.vue |  87 +++++++++++
 src/views/filestatistic/PieChart.vue       | 102 +++++++++++++
 src/views/filestatistic/index.vue          | 163 +++++++++++++++++++++
 4 files changed, 362 insertions(+)
 create mode 100644 src/views/filestatistic/DownStatDetail.vue
 create mode 100644 src/views/filestatistic/PieChart.vue
 create mode 100644 src/views/filestatistic/index.vue

diff --git a/src/api/document/document.js b/src/api/document/document.js
index 080e497..a86601b 100644
--- a/src/api/document/document.js
+++ b/src/api/document/document.js
@@ -52,3 +52,13 @@ export function pushDoc(id) {
     method: 'put'
   })
 }
+
+
+// 获取统计信息
+export function getStatistics(query) {
+  return request({
+    url: '/document/statistics',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file
diff --git a/src/views/filestatistic/DownStatDetail.vue b/src/views/filestatistic/DownStatDetail.vue
new file mode 100644
index 0000000..a8c7067
--- /dev/null
+++ b/src/views/filestatistic/DownStatDetail.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    :title="`${toolName}下载详情统计`"
+    :visible.sync="visible"
+    width="85%"
+    append-to-body
+    @open="openEvent"
+    @close="visible = false"
+  >
+    <el-table v-loading="loading" :data="toolDownDetailStatList">
+      <el-table-column label="下载用户" align="center" key="userName" prop="userName" min-width="120" />
+      <el-table-column label="下载次数" align="center" key="toolDownNum" prop="toolDownNum" min-width="120" />
+      <el-table-column label="下载时间" align="center" key="donwTime" prop="donwTime" min-width="120" />
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="detailQueryParams.pageNum"
+      :limit.sync="detailQueryParams.pageSize"
+      @pagination="getToolDownDetailStatistics"
+    />
+  </el-dialog>
+</template>
+<script>
+import { getToolDownDetailStatistics } from '@/api/statistic/statistic'
+export default {
+  props: {
+    /**
+     * 控制显示/隐藏
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 工具id
+     */
+    toolId: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 工具名称
+     */
+     toolName: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.show
+      },
+      set(val) {
+        this.$emit('update:show', false)
+      }
+    }
+  },
+  data () {
+    return {
+      toolDownDetailStatList: [],
+      total: 0,
+      loading: false,
+      // 查询参数
+      detailQueryParams: {
+        pageNum: 1,
+        pageSize: 10
+      }
+    }
+  },
+  methods: {
+    openEvent(){
+      this.visible = false
+      this.getToolDownDetailStatistics()
+    },
+    getToolDownDetailStatistics() {
+      this.loading = true
+      getToolDownDetailStatistics({ ...this.detailQueryParams, toolId: this.toolId }).then(response => {
+        this.total = response?.total
+        this.toolDownDetailStatList = response?.rows || []
+        this.loading = false
+      }).catch(() => { this.loading = false });
+    }
+  }
+}
+</script>
diff --git a/src/views/filestatistic/PieChart.vue b/src/views/filestatistic/PieChart.vue
new file mode 100644
index 0000000..e6a7360
--- /dev/null
+++ b/src/views/filestatistic/PieChart.vue
@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/views/dashboard/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    /**
+     * 饼图数据
+     */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 底部提示数据
+     */
+    legendData: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 底部提示距底部距离
+     */
+    legendBottom: {
+      type: String,
+      default: '5'
+    },
+    roseType: {
+      type: String,
+      default: 'radius'
+    },
+    radius: {
+      type: Array | String | Number,
+      default: 50
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: this.legendBottom,
+          data: this.legendData
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            roseType: this.roseType,
+            radius: this.radius,
+            center: ['50%', '50%'],
+            data: this.data,
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/filestatistic/index.vue b/src/views/filestatistic/index.vue
new file mode 100644
index 0000000..349743c
--- /dev/null
+++ b/src/views/filestatistic/index.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="app-container" v-loading="pageloading">
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-card>
+          <div slot="header" class="clearfix"><span class="tline">文档类别统计</span></div>
+          <!--  -->
+          <div class="tjbox2" v-if="isPieChart">
+            <PieChart
+              height="400px"
+              :data="toolTypeData"
+              :legendData="toolTypeLegendData"
+              legendBottom="5"
+              chartRef="toolType"
+              :radius="['40%', '70%']"
+            />
+          </div>
+        </el-card><!--el-card-->
+      </el-col><!--el-col-->
+      <el-col :span="12">
+        <el-card>
+          <div slot="header" class="clearfix"><span class="tline">文档来源统计</span></div>
+          <div class="tjbox2" v-if="isPieChart">
+            <PieChart
+              height="400px"
+              :data="toolSourceData"
+              :legendData="toolSourceLegendData"
+              legendBottom="5"
+              :radius="['40%', '70%']"
+              chartRef="toolStatus"
+            />
+          </div>
+        </el-card><!--el-card-->
+      </el-col><!--el-col-->
+    </el-row><!--el-row-->
+
+  </div>
+</template>
+
+<script>
+import { getStatistics } from "@/api/document/document";
+
+import PieChart from './PieChart'
+export default {
+  name: 'statistic',
+  dicts: ['tool_type', 'flow_status', 'tool_source'],
+  components: {
+    PieChart
+  },
+  data() {
+    return {
+      toolDownDetailStatList: [],
+      activeName: 'first',
+      toolTypeData: [
+        /*{ value: 320, name: '检测型' },
+        { value: 240, name: '服务型' }*/
+      ],
+      // toolTypeLegendData:['检测型', '服务型'],
+      toolTypeLegendData:[],
+      toolStatusData: [
+       /* { value: 212, name: '已保存' },
+        { value: 76, name: '审批中' },
+        { value: 32, name: '审批不通过' },
+        { value: 971, name: '已发布' }*/
+      ],
+      // toolStatusLegendData: ['已保存','审批中','审批不通过','已发布'],
+      toolStatusLegendData: [],
+      toolSourceData: [
+        /*{ value: 20, name: 'QQ' },
+        { value: 60, name: '微信' },
+        { value: 18, name: '官网' },
+        { value: 47, name: '熟人介绍' }*/
+      ],
+      // toolSourceLegendData: ['QQ', '微信', '官网', '熟人介绍'],
+      toolSourceLegendData: [],
+      // 日期范围
+      dateRange: [],
+      toolDownStatList: [],
+      downTotal: 0,
+      downLoading: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      queryParams1: {
+        pageNum: 1,
+        pageSize: 10,
+        toolId: ''
+      },
+      // 工具下载统计详情组件控制属性
+      detailDrawerOpen: false,
+      // 工具id
+      toolId: '',
+      // 工具名称
+      toolName: '',
+      total: 0,
+      loading: false,
+      isPieChart: false,
+    }
+  },
+  created () {
+    this.getCountData()
+    // this.getToolDownStatistics()
+  },
+  methods: {
+    // 工具下载重置查询
+    reset() {
+      this.toolDownStatList = []
+      this.dateRange = []
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    /**
+     * 工具下载搜索
+     */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+    },
+    /** 统计类型、类别、状态**/
+    getCountData(){
+      let self = this
+      // 类别
+      self.toolTypeData = []
+      self.toolTypeLegendData = []
+      // 来源
+      self.toolSourceData = []
+      self.toolSourceLegendData = []
+      self.pageloading = true
+
+      getStatistics(this.queryParams).then(res => {
+        console.info("res===========", res)
+        if(res.data){
+          //类别
+          self.toolTypeData = JSON.parse(JSON.stringify(res.data.countType))
+          self.toolTypeData.forEach(item => {
+            self.toolTypeLegendData.push(item.name)
+          })
+
+
+          //来源
+          self.toolSourceData = JSON.parse(JSON.stringify(res.data.countSource))
+          self.toolSourceData.forEach(item => {
+            self.toolSourceLegendData.push(item.name)
+          })
+          self.isPieChart= true
+          self.pageloading= false
+        }
+       /* console.info("countToolType==============", this.dict.type.tool_type)
+        console.info("res===========", res)*/
+      }).catch((err) => {
+        self.isPieChart= true
+        self.pageloading= false
+        console.error(err)
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>