diantou/src_product/iam/audit/auditsource/km/statistics/km-statistics-graphical.vue

<template>
  <div>
    <div :class="$style.statistics">
      <ul>
        <li>
          <img src="../images/statistics-zsk.png" alt="" />
          <div>
            <p :class="$style.all"
              >知识库<span> {{ sdGet('graphicalData.knowledage?.all') || 0 }}</span></p
            >
            <p :class="$style.new"
              >本月上新<span>{{ sdGet('graphicalData.knowledage?.thisMonth') || 0 }}</span></p
            >
          </div>
        </li>
        <li>
          <img src="../images/statistics-zsdt.png" alt="" />
          <div>
            <p :class="$style.all"
              >知识地图<span>{{ sdGet('graphicalData.kmap?.all') || 0 }}</span></p
            >
            <p :class="$style.new"
              >本月上新<span>{{ sdGet('graphicalData.kmap?.thisMonth') || 0 }}</span></p
            >
          </div>
        </li>
        <li
          ><img src="../images/statistics-yzzs.png" alt="" />
          <div>
            <p :class="$style.all"
              >原子知识<span>{{ sdGet('graphicalData.atom?.all') || 0 }}</span></p
            ><p :class="$style.new"
              >本月上新<span>{{ sdGet('graphicalData.atom?.thisMonth') || 0 }}</span></p
            >
          </div>
        </li>
        <li
          ><img src="../images/statistics-fwcs.png" alt="" />
          <div>
            <p :class="$style.all"
              >访问次数<span>{{ sdGet('graphicalData.visits?.all') || 0 }}</span></p
            >
            <p :class="$style.new"
              >本月访问<span>{{ sdGet('graphicalData.visits?.thisMonth') || 0 }}</span></p
            >
          </div>
        </li>
        <li
          ><img src="../images/statistics-zjhd.png" alt="" />
          <div>
            <p :class="$style.all"
              >专家问答<span>{{ sdGet('graphicalData.expert?.all') || 0 }}</span></p
            >
            <p :class="$style.new"
              >本月上新<span>{{ sdGet('graphicalData.expert?.thisMonth') || 0 }}</span></p
            >
          </div>
        </li>
      </ul>
    </div>
    <div :class="$style.graphical">
      <a-row>
        <a-col :span="12">
          <div :class="$style.box">
            <a-card :bordered="false" :class="$style.cardBody">
              <div slot="title" :class="$style.fontslot"><a-icon type="fund" />访问趋势分析</div>
              <div :class="$style.echartclass">
                <sd-echart ref="visitBar" :class="$style.bar" :options="visitBar" autoresize />
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" :class="$style.cardBody">
            <div slot="title" :class="$style.fontslot"><a-icon type="fund" />各部门访问量分布</div>
            <div :class="$style.echartclass">
              <sd-echart
                ref="deptVisitPie"
                :class="$style.piecenter"
                :options="deptVisitPie"
                autoresize
              />
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row :class="$style.marginwidth">
        <a-col :span="12">
          <div :class="$style.box">
            <a-card :bordered="false" :class="$style.cardBody">
              <div slot="title" :class="$style.fontslot"
                ><a-icon type="fund" />各分类访问量分布</div
              >
              <div :class="$style.echartclass">
                <sd-echart
                  ref="classPie"
                  :class="$style.piecenter"
                  :options="classPie"
                  autoresize
                />
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" :class="$style.cardBody">
            <div slot="title" :class="$style.fontslot"><a-icon type="fund" />知识投稿趋势</div>
            <div :class="$style.echartclass">
              <sd-echart
                ref="knowledgeBar"
                :class="$style.bars"
                :options="knowledgeBar"
                autoresize
              />
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row :class="$style.marginwidth">
        <a-col :span="12">
          <div :class="$style.box">
            <a-card :bordered="false" :class="$style.cardBody">
              <div slot="title" :class="$style.fontslot"
                ><a-icon type="fund" />知识投稿部门来源分布</div
              >
              <div :class="$style.echartclass">
                <sd-echart
                  ref="knowledgeClassPie"
                  :class="$style.piecenter"
                  :options="knowledgeClassPie"
                  autoresize
                />
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" :class="$style.cardBody">
            <div slot="title" :class="$style.fontslot"
              ><a-icon type="fund" />知识投稿分类来源分布</div
            >
            <div :class="$style.echartclass">
              <sd-echart
                ref="knowledgeSourcePie"
                :class="$style.piecenter"
                :options="knowledgeSourcePie"
                autoresize
              />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
// 为了按需加载，下面的组件需要手工导入
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/pictorialBar'
import 'echarts/lib/component/title'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/tooltip'
import KmKnowledageService from '../km-knowledage-service'

import components from './_import-components/km-statistics-graphical-import'
const echarts = require('echarts/lib/echarts')
const visitBar = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  xAxis: {
    type: 'category',
    axisTick: {
      alignWithLabel: true,
    },
    axisLabel: {
      rotate: 40,
      interval: 0,
    },
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '访问量',
      type: 'bar',
      barWidth: 8, // 固定柱子宽度
    },
  ],
}
const deptVisitPie = {
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}
const classPie = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    type: 'scroll',
    orient: 'vertical',
    left: 20,
    top: 20,
    formatter: function(name) {
      return echarts.format.truncateText(name, 80, '14px Microsoft Yahei', '…')
    },
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      label: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: [],
    },
  ],
}
const knowledgeBar = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '2%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      fontSize: 14,
    },
    axisLine: {
      lineStyle: {
        color: '#5475c8',
      },
    },
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '投稿数量',
      type: 'bar',
      barWidth: 8,
      barGap: 0,
      label: {
        normal: {
          show: false,
          position: 'insideRight',
        },
      },
      itemStyle: {
        normal: {
          color: '#5c9bd5',
        },
      },
    },
    {
      name: '投稿数量',
      type: 'bar',
      barWidth: 8,
      tooltip: {
        show: false,
      },
      label: {
        normal: {
          show: false,
          position: 'insideRight',
        },
      },
      itemStyle: {
        normal: {
          color: '#3b6488',
        },
      },
    },
    {
      name: '投稿数量',
      type: 'pictorialBar', // 长方体顶部四边形
      symbol: 'diamond',
      symbolRotate: 0,
      symbolSize: ['16', '10'],
      symbolOffset: ['0', '-5'],
      symbolPosition: 'end',
      tooltip: {
        show: false,
      },
      label: {
        normal: {
          show: false,
          position: 'insideRight',
        },
      },
      itemStyle: {
        normal: {
          color: '#548bb9',
        },
      },
    },
  ],
}
const knowledgeClassPie = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c}',
  },
  legend: {
    type: 'scroll',
    orient: 'vertical',
    left: 20,
    top: 20,
    formatter: function(name) {
      return echarts.format.truncateText(name, 80, '14px Microsoft Yahei', '…')
    },
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['30%', '55%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
    },
  ],
}
const knowledgeSourcePie = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    type: 'scroll',
    orient: 'vertical',
    left: 20,
    top: 20,
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      label: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: [],
    },
  ],
}
export default {
  name: 'KmStatisticsGraphical',
  metaInfo: {
    title: '统计分析',
  },
  components,
  data() {
    return {
      visitBar,
      deptVisitPie,
      classPie,
      knowledgeBar,
      knowledgeClassPie,
      knowledgeSourcePie,
      graphicalData: {},
      visitTrend: {},
      knowledgeTrend: {},
      iconStyle: { fontSize: '26px', color: '#fff' },
    }
  },
  mounted() {
    this.queryStatisticsAnalysis()
    // 访问趋势图
    this.queryVisitTrend()
    // 知识投稿趋势图
    this.queryKnowledgeContribute()
    this.queryKnowledgeDeptSource()
    //
    this.queryDeptVisit()

    this.queryclassPie()

    this.queryClassifyVisit()
  },
  methods: {
    queryStatisticsAnalysis() {
      KmKnowledageService.getStatisticsAnalysis().then((res) => {
        this.graphicalData = res.data
      })
    },
    queryVisitTrend() {
      KmKnowledageService.getVisitTrend().then((res) => {
        this.visitBar.xAxis.data = res.data.xAxisData
        this.visitBar.series[0].data = res.data.data
        this.$refs.visitBar.refresh()
      })
    },
    // 知识投稿趋势图
    queryKnowledgeContribute() {
      KmKnowledageService.getKnowledgeContribute().then((res) => {
        this.knowledgeBar.xAxis.data = res.data.xAxisData
        this.knowledgeBar.series[0].data = res.data.data
        this.knowledgeBar.series[1].data = res.data.data
        this.knowledgeBar.series[2].data = res.data.data
        this.$refs.knowledgeBar.refresh()
      })
    },

    queryKnowledgeDeptSource() {
      KmKnowledageService.getKnowledgeDeptSource().then((res) => {
        const json = res.data.data
        this.knowledgeClassPie.legend.data = Object.keys(json)
        const deptArr = []
        for (var i in json) {
          deptArr.push({ value: json[i], name: i })
        }
        this.knowledgeClassPie.series[0].data = deptArr
        this.$refs.knowledgeClassPie.refresh()
      })
    },

    queryDeptVisit() {
      KmKnowledageService.getDeptVisit().then((res) => {
        const json = res.data.data
        const deptArr = []
        for (var i in json) {
          deptArr.push({ value: json[i], name: i })
        }
        this.deptVisitPie.series[0].data = deptArr
        this.$refs.deptVisitPie.refresh()
      })
    },

    queryclassPie() {
      KmKnowledageService.getClassPie().then((res) => {
        const json = res.data.data
        const deptArr = []
        for (var i in json) {
          deptArr.push({ value: json[i], name: i })
        }
        this.classPie.series[0].data = deptArr
      })
    },

    queryClassifyVisit() {
      KmKnowledageService.getClassifyVisit().then((res) => {
        const json = res.data.data
        const deptArr = []
        for (var i in json) {
          deptArr.push({ value: json[i], name: i })
        }
        this.knowledgeSourcePie.series[0].data = deptArr
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.statistics {
  overflow: hidden;
  background-color: $white;
  ul {
    padding-left: 0;
    li {
      position: relative;
      display: flex;
      float: left;
      width: calc(20% - 60px);
      padding-top: 20px;
      margin-right: 30px;
      margin-left: 30px;
      color: $text-color;
      text-align: center;
      list-style: none;

      div {
        padding-left: 10px;
      }

      img {
        width: 58px;
        height: 58px;
      }

      p {
        margin-bottom: 12px;
        text-align: left;
        span {
          padding-left: 10px;
        }
      }
      .all {
        span {
          color: $blue-7;
        }
      }
      .new {
        font-weight: bold;
        span {
          font-weight: bold;
          color: $red-7;
        }
      }
    }
  }
}
.graphical {
  padding-top: 20px;
  .box {
    padding-right: 20px;
  }
  .fontslot {
    :global(.anticon-fund) {
      margin-right: 10px;
      color: $blue-6;
    }
  }
  .bar {
    width: 100%;
  }
  .bars {
    width: 100%;
  }
  .pie {
    width: 100%;
  }
  .marginwidth {
    margin-top: 20px;
  }
  .piecenter {
    width: 100%;
  }
}
</style>