KM-Front-Milestone2/src/views/modules/knowledge/statistics/synthesize.vue

<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit>   
        <div slot="toolheader" border="false" foldbtn="false">
          <top-nav @callBack="freshData" title="综合统计" :time="timeData"></top-nav>
        </div>
        <div class="echart-style">
          <div style="width:58%;">
            <div>用户访问总量-{{barDataNum}}
              <span>(uv)</span>
            </div>
            <line-echart @setbarDataNum="setbarDataNum" ref="lineEchart"></line-echart>
          </div>
          <div style="width:40%;">
            <div style="width:90%;z-index: 10;">
              各版块访问量分布
              <span>(pv)</span>
              <pieChange ref="pieChange" @typeChange="typeChange"></pieChange>
            </div>
            <rose-echart v-if="peitype!=2" :roseData="roseData"></rose-echart>
            <pie-echart v-else :pieData="pieData" :pieDataTitleLeft="pieDataTitleLeft" :pieDataTitleRight="pieDataTitleRight"></pie-echart>
          </div>
        </div>
        <div class="card-style">
          <little-card title="知识地图访问量(uv)" :num="dataNum.map" :picture="mapPicture"></little-card>
          <little-card title="知识专辑访问量(uv)" :num="dataNum.album" :picture="albumPicture"></little-card>
          <little-card title="知识仓库访问量(uv)" :num="dataNum.knowledge" :picture="warehousePicture"></little-card>
          <little-card title="搜索服务访问量(uv)" :num="dataNum.search" :picture="searchPicture"></little-card>
        </div>
        <div class="bar-style">
          <div>
            员工访问总量统计
          </div>
          <div class="staff-style">
            <a-form ref="searchForm" layout="inline" class="staff-form">
              <a-form-item class="form-item-style" style="width:240px;" label="查询选项" name="staff">
                <!-- <a-input class="set-input" v-model="staffForm.staff" placeholder="请选择要查询的员工" /> -->
                <div @click="handleAuditShow(1)"  @mouseover="mouseOver(1)" @mouseleave="mouseLeave">
                  <div v-if="iconShowOne" style="position:absolute;z-index: 10;right:8px;cursor:pointer;" @click.stop="handleCloseClick(1)">
                    <a-icon type="close-circle" theme="filled" style="color: rgba(0,0,0,.25)" />
                  </div>
                  <a-select
                    v-model="staffName"
                    :showArrow="false"
                    :open="false"
                    placeholder="请选择查询的员工"
                  ></a-select>
                  </div>
              </a-form-item>
              <a-form-item class="form-item-style" style="width:40%;" label="时间范围" name="staffTime">
                <a-range-picker
                  v-model="staffTime"
                  class="set-range-picker"
                  separator="→"
                  format="YYYY/MM/DD"
                  valueFormat="YYYY-MM-DD"
                >
                </a-range-picker>
              </a-form-item>
              <div class="staff-button">
                <a-button style="margin-right: 8px;" @click="handleResetClick(1)">重置</a-button>
                <a-button type="primary" @click="handleSearchClick(1)">查询</a-button>
              </div>
            </a-form>
          </div>
          <bar-echart-one isOrg="1" :barXData="barXUserData" :barData="barUserDataNew" @downloadClick="downloadClick"></bar-echart-one>
        </div>
        <div class="bar-style">
          <div>
            组织访问总量统计
          </div>
          <div class="staff-style">
            <a-form ref="searchForm" layout="inline" class="staff-form">
              <a-form-item class="form-item-style" style="width:240px;" label="查询选项" name="staff">
                <!-- <a-input class="set-input" v-model="staffForm.staff" placeholder="请选择要查询的员工" /> -->
                <div style="position:relative;" @click="handleAuditShow(2)" @mouseover="mouseOver(2)" @mouseleave="mouseLeave">
                  <div v-if="iconShowTwo" style="position:absolute;z-index: 10;right:8px;cursor:pointer;" @click.stop="handleCloseClick(2)">
                    <a-icon type="close-circle" theme="filled" style="color: rgba(0,0,0,.25)" />
                  </div>
                  <a-select
                    v-model="orgName"
                    :showArrow="false"
                    :open="false"
                    placeholder="请选择查询的组织"
                  ></a-select>
                  </div>
              </a-form-item>
              <a-form-item class="form-item-style" style="width:40%;" label="时间范围" name="staffTime">
                <a-range-picker
                  v-model="orgTime"
                  class="set-range-picker"
                  separator="→"
                  format="YYYY/MM/DD"
                  valueFormat="YYYY-MM-DD"
                >
                </a-range-picker>
              </a-form-item>
              <div class="staff-button">
                <a-button style="margin-right: 8px;" @click="handleResetClick(2)">重置</a-button>
                <a-button type="primary" @click="handleSearchClick(2)">查询</a-button>
              </div>
            </a-form>
          </div>
          <bar-echart-one isOrg="2" :barXData="barXOrgData" :barData="barOrgDataNew" @downloadClick="downloadClick"></bar-echart-one>
        </div>
        <div class="table-style">
          <div>
             组织访问量
  
          </div>
          <!--<rx-grid
            ref="table"
            style="background: #fff;min-height: 400px;"
            :columns="columns"
            :url="statistics.organizationVisits"
            :queryParam="queryParam"
            data-field="result.data"
            :heightAuto="true"
            :showPage="false"
            idField="pkId"
          > 
          </rx-grid>-->
          <DataShow :type="type" interface="0"></DataShow>
        </div>
      </rx-fit>
      <a-modal
        v-model="showAuditFlag"
        class="chooseAuthor"
        width="800"
        :title="isOrgOrUser == 1 ? '员工选择' : '组织选择'"
        centered
        okText="保存"
        @ok="handleSaveOk"
      >
        <org-people
          ref="orgModalRef"
          :isOnlyOrg="isOrgOrUser == 1 ? true : false"
          :key="new Date().getTime()" 
        ></org-people>
      </a-modal>
    </div> 
  </rx-layout>
</template>

<script>
import topNav from './components/topNav'
import pieChange from './components/pieChange'
import lineEchart from './components/LineEchart';
import roseEchart from './components/RoseEchart';
import barEchartOne from './components/BarEchartOne';
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 statistics from '@/api/knowledge/statistics'
import pieEchart from './components/PieEchart';
import DataShow from './components/DataShow';
import orgPeople from './components/orgPeople'
import mixin from "./sMixin/statisticsMixin"
const personMixin = new mixin('personVisit')
export default {
  name: 'synthesize',
  components: {
    topNav,
    lineEchart,
    roseEchart,
    littleCard,
    barEchartOne,
    pieEchart,
    pieChange,
    DataShow,
    orgPeople
  },
  mixins:[ personMixin ],
  data() {
    return {
      peitype:0,
      barDataNum:0,
      dataNum:{
        map:0,
        album:0,
        knowledge:0,
        search:0
      },
      type:'month',
      name: 1,
      timeData:'',
      statistics,
      mapPicture,
      albumPicture,
      warehousePicture,
      searchPicture,
      roseData: [],
      queryParam: {
        type:'month'
      },
      columns:  [
        {
          title: '公司名称',
          dataIndex: 'company',
          align: 'center',
        },
        {
          title: '总访问量',
          dataIndex: 'total',
          align: 'center',
          sorter: true,
          sortField: 'total'
        },
        {
          title: '知识仓库访问量',
          dataIndex: 'knowledge',
          align: 'center',
          sorter: true,
          sortField: 'knowledge'
        },
        {
          title: '知识专辑访问量',
          dataIndex: 'album',
          align: 'center',
          sorter: true,
          sortField: 'album'
        },
        {
          title: '知识地图访问量',
          dataIndex: 'map',
          align: 'center',
          sorter: true,
          sortField: 'map'
        },
        {
          title: '搜索服务访问量',
          dataIndex: 'search',
          align: 'center',
          sorter: true,
          sortField: 'search'
        },
      ]
    }
  },
  mounted() {
    document.getElementsByClassName('ant-form-item-control-wrapper')[0].style.width = '70%'
    document.getElementsByClassName('ant-form-item-control-wrapper')[2].style.width = '70%'
    this.gettotalUserVisits()
    this.getmoduleUserVisits();
    this.getmoduleUserUniqueVisits();
    this.timeData = statistics.getNowDate()
    this.$refs.pieChange.changeType(1)
  },
  methods: {
    typeChange(data){
      this.peitype=data
    },
    //刷新数据
    freshData(data){
      this.type = data
      this.gettotalUserVisits()
      this.getmoduleUserVisits();
      this.getmoduleUserUniqueVisits();
      this.handleSearchClick(1)
      this.handleSearchClick(2)
      this.queryParam.type=data
      this.$nextTick(()=>{
        this.$refs.table.loadData();
      })
      this.timeData = statistics.getNowDate()
    },
    //用户访问总量
    gettotalUserVisits(){
      this.$nextTick(()=>{
        this.$refs.lineEchart.gettotalUserVisits({module: 'total',type:this.type})
      })
    },
    setbarDataNum(data){
      this.barDataNum=data
    },
    //各板块访问量分布
    getmoduleUserVisits(){
      //this.$refs.pieChange.changeType(1)
      //this.peitype=0
      statistics.moduleUserVisits({type:this.type}).then(res => {
        this.roseData = [
          { value: res.data.knowledge, name: Math.floor(res.data.knowledgePercentage*100)+'% 知识仓库' },
          { value: res.data.map, name: Math.floor(res.data.mapPercentage*100)+'% 知识地图' },
          { value: res.data.album, name: Math.floor(res.data.albumPercentage*100)+'% 知识专辑' },
          { value: res.data.search, name: Math.floor(res.data.searchPercentage*100)+'% 搜索服务' }
        ]
        this.pieData=[
          { value: res.data.knowledge, name: '知识仓库' },
          { value: res.data.map, name: '知识地图' },
          { value: res.data.album, name: '知识专辑' },
          { value: res.data.search, name: '搜索服务' }
        ]
        this.pieDataTitleLeft=['知识仓库','知识地图','知识专辑','搜索服务']
      })
    },
    //各板块访问量分布(UV)
    getmoduleUserUniqueVisits(){
      statistics.moduleUserUniqueVisits({module: 'total',type:this.type}).then(res => {
        this.dataNum = res.data
      })
    }
  }
}
</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;
        }
      }
    }
  }

  .card-style {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .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;

    }

    .staff-style {
      height: 60px;
      width: 75%;
      position: absolute;
      top: 4.7%;
      left: 15%;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content:flex-start;

      .staff-form {
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
      }
      .staff-button {
        display: flex;
        height: 40px;
        align-items:flex-start;
        justify-content: center;
        margin-top: 4px;
      }
    }
  }
  .table-style {
    display: inline-block;
    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;
}
.chooseAuthor /deep/.ant-modal-body {
  padding: 0px;
}
</style>