remove files
This commit is contained in:
liangping
parent
640bf71bc5
commit
3b497b0f20
@ -1,15 +0,0 @@
|
|||||||
export default {
|
|
||||||
// Endpoints
|
|
||||||
loginEndpoint: '/jwt/login',
|
|
||||||
registerEndpoint: '/jwt/register',
|
|
||||||
refreshEndpoint: '/jwt/refresh-token',
|
|
||||||
logoutEndpoint: '/jwt/logout',
|
|
||||||
|
|
||||||
// This will be prefixed in authorization header with token
|
|
||||||
// e.g. Authorization: Bearer <token>
|
|
||||||
tokenType: 'Bearer',
|
|
||||||
|
|
||||||
// Value of this property will be used as key to store JWT token in storage
|
|
||||||
storageTokenKeyName: 'accessToken',
|
|
||||||
storageRefreshTokenKeyName: 'refreshToken',
|
|
||||||
}
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import jwtDefaultConfig from './jwtDefaultConfig'
|
|
||||||
|
|
||||||
export default class JwtService {
|
|
||||||
// Will be used by this service for making API calls
|
|
||||||
axiosIns = null
|
|
||||||
|
|
||||||
// jwtConfig <= Will be used by this service
|
|
||||||
jwtConfig = { ...jwtDefaultConfig }
|
|
||||||
|
|
||||||
// For Refreshing Token
|
|
||||||
isAlreadyFetchingAccessToken = false
|
|
||||||
|
|
||||||
// For Refreshing Token
|
|
||||||
subscribers = []
|
|
||||||
|
|
||||||
constructor(axiosIns, jwtOverrideConfig) {
|
|
||||||
this.axiosIns = axiosIns
|
|
||||||
this.jwtConfig = { ...this.jwtConfig, ...jwtOverrideConfig }
|
|
||||||
|
|
||||||
// Request Interceptor
|
|
||||||
this.axiosIns.interceptors.request.use(
|
|
||||||
config => {
|
|
||||||
// Get token from localStorage
|
|
||||||
const accessToken = this.getToken()
|
|
||||||
|
|
||||||
// If token is present add it to request's Authorization Header
|
|
||||||
if (accessToken) {
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
config.headers.Authorization = `${this.jwtConfig.tokenType} ${accessToken}`
|
|
||||||
}
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
error => Promise.reject(error),
|
|
||||||
)
|
|
||||||
|
|
||||||
// Add request/response interceptor
|
|
||||||
this.axiosIns.interceptors.response.use(
|
|
||||||
response => response,
|
|
||||||
error => {
|
|
||||||
// const { config, response: { status } } = error
|
|
||||||
const { config, response } = error
|
|
||||||
const originalRequest = config
|
|
||||||
|
|
||||||
// if (status === 401) {
|
|
||||||
if (response && response.status === 401) {
|
|
||||||
if (!this.isAlreadyFetchingAccessToken) {
|
|
||||||
this.isAlreadyFetchingAccessToken = true
|
|
||||||
this.refreshToken().then(r => {
|
|
||||||
this.isAlreadyFetchingAccessToken = false
|
|
||||||
|
|
||||||
// Update accessToken in localStorage
|
|
||||||
this.setToken(r.data.accessToken)
|
|
||||||
this.setRefreshToken(r.data.refreshToken)
|
|
||||||
|
|
||||||
this.onAccessTokenFetched(r.data.accessToken)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const retryOriginalRequest = new Promise(resolve => {
|
|
||||||
this.addSubscriber(accessToken => {
|
|
||||||
// Make sure to assign accessToken according to your response.
|
|
||||||
// Check: https://pixinvent.ticksy.com/ticket/2413870
|
|
||||||
// Change Authorization header
|
|
||||||
originalRequest.headers.Authorization = `${this.jwtConfig.tokenType} ${accessToken}`
|
|
||||||
resolve(this.axiosIns(originalRequest))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return retryOriginalRequest
|
|
||||||
}
|
|
||||||
return Promise.reject(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
onAccessTokenFetched(accessToken) {
|
|
||||||
this.subscribers = this.subscribers.filter(callback => callback(accessToken))
|
|
||||||
}
|
|
||||||
|
|
||||||
addSubscriber(callback) {
|
|
||||||
this.subscribers.push(callback)
|
|
||||||
}
|
|
||||||
|
|
||||||
getToken() {
|
|
||||||
return localStorage.getItem(this.jwtConfig.storageTokenKeyName)
|
|
||||||
}
|
|
||||||
|
|
||||||
getRefreshToken() {
|
|
||||||
return localStorage.getItem(this.jwtConfig.storageRefreshTokenKeyName)
|
|
||||||
}
|
|
||||||
|
|
||||||
setToken(value) {
|
|
||||||
localStorage.setItem(this.jwtConfig.storageTokenKeyName, value)
|
|
||||||
}
|
|
||||||
|
|
||||||
setRefreshToken(value) {
|
|
||||||
localStorage.setItem(this.jwtConfig.storageRefreshTokenKeyName, value)
|
|
||||||
}
|
|
||||||
|
|
||||||
login(...args) {
|
|
||||||
return this.axiosIns.post(this.jwtConfig.loginEndpoint, ...args)
|
|
||||||
}
|
|
||||||
|
|
||||||
register(...args) {
|
|
||||||
return this.axiosIns.post(this.jwtConfig.registerEndpoint, ...args)
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshToken() {
|
|
||||||
return this.axiosIns.post(this.jwtConfig.refreshEndpoint, {
|
|
||||||
refreshToken: this.getRefreshToken(),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import JwtService from './jwtService'
|
|
||||||
|
|
||||||
export default function useJwt(axiosIns, jwtOverrideConfig) {
|
|
||||||
const jwt = new JwtService(axiosIns, jwtOverrideConfig)
|
|
||||||
|
|
||||||
return {
|
|
||||||
jwt,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-auto-suggest">
|
|
||||||
<input
|
|
||||||
v-model="searchQuery"
|
|
||||||
type="text"
|
|
||||||
v-bind="inputProps"
|
|
||||||
>
|
|
||||||
<ul class="auto-suggest-suggestions-list">
|
|
||||||
<li
|
|
||||||
v-for="(suggestion_list, grp_name, grp_index) in filteredData"
|
|
||||||
:key="grp_index"
|
|
||||||
class="suggestions-groups-list"
|
|
||||||
>
|
|
||||||
|
|
||||||
<!-- Group Header -->
|
|
||||||
<p class="suggestion-group-title">
|
|
||||||
<slot
|
|
||||||
name="group"
|
|
||||||
:group_name="grp_name"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{{ grp_name }}
|
|
||||||
</span>
|
|
||||||
</slot>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Suggestion List of each group -->
|
|
||||||
<ul>
|
|
||||||
<li
|
|
||||||
v-for="(suggestion, index) in suggestion_list"
|
|
||||||
:key="index"
|
|
||||||
class="suggestion-group-suggestion cursor-pointer"
|
|
||||||
@click="suggestionSelected(suggestion)"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
:name="grp_name"
|
|
||||||
:suggestion="suggestion"
|
|
||||||
>
|
|
||||||
<span>{{ suggestion[data[grp_name].key] }}</span>
|
|
||||||
</slot>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li
|
|
||||||
v-if="!suggestion_list.length && searchQuery"
|
|
||||||
class="suggestion-group-suggestion no-results"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
name="noResult"
|
|
||||||
:group_name="grp_name"
|
|
||||||
>
|
|
||||||
<p>No Results Found.</p>
|
|
||||||
</slot>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import useAutoSuggest from './useAutoSuggest'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
inputProps: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
searchLimit: {
|
|
||||||
type: Number,
|
|
||||||
default: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props, { emit }) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.warn('This component is still in Development. Please do not use it.')
|
|
||||||
|
|
||||||
const { searchQuery, filteredData, resetsearchQuery } = useAutoSuggest(props)
|
|
||||||
|
|
||||||
const suggestionSelected = suggestion => {
|
|
||||||
resetsearchQuery()
|
|
||||||
emit('suggestion-selected', suggestion)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
searchQuery, filteredData, suggestionSelected,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
ul
|
|
||||||
{
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-auto-suggest {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto-suggest-suggestions-list {
|
|
||||||
box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
|
|
||||||
border-radius: 6px;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 1rem);
|
|
||||||
background-color: white;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-group-title {
|
|
||||||
font-weight: 500;
|
|
||||||
padding: .75rem 1rem .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-group-suggestion {
|
|
||||||
padding: .75rem 1rem
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { ref, watch } from '@vue/composition-api'
|
|
||||||
|
|
||||||
export default function useAutoSuggest(props) {
|
|
||||||
const filteredData = ref({})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Filter group against provided query
|
|
||||||
* Grp Structure:
|
|
||||||
* {
|
|
||||||
* key: 'title',
|
|
||||||
* data: [
|
|
||||||
* title: 'Admin', img: 'someImage.png',
|
|
||||||
* title: 'Template', img: 'otherImage.png',
|
|
||||||
* ]
|
|
||||||
* }
|
|
||||||
* @param {Object} grp Group object to perform filter on
|
|
||||||
* @param {String} query Query string to filter
|
|
||||||
*/
|
|
||||||
const filterGrp = (grp, query) => {
|
|
||||||
const exactEle = grp.data.filter(item => item[grp.key].toLowerCase().startsWith(query.toLowerCase()))
|
|
||||||
const containEle = grp.data.filter(
|
|
||||||
// prettier-ignore
|
|
||||||
item => !item[grp.key].toLowerCase().startsWith(query.toLowerCase()) && item[grp.key].toLowerCase().indexOf(query.toLowerCase()) > -1,
|
|
||||||
)
|
|
||||||
return exactEle.concat(containEle).slice(0, props.searchLimit)
|
|
||||||
}
|
|
||||||
|
|
||||||
const searchQuery = ref('')
|
|
||||||
const resetsearchQuery = () => {
|
|
||||||
searchQuery.value = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSearchQueryUpdate = val => {
|
|
||||||
if (val === '') {
|
|
||||||
filteredData.value = {}
|
|
||||||
} else {
|
|
||||||
const queriedData = {}
|
|
||||||
const dataGrps = Object.keys(props.data)
|
|
||||||
|
|
||||||
dataGrps.forEach((grp, i) => {
|
|
||||||
queriedData[dataGrps[i]] = filterGrp(props.data[grp], val)
|
|
||||||
})
|
|
||||||
|
|
||||||
filteredData.value = queriedData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(searchQuery, val => handleSearchQueryUpdate(val))
|
|
||||||
|
|
||||||
return {
|
|
||||||
searchQuery,
|
|
||||||
resetsearchQuery,
|
|
||||||
filteredData,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ul
|
|
||||||
v-bind="$attrs"
|
|
||||||
class="app-timeline"
|
|
||||||
v-on="$listeners"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.app-timeline {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,182 +0,0 @@
|
|||||||
<template>
|
|
||||||
<li
|
|
||||||
v-bind="$attrs"
|
|
||||||
class="timeline-item"
|
|
||||||
:class="[`timeline-variant-${variant}`, fillBorder ? `timeline-item-fill-border-${variant}` : null]"
|
|
||||||
v-on="$listeners"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="!icon"
|
|
||||||
class="timeline-item-point"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="timeline-item-icon d-flex align-items-center justify-content-center rounded-circle"
|
|
||||||
>
|
|
||||||
<feather-icon :icon="icon" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<slot>
|
|
||||||
<div class="d-flex flex-sm-row flex-column flex-wrap justify-content-between mb-1 mb-sm-0">
|
|
||||||
<h6 v-text="title" />
|
|
||||||
<small
|
|
||||||
class="timeline-item-time text-nowrap text-muted"
|
|
||||||
v-text="time"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="mb-0"
|
|
||||||
v-text="subtitle"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
variant: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
time: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
fillBorder: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '~@core/scss/base/bootstrap-extended/include'; // Bootstrap includes
|
|
||||||
@import '~@core/scss/base/components/include'; // Components includes
|
|
||||||
|
|
||||||
// Color palettes
|
|
||||||
@import '~@core/scss/base/core/colors/palette-variables.scss';
|
|
||||||
|
|
||||||
$timeline-border-color: $border-color;
|
|
||||||
|
|
||||||
/* Generate:
|
|
||||||
* Apply background color to dot
|
|
||||||
*/
|
|
||||||
@each $color_name, $color in $colors {
|
|
||||||
@each $color_type, $color_value in $color {
|
|
||||||
@if $color_type== 'base' {
|
|
||||||
.timeline-variant-#{$color_name} {
|
|
||||||
&.timeline-item-fill-border-#{$color_name} {
|
|
||||||
border-color: $color_value !important;
|
|
||||||
&:last-of-type {
|
|
||||||
&:after {
|
|
||||||
background: linear-gradient($color_value, $white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.timeline-item-point {
|
|
||||||
background-color: $color_value;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
background-color: rgba($color_value, 0.12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item-icon {
|
|
||||||
color: $color_value;
|
|
||||||
border: 1px solid $color_value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item {
|
|
||||||
padding-left: 2.5rem;
|
|
||||||
position: relative;
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
border-left: 1px solid $timeline-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This gives shade to last timeline-item but isn't that revolutionary
|
|
||||||
&:last-of-type {
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 1px;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient($timeline-border-color, $white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item-point {
|
|
||||||
position: absolute;
|
|
||||||
left: -6px;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
top: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
z-index: 1;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
position: absolute;
|
|
||||||
top: -4px;
|
|
||||||
left: -4px;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: -12px;
|
|
||||||
top: 0;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background-color: $white;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// *===============================================---*
|
|
||||||
// *--------- Dark Layout ---------------------------------------*
|
|
||||||
// *===============================================---*
|
|
||||||
|
|
||||||
.dark-layout {
|
|
||||||
.timeline-item {
|
|
||||||
&:last-of-type {
|
|
||||||
&:after {
|
|
||||||
background: linear-gradient($theme-dark-border-color, $theme-dark-card-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
border-left-color: $theme-dark-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item-icon {
|
|
||||||
background-color: $theme-dark-card-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<!-- =========================================================================================
|
|
||||||
File Name: VxTour.vue
|
|
||||||
Description: Tour Component
|
|
||||||
----------------------------------------------------------------------------------------
|
|
||||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
|
||||||
Author: Pixinvent
|
|
||||||
Author URL: http://www.themeforest.net/user/pixinvent
|
|
||||||
========================================================================================== -->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<v-tour
|
|
||||||
name="vuexyTour"
|
|
||||||
:steps="steps"
|
|
||||||
>
|
|
||||||
<template slot-scope="tour">
|
|
||||||
<transition name="fade">
|
|
||||||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
|
||||||
<v-step
|
|
||||||
v-for="(step, index) of tour.steps"
|
|
||||||
v-if="tour.currentStep === index"
|
|
||||||
:key="index"
|
|
||||||
:step="step"
|
|
||||||
:previous-step="tour.previousStep"
|
|
||||||
:next-step="tour.nextStep"
|
|
||||||
:stop="tour.stop"
|
|
||||||
:is-first="tour.isFirst"
|
|
||||||
:is-last="tour.isLast"
|
|
||||||
:labels="tour.labels"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div
|
|
||||||
slot="actions"
|
|
||||||
class="tour-actions d-flex justify-content-between"
|
|
||||||
>
|
|
||||||
<!-- Skip Button -->
|
|
||||||
<b-button
|
|
||||||
v-if="tour.currentStep != tour.steps.length - 1"
|
|
||||||
size="sm"
|
|
||||||
variant="outline-primary"
|
|
||||||
class="btn-tour-skip mr-1"
|
|
||||||
@click="tour.stop"
|
|
||||||
>
|
|
||||||
<span class="mr-25 align-middle">Skip</span>
|
|
||||||
<feather-icon
|
|
||||||
icon="XIcon"
|
|
||||||
size="12"
|
|
||||||
/>
|
|
||||||
</b-button>
|
|
||||||
|
|
||||||
<!-- Previous Button -->
|
|
||||||
<b-button
|
|
||||||
v-if="tour.currentStep"
|
|
||||||
size="sm"
|
|
||||||
variant="outline-primary mr-1"
|
|
||||||
@click="tour.previousStep"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
icon="ChevronLeftIcon"
|
|
||||||
size="12"
|
|
||||||
/>
|
|
||||||
<span class="ml-25 align-middle">Previous</span>
|
|
||||||
</b-button>
|
|
||||||
|
|
||||||
<!-- Next Button -->
|
|
||||||
<b-button
|
|
||||||
v-if="tour.currentStep != tour.steps.length - 1"
|
|
||||||
size="sm"
|
|
||||||
variant="primary"
|
|
||||||
class="btn-tour-next"
|
|
||||||
@click="tour.nextStep"
|
|
||||||
>
|
|
||||||
<span class="mr-25 align-middle">Next</span>
|
|
||||||
<feather-icon
|
|
||||||
icon="ChevronRightIcon"
|
|
||||||
size="12"
|
|
||||||
/>
|
|
||||||
</b-button>
|
|
||||||
|
|
||||||
<!-- Finish Button -->
|
|
||||||
<b-button
|
|
||||||
v-if="tour.currentStep == tour.steps.length - 1"
|
|
||||||
size="sm"
|
|
||||||
variant="primary"
|
|
||||||
class="btn-tour-finish"
|
|
||||||
@click="tour.stop"
|
|
||||||
>
|
|
||||||
<span class="mr-25 align-middle">Finish</span>
|
|
||||||
<feather-icon
|
|
||||||
icon="CheckCircleIcon"
|
|
||||||
size="12"
|
|
||||||
/>
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</v-step>
|
|
||||||
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
|
||||||
</transition>
|
|
||||||
</template>
|
|
||||||
</v-tour>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BButton } from 'bootstrap-vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'VxTour',
|
|
||||||
components: {
|
|
||||||
BButton,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
steps: {
|
|
||||||
required: true,
|
|
||||||
type: Array,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,195 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-overlay
|
|
||||||
v-if="!cardClosed"
|
|
||||||
variant="white"
|
|
||||||
:show="showLoading"
|
|
||||||
spinner-variant="primary"
|
|
||||||
blur="0"
|
|
||||||
opacity=".75"
|
|
||||||
rounded="sm"
|
|
||||||
>
|
|
||||||
<b-card
|
|
||||||
ref="bCard"
|
|
||||||
v-bind="cardAttrs"
|
|
||||||
no-body
|
|
||||||
:aria-expanded="!content_visible ? 'true' : 'false'"
|
|
||||||
:aria-controls="parentID"
|
|
||||||
:style="cardStyles"
|
|
||||||
v-on="$listeners"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="showHeader"
|
|
||||||
class="card-header"
|
|
||||||
>
|
|
||||||
<!-- Title & SubTitle -->
|
|
||||||
<div>
|
|
||||||
<b-card-title>{{ $attrs.title }}</b-card-title>
|
|
||||||
<b-card-sub-title v-if="$attrs['sub-title']">
|
|
||||||
{{ $attrs['sub-title'] }}
|
|
||||||
</b-card-sub-title>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card Actions -->
|
|
||||||
<b-card-actions-container
|
|
||||||
v-if="showActions"
|
|
||||||
:available-actions="availableActions"
|
|
||||||
:is-collapsed="!content_visible"
|
|
||||||
@collapse="triggerCollapse"
|
|
||||||
@refresh="triggerRefresh"
|
|
||||||
@close="triggerClose"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collapsible Content -->
|
|
||||||
<b-collapse
|
|
||||||
:id="parentID"
|
|
||||||
v-model="content_visible"
|
|
||||||
:visible="content_visible"
|
|
||||||
class="card-content"
|
|
||||||
>
|
|
||||||
<!-- Handle no-body -->
|
|
||||||
<slot v-if="$attrs['no-body'] !== undefined" />
|
|
||||||
<b-card-body v-else>
|
|
||||||
<slot />
|
|
||||||
</b-card-body>
|
|
||||||
</b-collapse>
|
|
||||||
</b-card>
|
|
||||||
</b-overlay>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
BCard, BCardTitle, BCardSubTitle, BCardBody, BCollapse, BOverlay,
|
|
||||||
} from 'bootstrap-vue'
|
|
||||||
import BCardActionsContainer from './BCardActionsContainer.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
BCardActionsContainer,
|
|
||||||
BCard,
|
|
||||||
BCardTitle,
|
|
||||||
BCardSubTitle,
|
|
||||||
BCardBody,
|
|
||||||
BCollapse,
|
|
||||||
BOverlay,
|
|
||||||
},
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
|
||||||
collapsed: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
noActions: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
actionCollapse: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
actionRefresh: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
actionClose: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
parentID: '',
|
|
||||||
content_visible: !this.collapsed,
|
|
||||||
showLoading: false,
|
|
||||||
cardClosed: false,
|
|
||||||
cardStyles: {},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
cardAttrs() {
|
|
||||||
const cardAttrs = JSON.parse(JSON.stringify(this.$attrs))
|
|
||||||
delete cardAttrs.title
|
|
||||||
delete cardAttrs['sub-title']
|
|
||||||
return cardAttrs
|
|
||||||
},
|
|
||||||
showHeader() {
|
|
||||||
return this.$attrs.title || this.$attrs['sub-title'] || !this.noActions
|
|
||||||
},
|
|
||||||
showActions() {
|
|
||||||
if (this.noActions) return false
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
availableActions() {
|
|
||||||
const actions = []
|
|
||||||
const allFalse = (this.actionCollapse || this.actionRefresh || this.actionClose) === false
|
|
||||||
|
|
||||||
if (this.actionCollapse || allFalse) actions.push('collapse')
|
|
||||||
if (this.actionRefresh || allFalse) actions.push('refresh')
|
|
||||||
if (this.actionClose || allFalse) actions.push('close')
|
|
||||||
return actions
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.parentID = String(Math.floor(Math.random() * 10) + 1)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
removeCard() {
|
|
||||||
this.$set(this.cardStyles, 'maxHeight', `${this.$refs.bCard.clientHeight}px`)
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$set(this.cardStyles, 'maxHeight', '0px')
|
|
||||||
this.$set(this.cardStyles, 'overflow', 'hidden')
|
|
||||||
// this.$set(this.cardStyles, 'marginBottom', '0')
|
|
||||||
}, 10)
|
|
||||||
},
|
|
||||||
triggerCollapse() {
|
|
||||||
this.content_visible = !this.content_visible
|
|
||||||
this.$emit('collapse')
|
|
||||||
},
|
|
||||||
triggerRefresh() {
|
|
||||||
this.showLoading = true
|
|
||||||
this.$emit('refresh')
|
|
||||||
},
|
|
||||||
triggerClose() {
|
|
||||||
this.removeCard()
|
|
||||||
this.$emit('close')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '~@core/scss/base/bootstrap-extended/include';
|
|
||||||
@import '~@core/scss/base/components/variables-dark';
|
|
||||||
|
|
||||||
.card {
|
|
||||||
::v-deep .card-header {
|
|
||||||
.heading-elements {
|
|
||||||
position: static;
|
|
||||||
cursor: inherit;
|
|
||||||
|
|
||||||
.list-inline {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-layout {
|
|
||||||
.b-overlay-wrap ::v-deep .b-overlay {
|
|
||||||
// border: 10px solid red;
|
|
||||||
.bg-white {
|
|
||||||
background-color: $theme-dark-body-bg !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="heading-elements">
|
|
||||||
<ul class="list-inline mb-0">
|
|
||||||
<li v-if="availableActions.includes('collapse')">
|
|
||||||
<a
|
|
||||||
data-action="collapse"
|
|
||||||
:class="{ rotate: isCollapsed }"
|
|
||||||
@click="$emit('collapse')"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
icon="ChevronDownIcon"
|
|
||||||
size="16"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li v-if="availableActions.includes('refresh')">
|
|
||||||
<a
|
|
||||||
data-action="reload"
|
|
||||||
@click="$emit('refresh')"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
icon="RotateCwIcon"
|
|
||||||
size="14"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li v-if="availableActions.includes('close')">
|
|
||||||
<a
|
|
||||||
data-action="close"
|
|
||||||
@click="$emit('close')"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
icon="XIcon"
|
|
||||||
size="14"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
isCollapsed: {
|
|
||||||
type: Boolean,
|
|
||||||
requried: true,
|
|
||||||
},
|
|
||||||
availableActions: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
export { default as BCardActions } from './BCardActions.vue'
|
|
||||||
export { default as BCardActionsContainer } from './BCardActionsContainer.vue'
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card
|
|
||||||
v-bind="cardAttrs"
|
|
||||||
no-body
|
|
||||||
v-on="$listeners"
|
|
||||||
>
|
|
||||||
<div class="card-header">
|
|
||||||
<!-- Title & SubTitle -->
|
|
||||||
<div>
|
|
||||||
<b-card-title>{{ $attrs.title }}</b-card-title>
|
|
||||||
<b-card-sub-title v-if="$attrs['sub-title']">
|
|
||||||
{{ $attrs['sub-title'] }}
|
|
||||||
</b-card-sub-title>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<i
|
|
||||||
class="code-toggler feather icon-code cursor-pointer"
|
|
||||||
:aria-expanded="!code_visible ? 'true' : 'false'"
|
|
||||||
:aria-controls="parentID"
|
|
||||||
@click="code_visible = !code_visible"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="$attrs['no-body'] !== undefined">
|
|
||||||
<slot />
|
|
||||||
|
|
||||||
<!-- Code Content -->
|
|
||||||
<b-collapse
|
|
||||||
:id="parentID"
|
|
||||||
v-model="code_visible"
|
|
||||||
class="card-code"
|
|
||||||
:visible="code_visible"
|
|
||||||
>
|
|
||||||
<b-card-body>
|
|
||||||
<prism :language="codeLanguage">
|
|
||||||
<slot name="code" />
|
|
||||||
</prism>
|
|
||||||
</b-card-body>
|
|
||||||
</b-collapse>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<b-card-body v-else>
|
|
||||||
<!-- Card Content -->
|
|
||||||
<slot />
|
|
||||||
|
|
||||||
<!-- Code Content -->
|
|
||||||
<b-collapse
|
|
||||||
:id="parentID"
|
|
||||||
v-model="code_visible"
|
|
||||||
class="card-code"
|
|
||||||
:visible="code_visible"
|
|
||||||
>
|
|
||||||
<div class="p-1" />
|
|
||||||
<prism :language="codeLanguage">
|
|
||||||
<slot name="code" />
|
|
||||||
</prism>
|
|
||||||
</b-collapse>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
BCard, BCardTitle, BCardSubTitle, BCardBody, BCollapse,
|
|
||||||
} from 'bootstrap-vue'
|
|
||||||
import 'prismjs'
|
|
||||||
import 'prismjs/themes/prism-tomorrow.css'
|
|
||||||
import Prism from 'vue-prism-component'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
BCard,
|
|
||||||
BCardTitle,
|
|
||||||
BCardSubTitle,
|
|
||||||
BCardBody,
|
|
||||||
BCollapse,
|
|
||||||
Prism,
|
|
||||||
},
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
|
||||||
codeLanguage: {
|
|
||||||
default: 'markup',
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
parentID: '',
|
|
||||||
code_visible: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
cardAttrs() {
|
|
||||||
const cardAttrs = JSON.parse(JSON.stringify(this.$attrs))
|
|
||||||
delete cardAttrs.title
|
|
||||||
delete cardAttrs['sub-title']
|
|
||||||
return cardAttrs
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.parentID = String(Math.floor(Math.random() * 10) + 1)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import 'bootstrap/scss/functions';
|
|
||||||
@import '~@core/scss/base/bootstrap-extended/variables';
|
|
||||||
@import 'bootstrap/scss/variables';
|
|
||||||
@import '~@core/scss/base/components/variables-dark';
|
|
||||||
|
|
||||||
.card-code {
|
|
||||||
pre[class*='language-'] {
|
|
||||||
margin: 0;
|
|
||||||
max-height: 350px;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* width */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: #2d2d2d;
|
|
||||||
border-radius: 100%;
|
|
||||||
|
|
||||||
.dark-layout & {
|
|
||||||
background-color: $theme-dark-body-bg !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Track */
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle */
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: rgba(241,241,241,.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle on hover */
|
|
||||||
// ::-webkit-scrollbar-thumb:hover {
|
|
||||||
// }
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-toggler {
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
|
|
||||||
&[aria-expanded='false'] {
|
|
||||||
border-bottom-color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// HTML
|
|
||||||
.card {
|
|
||||||
.card-header .heading-elements {
|
|
||||||
position: static;
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import BCardCode from './BCardCode.vue'
|
|
||||||
|
|
||||||
export default BCardCode
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<template>
|
|
||||||
<e-charts
|
|
||||||
ref="line"
|
|
||||||
autoresize
|
|
||||||
:options="option"
|
|
||||||
theme="theme-color"
|
|
||||||
auto-resize
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ECharts from 'vue-echarts'
|
|
||||||
import 'echarts/lib/component/tooltip'
|
|
||||||
import 'echarts/lib/component/legend'
|
|
||||||
import 'echarts/lib/chart/bar'
|
|
||||||
import theme from './theme.json'
|
|
||||||
|
|
||||||
ECharts.registerTheme('theme-color', theme)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ECharts,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
optionData: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
left: 0,
|
|
||||||
},
|
|
||||||
grid: this.optionData.grid,
|
|
||||||
xAxis: this.optionData.xAxis,
|
|
||||||
yAxis: this.optionData.yAxis,
|
|
||||||
series: this.optionData.series,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<e-charts
|
|
||||||
ref="line"
|
|
||||||
autoresize
|
|
||||||
:options="option"
|
|
||||||
theme="theme-color"
|
|
||||||
auto-resize
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ECharts from 'vue-echarts'
|
|
||||||
import 'echarts/lib/component/tooltip'
|
|
||||||
import 'echarts/lib/component/legend'
|
|
||||||
import 'echarts/lib/chart/pie'
|
|
||||||
import theme from './theme.json'
|
|
||||||
|
|
||||||
ECharts.registerTheme('theme-color', theme)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ECharts,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
series: {
|
|
||||||
type: Array,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
left: 10,
|
|
||||||
bottom: '0',
|
|
||||||
},
|
|
||||||
series: this.series,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<template>
|
|
||||||
<e-charts
|
|
||||||
ref="line"
|
|
||||||
autoresize
|
|
||||||
:options="line"
|
|
||||||
theme="theme-color"
|
|
||||||
auto-resize
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ECharts from 'vue-echarts'
|
|
||||||
import 'echarts/lib/component/tooltip'
|
|
||||||
import 'echarts/lib/component/legend'
|
|
||||||
import 'echarts/lib/chart/line'
|
|
||||||
import theme from './theme.json'
|
|
||||||
|
|
||||||
ECharts.registerTheme('theme-color', theme)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ECharts,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
optionData: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
line: {
|
|
||||||
// Make gradient line here
|
|
||||||
visualMap: [{
|
|
||||||
show: true,
|
|
||||||
type: 'continuous',
|
|
||||||
min: 0,
|
|
||||||
max: 400,
|
|
||||||
}],
|
|
||||||
grid: {
|
|
||||||
width: '96%',
|
|
||||||
left: '30px',
|
|
||||||
top: '10px',
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
xAxis: [{
|
|
||||||
boundaryGap: false,
|
|
||||||
data: this.optionData.xAxisData,
|
|
||||||
}],
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
},
|
|
||||||
series: {
|
|
||||||
type: 'line',
|
|
||||||
showSymbol: false,
|
|
||||||
data: this.optionData.series,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.echarts {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<template>
|
|
||||||
<e-charts
|
|
||||||
ref="line"
|
|
||||||
autoresize
|
|
||||||
:options="option"
|
|
||||||
theme="theme-color"
|
|
||||||
auto-resize
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ECharts from 'vue-echarts'
|
|
||||||
import 'echarts/lib/component/tooltip'
|
|
||||||
import 'echarts/lib/component/legend'
|
|
||||||
import 'echarts/lib/chart/radar'
|
|
||||||
import theme from './theme.json'
|
|
||||||
|
|
||||||
ECharts.registerTheme('theme-color', theme)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ECharts,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
optionData: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
title: {
|
|
||||||
text: 'Basic radar chart',
|
|
||||||
},
|
|
||||||
tooltip: {},
|
|
||||||
legend: {
|
|
||||||
data: ['Point One', 'Point Two'],
|
|
||||||
bottom: '0',
|
|
||||||
left: '0',
|
|
||||||
},
|
|
||||||
radar: {
|
|
||||||
name: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#626262',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
borderRadius: 3,
|
|
||||||
padding: [3, 5],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
indicator: this.optionData.indicator,
|
|
||||||
splitArea: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: [
|
|
||||||
'#eeeeee',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#eeeeee',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: this.optionData.series,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<e-charts
|
|
||||||
ref="line"
|
|
||||||
:options="option"
|
|
||||||
theme="theme-color"
|
|
||||||
auto-resize
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as ECharts from 'echarts'
|
|
||||||
import 'echarts/lib/component/tooltip'
|
|
||||||
import 'echarts/lib/component/legend'
|
|
||||||
import 'echarts/lib/chart/scatter'
|
|
||||||
// import theme from './theme.json'
|
|
||||||
|
|
||||||
// ECharts.registerTheme('theme-color', theme)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ECharts,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
optionData: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
grid: {
|
|
||||||
width: '95%',
|
|
||||||
left: '30px',
|
|
||||||
right: '40px',
|
|
||||||
containLabel: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
enable: true,
|
|
||||||
left: '0',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
boundaryGap: false,
|
|
||||||
scale: true,
|
|
||||||
splitNumber: 10,
|
|
||||||
min: 0,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
splitLine: { show: false },
|
|
||||||
scale: true,
|
|
||||||
},
|
|
||||||
series: this.optionData.series,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<template>
|
|
||||||
<e-charts
|
|
||||||
ref="line"
|
|
||||||
autoresize
|
|
||||||
:options="option"
|
|
||||||
theme="theme-color"
|
|
||||||
auto-resize
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ECharts from 'vue-echarts'
|
|
||||||
import 'echarts/lib/component/tooltip'
|
|
||||||
import 'echarts/lib/component/legend'
|
|
||||||
import 'echarts/lib/chart/line'
|
|
||||||
import theme from './theme.json'
|
|
||||||
|
|
||||||
ECharts.registerTheme('theme-color', theme)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ECharts,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
optionData: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
title: {
|
|
||||||
text: 'Stacked area chart',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
left: '0',
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
width: '95%',
|
|
||||||
left: '40px',
|
|
||||||
right: '4%',
|
|
||||||
containLabel: false,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: this.optionData.xAxisData,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: this.optionData.series,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,475 +0,0 @@
|
|||||||
{
|
|
||||||
"color": [
|
|
||||||
"#826AF9",
|
|
||||||
"#9F87FF",
|
|
||||||
"#D2B0FF",
|
|
||||||
"#F8D3FF"
|
|
||||||
],
|
|
||||||
"backgroundColor": "rgba(0,0,0,0)",
|
|
||||||
"textStyle": {},
|
|
||||||
"title": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#666666"
|
|
||||||
},
|
|
||||||
"subtextStyle": {
|
|
||||||
"color": "#999999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lineStyle": {
|
|
||||||
"normal": {
|
|
||||||
"width": "1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"symbolSize": "10",
|
|
||||||
"symbol": "emptyCircle",
|
|
||||||
"smooth": false
|
|
||||||
},
|
|
||||||
"radar": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lineStyle": {
|
|
||||||
"normal": {
|
|
||||||
"width": "3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"symbolSize": "10",
|
|
||||||
"symbol": "emptyCircle",
|
|
||||||
"smooth": true
|
|
||||||
},
|
|
||||||
"bar": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"barBorderWidth": "0",
|
|
||||||
"barBorderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"barBorderWidth": "0",
|
|
||||||
"barBorderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"pie": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"scatter": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"boxplot": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"parallel": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"sankey": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"funnel": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"gauge": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"candlestick": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"color": "#d0648a",
|
|
||||||
"color0": "#ffffff",
|
|
||||||
"borderColor": "#d0648a",
|
|
||||||
"borderColor0": "#22c3aa",
|
|
||||||
"borderWidth": 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"graph": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderWidth": "0",
|
|
||||||
"borderColor": "#444444"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lineStyle": {
|
|
||||||
"normal": {
|
|
||||||
"width": 1,
|
|
||||||
"color": "#aaa"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"symbolSize": "10",
|
|
||||||
"symbol": "emptyCircle",
|
|
||||||
"smooth": true,
|
|
||||||
"color": [
|
|
||||||
"#4ea397",
|
|
||||||
"#22c3aa",
|
|
||||||
"#7bd9a5"
|
|
||||||
],
|
|
||||||
"label": {
|
|
||||||
"normal": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#ffffff"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"map": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"areaColor": "#eeeeee",
|
|
||||||
"borderColor": "#999999",
|
|
||||||
"borderWidth": "0.5"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"areaColor": "rgba(34,195,170,0.25)",
|
|
||||||
"borderColor": "#22c3aa",
|
|
||||||
"borderWidth": "0.5"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"label": {
|
|
||||||
"normal": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#28544e"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "rgb(52,158,142)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"geo": {
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"areaColor": "#eeeeee",
|
|
||||||
"borderColor": "#999999",
|
|
||||||
"borderWidth": "0.5"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"areaColor": "rgba(34,195,170,0.25)",
|
|
||||||
"borderColor": "#22c3aa",
|
|
||||||
"borderWidth": "0.5"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"label": {
|
|
||||||
"normal": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#28544e"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "rgb(52,158,142)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"categoryAxis": {
|
|
||||||
"axisLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#cccccc"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisTick": {
|
|
||||||
"show": false,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#333333"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisLabel": {
|
|
||||||
"show": true,
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#999999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": [
|
|
||||||
"#eeeeee"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitArea": {
|
|
||||||
"show": false,
|
|
||||||
"areaStyle": {
|
|
||||||
"color": [
|
|
||||||
"rgba(250,250,250,0.3)",
|
|
||||||
"rgba(200,200,200,0.3)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"valueAxis": {
|
|
||||||
"axisLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#cccccc"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisTick": {
|
|
||||||
"show": false,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#333333"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisLabel": {
|
|
||||||
"show": true,
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#999999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": [
|
|
||||||
"#eeeeee"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitArea": {
|
|
||||||
"show": false,
|
|
||||||
"areaStyle": {
|
|
||||||
"color": [
|
|
||||||
"rgba(250,250,250,0.3)",
|
|
||||||
"rgba(200,200,200,0.3)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"logAxis": {
|
|
||||||
"axisLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#cccccc"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisTick": {
|
|
||||||
"show": false,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#333333"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisLabel": {
|
|
||||||
"show": true,
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#999999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": [
|
|
||||||
"#eeeeee"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitArea": {
|
|
||||||
"show": false,
|
|
||||||
"areaStyle": {
|
|
||||||
"color": [
|
|
||||||
"rgba(250,250,250,0.3)",
|
|
||||||
"rgba(200,200,200,0.3)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"timeAxis": {
|
|
||||||
"axisLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#cccccc"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisTick": {
|
|
||||||
"show": false,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#333333"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"axisLabel": {
|
|
||||||
"show": true,
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#999999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitLine": {
|
|
||||||
"show": true,
|
|
||||||
"lineStyle": {
|
|
||||||
"color": [
|
|
||||||
"#eeeeee"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"splitArea": {
|
|
||||||
"show": false,
|
|
||||||
"areaStyle": {
|
|
||||||
"color": [
|
|
||||||
"rgba(250,250,250,0.3)",
|
|
||||||
"rgba(200,200,200,0.3)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"toolbox": {
|
|
||||||
"iconStyle": {
|
|
||||||
"normal": {
|
|
||||||
"borderColor": "#aaaaaa"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"borderColor": "#666"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"legend": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#999999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"tooltip": {
|
|
||||||
"axisPointer": {
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#ccc",
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"crossStyle": {
|
|
||||||
"color": "#ccc",
|
|
||||||
"width": 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"timeline": {
|
|
||||||
"lineStyle": {
|
|
||||||
"color": "#349e8e",
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"itemStyle": {
|
|
||||||
"normal": {
|
|
||||||
"color": "#349e8e",
|
|
||||||
"borderWidth": "1"
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"color": "#57e8d2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"controlStyle": {
|
|
||||||
"normal": {
|
|
||||||
"color": "#349e8e",
|
|
||||||
"borderColor": "#349e8e",
|
|
||||||
"borderWidth": "0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"checkpointStyle": {
|
|
||||||
"color": "#22c3aa",
|
|
||||||
"borderColor": "rgba(34,195,170,0.25)"
|
|
||||||
},
|
|
||||||
"label": {
|
|
||||||
"normal": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#349e8e"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"visualMap": {
|
|
||||||
"color": [
|
|
||||||
"#d0648a",
|
|
||||||
"#22c3aa",
|
|
||||||
"rgba(123,217,165,0.2)"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"dataZoom": {
|
|
||||||
"backgroundColor": "#fff",
|
|
||||||
"dataBackgroundColor": "#dedede",
|
|
||||||
"fillerColor": "rgba(34,195,170,0.25)",
|
|
||||||
"handleColor": "#dddddd",
|
|
||||||
"handleSize": "100%",
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#999"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"markPoint": {
|
|
||||||
"label": {
|
|
||||||
"normal": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#ffffff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"emphasis": {
|
|
||||||
"textStyle": {
|
|
||||||
"color": "#ffffff"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card no-body>
|
|
||||||
<b-card-body class="d-flex justify-content-between align-items-center">
|
|
||||||
<div class="truncate">
|
|
||||||
<h2 class="mb-25 font-weight-bolder">
|
|
||||||
{{ statistic }}
|
|
||||||
</h2>
|
|
||||||
<span>{{ statisticTitle }}</span>
|
|
||||||
</div>
|
|
||||||
<b-avatar
|
|
||||||
:variant="`light-${color}`"
|
|
||||||
size="45"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
size="21"
|
|
||||||
:icon="icon"
|
|
||||||
/>
|
|
||||||
</b-avatar>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
BCard,
|
|
||||||
BCardBody,
|
|
||||||
BAvatar,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statistic: {
|
|
||||||
type: [Number, String],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statisticTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card class="text-center">
|
|
||||||
<b-avatar
|
|
||||||
class="mb-1"
|
|
||||||
:variant="`light-${color}`"
|
|
||||||
size="45"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
size="21"
|
|
||||||
:icon="icon"
|
|
||||||
/>
|
|
||||||
</b-avatar>
|
|
||||||
<div class="truncate">
|
|
||||||
<h2 class="mb-25 font-weight-bolder">
|
|
||||||
{{ statistic }}
|
|
||||||
</h2>
|
|
||||||
<span>{{ statisticTitle }}</span>
|
|
||||||
</div>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BCard, BAvatar } from 'bootstrap-vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
BCard,
|
|
||||||
BAvatar,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statistic: {
|
|
||||||
type: [Number, String],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statisticTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card no-body>
|
|
||||||
<b-card-body class="pb-0">
|
|
||||||
<b-avatar
|
|
||||||
class="mb-1"
|
|
||||||
:variant="`light-${color}`"
|
|
||||||
size="45"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
size="21"
|
|
||||||
:icon="icon"
|
|
||||||
/>
|
|
||||||
</b-avatar>
|
|
||||||
<div class="truncate">
|
|
||||||
<h2 class="mb-25 font-weight-bolder">
|
|
||||||
{{ statistic }}
|
|
||||||
</h2>
|
|
||||||
<span>{{ statisticTitle }}</span>
|
|
||||||
</div>
|
|
||||||
</b-card-body>
|
|
||||||
|
|
||||||
<vue-apex-charts
|
|
||||||
type="area"
|
|
||||||
height="100"
|
|
||||||
width="100%"
|
|
||||||
:options="chartOptionsComputed"
|
|
||||||
:series="chartData"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
|
|
||||||
import VueApexCharts from 'vue-apexcharts'
|
|
||||||
import { $themeColors } from '@themeConfig'
|
|
||||||
import { areaChartOptions } from './chartOptions'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
VueApexCharts,
|
|
||||||
BCard,
|
|
||||||
BCardBody,
|
|
||||||
BAvatar,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statistic: {
|
|
||||||
type: [Number, String],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statisticTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
chartData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
chartOptions: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
chartOptionsComputed() {
|
|
||||||
if (this.chartOptions === null) {
|
|
||||||
const options = JSON.parse(JSON.stringify(areaChartOptions))
|
|
||||||
options.theme.monochrome.color = $themeColors[this.color]
|
|
||||||
return options
|
|
||||||
}
|
|
||||||
return this.chartOptions
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card no-body>
|
|
||||||
<b-card-body class="d-flex justify-content-between align-items-center pb-0">
|
|
||||||
<div class="truncate">
|
|
||||||
<h2 class="font-weight-bolder">
|
|
||||||
{{ statistic }}
|
|
||||||
</h2>
|
|
||||||
<span>{{ statisticTitle }}</span>
|
|
||||||
</div>
|
|
||||||
<b-avatar
|
|
||||||
:variant="`light-${color}`"
|
|
||||||
size="45"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
size="21"
|
|
||||||
:icon="icon"
|
|
||||||
/>
|
|
||||||
</b-avatar>
|
|
||||||
</b-card-body>
|
|
||||||
|
|
||||||
<vue-apex-charts
|
|
||||||
type="line"
|
|
||||||
height="100"
|
|
||||||
width="100%"
|
|
||||||
:options="chartOptionsComputed"
|
|
||||||
:series="chartData"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
|
|
||||||
import VueApexCharts from 'vue-apexcharts'
|
|
||||||
import { $themeColors } from '@themeConfig'
|
|
||||||
import { lineChartOptions } from './chartOptions'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
VueApexCharts,
|
|
||||||
BCard,
|
|
||||||
BCardBody,
|
|
||||||
BAvatar,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statistic: {
|
|
||||||
type: [Number, String],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statisticTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
chartData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
chartOptions: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
chartOptionsComputed() {
|
|
||||||
if (this.chartOptions === null) {
|
|
||||||
const options = JSON.parse(JSON.stringify(lineChartOptions))
|
|
||||||
|
|
||||||
options.fill.gradient.gradientToColors = [this.gradientToColor(this.color)]
|
|
||||||
options.colors = [$themeColors[this.color]]
|
|
||||||
|
|
||||||
return options
|
|
||||||
}
|
|
||||||
return this.chartOptions
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
gradientToColor(color) {
|
|
||||||
const gradientToColors = {
|
|
||||||
primary: '#A9A2F6',
|
|
||||||
success: '#55DD92',
|
|
||||||
warning: '#ffc085',
|
|
||||||
danger: '#F97794',
|
|
||||||
info: '#59E0F0',
|
|
||||||
secondary: '#B4B9BF',
|
|
||||||
light: '#D0D4DB',
|
|
||||||
dark: '#919191',
|
|
||||||
}
|
|
||||||
|
|
||||||
return gradientToColors[color]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
import { $themeColors } from '@themeConfig'
|
|
||||||
|
|
||||||
export const areaChartOptions = {
|
|
||||||
grid: {
|
|
||||||
show: false,
|
|
||||||
padding: {
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
chart: {
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
sparkline: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
curve: 'smooth',
|
|
||||||
width: 2.5,
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: 'gradient',
|
|
||||||
gradient: {
|
|
||||||
shadeIntensity: 0.9,
|
|
||||||
opacityFrom: 0.5,
|
|
||||||
opacityTo: 0.2,
|
|
||||||
stops: [0, 80, 100],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
type: 'numeric',
|
|
||||||
lines: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labels: { show: false },
|
|
||||||
},
|
|
||||||
yaxis: [
|
|
||||||
{
|
|
||||||
y: 0,
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 0,
|
|
||||||
padding: {
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tooltip: {
|
|
||||||
x: { show: false },
|
|
||||||
},
|
|
||||||
theme: {
|
|
||||||
monochrome: {
|
|
||||||
enabled: true,
|
|
||||||
color: $themeColors.primary,
|
|
||||||
shadeTo: 'light',
|
|
||||||
shadeIntensity: 0.65,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const lineChartOptions = {
|
|
||||||
grid: {
|
|
||||||
show: false,
|
|
||||||
padding: {
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
chart: {
|
|
||||||
type: 'line',
|
|
||||||
dropShadow: {
|
|
||||||
enabled: true,
|
|
||||||
top: 5,
|
|
||||||
left: 0,
|
|
||||||
blur: 4,
|
|
||||||
opacity: 0.1,
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
sparkline: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
width: 5,
|
|
||||||
curve: 'smooth',
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
type: 'numeric',
|
|
||||||
},
|
|
||||||
colors: [$themeColors.primary],
|
|
||||||
fill: {
|
|
||||||
type: 'gradient',
|
|
||||||
gradient: {
|
|
||||||
shade: 'dark',
|
|
||||||
gradientToColors: ['#A9A2F6'],
|
|
||||||
shadeIntensity: 1,
|
|
||||||
type: 'horizontal',
|
|
||||||
opacityFrom: 1,
|
|
||||||
opacityTo: 1,
|
|
||||||
stops: [0, 100, 100, 100],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
markers: {
|
|
||||||
size: 0,
|
|
||||||
hover: {
|
|
||||||
size: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
x: { show: false },
|
|
||||||
},
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user