main
commit
24b28d428c
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
VITE_API_BASE_URL = '/api'
|
||||||
|
|
||||||
|
VITE_NFT_BASE_URL = 'http://store-manage.hmily.club'
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
VITE_API_BASE_URL = '/api'
|
||||||
|
|
||||||
|
VITE_NFT_BASE_URL = 'http://store-manage.hmily.club'
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "sotre-manage-echarts",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ant-design-vue": "^4.2.1",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"echarts": "^5.3.2",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-router": "^4.3.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"@vueuse/core": "^10.9.0",
|
||||||
|
"unocss": "^0.59.4",
|
||||||
|
"vite": "^5.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,122 @@
|
||||||
|
<template>
|
||||||
|
<span :style="{ color }">
|
||||||
|
{{ value }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
watchEffect,
|
||||||
|
unref,
|
||||||
|
onMounted,
|
||||||
|
watch,
|
||||||
|
} from 'vue'
|
||||||
|
import { useTransition, TransitionPresets } from '@vueuse/core'
|
||||||
|
|
||||||
|
const isNumber = (val) => typeof val === 'number'
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
startVal: { type: Number, default: 0 },
|
||||||
|
endVal: { type: Number, default: 2021 },
|
||||||
|
duration: { type: Number, default: 1500 },
|
||||||
|
autoplay: { type: Boolean, default: true },
|
||||||
|
decimals: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
validator(value) {
|
||||||
|
return value >= 0
|
||||||
|
},
|
||||||
|
},
|
||||||
|
prefix: { type: String, default: '' },
|
||||||
|
suffix: { type: String, default: '' },
|
||||||
|
separator: { type: String, default: ',' },
|
||||||
|
decimal: { type: String, default: '.' },
|
||||||
|
/**
|
||||||
|
* font color
|
||||||
|
*/
|
||||||
|
color: { type: String },
|
||||||
|
/**
|
||||||
|
* Turn on digital animation
|
||||||
|
*/
|
||||||
|
useEasing: { type: Boolean, default: true },
|
||||||
|
/**
|
||||||
|
* Digital animation
|
||||||
|
*/
|
||||||
|
transition: { type: String, default: 'linear' },
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'CountTo',
|
||||||
|
props,
|
||||||
|
emits: ['onStarted', 'onFinished'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const source = ref(props.startVal)
|
||||||
|
const disabled = ref(false)
|
||||||
|
let outputValue = useTransition(source)
|
||||||
|
|
||||||
|
const value = computed(() => formatNumber(unref(outputValue)))
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
source.value = props.startVal
|
||||||
|
})
|
||||||
|
|
||||||
|
watch([() => props.startVal, () => props.endVal], () => {
|
||||||
|
if (props.autoplay) {
|
||||||
|
start()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
props.autoplay && start()
|
||||||
|
})
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
run()
|
||||||
|
source.value = props.endVal
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
source.value = props.startVal
|
||||||
|
run()
|
||||||
|
}
|
||||||
|
|
||||||
|
function run() {
|
||||||
|
outputValue = useTransition(source, {
|
||||||
|
disabled,
|
||||||
|
duration: props.duration,
|
||||||
|
onFinished: () => emit('onFinished'),
|
||||||
|
onStarted: () => emit('onStarted'),
|
||||||
|
...(props.useEasing
|
||||||
|
? { transition: TransitionPresets[props.transition] }
|
||||||
|
: {}),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatNumber(num) {
|
||||||
|
if (!num && num !== 0) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
const { decimals, decimal, separator, suffix, prefix } = props
|
||||||
|
num = Number(num).toFixed(decimals)
|
||||||
|
num = parseFloat(num)
|
||||||
|
num += ''
|
||||||
|
|
||||||
|
const x = num.split('.')
|
||||||
|
let x1 = x[0]
|
||||||
|
const x2 = x.length > 1 ? decimal + x[1] : ''
|
||||||
|
|
||||||
|
const rgx = /(\d+)(\d{3})/
|
||||||
|
if (separator && !isNumber(separator)) {
|
||||||
|
while (rgx.test(x1)) {
|
||||||
|
x1 = x1.replace(rgx, '$1' + separator + '$2')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return prefix + x1 + x2 + suffix
|
||||||
|
}
|
||||||
|
|
||||||
|
return { value, start, reset }
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
msg: String,
|
||||||
|
})
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<button type="button" @click="count++">count is {{ count }}</button>
|
||||||
|
<p>
|
||||||
|
Edit
|
||||||
|
<code>components/HelloWorld.vue</code> to test HMR
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Check out
|
||||||
|
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||||
|
>create-vue</a
|
||||||
|
>, the official Vue + Vite starter
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Install
|
||||||
|
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||||
|
in your IDE for a better DX
|
||||||
|
</p>
|
||||||
|
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import ScaleScreen from './src/ScaleScreen.vue'
|
||||||
|
|
||||||
|
export default ScaleScreen
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<transition name="slide">
|
||||||
|
<div
|
||||||
|
v-if="isScroll"
|
||||||
|
v-show="showTop"
|
||||||
|
class="fixed topTool border border-[#396684] bg-[#1c2c34cc] top-0 z-99999 flex text-white py-4px px-10px"
|
||||||
|
>
|
||||||
|
<div class="px-10px cursor-pointer" @click="handleScrollLeft">左</div>
|
||||||
|
<div class="px-10px cursor-pointer" @click="handleScrollCenter">中</div>
|
||||||
|
<div class="px-10px cursor-pointer" @click="handleScrollRight">右</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<section
|
||||||
|
ref="screenRef"
|
||||||
|
:style="{ ...styles.box, ...boxStyle }"
|
||||||
|
class="v-screen-box"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:style="{ ...styles.wrapper, ...wrapperStyle }"
|
||||||
|
class="screen-wrapper"
|
||||||
|
ref="screenWrapper"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
defineComponent,
|
||||||
|
nextTick,
|
||||||
|
onMounted,
|
||||||
|
onUnmounted,
|
||||||
|
reactive,
|
||||||
|
ref,
|
||||||
|
toRef,
|
||||||
|
} from 'vue'
|
||||||
|
/**
|
||||||
|
* 防抖函数
|
||||||
|
* @param {Function} fn
|
||||||
|
* @param {number} delay
|
||||||
|
* @returns {() => void}
|
||||||
|
*/
|
||||||
|
function debounce(fn, delay) {
|
||||||
|
let timer
|
||||||
|
return function (...args) {
|
||||||
|
if (timer) clearTimeout(timer)
|
||||||
|
timer = setTimeout(
|
||||||
|
() => {
|
||||||
|
typeof fn === 'function' && fn.apply(null, args)
|
||||||
|
clearTimeout(timer)
|
||||||
|
},
|
||||||
|
delay > 0 ? delay : 100
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ScaleScreen',
|
||||||
|
props: {
|
||||||
|
width: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 1920,
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 1080,
|
||||||
|
},
|
||||||
|
fullScreen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
autoScale: {
|
||||||
|
type: [Object, Boolean],
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
delay: {
|
||||||
|
type: Number,
|
||||||
|
default: 500,
|
||||||
|
},
|
||||||
|
boxStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
wrapperStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const state = reactive({
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
originalWidth: 0,
|
||||||
|
originalHeight: 0,
|
||||||
|
observer: null,
|
||||||
|
showTop: false,
|
||||||
|
isScroll: false,
|
||||||
|
})
|
||||||
|
const screenRef = ref()
|
||||||
|
const styles = reactive({
|
||||||
|
box: {
|
||||||
|
overflow: 'hidden',
|
||||||
|
backgroundSize: `100% 100%`,
|
||||||
|
background: `#000`,
|
||||||
|
width: `100vw`,
|
||||||
|
height: `100vh`,
|
||||||
|
},
|
||||||
|
wrapper: {
|
||||||
|
transitionProperty: `all`,
|
||||||
|
transitionTimingFunction: `cubic-bezier(0.4, 0, 0.2, 1)`,
|
||||||
|
transitionDuration: `500ms`,
|
||||||
|
position: `relative`,
|
||||||
|
overflow: `hidden`,
|
||||||
|
zIndex: 100,
|
||||||
|
transformOrigin: `left top`,
|
||||||
|
display: 'inline-block',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const screenWrapper = ref()
|
||||||
|
/**
|
||||||
|
* 初始化大屏容器宽高
|
||||||
|
*/
|
||||||
|
const initSize = () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
nextTick(() => {
|
||||||
|
var _a, _b
|
||||||
|
// region 获取大屏真实尺寸
|
||||||
|
if (props.width && props.height) {
|
||||||
|
state.width = props.width
|
||||||
|
state.height = props.height
|
||||||
|
} else {
|
||||||
|
state.width =
|
||||||
|
(_a = screenWrapper.value) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.clientWidth
|
||||||
|
state.height =
|
||||||
|
(_b = screenWrapper.value) === null || _b === void 0
|
||||||
|
? void 0
|
||||||
|
: _b.clientHeight
|
||||||
|
}
|
||||||
|
// endregion
|
||||||
|
// region 获取画布尺寸
|
||||||
|
if (!state.originalHeight || !state.originalWidth) {
|
||||||
|
state.originalWidth = window.screen.width
|
||||||
|
state.originalHeight = window.screen.height
|
||||||
|
}
|
||||||
|
// endregion
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 更新大屏容器宽高
|
||||||
|
*/
|
||||||
|
const updateSize = () => {
|
||||||
|
if (state.width && state.height) {
|
||||||
|
screenWrapper.value.style.width = `${state.width}px`
|
||||||
|
screenWrapper.value.style.height = `${state.height}px`
|
||||||
|
} else {
|
||||||
|
screenWrapper.value.style.width = `${state.originalWidth}px`
|
||||||
|
screenWrapper.value.style.height = `${state.originalHeight}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const autoScale = (scale) => {
|
||||||
|
if (!props.autoScale) return
|
||||||
|
const domWidth = screenWrapper.value.clientWidth
|
||||||
|
const domHeight = screenWrapper.value.clientHeight
|
||||||
|
const currentWidth = document.body.clientWidth
|
||||||
|
const currentHeight = document.body.clientHeight
|
||||||
|
screenWrapper.value.style.transform = `scale(${scale},${scale})`
|
||||||
|
let mx = Math.max((currentWidth - domWidth * scale) / 2, 0)
|
||||||
|
let my = Math.max((currentHeight - domHeight * scale) / 2, 0)
|
||||||
|
if (typeof props.autoScale === 'object') {
|
||||||
|
!props.autoScale.x && (mx = 0)
|
||||||
|
!props.autoScale.y && (my = 0)
|
||||||
|
}
|
||||||
|
screenWrapper.value.style.margin = `${my}px ${mx}px`
|
||||||
|
}
|
||||||
|
const updateScale = () => {
|
||||||
|
// 获取真实视口尺寸
|
||||||
|
const currentWidth = document.body.clientWidth
|
||||||
|
let currentHeight = document.body.clientHeight
|
||||||
|
if (currentWidth < 3000) currentHeight = currentHeight - 10
|
||||||
|
// 获取大屏最终的宽高
|
||||||
|
const realWidth = state.width || state.originalWidth
|
||||||
|
const realHeight = state.height || state.originalHeight
|
||||||
|
// 计算缩放比例
|
||||||
|
const widthScale = currentWidth / +realWidth
|
||||||
|
const heightScale = currentHeight / +realHeight
|
||||||
|
// 若要铺满全屏，则按照各自比例缩放
|
||||||
|
if (props.fullScreen) {
|
||||||
|
screenWrapper.value.style.transform = `scale(${widthScale},${heightScale})`
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 按照宽高最小比例进行缩放
|
||||||
|
let scale = Math.min(widthScale, heightScale)
|
||||||
|
if (currentWidth < 3000) {
|
||||||
|
scale = heightScale
|
||||||
|
state.isScroll = true
|
||||||
|
styles.box['overflow-x'] = 'auto'
|
||||||
|
} else {
|
||||||
|
state.isScroll = false
|
||||||
|
styles.box.overflow = 'hidden'
|
||||||
|
}
|
||||||
|
autoScale(scale)
|
||||||
|
}
|
||||||
|
const onResize = debounce(async () => {
|
||||||
|
await initSize()
|
||||||
|
updateSize()
|
||||||
|
updateScale()
|
||||||
|
}, props.delay)
|
||||||
|
const initMutationObserver = () => {
|
||||||
|
const observer = (state.observer = new MutationObserver(() => {
|
||||||
|
onResize()
|
||||||
|
}))
|
||||||
|
observer.observe(screenWrapper.value, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['style'],
|
||||||
|
attributeOldValue: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const onMouseUpdate = (e) => {
|
||||||
|
if (e.pageY <= 30) state.showTop = true
|
||||||
|
else state.showTop = false
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(async () => {
|
||||||
|
await initSize()
|
||||||
|
updateSize()
|
||||||
|
updateScale()
|
||||||
|
window.addEventListener('resize', onResize)
|
||||||
|
window.addEventListener('mousemove', onMouseUpdate)
|
||||||
|
initMutationObserver()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
var _a
|
||||||
|
window.removeEventListener('resize', onResize)
|
||||||
|
window.removeEventListener('mousemove', onMouseUpdate)
|
||||||
|
;(_a = state.observer) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.disconnect()
|
||||||
|
})
|
||||||
|
const handleScrollLeft = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
var _a
|
||||||
|
;(_a = screenRef.value) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.scrollTo({ left: 0, behavior: 'smooth' })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handleScrollCenter = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
var _a, _b, _c
|
||||||
|
;(_a = screenRef.value) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.scrollTo({
|
||||||
|
left:
|
||||||
|
((_c =
|
||||||
|
(_b = screenRef.value) === null || _b === void 0
|
||||||
|
? void 0
|
||||||
|
: _b.scrollWidth) !== null && _c !== void 0
|
||||||
|
? _c
|
||||||
|
: 0) /
|
||||||
|
2 -
|
||||||
|
document.body.clientWidth / 2,
|
||||||
|
behavior: 'smooth',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handleScrollRight = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
var _a, _b
|
||||||
|
;(_a = screenRef.value) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.scrollTo({
|
||||||
|
left:
|
||||||
|
(_b = screenRef.value) === null || _b === void 0
|
||||||
|
? void 0
|
||||||
|
: _b.scrollWidth,
|
||||||
|
behavior: 'smooth',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const showTop = toRef(state, 'showTop')
|
||||||
|
const isScroll = toRef(state, 'isScroll')
|
||||||
|
return {
|
||||||
|
screenWrapper,
|
||||||
|
styles,
|
||||||
|
isScroll,
|
||||||
|
showTop,
|
||||||
|
screenRef,
|
||||||
|
handleScrollLeft,
|
||||||
|
handleScrollCenter,
|
||||||
|
handleScrollRight,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.topTool {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import * as echarts from 'echarts/core'
|
||||||
|
|
||||||
|
import {
|
||||||
|
BarChart,
|
||||||
|
LineChart,
|
||||||
|
PieChart,
|
||||||
|
MapChart,
|
||||||
|
PictorialBarChart,
|
||||||
|
RadarChart,
|
||||||
|
ScatterChart,
|
||||||
|
} from 'echarts/charts'
|
||||||
|
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent,
|
||||||
|
PolarComponent,
|
||||||
|
AriaComponent,
|
||||||
|
ParallelComponent,
|
||||||
|
LegendComponent,
|
||||||
|
RadarComponent,
|
||||||
|
ToolboxComponent,
|
||||||
|
DataZoomComponent,
|
||||||
|
VisualMapComponent,
|
||||||
|
TimelineComponent,
|
||||||
|
CalendarComponent,
|
||||||
|
GraphicComponent,
|
||||||
|
} from 'echarts/components'
|
||||||
|
|
||||||
|
import { SVGRenderer } from 'echarts/renderers'
|
||||||
|
|
||||||
|
echarts.use([
|
||||||
|
LegendComponent,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent,
|
||||||
|
PolarComponent,
|
||||||
|
AriaComponent,
|
||||||
|
ParallelComponent,
|
||||||
|
BarChart,
|
||||||
|
LineChart,
|
||||||
|
PieChart,
|
||||||
|
MapChart,
|
||||||
|
RadarChart,
|
||||||
|
SVGRenderer,
|
||||||
|
PictorialBarChart,
|
||||||
|
RadarComponent,
|
||||||
|
ToolboxComponent,
|
||||||
|
DataZoomComponent,
|
||||||
|
VisualMapComponent,
|
||||||
|
TimelineComponent,
|
||||||
|
CalendarComponent,
|
||||||
|
GraphicComponent,
|
||||||
|
ScatterChart,
|
||||||
|
])
|
||||||
|
|
||||||
|
export default echarts
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export function isFunction(val) {
|
||||||
|
return typeof val === 'function'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
import { ref, computed, unref } from 'vue';
|
||||||
|
import { useEventListener } from '/@/hooks/event/useEventListener';
|
||||||
|
import { screenMap, sizeEnum, screenEnum } from '/@/enums/breakpointEnum';
|
||||||
|
let globalScreenRef;
|
||||||
|
let globalWidthRef;
|
||||||
|
let globalRealWidthRef;
|
||||||
|
export function useBreakpoint() {
|
||||||
|
return {
|
||||||
|
screenRef: computed(() => unref(globalScreenRef)),
|
||||||
|
widthRef: globalWidthRef,
|
||||||
|
screenEnum,
|
||||||
|
realWidthRef: globalRealWidthRef,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Just call it once
|
||||||
|
export function createBreakpointListen(fn) {
|
||||||
|
const screenRef = ref(sizeEnum.XL);
|
||||||
|
const realWidthRef = ref(window.innerWidth);
|
||||||
|
function getWindowWidth() {
|
||||||
|
const width = document.body.clientWidth;
|
||||||
|
const xs = screenMap.get(sizeEnum.XS);
|
||||||
|
const sm = screenMap.get(sizeEnum.SM);
|
||||||
|
const md = screenMap.get(sizeEnum.MD);
|
||||||
|
const lg = screenMap.get(sizeEnum.LG);
|
||||||
|
const xl = screenMap.get(sizeEnum.XL);
|
||||||
|
if (width < xs) {
|
||||||
|
screenRef.value = sizeEnum.XS;
|
||||||
|
}
|
||||||
|
else if (width < sm) {
|
||||||
|
screenRef.value = sizeEnum.SM;
|
||||||
|
}
|
||||||
|
else if (width < md) {
|
||||||
|
screenRef.value = sizeEnum.MD;
|
||||||
|
}
|
||||||
|
else if (width < lg) {
|
||||||
|
screenRef.value = sizeEnum.LG;
|
||||||
|
}
|
||||||
|
else if (width < xl) {
|
||||||
|
screenRef.value = sizeEnum.XL;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
screenRef.value = sizeEnum.XXL;
|
||||||
|
}
|
||||||
|
realWidthRef.value = width;
|
||||||
|
}
|
||||||
|
useEventListener({
|
||||||
|
el: window,
|
||||||
|
name: 'resize',
|
||||||
|
listener: () => {
|
||||||
|
getWindowWidth();
|
||||||
|
resizeFn();
|
||||||
|
},
|
||||||
|
// wait: 100,
|
||||||
|
});
|
||||||
|
getWindowWidth();
|
||||||
|
globalScreenRef = computed(() => unref(screenRef));
|
||||||
|
globalWidthRef = computed(() => screenMap.get(unref(screenRef)));
|
||||||
|
globalRealWidthRef = computed(() => unref(realWidthRef));
|
||||||
|
function resizeFn() {
|
||||||
|
fn === null || fn === void 0 ? void 0 : fn({
|
||||||
|
screen: globalScreenRef,
|
||||||
|
width: globalWidthRef,
|
||||||
|
realWidth: globalRealWidthRef,
|
||||||
|
screenEnum,
|
||||||
|
screenMap,
|
||||||
|
sizeEnum,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
resizeFn();
|
||||||
|
return {
|
||||||
|
screenRef: globalScreenRef,
|
||||||
|
screenEnum,
|
||||||
|
widthRef: globalWidthRef,
|
||||||
|
realWidthRef: globalRealWidthRef,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
import { useTimeoutFn } from './useTimeout.js';
|
||||||
|
import { tryOnUnmounted } from '@vueuse/core';
|
||||||
|
import { unref, nextTick, watch, computed, ref } from 'vue';
|
||||||
|
import { useDebounceFn } from '@vueuse/core';
|
||||||
|
import { useEventListener } from './useEventListener.js';
|
||||||
|
import echarts from './echarts.js';
|
||||||
|
export function useECharts(elRef, theme = 'default') {
|
||||||
|
const getDarkMode = computed(() => {
|
||||||
|
return 'light'
|
||||||
|
});
|
||||||
|
let chartInstance = null;
|
||||||
|
let resizeFn = resize;
|
||||||
|
const cacheOptions = ref({});
|
||||||
|
let removeResizeFn = () => { };
|
||||||
|
resizeFn = useDebounceFn(resize, 200);
|
||||||
|
const getOptions = computed(() => {
|
||||||
|
if (getDarkMode.value !== 'dark') {
|
||||||
|
return cacheOptions.value;
|
||||||
|
}
|
||||||
|
return Object.assign({ backgroundColor: 'transparent' }, cacheOptions.value);
|
||||||
|
});
|
||||||
|
function initCharts(t = theme) {
|
||||||
|
const el = unref(elRef);
|
||||||
|
if (!el || !unref(el)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
chartInstance = echarts.init(el, t);
|
||||||
|
const { removeEvent } = useEventListener({
|
||||||
|
el: window,
|
||||||
|
name: 'resize',
|
||||||
|
listener: resizeFn,
|
||||||
|
});
|
||||||
|
removeResizeFn = removeEvent;
|
||||||
|
// useTimeoutFn(() => {
|
||||||
|
// resizeFn();
|
||||||
|
// }, 30);
|
||||||
|
}
|
||||||
|
function setOptions(options, clear = true) {
|
||||||
|
var _a;
|
||||||
|
cacheOptions.value = options;
|
||||||
|
if (((_a = unref(elRef)) === null || _a === void 0 ? void 0 : _a.offsetHeight) === 0) {
|
||||||
|
useTimeoutFn(() => {
|
||||||
|
setOptions(unref(getOptions));
|
||||||
|
}, 30);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
useTimeoutFn(() => {
|
||||||
|
if (!chartInstance) {
|
||||||
|
initCharts(getDarkMode.value);
|
||||||
|
if (!chartInstance)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
clear && (chartInstance === null || chartInstance === void 0 ? void 0 : chartInstance.clear());
|
||||||
|
chartInstance === null || chartInstance === void 0 ? void 0 : chartInstance.setOption(unref(getOptions));
|
||||||
|
}, 30);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function resize() {
|
||||||
|
chartInstance === null || chartInstance === void 0 ? void 0 : chartInstance.resize({
|
||||||
|
animation: {
|
||||||
|
duration: 300,
|
||||||
|
easing: 'quadraticIn',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
watch(() => getDarkMode.value, (theme) => {
|
||||||
|
if (chartInstance) {
|
||||||
|
chartInstance.dispose();
|
||||||
|
initCharts(theme);
|
||||||
|
setOptions(cacheOptions.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
tryOnUnmounted(() => {
|
||||||
|
if (!chartInstance)
|
||||||
|
return;
|
||||||
|
removeResizeFn();
|
||||||
|
chartInstance.dispose();
|
||||||
|
chartInstance = null;
|
||||||
|
});
|
||||||
|
function getInstance() {
|
||||||
|
if (!chartInstance) {
|
||||||
|
initCharts(getDarkMode.value);
|
||||||
|
}
|
||||||
|
return chartInstance;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
setOptions,
|
||||||
|
resize,
|
||||||
|
echarts,
|
||||||
|
getInstance,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { ref, watch, unref } from 'vue';
|
||||||
|
import { useThrottleFn, useDebounceFn } from '@vueuse/core';
|
||||||
|
export function useEventListener({ el = window, name, listener, options, autoRemove = true, isDebounce = true, wait = 80, }) {
|
||||||
|
/* eslint-disable-next-line */
|
||||||
|
let remove = () => { };
|
||||||
|
const isAddRef = ref(false);
|
||||||
|
if (el) {
|
||||||
|
const element = ref(el);
|
||||||
|
const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
|
||||||
|
const realHandler = wait ? handler : listener;
|
||||||
|
const removeEventListener = (e) => {
|
||||||
|
isAddRef.value = true;
|
||||||
|
e.removeEventListener(name, realHandler, options);
|
||||||
|
};
|
||||||
|
const addEventListener = (e) => e.addEventListener(name, realHandler, options);
|
||||||
|
const removeWatch = watch(element, (v, _ov, cleanUp) => {
|
||||||
|
if (v) {
|
||||||
|
!unref(isAddRef) && addEventListener(v);
|
||||||
|
cleanUp(() => {
|
||||||
|
autoRemove && removeEventListener(v);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, { immediate: true });
|
||||||
|
remove = () => {
|
||||||
|
removeEventListener(element.value);
|
||||||
|
removeWatch();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return { removeEvent: remove };
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import { tryOnUnmounted } from '@vueuse/core'
|
||||||
|
import { isFunction } from './is.js'
|
||||||
|
|
||||||
|
export function useTimeoutFn(handle, wait, native = false) {
|
||||||
|
if (!isFunction(handle)) {
|
||||||
|
throw new Error('handle is not Function!')
|
||||||
|
}
|
||||||
|
|
||||||
|
const { readyRef, stop, start } = useTimeoutRef(wait)
|
||||||
|
if (native) {
|
||||||
|
handle()
|
||||||
|
} else {
|
||||||
|
watch(
|
||||||
|
readyRef,
|
||||||
|
(maturity) => {
|
||||||
|
maturity && handle()
|
||||||
|
},
|
||||||
|
{ immediate: false },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return { readyRef, stop, start }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTimeoutRef(wait) {
|
||||||
|
const readyRef = ref(false)
|
||||||
|
|
||||||
|
let timer
|
||||||
|
function stop() {
|
||||||
|
readyRef.value = false
|
||||||
|
timer && window.clearTimeout(timer)
|
||||||
|
}
|
||||||
|
function start() {
|
||||||
|
stop()
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
readyRef.value = true
|
||||||
|
}, wait)
|
||||||
|
}
|
||||||
|
|
||||||
|
start()
|
||||||
|
|
||||||
|
tryOnUnmounted(stop)
|
||||||
|
|
||||||
|
return { readyRef, stop, start }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import Antd from 'ant-design-vue';
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import 'virtual:uno.css'
|
||||||
|
import 'ant-design-vue/dist/reset.css';
|
||||||
|
|
||||||
|
|
||||||
|
async function bootstrap() {
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(router)
|
||||||
|
app.use(Antd)
|
||||||
|
app.mount('#app')
|
||||||
|
}
|
||||||
|
bootstrap()
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
//路由初始指向
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: () => import('../views/home/index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-shadow {
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_API_BASE_URL,
|
||||||
|
timeout: 200000,
|
||||||
|
withCredentials: false
|
||||||
|
})
|
||||||
|
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
|
||||||
|
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
service.interceptors.response.use(
|
||||||
|
|
||||||
|
response => {
|
||||||
|
|
||||||
|
const res = response
|
||||||
|
const config = response.config
|
||||||
|
if (res.status >=400) {
|
||||||
|
|
||||||
|
return Promise.reject(res.msg || 'Error')
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const { isTransformResponse } = config
|
||||||
|
if (isTransformResponse) {
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
return res.data
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default service
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="flex justify-between h-10 items-center px-4">
|
||||||
|
<div class="text-[#999] text-sm">年度目标</div>
|
||||||
|
<div class="w-30">
|
||||||
|
<a-select
|
||||||
|
ref="select"
|
||||||
|
v-model:value="day"
|
||||||
|
class="w-full"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
<a-select-option :value="item" v-for="item in years" :key="item">{{
|
||||||
|
item
|
||||||
|
}}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1" ref="yRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
||||||
|
import echarts from '@/components/echarts/echarts.js'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
const day = ref(null)
|
||||||
|
const yRef = ref(null)
|
||||||
|
const { setOptions } = useECharts(yRef)
|
||||||
|
const years = ref([])
|
||||||
|
const datas = ref({})
|
||||||
|
|
||||||
|
const createFiveYears = () => {
|
||||||
|
const now = new Date()
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
years.value.push(now.getFullYear() - i)
|
||||||
|
}
|
||||||
|
day.value = years.value[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
createFiveYears()
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const onChange = () => {
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get('/admin-api/api/cockpit/yearly-goals', {
|
||||||
|
params: {
|
||||||
|
year: day.value,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
datas.value = resData
|
||||||
|
chatInit()
|
||||||
|
}
|
||||||
|
|
||||||
|
const chatInit = () => {
|
||||||
|
const { expected_performance, actual_performance } = datas.value
|
||||||
|
let rate = (actual_performance / expected_performance).toFixed(2)
|
||||||
|
console.log(rate);
|
||||||
|
if (rate == 'NaN') {
|
||||||
|
rate = 0
|
||||||
|
}
|
||||||
|
const rateValue = (rate * 100).toFixed(0)
|
||||||
|
setOptions({
|
||||||
|
title: {
|
||||||
|
text: `${rateValue}%`,
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#AAAFC8'],
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Line1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['80%', '70%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: rateValue,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#0E7CE2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02',
|
||||||
|
value: 100 - rateValue,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#AAAFC8',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="flex justify-between p-4">
|
||||||
|
<div class="text-[#999] text-sm">数据概览</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 grid grid-cols-2 py-5">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-medium">门店总数</div>
|
||||||
|
<div class="my-5">
|
||||||
|
<CountTo class="text-2xl" :endVal="deta?.stores_count || 0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-medium">员工总数</div>
|
||||||
|
<div class="my-5">
|
||||||
|
<CountTo class="text-2xl" :endVal="deta?.employees_count || 0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import CountTo from '@/components/CountTo/index.vue'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
const deta = ref({})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get('/admin-api/api/cockpit/basic')
|
||||||
|
deta.value = resData
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="flex justify-between p-4">
|
||||||
|
<div class="text-[#999] text-sm">彩种销售走势</div>
|
||||||
|
<div class="w-50">
|
||||||
|
<a-select ref="select" v-model:value="day" class="w-full" @change="onChange">
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in dayList"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
>{{ item.label }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1" ref="trendRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
||||||
|
import echarts from '@/components/echarts/echarts.js'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
|
||||||
|
const datas = ref([])
|
||||||
|
const day = ref('7days')
|
||||||
|
const dayList = [
|
||||||
|
{
|
||||||
|
value: '7days',
|
||||||
|
label: '近7天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '30days',
|
||||||
|
label: '近30天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '180days',
|
||||||
|
label: '进半年',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '365days',
|
||||||
|
label: '近一年',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const trendRef = ref(null)
|
||||||
|
const { setOptions } = useECharts(trendRef)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get('/admin-api/api/cockpit/lottery-sales-trend', {
|
||||||
|
params: {
|
||||||
|
last: day.value,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
datas.value = resData.data
|
||||||
|
chatInit()
|
||||||
|
}
|
||||||
|
const chatInit = () => {
|
||||||
|
const groupedData = {}
|
||||||
|
|
||||||
|
datas.value.forEach((item) => {
|
||||||
|
item.data.forEach((entry) => {
|
||||||
|
const { name, sales } = entry
|
||||||
|
if (!groupedData[name]) {
|
||||||
|
groupedData[name] = []
|
||||||
|
}
|
||||||
|
groupedData[name].push({ date: item.date, sales })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const xAxisData = []
|
||||||
|
const seriesData = []
|
||||||
|
Object.keys(groupedData).forEach((name) => {
|
||||||
|
xAxisData.push(name)
|
||||||
|
seriesData.push({
|
||||||
|
name: name,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.1,
|
||||||
|
// normal: {
|
||||||
|
// // color: new echarts.graphic.LinearGradient(
|
||||||
|
// // 0,
|
||||||
|
// // 0,
|
||||||
|
// // 0,
|
||||||
|
// // 1,
|
||||||
|
// // [
|
||||||
|
// // {
|
||||||
|
// // offset: 0,
|
||||||
|
// // color: 'rgba(25,163,223,.3)',
|
||||||
|
// // },
|
||||||
|
// // {
|
||||||
|
// // offset: 1,
|
||||||
|
// // color: 'rgba(25,163,223, 0)',
|
||||||
|
// // },
|
||||||
|
// // ],
|
||||||
|
// // false
|
||||||
|
// // ),
|
||||||
|
// opacity: 0.1,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
data: groupedData[name].map((item) => item.sales),
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
setOptions({
|
||||||
|
title: {
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#F1F1F3',
|
||||||
|
},
|
||||||
|
left: '6%',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#57617B',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
itemWidth: 14,
|
||||||
|
itemHeight: 5,
|
||||||
|
itemGap: 13,
|
||||||
|
data: xAxisData,
|
||||||
|
right: '4%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#292f39',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: datas.value.map((e) => e.date ?? e.month),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#57617B',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eee',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: seriesData,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onChange = (e) => {
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full" ref="mapRef">12</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
||||||
|
import chinaMap from './china.json'
|
||||||
|
import { registerMap } from 'echarts'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
|
||||||
|
const mapRef = ref(null)
|
||||||
|
const { setOptions } = useECharts(mapRef)
|
||||||
|
const data = ref([])
|
||||||
|
|
||||||
|
registerMap('china', { geoJSON: chinaMap })
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get(
|
||||||
|
'/admin-api/api/cockpit/store-number-distribution'
|
||||||
|
)
|
||||||
|
data.value = resData
|
||||||
|
chatInit()
|
||||||
|
}
|
||||||
|
|
||||||
|
const convertData = (data) => {
|
||||||
|
var geoCoordMap = []
|
||||||
|
chinaMap.features.forEach((item) => {
|
||||||
|
geoCoordMap[item.properties.name] = item.properties.center
|
||||||
|
})
|
||||||
|
var res = []
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
var geoCoord = geoCoordMap[data[i].name]
|
||||||
|
if (geoCoord && data[i].stores_count > 0) {
|
||||||
|
res.push({
|
||||||
|
name: data[i].name,
|
||||||
|
value: geoCoord.concat(data[i].stores_count),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
const chatInit = () => {
|
||||||
|
var max = 480,
|
||||||
|
min = 14 // todo
|
||||||
|
var maxSize4Pin = 100,
|
||||||
|
minSize4Pin = 30
|
||||||
|
|
||||||
|
setOptions({
|
||||||
|
baseOption: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: function (params) {
|
||||||
|
if (typeof params.value[2] == 'undefined') {
|
||||||
|
return params.name + ' : ' + params.value
|
||||||
|
} else {
|
||||||
|
return params.name + ' : ' + params.value[2]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
map: 'china',
|
||||||
|
zoom: 1.5,
|
||||||
|
roam: false,
|
||||||
|
left: '20%',
|
||||||
|
top: '23%',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: 'rgb(249, 249, 249)', //省份标签字体颜色
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#24CFF4',
|
||||||
|
borderColor: '#53D9FF',
|
||||||
|
borderWidth: 1.3,
|
||||||
|
shadowBlur: 15,
|
||||||
|
shadowColor: 'rgb(58,115,192)',
|
||||||
|
shadowOffsetX: 7,
|
||||||
|
shadowOffsetY: 6,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#8dd7fc',
|
||||||
|
borderWidth: 1.6,
|
||||||
|
shadowBlur: 25,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: '#f75a00',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
geoIndex: 0,
|
||||||
|
aspectScale: 0.75, //长宽比
|
||||||
|
showLegendSymbol: false, // 存在legend时显示
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
roam: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: '#031525',
|
||||||
|
borderColor: '#FFFFFF',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#2B91B7',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
data: data.value.map((e) => {
|
||||||
|
return {
|
||||||
|
name: e.name,
|
||||||
|
value: e.stores_count,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '点',
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
symbol: 'pin',
|
||||||
|
symbolSize: function (val) {
|
||||||
|
var a = (maxSize4Pin - minSize4Pin) / (max - min)
|
||||||
|
var b = minSize4Pin - a * min
|
||||||
|
b = maxSize4Pin - a * max
|
||||||
|
return a * val[2] + b
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
formatter(value) {
|
||||||
|
return value.data.value[2]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F62157',
|
||||||
|
},
|
||||||
|
zlevel: 6,
|
||||||
|
data: convertData(data.value),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="flex justify-between items-center p-4">
|
||||||
|
<div class="text-[#999] text-sm">数据排行</div>
|
||||||
|
<div class="w-30">
|
||||||
|
<a-select
|
||||||
|
ref="select"
|
||||||
|
v-model:value="day"
|
||||||
|
class="w-full"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in dayList"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
>{{ item.label }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1" ref="rankRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
||||||
|
import echarts from '@/components/echarts/echarts.js'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
|
||||||
|
const day = ref('365days')
|
||||||
|
const dayList = [
|
||||||
|
{
|
||||||
|
value: '7days',
|
||||||
|
label: '近7天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '30days',
|
||||||
|
label: '近30天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '180days',
|
||||||
|
label: '进半年',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '365days',
|
||||||
|
label: '近一年',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const rankRef = ref(null)
|
||||||
|
const { setOptions } = useECharts(rankRef)
|
||||||
|
|
||||||
|
let dataList = ref([])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const onChange = () => {
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get('/admin-api/api/cockpit/store-sales-ranking', {
|
||||||
|
params: {
|
||||||
|
last: day.value,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const arr = resData.map((e, i) => {
|
||||||
|
return [i + 1, e.store.title, e.sales]
|
||||||
|
})
|
||||||
|
dataList.value = arr.filter((e) => e[2] > 0)
|
||||||
|
chatInit()
|
||||||
|
}
|
||||||
|
|
||||||
|
const chatInit = () => {
|
||||||
|
__SetOption(dataList.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
let barWidth = 15
|
||||||
|
let nameFontColor = '#000'
|
||||||
|
let nameFontSize = 12
|
||||||
|
let namePosition = [0, -15]
|
||||||
|
let valueFontColor = '#FFFFFF'
|
||||||
|
let valueFontSize = 12
|
||||||
|
let indexNum = 0
|
||||||
|
|
||||||
|
function __getColorValue(name, val, index) {
|
||||||
|
return {
|
||||||
|
name: name,
|
||||||
|
color: '#000',
|
||||||
|
value: val,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
color: '#0E7CE2',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function __SetOption(data) {
|
||||||
|
let lists = []
|
||||||
|
let values = []
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
lists.push(item[1])
|
||||||
|
values.push(__getColorValue(item[1], item[2], index))
|
||||||
|
})
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
left: '20px',
|
||||||
|
right: '3%',
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisLabel: { show: false, inside: false },
|
||||||
|
data: lists,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// show: true,
|
||||||
|
// type: 'bar',
|
||||||
|
// barGap: '-100%',
|
||||||
|
// barWidth: barWidth,
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: 'rgba(102, 102, 102,0.5)',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// z: 1,
|
||||||
|
// data: values.map(()=>1),
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: '排行',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: barWidth,
|
||||||
|
data: values,
|
||||||
|
animationDuration: 1500,
|
||||||
|
zlevel: 2,
|
||||||
|
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
color: nameFontColor,
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
position: namePosition,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: nameFontSize,
|
||||||
|
},
|
||||||
|
formatter: function (data) {
|
||||||
|
return `${data.data.name}`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(option)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="flex justify-between items-center p-4">
|
||||||
|
<div class="text-[#999] text-sm">销售走势</div>
|
||||||
|
<div class="w-30">
|
||||||
|
<a-select
|
||||||
|
ref="select"
|
||||||
|
v-model:value="day"
|
||||||
|
class="w-full"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in dayList"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
>{{ item.label }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1" ref="trendRef1"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
||||||
|
import echarts from '@/components/echarts/echarts.js'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
|
||||||
|
const datas = ref([])
|
||||||
|
const day = ref('7days')
|
||||||
|
const dayList = [
|
||||||
|
{
|
||||||
|
value: '7days',
|
||||||
|
label: '近7天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '30days',
|
||||||
|
label: '近30天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '180days',
|
||||||
|
label: '进半年',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '365days',
|
||||||
|
label: '近一年',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const trendRef1 = ref(null)
|
||||||
|
const { setOptions } = useECharts(trendRef1)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get('/admin-api/api/cockpit/sales-trend', {
|
||||||
|
params: {
|
||||||
|
last: day.value,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
datas.value = resData
|
||||||
|
|
||||||
|
chatInit()
|
||||||
|
}
|
||||||
|
const chatInit = () => {
|
||||||
|
const xAxisData = []
|
||||||
|
const sales = []
|
||||||
|
datas.value.forEach((item) => {
|
||||||
|
xAxisData.push(item.date ?? item.month)
|
||||||
|
sales.push(item.sales)
|
||||||
|
})
|
||||||
|
|
||||||
|
const seriesData = []
|
||||||
|
seriesData.push({
|
||||||
|
name: '销售',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 5,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.1,
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
data: sales,
|
||||||
|
})
|
||||||
|
|
||||||
|
setOptions({
|
||||||
|
title: {
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#F1F1F3',
|
||||||
|
},
|
||||||
|
left: '6%',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#57617B',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
itemWidth: 14,
|
||||||
|
itemHeight: 5,
|
||||||
|
itemGap: 13,
|
||||||
|
// data: xAxisData,
|
||||||
|
right: '4%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#292f39',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: xAxisData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#57617B',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eee',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: seriesData,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onChange = (e) => {
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="flex justify-between p-4">
|
||||||
|
<div class="text-[#999] text-sm">门店分类</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1" ref="sortRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
||||||
|
import echarts from '@/components/echarts/echarts.js'
|
||||||
|
import http from '@/utils/request'
|
||||||
|
|
||||||
|
const sortRef = ref(null)
|
||||||
|
const datas = ref([])
|
||||||
|
const { setOptions } = useECharts(sortRef)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const resData = await http.get('/admin-api/api/cockpit/store-category')
|
||||||
|
datas.value = resData
|
||||||
|
chatInit()
|
||||||
|
}
|
||||||
|
|
||||||
|
const chatInit = () => {
|
||||||
|
setOptions({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '门店',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '90%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
clockwise: false,
|
||||||
|
data: datas.value.map(e=>{
|
||||||
|
return {
|
||||||
|
name: e.name,
|
||||||
|
value: e.stores_count
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
borderWidth: 0,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-5 flex flex-col">
|
||||||
|
<div class="">驾驶舱</div>
|
||||||
|
<div class="flex flex-1 space-x-4">
|
||||||
|
<div class="w-6/10 space-y-4" v-if="true">
|
||||||
|
<div class="h-150 box-shadow">
|
||||||
|
<Map />
|
||||||
|
</div>
|
||||||
|
<div class="h-75 box-shadow">
|
||||||
|
<LotteryTrends />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 space-y-4">
|
||||||
|
<div class="box-shadow">
|
||||||
|
<Count />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-x-4">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="box-shadow h-56">
|
||||||
|
<Sort />
|
||||||
|
</div>
|
||||||
|
<div class="box-shadow h-56">
|
||||||
|
<SalesTrend />
|
||||||
|
</div>
|
||||||
|
<div class="box-shadow h-56">
|
||||||
|
<AnnualTarget />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box-shadow">
|
||||||
|
<Rank />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Map from './components/map.vue'
|
||||||
|
import LotteryTrends from './components/lottery-trends.vue'
|
||||||
|
import Count from './components/count.vue'
|
||||||
|
import Sort from "./components/sort.vue"
|
||||||
|
import AnnualTarget from './components/annual-target.vue'
|
||||||
|
import Rank from './components/rank.vue'
|
||||||
|
import SalesTrend from './components/sales-trend.vue'
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
// uno.config.ts
|
||||||
|
import {
|
||||||
|
defineConfig,
|
||||||
|
presetAttributify,
|
||||||
|
presetIcons,
|
||||||
|
presetTypography,
|
||||||
|
presetUno,
|
||||||
|
presetWebFonts,
|
||||||
|
transformerDirectives,
|
||||||
|
transformerVariantGroup
|
||||||
|
} from 'unocss'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
shortcuts: [
|
||||||
|
// ...
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
colors: {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
},
|
||||||
|
presets: [
|
||||||
|
presetUno(),
|
||||||
|
presetAttributify(),
|
||||||
|
presetIcons(),
|
||||||
|
presetTypography(),
|
||||||
|
presetWebFonts({
|
||||||
|
fonts: {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
transformers: [transformerDirectives(), transformerVariantGroup()]
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import UnoCSS from 'unocss/vite'
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue(), UnoCSS()],
|
||||||
|
server:{
|
||||||
|
host: '0.0.0.0',
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://store-manage.hmily.club',
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue