统计分析优化

src/api/statistic/statistic.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+/**
+ * 查询工具下载统计列表
+ * @returns
+ */
+export function getToolDownStat(params) {
+  return Promise.resolve({
+    total: 5,
+    rows: [
+      { toolId: '1', toolCode: 'gdd-9jeh', toolName: '阿嘎', toolDownNum: 90 },
+      { toolId: '2', toolCode: 'tt', toolName: 'd', toolDownNum: 56 },
+      { toolId: '3', toolCode: '22', toolName: '1', toolDownNum: 9 },
+      { toolId: '4', toolCode: 'rtgg', toolName: '22', toolDownNum: 5 },
+      { toolId: '5', toolCode: 'rtgg', toolName: '333', toolDownNum: 21 },
+      { toolId: '6', toolCode: '77', toolName: '77', toolDownNum: 71 }
+    ],
+    code: 200,
+    msg: '操作成功'
+  })
+}
+
+/**
+ * 根据工具id查询统计详情数据
+ * @returns
+ */
+export function getToolDownDetailStatistics(params) {
+  return Promise.resolve({
+    total: 15,
+    rows: [
+      { toolId: '1', userName: '测试1', donwTime: '2024-08-05 12:31:59', toolDownNum: 1 },
+      { toolId: '1', userName: '测试2', donwTime: '2024-08-05 12:31:59', toolDownNum: 5 },
+      { toolId: '1', userName: '测试3', donwTime: '2024-08-05 12:31:59', toolDownNum: 1 },
+      { toolId: '1', userName: '测试4', donwTime: '2024-08-05 12:31:59', toolDownNum: 1 },
+      { toolId: '1', userName: '测试5', donwTime: '2024-08-05 12:31:59', toolDownNum: 7 },
+      { toolId: '1', userName: '测试6', donwTime: '2024-08-05 12:31:59', toolDownNum: 1 },
+      { toolId: '1', userName: '测试7', donwTime: '2024-08-05 12:31:59', toolDownNum: 1 },
+      { toolId: '1', userName: '测试8', donwTime: '2024-08-05 12:31:59', toolDownNum: 2 },
+      { toolId: '1', userName: '测试9', donwTime: '2024-08-05 12:31:59', toolDownNum: 9 },
+      { toolId: '1', userName: '测试10', donwTime: '2024-08-05 12:31:59', toolDownNum: 3 }
+    ],
+    code: 200,
+    msg: '操作成功'
+  })
+}
+
+

src/views/message/index.vue

@@ -158,9 +158,9 @@ export default {
     },
      /** 重置按钮操作 */
      resetQuery() {
-      this.tableList = [];
+      this.tableList = []
-      this.resetForm("queryForm");
+      this.resetForm("queryForm")
-      this.handleQuery();
+      this.handleQuery()
     },
     // 节点单击事件
     handleNodeClick(data) {

src/views/statistic/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>

src/views/statistic/index.vue

@@ -1,121 +1,150 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-row :gutter="20">
-      <el-tab-pane label="工具统计" name="first">
+      <el-col :span="12">
-        <div class="app-container"><!--从这一层开始嵌入页面-->
+        <el-card>
+          <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
+          <!--  -->
+          <div class="tjbox2">
+            <PieChart
+              height="207px"
+              :data="toolTypeData"
+              :legendData="toolTypeLegendData"
+              legendBottom="5"
+              chartRef="toolType"
+              :radius="50"
+            />
+          </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">
+            <PieChart
+              height="207px"
+              :data="toolStatusData"
+              :legendData="toolStatusLegendData"
+              legendBottom="5"
+              :radius="['40%', '70%']"
+              chartRef="toolStatus"
+            />
+            <!-- <img src="images/tjt2.jpg" /> -->
+          </div>
+        </el-card><!--el-card-->
+      </el-col><!--el-col-->
+    </el-row><!--el-row-->
 
-          <el-row :gutter="20">
+    <el-row :gutter="20">
-            <el-col :span="12">
+      <el-col :span="12">
-              <el-card>
+        <el-card>
-                <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
+          <div slot="header" class="clearfix"><span class="tline">工具来源统计</span></div>
-                <!--  -->
+          <div class="tjbox2">
-                <div class="tjbox2">
+            <PieChart
-                  <PieChart
+              height="207px"
-                    height="207px"
+              :data="toolSourceData"
-                    :data="toolTypeData"
+              :legendData="toolSourceLegendData"
-                    :legendData="toolTypeLegendData"
+              legendBottom="5"
-                    legendBottom="5"
+              :radius="['40%', '70%']"
-                    chartRef="toolType"
+              chartRef="toolStatus"
-                    :radius="50"
+            />
-                  />
+          </div>
+        </el-card><!--el-card-->
+      </el-col><!--el-col-->
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="clearfix"><span class="tline">工具下载</span></div>
+          <div class="tjbox2">
+            <el-form label-width="80px" ref="queryForm">
+              <div class="search">
+                <div class="sl">
+                  <el-form-item label="下载时间">
+                    <el-date-picker
+                      v-model="dateRange"
+                      style="width: 240px"
+                      value-format="yyyy-MM-dd"
+                      type="daterange"
+                      range-separator="-"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                    ></el-date-picker>
+                  </el-form-item>
                 </div>
-              </el-card><!--el-card-->
+                <div class="sr">
-            </el-col><!--el-col-->
+                  <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-            <el-col :span="12">
+                  <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
-              <el-card>
-                <div slot="header" class="clearfix"><span class="tline">工具状态统计</span></div>
-                <div class="tjbox2">
-                  <PieChart
-                    height="207px"
-                    :data="toolStatusData"
-                    :legendData="toolStatusLegendData"
-                    legendBottom="5"
-                    :radius="['40%', '70%']"
-                    chartRef="toolStatus"
-                  />
-                  <!-- <img src="images/tjt2.jpg" /> -->
                 </div>
-              </el-card><!--el-card-->
+              </div>
-            </el-col><!--el-col-->
+            </el-form>
-          </el-row><!--el-row-->
+            <!-- <img src="images/tjt6.jpg" /> -->
-
+          </div>
-          <el-row :gutter="20">
+          <div class="rt">
-            <el-col :span="12">
+            <el-table v-loading="downLoading" :data="toolDownStatList">
-              <el-card>
+              <el-table-column label="工具编号" align="center" key="toolCode" prop="toolCode" />
-                <div slot="header" class="clearfix"><span class="tline">工具来源统计</span></div>
+              <el-table-column label="工具名称" align="center" key="toolName" prop="toolName"  :show-overflow-tooltip="true" />
-                <div class="tjbox2">
+              <el-table-column label="下载数量" align="center" key="toolDownNum" prop="toolDownNum" width="120" />
-                  <PieChart
+              <el-table-column
-                    height="207px"
+                label="操作"
-                    :data="toolSourceData"
+                align="center"
-                    :legendData="toolSourceLegendData"
+                width="250"
-                    legendBottom="5"
+                class-name="small-padding fixed-width"
-                    :radius="['40%', '70%']"
+              >
-                    chartRef="toolStatus"
+                <template slot-scope="scope">
-                  />
+                  <el-button type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button>
-                </div>
+                </template>
-              </el-card><!--el-card-->
+              </el-table-column>
-            </el-col><!--el-col-->
+            </el-table>
-          </el-row>
+            <pagination
-          <el-row :gutter="20">
+              v-show="downTotal>0"
-            <el-col :span="24">
+              :total="downTotal"
-              <el-card>
+              :page.sync="queryParams.pageNum"
-                <div slot="header" class="clearfix"><span class="tline">工具下载</span></div>
+              :limit.sync="queryParams.pageSize"
-                <div class="tjbox2"><img src="images/tjt6.jpg" /></div>
+              @pagination="getToolDownStatistics"
-              </el-card><!--el-card-->
+            />
-            </el-col><!--el-col-->
+          </div><!--rt 右-->
-          </el-row><!--el-row-->
+        </el-card><!--el-card-->
-
+      </el-col><!--el-col-->
-        </div><!--app-container-->
+    </el-row><!--el-row-->
-      </el-tab-pane>
+    <!-- <DownStatDetail :show.sync="detailDrawerOpen" :toolId="toolId" :toolName="toolName" /> -->
-      <el-tab-pane label="文档统计" name="second">
+    <el-dialog
-        <div class="app-container"><!--从这一层开始嵌入页面-->
+      :title="`${toolName}下载详情统计`"
-
+      :visible.sync="detailDrawerOpen"
-          <el-row :gutter="20">
+      width="85%"
-            <el-col :span="12">
+      append-to-body
-              <el-card>
+      @open="openEvent"
-                <div slot="header" class="clearfix"><span class="tline">文档类别统计</span></div>
+      @close="detailDrawerOpen = false"
-                <div class="tjbox2"><img src="images/tjt3.jpg" /></div>
+    >
-              </el-card><!--el-card-->
+      <el-table :data="toolDownDetailStatList" v-loading="loading">
-            </el-col><!--el-col-->
+        <el-table-column label="下载用户" align="center" key="userName" prop="userName" min-width="120" />
-            <el-col :span="12">
+        <el-table-column label="下载次数" align="center" key="toolDownNum" prop="toolDownNum" min-width="120" />
-              <el-card>
+        <el-table-column label="下载时间" align="center" key="donwTime" prop="donwTime" min-width="120" />
-                <div slot="header" class="clearfix"><span class="tline">文档来源统计</span></div>
+      </el-table>
-                <div class="tjbox2"><img src="images/tjt4.jpg" /></div>
+      <pagination
-              </el-card><!--el-card-->
+        v-show="total>0"
-            </el-col><!--el-col-->
+        :total="total"
-          </el-row><!--el-row-->
+        :page.sync="queryParams1.pageNum"
-
+        :limit.sync="queryParams1.pageSize"
-          <el-row :gutter="20">
+        @pagination="getToolDownDetailStatistics"
-            <el-col :span="12">
+      />
-              <el-card>
+    </el-dialog>
-                <div slot="header" class="clearfix"><span class="tline">文档归属单位分布情况</span></div>
-                <div class="tjbox2"><img src="images/tjt5.jpg" /></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"><img src="images/tjt6.jpg" /></div>
-              </el-card><!--el-card-->
-            </el-col><!--el-col-->
-          </el-row><!--el-row-->
-
-        </div><!--app-container-->
-      </el-tab-pane>
-    </el-tabs>
   </div>
-
 </template>
 
 <script>
 import PieChart from './PieChart'
+import DownStatDetail from './DownStatDetail'
+import { getToolDownStat, getToolDownDetailStatistics } from '@/api/statistic/statistic'
 export default {
   name: 'statistic',
   components: {
     PieChart,
+    DownStatDetail
   },
   data() {
     return {
+      toolDownDetailStatList: [],
       activeName: 'first',
       toolTypeData: [
         { value: 320, name: '检测型' },
@@ -135,13 +164,77 @@ export default {
         { value: 18, name: '官网' },
         { value: 47, name: '熟人介绍' }
       ],
-      toolSourceLegendData: ['QQ', '微信', '官网', '熟人介绍']
+      toolSourceLegendData: ['QQ', '微信', '官网', '熟人介绍'],
-    };
+      // 日期范围
+      dateRange: [],
+      toolDownStatList: [],
+      downTotal: 0,
+      downLoading: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        mesContent: ''
+      },
+      queryParams1: {
+        pageNum: 1,
+        pageSize: 10,
+        mesContent: ''
+      },
+      // 工具下载统计详情组件控制属性
+      detailDrawerOpen: false,
+      // 工具id
+      toolId: '',
+      // 工具名称
+      toolName: '',
+      total: 0,
+      loading: false
+    }
+  },
+  created () {
+    this.getToolDownStatistics()
   },
   methods: {
-    handleClick(tab, event) {
+    openEvent() {
-      console.log(tab, event);
+      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 });
+    },
+    // 工具下载重置查询
+    reset() {
+      this.toolDownStatList = []
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    /**
+     * 工具下载搜索
+     */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getToolDownStatistics()
+    },
+    /**
+     * 获取工具下载列表数据
+     */
+    getToolDownStatistics() {
+      this.downLoading = true
+      getToolDownStat(this.queryParams).then(response => {
+        this.downTotal = response?.total
+        this.toolDownStatList = response?.rows || []
+        this.downLoading = false
+      }).catch(() => { this.downLoading = false });
+    },
+    handleDetail(row){
+      this.toolId = row.id
+      this.toolName = row.toolName
+      this.detailDrawerOpen = true
+    },
   }
 }
 </script>

src/views/tool/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-card>
-      <el-form label-width="80px">
+      <el-form label-width="80px" ref="queryForm">
         <div class="grab"  id="add">
           <div class="search">
             <div class="sl">
@@ -49,8 +49,8 @@
               </el-form-item>
             </div>
             <div class="sr">
-              <el-button type="primary" icon="el-icon-search">搜索</el-button>
+              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-              <el-button icon="el-icon-refresh-left">重置</el-button>
+              <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
             </div>
           </div><!--search 默认查询-->
         </div><!--grab-->
@@ -622,21 +622,9 @@ export default {
     },
     // 表单重置
     reset() {
-      this.form = {
+      this.toolList = []
-        userId: undefined,
+      this.resetForm("queryForm")
-        deptId: undefined,
+      this.handleQuery()
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      };
-      this.resetForm("form");
     },
     /**=============================申请使用Start================================*/
     applyUse(){