wenhuaDate_admin/src/components/page/Home/index.vue

<template>
  <div class="content">
    <a-row class="tab">
      <a-col :span="4" class="tab_item" v-for="(item,index) in tabList" :key="index" @click="goPage(item.url)">
        <img src="../../../assets/img/accountList.png" alt="">
        <span>{{item.name}}（{{item.num}}）</span>
      </a-col>
    </a-row>
    <div class="tab tadayWork">
      <p class="tadayWork_title">昨日工作</p>
      <div>

      </div>
      <a-row justify="space-between">
        <a-col :span="index==0 ?4:index==1?4:index==2?4:3"  class="tadayWork_item" v-for="(item,index) in tadayWorkList" :key="index">
          <p class="tadayWork_price">
            <span v-if="item.id=='deal_money' || item.id=='order_money'">¥</span>
            {{item.price}}
          </p>
          <span>{{item.name}}</span>
        </a-col>
      </a-row>
    </div>
    <a-row class="statistics" type="flex" justify="space-between" :gutter="15">
      <a-col  :span="12" >
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" class="statistics_item">
          <div class="salesCard">
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
              <div class="extra-wrapper" slot="tabBarExtraContent">
                <div class="extra-item">
                  <!-- <a>今日</a>
                  <a>本周</a> -->
                  <a :class="active=='day'?'active1':''" @click="changeTiem('day',0)">按日</a>
                  <a :class="active=='month'?'active1':''" @click="changeTiem('month',0)">按月</a>
                  <a :class="active=='year'?'active1':''" @click="changeTiem('year',0)">按年</a>
                </div>
                <!-- <a-range-picker  class="picker"/> -->
              </div>
              <a-tab-pane loading="true" tab="销售额" key="1">
                <!-- <schart class="schart" canvasId="bar" :options="options1"></schart> -->
                <div id="main" style="width: 100%; " class="schart"></div>
              </a-tab-pane>
              <!-- <a-tab-pane tab="访问量" key="2">
                <schart class="schart" canvasId="bar" :options="options1"></schart>
              </a-tab-pane> -->
            </a-tabs>
          </div>
        </a-card>
      </a-col>
      <a-col  :span="12">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" class="statistics_item">
          <div class="salesCard">
            <a-tabs default-active-key="2" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
              <div class="extra-wrapper" slot="tabBarExtraContent">
                <div class="extra-item">
                  <!-- <a>今日</a>
                  <a>本周</a> -->
                  <a :class="active1=='day'?'active1':''" @click="changeTiem('day',1)">按日</a>
                  <a :class="active1=='month'?'active1':''" @click="changeTiem('month',1)">按月</a>
                  <a :class="active1=='year'?'active1':''" @click="changeTiem('year',1)">按年</a>
                </div>
                <!-- <a-range-picker :style="{width: '256px'}" /> -->
              </div>
              <a-tab-pane :tab="'销售量（元）'" key="2">
                <a-row>
                  <a-col>
                    <div class="rank">
                      <ul class="list">
                        <li :key="index" v-for="(item, index) in rankList1">
                          <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
                          <span>{{ item.username }}</span>
                          <span>￥{{ item.total_money }}</span>
                        </li>
                      </ul>
                    </div>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane :tab="'访问量（次）'" key="1">
                <a-row>
                  <a-col>
                    <div class="rank">
                      <ul class="list">
                        <li :key="index" v-for="(item, index) in rankList">
                          <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
                          <span>{{ item.username }}</span>
                          <span>{{ item.count }}</span>
                        </li>
                      </ul>
                    </div>
                  </a-col>
                </a-row>
              </a-tab-pane>

            </a-tabs>
          </div>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>
<script>
import Schart from 'vue-schart';
import {home} from '../../../api/index'
export default {
  data() {
    return{
      tabList:[
        {name:'全部文化数据查询',url:'/DataQuery',num:'',id:'goods_count'},
        {name:'待付款订单',url:'/pendingPayment',num:'',id:'awaitpay_count'},
        {name:'待交付订单',url:'/toBeDelivered',num:'',id:'awaitdelivery_count'},
        {name:'待结算订单',url:'/toBeSettled',num:'',id:'awaitclose_count'},
        {name:'已终止订单',url:'/completed',num:'',id:'complete_count'},
        {name:'已关闭订单',url:'/closed',num:'',id:'close_count'},
      ],
      tadayWorkList:[
        {name:'订单金额总额',price:'',id:'deal_money'},
        {name:'标的价款总额',price:'',id:'order_money'},
        {name:'交易文化数据',price:'',id:'deal_goods_count'},
        {name:'已发布文化数据',price:'',id:'shelf_count'},
        {name:'委托期满文化数据',price:'',id:'out_count'},
        {name:'新增订单',price:'',id:'yester_order_count'},
        {name:'已终止订单',price:'',id:'yester_complete_count'},
      ],
      query:{
        leftDate:'year',
        rightDate:'year',
        saleRankingDate:'year'
      },
      homeDate:{},
      loading: false,
      barData:[],
      barData2:[],
      rankList:[],
      rankList1:[],
      active:'year',
      active1:'year',
      options1: {
        type: 'bar',
        showValue:false,
        legend:{
          display:true
        },
        // title: {
        //   text: '最近一周各品类销售图'
        // },
        bgColor: '#fbfbfb',
        labels: ['周一', '周二', '周三', '周四', '周五'],
        datasets: [
          {
            label: '订单总额',
            data: [234, 278, 270, 190, 230]
          },
          {
            label: '百货',
            data: [164, 178, 190, 135, 160]
          },
          // {
          //   label: '食品',
          //   data: [144, 198, 150, 235, 120]
          // }
        ]
      },
    }
  },
  components:{
    Schart
  },
  created(){
    this.getList()
  },
  mounted() {
    // this.drawChart();
  },
  methods:{
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        // title: {
        //   text: "ECharts 入门示例",
        // },
        color: ['#4A90E2','#F5A623',],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          //这里改变样式
          formatter: '<strong> {b0}</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #4A90E2;"></span> 订单金额总额：<strong>{c0}</strong>元 <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #F5A623;"></span> 标的价款总额：<strong>{c1}</strong>元'
        },
        legend: {
          data: ["订单金额总额",'标的价款总额'],
        },

        xAxis: {
          data: this.options1.labels,
        },
        yAxis: {},
        series: this.options1.datasets,

      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    changeTiem(time,type){
      if(type==1){
        this.query.rightDate=time
        this.query.saleRankingDate=time
        this.active1=time
      }else{
        this.query.leftDate=time
        this.active=time
      }
      this.getList()
    },
    goPage(url){
      this.$router.push(url)
    },
    getList(){
      home(this.query).then(res=>{
        if(res.code==200){
          this.homeDate=res.data
          for(let item in res.data){
            this.tabList.map(tabItem=>{
              if(item==tabItem.id){
                tabItem.num=res.data[item]
              }
            })
            this.tadayWorkList.map(workItem=>{
              if(item==workItem.id){
                workItem.price=res.data[item]
              }
            })
          }
          this.rankList=res.data.entrust_ranking
          this.rankList1=res.data.entrust_sale_ranking
          // let type={type:'bar'}
          let style= {
            normal: {
              label: {
                formatter: "元",
                show: true,
                position: "top",
                textStyle: {
                  fontWeight: "bolder",
                  fontSize: "12",
                  color: "#fff"
                }
              }
            }
          }
          res.data.treeMap.map(item=>{
            item.type='bar'
            item.name=item.label
            item.smooth=true
            // item.itemStyle=style
          })

          this.options1.datasets=res.data.treeMap
          console.info(this.options1.datasets)
          this.options1.labels=res.data.label
          this.drawChart()
        }else{
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>
<style scoped >
  .tab{
    background-color: white;
    height: 180px;
    width: 100%;
    margin-top: 20px;
  }
  .tadayWork{
    height: 147px;
  }
  .content{
    padding: 0 20px;
  }
  .tab_item{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .tab_item img{
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }
  .tadayWork_title{
    font-weight: 700;
    font-size: 16px;
    color: #4E5969;
    padding-left: 20px;
    padding-top: 22px;
    margin-bottom: 28px;
  }
  .tadayWork_item{
    text-align: center;
    color: #4E5969;
  }
  .tadayWork_price{
    font-size: 16px;
    color: #00AAFF;
    margin-bottom:15px ;
  }
  .statistics{
    height: 400px;
    margin-top: 20px;
  }
  .statistics_item{
    height: 100%;
  }
  .picker{
    width: 200px;
  }
  .extra-item{
    display: inline-block;
    margin-right: 24px;
  }
  .extra-wrapper{
    padding-right: 10px;
  }
  .extra-wrapper .extra-item a{
    color: #3A3A3A;
    margin-left: 24px;
  }
  .active1{
    color: #1890FF !important;
  }

  .rank {
    padding: 0 32px 32px 72px;
  }
  .list {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
  }
  .list li {
    margin-top: 16px;
  }
  .list li span {
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    line-height: 22px;
  }
  .list li span:first-child {
    background-color: #f5f5f5;
    border-radius: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    margin-right: 24px;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
  }
  .list li span.active {
    background-color: #1890FF;
    color: #fff;
  }
  .list li span:last-child {
    float: right;
  }
  .mobile .rank {
    padding: 0 32px 32px 32px;
  }
  .schart{
    height: 340px;
  }
</style>