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

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