Merge branch 'master' of /home/administrator/utils/gitea/git/repositories/willaengine-project/willaengine
commit
bb9e133408
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="order-status">
|
||||
<div :class="`current-status theme-${steps[currentStep].color}`">
|
||||
<div class="symbol"> <v-icon> WMi-{{ steps[currentStep].icon }} </v-icon> </div>
|
||||
<div class="text">
|
||||
<name-block :theme="`theme-${(steps[currentStep].color)}`" :name_fa="steps[currentStep].name_fa" :name_en="steps[currentStep].name_en" :number="parseInt(currentStep)+1" />
|
||||
</div>
|
||||
</div>
|
||||
<v-stepper class="we-stepper">
|
||||
<v-stepper-header>
|
||||
<v-stepper-step v-for="(step, index) in steps" :key="index" :step="index+1" :class="`fade-in fast delay-0${index} theme-${step.color} ${getStepStatus(index,currentStep)}`">
|
||||
<name-block :theme="`sm`" :name_en="step.name_en" :name_fa="step.name_fa" />
|
||||
</v-stepper-step>
|
||||
|
||||
</v-stepper-header>
|
||||
</v-stepper>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "steps-timeline",
|
||||
props: {
|
||||
currentStep: {default: 1},
|
||||
steps: {default: ""},
|
||||
},
|
||||
methods: {
|
||||
getStepStatus: function(thisStep, currentStep) {
|
||||
if(thisStep > currentStep) {
|
||||
return 'waiting';
|
||||
} else if(thisStep == currentStep) {
|
||||
return 'active';
|
||||
} else if(thisStep < currentStep) {
|
||||
return 'passed';
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-status {
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.current-status {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
}
|
||||
.current-status .symbol .v-icon {
|
||||
font-size: 90px;
|
||||
}
|
||||
.current-status .text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.we-stepper .v-stepper__step.passed {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
.theme--light.v-stepper .v-stepper__step--active .v-stepper__label {
|
||||
text-shadow: none;
|
||||
}
|
||||
/* --------------------------------------------------------
|
||||
Steps : Colors
|
||||
-------------------------------------------------------- */
|
||||
@import "resources/js/Global/scss/_vars.scss";
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
//-------------------Active State-----------------------------
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-fa,
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-en,
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__step__step {
|
||||
color: #fff;
|
||||
}
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active {
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
//-------------------Waiting State-----------------------------
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-fa,
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-en {
|
||||
color: $value;
|
||||
}
|
||||
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__step__step {
|
||||
color: $value
|
||||
}
|
||||
|
||||
//-------------------Current Step-----------------------------
|
||||
.order-status .current-status.theme-#{$color} {
|
||||
border: 2px solid $value;
|
||||
}
|
||||
.order-status .current-status.theme-#{$color} .symbol .v-icon {
|
||||
color: $value
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,19 @@
|
||||
import Pie from "./apexhart/type/pie";
|
||||
import Bar from "./apexhart/type/bar";
|
||||
import Linear from "./apexhart/type/linear";
|
||||
|
||||
export default class {
|
||||
|
||||
constructor(typeChart, options) {
|
||||
switch (typeChart) {
|
||||
case 'pie':
|
||||
return new Pie(options);
|
||||
case 'bar':
|
||||
return new Bar(options);
|
||||
case 'linear':
|
||||
return new Linear(options);
|
||||
default:
|
||||
throw new Error("The Type Chart is Not Support!");
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,23 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export default class {
|
||||
|
||||
constructor({url, params}) {
|
||||
this.url = url;
|
||||
this.params = params;
|
||||
this.isLoadRequest = false;
|
||||
this.responseChart = null;
|
||||
}
|
||||
|
||||
async request() {
|
||||
if (!this.isLoadRequest) {
|
||||
let response = await axios.get(this.url, {params: this.params});
|
||||
if (response && response.status === 200) {
|
||||
this.responseChart = response.data;
|
||||
this.isLoadRequest = true;
|
||||
}
|
||||
}
|
||||
return this.responseChart;
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,68 @@
|
||||
import chart from "../chart";
|
||||
|
||||
export default class extends chart {
|
||||
|
||||
constructor(options) {
|
||||
super(options);
|
||||
this.type = options.type ? options.type : 'daily';
|
||||
|
||||
this.options = {
|
||||
fill: {
|
||||
colors: ["#e6e6e6"]
|
||||
},
|
||||
chart: {
|
||||
id: "lineChart",
|
||||
fontFamily: '"iranyekan-regular-en-num", "Montserrat-Regular"'
|
||||
},
|
||||
xaxis: {
|
||||
categories: []
|
||||
},
|
||||
dataLabels: {
|
||||
style: {
|
||||
colors: ["#000", "#000", "#000"]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "bar chart",
|
||||
data: []
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
async getOptions() {
|
||||
await this.request();
|
||||
this.setOptions();
|
||||
return this.options;
|
||||
}
|
||||
|
||||
setOptions() {
|
||||
switch (this.type) {
|
||||
case 'weekly':
|
||||
return this.setWeekly();
|
||||
case 'monthly':
|
||||
return this.setMonthly();
|
||||
case 'daily':
|
||||
return this.setDaily();
|
||||
}
|
||||
}
|
||||
|
||||
setWeekly() {
|
||||
this.options.series[0].data = this.responseChart.map(x => x.count);
|
||||
this.options.xaxis.categories = this.responseChart.map(x => x.week);
|
||||
}
|
||||
|
||||
setMonthly() {
|
||||
this.options.series[0].data = this.responseChart.map(x => x.count);
|
||||
this.options.xaxis.categories = this.responseChart.map(x => x.month + ' ' + x.year.substring(2) );
|
||||
}
|
||||
|
||||
setDaily() {
|
||||
this.options.series[0].data = this.responseChart.map(x => x.count);
|
||||
this.options.xaxis.categories = this.responseChart.map(x => x.date);
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -0,0 +1,20 @@
|
||||
import chart from "../chart";
|
||||
|
||||
export default class extends chart {
|
||||
|
||||
constructor(options) {
|
||||
super(options);
|
||||
}
|
||||
|
||||
|
||||
async getOptions() {
|
||||
await this.request(this.setOptions);
|
||||
return this.options;
|
||||
}
|
||||
|
||||
setOptions(self) {
|
||||
self.options.series[0].data = self.responseChart.map(x => x.user_count);
|
||||
self.options.xaxis.categories = self.responseChart.map(x => x.week);
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,45 @@
|
||||
import chart from "../chart";
|
||||
|
||||
export default class extends chart {
|
||||
|
||||
constructor(options) {
|
||||
super(options);
|
||||
this.options = {
|
||||
chart: {
|
||||
type: "donut",
|
||||
id: "pieChart",
|
||||
fontFamily: '"iranyekan-regular-en-num", "Montserrat-Regular"'
|
||||
},
|
||||
fill: {
|
||||
label: [],
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val, opt) {
|
||||
return Math.round(val * 10) / 10 + '% ' + opt.w.globals.labels[opt.seriesIndex]
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
labels: [],
|
||||
legend: {
|
||||
fontSize: "16px"
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async getOptions() {
|
||||
await this.request();
|
||||
this.setOptions();
|
||||
return this.options;
|
||||
}
|
||||
|
||||
setOptions() {
|
||||
this.options.series = this.responseChart.map(x => x.count);
|
||||
this.options.labels = this.responseChart.map(x => x.category);
|
||||
this.options.fill.labels = this.responseChart.map(x => x.category);
|
||||
// this.options.labels = this.responseChart.map(x => x.category.name);
|
||||
// this.options.fill.label = this.responseChart.map(x => x.category.name);
|
||||
// this.options['colors'] = this.responseChart.map( x => x.category.color ? x.category.color : "#fff");
|
||||
}
|
||||
}
|
Loading…
Reference in new issue