Init project
This commit is contained in:
alirezakarari
@@ -0,0 +1,354 @@
|
||||
<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 getReporterLower(){
|
||||
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.getReporterLower()
|
||||
this.getMaxReporter()
|
||||
this.getOwnerReporter()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media(max-width:768px){
|
||||
.mobile-Chart{
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user