barg-restuarant/pages/admin/_branch/reports/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
    </CustomSubHeader>

    <CCard>
      <CCardBody>
        <CRow>
          <CCol sm="6">
            <div>از تاریخ:</div>
            <div class="mt-3"><date-picker type="datetime" v-model="startDate" clearable format="YYYY-MM-DD HH:mm" display-format="jYYYY-jMM-jDD HH:mm"/></div>
          </CCol>
          <CCol sm="6">
            <div>تا تاریخ:</div>
            <div class="mt-3"><date-picker type="datetime" v-model="endDate" clearable format="YYYY-MM-DD HH:mm" display-format="jYYYY-jMM-jDD HH:mm"/></div>
          </CCol>
          <CCol sm="12" class="text-center mt-4">
            <CButton size="sm" color="success" class="mr-1" @click="getReports">گرفتن گزارش</CButton>
          </CCol>
        </CRow>
<!--        <div class="d-flex justify-content-center align-items-center">-->
<!--          <span>از تاریخ: </span>-->
<!--          <span><date-picker v-model="date" clearable format="YYYY-MM-DD" display-format="jYYYY-jMM-jDD"/></span>-->
<!--        </div>-->
      </CCardBody>
    </CCard>

    <CCard>
      <CCardBody>
        <CRow>
          <CCol col="12" sm="6">
            <CCallout color="info">
              <small class="text-muted">جمع کل</small><br>
              <strong class="h4">{{ reports.total.toLocaleString() + ' ریال' }}</strong>
            </CCallout>
          </CCol>
          <CCol col="12" sm="6">
            <CCallout color="danger">
              <small class="text-muted">تعداد سفارشات</small><br>
              <strong class="h4">{{ reports.count }}</strong>
            </CCallout>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>

<!--    <CCard>-->
<!--      <CCardHeader>-->
<!--        <strong>-->
<!--          <span>نمودار تعداد سفارشات</span>-->
<!--        </strong>-->
<!--      </CCardHeader>-->
<!--      <CCardBody>-->
<!--        <canvas id="myChart" width="400" height="400"></canvas>-->
<!--      </CCardBody>-->
<!--    </CCard>-->

    <CCard>
      <CCardHeader>
        <slot name="header">
          <span>{{ list_title }}</span>
        </slot>
      </CCardHeader>
      <CCardBody>
        <CRow>
          <CCol sm="6">
            <div class="mt-3">
              <span>
                <i class="fal fa-money-bill-wave"></i>
                جمع کل:
              </span>
              <span>{{reports.total.toLocaleString() + ' ریال'}}</span>
            </div>
            <div class="mt-3">
              <span>
                <i class="fal fa-money-bill-wave"></i>
                جمع پرداخت آنلاین:
              </span>
              <span>{{reports.payOnline.toLocaleString() + ' ریال'}}</span>
            </div>
            <div class="mt-3">
              <span>
                <i class="fal fa-money-bill-wave"></i>
                جمع هزینه ارسال:
              </span>
              <span>{{reports.routePrice.toLocaleString() + ' ریال'}}</span>
            </div>
          </CCol>
          <CCol sm="6">
            <div class="mt-3">
              <span>
                <i class="fal fa-money-bill-wave"></i>
                جمع کل مبلغ استفاده شده کیف پول:
              </span>
              <span>{{reports.bagCost.toLocaleString() + ' ریال'}}</span>
            </div>
            <div class="mt-3">
              <span>
                <i class="fal fa-money-bill-wave"></i>
                جمع امتیاز استفاده شده:
              </span>
              <span>{{reports.scorePoint}}</span>
            </div>
            <div class="mt-3">
              <span>
                <i class="fal fa-money-bill-wave"></i>
                جمع ارزش امتیازات استفاده شده:
              </span>
              <span>{{reports.scoreCost.toLocaleString() + ' ریال'}}</span>
            </div>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import moment from 'moment-jalaali'

export default {
  data() {
    return {
      title: 'گزارشات',
      list_title: 'گزارش',
      // base data
      reports: null,
      startDate : '',
      endDate : '',
      // validation
      validation: {}
    }
  },
  watch: {

  },
  computed: {

  },
  methods: {
    jDate(date) {
      return moment(date, 'X').format('jYYYY/jMM/jDD')
    },
    getReports(){
      this.validation = {}
      const data = {
        startDate : this.startDate,
        endDate :this.endDate
      }

      this.$axios.$post(`/api/admin/order/report`, data)
          .then(response => {
            this.reports = response
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            }
          })
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  // async mounted() {
  //   const counts = {};
  //   // this.customers.forEach(function (x) { counts[x.job] = (counts[x.job] || 0) + 1; });
  //   let keys = [1,2,3,4,5,6,7];
  //   let values = [10,15,4,5,68,15,1];
  //
  //   const CHART_COLORS = {
  //     red: 'rgb(255, 99, 132)',
  //     orange: 'rgb(255, 159, 64)',
  //     yellow: 'rgb(255, 205, 86)',
  //     green: 'rgb(75, 192, 192)',
  //     blue: 'rgb(54, 162, 235)',
  //     purple: 'rgb(153, 102, 255)',
  //     grey: 'rgb(201, 203, 207)'
  //   };
  //
  //   const ctx = document.getElementById('myChart');
  //   const myChart = new Chart(ctx, {
  //     type: 'line',
  //     data: {
  //       labels: keys,
  //       datasets: [{
  //         // label: '# of Votes',
  //         data: values,
  //         borderColor: 'rgb(54, 162, 235)',
  //         fill: false,
  //         borderWidth: 2
  //       }]
  //     },
  //     options: {
  //       responsive: true,
  //       legend: {
  //         position: 'top',
  //       },
  //       scales: {
  //         y: {
  //           beginAtZero: true
  //         }
  //       }
  //     }
  //   });
  // },
  layout: 'admin',
  async asyncData({$axios, query, error, params}) {
    try {
      const reports = await $axios.$post(`/api/admin/order/report/${params?.branch}`)
      return {
        reports
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: 'شما اجازه دسترسی به این صفحه را ندارید لطفا دوباره وارد شوید'
        })
      } else {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
        });
      }
    }
  }
}
</script>


<style lang="scss">
.el-button:focus {
  outline-color: #39f !important;
}
</style>