提交

src/config/router.config.js

@@ -221,6 +221,16 @@ export const constantRouterMap = [
                 path: 'album',
                 name: 'album',
                 component: () => import('@/views/modules/knowledge/statistics/album')
+            },
+            {
+                path: 'map',
+                name: 'map',
+                component: () => import('@/views/modules/knowledge/statistics/map')
+            },
+            {
+                path: 'search',
+                name: 'search',
+                component: () => import('@/views/modules/knowledge/statistics/search')
             }
         ]
     },

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

@@ -56,6 +56,7 @@ export default {
           // 将上下两个tootip合成一个
           axisPointer: {
             link: { xAxisIndex: "all" },
+            type: 'none',
           },
           triggerOn: 'mousemove',
           formatter: function(params) {

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

@@ -0,0 +1,116 @@
+<template>
+  <common-echart :option="option" height="380px"></common-echart>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import commonEchart from "./commonEchart";
+export default {
+  components: {
+    commonEchart
+  },
+  props: {
+    barXData: {
+      type: Array,
+      default: () => []
+    },
+    barData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    option() {
+      return {
+        xAxis: {
+          type: "category",
+          offset: 10,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          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,
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          triggerOn: 'mousemove',
+          axisPointer: {
+            type: 'none',
+          },
+          formatter: function(params) {
+            var result = params[0].name + ': ' + params[0].value
+            return result;
+          },
+        },
+        grid: {
+          left: '6.8%',
+          right: '3%'
+        },
+        dataZoom: [ {
+          type: 'inside',// 内置于坐标系中
+          start: 0,
+          end: 80,
+          xAxisIndex: [0],
+          zoomLock: true,
+        }],
+        toolbox: {
+          feature: {
+            dataZoom: {
+              show: false
+            }
+          }
+        },
+        series: [
+          {
+            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
+            }
+          }
+        ]
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -54,10 +54,12 @@ export default {
         },
         tooltip: {
           show: true,
-          // trigger: 'item',
           trigger: 'axis',
           triggerOn: 'mousemove',
-          formatter: '{c}'
+          formatter: '{c}',
+          axisPointer: {
+            type: 'none',
+          },
         },
         grid: {
           left: '12%'

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

@@ -0,0 +1,244 @@
+<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">
+             各类型地图创建量分布
+            </div>
+            <rose-echart :roseData="roseData"></rose-echart>
+          </div>
+        </div>
+        <div class="bar-style">
+          <div>
+            地图页面访问量分布
+              <span>(pv)</span>
+          </div>
+          <bar-echart-one></bar-echart-one>
+        </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 barEchartOne from './components/BarEchartOne';
+import api from '@/api/knowledge/manage';
+export default {
+  name: 'synthesize',
+  components: {
+    topNav,
+    lineEchart,
+    roseEchart,
+    barEchartOne
+  },
+  data() {
+    return {
+      api,
+      tabStatus: true,
+      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: '地图访问量pv',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        }
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleTabsChange() {
+      this.tabStatus = !this.tabStatus
+      if(this.tabStatus) {
+        this.barData = [20, 5000, 901, 3000, 1290, 1,4000, 200, 6000, 300, 2, 4000]
+      } else {
+        this.barData = [1000, 1, 6000, 300, 2000, 7000,1, 5000, 9101, 300, 2000, 5]
+      }
+    }
+  }
+}
+</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;
+
+        span {
+        position: absolute;
+        top: 25%;
+        font-size: 12px;
+        font-weight: 400;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .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/search.vue

@@ -0,0 +1,210 @@
+<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="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> 
+  </rx-layout>
+</template>
+
+<script>
+import topNav from './components/topNav'
+import lineEchart from './components/LineEchart';
+import roseEchart from './components/RoseEchart';
+import api from '@/api/knowledge/manage'
+export default {
+  name: 'synthesize',
+  components: {
+    topNav,
+    lineEchart,
+    roseEchart
+  },
+  data() {
+    return {
+      api,
+      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% EIP系统' },
+        { value: 21, name: '21% 网盘系统' },
+        { 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: 'EIP系统',
+          dataIndex: 'author',
+          align: 'center',
+          sorter: true,
+          sortField: 'author'
+        },
+        {
+          title: 'DCC系统',
+          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() {
+  },
+  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;
+        }
+      }
+    }
+  }
+
+  .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>
+/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>