提交

package-lock.json

@@ -17,7 +17,8 @@
         "codemirror": "^5.65.1",
         "core-js": "^2.6.9",
         "diff-match-patch": "^1.0.5",
-        "echarts": "^5.1.1",
+        "echarts": "^5.3.0",
+        "element-resize-detector": "^1.2.4",
         "enquire.js": "^2.1.6",
         "html2canvas": "^1.4.1",
         "increase-memory-limit": "^1.0.7",
@@ -10922,13 +10923,12 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.2.2",
-      "resolved": "http://nexus.redxun.cn:18081/repository/npm-redxun-group/echarts/-/echarts-5.2.2.tgz",
-      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
-      "license": "Apache-2.0",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.0.tgz",
+      "integrity": "sha512-zENufmwFE6WjM+24tW3xQq4ICqQtI0CGj4bDVDNd3BK3LtaA/5wBp+64ykIyKy3QElz0cieKqSYP4FX9Lv9MwQ==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.2.1"
+        "zrender": "5.3.0"
       }
     },
     "node_modules/editorconfig": {
@@ -10992,9 +10992,8 @@
     },
     "node_modules/element-resize-detector": {
       "version": "1.2.4",
-      "resolved": "http://nexus.redxun.cn:18081/repository/npm-redxun-group/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "resolved": "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
       "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
-      "license": "MIT",
       "dependencies": {
         "batch-processor": "1.0.0"
       }
@@ -26445,10 +26444,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.2.1",
-      "resolved": "http://nexus.redxun.cn:18081/repository/npm-redxun-group/zrender/-/zrender-5.2.1.tgz",
-      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
-      "license": "BSD-3-Clause",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.0.tgz",
+      "integrity": "sha512-Ln2QB5uqI1ftNYMtCRxd+XDq6MOttLgam2tmhKAVA+j0ko47UT+VNlDvKTkqe4K2sJhBvB0EhYNLebqlCTjatQ==",
       "dependencies": {
         "tslib": "2.3.0"
       }
@@ -34470,12 +34468,12 @@
       }
     },
     "echarts": {
-      "version": "5.2.2",
-      "resolved": "http://nexus.redxun.cn:18081/repository/npm-redxun-group/echarts/-/echarts-5.2.2.tgz",
-      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.0.tgz",
+      "integrity": "sha512-zENufmwFE6WjM+24tW3xQq4ICqQtI0CGj4bDVDNd3BK3LtaA/5wBp+64ykIyKy3QElz0cieKqSYP4FX9Lv9MwQ==",
       "requires": {
         "tslib": "2.3.0",
-        "zrender": "5.2.1"
+        "zrender": "5.3.0"
       }
     },
     "editorconfig": {
@@ -34528,7 +34526,7 @@
     },
     "element-resize-detector": {
       "version": "1.2.4",
-      "resolved": "http://nexus.redxun.cn:18081/repository/npm-redxun-group/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "resolved": "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
       "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
       "requires": {
         "batch-processor": "1.0.0"
@@ -46090,9 +46088,9 @@
       }
     },
     "zrender": {
-      "version": "5.2.1",
-      "resolved": "http://nexus.redxun.cn:18081/repository/npm-redxun-group/zrender/-/zrender-5.2.1.tgz",
-      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.0.tgz",
+      "integrity": "sha512-Ln2QB5uqI1ftNYMtCRxd+XDq6MOttLgam2tmhKAVA+j0ko47UT+VNlDvKTkqe4K2sJhBvB0EhYNLebqlCTjatQ==",
       "requires": {
         "tslib": "2.3.0"
       }

package.json

@@ -21,7 +21,8 @@
     "codemirror": "^5.65.1",
     "core-js": "^2.6.9",
     "diff-match-patch": "^1.0.5",
-    "echarts": "^5.1.1",
+    "echarts": "^5.3.0",
+    "element-resize-detector": "^1.2.4",
     "enquire.js": "^2.1.6",
     "html2canvas": "^1.4.1",
     "increase-memory-limit": "^1.0.7",

src/config/router.config.js

@@ -206,10 +206,21 @@ export const constantRouterMap = [
                 name: 'checkProcessMaintain',
                 component: () => import('@/views/modules/knowledge/album/checkProcessMaintain')
             },
+             // 里程碑 3
             {
                 path: 'synthesize',
                 name: 'synthesize',
                 component: () => import('@/views/modules/knowledge/statistics/synthesize')
+            },
+            {
+                path: 'warehouse',
+                name: 'warehouse',
+                component: () => import('@/views/modules/knowledge/statistics/warehouse')
+            },
+            {
+                path: 'album',
+                name: 'album',
+                component: () => import('@/views/modules/knowledge/statistics/album')
             }
         ]
     },

src/views/modules/knowledge/statistics/aJs/chart.resize.js

@@ -0,0 +1,36 @@
+import * as echarts from 'echarts';
+import Vue from 'vue';
+import elementResizeDetectorMaker from "element-resize-detector"
+
+export var version = '0.0.1';
+var compatible = (/^2\./).test(Vue.version);
+if (!compatible) {
+    Vue.util.warn('vue echarts resize directive ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
+}
+let HANDLER = "_vue_echarts_resize_handler"
+
+function bind(el) {
+    unbind(el);
+    el[HANDLER] = function () {
+        let chart = echarts.getInstanceByDom(el);
+        if (!chart) {
+            return;
+        }
+        chart.resize();
+    }
+    //监听window窗体变化，更新echarts大小
+    //window.addEventListener("resize", el[HANDLER])
+    //监听绑定的div大小变化，更新echarts大小
+    elementResizeDetectorMaker().listenTo(el,el[HANDLER])
+    
+}
+function unbind(el) {
+    //window.removeEventListener("resize", el[HANDLER]);
+    elementResizeDetectorMaker().removeListener(el,el[HANDLER])
+    delete el[HANDLER];
+}
+var directive = {
+    bind: bind,
+    unbind: unbind
+};
+Vue.directive("on-echart-resize", directive)

src/views/modules/knowledge/statistics/album.vue

@@ -0,0 +1,226 @@
+<template>
+  <rx-layout>
+    <div slot="center" style>
+      <rx-fit>   
+        <div slot="toolheader" border="false" foldbtn="false">
+          <top-nav title="知识专辑统计" time="2021-10-15 10:00:01"></top-nav>
+        </div>    
+        <div class="echart-style">
+          <div style="width:58%;">
+            <div class="line-style">
+              <div :style="{'border-bottom' : tabStatus ? '2px solid #1890ff' : 'none'}" @click="handleTabsChange">
+                用户访问总量-10000(uv)
+              </div>
+              <div :style="{'border-bottom' : !tabStatus ? '2px solid #1890ff' : 'none'}" @click="handleTabsChange">
+                专辑创建总量-20000
+              </div>
+            </div>
+            <line-echart :barData="barData"></line-echart>
+          </div>
+          <div style="width:40%;">
+            <div class="album-style">
+              专辑页面访问量TOP10
+              <span>(pv)</span>
+            </div>
+            <pie-echart></pie-echart>
+          </div>
+        </div>
+        <div class="bar-style">
+          <div>各分类专辑及收录知识分布
+          </div>
+          <bar-echart></bar-echart>
+        </div>
+        <div class="table-style">
+          <div>
+             组织创建和访问专辑数量TOP10
+          </div>
+          <rx-grid
+            style="background: #fff;min-height: 400px;"
+            :columns="columns"
+            :url="api.findAllKnowledge"
+            :queryParam="queryParam"
+            data-field="result.data"
+            :heightAuto="true"
+            :showPage="false"
+            idField="pkId"
+          > 
+          </rx-grid>
+        </div>
+      </rx-fit>
+    </div> 
+  </rx-layout>
+</template>
+
+<script>
+import topNav from './components/topNav'
+import lineEchart from './components/LineEchart';
+import pieEchart from './components/PieEchart';
+import barEchart from './components/BarEchart';
+import api from '@/api/knowledge/manage';
+export default {
+  name: 'synthesize',
+  components: {
+    topNav,
+    lineEchart,
+    pieEchart,
+    barEchart
+  },
+  data() {
+    return {
+      api,
+      tabStatus: true,
+      barData: [0, 200, 901, 300, 1290, 133,1, 200, 901, 300, 1290, 0],
+      queryParam: {},
+      columns:  [
+        {
+          title: '公司名称',
+          dataIndex: 'author',
+          align: 'center',
+        },
+        {
+          title: '专辑创建总量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '专辑访问量pv',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        }
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleTabsChange() {
+      this.tabStatus = !this.tabStatus
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@gary:  #f8f8f8;
+@white: #fff;
+.rx-fit {
+  padding: 20px 40px!important;
+  background: @gary;
+  overflow-y: auto!important;
+  display: block!important;
+
+  .echart-style {
+    width: 100%;
+    height: 320px;
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 0 20px;
+
+    >div {
+      background-color: #fff;
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+
+      .album-style {
+        position: absolute;
+        top: 8%;
+        left: 4%;
+        font-weight: bold;
+
+        span {
+          position: absolute;
+          top: 25%;
+          font-size: 12px;
+          font-weight: 400;
+          margin-left: 8px;
+        }
+      }
+
+      .line-style {
+        position: absolute;
+        top: 8%;
+        left: 4%;
+        z-index: 1000;
+        font-weight: bold;
+        display:flex; 
+
+        div {
+          cursor: pointer;
+        }
+
+        div+div {
+          margin-left: 20px;
+        }
+      }
+      
+      // >div:last-child {
+      //   position: absolute;
+      //   top: 8%;
+      //   left: 4%;
+      //   font-weight: bold;
+
+      //   span {
+      //     position: absolute;
+      //     top: 25%;
+      //     font-size: 12px;
+      //     font-weight: 400;
+      //     margin-left: 8px;
+      //   }
+      // }
+    }
+  }
+
+  .bar-style {
+    height: 400px;
+    background:#fff;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    margin: 10px 0 20px;
+
+    >div:first-child {
+      position: absolute;
+      top: 8%;
+      left: 2.3%;
+      font-weight: bold;
+
+
+    }
+  }
+
+  .table-style {
+    width: 100%;
+    background-color: #fff;
+    margin-top: 20px;
+    padding: 20px 30px;
+
+    >div:first-child {
+      position: relative;
+      font-weight: bold;
+      margin-bottom: 20px;
+
+    }
+  }
+}
+</style>
+<style scoped>
+/deep/   .divdefault {
+  position: inherit!important;
+  overflow: inherit!important;
+}
+/deep/ .gridContent{
+  border: none;
+}
+ /deep/.ant-table-thead > tr > th {
+  text-align: center; 
+  height: 54px;
+}
+/deep/ .ant-table-tbody > tr > td {
+  height: 54px;
+}
+</style>

src/views/modules/knowledge/statistics/components/BarEchart.vue

@@ -1,9 +1,9 @@
 <template>
-  <common-echart :option="option" :width="width" :height="height"></common-echart>
+  <common-echart :option="option" height="380px"></common-echart>
 </template>
 
 <script>
-/* 组件 */
+import * as echarts from "echarts";
 import commonEchart from "./commonEchart";
 export default {
   components: {
@@ -17,30 +17,13 @@ export default {
     barData: {
       type: Array,
       default: () => []
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: ''
-    },
-  },
-  data() {   
-    return {}
+    }
   },
   computed: {
     option() {
       return {
-        // title: {
-        //   text: '用户总访问量-10000',
-        //   top: 20,
-        //   left: '5%'
-        // },
         xAxis: {
-          type: 'category',
-          boundaryGap: false,
+          type: "category",
           offset: 10,
           axisLine: {
             show: false
@@ -48,57 +31,138 @@ export default {
           axisTick: {
             show: false
           },
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          axisLabel: {
+            show: true,
+            rotate: 50,
+            formatter: function(value) {
+              if (value.length > 5) {
+                return value.match(/.{1,5}/g).join('\n');
+              }
+              return value;
+            }
+          },
+          data: ['一级分类A123', '一级分类B', '一级分类C', '一级分类D', '一级分类E', '一级分类F', '一级分类G',
+          '一级分类A', '一级分类B', '一级分类C', '一级分类D', '一级分类E', '一级分类F', '一级分类G',
+          '一级分类A', '一级分类B', '一级分类C', '一级分类D', '一级分类E', '一级分类F', '一级分类G',
+          '一级分类A', '一级分类B', '一级分类C', '一级分类D', '一级分类E', '一级分类F', '一级分类G',]
         },
         yAxis: {
-          type: 'value',
-          offset: 15,
-          axisLine: {
-            show: false
+          type: "value",
+           offset: 15,
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          // 将上下两个tootip合成一个
+          axisPointer: {
+            link: { xAxisIndex: "all" },
           },
-          splitLine: {
-            show: false
+          triggerOn: 'mousemove',
+          formatter: function(params) {
+            var result = '';
+            let classifyNum = 0
+            for (var i = 0; i < params.length; i++) {
+                var param = params[i];
+                result += param.seriesName + ': ' + param.value + '<br/>';
+                classifyNum += param.value
+                if(i == (params.length - 1)) {
+                   result += param.name + ': ' + classifyNum ;
+                }
+            }
+            return result;
+          }
+        },
+        grid: {
+          left: '6.8%',
+          right: '3%'
+        },
+        legend: {
+          icon: 'roundRect',
+          top: '2.5%',
+          data: [
+            {
+              name: '文档知识',
+              itemStyle: {
+                color: '#1890ff'
+              }
+            },
+            {
+              name: '维基知识',
+              itemStyle: {
+                color: '#ffc20d'
+              }
+            }
+          ],
+        },
+        dataZoom: [ {
+          type: 'inside',// 内置于坐标系中
+          start: 0,
+          end: 80,
+          xAxisIndex: [0],
+          zoomLock: true,
+        }],
+        toolbox: {
+          feature: {
+            dataZoom: {
+              show: false
+            }
           }
         },
         series: [
           {
-            data: [0, 200, 901, 300, 1290, 133,1, 200, 901, 300, 1290, 0],
-            type: 'line',
-            smooth: true,
-            symbolSize: 0,
-            itemStyle: {
-              normal: {
-                color: '#76bdff',
-                borderWidth: 0,
-                areaStyle: {
-                  type: 'default',
-                  opacity: 1
-                }
-              }
+            name: '文档知识',
+            data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+            barGap: 0, 
+            showBackground: false,
+            barWidth: '10px',
+            itemStyle:  {
+              barBorderRadius: [10, 10, 0, 0], //柱体圆角   
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, [{//代表渐变色从正上方开始
+                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
+                    color: '#1890ff'
+                  }, //柱图渐变色
+                  {
+                    offset: 1, //指100%处的颜色
+                    color: '#afedfd'
+                  }
+                ]
+              )
+            },
+            emphasis: {
+              disabled: true
+            },
+          },
+          {
+            name: '维基知识',
+            data: [250, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+            showBackground: false,
+            barWidth: '10px',
+            itemStyle:  {
+              barBorderRadius: [10, 10, 0, 0],
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#ffc20d'
+                  },
+                  {
+                    offset: 1,
+                    color: '#ffecb6'
+                  }
+                ]
+              )
+            },
+            emphasis: {
+              disabled: true
             }
           }
         ]
-        // xAxis: {
-        //   type: "category",
-        //   data: this.barXData
-        // },
-        // yAxis: {
-        //   type: "value"
-        // },
-        // series: [
-        //   {
-        //     data: this.barData,
-        //     type: "bar",
-        //     showBackground: true,
-        //     backgroundStyle: {
-        //       color: "rgba(180, 180, 180, 0.2)"
-        //     }
-        //   }
-        // ]
       };
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped></style>

src/views/modules/knowledge/statistics/components/LineEchart.vue

@@ -0,0 +1,109 @@
+<template>
+  <common-echart :option="option"></common-echart>
+</template>
+
+<script>
+/* 组件 */
+import commonEchart from "./commonEchart";
+export default {
+  components: {
+    commonEchart
+  },
+  props: {
+    barXData: {
+      type: Array,
+      default: () => []
+    },
+    barData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {   
+    return {}
+  },
+  computed: {
+    option() {
+      return {
+        // title: {
+        //   text: '用户总访问量-10000',
+        //   top: 20,
+        //   left: '5%'
+        // },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          offset: 10,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: {
+          type: 'value',
+          offset: 15,
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          show: true,
+          // trigger: 'item',
+          trigger: 'axis',
+          triggerOn: 'mousemove',
+          formatter: '{c}'
+        },
+        grid: {
+          left: '12%'
+        },
+        series: [
+          {
+            data: this.barData,
+            type: 'line',
+            smooth: true,
+            symbolSize: 1,
+            emphasis: {
+              disabled: true
+            },
+            itemStyle: {
+              normal: {
+                color: '#3da1ff',
+                borderWidth: 0,
+                areaStyle: {
+                  type: 'default',
+                  opacity: 1
+                }
+              }
+            }
+          }
+        ]
+        // xAxis: {
+        //   type: "category",
+        //   data: this.barXData
+        // },
+        // yAxis: {
+        //   type: "value"
+        // },
+        // series: [
+        //   {
+        //     data: this.barData,
+        //     type: "bar",
+        //     showBackground: true,
+        //     backgroundStyle: {
+        //       color: "rgba(180, 180, 180, 0.2)"
+        //     }
+        //   }
+        // ]
+      };
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/modules/knowledge/statistics/components/PieEchart.vue

@@ -0,0 +1,97 @@
+<template>
+  <common-echart :option="option"></common-echart>
+</template>
+
+<script>
+/* 组件 */
+import commonEchart from "./commonEchart";
+export default {
+  components: {
+    commonEchart
+  },
+  props: {
+    pieData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    option() {
+      return {
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          triggerOn: 'mousemove',
+          formatter: '{c}'
+        },
+        legend: [
+          {
+            orient: 'vertical',
+            data: ['测试专辑编辑编辑专辑', 'B', 'C', 'D', 'E'],
+            itemWidth: 15,
+            right: '20%',
+            top: 'middle',
+            formatter: function (name) {
+              if(name.length < 6) return name
+              return name.slice(0, 6) + '\n' + name.slice(6);
+            }
+          },
+          {
+            orient: 'vertical',
+            data: ['F', 'G', 'H', 'I', 'J'],
+            itemWidth: 15,
+            right: '10%',
+            top: 'middle',
+            formatter: function (name) {
+              if(name.length < 6) return name
+              return name.slice(0, 6) + '\n' + name.slice(6);
+            }
+          }
+        ],
+        color: ['#1890ff', '#cdddfd', '#ffbf00', '#ffe0c7', '#61ddaa', '#cdf3e4', '#7262fd', '#d3cefd', '#f08bb4','#ffe0ed'],
+        grid: {
+          left: '0%'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            center: ['30%', '50%'],
+            radius: ['40%', '70%'],
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2,
+            },
+            // emphasis: {
+            //   color: 'transparent',
+            // },
+            label: {
+              show: true,
+              position: 'inside',
+              color: '#fff',
+              formatter: '{c}'
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '测试专辑编辑编辑专辑' },
+              { value: 735, name: 'B' },
+              { value: 580, name: 'C' },
+              { value: 484, name: 'D' },
+              { value: 300, name: 'E' },
+              { value: 300, name: 'F' },
+              { value: 300, name: 'G' },
+              { value: 300, name: 'H' },
+              { value: 300, name: 'I' },
+              { value: 300, name: 'J' },
+            ]
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/modules/knowledge/statistics/components/RoseEchart.vue

@@ -1,5 +1,5 @@
 <template>
-  <common-echart :option="option" :height="height"></common-echart>
+  <common-echart :option="option"></common-echart>
 </template>
 
 <script>
@@ -13,35 +13,35 @@ export default {
     roseData: {
       type: Array,
       default: () => []
-    },
-    height: {
-      type: String,
-      default: ''
-    },
+    }
   },
   computed: {
     option() {
       return {
-        color: ["#ffffff","#1890ff","#badaf7","#7dc1ff"],
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          triggerOn: 'mousemove',
+          formatter: '{c}'
+        },
+        color: ["rgba(24,144,255,0.2)","rgba(24,144,255,1)","rgba(24,144,255,0.5)","rgba(24,144,255,0.8)"],
         series: [
           {
             type: 'pie',
             radius: '70%',
             center: ['50%', '50%'],
-            data: [
-              { value: 19, name: '19% 知识仓库' },
-              { value: 40, name: '40% 知识地图' },
-              { value: 20, name: '20% 知识专辑' },
-              { value: 21, name: '21% 搜索服务' }
-            ],
+            data: this.roseData,
             roseType: 'radius',
             labelLine: {
               lineStyle: {
-                color: '#000'
+                color: '#000',
+                width: 0.5
               },
-              smooth: 0.2,
               length: 10,
               length2: 20
+            },
+            emphasis: {
+              disabled: true
             }
           }
         ],

src/views/modules/knowledge/statistics/components/card.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="little-card" >
+    <div>
+      <div>{{ num }}</div>
+      <div>{{ title }}</div>
+    </div>
+    <div>
+      <img :src="picture" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topNav',
+  props: {
+    title: {
+      type: String
+    },
+    num: {
+      type: String
+    },
+    picture: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.little-card {
+  width:23.5%;
+  background: #fff;
+  height: 100px;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  padding:10px 20px 10px 30px;
+
+  >div:first-child {
+    display:flex;
+    flex-direction:column;
+
+    div:first-child {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    div:last-child {
+      font-size: 8px;
+      color:#b1b1b1;
+      margin-top:5px;
+    }
+  }
+}
+</style>

src/views/modules/knowledge/statistics/components/commonEchart.vue

@@ -2,12 +2,15 @@
   <div
     :style="{ width: width, height: height }"
     ref="baseEchartRef"
+    id="baseEchart"
+    v-on-echart-resize
   ></div>
 </template>
 
 <script>
 import * as echarts from "echarts";
-
+import elementResizeDetectorMaker from "element-resize-detector";
+import "../aJs/chart.resize";
 export default {
   props: {
     width: {
@@ -23,38 +26,41 @@ export default {
       default: () => {}
     }
   },
+  watch: {
+    option() {
+      this._initEchart();
+    }
+  },
   mounted() {
+    // this.$nextTick(() => {
+    //   setTimeout(() => {
+    //     this._initEchart()
+    //   },0)
+    // })
     this._initEchart()
+    let erd = elementResizeDetectorMaker();
+    let that = this;
+    erd.listenTo(document.getElementById("baseEchart"), (element) => {
+      // let width = element.offsetWidth;
+      // let height = element.offsetHeight;
+      that.$nextTick(() => {
+        //使echarts尺寸重置
+        echarts.init(document.getElementById("baseEchart")).resize();
+      });
+    });
   },
-  computed:{
-		listenfooterInfo() {
-			return this.$store.state.appSetting.collapsed;
-		}
+  computed: {
+
   },
   methods: {
-    _initEchart() {
+     _initEchart() {
       const echartInstance = echarts.init(this.$refs.baseEchartRef);
       echartInstance.setOption(this.option);
       // 监听window尺寸的变化
-      window.addEventListener("resize", () => {
-        echartInstance.resize();
-      });
-    }
-  },
-  watch: {
-    // option: {
-    //   handler(newVal,oldVal){
-    //     this._initEchart()
-    //   },
-    //   immediate: true,  
-    //   deep: true
-    // },
-    listenfooterInfo: {
-      handler(newVal,oldVal) { //特别注意，不能用箭头函数，箭头函数，this指向全局
-        this._initEchart()
-      },
-      immediate: true,  //刷新加载 立马触发一次handler
-      deep: true  // 可以深度检测到 obj 对象的属性值的变化
+      // echartInstance.resize();
+      // window.addEventListener("resize", () => {
+      //   echartInstance.resize();
+      // });
     }
   }
 };

src/views/modules/knowledge/statistics/components/topNav.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="mainContent">
+    <div class="body">
+      <div class="content">
+        <div>
+          <span>{{ title }}</span>
+          <span>更新时间: {{ time }}</span>
+        </div>
+        <div>
+          <span v-for="(item,index) in lookData" 
+                :key="index"
+                :style="{color: lookIndex == index ? '#4285f4' : '#b1b1b1'}"
+                @click="handleSearchClick(index)">
+            {{ item }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topNav',
+  props: {
+    title: {
+      type: String
+    },
+    time: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      lookIndex: 0,
+      lookData: ['按月查看','按年查看','查看全部']
+    }
+  },
+  methods: {
+    handleSearchClick(index) {
+      this.lookIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mainContent {
+  width: 100%;
+  .body {
+    background: #fff;
+    padding: 10px 40px 10px 20px;
+    .content {
+      background: #fff;
+      height:40px;
+      display:flex;
+      justify-content: space-between;
+      align-items: center;
+
+      >div:first-child {
+      
+        span:nth-child(1) {
+          font-size: 16px;
+          font-weight: bold;
+        }
+
+        span:nth-child(2) {
+          margin-left:20px;
+          font-size: 8px;
+          color: #b1b1b1;
+        }
+      }
+
+      >div:last-child {
+        font-size: 13px;
+
+        span {
+          cursor: pointer;
+        }
+
+        span+span {
+          margin-left:30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/modules/knowledge/statistics/synthesize.vue

@@ -3,36 +3,45 @@
     <div slot="center" style>
       <rx-fit>   
         <div slot="toolheader" border="false" foldbtn="false">
-          <div class="mainContent">
-            <div class="body">
-              <div class="content">
-                <div>
-                  <span>综合统计</span>
-                  <span>更新时间: 2021-10-15 10:00:00</span>
-                </div>
-                <div>
-                  <span>按月查看</span>
-                  <span>按年查看</span>
-                  <span>查看全部</span>
-                </div>
-              </div>
-            </div>
-          </div>
+          <top-nav title="综合统计" time="2021-10-15 10:00:01"></top-nav>
         </div>    
-        <div style="width:100%;height:320px;display:flex;justify-content: space-between;">
-          <div style="width:58%;background-color: #fff;position: relative;display: flex;align-items: flex-end;">
-            <div style="position:absolute;top: 8%;left: 4%;font-weight: bold;">用户访问总量-10000
-              <span style="position:absolute;top:25%;font-size:12px;font-weight: 400;margin-left: 8px;">(uv)</span>
+        <div class="echart-style">
+          <div style="width:58%;">
+            <div>用户访问总量-10000
+              <span>(uv)</span>
             </div>
-            <bar-echart height="300px"></bar-echart>
+            <line-echart :barData="barData"></line-echart>
           </div>
-          <div  style="width:40%;background-color: #fff;position: relative;display: flex;align-items: flex-end;">
-            <div style="position:absolute;top: 8%;left: 4%;font-weight: bold;">
+          <div style="width:40%;">
+            <div>
               各版块访问量分布
-              <span style="position:absolute;top:25%;font-size:12px;font-weight: 400;margin-left: 8px;">(pv)</span>
+              <span>(pv)</span>
             </div>
-            <rose-echart height="300px"></rose-echart>
+            <rose-echart :roseData="roseData"></rose-echart>
+          </div>
+        </div>
+        <div class="card-style">
+          <little-card title="知识地图访问量(uv)" num="2696" :picture="mapPicture"></little-card>
+          <little-card title="知识专辑访问量(uv)" num="2696" :picture="albumPicture"></little-card>
+          <little-card title="知识仓库访问量(uv)" num="2696" :picture="warehousePicture"></little-card>
+          <little-card title="搜索服务访问量(uv)" num="2696" :picture="searchPicture"></little-card>
+        </div>
+        <div class="table-style">
+          <div>
+             组织访问量TOP10
+             <span>(pv)</span>
           </div>
+          <rx-grid
+            style="background: #fff;min-height: 400px;"
+            :columns="columns"
+            :url="api.findAllKnowledge"
+            :queryParam="queryParam"
+            data-field="result.data"
+            :heightAuto="true"
+            :showPage="false"
+            idField="pkId"
+          > 
+          </rx-grid>
         </div>
       </rx-fit>
     </div> 
@@ -40,16 +49,80 @@
 </template>
 
 <script>
-import barEchart from './components/BarEchart';
+import topNav from './components/topNav'
+import lineEchart from './components/LineEchart';
 import roseEchart from './components/RoseEchart';
+import littleCard from './components/card';
+import mapPicture from '@/assets/img/map.png'
+import albumPicture from '@/assets/img/album.png'
+import warehousePicture from '@/assets/img/warehouse.png'
+import searchPicture from '@/assets/img/search.png'
+import api from '@/api/knowledge/manage'
 export default {
   name: 'synthesize',
   components: {
-    barEchart,
-    roseEchart
+    topNav,
+    lineEchart,
+    roseEchart,
+    littleCard
   },
   data() {
     return {
+      api,
+      mapPicture,
+      albumPicture,
+      warehousePicture,
+      searchPicture,
+      barData: [0, 200, 901, 300, 1290, 133,1, 200, 901, 300, 1290, 0],
+      roseData: [
+        { value: 19, name: '19% 知识仓库' },
+        { value: 40, name: '40% 知识地图' },
+        { value: 20, name: '20% 知识专辑' },
+        { value: 21, name: '21% 搜索服务' }
+      ],
+      queryParam: {},
+      columns:  [
+        {
+          title: '公司名称',
+          dataIndex: 'author',
+          align: 'center',
+        },
+        {
+          title: '总访问量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '知识仓库访问量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '知识专辑访问量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '知识地图访问量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '搜索服务访问量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+      ]
     }
   },
   created() {
@@ -67,45 +140,63 @@ export default {
   background: @gary;
   overflow-y: auto!important;
   display: block!important;
-  .fit-header {
-    .mainContent {
-      width: 100%;
-      .body {
-        background: @white;
-        padding: 10px 40px 10px 20px;
-        .content {
-          background: @white;
-          height:40px;
-          display:flex;
-          justify-content: space-between;
-          align-items: center;
 
-          >div:first-child {
-          
-            span:nth-child(1) {
-              font-size: 16px;
-              font-weight: bold;
-            }
+  .echart-style {
+    width: 100%;
+    height: 320px;
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 0 20px;
 
-            span:nth-child(2) {
-              margin-left:20px;
-              font-size: 8px;
-              color: #b1b1b1;
-            }
-          }
+    >div {
+      background-color: #fff;
+      position: relative;
+      display: flex;
+      align-items: flex-end;
 
-          >div:last-child {
-            color: #b1b1b1;
-            font-size: 13px;
+      >div:first-child {
+        position: absolute;
+        top: 8%;
+        left: 4%;
+        font-weight: bold;
 
-            span+span {
-              margin-left:30px;
-            }
-          }
+        span {
+          position: absolute;
+          top: 25%;
+          font-size: 12px;
+          font-weight: 400;
+          margin-left: 8px;
         }
       }
     }
   }
+
+  .card-style {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .table-style {
+    width: 100%;
+    background-color: #fff;
+    margin-top: 20px;
+    padding: 20px 30px;
+
+    >div:first-child {
+      position: relative;
+      font-weight: bold;
+      margin-bottom: 20px;
+
+       span {
+          position: absolute;
+          top: 25%;
+          font-size: 12px;
+          font-weight: 400;
+          margin-left: 8px;
+        }
+    }
+  }
 }
 </style>
 <style scoped>
@@ -113,4 +204,14 @@ export default {
   position: inherit!important;
   overflow: inherit!important;
 }
+/deep/ .gridContent{
+  border: none;
+}
+ /deep/.ant-table-thead > tr > th {
+  text-align: center; 
+  height: 54px;
+}
+/deep/ .ant-table-tbody > tr > td {
+  height: 54px;
+}
 </style>

src/views/modules/knowledge/statistics/warehouse.vue

@@ -0,0 +1,195 @@
+<template>
+  <rx-layout>
+    <div slot="center" style>
+      <rx-fit>   
+        <div slot="toolheader" border="false" foldbtn="false">
+          <top-nav title="知识仓库统计" time="2021-10-15 10:00:01"></top-nav>
+        </div>    
+        <div class="echart-style">
+          <div style="width:58%;">
+            <div>用户访问总量-10000
+              <span>(uv)</span>
+            </div>
+            <line-echart :barData="barData"></line-echart>
+          </div>
+          <div style="width:40%;">
+            <div>
+              知识类型页面访问量分布
+              <span>(pv)</span>
+            </div>
+            <rose-echart :roseData="roseData"></rose-echart>
+          </div>
+        </div>
+        <div class="bar-style">
+          <div>各一级分类知识创建数量
+          </div>
+          <bar-echart></bar-echart>
+        </div>
+        <div class="table-style">
+          <div>
+             组织创建知识数量TOP10
+          </div>
+          <rx-grid
+            style="background: #fff;min-height: 400px;"
+            :columns="columns"
+            :url="api.findAllKnowledge"
+            :queryParam="queryParam"
+            data-field="result.data"
+            :heightAuto="true"
+            :showPage="false"
+            idField="pkId"
+          > 
+          </rx-grid>
+        </div>
+      </rx-fit>
+    </div> 
+  </rx-layout>
+</template>
+
+<script>
+import topNav from './components/topNav'
+import lineEchart from './components/LineEchart';
+import roseEchart from './components/RoseEchart';
+import barEchart from './components/BarEchart';
+import api from '@/api/knowledge/manage';
+export default {
+  name: 'synthesize',
+  components: {
+    topNav,
+    lineEchart,
+    roseEchart,
+    barEchart
+  },
+  data() {
+    return {
+      api,
+      barData: [0, 200, 901, 300, 1290, 133,1, 200, 901, 300, 1290, 0],
+      roseData: [ 
+        { value: 70, name: '70% 文档知识' },
+        { value: 30, name: '19% 维基知识' },
+      ],
+      queryParam: {},
+      columns:  [
+        {
+          title: '公司名称',
+          dataIndex: 'author',
+          align: 'center',
+        },
+        {
+          title: '知识总量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '文档知识数量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: '维基知识数量',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        }
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@gary:  #f8f8f8;
+@white: #fff;
+.rx-fit {
+  padding: 20px 40px!important;
+  background: @gary;
+  overflow-y: auto!important;
+  display: block!important;
+
+  .echart-style {
+    width: 100%;
+    height: 320px;
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 0 20px;
+
+    >div {
+      background-color: #fff;
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+
+      >div:first-child {
+        position: absolute;
+        top: 8%;
+        left: 4%;
+        font-weight: bold;
+
+        span {
+          position: absolute;
+          top: 25%;
+          font-size: 12px;
+          font-weight: 400;
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+
+  .bar-style {
+    height: 400px;
+    background:#fff;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    margin: 10px 0 20px;
+
+    >div:first-child {
+      position: absolute;
+      top: 8%;
+      left: 2.3%;
+      font-weight: bold;
+
+    }
+  }
+
+  .table-style {
+    width: 100%;
+    background-color: #fff;
+    margin-top: 20px;
+    padding: 20px 30px;
+
+    >div:first-child {
+      position: relative;
+      font-weight: bold;
+      margin-bottom: 20px;
+
+    }
+  }
+}
+</style>
+<style scoped>
+/deep/   .divdefault {
+  position: inherit!important;
+  overflow: inherit!important;
+}
+/deep/ .gridContent{
+  border: none;
+}
+ /deep/.ant-table-thead > tr > th {
+  text-align: center; 
+  height: 54px;
+}
+/deep/ .ant-table-tbody > tr > td {
+  height: 54px;
+}
+</style>