asco_admin/src/views/apps/advDestructive/ChartDestructiveAdv.vue

<template>
  <div>
    <vx-card title="بیشترین گزارشات ثبت شده براساس شهرودسته" class="mobile-Chart">
        <apexchart width="1000" class="width_mobile_chart" height="400" type="bar" :options="chartOptions" :series="series"></apexchart>
    </vx-card>
    <vx-card title="نمودار دلایل گزارش آگهی" style="margin-top: 2rem">
      <a-row>
        <a-col :span="24">
          <div >
            <apexchart ref="chartDonut" type="donut" :options="chartOptionsDonut" :series="seriesDonut"></apexchart>
          </div>
        </a-col>
      </a-row>
    </vx-card>
    <ASpin type="loading" :spinning="loading">
      <vx-card title="نمودارخطی أگهی های گزارش شده دربازه زمانی" style="margin-top: 2rem">
        <a-form :form="form" layout="inline" :wrapper-col="{ span: 24 }" @submit="lineSubmit">
          <a-form-item>
            <a-date-picker placeholder="تاریخ شروع" v-decorator="['start_at', { rules: [{ required: true, message: 'لطفا مقدار را وارد کنید' }] }]"/>
          </a-form-item>
          <a-form-item>
            <a-date-picker placeholder="تاریخ پایان" v-decorator="['end_at', { rules: [{ required: true, message: 'لطفا مقدار را وارد کنید' }] }]"/>
          </a-form-item>
          <a-button type="primary" html-type="submit">
            بررسی
          </a-button>
        </a-form>
        <a-row>
          <a-col :span="24">
            <div v-if="isShow">
              <apexchart height="400" type="line" :options="chartOptionsLine" :series="seriesLine"></apexchart>
            </div>
          </a-col>
        </a-row>
      </vx-card>
    </ASpin>
    <vx-card title="دلایل حذف آگهی" style="margin-top: 2rem">
      <a-row>
        <a-col :span="24">
          <div>
            <apexchart type="donut" :options="chartOptionsDonutDeleteAdv" :series="seriesDonutDeleteAdv"></apexchart>
          </div>
        </a-col>
      </a-row>
    </vx-card>
    <vx-card title="گزارش دهنده های شاخص" style="margin-top: 2rem">
      <a-table :columns="columns" :data-source="reporterLow" bordered/>
    </vx-card>
    <vx-card title="ثبت کننده آگهی بابیشترین آگهی گزارش شده" style="margin-top: 2rem">
      <a-table :columns="columnsMaxReporter" :data-source="maxReporter" bordered/>
    </vx-card>
    <vx-card title="مالک آگهی بابیشترین آگهی گزارش شده" style="margin-top: 2rem">
      <a-table :columns="columnsMaxOwner" :data-source="ownerReporter" bordered/>
    </vx-card>
  </div>
</template>

<script>
  import VueApexCharts from 'vue-apexcharts'
  import axios from '@/axios'

  const columns = [
    {
      title: 'نام',
      dataIndex: 'customer.name',
      key: '1',
      scopedSlots: { customRender: 'action' },
    },
    {
      title: 'موبایل',
      dataIndex: 'customer.mobile',
      key: '2'
    },
    {
      title: 'تعداد آگهی ثبت شده',
      dataIndex: 'total',
      key: '3'
    }
  ]
  const columnsMaxReporter = [
    {
      title: 'نام',
      dataIndex: 'name',
      key: '1',
      scopedSlots: { customRender: 'action' },
    },
    {
      title: 'موبایل',
      dataIndex: 'mobile',
      key: '2'
    },
    {
      title: 'تعداد آگهی گزارش شده',
      dataIndex: 'count_bad_adv',
      key: '3'
    }
  ]
  const columnsMaxOwner = [
    {
      title: 'نام',
      dataIndex: 'owner_adv.name',
      key: '1',
      scopedSlots: { customRender: 'action' },
    },
    {
      title: 'موبایل',
      dataIndex: 'owner_adv.mobile',
      key: '2'
    },
    {
      title: 'تعداد آگهی ثبت شده',
      dataIndex: 'total',
      key: '3'
    }
  ]

  export default {
        name: "ChartDestructiveAdv",
        components:{
          apexchart:VueApexCharts
        },
        data(){
          return{
            columns,
            columnsMaxReporter,
            columnsMaxOwner,
            form: this.$form.createForm(this, {name: 'coordinated'}),
            isShow:false,
            reporterLow:[],
            maxReporter:undefined,
            ownerReporter:undefined,
            series:[{
              name:'sss',
              data:[]
            }],
            seriesDonut:[],
            seriesLine:[],
            seriesDonutDeleteAdv:[],
            chartOptionsDonut:{
              xaxis: {
                categories: []
              }
            },
            chartOptions:{
              chart: {
                toolbar: {
                  show: false
                }
              },
              xaxis: {
                categories: []
              }
            },
            chartOptionsLine:{
              chart: {
                toolbar: {
                  show: false
                }
              },
              xaxis: {
                categories: []
              }
            },
            chartOptionsDonutDeleteAdv:{}
          }
        },
        methods:{
          lineSubmit(e) {
            e.preventDefault();
            this.form.validateFields(async (err, values) => {
              if (!err) {
                try{
                  const data = await this.$store.dispatch('badadv/line', values);
                  const x = data.map((chart)=>chart.date);
                  const y = data.map((chart)=>chart.total);
                  this.seriesLine = [{
                    data: y
                  }]
                  this.chartOptionsLine = {
                    colors: ['#FF9800'],
                    chart: {
                      toolbar: {
                        show: false
                      }
                    },
                    xaxis: {
                      categories: x
                    },
                    bar: {
                      dataLabels: {
                        position: 'bottom'
                      }
                    },
                    responsive: [
                      {
                        breakpoint: 2000,
                        options: {
                          plotOptions: {
                            bar: {
                              horizontal: false
                            }
                          },
                          legend: {
                            position: "bottom"
                          }
                        }
                      }
                    ]
                  }
                  this.isShow = true
                  this.$ntSet()
                }catch (e) {
                  this.$ntSetError()
                }finally {

                }
              }
            })
          },
          async getBadAdvChartCityCollection(){
            const {data} = await axios.get('/admin/badadv/chart/compare')
            const x = data.map(chart=>chart.city)
            const y = data.map(chart=>chart.total)
            this.series=[{
              data: y
            }]
            this.chartOptions = {
              colors:['#FF9800'],
              xaxis: {
                categories: x,
                xAxis: {
                  labels: {
                    overflow: 'right',
                    display: 'block',
                    align: 'left',
                    x: 5,
                    style: {
                      fontSize: '1em',
                      color: '#000',
                      width: '500px'
                    }
                  }
                }
              }
            }
          },
          async getAdvChartCollection(){
            const {data} = await axios.get('/admin/badadv/chart/reason')
            const label = data.map(chart=>chart.title)
            const y = data.map(chart=>chart.total)
            this.seriesDonut = y
            this.chartOptionsDonut = {
              labels: label,
              chart: {
                toolbar: {
                  show: false
                }
              },
              responsive: [
                {
                  breakpoint: 2000,
                  options: {
                    plotOptions: {
                      bar: {
                        horizontal: false
                      }
                    },
                    legend: {
                      position: "bottom"
                    }
                  }
                }
              ]
            }
          },
          async getChartDeleteAdv(){
            try{
              const {data} = await axios.get('/admin/badadv/chart/delete')
              const label = data.map(chart=>{
                if(chart.reason_delete == null){
                  chart.reason_delete = "سایر"
                }
                return chart.reason_delete

              })
              const y = data.map(chart=>chart.total)
              this.seriesDonutDeleteAdv = y
              this.chartOptionsDonutDeleteAdv = {
                labels: label,
                chart: {
                  toolbar: {
                    show: false
                  }
                },
                responsive: [
                  {
                    breakpoint: 2000,
                    options: {
                      plotOptions: {
                        bar: {
                          horizontal: false
                        }
                      },
                      legend: {
                        position: "bottom"
                      }
                    }
                  }
                ]
              }
            }catch (e) {

            }finally {

            }

          },
          async getReporter‌Lower(){
            const {data} = await axios.get('/admin/badadv/chart/count')
            this.reporterLow = data
          },
          async getMaxReporter(){
            const {data} = await axios.get('/admin/badadv/chart/creator')
            this.maxReporter = data
          },
          async getOwnerReporter(){
            const {data} = await axios.get('/admin/badadv/chart/owner')
            console.log(data,'data')
            this.ownerReporter = data
          }
        },
        computed: {
          loading() {
            return this.$store.state.badadv.loading;
          }
        },
        mounted() {
          this.getBadAdvChartCityCollection()
          this.getAdvChartCollection()
          this.getChartDeleteAdv()
          this.getReporter‌Lower()
          this.getMaxReporter()
          this.getOwnerReporter()
        }
  }
</script>

<style>
  @media(max-width:768px){
      .mobile-Chart{
        overflow-x: scroll;
      }
  }
</style>