webapp / GreenwayWeb

<template>
  <!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="history">
<div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>订单管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">订单统计</span></div>
      </div>

      <!-- 顶部搜索 -->
      <div class="toolbar" style="margin-bottom:10px">
        <el-form ref="formParams" :inline="true" :model="formParams">
          <el-form-item label="日期">
            <el-date-picker v-model="formParams.dates" type="daterange"  range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" />
          </el-form-item>

          <el-form-item label-width="0">
            <el-button  @click="search"
             style="background-color: #3F9B6A;color: #fff">查询</el-button>
            <el-button  @click="clear"
             class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-button  @click="search"
          style="background-color: #3F9B6A;color: #fff">批量导入</el-button> -->
        <!-- <el-button  @click="clear"
         style="background-color: #3F9B6A;color: #fff">导出</el-button> -->
      </div>
      <div style="padding: 15px 10px 10px 0px;background-color:#F2F3F5">
        <div style="display:flex;justify-content: space-around">
          <div class="midcrad" v-for="(item,index) in dataList">
            <div style="margin-bottom:20px;color: #1acda1;font-size: 48px;font-weight: 600;">{{item.value}}</div>
            <div style="font-size: 18px;">{{item.name}}</div>
          </div>
          <!--  <div class="midcrad">
                       <div style="margin-bottom:20px;color: #1acda1;font-size: 48px;font-weight: 600;">0</div>
                       <div style="font-size: 18px;">待处理订单</div>
                    </div>
                    <div class="midcrad">
                       <div style="margin-bottom:20px;color: #1acda1;font-size: 48px;font-weight: 600;">0</div>
                       <div style="font-size: 18px;">售后订单</div>
                    </div>
                    <div class="midcrad">
                       <div style="margin-bottom:20px;color: #1acda1;font-size: 48px;font-weight: 600;">0</div>
                      <div style="font-size: 18px;">已成交订单</div>
                    </div> -->
        </div>
      </div>
      <div style="padding: 15px 10px 10px 0px;background-color:#F2F3F5;margin-top:15px">
        <div style="display:flex;justify-content: space-around;font-size:14px">
          <div class="tucard">
            <div style="display: flex;justify-content: flex-end;margin-bottom:10px;">
              <div style="margin-right:25%;padding:7px 0;">用户访问趋势</div>
              <el-button @click="userVisitExport"
                style="background-color: #3F9B6A;color: #fff">导出</el-button>
            </div>
            <!-- <div style="text-align:center;">订单增长趋势</div> -->
            <div ref="myEchart" class="full-size" />
          </div>
          <div class="tucard">
            <div style="display: flex;justify-content: flex-end;margin-bottom:10px;">
              <div style="margin-right:25%;padding:7px 0;">订单支付趋势</div>
              <el-button @click="userVisitExport"
                style="background-color: #3F9B6A;color: #fff">导出</el-button>
            </div>
            <!-- <div style="text-align:center;">总转化率</div> -->
            <div ref="myEcharts" class="full-size" />
          </div>
          <div class="tucard">
            <div style="display: flex;justify-content: flex-end;margin-bottom:10px;">
              <div style="margin-right:25%;padding:7px 0;" >热卖商品</div>
              <el-button @click="userVisitExport"
                style="background-color: #3F9B6A;color: #fff">导出</el-button>
            </div>
            <!-- <div style="text-align:center;">售后订单趋势</div> -->
            <div style="width:100%;max-height:500px; overflow-y: auto; scrollbar-width: none;-ms-overflow-style: none;">
              <ul v-if="Orderlist">
                <li v-for="(value, key, index) in Orderlist" :key="index">
                  <p>{{index + 1 }}</p>
                  <p >{{ key }}</p>
                  <p>{{ `已售 ${key.length} 件` }}</p>
                </li>
              </ul>
              <div v-else class="empty">
                <img src="../../../assets/images/empty.png" alt>
                <p>暂无数据</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
      		   >
          <el-table-column prop="id" label="排名">
            <template slot-scope="scope">
              {{scope.$index + 1 }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="shopnum" label="商品编号">
            <template slot-scope="scope">
              {{scope.row.products[0].productId}}
            </template>
          </el-table-column> -->
          <el-table-column prop="shopname" label="商品名称" width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.products[0].productName}}
            </template>
          </el-table-column>
          <el-table-column prop="fl" label="商品分类">
            <template slot-scope="scope">
              {{scope.row.product.shopGroupName}}
            </template>
          </el-table-column>
      
          <el-table-column prop="createTime" label="商品创建时间" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.product.createTime}}
            </template>
          </el-table-column>
          <el-table-column prop="bigDecimal" label="销售数量" />
          <el-table-column prop="multiply" label="销售金额" />
      		  <el-table-column prop="grossProfitRate" label="毛利率" >
      			  <template slot-scope="scope">
      			      {{scope.row.grossProfitRate}}%
      			    </template>
      			  </el-table-column>
        </el-table>
        <div class="fenye">
          <div>共{{ total }}条</div>
          <el-pagination :current-page="currentPage" :page-size="10" layout="prev, pager, next" :total="total"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import echarts from 'echarts'
  import {
    exportOrderModel,
    importOrderData,
    orderStatistics,
    orderStatisticsProductInformation,
    orderGetAll,
	orderIndex,
	getAllNotPage,
	salesRanking
  } from '@/api/orderany'
  export default {
    data() {
      return {
		  flag:false,
        list: [],
        total: 1,
        pageSize: 10,
        currentPage: 1,
        formParams: {
          searchType: '1',
          search: '', // 搜索字段
          state: '',
          // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
          dates: [], // 下单时间数组
          page: 1,
          shopName: '',
          pageSize: 10
        },
        tableData: [],
        rules: {
          noticeType: [{
            required: true,
            message: '请选择消息类型',
            trigger: 'change'
          }]
        },

        dataList: [{
            name: '订单总数 (件)',
            value: '0',
            field: 'total'
          },
          {
            name: '待处理订单 (件)',
            value: '0',
            field: 'stayOrders'
          },
          {
            name: '售后订单 (件)',
            value: '0',
            field: 'stayAfters'
          },
          {
            name: '已成交订单 (件)',
            value: '0',
            field: 'money'
          }
        ],
		orderPage:{
			startTime:'2000-01-01 00:00:00',
			endTime:'2000-01-01 00:00:00'
		}

      }
    },
    mounted() {
		let time = this.getCurrentTime()
	this.orderPage.endTime =time+' '+'23:59:59'
          this.getTotalData()

    },
    methods: {
      search(){
		  if(this.formParams.dates.length == 0){
			  let time = this.getCurrentTime()
			  this.orderPage.endTime =time+' '+'23:59:59'
		  }else{
			   this.orderPage.startTime =this.formParams.dates[0]+' '+'00:00:00'
			   this.orderPage.endTime =this.formParams.dates[1]+' '+'23:59:59'
		  }
      this.getTotalData()
      },
      clear(){
        this.formParams={
          searchType: '1',
          search: '', // 搜索字段
          state: '',
          // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
          dates: [], // 下单时间数组
          page: 1,
          shopName: '',
          pageSize: 10
        }
		this.orderPage = {
			startTime:'2000-01-01 00:00:00',
			endTime:'2000-01-01 00:00:00'
		}
		let time = this.getCurrentTime()
		this.orderPage.endTime =time+' '+'23:59:59'
        this.getTotalData()
      },
	   getCurrentTime() {
	      const now = new Date();
	      const year = now.getFullYear();
	      const month = String(now.getMonth() + 1).padStart(2, '0');
	      const hour = String(now.getHours()).padStart(2, '0');
	      return `${year}-${month}-${hour}`;
	  },
     async  getTotalData() {
	
           const res = await getAllNotPage(this.formParams)
		   const biao = await salesRanking(res.data)
		   this.tableData =  biao.data.sort((a, b) => b.multiply - a.multiply);
		    this.total =  biao.data.length
        const Orderlist = await orderStatistics(res.data)
         const tablelist = await orderStatisticsProductInformation(res.data)

        // console.log(tablelist.data.commodityInformation)
        // this.tableData = Object.values(tablelist.data.commodityInformation).flat();
        // console.log(this.tableData)
        // this.total = this.tableData.length
        this.Orderlist = Orderlist.data.bestSellers
        let length = 0;
        let keys = []
        let totals = []
        for (const key in Orderlist.data.dailyOrderVolume) {
          keys.push(key)
          totals.push(parseInt(Orderlist.data.dailyOrderVolume[key].length))
           length +=  parseInt(Orderlist.data.dailyOrderVolume[key].length)
        }
        this.dataList[0].value = length ||0
        this.dataList[1].value = Orderlist.data.pendingOrders || 0
        this.dataList[2].value = Orderlist.data.afterSalesOrder || 0
        this.dataList[3].value = Orderlist.data.completedOrders || 0
        // if (res.code === '') {
        //   const d = res.data
        //   this.dataList.map(item => {
        //     item.value = d[item.field]
        //   })
        let data = {
          "time":keys,
          "total":totals,

        }
           this.draw(data)
   const orderIn =  await orderIndex(this.orderPage)
   
          this.draws(orderIn.data.conversion)

    
      },

    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //折线图
    draw(arr) {

      const myEchart = echarts.init(this.$refs.myEchart, 'light')
      const option = {
		  tooltip: {
		          trigger: 'axis', // 触发类型为坐标轴触发
		          axisPointer: {
		              type: 'cross', // 指示器类型为十字准星
		              crossStyle: {
		                  color: '#999'
		              }
		          },
		          formatter: function (params) {
		              const data = params[0];
		              const name = data.name; // 获取 arr.names 中的名称
		              const value = data.value; // 获取 arr.rates 中的次数
		              return ` ${value} 人`; // 自定义提示框内容
		          }
		      },
		   color: "#3F9B6A",
        xAxis: {
          type: 'category',
          data: arr.time
        },
        yAxis: {
          type: 'value',
          name: '人数'
        },
        series: [{
          data: arr.total,
          type: 'line'
        }]
      }

      myEchart.setOption(option)
    },
	filterData(arr) {
	    const targetNames = ["加购", "支付成功"];
	    const result = {
	        names: [],
	        rates: []
	    };
	    for (let i = 0; i < arr.names.length; i++) {
	        if (targetNames.includes(arr.names[i])) {
	            result.names.push(arr.names[i]);
	            result.rates.push(arr.rates[i]);
	        }
	    }
	    return result;
	},
	
    draws(arr) {
		const filteredData = this.filterData(arr);
		  const myEchart = echarts.init(this.$refs.myEcharts, 'light')
		  const option = {
			  color: "#3F9B6A",
			  tooltip: {
			          trigger: 'axis', // 触发类型为坐标轴触发
			          axisPointer: {
			              type: 'cross', // 指示器类型为十字准星
			              crossStyle: {
			                  color: '#999'
			              }
			          },
			          formatter: function (params) {
			              const data = params[0];
			              const name = data.name; // 获取 arr.names 中的名称
			              const value = data.value; // 获取 arr.rates 中的次数
			              return `${name}: ${value} 人`; // 自定义提示框内容
			          }
			      },
		    xAxis: {
		      type: 'category',
		      data: filteredData.names
		    },
		    yAxis: {
		      type: 'value',
		      name: '人数',
		    },
		    series: [
		      {
		        data: filteredData.rates,
		        type: 'line'
		      }
		    ]
		  }
		
		  myEchart.setOption(option)
		
		
      // const myEchart = echarts.init(this.$refs.myEcharts, 'light')
      // // const o = this.chartData
      // const option = {
      //   // color: ["#74d1fd", "#009ae4", "#0071c1"],
      //   // 设置图表的位置
      //   grid: {
      //     x: 110, // 左间距
      //     y: 0, // 上间距
      //     x2: 60, // 右间距
      //     y2: 40 // 下间距
      //   },
      //   // 提示框组件
      //   tooltip: {
      //     trigger: 'axis', // 触发类型, axis: 坐标轴触发
      //     axisPointer: {
      //       // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
      //       // 'cross' 十字准星指示器 其实是种简写，表示启用两个正交的轴的 axisPointer
      //       type: 'none'
      //     },
      //     textStyle: {
      //       color: '#cdd3ee' // 文字颜色
      //     },
      //     // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 折线（区域）图、柱状（条形）图、K线图
      //     // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
      //     formatter: '{b}<br />{a0}: {c0}%'
      //   },
      //   // // 图例组件
      //   // legend: {
      //   //   textStyle: {
      //   //     // 文本样式
      //   //     fontSize: 16,
      //   //     color: "#cdd3ee"
      //   //   },
      //   //   top: 13, // 定位
      //   //   data: ["已完成", "进行中", "未完成"] // 图例的数据数组
      //   // },
      //   // X轴
      //   xAxis: {
      //     type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
      //     // 坐标轴刻度
      //     axisTick: {
      //       show: false // 是否显示坐标轴刻度 默认显示
      //     },
      //     // 坐标轴轴线
      //     axisLine: {
      //       // 是否显示坐标轴轴线 默认显示
      //       show: false // 是否显示坐标轴轴线 默认显示
      //     },
      //     // 坐标轴在图表区域中的分隔线
      //     splitLine: {
      //       show: false // 是否显示分隔线。默认数值轴显示
      //     },
      //     // 坐标轴刻度标签
      //     axisLabel: {
      //       show: false // 是否显示刻度标签 默认显示
      //     }
      //   },
      //   yAxis: [
      //     // 左侧Y轴
      //     {
      //       // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
      //       // 为该类型时必须通过 data 设置类目数据
      //       type: 'category',
      //       // 坐标轴刻度
      //       axisTick: {
      //         show: false // 是否显示坐标轴刻度 默认显示
      //       },
      //       // 坐标轴轴线
      //       axisLine: {
      //         // 是否显示坐标轴轴线 默认显示
      //         show: false, // 是否显示坐标轴轴线 默认显示
      //         lineStyle: {
      //           // 坐标轴线线的颜色
      //           color: '#cdd3ee'
      //         }
      //       },
      //       // 坐标轴在图表区域中的分隔线
      //       splitLine: {
      //         show: false // 是否显示分隔线。默认数值轴显示
      //       },
      //       // 坐标轴刻度标签
      //       axisLabel: {
      //         show: true, // 是否显示刻度标签 默认显示
      //         fontSize: 16, // 文字的字体大小
      //         color: '#cdd3ee', // 刻度标签文字的颜色
      //         // 使用字符串模板，模板变量为刻度默认标签 {value}
      //         formatter: '{value}'
      //       },
      //       // 类目数据，在类目轴（type: 'category'）中有效
      //       data: arr.names.reverse()
      //     }
      //   ],
      //   // 系列列表
      //   series: [
      //     {
      //       type: 'bar', // 系列类型
      //       name: '已完成',
      //       barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
      //       // label: {
      //       //   show: true,
      //       //   position: "inside"
      //       // },
      //       itemStyle: {
      //         barBorderRadius: [10, 0, 0, 10] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
      //       },
      //       data: arr.rates.reverse() // 系列中的数据内容数组
      //     }
      //   ]
      // }

      // myEchart.setOption(option)
    },
    //导出
// async userVisitExport() {
//        this.$message({
//          message: '数据导出中，请勿重复操作！',
//          type: 'success'
//        })
//        const res = await exportOrderModel()
//        if(!res){
//          return
//        }
//        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
//        const fileName = '订单数据明细表.xls'
//        if ('download' in document.createElement('a')) {
//           // 非IE下载
//           const elink = document.createElement('a')
//           elink.download = fileName
//           elink.style.display = 'none'
//           elink.href = URL.createObjectURL(blob)
//           document.body.appendChild(elink)
//           elink.click()
//           URL.revokeObjectURL(elink.href) // 释放URL 对象
//           document.body.removeChild(elink)
//         } else {
//          // IE10+下载
//          navigator.msSaveBlob(blob, fileName)
//        }
//      },
async userVisitExport() {
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      const res = await exportOrderModel(this.formInline)
      if(!res){
        return
      }
      const blob = new Blob([res],{ type: 'application/vnd.ms-excel' })
      const fileName = '订单.xls'
      if ('download' in document.createElement('a')) {
         // 非IE下载
         const elink = document.createElement('a')
         elink.download = fileName
         elink.style.display = 'none'
         elink.href = URL.createObjectURL(blob)
         document.body.appendChild(elink)
         elink.click()
         URL.revokeObjectURL(elink.href) // 释放URL 对象
         document.body.removeChild(elink)
       } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
  }
   }
</script>

<style lang='scss' scoped>
  .history {
   padding: 0  20px 20px 20px;
   min-height: calc(100vh - 50px - 20px);
   background-color: #Fff;
  }

  ::v-deep .el-form-item__label {
    font-weight: normal;
    font-size: 14px;

  }

  ::v-deep .btn .el-button:focus,
  .el-button:hover {
    border: 1px solid #3F9B6A;
  }

  ::v-deep .el-button {
    border: 1px solid #3F9B6A;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }
</style>
<style scoped>
  .history /deep/ .el-table .cell.el-tooltip img {
    max-height: 100px;
  }

  .fenye {
    margin-top: 10px;
    display: flex;
    align-items: center;
	justify-content: space-between;
    position: relative;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }



  .midcrad {
    border: 1px solid #F2F3F5;
    background-color: #fff;
    width: 22%;
    padding: 15px 0;
    text-align: center;
  }

  .tucard {
    border: 1px solid #F2F3F5;
    background-color: #fff;
    width: 30%;
    padding: 10px 5px;
  }

  .full-size {
    width:100%;
    height: 500px;
  }
 .empty {
   /* height: 450px; */
   img {
     width: 80px;
     height: 80px;
     margin: 100px auto 10px;
     display: block;
   }
   p {
     text-align: center;
     color: #333333;
   }
 }
 .tucard{
   ul {
     height: calc(100% - 50px);
     margin: 0;
     padding: 10px 0;
     li {
       height: 10%;
       display: flex;
       margin-bottom: 20px;
       p {
         float: left;
        text-align: center;
         text-indent: 2em;
         padding: 0;
         margin: 0;
         color: #333333;
         font-size: 14px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         &:nth-child(1) {
           flex: 2;
         }
         &:nth-child(2) {
           flex: 6;
         }
         &:nth-child(3) {
           flex: 4;
         }
       }
     }
     }
 }
 .tableBtn {
     display: inline-block;
     margin-right: 10px;
   }

 .greens {
     color: #3F9B6A ;
   }
   ::v-deep .buttonHover:hover{
     color:#3f9b6a !important;
     border-color: #c5e1d2 !important;
     background-color: #ecf5f0 !important;
     outline: none;
   }

</style>
<style>
  .el-tooltip__popper {
    max-width: 50%;
  }
</style>