webapp / GreenwayWeb

  <template>
    <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>
  
          <!-- 顶部搜索 -->
          <div class="toolbar">

            <el-form ref="formParams" :inline="true" :model="pageIndex">

                <el-form-item label="渠道">
                <el-select  placeholder="全部"

                  v-model="pageIndex.ticketChannel"

                  style="width: 168px;margin-right: 15px">

                  <el-option label="大麦" value="大麦" />
                  <el-option label="猫眼" value="猫眼" />
                  <el-option label="携程" value="携程" />
                  <el-option label="美团" value="美团" />

                </el-select>
                </el-form-item>
                <el-form-item label="票种">
                <el-select  placeholder="全部"

                            v-model="pageIndex.ticketType"

                  style="width: 168px;margin-right: 15px">

                  <el-option label="电影票" value="电影票" />
                  <el-option label="演唱会票" value="演唱会票" />

                </el-select>
                </el-form-item>
              <el-form-item label="日期">
                <el-date-picker

                  v-model="pageIndex.list"

                  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>
          </div>
          </div>
          <!-- 表格 -->
          <div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#F2F3F5">
            <div style='padding:20px 10px;background-color:#fff;margin-bottom: 10px;'>
              <div style="display:flex;font-size:14px;justify-content: space-around">
                <div style="width:15%;border-right:1px solid #F2F3F5">
                  <div style="margin-bottom: 10px;font-weight: 600;">渠道数量</div>

                  <div style="font-weight: 600;">4</div>

                </div>
                <div style="width:15%;border-right:1px solid #F2F3F5">
                   <div style="margin-bottom: 10px;font-weight: 600;">票种数量</div>

                  <div style="font-weight: 600;">2</div>

                </div>
                <div style="width:15%;border-right:1px solid #F2F3F5">
                   <div style="margin-bottom: 10px;font-weight: 600;">退票总数(张)</div>

                   <div style="font-weight: 600;">{{numOne}}</div>

                </div>
                <div style="width:15%;border-right:1px solid #F2F3F5">
                  <div style="margin-bottom: 10px;font-weight: 600;">退票总额(元)</div>

                   <div style="font-weight: 600;">{{moyeOne}}</div>

                </div>
                <div>
                  <div style="margin-bottom: 10px;font-weight: 600;">平均退票率(%)</div>

                   <div style="font-weight: 600;">38.43%</div>

                </div>
  
              </div>
            </div>
               <div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
            <div style="display: flex;margin-bottom: 20px;">
              <div style="width: 100%;padding: 10px 0;">各渠道票种销售及退票统计</div>

              <!-- <el-select  placeholder="全部证件"

                style="width: 120px;margin-right: 15px">
                <el-option label="1" value="1" />

              </el-select> -->
              <el-button     style="background-color: #3F9B6A;color: #fff;height: 27.5px;" @click="daochu">导出</el-button>

            </div>
            <div class="table">
              <el-table
              :summary-method="getSummaries"
                :span-method="objectSpanMethod"
                 show-summary

                :data="tableData"

                 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
              >

                <el-table-column label="序号" >
                <template slot-scope="scope">
                    {{scope.$index +1}}
                                    </template>

                </el-table-column>

              <el-table-column prop="ticketChannel" label="渠道">
  
                       </el-table-column>
                       <el-table-column prop="ticketType" label="票种" />
              <el-table-column prop="ticketName" label="票名" />
              <el-table-column prop="num" label="退票数(张)" />
              <el-table-column prop="price" label="退票金额(元)" />
              <el-table-column prop="refundRate" label="退票率(%)" >
              <template slot-scope="scope">
                  {{scope.row.refundRate}}%
                                  </template>
              </el-table-column>

                <!-- <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text"   style="background-color: transparent;color: #3F9B6A;;border: none;">详情</el-button>
                    <el-button type="text"   style="background-color: transparent;color: #3F9B6A;;border: none;">删除</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="fenye">
  
              <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total,prev, pager,next" :total="total "
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
         </div>
          </div>
        </div>
  
    </div>
  </template>
  
  <script>

  import {getRefundData,excelToRefundData} from '@/api/piaowu'

  
  export default {
    data() {
      return {
        list: [],
        total: 1,
        pageSize: 10,
        currentPage: 1,

        tipsList: [],
         tableData: [],
     pageIndex:{
          list: [],
              page: 1,
              pageSize: 10,
             startTime: "",
      endTime: "",
      ticketChannel: "",
      ticketType: "",
      type:""
          },
          numOne:0,
          moyeOne:0,

      }
    },
    mounted() {
      this.getAll()
    },
    methods: {

      async getAll(){
          let res =   await getRefundData(this.pageIndex)
          this.tableData = res.data.list
          this.total = res.data.total

          this.tableData.map(res=>{
            res.dataIntegrity = this.$decrypt(res.dataIntegrity)
            res.price = this.$decrypt(res.price)
            res.ticketPrice = this.$decrypt(res.ticketPrice)
          })

         let numOne= 0
         let moyeOne =0
         this.tableData.map(item=>{
           if(item.type == '1'){
              numOne += item.num

             moyeOne +=Number(item.price)

           }
  
  
         })
         this.numOne = numOne
         this.moyeOne = moyeOne
  
          },
          search(){
            if(this.pageIndex.list.length !=0){
              this.pageIndex.startTime = this.pageIndex.list[0]
              this.pageIndex.endTime = this.pageIndex.list[1]
            }
            this.getAll()
          },
          clear(){
            this.pageIndex = {
              list: [],
                  page: 1,
                  pageSize: 10,
                 startTime: "",
          endTime: "",
          ticketChannel: "",
          ticketType: "",
          type:""
              }
  
              this.getAll()
          },
          changepiao(){
            this.getAll()
          },
          async daochu(){
            let res = await excelToRefundData(this.pageIndex)
            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)
            }
            this.$message({
              message: '导出成功',
              type: 'success'
            })
          },

      getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '总计';
                return;
              }

              if (['退票数(张)', '退票金额(元)'].includes(column.label)) {

                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                      return prev + curr;
                    } else {
                      return prev;
                    }
                  }, 0);
                } else {
                  sums[index] = '';
                }
              } else {
                sums[index] = '';
              }
            });
  
            return sums;

          },

         async handleCurrentChange(val) {

            this.currentPage = val

             this.pageIndex.page = val
            try {
               const res = await getRefundData(this.pageIndex);
               this.tableData = res.data.list;
               this.total = res.data.total;

              this.tableData.map(res=>{
                res.dataIntegrity = this.$decrypt(res.dataIntegrity)
                res.price = this.$decrypt(res.price)
                res.ticketPrice = this.$decrypt(res.ticketPrice)
              })

             } catch (error) {
               console.error('Error fetching data:', error);
             }

          },
          handleSizeChange(val) {
            this.pageSize = val
          },
           objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                  if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                      return {
                        rowspan: 2,
                        colspan: 1
                      };
                    } else {
                      return {
                        rowspan: 0,
                        colspan: 0
                      };
                    }
                  }
                }

                       }

   }
  </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 .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;
  }
    .pagination {
        text-align: right;
        line-height: 20px;
      }
    .greens {
        color: #3F9B6A;
      }
  
      /deep/ .el-table__row {
        font-size: 14px;
        color:#000000e6;
        height:42px;
      }
  
      .fenye {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
      ::v-deep .el-pagination__total{
            position: absolute;
            left: 60px;
      }
      ::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>