lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:增加eslint+prettier 代码校验格式化

This commit is contained in:
zouzhibing 2022-08-05 16:04:07 +08:00
parent 759763c875
commit efa0fcab52
160 changed files with 16291 additions and 12362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.eslintignore Normal file
View File

@ -0,0 +1,15 @@
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

25
.eslintrc.cjs Normal file
View File

@ -0,0 +1,25 @@
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node":true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
'plugin:prettier/recommended'
],
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}

9
.prettierignore Normal file
View File

@ -0,0 +1,9 @@
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

8
package.json
View File

@ -7,7 +7,8 @@
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix" "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
}, },
"dependencies": { "dependencies": {
"@better-scroll/core": "^2.4.2", "@better-scroll/core": "^2.4.2",
@ -47,14 +48,19 @@
"@vitejs/plugin-vue": "^3.0.0", "@vitejs/plugin-vue": "^3.0.0",
"dart-sass": "^1.25.0", "dart-sass": "^1.25.0",
"eslint": "^8.21.0", "eslint": "^8.21.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.3.0", "eslint-plugin-vue": "^9.3.0",
"fast-glob": "^3.2.11", "fast-glob": "^3.2.11",
"prettier": "^2.7.1",
"typescript": "^4.6.4", "typescript": "^4.6.4",
"unplugin-auto-import": "^0.10.3", "unplugin-auto-import": "^0.10.3",
"unplugin-vue-components": "^0.21.2", "unplugin-vue-components": "^0.21.2",
"unplugin-vue-define-options": "^0.7.3",
"vite": "^3.0.0", "vite": "^3.0.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^0.38.4" "vue-tsc": "^0.38.4"
} }
} }

14
prettier.config.cjs Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
// 一行的字符数，如果超过会进行换行，默认为80
printWidth: 100,
// 行位是否使用分号，默认为true
semi: false,
vueIndentScriptAndStyle: true,
// 字符串是否使用单引号，默认为false，使用双引号
singleQuote: true,
// 是否使用尾逗号，有三个可选值"<none|es5|all>"
trailingComma: 'all',
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'auto',
};

18
src/App.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
#app { #app {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -13,17 +13,17 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: #2c3e50; color: #2c3e50;
} }
html,body{ html,
body {
height: 100%; height: 100%;
background: #f6f8f9; background: #f6f8f9;
}
} .el-pager li:focus {
.el-pager li:focus{
border: none; border: none;
} }
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
</style> </style>

93
src/components/Charts/Keyboard.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts"> <script lang="ts">
import echarts from 'echarts' import echarts from 'echarts'
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}, },
data() { data() {
return { return {
chart: null chart: null,
} }
}, },
mounted() { mounted() {
@ -57,44 +57,48 @@ export default {
backgroundColor: '#08263a', backgroundColor: '#08263a',
grid: { grid: {
left: '5%', left: '5%',
right: '5%' right: '5%',
}, },
xAxis: [{ xAxis: [
{
show: false, show: false,
data: xAxisData data: xAxisData,
}, { },
{
show: false, show: false,
data: xAxisData data: xAxisData,
}], },
],
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
max: 50, max: 50,
dimension: 0, dimension: 0,
inRange: { inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'],
} },
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#4a657a' color: '#4a657a',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#08263f' color: '#08263f',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}
}, },
series: [{ },
series: [
{
name: 'back', name: 'back',
type: 'bar', type: 'bar',
data: data2, data: data2,
@ -104,10 +108,11 @@ export default {
opacity: 0.4, opacity: 0.4,
barBorderRadius: 5, barBorderRadius: 5,
shadowBlur: 3, shadowBlur: 3,
shadowColor: '#111' shadowColor: '#111',
} },
} },
}, { },
{
name: 'Simulate Shadow', name: 'Simulate Shadow',
type: 'line', type: 'line',
data, data,
@ -118,17 +123,18 @@ export default {
animationDuration: 1200, animationDuration: 1200,
lineStyle: { lineStyle: {
normal: { normal: {
color: 'transparent' color: 'transparent',
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: '#08263a', color: '#08263a',
shadowBlur: 50, shadowBlur: 50,
shadowColor: '#000' shadowColor: '#000',
} },
} },
}, { },
{
name: 'front', name: 'front',
type: 'bar', type: 'bar',
data, data,
@ -136,10 +142,11 @@ export default {
z: 3, z: 3,
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 5 barBorderRadius: 5,
} },
} },
}], },
],
animationEasing: 'elasticOut', animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut', animationEasingUpdate: 'elasticOut',
animationDelay(idx) { animationDelay(idx) {
@ -147,9 +154,9 @@ export default {
}, },
animationDelayUpdate(idx) { animationDelayUpdate(idx) {
return idx * 20 return idx * 20
} },
}) })
},
},
} }
}
}
</script> </script>

239
src/components/Charts/LineMarker.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {computed, nextTick, onMounted, ref, watch} from "vue"; import { computed, nextTick, onMounted, ref, watch } from 'vue'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {useStore} from "vuex"; import { useStore } from 'vuex'
// 在setup中获取store // 在setup中获取store
const store = useStore() const store = useStore()
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const isCollapse = computed(()=>{ const isCollapse = computed(() => {
return store.state.app.isCollapse return store.state.app.isCollapse
}) })
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption({ chart.setOption({
backgroundColor: '#394056', backgroundColor: '#394056',
@ -42,17 +42,17 @@ const initChart =()=> {
textStyle: { textStyle: {
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 16, fontSize: 16,
color: '#F1F1F3' color: '#F1F1F3',
}, },
left: '1%' left: '1%',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B',
} },
} },
}, },
legend: { legend: {
top: 20, top: 20,
@ -64,50 +64,68 @@ const initChart =()=> {
right: '4%', right: '4%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#F1F1F3' color: '#F1F1F3',
} },
}, },
grid: { grid: {
top: 100, top: 100,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
xAxis: [{ xAxis: [
{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B',
}
}, },
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'] },
}], data: [
yAxis: [{ '13:00',
'13:05',
'13:10',
'13:15',
'13:20',
'13:25',
'13:30',
'13:35',
'13:40',
'13:45',
'13:50',
'13:55',
],
},
],
yAxis: [
{
type: 'value', type: 'value',
name: '(%)', name: '(%)',
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B',
} },
}, },
axisLabel: { axisLabel: {
margin: 10, margin: 10,
textStyle: { textStyle: {
fontSize: 14 fontSize: 14,
} },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B',
} },
} },
}], },
series: [{ ],
series: [
{
name: 'CMCC', name: 'CMCC',
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -116,32 +134,42 @@ const initChart =()=> {
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1,
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: 'rgba(137, 189, 27, 0.3)' color: 'rgba(137, 189, 27, 0.3)',
}, { },
{
offset: 0.8, offset: 0.8,
color: 'rgba(137, 189, 27, 0)' color: 'rgba(137, 189, 27, 0)',
}], false), },
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)', shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10 shadowBlur: 10,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(137,189,27)', color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)', borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12 borderWidth: 12,
}
}, },
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122] },
}, { data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
},
{
name: 'CTCC', name: 'CTCC',
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -150,32 +178,42 @@ const initChart =()=> {
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1,
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: 'rgba(0, 136, 212, 0.3)' color: 'rgba(0, 136, 212, 0.3)',
}, { },
{
offset: 0.8, offset: 0.8,
color: 'rgba(0, 136, 212, 0)' color: 'rgba(0, 136, 212, 0)',
}], false), },
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)', shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10 shadowBlur: 10,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(0,136,212)', color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)', borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12 borderWidth: 12,
}
}, },
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150] },
}, { data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
},
{
name: 'CUCC', name: 'CUCC',
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -184,47 +222,56 @@ const initChart =()=> {
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1,
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: 'rgba(219, 50, 51, 0.3)' color: 'rgba(219, 50, 51, 0.3)',
}, { },
{
offset: 0.8, offset: 0.8,
color: 'rgba(219, 50, 51, 0)' color: 'rgba(219, 50, 51, 0)',
}], false), },
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)', shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10 shadowBlur: 10,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(219,50,51)', color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)', borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12 borderWidth: 12,
}
}, },
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122] },
}] data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
},
],
}) })
return chart return chart
} }
watch(isCollapse,()=>{ watch(isCollapse, () => {
setTimeout(()=>{ setTimeout(() => {
chart&&chart.resize() chart && chart.resize()
},300) }, 300)
})
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
}) onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

191
src/components/Charts/MixChart.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts"> <script lang="ts">
import echarts from 'echarts' import echarts from 'echarts'
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}, },
data() { data() {
return { return {
chart: null chart: null,
} }
}, },
mounted() { mounted() {
@ -44,13 +44,13 @@ export default {
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
const xData = (function() { const xData = (function () {
const data = [] const data = []
for (let i = 1; i < 13; i++) { for (let i = 1; i < 13; i++) {
data.push(i + 'month') data.push(i + 'month')
} }
return data return data
}()) })()
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#344b58', backgroundColor: '#344b58',
title: { title: {
@ -59,20 +59,20 @@ export default {
top: '20', top: '20',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: '22' fontSize: '22',
}, },
subtextStyle: { subtextStyle: {
color: '#90979c', color: '#90979c',
fontSize: '16' fontSize: '16',
} },
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
textStyle: { textStyle: {
color: '#fff' color: '#fff',
} },
} },
}, },
grid: { grid: {
left: '5%', left: '5%',
@ -81,87 +81,92 @@ export default {
top: 150, top: 150,
bottom: 95, bottom: 95,
textStyle: { textStyle: {
color: '#fff' color: '#fff',
} },
}, },
legend: { legend: {
x: '5%', x: '5%',
top: '10%', top: '10%',
textStyle: { textStyle: {
color: '#90979c' color: '#90979c',
}, },
data: ['female', 'male', 'average'] data: ['female', 'male', 'average'],
}, },
calculable: true, calculable: true,
xAxis: [{ xAxis: [
{
type: 'category', type: 'category',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#90979c' color: '#90979c',
} },
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitArea: { splitArea: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0 interval: 0,
}, },
data: xData data: xData,
}], },
yAxis: [{ ],
yAxis: [
{
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#90979c' color: '#90979c',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0 interval: 0,
}, },
splitArea: { splitArea: {
show: false show: false,
} },
}], },
dataZoom: [{ ],
dataZoom: [
{
show: true, show: true,
height: 30, height: 30,
xAxisIndex: [ xAxisIndex: [0],
0
],
bottom: 30, bottom: 30,
start: 10, start: 10,
end: 80, end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', handleIcon:
'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%', handleSize: '110%',
handleStyle: { handleStyle: {
color: '#d3dee5' color: '#d3dee5',
}, },
textStyle: { textStyle: {
color: '#fff' }, color: '#fff',
borderColor: '#90979c' },
borderColor: '#90979c',
}, { },
{
type: 'inside', type: 'inside',
show: true, show: true,
height: 15, height: 15,
start: 1, start: 1,
end: 35 end: 35,
}], },
series: [{ ],
series: [
{
name: 'female', name: 'female',
type: 'bar', type: 'bar',
stack: 'total', stack: 'total',
@ -173,29 +178,16 @@ export default {
label: { label: {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff' color: '#fff',
}, },
position: 'insideTop', position: 'insideTop',
formatter(p) { formatter(p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
}
}
}
}, },
data: [ },
709, },
1917, },
2455, data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
}, },
{ {
@ -211,25 +203,13 @@ export default {
position: 'top', position: 'top',
formatter(p) { formatter(p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
}
}
}
}, },
data: [ },
327, },
1776, },
507, data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
1200, },
800, {
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: 'average', name: 'average',
type: 'line', type: 'line',
stack: 'total', stack: 'total',
@ -244,28 +224,15 @@ export default {
position: 'top', position: 'top',
formatter(p) { formatter(p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
}
}
}
}, },
data: [ },
1036, },
3693, },
2962, data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298],
3810, },
2519, ],
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
}
]
}) })
},
},
} }
}
}
</script> </script>

12
src/components/Charts/mixins/resize.js
View File

@ -4,7 +4,7 @@ export default {
data() { data() {
return { return {
$_sidebarElm: null, $_sidebarElm: null,
$_resizeHandler: null $_resizeHandler: null,
} }
}, },
mounted() { mounted() {
@ -40,17 +40,19 @@ export default {
window.addEventListener('resize', this.$_resizeHandler) window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) this.$_sidebarElm &&
this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
}, },
destroyListener() { destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler) window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) this.$_sidebarElm &&
this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}, },
resize() { resize() {
const { chart } = this const { chart } = this
chart && chart.resize() chart && chart.resize()
} },
} },
} }

15
src/components/HelloWorld.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
defineProps<{ msg: string }>() defineProps<{ msg: string }>()
const count = ref(0) const count = ref(0)
</script> </script>
<template> <template>
@ -19,9 +19,8 @@ const count = ref(0)
<p> <p>
Check out Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
>create-vue</a official Vue + Vite starter
>, the official Vue + Vite starter
</p> </p>
<p> <p>
Install Install
@ -32,7 +31,7 @@ const count = ref(0)
</template> </template>
<style scoped> <style scoped>
.read-the-docs { .read-the-docs {
color: #888; color: #888;
} }
</style> </style>

23
src/components/SvgIcon/index.vue
View File

@ -5,9 +5,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed } from "@vue/reactivity"; import { computed } from 'vue'
export default { export default {
name: "baseSvgIcon", name: 'baseSvgIcon',
props: { props: {
iconClass: { type: String }, iconClass: { type: String },
className: { type: String }, className: { type: String },
@ -15,23 +15,22 @@ export default {
setup(props) { setup(props) {
console.log(11111111) console.log(11111111)
const iconName = computed(() => { const iconName = computed(() => {
return props.iconClass ? `#icon-${props.iconClass}` : "#icon"; return props.iconClass ? `#icon-${props.iconClass}` : '#icon'
}); })
const svgClass = computed(() => { const svgClass = computed(() => {
return props.className ? "svg-icon " + props.className : "svg-icon"; return props.className ? 'svg-icon ' + props.className : 'svg-icon'
}); })
return { iconName, svgClass }; return { iconName, svgClass }
}, },
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.svg-icon { .svg-icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
vertical-align: -0.15em; vertical-align: -0.15em;
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
</style> </style>

4
src/components/pipeline/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="zb-pipeline"> <div class="zb-pipeline">
<zb-pipeline-start/> <zb-pipeline-start />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ZbPipelineStart from './zb-pipeline-start' import ZbPipelineStart from './zb-pipeline-start'
</script> </script>

167
src/components/pipeline/zb-pipeline-start.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<div class="zb-pipeline-start-wrapper"> <div class="zb-pipeline-start-wrapper">
<div class="zb-pipeline-start" v-bind:class="control === value ? 'active' : ''" v-on:click="handleClick"> <div
class="zb-pipeline-start"
v-bind:class="control === value ? 'active' : ''"
v-on:click="handleClick"
>
<div class="zb-pipeline-start-header"> <div class="zb-pipeline-start-header">
<zb-icon type="play-filled" /> <zb-icon type="play-filled" />
</div> </div>
@ -8,14 +12,14 @@
<div class="zb-pipeline-start-title">开始</div> <div class="zb-pipeline-start-title">开始</div>
<div class="zb-pipeline-start-tooltip"> <div class="zb-pipeline-start-tooltip">
<el-tooltip placement="top-start" content="点击进行构建基础设置"> <el-tooltip placement="top-start" content="点击进行构建基础设置">
<el-icon > <el-icon>
<Help /> <Help />
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<!-- <zb-tooltip placement="right">--> <!-- <zb-tooltip placement="right">-->
<!-- <zb-icon type="help" />--> <!-- <zb-icon type="help" />-->
<!-- <div slot="content">点击进行构建基础设置</div>--> <!-- <div slot="content">点击进行构建基础设置</div>-->
<!-- </zb-tooltip>--> <!-- </zb-tooltip>-->
</div> </div>
</div> </div>
</div> </div>
@ -23,41 +27,128 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import { Help } from '@element-plus/icons-vue'
Help
} from '@element-plus/icons-vue'
</script> </script>
<style> <style>
/* zb-pipeline-start-wrapper */ /* zb-pipeline-start-wrapper */
.zb-pipeline-start-wrapper { position:relative; padding:0 40px; } .zb-pipeline-start-wrapper {
position: relative;
padding: 0 40px;
}
/* zb-pipeline-start */ /* zb-pipeline-start */
.zb-pipeline-start { cursor:pointer; user-select:none; position:relative; display:flex; justify-content:flex-start; align-items:stretch; width:200px; height:40px; border-radius:2px; background-color:#fff; } .zb-pipeline-start {
.zb-pipeline-start:after { content:""; position:absolute; top:20px; right:-40px; display:block; width:40px; height:1px; background-color:#2d8cf0; } cursor: pointer;
.zb-pipeline-start .zb-pipeline-start-header { display:flex; justify-content:center; align-items:center; width:40px; border-width:1px 0 1px 1px; border-style:solid; border-color:#2d8cf0; border-radius:2px 0 0 2px; background-color:#2d8cf0; color:#fff; font-size:14px; font-weight:600; transition:all 0.2s cubic-bezier(0.23,1,0.32,1); } user-select: none;
.zb-pipeline-start .zb-pipeline-start-body { flex:1; display:flex; border-width:1px 1px 1px 0; border-style:solid; border-color:#e3e8f0; border-radius:0 2px 2px 0; padding:0 8px; overflow:hidden; transition:all 0.2s cubic-bezier(0.23,1,0.32,1); } position: relative;
.zb-pipeline-start .zb-pipeline-start-title { flex:1; display:block; overflow:hidden; color:#262626; font-size:14px; font-weight:600; line-height:38px; white-space:nowrap; text-overflow:ellipsis; } display: flex;
.zb-pipeline-start .zb-pipeline-start-tooltip { cursor:pointer; display:flex; justify-content:center; align-items:center; margin-left:8px; } justify-content: flex-start;
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-tooltip { display:block; } align-items: stretch;
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-icon { display:block; color:#595959; font-size:14px; } width: 200px;
height: 40px;
border-radius: 2px;
background-color: #fff;
}
.zb-pipeline-start:after {
content: '';
position: absolute;
top: 20px;
right: -40px;
display: block;
width: 40px;
height: 1px;
background-color: #2d8cf0;
}
.zb-pipeline-start .zb-pipeline-start-header {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #2d8cf0;
border-radius: 2px 0 0 2px;
background-color: #2d8cf0;
color: #fff;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.zb-pipeline-start .zb-pipeline-start-body {
flex: 1;
display: flex;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #e3e8f0;
border-radius: 0 2px 2px 0;
padding: 0 8px;
overflow: hidden;
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.zb-pipeline-start .zb-pipeline-start-title {
flex: 1;
display: block;
overflow: hidden;
color: #262626;
font-size: 14px;
font-weight: 600;
line-height: 38px;
white-space: nowrap;
text-overflow: ellipsis;
}
.zb-pipeline-start .zb-pipeline-start-tooltip {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-left: 8px;
}
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-tooltip {
display: block;
}
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-icon {
display: block;
color: #595959;
font-size: 14px;
}
/* zb-pipeline-start hover */ /* zb-pipeline-start hover */
.zb-pipeline-start:hover { } .zb-pipeline-start:hover {
.zb-pipeline-start:hover:after { } }
.zb-pipeline-start:hover .zb-pipeline-start-header { border-color:#2d8cf0; } .zb-pipeline-start:hover:after {
.zb-pipeline-start:hover .zb-pipeline-start-body { border-color:#2d8cf0; } }
.zb-pipeline-start:hover .zb-pipeline-start-title { } .zb-pipeline-start:hover .zb-pipeline-start-header {
.zb-pipeline-start:hover .zb-pipeline-start-tooltip { } border-color: #2d8cf0;
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-tooltip { } }
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-icon { } .zb-pipeline-start:hover .zb-pipeline-start-body {
border-color: #2d8cf0;
}
.zb-pipeline-start:hover .zb-pipeline-start-title {
}
.zb-pipeline-start:hover .zb-pipeline-start-tooltip {
}
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-tooltip {
}
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-icon {
}
/* zb-pipeline-start active */ /* zb-pipeline-start active */
.zb-pipeline-start.active { } .zb-pipeline-start.active {
.zb-pipeline-start.active:after { } }
.zb-pipeline-start.active .zb-pipeline-start-header { border-color:#2d8cf0; } .zb-pipeline-start.active:after {
.zb-pipeline-start.active .zb-pipeline-start-body { border-color:#2d8cf0; } }
.zb-pipeline-start.active .zb-pipeline-start-title { } .zb-pipeline-start.active .zb-pipeline-start-header {
.zb-pipeline-start.active .zb-pipeline-start-tooltip { } border-color: #2d8cf0;
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-tooltip { } }
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-icon { } .zb-pipeline-start.active .zb-pipeline-start-body {
border-color: #2d8cf0;
}
.zb-pipeline-start.active .zb-pipeline-start-title {
}
.zb-pipeline-start.active .zb-pipeline-start-tooltip {
}
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-tooltip {
}
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-icon {
}
</style> </style>

30
src/components/u-Hamburger/index.vue
View File

@ -1,8 +1,12 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in obj.levelList" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in obj.levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==obj.levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> <span
v-if="item.redirect === 'noRedirect' || index == obj.levelList.length - 1"
class="no-redirect"
>{{ item.meta.title }}</span
>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
@ -11,21 +15,23 @@
<script lang="ts" setup> <script lang="ts" setup>
import pathToRegexp from 'path-to-regexp' import pathToRegexp from 'path-to-regexp'
import {onMounted, reactive, watch} from "vue"; import { onMounted, reactive, watch } from 'vue'
import {useRoute} from 'vue-router' import { useRoute } from 'vue-router'
const obj = reactive({levelList:{}}) const obj = reactive({ levelList: {} })
const route = useRoute() const route = useRoute()
// 获取面包屑 // 获取面包屑
const getBreadcrumb = ()=>{ const getBreadcrumb = () => {
let matched = route.matched.filter(item => item.meta && item.meta.title) let matched = route.matched.filter((item) => item.meta && item.meta.title)
const first = matched[0] const first = matched[0]
obj.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) obj.levelList = matched.filter(
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false,
)
} }
onMounted(()=>{ onMounted(() => {
getBreadcrumb() getBreadcrumb()
watch(route,()=>{ watch(route, () => {
if (route.path.startsWith('/redirect/')) { if (route.path.startsWith('/redirect/')) {
return return
} }
@ -35,7 +41,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb { .app-breadcrumb.el-breadcrumb {
margin-left: 10px; margin-left: 10px;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
@ -43,5 +49,5 @@
.no-redirect { .no-redirect {
cursor: text; cursor: text;
} }
} }
</style> </style>

8
src/components/u-container-layout/index.vue
View File

@ -6,18 +6,16 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup></script>
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.m-container-layout{ .m-container-layout {
//margin: 20px; //margin: 20px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
.m-container-layout-inner{ .m-container-layout-inner {
background: white; background: white;
padding: 20px; padding: 20px;
width: 100%; width: 100%;

6
src/components/u-count-to/index.js
View File

@ -1,5 +1,5 @@
import CountTo from './vue-countTo.vue'; import CountTo from './vue-countTo.vue'
export default CountTo; export default CountTo
if (typeof window !== 'undefined' && window.Vue) { if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('count-to', CountTo); window.Vue.component('count-to', CountTo)
} }

17
src/components/u-count-to/requestAnimationFrame.js
View File

@ -6,10 +6,10 @@ let cancelAnimationFrame
const isServer = typeof window === 'undefined' const isServer = typeof window === 'undefined'
if (isServer) { if (isServer) {
requestAnimationFrame = function() { requestAnimationFrame = function () {
return return
} }
cancelAnimationFrame = function() { cancelAnimationFrame = function () {
return return
} }
} else { } else {
@ -18,15 +18,20 @@ if (isServer) {
let prefix let prefix
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式 // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for (let i = 0; i < prefixes.length; i++) { for (let i = 0; i < prefixes.length; i++) {
if (requestAnimationFrame && cancelAnimationFrame) { break } if (requestAnimationFrame && cancelAnimationFrame) {
break
}
prefix = prefixes[i] prefix = prefixes[i]
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'] requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame'] cancelAnimationFrame =
cancelAnimationFrame ||
window[prefix + 'CancelAnimationFrame'] ||
window[prefix + 'CancelRequestAnimationFrame']
} }
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
if (!requestAnimationFrame || !cancelAnimationFrame) { if (!requestAnimationFrame || !cancelAnimationFrame) {
requestAnimationFrame = function(callback) { requestAnimationFrame = function (callback) {
const currTime = new Date().getTime() const currTime = new Date().getTime()
// 为了使setTimteout的尽可能的接近每秒60帧的效果 // 为了使setTimteout的尽可能的接近每秒60帧的效果
const timeToCall = Math.max(0, 16 - (currTime - lastTime)) const timeToCall = Math.max(0, 16 - (currTime - lastTime))
@ -37,7 +42,7 @@ if (isServer) {
return id return id
} }
cancelAnimationFrame = function(id) { cancelAnimationFrame = function (id) {
window.clearTimeout(id) window.clearTimeout(id)
} }
} }

135
src/components/u-count-to/vue-countTo.vue
View File

@ -1,31 +1,31 @@
<template> <template>
<span> <span>
{{displayValue}} {{ displayValue }}
</span> </span>
</template> </template>
<script lang="ts"> <script lang="ts">
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js' import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
export default { export default {
props: { props: {
startVal: { startVal: {
type: Number, type: Number,
required: false, required: false,
default: 0 default: 0,
}, },
endVal: { endVal: {
type: Number, type: Number,
required: false, required: false,
default: 2017 default: 2017,
}, },
duration: { duration: {
type: Number, type: Number,
required: false, required: false,
default: 3000 default: 3000,
}, },
autoplay: { autoplay: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true default: true,
}, },
decimals: { decimals: {
type: Number, type: Number,
@ -33,39 +33,39 @@ export default {
default: 0, default: 0,
validator(value) { validator(value) {
return value >= 0 return value >= 0
} },
}, },
decimal: { decimal: {
type: String, type: String,
required: false, required: false,
default: '.' default: '.',
}, },
separator: { separator: {
type: String, type: String,
required: false, required: false,
default: ',' default: ',',
}, },
prefix: { prefix: {
type: String, type: String,
required: false, required: false,
default: '' default: '',
}, },
suffix: { suffix: {
type: String, type: String,
required: false, required: false,
default: '' default: '',
}, },
useEasing: { useEasing: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true default: true,
}, },
easingFn: { easingFn: {
type: Function, type: Function,
default(t, b, c, d) { default(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
} },
} },
}, },
data() { data() {
return { return {
@ -77,115 +77,126 @@ export default {
startTime: null, startTime: null,
timestamp: null, timestamp: null,
remaining: null, remaining: null,
rAF: null rAF: null,
}; }
}, },
computed: { computed: {
countDown() { countDown() {
return this.startVal > this.endVal return this.startVal > this.endVal
} },
}, },
watch: { watch: {
startVal() { startVal() {
if (this.autoplay) { if (this.autoplay) {
this.start(); this.start()
} }
}, },
endVal() { endVal() {
if (this.autoplay) { if (this.autoplay) {
this.start(); this.start()
}
} }
}, },
},
mounted() { mounted() {
if (this.autoplay) { if (this.autoplay) {
this.start(); this.start()
} }
this.$emit('mountedCallback') this.$emit('mountedCallback')
}, },
methods: { methods: {
start() { start() {
this.localStartVal = this.startVal; this.localStartVal = this.startVal
this.startTime = null; this.startTime = null
this.localDuration = this.duration; this.localDuration = this.duration
this.paused = false; this.paused = false
this.rAF = requestAnimationFrame(this.count); this.rAF = requestAnimationFrame(this.count)
}, },
pauseResume() { pauseResume() {
if (this.paused) { if (this.paused) {
this.resume(); this.resume()
this.paused = false; this.paused = false
} else { } else {
this.pause(); this.pause()
this.paused = true; this.paused = true
} }
}, },
pause() { pause() {
cancelAnimationFrame(this.rAF); cancelAnimationFrame(this.rAF)
}, },
resume() { resume() {
this.startTime = null; this.startTime = null
this.localDuration = +this.remaining; this.localDuration = +this.remaining
this.localStartVal = +this.printVal; this.localStartVal = +this.printVal
requestAnimationFrame(this.count); requestAnimationFrame(this.count)
}, },
reset() { reset() {
this.startTime = null; this.startTime = null
cancelAnimationFrame(this.rAF); cancelAnimationFrame(this.rAF)
this.displayValue = this.formatNumber(this.startVal); this.displayValue = this.formatNumber(this.startVal)
}, },
count(timestamp) { count(timestamp) {
if (!this.startTime) this.startTime = timestamp; if (!this.startTime) this.startTime = timestamp
this.timestamp = timestamp; this.timestamp = timestamp
const progress = timestamp - this.startTime; const progress = timestamp - this.startTime
this.remaining = this.localDuration - progress; this.remaining = this.localDuration - progress
if (this.useEasing) { if (this.useEasing) {
if (this.countDown) { if (this.countDown) {
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration) this.printVal =
this.localStartVal -
this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
} else { } else {
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration); this.printVal = this.easingFn(
progress,
this.localStartVal,
this.endVal - this.localStartVal,
this.localDuration,
)
} }
} else { } else {
if (this.countDown) { if (this.countDown) {
this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration)); this.printVal =
this.localStartVal -
(this.localStartVal - this.endVal) * (progress / this.localDuration)
} else { } else {
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration); this.printVal =
this.localStartVal +
(this.endVal - this.localStartVal) * (progress / this.localDuration)
} }
} }
if (this.countDown) { if (this.countDown) {
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal; this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal
} else { } else {
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal; this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal
} }
this.displayValue = this.formatNumber(this.printVal) this.displayValue = this.formatNumber(this.printVal)
if (progress < this.localDuration) { if (progress < this.localDuration) {
this.rAF = requestAnimationFrame(this.count); this.rAF = requestAnimationFrame(this.count)
} else { } else {
this.$emit('callback'); this.$emit('callback')
} }
}, },
isNumber(val) { isNumber(val) {
return !isNaN(parseFloat(val)) return !isNaN(parseFloat(val))
}, },
formatNumber(num) { formatNumber(num) {
num = num.toFixed(this.decimals); num = num.toFixed(this.decimals)
num += ''; num += ''
const x = num.split('.'); const x = num.split('.')
let x1 = x[0]; let x1 = x[0]
const x2 = x.length > 1 ? this.decimal + x[1] : ''; const x2 = x.length > 1 ? this.decimal + x[1] : ''
const rgx = /(\d+)(\d{3})/; const rgx = /(\d+)(\d{3})/
if (this.separator && !this.isNumber(this.separator)) { if (this.separator && !this.isNumber(this.separator)) {
while (rgx.test(x1)) { while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + this.separator + '$2'); x1 = x1.replace(rgx, '$1' + this.separator + '$2')
} }
} }
return this.prefix + x1 + x2 + this.suffix; return this.prefix + x1 + x2 + this.suffix
} },
}, },
destroyed() { destroyed() {
cancelAnimationFrame(this.rAF) cancelAnimationFrame(this.rAF)
},
} }
};
</script> </script>

49
src/components/u-info/index.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<div class="m-info"> <div class="m-info">
<el-popover <el-popover width="200px" placement="bottom">
width="200px"
placement="bottom"
>
<template #reference> <template #reference>
<el-badge :value="3" class="item-info-pop"> <el-badge :value="3" class="item-info-pop">
<el-icon class="bell"><Bell /></el-icon> <el-icon class="bell"><Bell /></el-icon>
@ -12,54 +9,58 @@
<div> <div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="通知" name="first"> <el-tab-pane label="通知" name="first">
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div> <div class="item-child">
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div> >
<div class="item-child">
github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
>
<div class="item-child">
github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-popover> </el-popover>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus' import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first') const activeName = ref('first')
const toGitHub = () => { const toGitHub = () => {
window.open('https://github.com/zouzhibin/vue-admin-perfect') window.open('https://github.com/zouzhibin/vue-admin-perfect')
} }
const handleClick = (tab: TabsPaneContext, event: Event) => { const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event) console.log(tab, event)
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.m-info{ .m-info {
width: 40px; width: 40px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all 0.3s;
.item-info-pop{ .item-info-pop {
// width:100% ; // width:100% ;
//height: 100%; //height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.item-child{ .item-child {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
} }
} }
.transverseMenu{ .transverseMenu {
.bell{ .bell {
color: white; color: white;
} }
} }
</style> </style>

8
src/components/u-mavonEditor/index.vue
View File

@ -1,7 +1,3 @@
<template> <template> </template>
</template> <script lang="ts"></script>
<script lang="ts">
</script>

53
src/components/u-rightClickMenu/index.vue
View File

@ -1,52 +1,55 @@
<template> <template>
<div class="g-right-click-menu" :style="style" v-if="isShow" ref="rightMenu"> <div class="g-right-click-menu" :style="style" v-if="isShow" ref="rightMenu">
<div <div
v-for="item,index in data" v-for="(item, index) in data"
:key="index" :key="index"
class="operating" @click.stop="operatingRightAction($event,item)">{{item.label}}</div> class="operating"
@click.stop="operatingRightAction($event, item)"
>{{ item.label }}</div
>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
props: { props: {
data:{ data: {
type:Array, type: Array,
default:()=>[] default: () => [],
}, },
left: { left: {
type: Number, type: Number,
default: 0 default: 0,
}, },
type: { type: {
type: Number, type: Number,
default: 1 default: 1,
}, },
dataInfo: { dataInfo: {
type: Object, type: Object,
default: () => {} default: () => {},
}, },
top: { top: {
type: Number, type: Number,
default: 0 default: 0,
}, },
isViewInfo: { isViewInfo: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
watch: { watch: {
left: { left: {
handler (newName, oldName) { handler(newName, oldName) {
if (newName) { if (newName) {
this.isShow = true this.isShow = true
} }
} },
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法 // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
// immediate: true // immediate: true
} },
}, },
computed: { computed: {
style () { style() {
let clientHeight = document.body.clientHeight let clientHeight = document.body.clientHeight
let y = this.top let y = this.top
if (clientHeight - y < 100) { if (clientHeight - y < 100) {
@ -54,11 +57,11 @@ export default {
} else { } else {
return `left:${this.left}px;top:${this.top}px` return `left:${this.left}px;top:${this.top}px`
} }
}
}, },
data () { },
data() {
return { return {
isShow: false isShow: false,
} }
}, },
methods: { methods: {
@ -66,12 +69,12 @@ export default {
* @func 点击操作 * @func 点击操作
* @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话 * @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话
*/ */
operatingRightAction ($event, val) { operatingRightAction($event, val) {
this.$emit('ok', $event, val) this.$emit('ok', $event, val)
this.isShow = false this.isShow = false
}
}, },
mounted () { },
mounted() {
let _self = this let _self = this
window.addEventListener('click', function () { window.addEventListener('click', function () {
_self.isShow = false _self.isShow = false
@ -81,11 +84,11 @@ export default {
_self.isShow = false _self.isShow = false
} }
}) })
},
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.g-right-click-menu { .g-right-click-menu {
left: 0; left: 0;
background: white; background: white;
width: 148px; width: 148px;
@ -108,5 +111,5 @@ export default {
.last-delete { .last-delete {
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
} }
} }
</style> </style>

75
src/components/u-screenfull/index.js
View File

@ -17,7 +17,6 @@ const methodMap = [
'webkitFullscreenEnabled', 'webkitFullscreenEnabled',
'webkitfullscreenchange', 'webkitfullscreenchange',
'webkitfullscreenerror', 'webkitfullscreenerror',
], ],
// Old WebKit // Old WebKit
[ [
@ -27,7 +26,6 @@ const methodMap = [
'webkitCancelFullScreen', 'webkitCancelFullScreen',
'webkitfullscreenchange', 'webkitfullscreenchange',
'webkitfullscreenerror', 'webkitfullscreenerror',
], ],
[ [
'mozRequestFullScreen', 'mozRequestFullScreen',
@ -45,30 +43,30 @@ const methodMap = [
'MSFullscreenChange', 'MSFullscreenChange',
'MSFullscreenError', 'MSFullscreenError',
], ],
]; ]
const nativeAPI = (() => { const nativeAPI = (() => {
const unprefixedMethods = methodMap[0]; const unprefixedMethods = methodMap[0]
const returnValue = {}; const returnValue = {}
for (const methodList of methodMap) { for (const methodList of methodMap) {
const exitFullscreenMethod = methodList?.[1]; const exitFullscreenMethod = methodList?.[1]
if (exitFullscreenMethod in document) { if (exitFullscreenMethod in document) {
for (const [index, method] of methodList.entries()) { for (const [index, method] of methodList.entries()) {
returnValue[unprefixedMethods[index]] = method; returnValue[unprefixedMethods[index]] = method
} }
return returnValue; return returnValue
} }
} }
return false; return false
})(); })()
const eventNameMap = { const eventNameMap = {
change: nativeAPI.fullscreenchange, change: nativeAPI.fullscreenchange,
error: nativeAPI.fullscreenerror, error: nativeAPI.fullscreenerror,
}; }
// eslint-disable-next-line import/no-mutable-exports // eslint-disable-next-line import/no-mutable-exports
let screenfull = { let screenfull = {
@ -76,63 +74,63 @@ let screenfull = {
request(element = document.documentElement, options) { request(element = document.documentElement, options) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const onFullScreenEntered = () => { const onFullScreenEntered = () => {
screenfull.off('change', onFullScreenEntered); screenfull.off('change', onFullScreenEntered)
resolve(); resolve()
}; }
screenfull.on('change', onFullScreenEntered); screenfull.on('change', onFullScreenEntered)
const returnPromise = element[nativeAPI.requestFullscreen](options); const returnPromise = element[nativeAPI.requestFullscreen](options)
if (returnPromise instanceof Promise) { if (returnPromise instanceof Promise) {
returnPromise.then(onFullScreenEntered).catch(reject); returnPromise.then(onFullScreenEntered).catch(reject)
} }
}); })
}, },
exit() { exit() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!screenfull.isFullscreen) { if (!screenfull.isFullscreen) {
resolve(); resolve()
return; return
} }
const onFullScreenExit = () => { const onFullScreenExit = () => {
screenfull.off('change', onFullScreenExit); screenfull.off('change', onFullScreenExit)
resolve(); resolve()
}; }
screenfull.on('change', onFullScreenExit); screenfull.on('change', onFullScreenExit)
const returnPromise = document[nativeAPI.exitFullscreen](); const returnPromise = document[nativeAPI.exitFullscreen]()
if (returnPromise instanceof Promise) { if (returnPromise instanceof Promise) {
returnPromise.then(onFullScreenExit).catch(reject); returnPromise.then(onFullScreenExit).catch(reject)
} }
}); })
}, },
toggle(element, options) { toggle(element, options) {
return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options); return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options)
}, },
onchange(callback) { onchange(callback) {
screenfull.on('change', callback); screenfull.on('change', callback)
}, },
onerror(callback) { onerror(callback) {
screenfull.on('error', callback); screenfull.on('error', callback)
}, },
on(event, callback) { on(event, callback) {
const eventName = eventNameMap[event]; const eventName = eventNameMap[event]
if (eventName) { if (eventName) {
document.addEventListener(eventName, callback, false); document.addEventListener(eventName, callback, false)
} }
}, },
off(event, callback) { off(event, callback) {
const eventName = eventNameMap[event]; const eventName = eventNameMap[event]
if (eventName) { if (eventName) {
document.removeEventListener(eventName, callback, false); document.removeEventListener(eventName, callback, false)
} }
}, },
raw: nativeAPI, raw: nativeAPI,
}; }
Object.defineProperties(screenfull, { Object.defineProperties(screenfull, {
isFullscreen: { isFullscreen: {
@ -147,11 +145,10 @@ Object.defineProperties(screenfull, {
// Coerce to boolean in case of old WebKit. // Coerce to boolean in case of old WebKit.
get: () => Boolean(document[nativeAPI.fullscreenEnabled]), get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
}, },
}); })
if (!nativeAPI) { if (!nativeAPI) {
screenfull = {isEnabled: false}; screenfull = { isEnabled: false }
} }
export default screenfull
export default screenfull;

29
src/components/u-screenfull/index.vue
View File

@ -4,63 +4,64 @@
class="full-screen" class="full-screen"
title="全屏" title="全屏"
@click.stop="click" @click.stop="click"
style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon> style="margin-right: 10px; cursor: pointer"
><full-screen
/></el-icon>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import screenfull from './index' import screenfull from './index'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import {onBeforeUnmount, onMounted, ref} from "vue"; import { onBeforeUnmount, onMounted, ref } from 'vue'
let isFullscreen = ref(false) let isFullscreen = ref(false)
const click = ()=>{ const click = () => {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
ElMessage({ ElMessage({
message: '你的浏览器不支持', message: '你的浏览器不支持',
type: 'warning' type: 'warning',
}) })
return false return false
} }
screenfull.toggle() screenfull.toggle()
} }
const change = ()=>{ const change = () => {
isFullscreen.value = screenfull.isFullscreen isFullscreen.value = screenfull.isFullscreen
} }
const init = ()=>{ const init = () => {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.on('change', change) screenfull.on('change', change)
} }
} }
const destroy = ()=>{ const destroy = () => {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.off('change', change) screenfull.off('change', change)
} }
} }
onMounted(()=>{ onMounted(() => {
init() init()
}) })
onBeforeUnmount(()=>{ onBeforeUnmount(() => {
destroy() destroy()
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.m-screenful{ .m-screenful {
width: 40px; width: 40px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all 0.3s;
} }
.transverseMenu{ .transverseMenu {
.full-screen{ .full-screen {
color: white; color: white;
} }
} }

48
src/components/u-setting/index.vue
View File

@ -7,9 +7,7 @@
主题配置 主题配置
</div> </div>
<div class="item-child item-child2" @click="operator(2)"> <div class="item-child item-child2" @click="operator(2)">
<el-icon size="30" <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><Link /></el-icon>
color="#3698fd"
style="margin-bottom: 8px"><Link /></el-icon>
源码拷贝 源码拷贝
</div> </div>
</div> </div>
@ -17,14 +15,19 @@
<el-drawer v-model="drawer" title="主题配置" size="300px"> <el-drawer v-model="drawer" title="主题配置" size="300px">
<div class="drawer-item"> <div class="drawer-item">
<label>布局</label> <label>布局</label>
<el-select v-model="layout" placeholder="请选择" style="width: 150px" @change="(val)=>changeSwitch(val,2)"> <el-select
v-model="layout"
placeholder="请选择"
style="width: 150px"
@change="(val) => changeSwitch(val, 2)"
>
<el-option label="纵向" value="vertical"></el-option> <el-option label="纵向" value="vertical"></el-option>
<el-option label="横向" value="horizontal"></el-option> <el-option label="横向" value="horizontal"></el-option>
</el-select> </el-select>
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<label>标签</label> <label>标签</label>
<el-switch v-model="tag" @change="(val)=>changeSwitch(val,1)"/> <el-switch v-model="tag" @change="(val) => changeSwitch(val, 1)" />
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
@ -35,10 +38,10 @@
const drawer = ref(false) const drawer = ref(false)
const tag = ref(true) const tag = ref(true)
const layout = ref('vertical') const layout = ref('vertical')
import {useStore} from "vuex"; import { useStore } from 'vuex'
const store = useStore() const store = useStore()
const operator = (type)=>{ const operator = (type) => {
switch (type) { switch (type) {
case 1: case 1:
drawer.value = true drawer.value = true
@ -49,24 +52,21 @@
} }
} }
const changeSwitch = (val, type) => {
const changeSwitch =(val,type)=>{
switch (type) { switch (type) {
// 是否显示tag // 是否显示tag
case 1: case 1:
store.dispatch('setting/setTag',val) store.dispatch('setting/setTag', val)
return return
case 2: case 2:
store.dispatch('setting/setMode',val) store.dispatch('setting/setMode', val)
return return
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.m-setting-fix{ .m-setting-fix {
position: fixed; position: fixed;
top: 50%; top: 50%;
right: 0; right: 0;
@ -81,7 +81,7 @@
border-bottom-left-radius: 5.5px; border-bottom-left-radius: 5.5px;
box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%); box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
transform: translateY(-50%); transform: translateY(-50%);
.item{ .item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -91,7 +91,7 @@
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
.item-child{ .item-child {
color: #3698fd; color: #3698fd;
width: 60px; width: 60px;
height: 60px; height: 60px;
@ -105,22 +105,22 @@
border-radius: 5.5px; border-radius: 5.5px;
font-size: 12px; font-size: 12px;
background: #ebf5ff; background: #ebf5ff;
transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
} }
.item-child2{ .item-child2 {
margin-top: 10px; margin-top: 10px;
color: #b37feb; color: #b37feb;
background: #f7f2fd; background: #f7f2fd;
transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
} }
}
} .drawer-item {
.drawer-item{
width: 100%; width: 100%;
display: flex; display: flex;
margin-bottom: 15px; margin-bottom: 15px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
</style> </style>

62
src/components/u-upload/index.vue
View File

@ -12,35 +12,33 @@
</el-upload> </el-upload>
<el-dialog v-model="dialogVisible" width="50%" top="80px"> <el-dialog v-model="dialogVisible" width="50%" top="80px">
<img w-full :src="dialogImageUrl" alt="预览图片" style="width: 100%"/> <img w-full :src="dialogImageUrl" alt="预览图片" style="width: 100%" />
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {onMounted, ref, watch} from 'vue' import { onMounted, ref, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus' import type { UploadProps, UploadUserFile } from 'element-plus'
import {ElMessage} from "element-plus"; import { ElMessage } from 'element-plus'
let emit = defineEmits(['update']) let emit = defineEmits(['update'])
let props = defineProps({ let props = defineProps({
modelValue:Array, modelValue: Array,
multiple:{ multiple: {
type:Boolean, type: Boolean,
default:true default: true,
}, },
listType:{ listType: {
type:String, type: String,
default:'picture-card' default: 'picture-card',
},
showFileList: {
type: Boolean,
default: true,
}, },
showFileList:{
type:Boolean,
default:true
}
}) })
let fileList = ref([ let fileList = ref([])
])
const dialogImageUrl = ref('') const dialogImageUrl = ref('')
const dialogVisible = ref(false) const dialogVisible = ref(false)
@ -49,22 +47,22 @@
console.log(uploadFile, uploadFiles) console.log(uploadFile, uploadFiles)
} }
const beforeUploadAction = (file, fileLi)=>{ const beforeUploadAction = (file, fileLi) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var reader = new FileReader() var reader = new FileReader()
let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i) let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
reader.readAsDataURL(file) reader.readAsDataURL(file)
let name = file.name let name = file.name
if(reg.test(name)){ if (reg.test(name)) {
reader.onload = (e:FileReader)=>{ reader.onload = (e: FileReader) => {
fileList.value.push({ fileList.value.push({
name:name, name: name,
url:e.target.result url: e.target.result,
}) })
emit('update',fileList.value) emit('update', fileList.value)
resolve(e.target.result) resolve(e.target.result)
} }
}else{ } else {
ElMessage.error('请上传图片') ElMessage.error('请上传图片')
reject() reject()
} }
@ -76,11 +74,15 @@
dialogVisible.value = true dialogVisible.value = true
} }
onMounted(()=>{ onMounted(() => {
watch(()=>props.modelValue,(value)=>{ watch(
() => props.modelValue,
(value) => {
fileList.value = value fileList.value = value
},{ },
immediate:true {
}) immediate: true,
},
)
}) })
</script> </script>

43
src/components/u-wangEdior/index.vue
View File

@ -4,45 +4,44 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// 引入 wangEditor // 引入 wangEditor
import wangEditor from 'wangeditor' import wangEditor from 'wangeditor'
import {onBeforeUnmount, onMounted, watch} from "vue"; import { onBeforeUnmount, onMounted, watch } from 'vue'
let editors = null let editors = null
let emit = defineEmits(['update:modelValue']) let emit = defineEmits(['update:modelValue'])
let props = defineProps({ let props = defineProps({
modelValue:String modelValue: String,
}) })
const getEditorData = () => {
const getEditorData = () =>{
// 通过代码获取编辑器内容 // 通过代码获取编辑器内容
let data = editors.txt.html() let data = editors.txt.html()
alert(data) alert(data)
} }
onMounted(()=>{ onMounted(() => {
watch(()=>props.modelValue,(value)=>{ watch(
() => props.modelValue,
(value) => {
editors.txt.html(value) editors.txt.html(value)
}) },
)
const editor = new wangEditor(`#wangEditor`) const editor = new wangEditor(`#wangEditor`)
// 配置 onchange 回调函数，将数据同步到 vue 中 // 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange = (newHtml) => { editor.config.onchange = (newHtml) => {
emit('update:modelValue',newHtml) emit('update:modelValue', newHtml)
} }
// 创建编辑器 // 创建编辑器
editor.create() editor.create()
editors = editor editors = editor
}) })
onBeforeUnmount(()=>{ onBeforeUnmount(() => {
// 调用销毁 API 对当前编辑器实例进行销毁 // 调用销毁 API 对当前编辑器实例进行销毁
editors.destroy() editors.destroy()
editors = null editors = null
}) })
</script> </script>
<style> <style></style>
</style>

6
src/icons/index.js
View File

@ -1,11 +1,11 @@
import Vue from 'vue' import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component import SvgIcon from '@/components/SvgIcon' // svg component
console.log(11111111) console.log(11111111)
// const req = require.context('./svg', false, /\.svg$/) // const req = require.context('./svg', false, /\.svg$/)
const req = import.meta.globEager('./svg/*.svg') const req = import.meta.globEager('./svg/*.svg')
consoole.log('req',req) consoole.log('req', req)
const requireAll = requireContext => requireContext.keys().map(requireContext) const requireAll = (requireContext) => requireContext.keys().map(requireContext)
requireAll(req) requireAll(req)
export default SvgIcon export default SvgIcon

26
src/layout/components/AppMain.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<section class="app-main" v-if="isReload"> <section class="app-main" v-if="isReload">
<router-view v-slot="{ Component,route }"> <router-view v-slot="{ Component, route }">
<transition name="fade-slide" mode="out-in" appear> <transition name="fade-slide" mode="out-in" appear>
<keep-alive v-if="route.meta&&route.meta.keepAlive"> <keep-alive v-if="route.meta && route.meta.keepAlive">
<component :is="Component" :key="route.path" /> <component :is="Component" :key="route.path" />
</keep-alive> </keep-alive>
<component :is="Component" :key="route.path" v-else/> <component :is="Component" :key="route.path" v-else />
</transition> </transition>
</router-view> </router-view>
<u-setting/> <u-setting />
</section> </section>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import USetting from '@/components/u-setting/index.vue' import USetting from '@/components/u-setting/index.vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const store = useStore() const store = useStore()
const cachedViews = computed(() => { const cachedViews = computed(() => {
return store.state.tagsView.cachedViews return store.state.tagsView.cachedViews
}) })
const isReload = computed(() => { const isReload = computed(() => {
return store.state.app.isReload return store.state.app.isReload
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main{ .app-main {
//padding: 20px; //padding: 20px;
/*padding-top: 110px;*/ /*padding-top: 110px;*/
//min-height: 100%; //min-height: 100%;

22
src/layout/components/Sidebar/Link.vue
View File

@ -5,14 +5,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { isExternal } from '@/utils/validate.js' import { isExternal } from '@/utils/validate.js'
export default { export default {
props: { props: {
to: { to: {
type: String, type: String,
required: true required: true,
} },
}, },
computed: { computed: {
isExternal() { isExternal() {
@ -23,7 +23,7 @@ export default {
return 'a' return 'a'
} }
return 'router-link' return 'router-link'
} },
}, },
methods: { methods: {
linkProps(to) { linkProps(to) {
@ -31,19 +31,19 @@ export default {
return { return {
href: to, href: to,
target: '_blank', target: '_blank',
rel: 'noopener' rel: 'noopener',
} }
} }
return { return {
to: to to: to,
} }
},
},
} }
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
a{ a {
text-decoration: none; text-decoration: none;
} }
</style> </style>

37
src/layout/components/Sidebar/Logo.vue
View File

@ -1,43 +1,42 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':isCollapse}"> <div class="sidebar-logo-container" :class="{ collapse: isCollapse }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title">Perfect </h1> <h1 v-else class="sidebar-title">Perfect </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title"> {{title}}</h1> <h1 class="sidebar-title"> {{ title }}</h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {computed, reactive, ref} from "vue"; import { computed, reactive, ref } from 'vue'
import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store
import logo from '@/assets/logo.png' import logo from '@/assets/logo.png'
const store = useStore() const store = useStore()
const title = ref<string>('Vue Admin Perfect') const title = ref<string>('Vue Admin Perfect')
const isCollapse = computed(()=>{ const isCollapse = computed(() => {
return !store.state.app.isCollapse return !store.state.app.isCollapse
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebarLogoFade-enter-active { .sidebarLogoFade-enter-active {
transition: opacity 1.5s; transition: opacity 1.5s;
} }
.sidebarLogoFade-enter, .sidebarLogoFade-enter,
.sidebarLogoFade-leave-to { .sidebarLogoFade-leave-to {
opacity: 0; opacity: 0;
} }
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 60px; height: 60px;
@ -74,5 +73,5 @@ const isCollapse = computed(()=>{
margin-right: 0px; margin-right: 0px;
} }
} }
} }
</style> </style>

30
src/layout/components/Sidebar/SidebarItem.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<template v-if="!item.hidden"> <template v-if="!item.hidden">
<template v-if="!item.alwaysShow&&hasOneShowingChild(item.children,item)"> <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)"> <el-menu-item :index="resolvePath(onlyOneChild.path)">
<el-icon :size="20"> <el-icon :size="20">
<component :is="onlyOneChild?.meta.icon"></component> <component :is="onlyOneChild?.meta.icon"></component>
</el-icon> </el-icon>
<template #title>{{ onlyOneChild.meta&&onlyOneChild.meta.title }}</template> <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body> <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
<template #title> <template #title>
<el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon> <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
<span>{{ item.meta&&item.meta.title }}</span> <span>{{ item.meta && item.meta.title }}</span>
</template> </template>
<sidebar-item <sidebar-item
v-for="child in item.children" v-for="child in item.children"
@ -25,25 +25,25 @@
</template> </template>
</template> </template>
<script lang="ts" setup > <script lang="ts" setup>
import { isExternal } from '@/utils/validate.js' import { isExternal } from '@/utils/validate.js'
import AppLink from './Link.vue' import AppLink from './Link.vue'
import path from 'path-browserify' import path from 'path-browserify'
import { ref,computed} from 'vue' import { ref, computed } from 'vue'
const props = defineProps({ const props = defineProps({
item:{ item: {
type:Object, type: Object,
required: true required: true,
}, },
basePath: { basePath: {
type: String, type: String,
default: '' default: '',
} },
}) })
const onlyOneChild = ref(null) const onlyOneChild = ref(null)
const hasOneShowingChild = (children = [], parent)=>{ const hasOneShowingChild = (children = [], parent) => {
const showingChildren = children.filter(item => { const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单 // 过滤掉需要隐藏的菜单
if (item.hidden) { if (item.hidden) {
return false return false
@ -60,15 +60,14 @@
} }
// 如果没有要显示的子路由器，则显示父路由器 // 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) { if (showingChildren.length === 0) {
onlyOneChild.value = { ... parent, path: '', noShowingChildren: true } onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
return true return true
} }
return false return false
} }
const resolvePath = (routePath) => {
const resolvePath = (routePath)=>{
if (isExternal(routePath)) { if (isExternal(routePath)) {
return routePath return routePath
} }
@ -77,5 +76,4 @@
} }
return path.resolve(props.basePath, routePath) return path.resolve(props.basePath, routePath)
} }
</script> </script>

20
src/layout/components/Sidebar/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div :class="{'has-logo':isCollapse}"> <div :class="{ 'has-logo': isCollapse }">
<logo :collapse="isCollapse" /> <logo :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<menu-slide/> <menu-slide />
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
@ -10,27 +10,27 @@
<script lang="ts" setup> <script lang="ts" setup>
import MenuSlide from './menuSlide.vue' import MenuSlide from './menuSlide.vue'
import logo from './Logo.vue' import logo from './Logo.vue'
import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store import { useStore, mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
import { ref,computed } from 'vue' import { ref, computed } from 'vue'
// 在setup中获取store // 在setup中获取store
const store = useStore() const store = useStore()
// 是否折叠 // 是否折叠
const isCollapse = computed(()=>{ const isCollapse = computed(() => {
return !store.state.app.isCollapse return !store.state.app.isCollapse
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-vertical-demo:not(.el-menu--collapse) {
//width: 200px; //width: 200px;
height: 100%; height: 100%;
} }
.crollbar-wrapper{ .crollbar-wrapper {
height: 100%; height: 100%;
.el-scrollbar__view{ .el-scrollbar__view {
height: 100%; height: 100%;
} }
} }
</style> </style>

23
src/layout/components/Sidebar/menuSlide.vue
View File

@ -9,28 +9,33 @@
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
:collapse="isCollapse" :collapse="isCollapse"
> >
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/> <sidebar-item
v-for="route in permission_routes"
:key="route.path"
:item="route"
:base-path="route.path"
/>
</el-menu> </el-menu>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import SidebarItem from './SidebarItem.vue' import SidebarItem from './SidebarItem.vue'
import logo from './Logo.vue' import logo from './Logo.vue'
import {useRoute} from 'vue-router' import { useRoute } from 'vue-router'
import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store import { useStore, mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
import { ref,computed } from 'vue' import { ref, computed } from 'vue'
// 在setup中获取store // 在setup中获取store
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()
// 获取路由 // 获取路由
const permission_routes = computed(()=>{ const permission_routes = computed(() => {
console.log('permission_routes',store.state.permission.routes) console.log('permission_routes', store.state.permission.routes)
return store.state.permission.routes return store.state.permission.routes
}) })
const activeMenu = computed(()=>{ const activeMenu = computed(() => {
const { meta, path } = route const { meta, path } = route
// if set path, the sidebar will highlight the path you set // if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
@ -40,12 +45,12 @@
}) })
// 是否折叠 // 是否折叠
const isCollapse = computed(()=>{ const isCollapse = computed(() => {
return !store.state.app.isCollapse return !store.state.app.isCollapse
}) })
// 横向 // 横向
const mode = computed(()=>{ const mode = computed(() => {
return store.state.setting.mode return store.state.setting.mode
}) })
</script> </script>

78
src/layout/components/TagsView/betterScroll.vue
View File

@ -1,58 +1,58 @@
<template> <template>
<div ref="bsWrap" class="tags-scroll-wrap"> <div ref="bsWrap" class="tags-scroll-wrap">
<div ref="bsContent" class="tags-scroll" > <div ref="bsContent" class="tags-scroll">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, onMounted,nextTick } from 'vue'; import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { useElementSize } from '@vueuse/core'; import { useElementSize } from '@vueuse/core'
import BScroll from '@better-scroll/core'; import BScroll from '@better-scroll/core'
import type { Options } from '@better-scroll/core'; import type { Options } from '@better-scroll/core'
interface Props { interface Props {
/** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */ /** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
options: Options; options: Options
}
const props = defineProps<Props>();
const bsWrap = ref<HTMLElement>();
const instance = ref<BScroll>();
const bsContent = ref<HTMLElement>();
function initBetterScroll() {
nextTick(()=>{
instance.value = new BScroll(bsWrap.value, props.options);
})
}
// 滚动元素发生变化，刷新BS
const { width: wrapWidth } = useElementSize(bsWrap);
const { width, height } = useElementSize(bsContent);
watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
if (instance.value) {
instance.value.refresh();
} }
});
onMounted(() => { const props = defineProps<Props>()
initBetterScroll();
});
defineExpose({ instance }); const bsWrap = ref<HTMLElement>()
const instance = ref<BScroll>()
const bsContent = ref<HTMLElement>()
function initBetterScroll() {
nextTick(() => {
instance.value = new BScroll(bsWrap.value, props.options)
})
}
// 滚动元素发生变化，刷新BS
const { width: wrapWidth } = useElementSize(bsWrap)
const { width, height } = useElementSize(bsContent)
watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
if (instance.value) {
instance.value.refresh()
}
})
onMounted(() => {
initBetterScroll()
})
defineExpose({ instance })
</script> </script>
<style scoped> <style scoped>
.tags-scroll-wrap{ .tags-scroll-wrap {
width: 100%; width: 100%;
} }
.tags-scroll-inner{ .tags-scroll-inner {
/*display: flex;*/ /*display: flex;*/
} }
.tags-scroll{ .tags-scroll {
display: inline-block; display: inline-block;
} }
</style> </style>

150
src/layout/components/TagsView/index.vue
View File

@ -1,76 +1,72 @@
<template> <template>
<div class="tags-wrap-container"> <div class="tags-wrap-container">
<div class="tags-view" ref="scrollContainer"> <div class="tags-view" ref="scrollContainer">
<better-scroll :options="{ scrollX: true, scrollY: false, }" ref="bsScroll"> <better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
<div class="tags-scroll-inner"> <div class="tags-scroll-inner">
<div v-for="tag in visitedViews" <div
v-for="tag in visitedViews"
:ref="setTagRef" :ref="setTagRef"
:path= "tag.path" :path="tag.path"
:data-id="tag.path" :data-id="tag.path"
:fullPath="tag.fullPath" :fullPath="tag.fullPath"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
:key="tag.path" :key="tag.path"
class="item-tag-wrap" class="item-tag-wrap"
:class="isActive(tag)?'active':''" :class="isActive(tag) ? 'active' : ''"
@click="routerGo(tag)"> @click="routerGo(tag)"
<div class="tags-view-item" >{{ tag.title }}</div> >
<el-icon @click.prevent.stop="(e)=>closeSelectedTag(e,tag)" class="tag-icon"> <div class="tags-view-item">{{ tag.title }}</div>
<circle-close-filled /></el-icon> <el-icon @click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
<circle-close-filled
/></el-icon>
</div> </div>
</div> </div>
</better-scroll> </better-scroll>
</div> </div>
<el-tooltip <el-tooltip class="box-item" effect="dark" content="点击刷新" placement="bottom-end">
class="box-item"
effect="dark"
content="点击刷新"
placement="bottom-end"
>
<div class="refresh" @click="refresh"> <div class="refresh" @click="refresh">
<div class="refresh-inner"> <div class="refresh-inner">
<el-icon><Refresh /> <el-icon><Refresh /> </el-icon> </div
</el-icon> ></div>
</div></div>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {computed, nextTick, onMounted, reactive, ref, watch} from "vue"; import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import betterScroll from "./betterScroll.vue"; import betterScroll from './betterScroll.vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import path from 'path-browserify' import path from 'path-browserify'
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const refresh = ()=>{ const refresh = () => {
store.dispatch('app/setReload') store.dispatch('app/setReload')
} }
const routes = computed(()=>{ const routes = computed(() => {
return store.state.permission.routes return store.state.permission.routes
}) })
const visitedViews = computed(()=>{ const visitedViews = computed(() => {
return store.state.tagsView.visitedViews return store.state.tagsView.visitedViews
}) })
const bsScroll = ref<Expose.BetterScroll>(); const bsScroll = ref<Expose.BetterScroll>()
let obj = new WeakMap() let obj = new WeakMap()
let affixTags = ref([]) let affixTags = ref([])
const tags = ref(new Map()) const tags = ref(new Map())
// 多个ref 添加tag // 多个ref 添加tag
const setTagRef = (el)=>{ const setTagRef = (el) => {
if(el){ if (el) {
if(!obj.get(el)){ if (!obj.get(el)) {
tags.value.set(el.dataset['id'],el) tags.value.set(el.dataset['id'], el)
} }
obj.set(el,el) obj.set(el, el)
} }
} }
@ -79,14 +75,14 @@
function filterAffixTags(routes, basePath = '/') { function filterAffixTags(routes, basePath = '/') {
let tags = [] let tags = []
routes.forEach(route => { routes.forEach((route) => {
if (route.meta && route.meta.affix) { if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path) const tagPath = path.resolve(basePath, route.path)
tags.push({ tags.push({
fullPath: tagPath, fullPath: tagPath,
path: tagPath, path: tagPath,
name: route.name, name: route.name,
meta: { ...route.meta } meta: { ...route.meta },
}) })
} }
if (route.children) { if (route.children) {
@ -99,9 +95,9 @@
return tags return tags
} }
const initTags = ()=>{ const initTags = () => {
let routesNew = routes.value let routesNew = routes.value
let affixTag = affixTags.value = filterAffixTags(routesNew) let affixTag = (affixTags.value = filterAffixTags(routesNew))
for (const tag of affixTag) { for (const tag of affixTag) {
if (tag.name) { if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag) store.dispatch('tagsView/addVisitedView', tag)
@ -109,15 +105,15 @@
} }
} }
const isActive = (rou)=> { const isActive = (rou) => {
return rou.path === route.path return rou.path === route.path
} }
const isAffix = (tag)=>{ const isAffix = (tag) => {
return tag.meta && tag.meta.affix return tag.meta && tag.meta.affix
} }
const addTags = ()=> { const addTags = () => {
const { name } = route const { name } = route
if(name==='Login'){ if (name === 'Login') {
return return
} }
if (name) { if (name) {
@ -139,19 +135,18 @@
} }
} }
const closeSelectedTag = (event,view)=>{ const closeSelectedTag = (event, view) => {
if(tags.value.get(view.path)){ if (tags.value.get(view.path)) {
tags.value.delete(view.path) tags.value.delete(view.path)
} }
store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
if (isActive(view)) { if (isActive(view)) {
toLastView(visitedViews, view) toLastView(visitedViews, view)
} }
}) })
} }
const routerGo = (tag)=>{ const routerGo = (tag) => {
router.push({ router.push({
path: tag.path, path: tag.path,
query: tag.query, query: tag.query,
@ -160,26 +155,26 @@
function handleScrollAction(currentTag) { function handleScrollAction(currentTag) {
const scrollContainerRect = scrollContainer.value.getBoundingClientRect() const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
let { left:currx, width:currentWidth } = currentTag.getBoundingClientRect() let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
const clientX = currx + currentWidth / 2; const clientX = currx + currentWidth / 2
const currentX = clientX - scrollContainerRect.left; const currentX = clientX - scrollContainerRect.left
const deltaX = currentX - scrollContainerRect.width / 2; const deltaX = currentX - scrollContainerRect.width / 2
if (bsScroll.value) { if (bsScroll.value) {
const { maxScrollX, x: leftX } = bsScroll.value.instance; const { maxScrollX, x: leftX } = bsScroll.value.instance
const rightX = maxScrollX - leftX; const rightX = maxScrollX - leftX
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX); const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
bsScroll.value?.instance.scrollBy(update, 0, 300); bsScroll.value?.instance.scrollBy(update, 0, 300)
} }
} }
function moveToCurrentTag(){ function moveToCurrentTag() {
nextTick(() => { nextTick(() => {
for (const [key, tag] of tags.value) { for (const [key, tag] of tags.value) {
let path = tag.attributes.path.value let path = tag.attributes.path.value
if (path === route.path) { if (path === route.path) {
let fullPath = tag.attributes.fullPath.value let fullPath = tag.attributes.fullPath.value
// 移动 // 移动
handleScrollAction(tag,tags.value) handleScrollAction(tag, tags.value)
if (fullPath !== route.fullPath) { if (fullPath !== route.fullPath) {
store.dispatch('tagsView/updateVisitedView', route) store.dispatch('tagsView/updateVisitedView', route)
} }
@ -189,51 +184,50 @@
}) })
} }
onMounted(() => {
onMounted(()=>{
initTags() initTags()
addTags() addTags()
nextTick(()=>{ nextTick(() => {
setTimeout(()=>{ setTimeout(() => {
moveToCurrentTag() moveToCurrentTag()
},50) }, 50)
}) })
watch(route, () => {
watch(route,()=>{
addTags() addTags()
nextTick(()=>{ nextTick(() => {
setTimeout(()=>{ setTimeout(() => {
moveToCurrentTag() moveToCurrentTag()
},100) }, 100)
}) })
}) })
router.beforeEach(async (to, from, next)=>{ router.beforeEach(async (to, from, next) => {
if((from.fullPath==='/error/404'||from.fullPath==='/error/401')&&to.fullPath==="/home") { if (
let whiteList = ['/error/404','/error/401'] (from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
to.fullPath === '/home'
) {
let whiteList = ['/error/404', '/error/401']
await store.dispatch('tagsView/removeView', whiteList) await store.dispatch('tagsView/removeView', whiteList)
} }
next() next()
}) })
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-wrap-container{ .tags-wrap-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
.tags-view{ .tags-view {
background: white; background: white;
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.refresh{ .refresh {
//margin-left: 20px; //margin-left: 20px;
cursor: pointer; cursor: pointer;
font-size: 22px; font-size: 22px;
@ -241,7 +235,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.refresh-inner{ .refresh-inner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -251,8 +245,8 @@
//box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d; //box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
} }
//padding-right: 10px; //padding-right: 10px;
} }
.item-tag-wrap{ .item-tag-wrap {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -261,7 +255,7 @@
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
border: 1px solid #d8dce5; border: 1px solid #d8dce5;
&.active .tag-icon{ &.active .tag-icon {
display: block; display: block;
} }
&.active { &.active {
@ -270,22 +264,22 @@
border-color: #42b983; border-color: #42b983;
} }
} }
.item-tag-wrap:hover{ .item-tag-wrap:hover {
border-color: #42b983; border-color: #42b983;
//color: #42b983; //color: #42b983;
} }
.tags-scroll-inner{ .tags-scroll-inner {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.tag-icon{ .tag-icon {
margin-left: 6px; margin-left: 6px;
} }
.tags-view-item { .tags-view-item {
position: relative; position: relative;
z-index: 2; z-index: 2;
white-space: nowrap; white-space: nowrap;
.tags-inner{ .tags-inner {
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;

24
src/layout/components/UHeader/Personal.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<el-dialog <el-dialog v-model="dialogVisible" title="修改密码" width="60%">
v-model="dialogVisible"
title="修改密码"
width="60%"
>
<el-form <el-form
ref="ruleFormRef" ref="ruleFormRef"
:model="ruleForm" :model="ruleForm"
@ -12,10 +8,10 @@
class="demo-ruleForm" class="demo-ruleForm"
:size="formSize" :size="formSize"
> >
<el-form-item label="姓名" > <el-form-item label="姓名">
<el-input v-model="ruleForm.name" disabled></el-input> <el-input v-model="ruleForm.name" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="手机号码" > <el-form-item label="手机号码">
<el-input v-model="ruleForm.mobile" disabled></el-input> <el-input v-model="ruleForm.mobile" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="修改密码" prop="password"> <el-form-item label="修改密码" prop="password">
@ -25,23 +21,21 @@
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)" <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
>确定</el-button
>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref,defineExpose,reactive, } from 'vue' import { ref, defineExpose, reactive } from 'vue'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import type { ElForm } from 'element-plus' import type { ElForm } from 'element-plus'
const dialogVisible = ref(false) const dialogVisible = ref(false)
const show = ()=>{ const show = () => {
dialogVisible.value = true dialogVisible.value = true
} }
const hide = ()=>{ const hide = () => {
dialogVisible.value = false dialogVisible.value = false
} }
type FormInstance = InstanceType<typeof ElForm> type FormInstance = InstanceType<typeof ElForm>
@ -85,7 +79,7 @@
</script> </script>
<style scoped> <style scoped>
.dialog-footer button:first-child { .dialog-footer button:first-child {
margin-right: 10px; margin-right: 10px;
} }
</style> </style>

102
src/layout/components/UHeader/index.vue
View File

@ -1,24 +1,30 @@
<template> <template>
<div <div
class="m-layout-header" class="m-layout-header"
:style="{left:`${mode==='horizontal'?0:isCollapse?'56':'210'}px`}"> :style="{ left: `${mode === 'horizontal' ? 0 : isCollapse ? '56' : '210'}px` }"
<div class="header" :class="{ >
transverseMenu:mode==='horizontal' <div
}"> class="header"
<menu-slide v-if="mode==='horizontal'"/> :class="{
<div class="left" v-if="mode==='vertical'"> transverseMenu: mode === 'horizontal',
}"
>
<menu-slide v-if="mode === 'horizontal'" />
<div class="left" v-if="mode === 'vertical'">
<div> <div>
<el-icon class="icon" v-if="isCollapse" @click="handleCollapse"><expand /></el-icon> <el-icon class="icon" v-if="isCollapse" @click="handleCollapse"><expand /></el-icon>
<el-icon class="icon" v-else @click="handleCollapse"><fold/></el-icon> <el-icon class="icon" v-else @click="handleCollapse"><fold /></el-icon>
</div> </div>
<u-hamburger/> <u-hamburger />
</div> </div>
<div class="right"> <div class="right">
<u-info/> <u-info />
<u-screen-full/> <u-screen-full />
<el-dropdown @command="commandAction"> <el-dropdown @command="commandAction">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<el-avatar :icon="UserFilled" :size="30" style="margin-right: 6px"/>{{ userInfo.username }} <el-avatar :icon="UserFilled" :size="30" style="margin-right: 6px" />{{
userInfo.username
}}
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
<arrow-down /> <arrow-down />
</el-icon> </el-icon>
@ -32,8 +38,8 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<tag-views v-if="isShowTag"/> <tag-views v-if="isShowTag" />
<personal ref="person"/> <personal ref="person" />
</div> </div>
</template> </template>
@ -41,68 +47,59 @@
import { UserFilled } from '@element-plus/icons-vue' import { UserFilled } from '@element-plus/icons-vue'
import Personal from './Personal.vue' import Personal from './Personal.vue'
import TagViews from '../TagsView/index.vue' import TagViews from '../TagsView/index.vue'
import UHamburger from "@/components/u-Hamburger/index.vue" import UHamburger from '@/components/u-Hamburger/index.vue'
import UScreenFull from '@/components/u-screenfull/index.vue' import UScreenFull from '@/components/u-screenfull/index.vue'
import UInfo from '@/components/u-info/index.vue' import UInfo from '@/components/u-info/index.vue'
import MenuSlide from '../Sidebar/menuSlide.vue' import MenuSlide from '../Sidebar/menuSlide.vue'
import {computed, ref,} from 'vue' import { computed, ref } from 'vue'
import {useRouter} from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import {useStore} from "vuex"; import { useStore } from 'vuex'
const store = useStore() const store = useStore()
const person = ref() const person = ref()
const router = useRouter() const router = useRouter()
const isCollapse = computed(()=>{ const isCollapse = computed(() => {
return !store.state.app.isCollapse return !store.state.app.isCollapse
}) })
const mode = computed(()=>{ const mode = computed(() => {
return store.state.setting.mode return store.state.setting.mode
}) })
const isShowTag = computed(()=>{ const isShowTag = computed(() => {
return store.state.setting.isShowTag return store.state.setting.isShowTag
}) })
const userInfo = computed(()=>{ const userInfo = computed(() => {
return store.state.user.userInfo return store.state.user.userInfo
}) })
const logOut = async () => {
const logOut = async ()=>{ ElMessageBox.confirm('确定退出登录吗？', '退出登录', {
ElMessageBox.confirm(
'确定退出登录吗？',
'退出登录',
{
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
} })
)
.then(async () => { .then(async () => {
try { try {
await store.dispatch('user/logout') await store.dispatch('user/logout')
router.push({path:'/login'}) router.push({ path: '/login' })
store.dispatch('permission/clearRoutes') store.dispatch('permission/clearRoutes')
store.dispatch('tagsView/clearVisitedView') store.dispatch('tagsView/clearVisitedView')
}catch (e) { } catch (e) {}
}
})
.catch(() => {
}) })
.catch(() => {})
} }
const commandAction = (key:number)=>{ const commandAction = (key: number) => {
switch (key){ switch (key) {
case 1: case 1:
logOut() logOut()
break; break
case 2: case 2:
person.value.show() person.value.show()
break; break
} }
} }
const handleCollapse = () => { const handleCollapse = () => {
@ -111,16 +108,16 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mobile{ .mobile {
.m-layout-header{ .m-layout-header {
left: 0!important; left: 0 !important;
} }
} }
.icon{ .icon {
font-size:24px; font-size: 24px;
cursor: pointer; cursor: pointer;
} }
.header{ .header {
height: 60px; height: 60px;
width: 100%; width: 100%;
display: flex; display: flex;
@ -128,21 +125,21 @@
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
.left{ .left {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.right{ .right {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.m-layout-header{ .m-layout-header {
position: fixed; position: fixed;
top: 0; top: 0;
background: white; background: white;
left: 0; left: 0;
z-index:99; z-index: 99;
right: 0; right: 0;
transition: left 0.28s; transition: left 0.28s;
flex-shrink: 0; flex-shrink: 0;
@ -150,7 +147,7 @@
box-shadow: 0 1px 4px rgb(0 21 41 / 8%); box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
} }
.el-dropdown{ .el-dropdown {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
@ -161,5 +158,4 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
</style> </style>

63
src/layout/index.vue
View File

@ -1,26 +1,29 @@
<template> <template>
<div class="g-container-layout" :class="classObj" > <div class="g-container-layout" :class="classObj">
<div v-if="device==='mobile'&&!isCollapse" class="drawer-bg" @click="handleClickOutside" /> <div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" v-if="mode==='vertical'"/> <sidebar class="sidebar-container" v-if="mode === 'vertical'" />
<div class="main-container" :class="{ <div
hideSliderLayout:mode==='horizontal' class="main-container"
}"> :class="{
hideSliderLayout: mode === 'horizontal',
}"
>
<u-header /> <u-header />
<div class="m-container-content" :class="{'app-main-hide-tag':!isShowTag}"> <div class="m-container-content" :class="{ 'app-main-hide-tag': !isShowTag }">
<app-main/> <app-main />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {computed, defineComponent, ref} from 'vue'; import { computed, defineComponent, ref } from 'vue'
import Sidebar from './components/Sidebar/index.vue' import Sidebar from './components/Sidebar/index.vue'
import UHeader from './components/UHeader/index.vue' import UHeader from './components/UHeader/index.vue'
import AppMain from './components/AppMain.vue' import AppMain from './components/AppMain.vue'
import {useResizeHandler} from './hooks/useResizeHandler' import { useResizeHandler } from './hooks/useResizeHandler'
import {useStore} from "vuex"; import { useStore } from 'vuex'
export default defineComponent({ export default defineComponent({
name: 'layout', name: 'layout',
@ -29,62 +32,62 @@
UHeader, UHeader,
AppMain, AppMain,
}, },
setup(){ setup() {
const store = useStore() const store = useStore()
// 是否折叠 // 是否折叠
const isCollapse = computed(()=>{ const isCollapse = computed(() => {
return !store.state.app.isCollapse return !store.state.app.isCollapse
}) })
let {device} = useResizeHandler() let { device } = useResizeHandler()
const classObj = computed(()=>{ const classObj = computed(() => {
return { return {
hideSidebar:!store.state.app.isCollapse, hideSidebar: !store.state.app.isCollapse,
openSidebar: store.state.app.isCollapse, openSidebar: store.state.app.isCollapse,
withoutAnimation: store.state.app.withoutAnimation, withoutAnimation: store.state.app.withoutAnimation,
mobile: device.value === 'mobile' mobile: device.value === 'mobile',
} }
}) })
const handleClickOutside = ()=> { const handleClickOutside = () => {
store.dispatch('app/closeSideBar', { withoutAnimation: false }) store.dispatch('app/closeSideBar', { withoutAnimation: false })
} }
const isShowTag = computed(()=>{ const isShowTag = computed(() => {
return store.state.setting.isShowTag return store.state.setting.isShowTag
}) })
const mode = computed(()=>{ const mode = computed(() => {
return store.state.setting.mode return store.state.setting.mode
}) })
return{ return {
isCollapse, isCollapse,
device, device,
classObj, classObj,
isShowTag, isShowTag,
mode, mode,
handleClickOutside handleClickOutside,
} }
} },
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.g-container-layout{ .g-container-layout {
//display: flex; //display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
.main-container{ .main-container {
//overflow: auto; //overflow: auto;
display: flex; display: flex;
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
flex-direction: column flex-direction: column;
} }
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
top: 0; top: 0;
} }
} }
.sidebar-container{ .sidebar-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -97,7 +100,7 @@
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.m-container-content{ .m-container-content {
//padding: 20px; //padding: 20px;
/*background: #f6f8f9;*/ /*background: #f6f8f9;*/
padding-top: 93px; padding-top: 93px;
@ -105,7 +108,7 @@
height: 100vh; height: 100vh;
position: relative; position: relative;
} }
.app-main-hide-tag{ .app-main-hide-tag {
padding-top: 80px; padding-top: 80px;
} }
</style> </style>

2
src/styles/index.scss
View File

@ -1,3 +1,3 @@
@import './variables.scss'; @import './variables.scss';
@import './sidebar.scss'; @import './sidebar.scss';
@import "./transition.scss"; @import './transition.scss';

28
src/styles/sidebar.scss
View File

@ -1,19 +1,18 @@
#app { #app {
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left 0.28s;
margin-left: $sideBarWidth; margin-left: $sideBarWidth;
position: relative; position: relative;
} }
.hideSliderLayout{ .hideSliderLayout {
margin-left: 0; margin-left: 0;
.el-menu--horizontal{ .el-menu--horizontal {
border-bottom: none; border-bottom: none;
} }
} }
.transverseMenu{ .transverseMenu {
background-color: $menuBg; background-color: $menuBg;
} }
@ -86,11 +85,11 @@
} }
} }
.is-active>.el-sub-menu__title { .is-active > .el-sub-menu__title {
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
& .nest-menu .el-sub-menu>.el-sub-menu__title, & .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
@ -130,7 +129,7 @@
.el-submenu { .el-submenu {
overflow: hidden; overflow: hidden;
&>.el-submenu__title { & > .el-submenu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
@ -149,8 +148,8 @@
.el-menu--collapse { .el-menu--collapse {
.el-sub-menu { .el-sub-menu {
&>.el-sub-menu__title { & > .el-sub-menu__title {
&>span { & > span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@ -173,7 +172,7 @@
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform 0.28s;
width: $sideBarWidth !important; width: $sideBarWidth !important;
} }
@ -187,7 +186,6 @@
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@ -197,7 +195,7 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
&>.el-menu { & > .el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
@ -207,7 +205,7 @@
} }
} }
.nest-menu .el-sub-menu>.el-sub-menu__title, .nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
@ -216,7 +214,7 @@
} }
// the scroll bar appears when the subMenu is too long // the scroll bar appears when the subMenu is too long
>.el-menu--popup { > .el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;

3
src/styles/transition.scss
View File

@ -27,7 +27,6 @@
transform: translateX(20px); transform: translateX(20px);
} }
// 面包屑动画 // 面包屑动画
.breadcrumb-enter-active { .breadcrumb-enter-active {
transition: all 0.25s; transition: all 0.25s;
@ -38,8 +37,6 @@
transform: translateX(30px) skewX(-50deg); transform: translateX(30px) skewX(-50deg);
} }
.fade-transform-leave-active, .fade-transform-leave-active,
.fade-transform-enter-active { .fade-transform-enter-active {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s;

30
src/styles/variables.scss
View File

@ -1,23 +1,23 @@
// base color // base color
$blue:#324157; $blue: #324157;
$light-blue:#3A71A8; $light-blue: #3a71a8;
$red:#C03639; $red: #c03639;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #30b08f;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow:#FEC171; $yellow: #fec171;
$panGreen: #30B08F; $panGreen: #30b08f;
// sidebar // sidebar
$menuText:#bfcbd9; $menuText: #bfcbd9;
$menuActiveText:#409EFF; $menuActiveText: #409eff;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 $subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156; $menuBg: #304156;
$menuHover:#263445; $menuHover: #263445;
$subMenuBg:#1f2d3d; $subMenuBg: #1f2d3d;
$subMenuHover:#001528; $subMenuHover: #001528;
$sideBarWidth: 210px; $sideBarWidth: 210px;

5
src/utils/auth.js
View File

@ -1,4 +1,3 @@
const TokenKey = 'zb-token' const TokenKey = 'zb-token'
export function getToken() { export function getToken() {
@ -6,9 +5,9 @@ export function getToken() {
} }
export function setToken(token) { export function setToken(token) {
return localStorage.TokenKey = token return (localStorage.TokenKey = token)
} }
export function removeToken() { export function removeToken() {
return localStorage.TokenKey ='' return (localStorage.TokenKey = '')
} }

4
src/utils/downloadzip.ts
View File

@ -88,7 +88,7 @@ export async function downloadFiles2ZipWithFolder(params: IDownloadFiles2ZipWith
async function handleFolder(zip: JsZip, folder: IFolder) { async function handleFolder(zip: JsZip, folder: IFolder) {
console.log({folder}) console.log({folder})
let folderPromises: Promise<any>[] = []; const folderPromises: Promise<any>[] = [];
const promises = folder?.files?.map(async param => await handleEachFile(param, zip, folder.folderName)); const promises = folder?.files?.map(async param => await handleEachFile(param, zip, folder.folderName));
await Promise.all([...promises, ...folderPromises]); await Promise.all([...promises, ...folderPromises]);
} }
@ -169,7 +169,7 @@ function handleDataWithRender(worksheet: Worksheet, sheet: ISheet) {
// @ts-ignore // @ts-ignore
function getValueFromRender(renderResult: any) { function getValueFromRender(renderResult: any) {
if (renderResult?.type) { if (renderResult?.type) {
let children = renderResult?.props?.children; const children = renderResult?.props?.children;
if (children?.type) { if (children?.type) {
return getValueFromRender(children); return getValueFromRender(children);
} else { } else {

43
src/utils/emojis.js
View File

@ -1,12 +1,35 @@
export default { export default {
imgs: ['爱你', imgs: [
'爱情', '爱心', '傲慢', '爱你',
'白眼', '抱拳', '鄙视', '爱情',
'闭嘴', '便便', '擦汗', '爱心',
'菜刀', '差劲', '呲牙', '傲慢',
'大哭', '蛋糕', '刀', '白眼',
'得意', '凋谢', '发呆', 'NO', 'OK', '抱拳',
'发抖', '发怒', '饭', '飞吻', '奋斗', '鄙视',
'疯了', '尴尬', '勾引', '鼓掌', '哈欠', '闭嘴',
] '便便',
'擦汗',
'菜刀',
'差劲',
'呲牙',
'大哭',
'蛋糕',
'刀',
'得意',
'凋谢',
'发呆',
'NO',
'OK',
'发抖',
'发怒',
'饭',
'飞吻',
'奋斗',
'疯了',
'尴尬',
'勾引',
'鼓掌',
'哈欠',
],
} }

32
src/utils/exprotExcel.ts
View File

@ -21,15 +21,15 @@ export const exportExcel = async ({column,data,filename,autoWidth,format})=>{
// 创建工作表 // 创建工作表
const worksheet = workbook.addWorksheet(filename); const worksheet = workbook.addWorksheet(filename);
// 设置列名 // 设置列名
let columnsName = []; const columnsName = [];
column.forEach((item,index)=>{ column.forEach((item,index)=>{
let obj = { const obj = {
header: item.label, key:item.name, width: null header: item.label, key:item.name, width: null
} }
if(autoWidth){ if(autoWidth){
let maxArr = [autoWidthAction(item.label)] const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{ data.forEach(ite=>{
let str = ite[item.name] ||'' const str = ite[item.name] ||''
if(str){ if(str){
maxArr.push(autoWidthAction(str)) maxArr.push(autoWidthAction(str))
} }
@ -93,15 +93,15 @@ export const exportStyleExcel =async ({column,data,filename,autoWidth,format})=>
// 创建工作表 // 创建工作表
const worksheet = workbook.addWorksheet(filename); const worksheet = workbook.addWorksheet(filename);
// 设置列名 // 设置列名
let columnsName = []; const columnsName = [];
column.forEach((item,index)=>{ column.forEach((item,index)=>{
let obj = { const obj = {
header: item.label, key:item.name, width: null header: item.label, key:item.name, width: null
} }
if(autoWidth){ if(autoWidth){
let maxArr = [autoWidthAction(item.label)] const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{ data.forEach(ite=>{
let str = ite[item.name] ||'' const str = ite[item.name] ||''
if(str){ if(str){
maxArr.push(autoWidthAction(str)) maxArr.push(autoWidthAction(str))
} }
@ -161,7 +161,7 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
// 创建excel // 创建excel
const workbook = new ExcelJS.Workbook(); const workbook = new ExcelJS.Workbook();
// 创建工作表 // 创建工作表
let sheet = workbook.addWorksheet("sheet1"); const sheet = workbook.addWorksheet("sheet1");
// 添加表头 // 添加表头
sheet.getRow(1).values = ["序号", "日期","地址" ,"配送消息" ,,, ]; sheet.getRow(1).values = ["序号", "日期","地址" ,"配送消息" ,,, ];
@ -173,16 +173,16 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
"城市", "城市",
"邮编" "邮编"
]; ];
let headers = []; const headers = [];
column.forEach((item,index)=>{ column.forEach((item,index)=>{
if(item.children){ if(item.children){
item.children.forEach(itemChild=>{ item.children.forEach(itemChild=>{
let obj = { const obj = {
key:itemChild.name, width: null key:itemChild.name, width: null
} }
let maxArr = [autoWidthAction(itemChild.label)] const maxArr = [autoWidthAction(itemChild.label)]
data.forEach(ite=>{ data.forEach(ite=>{
let str = ite[itemChild.name] ||'' const str = ite[itemChild.name] ||''
if(str){ if(str){
maxArr.push(autoWidthAction(str)) maxArr.push(autoWidthAction(str))
} }
@ -193,12 +193,12 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
}) })
}else { }else {
let obj = { const obj = {
key:item.name, width: null key:item.name, width: null
} }
let maxArr = [autoWidthAction(item.label)] const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{ data.forEach(ite=>{
let str = ite[item.name] ||'' const str = ite[item.name] ||''
if(str){ if(str){
maxArr.push(autoWidthAction(str)) maxArr.push(autoWidthAction(str))
} }

132
src/utils/index.js
View File

@ -17,8 +17,8 @@ export function parseTime(time, cFormat) {
if (typeof time === 'object') { if (typeof time === 'object') {
date = time date = time
} else { } else {
if ((typeof time === 'string')) { if (typeof time === 'string') {
if ((/^[0-9]+$/.test(time))) { if (/^[0-9]+$/.test(time)) {
// support "1548221490638" // support "1548221490638"
time = parseInt(time) time = parseInt(time)
} else { } else {
@ -28,7 +28,7 @@ export function parseTime(time, cFormat) {
} }
} }
if ((typeof time === 'number') && (time.toString().length === 10)) { if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000 time = time * 1000
} }
date = new Date(time) date = new Date(time)
@ -40,12 +40,14 @@ export function parseTime(time, cFormat) {
h: date.getHours(), h: date.getHours(),
i: date.getMinutes(), i: date.getMinutes(),
s: date.getSeconds(), s: date.getSeconds(),
a: date.getDay() a: date.getDay(),
} }
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key] const value = formatObj[key]
// Note: getDay() returns 0 on Sunday // Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
return value.toString().padStart(2, '0') return value.toString().padStart(2, '0')
}) })
return time_str return time_str
@ -81,15 +83,7 @@ export function formatTime(time, option) {
return parseTime(time, option) return parseTime(time, option)
} else { } else {
return ( return (
d.getMonth() + d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
) )
} }
} }
@ -124,7 +118,7 @@ export function byteLength(str) {
const code = str.charCodeAt(i) const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++ if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2 else if (code > 0x7ff && code <= 0xffff) s += 2
if (code >= 0xDC00 && code <= 0xDFFF) i-- if (code >= 0xdc00 && code <= 0xdfff) i--
} }
return s return s
} }
@ -150,10 +144,10 @@ export function cleanArray(actual) {
export function param(json) { export function param(json) {
if (!json) return '' if (!json) return ''
return cleanArray( return cleanArray(
Object.keys(json).map(key => { Object.keys(json).map((key) => {
if (json[key] === undefined) return '' if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]) return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
}) }),
).join('&') ).join('&')
} }
@ -168,7 +162,7 @@ export function param2Obj(url) {
} }
const obj = {} const obj = {}
const searchArr = search.split('&') const searchArr = search.split('&')
searchArr.forEach(v => { searchArr.forEach((v) => {
const index = v.indexOf('=') const index = v.indexOf('=')
if (index !== -1) { if (index !== -1) {
const name = v.substring(0, index) const name = v.substring(0, index)
@ -202,7 +196,7 @@ export function objectMerge(target, source) {
if (Array.isArray(source)) { if (Array.isArray(source)) {
return source.slice() return source.slice()
} }
Object.keys(source).forEach(property => { Object.keys(source).forEach((property) => {
const sourceProperty = source[property] const sourceProperty = source[property]
if (typeof sourceProperty === 'object') { if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty) target[property] = objectMerge(target[property], sourceProperty)
@ -227,8 +221,7 @@ export function toggleClass(element, className) {
classString += '' + className classString += '' + className
} else { } else {
classString = classString =
classString.substr(0, nameIndex) + classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
classString.substr(nameIndex + className.length)
} }
element.className = classString element.className = classString
} }
@ -254,7 +247,7 @@ export function getTime(type) {
export function debounce(func, wait, immediate) { export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result let timeout, args, context, timestamp, result
const later = function() { const later = function () {
// 据上一次触发时间间隔 // 据上一次触发时间间隔
const last = +new Date() - timestamp const last = +new Date() - timestamp
@ -271,7 +264,7 @@ export function debounce(func, wait, immediate) {
} }
} }
return function(...args) { return function (...args) {
context = this context = this
timestamp = +new Date() timestamp = +new Date()
const callNow = immediate && !timeout const callNow = immediate && !timeout
@ -298,7 +291,7 @@ export function deepClone(source) {
throw new Error('error arguments', 'deepClone') throw new Error('error arguments', 'deepClone')
} }
const targetObj = source.constructor === Array ? [] : {} const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => { Object.keys(source).forEach((keys) => {
if (source[keys] && typeof source[keys] === 'object') { if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys]) targetObj[keys] = deepClone(source[keys])
} else { } else {
@ -356,70 +349,77 @@ export function removeClass(ele, cls) {
} }
} }
export function getColor() { export function getColor() {
var str = '#'; var str = '#'
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']; var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (var i = 0; i < 6; i++) { for (var i = 0; i < 6; i++) {
var num = parseInt(Math.random() * 16); var num = parseInt(Math.random() * 16)
str += arr[num]; str += arr[num]
} }
return str; return str
} }
// 检查给定的值是否是数组 // 检查给定的值是否是数组
export const isArray = function(value) { export const isArray = function (value) {
return objToString.call(value) === "[object Array]"; return objToString.call(value) === '[object Array]'
}; }
var funProto = Function.prototype; var funProto = Function.prototype
var objProto = Object.prototype; var objProto = Object.prototype
var getPrototypeOf = Object.getPrototypeOf; var getPrototypeOf = Object.getPrototypeOf
var objToString = objProto.toString; var objToString = objProto.toString
var hasOwnProperty = objProto.hasOwnProperty; var hasOwnProperty = objProto.hasOwnProperty
var funToString = funProto.toString; var funToString = funProto.toString
// 检查给定的值是否是字符串 // 检查给定的值是否是字符串
export const isString = function(value) { export const isString = function (value) {
return objToString.call(value) === "[object String]"; return objToString.call(value) === '[object String]'
}; }
// 检查给定的值是否是纯对象，纯对象是指通过 {} 或 new Object() 声明的对象 // 检查给定的值是否是纯对象，纯对象是指通过 {} 或 new Object() 声明的对象
export const isPlainObject = function(value) { export const isPlainObject = function (value) {
if (!value || objToString.call(value) !== "[object Object]") { if (!value || objToString.call(value) !== '[object Object]') {
return false; return false
} }
var prototype = getPrototypeOf(value); var prototype = getPrototypeOf(value)
if (prototype === null) { if (prototype === null) {
return true; return true
} }
var constructor = hasOwnProperty.call(prototype, "constructor") && prototype.constructor; var constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
return typeof constructor === "function" && funToString.call(constructor) === funToString.call(Object); return (
}; typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
)
}
// // 深度克隆 array 数组或 json 对象，返回克隆后的副本 // // 深度克隆 array 数组或 json 对象，返回克隆后的副本
export const deepObjClone = function(obj){ export const deepObjClone = function (obj) {
let weakMap = new WeakMap() let weakMap = new WeakMap()
function clone (obj){ function clone(obj) {
if(obj==null){return obj} if (obj == null) {
if(obj instanceof Date){ return new Date(obj) } return obj
if(obj instanceof RegExp){ return new RegExp(obj)} }
if(typeof obj !== 'object') return obj if (obj instanceof Date) {
return new Date(obj)
}
if (obj instanceof RegExp) {
return new RegExp(obj)
}
if (typeof obj !== 'object') return obj
if(weakMap.get(obj)){ if (weakMap.get(obj)) {
return weakMap.get(obj) return weakMap.get(obj)
} }
var copy = new obj.constructor var copy = new obj.constructor()
weakMap.set(obj,copy) weakMap.set(obj, copy)
for(var key in obj){ for (var key in obj) {
if(Object.prototype.hasOwnProperty.call(obj, key)){ if (Object.prototype.hasOwnProperty.call(obj, key)) {
var value = obj[key]; var value = obj[key]
copy[key] = clone(value); copy[key] = clone(value)
} }
} }
return copy; return copy
} }
return clone (obj) return clone(obj)
}; }

6
src/utils/validate.js
View File

@ -24,7 +24,8 @@ export function validUsername(str) {
* @returns {Boolean} * @returns {Boolean}
*/ */
export function validURL(url) { export function validURL(url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ const reg =
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url) return reg.test(url)
} }
@ -60,7 +61,8 @@ export function validAlphabets(str) {
* @returns {Boolean} * @returns {Boolean}
*/ */
export function validEmail(email) { export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ const reg =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email) return reg.test(email)
} }

12
src/views/Home.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
export default defineComponent({ export default defineComponent({
name: 'Home', name: 'Home',
components: { components: {
HelloWorld, HelloWorld,
}, },
}); })
</script> </script>

96
src/views/charts/animation.vue
View File

@ -3,15 +3,17 @@
<div class="item-animation"> <div class="item-animation">
<div class="item"> <div class="item">
<div class="item-icon item-icon1"> <div class="item-icon item-icon1">
<img src="@/assets/image/circle-bg.png" class="circle-bg"/> <img src="@/assets/image/circle-bg.png" class="circle-bg" />
</div> </div>
<div class="item-right"> <div class="item-right">
<div class="item-right-inner"> <div class="item-right-inner">
<div class="text-title">带动就业人数</div> <div class="text-title">带动就业人数</div>
<div class="text-number"><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to></div> <div class="text-number"
><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to
></div>
<div class="text-der text-decenter-wrapr"> <div class="text-der text-decenter-wrapr">
<span class="left">同比去年</span> <span class="left">同比去年</span>
<img src="@/assets/image/allow.png"/> <img src="@/assets/image/allow.png" />
<span class="right">+78%</span> <span class="right">+78%</span>
</div> </div>
</div> </div>
@ -19,21 +21,26 @@
</div> </div>
</div> </div>
<div> <div>
<div class="circle-dot" v-for="item,index in pointStyle" :key="index" :style="{ <div
left:`${item.left}px`, class="circle-dot"
top:`${item.top}px` v-for="(item, index) in pointStyle"
}"></div> :key="index"
:style="{
left: `${item.left}px`,
top: `${item.top}px`,
}"
></div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import CountTo from '@/components/u-count-to/vue-countTo.vue' import CountTo from '@/components/u-count-to/vue-countTo.vue'
import { nextTick, onMounted, ref } from 'vue' import { nextTick, onMounted, ref } from 'vue'
const mAnimation = ref<HTMLElement|null>() const mAnimation = ref<HTMLElement | null>()
const pointStyle = ref([]) const pointStyle = ref([])
function randomNum (minNum, maxNum) { function randomNum(minNum, maxNum) {
switch (arguments.length) { switch (arguments.length) {
case 1: case 1:
return parseInt(Math.random() * minNum + 1) return parseInt(Math.random() * minNum + 1)
@ -42,99 +49,103 @@ function randomNum (minNum, maxNum) {
default: default:
return 0 return 0
} }
} }
const getAttribute = () => { const getAttribute = () => {
const mAnimationInfo = mAnimation.value.getBoundingClientRect() const mAnimationInfo = mAnimation.value.getBoundingClientRect()
const obj = [] const obj = []
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
if (!obj[i]) { obj[i] = {} } if (!obj[i]) {
obj[i] = {}
}
obj[i].left = randomNum(0, mAnimationInfo.width) obj[i].left = randomNum(0, mAnimationInfo.width)
} }
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
if (!obj[i]) { obj[i] = {} } if (!obj[i]) {
obj[i] = {}
}
obj[i].top = randomNum(0, mAnimationInfo.height) obj[i].top = randomNum(0, mAnimationInfo.height)
} }
return obj return obj
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
pointStyle.value = getAttribute() pointStyle.value = getAttribute()
console.log('pointStyle',pointStyle) console.log('pointStyle', pointStyle)
})
}) })
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.m-animation{ .m-animation {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #030409; background-color: #030409;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
.circle-bg{ .circle-bg {
animation:rotate 5s infinite linear; animation: rotate 5s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
} }
@keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
} }
.item { .item {
display: flex; display: flex;
/*align-items: center;*/ /*align-items: center;*/
.item-icon { .item-icon {
width: 117px; width: 117px;
height: 109px; height: 109px;
} }
.item-icon1{ .item-icon1 {
background: url("../../assets/image/center-inner1.png") no-repeat center 43%; background: url('../../assets/image/center-inner1.png') no-repeat center 43%;
} }
.item-right{ .item-right {
margin-left: 20px; margin-left: 20px;
.item-right-inner{ .item-right-inner {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.text-title{ .text-title {
font-size: 20px; font-size: 20px;
letter-spacing: 1px; letter-spacing: 1px;
color: #ffffff; color: #ffffff;
/*margin-bottom: 6px;*/ /*margin-bottom: 6px;*/
/*height: 20px;*/ /*height: 20px;*/
} }
.text-number{ .text-number {
font-size: 44px; font-size: 44px;
letter-spacing: 2px; letter-spacing: 2px;
color: #00e4ff; color: #00e4ff;
} }
.text-der{ .text-der {
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
letter-spacing: 1px; letter-spacing: 1px;
.left{ .left {
margin-right: 10px; margin-right: 10px;
} }
img{ img {
margin-right: 4px; margin-right: 4px;
margin-top: 4px; margin-top: 4px;
width: 11px; width: 11px;
height: 15px; height: 15px;
} }
.right{ .right {
color: #ff0000; color: #ff0000;
} }
} }
} }
} }
.circle-dot { .circle-dot {
width: 5px; width: 5px;
height: 5px; height: 5px;
@ -190,9 +201,8 @@ onMounted(() => {
} }
} }
.item-animation {
.item-animation{
padding: 20px; padding: 20px;
} }
} }
</style> </style>

12
src/views/charts/complex.vue
View File

@ -12,22 +12,21 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import LineCharts from './components/complex/line/index.vue' import LineCharts from './components/complex/line/index.vue'
import BarCharts from './components/complex/bar/index.vue' import BarCharts from './components/complex/bar/index.vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.m-complex{ .m-complex {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #030409; background-color: #030409;
.m-complex-inner{ .m-complex-inner {
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.item-complex{ .item-complex {
width: 454px; width: 454px;
height: 292px; height: 292px;
background-image: url('../../assets/image/charts/1-1-bg.png'); background-image: url('../../assets/image/charts/1-1-bg.png');
@ -35,5 +34,4 @@ import BarCharts from './components/complex/bar/index.vue'
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
</style> </style>

143
src/views/charts/components/complex/Histogram.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidFill.js'
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
legend: { legend: {
data: [ data: [
'3-11岁任务数', '3-11岁任务数',
@ -38,12 +38,12 @@ const options = {
'60岁全程接种量', '60岁全程接种量',
'80岁任务数', '80岁任务数',
'80岁全程接种量', '80岁全程接种量',
'完成率' '完成率',
] ],
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'] data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'],
}, },
yAxis: [ yAxis: [
{ type: 'value' }, { type: 'value' },
@ -54,7 +54,7 @@ const options = {
// max: 100, // max: 100,
nameTextStyle: { nameTextStyle: {
color: '#ccc', color: '#ccc',
padding: [0, 0, 10, -30] padding: [0, 0, 10, -30],
}, },
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
@ -63,16 +63,16 @@ const options = {
type: 'dashed', type: 'dashed',
width: 1, width: 1,
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['#566471', '#566471'] color: ['#566471', '#566471'],
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
} },
} },
} },
], ],
// tooltip: { // tooltip: {
// trigger: 'axis', // trigger: 'axis',
@ -81,56 +81,60 @@ const options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
}, },
textStyle: { textStyle: {
color: '#fff', color: '#fff',
align: 'left', align: 'left',
fontSize: 14 fontSize: 14,
}, },
axisLine: {//x坐标轴轴线 axisLine: {
//x坐标轴轴线
show: true, show: true,
lineStyle: {//x坐标轴轴线样式 lineStyle: {
color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色 //x坐标轴轴线样式
} color: '#000', //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
},
}, },
backgroundColor: 'rgba(0,0,0,0.8)', backgroundColor: 'rgba(0,0,0,0.8)',
formatter: function (params) { formatter: function (params) {
console.log(params); console.log(params)
let str = params[0].name + '<br />'; let str = params[0].name + '<br />'
console.log(str); console.log(str)
params.forEach((item) => { params.forEach((item) => {
console.log(item.seriesName); console.log(item.seriesName)
if (item.value) { if (item.value) {
if (item.seriesName.indexOf('岁全程接种量') != -1) { if (item.seriesName.indexOf('岁全程接种量') != -1) {
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color} str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${
item.color
}
"></span> "></span>
${item.seriesName} ${item.seriesName}
: :
${item.value}人 <br/> ${item.value}人 <br/>
&nbsp; &nbsp; 全程完成率 &nbsp; &nbsp; 全程完成率
: ${item.value/100}% : ${item.value / 100}%
<br/><br/>`; <br/><br/>`
}else if (item.seriesName.indexOf('岁任务数') != -1) { } else if (item.seriesName.indexOf('岁任务数') != -1) {
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color} str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
"></span> "></span>
${item.seriesName} ${item.seriesName}
: :
${item.value}人 ${item.value}人
<br/>`; <br/>`
}else{ } else {
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color} str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
"></span> "></span>
${item.seriesName} ${item.seriesName}
: :
${item.value}% ${item.value}%
<br/>`; <br/>`
} }
} }
}); })
return str; return str
} },
}, },
series: [ series: [
@ -138,77 +142,76 @@ const options = {
name: '3-11岁任务数', name: '3-11岁任务数',
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
stack: 'BB', stack: 'BB',
type: 'bar' type: 'bar',
}, },
{ {
name: '3-11岁全程接种量', name: '3-11岁全程接种量',
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
stack: 'BB', stack: 'BB',
type: 'bar' type: 'bar',
}, },
{ {
name: '60岁任务数', name: '60岁任务数',
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
stack: 'AA', stack: 'AA',
type: 'bar' type: 'bar',
}, },
{ {
name: '60岁全程接种量', name: '60岁全程接种量',
data: [880, 30, 124, 118, 35, 47, 160], data: [880, 30, 124, 118, 35, 47, 160],
stack: 'AA', stack: 'AA',
type: 'bar' type: 'bar',
}, },
{ {
name: '80岁任务数', name: '80岁任务数',
data: [660, 30, 124, 118, 35, 47, 160], data: [660, 30, 124, 118, 35, 47, 160],
stack: 'Ad', stack: 'Ad',
type: 'bar' type: 'bar',
}, },
{ {
name: '80岁全程接种量', name: '80岁全程接种量',
data: [880, 30, 124, 118, 35, 47, 160], data: [880, 30, 124, 118, 35, 47, 160],
stack: 'Ad', stack: 'Ad',
type: 'bar' type: 'bar',
}, },
{ {
name: '完成率', name: '完成率',
data: [50, 130, 124, 18, 35, 47, 160], data: [50, 130, 124, 18, 35, 47, 160],
yAxisIndex:1, yAxisIndex: 1,
type: 'line', type: 'line',
markLine: { markLine: {
symbol: 'none', symbol: 'none',
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle: { lineStyle: {
type: 'dotted' type: 'dotted',
}
}
}, },
data: [{ type: 'average', name: 'Avg' + '%' }] },
},
data: [{ type: 'average', name: 'Avg' + '%' }],
}, },
// symbol: 'none', // symbol: 'none',
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle: { lineStyle: {
width: 2, width: 2,
type: 'solid' //'dotted'虚线 'solid'实线 type: 'solid', //'dotted'虚线 'solid'实线
},
},
},
},
],
} }
} let chart: EChartsType
} const initChart = () => {
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

58
src/views/charts/components/complex/bar/components/bar.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" ref="chartsRef"/> <div :id="id" :class="className" :style="{ height: height, width: width }" ref="chartsRef" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core' import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement|null>() const chartsRef = ref<HTMLElement | null>()
const props = defineProps({ const props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
xAxisData: { xAxisData: {
type: Array, type: Array,
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, },
config: { config: {
type: Object, type: Object,
default: () => {} default: () => {},
}, },
seriesData: { seriesData: {
type: Array, type: Array,
default: () => [150, 230, 224, 218, 135, 147, 260] default: () => [150, 230, 224, 218, 135, 147, 260],
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
@ -47,33 +47,31 @@ const options = {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: props.xAxisData data: props.xAxisData,
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
}, },
series: [ series: [
{ {
data: props.seriesData, data: props.seriesData,
type: 'bar' type: 'bar',
} },
], ],
...props.config ...props.config,
} }
let chart:EChartsType let chart: EChartsType
const initChart = () => { const initChart = () => {
const chart = echarts.init(chartsRef.value) const chart = echarts.init(chartsRef.value)
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(() => { onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
chart && chart.resize() chart && chart.resize()
}) })
}) })
</script> </script>
<style> <style></style>
</style>

71
src/views/charts/components/complex/bar/index.vue
View File

@ -1,33 +1,33 @@
<template> <template>
<div class="item-charts"> <div class="item-charts">
<bar-charts width="100%" height="100%" :config="lineConfig"/> <bar-charts width="100%" height="100%" :config="lineConfig" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import BarCharts from './components/bar.vue' import BarCharts from './components/bar.vue'
import { reactive } from 'vue' import { reactive } from 'vue'
const data = [154, 230, 224, 218, 135, 147, 260] const data = [154, 230, 224, 218, 135, 147, 260]
const color = ['#fa796f','#54c1fb','#ca6cd4','#59dcc1','#09a4ea','#e98f4d','#ea8e49'] const color = ['#fa796f', '#54c1fb', '#ca6cd4', '#59dcc1', '#09a4ea', '#e98f4d', '#ea8e49']
const dataOptions = [] const dataOptions = []
data.forEach((item,index) => { data.forEach((item, index) => {
let obj = { let obj = {
value: data[index], value: data[index],
itemStyle: { itemStyle: {
color: color[index] color: color[index],
} },
} }
dataOptions.push(obj) dataOptions.push(obj)
}) })
const lineConfig = reactive({ const lineConfig = reactive({
color, color,
grid: { grid: {
top: '10%', top: '10%',
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '10%', bottom: '10%',
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -41,44 +41,47 @@ const lineConfig = reactive({
<div class="title" >完成占比${name[0].value}</div> <div class="title" >完成占比${name[0].value}</div>
</div>` </div>`
return tipHtml return tipHtml
} },
}, },
yAxis: { yAxis: {
// 设置坐标轴的 文字样式 // 设置坐标轴的 文字样式
axisLabel: { axisLabel: {
color: '#bbdaff', color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。 margin: 20, // 刻度标签与轴线之间的距离。
}, },
axisTick: { // 取消坐标轴刻度线 axisTick: {
show: false // 取消坐标轴刻度线
show: false,
}, },
// 坐标轴轴线相关设置。 // 坐标轴轴线相关设置。
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#2d5baf' color: '#2d5baf',
} },
} },
}, },
xAxis: { xAxis: {
splitLine: { splitLine: {
show: false show: false,
}, },
// 坐标轴轴线相关设置。 // 坐标轴轴线相关设置。
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#2d5baf' color: '#2d5baf',
} },
}, },
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { // 设置坐标轴的 文字样式 axisLabel: {
// 设置坐标轴的 文字样式
color: '#bbdaff', color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。 margin: 20, // 刻度标签与轴线之间的距离。
}, },
axisTick: { // 取消坐标轴刻度线 axisTick: {
show: false // 取消坐标轴刻度线
} show: false,
},
}, },
series: [ series: [
{ {
@ -86,17 +89,15 @@ const lineConfig = reactive({
type: 'bar', type: 'bar',
barMaxWidth: 18, barMaxWidth: 18,
markLine: { markLine: {
silent: true silent: true,
}, },
},
],
}] })
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item-charts{ .item-charts {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

168
src/views/charts/components/complex/bullish.vue
View File

File diff suppressed because one or more lines are too long

58
src/views/charts/components/complex/line.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" ref="chartsRef"/> <div :id="id" :class="className" :style="{ height: height, width: width }" ref="chartsRef" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core' import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement|null>() const chartsRef = ref<HTMLElement | null>()
const props = defineProps({ const props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
xAxisData: { xAxisData: {
type: Array, type: Array,
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, },
config: { config: {
type: Object, type: Object,
default: () => {} default: () => {},
}, },
seriesData: { seriesData: {
type: Array, type: Array,
default: () => [150, 230, 224, 218, 135, 147, 260] default: () => [150, 230, 224, 218, 135, 147, 260],
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
@ -47,33 +47,31 @@ const options = {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: props.xAxisData data: props.xAxisData,
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
}, },
series: [ series: [
{ {
data: props.seriesData, data: props.seriesData,
type: 'line' type: 'line',
} },
], ],
...props.config ...props.config,
} }
let chart:EChartsType let chart: EChartsType
const initChart = () => { const initChart = () => {
const chart = echarts.init(chartsRef.value) const chart = echarts.init(chartsRef.value)
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(() => { onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
chart && chart.resize() chart && chart.resize()
}) })
}) })
</script> </script>
<style> <style></style>
</style>

58
src/views/charts/components/complex/line/components/line.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" ref="chartsRef"/> <div :id="id" :class="className" :style="{ height: height, width: width }" ref="chartsRef" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core' import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement|null>() const chartsRef = ref<HTMLElement | null>()
const props = defineProps({ const props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
xAxisData: { xAxisData: {
type: Array, type: Array,
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, },
config: { config: {
type: Object, type: Object,
default: () => {} default: () => {},
}, },
seriesData: { seriesData: {
type: Array, type: Array,
default: () => [150, 230, 224, 218, 135, 147, 260] default: () => [150, 230, 224, 218, 135, 147, 260],
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
@ -47,33 +47,31 @@ const options = {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: props.xAxisData data: props.xAxisData,
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
}, },
series: [ series: [
{ {
data: props.seriesData, data: props.seriesData,
type: 'line' type: 'line',
} },
], ],
...props.config ...props.config,
} }
let chart:EChartsType let chart: EChartsType
const initChart = () => { const initChart = () => {
const chart = echarts.init(chartsRef.value) const chart = echarts.init(chartsRef.value)
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(() => { onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
chart && chart.resize() chart && chart.resize()
}) })
}) })
</script> </script>
<style> <style></style>
</style>

59
src/views/charts/components/complex/line/index.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div class="item-charts"> <div class="item-charts">
<line-charts width="100%" height="100%" :config="lineConfig"/> <line-charts width="100%" height="100%" :config="lineConfig" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import LineCharts from './components/line.vue' import LineCharts from './components/line.vue'
import { reactive } from 'vue' import { reactive } from 'vue'
const lineConfig = reactive({ const lineConfig = reactive({
grid: { grid: {
top: '10%', top: '10%',
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '10%', bottom: '10%',
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -27,41 +27,43 @@ const lineConfig = reactive({
<div class="title" >完成占比${name[0].data}</div> <div class="title" >完成占比${name[0].data}</div>
</div>` </div>`
return tipHtml return tipHtml
} },
}, },
yAxis: { yAxis: {
// 设置坐标轴的 文字样式 // 设置坐标轴的 文字样式
axisLabel: { axisLabel: {
color: '#bbdaff', color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。 margin: 20, // 刻度标签与轴线之间的距离。
}, },
// 坐标轴轴线相关设置。 // 坐标轴轴线相关设置。
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#2d5baf' color: '#2d5baf',
} },
} },
}, },
xAxis: { xAxis: {
splitLine: { splitLine: {
show: false show: false,
}, },
// 坐标轴轴线相关设置。 // 坐标轴轴线相关设置。
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#2d5baf' color: '#2d5baf',
} },
}, },
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { // 设置坐标轴的 文字样式 axisLabel: {
// 设置坐标轴的 文字样式
color: '#bbdaff', color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。 margin: 20, // 刻度标签与轴线之间的距离。
}, },
boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始， boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
axisTick: { // 取消坐标轴刻度线 axisTick: {
show: false // 取消坐标轴刻度线
} show: false,
},
}, },
series: [ series: [
{ {
@ -71,7 +73,7 @@ const lineConfig = reactive({
symbolSize: 12, // 拐点圆的大小 symbolSize: 12, // 拐点圆的大小
symbol: 'circle', symbol: 'circle',
markLine: { markLine: {
silent: true silent: true,
}, },
itemStyle: { itemStyle: {
normal: { normal: {
@ -79,18 +81,17 @@ const lineConfig = reactive({
lineStyle: { lineStyle: {
width: 3, width: 3,
color: '#920783', color: '#920783',
type: 'solid' // 'dotted'虚线 'solid'实线 type: 'solid', // 'dotted'虚线 'solid'实线
} },
} },
} },
},
}] ],
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item-charts{ .item-charts {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

51
src/views/charts/components/complex/liquidFill.vue
View File

@ -1,41 +1,41 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidFill.js'
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
backgroundColor: '#0F224C', //背景色 backgroundColor: '#0F224C', //背景色
series: [ series: [
@ -44,7 +44,7 @@ const options = {
radius: '80%', //显示比例 radius: '80%', //显示比例
center: ['50%', '50%'], //中心点 center: ['50%', '50%'], //中心点
amplitude: 20, //水波振幅 amplitude: 20, //水波振幅
data: [0.5,.5,.5], // data个数代表波浪数 data: [0.5, 0.5, 0.5], // data个数代表波浪数
color: [ color: [
{ {
type: 'linear', type: 'linear',
@ -89,18 +89,17 @@ const options = {
}, },
}, },
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

168
src/views/charts/components/complex/painting.vue
View File

@ -1,63 +1,63 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff'] const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
const indicator = [ const indicator = [
{ {
text: '文明村', text: '文明村',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '卫生村', text: '卫生村',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '森林村庄', text: '森林村庄',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '全面小康', text: '全面小康',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '景区村庄', text: '景区村庄',
min: 0, min: 0,
max: 100 max: 100,
} },
] ]
const Data = [80,61,70,86,77] const Data = [80, 61, 70, 86, 77]
function setData() { function setData() {
return [ return [
{ {
value: Data, value: Data,
@ -66,11 +66,11 @@ function setData() {
lineStyle: { lineStyle: {
color: '#4BFFFC', color: '#4BFFFC',
shadowColor: '#4BFFFC', shadowColor: '#4BFFFC',
shadowBlur: 5 shadowBlur: 5,
}, },
shadowColor: '#4BFFFC', shadowColor: '#4BFFFC',
shadowBlur: 5 shadowBlur: 5,
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
@ -83,23 +83,23 @@ function setData() {
colorStops: [ colorStops: [
{ {
offset: 1, offset: 1,
color: '#4BFFFC' color: '#4BFFFC',
}, },
{ {
offset: 0, offset: 0,
color: 'rgba(0,0,0,0)' color: 'rgba(0,0,0,0)',
} },
], ],
globalCoord: false globalCoord: false,
},
opacity: 0.8, // 区域透明度
},
},
}, },
opacity: 0.8 // 区域透明度
}
}
}
] ]
} }
function setgauge(i) { function setgauge(i) {
return { return {
type: 'gauge', type: 'gauge',
detail: false, detail: false,
@ -109,26 +109,26 @@ function setgauge(i) {
startAngle: 90 + 72 * i + 18, //开始刻度的角度 startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度 endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#66ccff', color: '#66ccff',
width: 1 width: 1,
}, },
length: 6, length: 6,
splitNumber: 1 splitNumber: 1,
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
},
} }
} }
} function setSpot() {
function setSpot() {
var scatterData = [] var scatterData = []
Data.map((o, i) => { Data.map((o, i) => {
scatterData.push({ scatterData.push({
@ -139,19 +139,19 @@ function setSpot() {
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
shadowColor: color[i], shadowColor: color[i],
shadowBlur: 8 shadowBlur: 8,
} },
} },
}) })
}) })
return scatterData return scatterData
} }
const options = { const options = {
backgroundColor: '#0E1327', backgroundColor: '#0E1327',
polar: { polar: {
center: ['50%', '50%'], center: ['50%', '50%'],
radius: '60%' radius: '60%',
}, },
radar: { radar: {
shape: 'circle', shape: 'circle',
@ -161,7 +161,7 @@ const options = {
axisName: { axisName: {
color: '#b7e9fd', color: '#b7e9fd',
fontSize: 13, fontSize: 13,
padding: -20 padding: -20,
}, },
nameGap: 45, nameGap: 45,
splitNumber: 4, splitNumber: 4,
@ -170,21 +170,21 @@ const options = {
show: true, show: true,
areaStyle: { areaStyle: {
// 分隔区域的样式设置。 // 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)'] color: ['rgba(27, 50, 66, 0.4)'],
} },
}, },
axisLine: { axisLine: {
//指向外圈文本的分隔线样式 //指向外圈文本的分隔线样式
lineStyle: { lineStyle: {
color: '#5aa3d0' color: '#5aa3d0',
} },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色 color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽 width: 2, // 分隔线线宽
} },
} },
}, },
angleAxis: { angleAxis: {
type: 'category', type: 'category',
@ -193,40 +193,40 @@ const options = {
boundaryGap: false, boundaryGap: false,
clockwise: false, clockwise: false,
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
radiusAxis: { radiusAxis: {
min: 0, min: 0,
max: 100, max: 100,
interval: 25, interval: 25,
splitLine: { splitLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
//指向外圈文本的分隔线样式 //指向外圈文本的分隔线样式
lineStyle: { lineStyle: {
color: '#5aa3d0' color: '#5aa3d0',
} },
}, },
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: '#5aa3d0', color: '#5aa3d0',
align: 'left', align: 'left',
margin: -5 margin: -5,
} },
}, },
series: [ series: [
setgauge(0), setgauge(0),
@ -238,34 +238,32 @@ const options = {
type: 'radar', type: 'radar',
silent: true, silent: true,
lineStyle: { lineStyle: {
color: '#66ffff' color: '#66ffff',
}, },
areaStyle: { areaStyle: {
color: 'rgba(102, 255, 255, 0.31)' color: 'rgba(102, 255, 255, 0.31)',
}, },
data: setData() data: setData(),
}, },
{ {
type: 'scatter', type: 'scatter',
coordinateSystem: 'polar', coordinateSystem: 'polar',
symbolSize: 20, symbolSize: 20,
data: setSpot() data: setSpot(),
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () {
window.addEventListener('resize',function (){ chart && chart.resize()
chart&&chart.resize() })
}) })
})
</script> </script>

63
src/views/charts/components/complex/pie.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']; let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
let echartData = [ let echartData = [
{ {
name: '设备1', name: '设备1',
value: '3720', value: '3720',
@ -46,13 +46,13 @@ let echartData = [
name: '设备4', name: '设备4',
value: '1420', value: '1420',
}, },
]; ]
let formatNumber = function (num) { let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g; let reg = /(?=(\B)(\d{3})+$)/g
return num.toString().replace(reg, ','); return num.toString().replace(reg, ',')
}; }
const options = { const options = {
backgroundColor: '#364686', backgroundColor: '#364686',
color: color, color: color,
title: [ title: [
@ -123,7 +123,9 @@ const options = {
label: { label: {
normal: { normal: {
formatter: (params) => { formatter: (params) => {
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'; return (
'{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
)
}, },
padding: [0, -70, 30, -70], padding: [0, -70, 30, -70],
rich: { rich: {
@ -183,18 +185,17 @@ const options = {
], ],
}, },
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

46
src/views/charts/components/complex/progress.vue
View File

@ -1,36 +1,35 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = {
const options = {
title: [ title: [
{ {
text: '已完成', text: '已完成',
@ -132,18 +131,17 @@ const options = {
data: [100], data: [100],
}, },
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

458
src/views/charts/components/complex/rotate.vue
View File

@ -1,85 +1,104 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
var data = [],data2=[]; var data = [],
var trafficWay = [ data2 = []
var trafficWay = [
{ {
name: '病假', name: '病假',
value: 20 value: 20,
},{ },
{
name: '事假', name: '事假',
value: 1 value: 1,
},{ },
{
name: '婚假', name: '婚假',
value: 30 value: 30,
},{ },
{
name: '丧假', name: '丧假',
value: 40 value: 40,
},{ },
{
name: '年休假', name: '年休假',
value: 40 value: 40,
}]; },
var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF'] ]
for (var i = 0; i < trafficWay.length; i++) { var color = [
data.push({ '#2A8BFD',
'#BAFF7F',
'#00FAC1',
'#00CAFF',
'#FDE056',
'#4ED33C',
'#FF8A26',
'#FF5252',
'#9689FF',
'#CB00FF',
]
for (var i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value, value: trafficWay[i].value,
name: trafficWay[i].name, name: trafficWay[i].name,
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 8, borderWidth: 8,
shadowBlur: 20, shadowBlur: 20,
borderRadius:20, borderRadius: 20,
borderColor:color[i], borderColor: color[i],
shadowColor: color[i] shadowColor: color[i],
} },
} },
}, { },
{
value: 5, value: 5,
name: '', name: '',
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false show: false,
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
color: 'rgba(0, 0, 0, 0)', color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)', borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0 borderWidth: 0,
},
} },
} },
}); )
data2.push({ data2.push(
{
value: trafficWay[i].value, value: trafficWay[i].value,
name: trafficWay[i].name, name: trafficWay[i].name,
}, },
@ -89,233 +108,240 @@ for (var i = 0; i < trafficWay.length; i++) {
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false show: false,
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
color: 'rgba(0, 0, 0, 0)', color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)', borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0, borderWidth: 0,
opacity:0.2 opacity: 0.2,
},
} },
} },
}
) )
}
let angle = 0;//角度，用来做简单的动画效果的
const option = {
backgroundColor:"#061740",
color : color,
legend:{
right:'10%',
top:'10%',
icon:'rect',
itemWidth:15,
itemHeight:15,
textStyle:{
color:'#ffffff',
} }
let angle = 0 //角度，用来做简单的动画效果的
const option = {
backgroundColor: '#061740',
color: color,
legend: {
right: '10%',
top: '10%',
icon: 'rect',
itemWidth: 15,
itemHeight: 15,
textStyle: {
color: '#ffffff',
},
}, },
series: [ series: [
{//外线1 {
name: "ring5", //外线1
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: (0+angle) * Math.PI / 180, startAngle: ((0 + angle) * Math.PI) / 180,
endAngle: (90+angle) * Math.PI / 180 endAngle: ((90 + angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: '#4EE9E6', stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//内线1 {
name: "ring5", //内线1
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: (180+angle) * Math.PI / 180, startAngle: ((180 + angle) * Math.PI) / 180,
endAngle: (270+angle) * Math.PI / 180 endAngle: ((270 + angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#4EE9E6", stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//外线2 {
name: "ring5", //外线2
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: (270+-angle) * Math.PI / 180, startAngle: ((270 + -angle) * Math.PI) / 180,
endAngle: (40+-angle) * Math.PI / 180 endAngle: ((40 + -angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#4EE9E6", stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//外线2 {
name: "ring5", //外线2
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: (90+-angle) * Math.PI / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: (220+-angle) * Math.PI / 180 endAngle: ((220 + -angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#4EE9E6", stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点1 {
name: "ring5", //绿点1
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
let point = getCirlPoint(x0, y0, r, (90+-angle)) let point = getCirlPoint(x0, y0, r, 90 + -angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点2 {
name: "ring5", //绿点 //绿点2
name: 'ring5', //绿点
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
let point = getCirlPoint(x0, y0, r, (270+-angle)) let point = getCirlPoint(x0, y0, r, 270 + -angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点3 {
name: "ring5", //绿点3
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
let point = getCirlPoint(x0, y0, r, (90+angle)) let point = getCirlPoint(x0, y0, r, 90 + angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点4 {
name: "ring5", //绿点 //绿点4
name: 'ring5', //绿点
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
let point = getCirlPoint(x0, y0, r, (270+angle)) let point = getCirlPoint(x0, y0, r, 270 + angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{ {
name: '', name: '',
@ -323,91 +349,89 @@ const option = {
clockWise: false, clockWise: false,
radius: ['98%', '95%'], radius: ['98%', '95%'],
hoverAnimation: false, hoverAnimation: false,
center:['33.33%','50%'], center: ['33.33%', '50%'],
top:"center", top: 'center',
itemStyle: { itemStyle: {
normal:{ normal: {
label: { label: {
show:false show: false,
}
}
}, },
data:data },
},
data: data,
}, },
{ {
type: 'pie', type: 'pie',
top:"center", top: 'center',
startAngle:90, startAngle: 90,
clockwise:false, clockwise: false,
center:['33.33%','50%'], center: ['33.33%', '50%'],
legendHoverLink:false, legendHoverLink: false,
hoverAnimation: false, hoverAnimation: false,
radius: ['94%', '55%'], radius: ['94%', '55%'],
itemStyle: { itemStyle: {
opacity:0.15 opacity: 0.15,
}, },
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data:data2 data: data2,
}, },
{ {
name: '', name: '',
type: 'pie', type: 'pie',
clockWise: false, clockWise: false,
center:['33.33%','50%'], center: ['33.33%', '50%'],
radius: ['39%', '38%'], radius: ['39%', '38%'],
hoverAnimation: false, hoverAnimation: false,
top:"center", top: 'center',
itemStyle: { itemStyle: {
normal:{ normal: {
label: { label: {
show:false show: false,
}
}
}, },
data:data
}, },
] },
}; data: data,
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) },
function getCirlPoint(x0, y0, r, angle) { ],
let x1 = x0 + r * Math.cos(angle * Math.PI / 180) }
let y1 = y0 + r * Math.sin(angle * Math.PI / 180) //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
return { return {
x: x1, x: x1,
y: y1 y: y1,
}
} }
}
let chart: EChartsType
let chart:EChartsType; const initChart = () => {
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
draw(chart) draw(chart)
return chart return chart
} }
function draw(chart){ function draw(chart) {
angle = angle+3 angle = angle + 3
chart.setOption(option, true) chart.setOption(option, true)
//window.requestAnimationFrame(draw); //window.requestAnimationFrame(draw);
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
setInterval(function() { setInterval(function () {
//用setInterval做动画感觉有问题 //用setInterval做动画感觉有问题
draw(chart) draw(chart)
}, 100); }, 100)
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

401
src/views/charts/components/complex/sankey.vue
View File

@ -1,231 +1,230 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
let datalist = [ let datalist = [
{ {
name: "公共平台" name: '公共平台',
}, },
{ {
name: "系统0000" name: '系统0000',
}, },
{ {
name: "系统0011" name: '系统0011',
}, },
{ {
name: "系统0022" name: '系统0022',
}, },
{ {
name: "系统0033" name: '系统0033',
}, },
{ {
name: "系统0044" name: '系统0044',
}, },
{ {
name: "系统0055" name: '系统0055',
},{
name: "系统11"
}, },
{ {
name: "系统22" name: '系统11',
}, },
{ {
name: "系统33" name: '系统22',
}, },
{ {
name: "系统44" name: '系统33',
}, },
{ {
name: "系统55" name: '系统44',
}, },
{ {
name: "系统66" name: '系统55',
}, },
{ {
name: "系统77" name: '系统66',
}, },
{ {
name: "系统88" name: '系统77',
}, },
{ {
name: "系统99" name: '系统88',
}
];
let linksData = [
{
source: "公共平台",
target: "系统0000",
value: 1044305
}, },
{ {
source: "公共平台", name: '系统99',
target: "系统0011", },
value: 651527 ]
let linksData = [
{
source: '公共平台',
target: '系统0000',
value: 1044305,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0022", target: '系统0011',
value: 651527 value: 651527,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0033", target: '系统0022',
value: 486710 value: 651527,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0044", target: '系统0033',
value: 212670 value: 486710,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0055", target: '系统0044',
value: 210400 value: 212670,
},{
source: "系统0011",
target: "系统11",
value: 645246
}, },
{ {
source: "系统0022", source: '公共平台',
target: "系统22", target: '系统0055',
value: 513275 value: 210400,
}, },
{ {
source: "系统0011", source: '系统0011',
target: "系统33", target: '系统11',
value: 282986 value: 645246,
}, },
{ {
source: "系统0011", source: '系统0022',
target: "系统44", target: '系统22',
value: 118655 value: 513275,
}, },
{ {
source: "系统0022", source: '系统0011',
target: "系统55", target: '系统33',
value: 105989 value: 282986,
}, },
{ {
source: "系统0022", source: '系统0011',
target: "系统66", target: '系统44',
value: 95100 value: 118655,
}, },
{ {
source: "系统0033", source: '系统0022',
target: "系统77", target: '系统55',
value: 87796 value: 105989,
}, },
{ {
source: "系统0044", source: '系统0022',
target: "系统88", target: '系统66',
value: 47658 value: 95100,
}, },
{ {
source: "系统0055", source: '系统0033',
target: "系统99", target: '系统77',
value: 243660 value: 87796,
}, },
{
source: '系统0044',
]; target: '系统88',
let Color = [ value: 47658,
"#61FEFF", },
"#937FE6", {
"#2B56D3", source: '系统0055',
"#87E7AA", target: '系统99',
"#937FE6", value: 243660,
"#FF9B97", },
"#8f23f5", ]
"#0576ea", let Color = [
"#2cb8cf", '#61FEFF',
"#8A7EE0", '#937FE6',
"#2cb8cf", '#2B56D3',
"#4e70f0", '#87E7AA',
"#1fa3de", '#937FE6',
"#bbc951", '#FF9B97',
"#FFC14B", '#8f23f5',
"#b785a6", '#0576ea',
'#2cb8cf',
]; let Color1 = [ '#8A7EE0',
"#04E0F3", '#2cb8cf',
"#682EFC", '#4e70f0',
"#35A7FE", '#1fa3de',
"#0DC09F", '#bbc951',
"#682EFC", '#FFC14B',
"#ED6663", '#b785a6',
"#8f23f5", ]
"#0576ea", let Color1 = [
"#2cb8cf", '#04E0F3',
"#8A7EE0", '#682EFC',
"#2cb8cf", '#35A7FE',
"#4e70f0", '#0DC09F',
"#1fa3de", '#682EFC',
"#bbc951", '#ED6663',
"#FFC14B", '#8f23f5',
"#b785a6", '#0576ea',
'#2cb8cf',
]; '#8A7EE0',
let sourceLabel = [ '#2cb8cf',
"right", '#4e70f0',
"left", '#1fa3de',
"left", '#bbc951',
"left", '#FFC14B',
"left", '#b785a6',
"left", ]
"left", let sourceLabel = [
"left", 'right',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left" 'left',
]; 'left',
let itemStyleColor = []; 'left',
let labelSource = []; 'left',
for (let i = 0; i < datalist.length; i++) { 'left',
'left',
'left',
'left',
]
let itemStyleColor = []
let labelSource = []
for (let i = 0; i < datalist.length; i++) {
datalist[i].label = { datalist[i].label = {
normal: { normal: {
position: sourceLabel[i] position: sourceLabel[i],
},
} }
}; labelSource.push(sourceLabel[i])
labelSource.push(sourceLabel[i]); }
} for (let d = 0; d < datalist.length; d++) {
for (let d = 0; d < datalist.length; d++) {
datalist[d].itemStyle = { datalist[d].itemStyle = {
normal: { normal: {
// color: Color[d] // color: Color[d]
color: { color: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 1, y: 1,
x2: 0, x2: 0,
@ -242,57 +241,59 @@ for (let d = 0; d < datalist.length; d++) {
], ],
global: false, // 缺省为 false global: false, // 缺省为 false
}, },
},
}
itemStyleColor.push(datalist[d])
} }
};
itemStyleColor.push(datalist[d]);
}
const options = { const options = {
backgroundColor: "#031d7a", backgroundColor: '#031d7a',
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
triggerOn: "mousemove", triggerOn: 'mousemove',
formatter: function(params) { formatter: function (params) {
if (params.name == "公共平台") { if (params.name == '公共平台') {
return " 公共平台 " return ' 公共平台 '
} else { } else {
let value = params.data.value; let value = params.data.value
if (!value && value !== 0) return 0; if (!value && value !== 0) return 0
let str = value.toString(); let str = value.toString()
let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
if (params.data.source == "公共平台") { if (params.data.source == '公共平台') {
return params.data.target + " : " + str.replace(reg, "$1,"); return params.data.target + ' : ' + str.replace(reg, '$1,')
} else { } else {
return params.data.source + " : " + str.replace(reg, "$1,"); return params.data.source + ' : ' + str.replace(reg, '$1,')
}
} }
} }
}, },
series: [{ },
type: "sankey", series: [
layout: "none", {
top: "4%", type: 'sankey',
bottom: "12%", layout: 'none',
left: "20", top: '4%',
right: "20", bottom: '12%',
left: '20',
right: '20',
nodeGap: 15, nodeGap: 15,
nodeWidth: 25, nodeWidth: 25,
focusNodeAdjacency: "allEdges", focusNodeAdjacency: 'allEdges',
data: itemStyleColor, data: itemStyleColor,
links: linksData, links: linksData,
label: { label: {
normal: { normal: {
color: "#fff", color: '#fff',
fontSize: 14, fontSize: 14,
formatter: function(params) { formatter: function (params) {
if (params.data.name == '公共平台') { if (params.data.name == '公共平台') {
let strs = params.data.name.split(''); //字符串数组 let strs = params.data.name.split('') //字符串数组
let str = '' let str = ''
for (let i = 0, s; s = strs[i++];) { //遍历字符串数组 for (let i = 0, s; (s = strs[i++]); ) {
str += s; //遍历字符串数组
if (!(i % 1)) str += '\n'; //按需要求余 str += s
if (!(i % 1)) str += '\n' //按需要求余
} }
return "{white|" + str + "}" return '{white|' + str + '}'
} else { } else {
return params.data.name return params.data.name
} }
@ -301,37 +302,37 @@ const options = {
white: { white: {
fontSize: 16, fontSize: 16,
lineHeight: 30, lineHeight: 30,
padding: [0, 0, 0, -26] padding: [0, 0, 0, -26],
} },
} },
} },
}, },
lineStyle: { lineStyle: {
normal: { normal: {
opacity: 0.4, opacity: 0.4,
color: "source", color: 'source',
curveness: 0.5 curveness: 0.5,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 1, borderWidth: 1,
borderColor: "transparent" borderColor: 'transparent',
},
},
},
],
} }
} let chart: EChartsType
}] const initChart = () => {
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

40
src/views/charts/components/js/data.js
View File

@ -1,40 +1,38 @@
export const cityIconData = [ export const cityIconData = [
{ {
adcode: 650000, adcode: 650000,
name: "新疆维吾尔自治区", name: '新疆维吾尔自治区',
value:[88.999903,43.607078] value: [88.999903, 43.607078],
},{
adcode: 150000,
name: "内蒙古自治区",
value:[119.24787,42.205741]
}, },
,{ {
adcode: 150000, adcode: 150000,
name: "内蒙古自治区", name: '内蒙古自治区',
value:[110.627161,41.16628] value: [119.24787, 42.205741],
},
,
{
adcode: 150000,
name: '内蒙古自治区',
value: [110.627161, 41.16628],
}, },
{ {
adcode: 540000, adcode: 540000,
name: "西藏自治区", name: '西藏自治区',
value:[89.483714,30.251951] value: [89.483714, 30.251951],
}, },
{ {
adcode: 630000, adcode: 630000,
name: "青海省", name: '青海省',
value:[102.064693,37.084008] value: [102.064693, 37.084008],
}, },
{ {
adcode: 530000, adcode: 530000,
name: "云南省", name: '云南省',
value:[102.187665,25.083688] value: [102.187665, 25.083688],
}, },
{ {
adcode: 610000, adcode: 610000,
name: "陕西省", name: '陕西省',
value:[109.20663,35.018625] value: [109.20663, 35.018625],
}, },
] ]

232
src/views/charts/components/map/bmap.min.js vendored
View File

@ -1,22 +1,214 @@
/* /*
* Licensed to the Apache Software Foundation (ASF) under one * Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file * or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information * distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file * regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the * to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance * "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at * with the License. You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, * Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an * software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the * KIND, either express or implied. See the License for the
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
!(function (t, e) {
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],e):e(t.bmap={},t.echarts)}(this,function(t,e){"use strict";function o(t,e){this._bmap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e,this._projection=new BMap.MercatorProjection}function n(t,o){return o=o||[0,0],e.util.map([0,1],function(e){var n=o[e],i=t[e]/2,a=[],r=[];return a[e]=n-i,r[e]=n+i,a[1-e]=r[1-e]=o[1-e],Math.abs(this.dataToPoint(a)[e]-this.dataToPoint(r)[e])},this)}function i(){function t(t){this._root=t}return t.prototype=new BMap.Overlay,t.prototype.initialize=function(t){return t.getPanes().labelPane.appendChild(this._root),this._root},t.prototype.draw=function(){},t}function a(t,e){return t&&e&&t[0]===e[0]&&t[1]===e[1]}o.prototype.dimensions=["lng","lat"],o.prototype.setZoom=function(t){this._zoom=t},o.prototype.setCenter=function(t){this._center=this._projection.lngLatToPoint(new BMap.Point(t[0],t[1]))},o.prototype.setMapOffset=function(t){this._mapOffset=t},o.prototype.getBMap=function(){return this._bmap},o.prototype.dataToPoint=function(t){var e=new BMap.Point(t[0],t[1]),o=this._bmap.pointToOverlayPixel(e),n=this._mapOffset;return[o.x-n[0],o.y-n[1]]},o.prototype.pointToData=function(t){var e=this._mapOffset;return[(t=this._bmap.overlayPixelToPoint({x:t[0]+e[0],y:t[1]+e[1]})).lng,t.lat]},o.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},o.prototype.getRoamTransform=function(){return e.matrix.create()},o.prototype.prepareCustoms=function(t){var o=this.getViewRect();return{coordSys:{type:"bmap",x:o.x,y:o.y,width:o.width,height:o.height},api:{coord:e.util.bind(this.dataToPoint,this),size:e.util.bind(n,this)}}};var r;o.dimensions=o.prototype.dimensions,o.create=function(t,e){var n,a=e.getDom();t.eachComponent("bmap",function(t){var p=e.getZr().painter,s=p.getViewportRoot();if("undefined"==typeof BMap)throw new Error("BMap api is not loaded");if(r=r||i(),n)throw new Error("Only one bmap component can exist");if(!t.__bmap){var m=a.querySelector(".ec-extension-bmap");m&&(s.style.left="0px",s.style.top="0px",a.removeChild(m)),(m=document.createElement("div")).style.cssText="width:100%;height:100%",m.classList.add("ec-extension-bmap"),a.appendChild(m);var c=t.__bmap=new BMap.Map(m),d=new r(s);c.addOverlay(d),p.getViewportRootOffset=function(){return{offsetLeft:0,offsetTop:0}}}var c=t.__bmap,f=t.get("center"),l=t.get("zoom");if(f&&l){var h=new BMap.Point(f[0],f[1]);c.centerAndZoom(h,l)}(n=new o(c,e)).setMapOffset(t.__mapOffset||[0,0]),n.setZoom(l),n.setCenter(f),t.coordinateSystem=n}),t.eachSeries(function(t){"bmap"===t.get("coordinateSystem")&&(t.coordinateSystem=n)})},e.extendComponentModel({type:"bmap",getBMap:function(){return this.__bmap},setCenterAndZoom:function(t,e){this.option.center=t,this.option.zoom=e},centerOrZoomChanged:function(t,e){var o=this.option;return!(a(t,o.center)&&e===o.zoom)},defaultOption:{center:[104.114129,37.550339],zoom:5,mapStyle:{},roam:!1}}),e.extendComponentView({type:"bmap",render:function(t,e,o){function n(){i||o.dispatchAction({type:"bmapRoam"})}var i=!0,a=t.getBMap(),r=o.getZr().painter.getViewportRoot(),p=t.coordinateSystem,s=function(e,n){if(!i){var a=r.parentNode.parentNode.parentNode,s=[-parseInt(a.style.left,10)||0,-parseInt(a.style.top,10)||0];r.style.left=s[0]+"px",r.style.top=s[1]+"px",p.setMapOffset(s),t.__mapOffset=s,o.dispatchAction({type:"bmapRoam"})}};a.removeEventListener("moving",this._oldMoveHandler),a.removeEventListener("zoomend",this._oldZoomEndHandler),a.addEventListener("moving",s),a.addEventListener("zoomend",n),this._oldMoveHandler=s,this._oldZoomEndHandler=n;var m=t.get("roam");m&&"scale"!==m?a.enableDragging():a.disableDragging(),m&&"move"!==m?(a.enableScrollWheelZoom(),a.enableDoubleClickZoom(),a.enablePinchToZoom()):(a.disableScrollWheelZoom(),a.disableDoubleClickZoom(),a.disablePinchToZoom());var c=t.__mapStyle,d=t.get("mapStyle")||{},f=JSON.stringify(d);JSON.stringify(c)!==f&&(Object.keys(d).length&&a.setMapStyle(d),t.__mapStyle=JSON.parse(f)),i=!1}}),e.registerCoordinateSystem("bmap",o),e.registerAction({type:"bmapRoam",event:"bmapRoam",update:"updateLayout"},function(t,e){e.eachComponent("bmap",function(t){var e=t.getBMap(),o=e.getCenter();t.setCenterAndZoom([o.lng,o.lat],e.getZoom())})});t.version="1.0.0"}); 'object' == typeof exports && 'undefined' != typeof module
? e(exports, require('echarts'))
: 'function' == typeof define && define.amd
? define(['exports', 'echarts'], e)
: e((t.bmap = {}), t.echarts)
})(this, function (t, e) {
'use strict'
function o(t, e) {
;(this._bmap = t),
(this.dimensions = ['lng', 'lat']),
(this._mapOffset = [0, 0]),
(this._api = e),
(this._projection = new BMap.MercatorProjection())
}
function n(t, o) {
return (
(o = o || [0, 0]),
e.util.map(
[0, 1],
function (e) {
var n = o[e],
i = t[e] / 2,
a = [],
r = []
return (
(a[e] = n - i),
(r[e] = n + i),
(a[1 - e] = r[1 - e] = o[1 - e]),
Math.abs(this.dataToPoint(a)[e] - this.dataToPoint(r)[e])
)
},
this,
)
)
}
function i() {
function t(t) {
this._root = t
}
return (
(t.prototype = new BMap.Overlay()),
(t.prototype.initialize = function (t) {
return t.getPanes().labelPane.appendChild(this._root), this._root
}),
(t.prototype.draw = function () {}),
t
)
}
function a(t, e) {
return t && e && t[0] === e[0] && t[1] === e[1]
}
;(o.prototype.dimensions = ['lng', 'lat']),
(o.prototype.setZoom = function (t) {
this._zoom = t
}),
(o.prototype.setCenter = function (t) {
this._center = this._projection.lngLatToPoint(new BMap.Point(t[0], t[1]))
}),
(o.prototype.setMapOffset = function (t) {
this._mapOffset = t
}),
(o.prototype.getBMap = function () {
return this._bmap
}),
(o.prototype.dataToPoint = function (t) {
var e = new BMap.Point(t[0], t[1]),
o = this._bmap.pointToOverlayPixel(e),
n = this._mapOffset
return [o.x - n[0], o.y - n[1]]
}),
(o.prototype.pointToData = function (t) {
var e = this._mapOffset
return [(t = this._bmap.overlayPixelToPoint({ x: t[0] + e[0], y: t[1] + e[1] })).lng, t.lat]
}),
(o.prototype.getViewRect = function () {
var t = this._api
return new e.graphic.BoundingRect(0, 0, t.getWidth(), t.getHeight())
}),
(o.prototype.getRoamTransform = function () {
return e.matrix.create()
}),
(o.prototype.prepareCustoms = function (t) {
var o = this.getViewRect()
return {
coordSys: { type: 'bmap', x: o.x, y: o.y, width: o.width, height: o.height },
api: { coord: e.util.bind(this.dataToPoint, this), size: e.util.bind(n, this) },
}
})
var r
;(o.dimensions = o.prototype.dimensions),
(o.create = function (t, e) {
var n,
a = e.getDom()
t.eachComponent('bmap', function (t) {
var p = e.getZr().painter,
s = p.getViewportRoot()
if ('undefined' == typeof BMap) throw new Error('BMap api is not loaded')
if (((r = r || i()), n)) throw new Error('Only one bmap component can exist')
if (!t.__bmap) {
var m = a.querySelector('.ec-extension-bmap')
m && ((s.style.left = '0px'), (s.style.top = '0px'), a.removeChild(m)),
((m = document.createElement('div')).style.cssText = 'width:100%;height:100%'),
m.classList.add('ec-extension-bmap'),
a.appendChild(m)
var c = (t.__bmap = new BMap.Map(m)),
d = new r(s)
c.addOverlay(d),
(p.getViewportRootOffset = function () {
return { offsetLeft: 0, offsetTop: 0 }
})
}
var c = t.__bmap,
f = t.get('center'),
l = t.get('zoom')
if (f && l) {
var h = new BMap.Point(f[0], f[1])
c.centerAndZoom(h, l)
}
;(n = new o(c, e)).setMapOffset(t.__mapOffset || [0, 0]),
n.setZoom(l),
n.setCenter(f),
(t.coordinateSystem = n)
}),
t.eachSeries(function (t) {
'bmap' === t.get('coordinateSystem') && (t.coordinateSystem = n)
})
}),
e.extendComponentModel({
type: 'bmap',
getBMap: function () {
return this.__bmap
},
setCenterAndZoom: function (t, e) {
;(this.option.center = t), (this.option.zoom = e)
},
centerOrZoomChanged: function (t, e) {
var o = this.option
return !(a(t, o.center) && e === o.zoom)
},
defaultOption: { center: [104.114129, 37.550339], zoom: 5, mapStyle: {}, roam: !1 },
}),
e.extendComponentView({
type: 'bmap',
render: function (t, e, o) {
function n() {
i || o.dispatchAction({ type: 'bmapRoam' })
}
var i = !0,
a = t.getBMap(),
r = o.getZr().painter.getViewportRoot(),
p = t.coordinateSystem,
s = function (e, n) {
if (!i) {
var a = r.parentNode.parentNode.parentNode,
s = [-parseInt(a.style.left, 10) || 0, -parseInt(a.style.top, 10) || 0]
;(r.style.left = s[0] + 'px'),
(r.style.top = s[1] + 'px'),
p.setMapOffset(s),
(t.__mapOffset = s),
o.dispatchAction({ type: 'bmapRoam' })
}
}
a.removeEventListener('moving', this._oldMoveHandler),
a.removeEventListener('zoomend', this._oldZoomEndHandler),
a.addEventListener('moving', s),
a.addEventListener('zoomend', n),
(this._oldMoveHandler = s),
(this._oldZoomEndHandler = n)
var m = t.get('roam')
m && 'scale' !== m ? a.enableDragging() : a.disableDragging(),
m && 'move' !== m
? (a.enableScrollWheelZoom(), a.enableDoubleClickZoom(), a.enablePinchToZoom())
: (a.disableScrollWheelZoom(), a.disableDoubleClickZoom(), a.disablePinchToZoom())
var c = t.__mapStyle,
d = t.get('mapStyle') || {},
f = JSON.stringify(d)
JSON.stringify(c) !== f &&
(Object.keys(d).length && a.setMapStyle(d), (t.__mapStyle = JSON.parse(f))),
(i = !1)
},
}),
e.registerCoordinateSystem('bmap', o),
e.registerAction(
{ type: 'bmapRoam', event: 'bmapRoam', update: 'updateLayout' },
function (t, e) {
e.eachComponent('bmap', function (t) {
var e = t.getBMap(),
o = e.getCenter()
t.setCenterAndZoom([o.lng, o.lat], e.getZoom())
})
},
)
t.version = '1.0.0'
})

753
src/views/charts/components/map/china.js
View File

File diff suppressed because one or more lines are too long

315
src/views/charts/components/map/index.vue
View File

@ -1,170 +1,167 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidFill.js'
import './china.js' import './china.js'
import './bmap.min.js' import './bmap.min.js'
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
//城市经纬度 //城市经纬度
var geoCoordMap = { var geoCoordMap = {
"北京": [116.46, 39.92], 北京: [116.46, 39.92],
"成都": [104.06, 30.67], 成都: [104.06, 30.67],
"杭州": [120.19, 30.26], 杭州: [120.19, 30.26],
"济南": [117, 36.65], 济南: [117, 36.65],
"福州": [119.3, 26.08], 福州: [119.3, 26.08],
"上海": [121.48, 31.22], 上海: [121.48, 31.22],
"重庆": [106.54, 29.59], 重庆: [106.54, 29.59],
"深圳": [114.07, 22.62], 深圳: [114.07, 22.62],
"宁波": [121.56, 29.86], 宁波: [121.56, 29.86],
"南昌": [115.89, 28.68], 南昌: [115.89, 28.68],
"广州": [113.23, 23.16], 广州: [113.23, 23.16],
"厦门": [118.1, 24.46], 厦门: [118.1, 24.46],
"太原": [112.53, 37.87], 太原: [112.53, 37.87],
"哈尔滨": [126.63, 45.75], 哈尔滨: [126.63, 45.75],
"西安": [108.95, 34.27], 西安: [108.95, 34.27],
"沈阳": [123.38, 41.8], 沈阳: [123.38, 41.8],
"大连": [121.62, 38.92], 大连: [121.62, 38.92],
"海口": [110.35, 20.02], 海口: [110.35, 20.02],
"长沙": [113, 28.21], 长沙: [113, 28.21],
"银川": [106.27, 38.47], 银川: [106.27, 38.47],
"石家庄": [114.48, 38.03], 石家庄: [114.48, 38.03],
"昆明": [102.73, 25.04], 昆明: [102.73, 25.04],
"武汉": [114.31, 30.52], 武汉: [114.31, 30.52],
"呼和浩特": [111.65, 40.82], 呼和浩特: [111.65, 40.82],
"天津": [117.2, 39.13], 天津: [117.2, 39.13],
"贵阳": [106.71, 26.57], 贵阳: [106.71, 26.57],
"兰州": [103.73, 36.03], 兰州: [103.73, 36.03],
"青岛": [120.33, 36.07], 青岛: [120.33, 36.07],
"南京": [118.78, 32.04], 南京: [118.78, 32.04],
"长春": [125.35, 43.88], 长春: [125.35, 43.88],
"郑州": [113.65, 34.76], 郑州: [113.65, 34.76],
"西宁": [101.74, 36.56], 西宁: [101.74, 36.56],
"合肥": [117.27, 31.86], 合肥: [117.27, 31.86],
"南宁": [108.33, 22.84], 南宁: [108.33, 22.84],
"拉萨": [91.11, 29.97], 拉萨: [91.11, 29.97],
"乌鲁木齐": [87.68, 43.77] 乌鲁木齐: [87.68, 43.77],
}; }
//数据部分
//数据部分 var data = [
var data = [ { name: '北京', value: 88.8 },
{name:"北京",value:88.8}, { name: '成都', value: 88.7 },
{name:"成都",value:88.7}, { name: '厦门', value: 88.01 },
{name:"厦门",value:88.01}, { name: '杭州', value: 87.9 },
{name:"杭州",value:87.9}, { name: '济南', value: 87.48 },
{name:"济南",value:87.48}, { name: '福州', value: 87.47 },
{name:"福州",value:87.47}, { name: '上海', value: 87.43 },
{name:"上海",value:87.43}, { name: '重庆', value: 87.38 },
{name:"重庆",value:87.38}, { name: '深圳', value: 87.37 },
{name:"深圳",value:87.37}, { name: '昆明', value: 87.26 },
{name:"昆明",value:87.26}, { name: '宁波', value: 87.1 },
{name:"宁波",value:87.1}, { name: '南昌', value: 86.06 },
{name:"南昌",value:86.06}, { name: '广州', value: 85.89 },
{name:"广州",value:85.89}, { name: '太原', value: 84.45 },
{name:"太原",value:84.45}, { name: '哈尔滨', value: 83.96 },
{name:"哈尔滨",value:83.96}, { name: '西安', value: 83.24 },
{name:"西安",value:83.24}, { name: '沈阳', value: 82.96 },
{name:"沈阳",value:82.96}, { name: '大连', value: 82.94 },
{name:"大连",value:82.94}, { name: '海口', value: 82.88 },
{name:"海口",value:82.88}, { name: '长沙', value: 82.85 },
{name:"长沙",value:82.85}, { name: '银川', value: 82.49 },
{name:"银川",value:82.49}, { name: '石家庄', value: 82.24 },
{name:"石家庄",value:82.24}, { name: '武汉', value: 81.68 },
{name:"武汉",value:81.68}, { name: '呼和浩特', value: 81.61 },
{name:"呼和浩特",value:81.61}, { name: '天津', value: 80.99 },
{name:"天津",value:80.99}, { name: '贵阳', value: 80.71 },
{name:"贵阳",value:80.71}, { name: '兰州', value: 80.69 },
{name:"兰州",value:80.69}, { name: '南京', value: 80.65 },
{name:"南京",value:80.65}, { name: '青岛', value: 80.61 },
{name:"青岛",value:80.61}, { name: '长春', value: 80.1 },
{name:"长春",value:80.1}, { name: '郑州', value: 79.56 },
{name:"郑州",value:79.56}, { name: '西宁', value: 79.07 },
{name:"西宁",value:79.07}, { name: '南宁', value: 78.2 },
{name:"南宁",value:78.2}, { name: '合肥', value: 77.29 },
{name:"合肥",value:77.29}, { name: '乌鲁木齐', value: 76.91 },
{name:"乌鲁木齐",value:76.91}, { name: '拉萨', value: 76.01 },
{name:"拉萨",value:76.01} ]
]; var convertData = function (data) {
var convertData = function(data) { var res = []
var res = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]; var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) { if (geoCoord) {
res.push({ res.push({
name: data[i].name, name: data[i].name,
value: geoCoord.concat(data[i].value) value: geoCoord.concat(data[i].value),
}); })
} }
} }
return res; return res
}; }
const options = {
const options = {
toolbox: { toolbox: {
show: true, show: true,
feature: { feature: {
dataView: { dataView: {
show: true, show: true,
readOnly: true readOnly: true,
}, },
restore: { restore: {
show: true show: true,
}, },
saveAsImage: { saveAsImage: {
show: true show: true,
}
}, },
top:40, },
right:40 top: 40,
right: 40,
}, },
title: { title: {
//text: '2020年全国大厅监测得分', //text: '2020年全国大厅监测得分',
top:40, top: 40,
//subtext: 'from 零点有数', //subtext: 'from 零点有数',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: '#ffffff', color: '#ffffff',
fontSize: 30 fontSize: 30,
}, },
subtextStyle: { subtextStyle: {
fontSize: 20 fontSize: 20,
} },
}, },
legend: { legend: {
left: 'left', left: 'left',
data: ['强', '中', '弱'], data: ['强', '中', '弱'],
textStyle: { textStyle: {
color: '#ccc' color: '#ccc',
} },
}, },
backgroundColor: { backgroundColor: {
type: 'linear', type: 'linear',
@ -172,12 +169,17 @@ const options = {
y: 0, y: 0,
x2: 1, x2: 1,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, color: '#0f2c70' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#091732' // 100% 处的颜色 color: '#0f2c70', // 0% 处的颜色
}], },
globalCoord: false // 缺省为 false {
offset: 1,
color: '#091732', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
}, },
visualMap: { visualMap: {
min: 75, min: 75,
@ -187,12 +189,12 @@ const options = {
calculable: false, calculable: false,
text: ['高', '低'], text: ['高', '低'],
inRange: { inRange: {
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)'] color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)'],
}, },
textStyle: { textStyle: {
color: '#ffffff', color: '#ffffff',
fontSize: 10 fontSize: 10,
} },
}, },
geo: { geo: {
map: 'china', map: 'china',
@ -200,17 +202,17 @@ const options = {
roam: true, roam: true,
label: { label: {
emphasis: { emphasis: {
show: true show: true,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: '#091632', areaColor: '#091632',
borderColor: '#1773c3', borderColor: '#1773c3',
shadowColor: '#1773c3', shadowColor: '#1773c3',
shadowBlur: 20 shadowBlur: 20,
} },
} },
}, },
series: [ series: [
{ {
@ -226,20 +228,20 @@ const options = {
emphasis: { emphasis: {
show: false, show: false,
textStyle: { textStyle: {
color: '#fff' color: '#fff',
} },
} },
}, },
roam: true, roam: true,
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: '#031525', areaColor: '#031525',
borderColor: '#3B5077', borderColor: '#3B5077',
borderWidth: 1.5 borderWidth: 1.5,
}, },
emphasis: { emphasis: {
areaColor: '#0f2c70' areaColor: '#0f2c70',
} },
}, },
}, },
{ {
@ -248,42 +250,41 @@ const options = {
coordinateSystem: 'geo', coordinateSystem: 'geo',
data: convertData(data), data: convertData(data),
symbolSize: function (val) { symbolSize: function (val) {
return val[2]/8; return val[2] / 8
}, },
label: { label: {
normal: { normal: {
formatter: '{b}', formatter: '{b}',
position: 'bottom', position: 'bottom',
textStyle:{ textStyle: {
fontSize:10, fontSize: 10,
fontWeight:'bolder', fontWeight: 'bolder',
color:'#ffffff' color: '#ffffff',
}, },
show: true show: true,
}, },
emphasis: { emphasis: {
show: true show: true,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#ddb926' color: '#ddb926',
},
},
},
],
} }
} let chart: EChartsType
} const initChart = () => {
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

3044
src/views/charts/components/migration/get.js
View File

File diff suppressed because one or more lines are too long

226
src/views/charts/components/migration/index.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { geoJson } from './get.js' import { geoJson } from './get.js'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core' import { EChartsType } from 'echarts/core'
import { onMounted } from 'vue' import { onMounted } from 'vue'
import {cityIconData} from '../js/data.js' import { cityIconData } from '../js/data.js'
import logo from '@/assets/logo.png' import logo from '@/assets/logo.png'
const props = defineProps({ const props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config: { config: {
type: Object, type: Object,
default: () => {} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
var geoGpsMap = [109.1162, 34.2004] var geoGpsMap = [109.1162, 34.2004]
var geoCoordMap = { var geoCoordMap = {
江苏: [118.8062, 31.9208], 江苏: [118.8062, 31.9208],
内蒙古: [110.3467, 41.4899], 内蒙古: [110.3467, 41.4899],
辽宁: [123.1238, 42.1216], 辽宁: [123.1238, 42.1216],
@ -49,10 +49,10 @@ var geoCoordMap = {
四川: [113.0823, 28.2568], 四川: [113.0823, 28.2568],
云南: [102.9199, 25.4663], 云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505], 广东: [113.12244, 23.009505],
海南: [110.3893, 19.8516] 海南: [110.3893, 19.8516],
} }
var value = { var value = {
江苏: 10000, 江苏: 10000,
内蒙古: 10000, 内蒙古: 10000,
辽宁: 10000, 辽宁: 10000,
@ -68,50 +68,49 @@ var value = {
云南: 10000, 云南: 10000,
广东: 10000, 广东: 10000,
海南: 10000, 海南: 10000,
西藏: 10000 西藏: 10000,
}
var colors = '#f9b207'
} var year = ['长春', '长春', '青岛', '青岛', '成都', '成都']
var colors = '#f9b207' var mapData = []
var year = ['长春', '长春', '青岛', '青岛', '成都', '成都'] /* 柱子Y名称 */
var mapData = [] var categoryData = []
var barData = []
/* 柱子Y名称 */ for (var key in geoCoordMap) {
var categoryData = []
var barData = []
for (var key in geoCoordMap) {
mapData.push({ mapData.push({
year: '陕西', year: '陕西',
name: key, name: key,
value: value[key] / 100, value: value[key] / 100,
value1: value[key] / 100 value1: value[key] / 100,
}) })
} }
mapData.sort(function sortNumber (a, b) { mapData.sort(function sortNumber(a, b) {
return a.value - b.value return a.value - b.value
}) })
for (var j = 0; j < mapData.length; j++) { for (var j = 0; j < mapData.length; j++) {
barData.push(mapData[j].value1) barData.push(mapData[j].value1)
categoryData.push(mapData[j].name) categoryData.push(mapData[j].name)
} }
echarts.registerMap('china', geoJson) echarts.registerMap('china', geoJson)
var convertData = function (data) { var convertData = function (data) {
var res = [] var res = []
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name] var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) { if (geoCoord) {
res.push({ res.push({
name: data[i].name, name: data[i].name,
value: geoCoord.concat(data[i].value) value: geoCoord.concat(data[i].value),
}) })
} }
} }
return res return res
} }
var convertToLineData = function (data, gps) { var convertToLineData = function (data, gps) {
var res = [] var res = []
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var dataItem = data[i] var dataItem = data[i]
@ -120,23 +119,26 @@ var convertToLineData = function (data, gps) {
var fromCoord = gps // 郑州 var fromCoord = gps // 郑州
// var toCoord = geoGps[Math.random()*3]; // var toCoord = geoGps[Math.random()*3];
if (fromCoord && toCoord) { if (fromCoord && toCoord) {
res.push([{ res.push([
{
coord: fromCoord, coord: fromCoord,
value: dataItem.value value: dataItem.value,
}, { },
coord: toCoord {
}]) coord: toCoord,
},
])
} }
} }
return res return res
}
const options = {
tooltip:{
trigger: 'item',
formatter(val){
// console.log('val==========',val)
} }
const options = {
tooltip: {
trigger: 'item',
formatter(val) {
// console.log('val==========',val)
},
}, },
backgroundColor: '#001540', backgroundColor: '#001540',
geo: { geo: {
@ -147,8 +149,8 @@ const options = {
center: [101.4038, 36.8207], center: [101.4038, 36.8207],
label: { label: {
emphasis: { emphasis: {
show: false show: false,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
@ -159,29 +161,31 @@ const options = {
x: 0.5, x: 0.5,
y: 0.5, y: 0.5,
r: 0.8, r: 0.8,
colorStops: [{ colorStops: [
{
offset: 0, offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
}], },
globalCoord: false // 缺省为 false ],
globalCoord: false, // 缺省为 false
}, },
shadowColor: 'rgba(128, 217, 248, 1)', shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)', // shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2, shadowOffsetX: -2,
shadowOffsetY: 2, shadowOffsetY: 2,
shadowBlur: 10 shadowBlur: 10,
}, },
emphasis: { emphasis: {
areaColor: '#389BB7', areaColor: '#389BB7',
borderWidth: 0 borderWidth: 0,
} },
} },
}, },
series: [ series: [
// 地图？ // 地图？
{ {
type: 'map', type: 'map',
@ -191,59 +195,63 @@ const options = {
showLegendSymbol: false, // 存在legend时显示 showLegendSymbol: false, // 存在legend时显示
label: { label: {
normal: { normal: {
show: false show: false,
}, },
emphasis: { emphasis: {
show: false, show: false,
textStyle: { textStyle: {
color: '#fff' color: '#fff',
} },
} },
}, },
roam: true, roam: true,
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: '#031525', areaColor: '#031525',
borderColor: '#FFFFFF' borderColor: '#FFFFFF',
}, },
emphasis: { emphasis: {
areaColor: '#2B91B7' areaColor: '#2B91B7',
}
}, },
animation: false },
animation: false,
}, },
// 地图点的动画效果 // 地图点的动画效果
{ {
// name: 'Top 5', // name: 'Top 5',
type: 'effectScatter', type: 'effectScatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
data: convertData(mapData.sort(function (a, b) { data: convertData(
mapData
.sort(function (a, b) {
return b.value - a.value return b.value - a.value
}).slice(0, 20)), })
.slice(0, 20),
),
symbolSize: function (val) { symbolSize: function (val) {
return val[2] / 10 return val[2] / 10
}, },
showEffectOn: 'render', showEffectOn: 'render',
rippleEffect: { rippleEffect: {
brushType: 'stroke' brushType: 'stroke',
}, },
hoverAnimation: true, hoverAnimation: true,
label: { label: {
normal: { normal: {
formatter: '{b}', formatter: '{b}',
position: 'right', position: 'right',
show: true show: true,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: colors, color: colors,
shadowBlur: 10, shadowBlur: 10,
shadowColor: colors shadowColor: colors,
}
}, },
zlevel: 1 },
zlevel: 1,
}, },
// 地图线的动画效果 // 地图线的动画效果
{ {
@ -254,38 +262,40 @@ const options = {
period: 4, // 箭头指向速度，值越小速度越快 period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重 trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标 symbol: 'arrow', // 箭头图标
symbolSize: 3 // 图标大小 symbolSize: 3, // 图标大小
}, },
lineStyle: { lineStyle: {
normal: { normal: {
color: colors, color: colors,
width: 0.1, // 尾迹线条宽度 width: 0.1, // 尾迹线条宽度
opacity: 0.5, // 尾迹线条透明度 opacity: 0.5, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度 curveness: 0.3, // 尾迹线条曲直度
}
}, },
data: convertToLineData(mapData, geoGpsMap) },
data: convertToLineData(mapData, geoGpsMap),
}, },
{ {
type:'scatter', type: 'scatter',
zlevel: 16, zlevel: 16,
coordinateSystem: 'geo', coordinateSystem: 'geo',
symbolSize:30, symbolSize: 30,
symbol:`image://${logo}`, symbol: `image://${logo}`,
data:cityIconData, data: cityIconData,
rippleEffect: { rippleEffect: {
period: 4, brushType: 'stroke', scale: 4 period: 4,
brushType: 'stroke',
scale: 4,
}, },
tooltip:{ tooltip: {
trigger:'item', trigger: 'item',
padding:0, padding: 0,
borderColor:'black', borderColor: 'black',
background:'rgba(0,0,0,0.7)', background: 'rgba(0,0,0,0.7)',
textStyle: { textStyle: {
fontSize:20 fontSize: 20,
}, },
formatter(val){ formatter(val) {
console.log('val=======',val) console.log('val=======', val)
let tipHtml = ` let tipHtml = `
<div class="m-info" style=" opacity: 0.95;background: rgba(25,27,29,1);" > <div class="m-info" style=" opacity: 0.95;background: rgba(25,27,29,1);" >
<div class="title" style="padding-left: 12px; <div class="title" style="padding-left: 12px;
@ -297,21 +307,21 @@ const options = {
<!-- </div>--> <!-- </div>-->
</div>` </div>`
return tipHtml return tipHtml
}
}
}, },
] },
} },
let chart:EChartsType ],
const initChart = () => { }
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(document.getElementById(props.id)) const chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(() => { onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
chart && chart.resize() chart && chart.resize()
}) })
}) })
</script> </script>

143
src/views/charts/components/otherDiscard/Histogram.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidFill.js'
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
legend: { legend: {
data: [ data: [
'3-11岁任务数', '3-11岁任务数',
@ -38,12 +38,12 @@ const options = {
'60岁全程接种量', '60岁全程接种量',
'80岁任务数', '80岁任务数',
'80岁全程接种量', '80岁全程接种量',
'完成率' '完成率',
] ],
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'] data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'],
}, },
yAxis: [ yAxis: [
{ type: 'value' }, { type: 'value' },
@ -54,7 +54,7 @@ const options = {
// max: 100, // max: 100,
nameTextStyle: { nameTextStyle: {
color: '#ccc', color: '#ccc',
padding: [0, 0, 10, -30] padding: [0, 0, 10, -30],
}, },
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
@ -63,16 +63,16 @@ const options = {
type: 'dashed', type: 'dashed',
width: 1, width: 1,
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['#566471', '#566471'] color: ['#566471', '#566471'],
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
} },
} },
} },
], ],
// tooltip: { // tooltip: {
// trigger: 'axis', // trigger: 'axis',
@ -81,56 +81,60 @@ const options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
}, },
textStyle: { textStyle: {
color: '#fff', color: '#fff',
align: 'left', align: 'left',
fontSize: 14 fontSize: 14,
}, },
axisLine: {//x坐标轴轴线 axisLine: {
//x坐标轴轴线
show: true, show: true,
lineStyle: {//x坐标轴轴线样式 lineStyle: {
color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色 //x坐标轴轴线样式
} color: '#000', //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
},
}, },
backgroundColor: 'rgba(0,0,0,0.8)', backgroundColor: 'rgba(0,0,0,0.8)',
formatter: function (params) { formatter: function (params) {
console.log(params); console.log(params)
let str = params[0].name + '<br />'; let str = params[0].name + '<br />'
console.log(str); console.log(str)
params.forEach((item) => { params.forEach((item) => {
console.log(item.seriesName); console.log(item.seriesName)
if (item.value) { if (item.value) {
if (item.seriesName.indexOf('岁全程接种量') != -1) { if (item.seriesName.indexOf('岁全程接种量') != -1) {
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color} str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${
item.color
}
"></span> "></span>
${item.seriesName} ${item.seriesName}
: :
${item.value}人 <br/> ${item.value}人 <br/>
&nbsp; &nbsp; 全程完成率 &nbsp; &nbsp; 全程完成率
: ${item.value/100}% : ${item.value / 100}%
<br/><br/>`; <br/><br/>`
}else if (item.seriesName.indexOf('岁任务数') != -1) { } else if (item.seriesName.indexOf('岁任务数') != -1) {
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color} str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
"></span> "></span>
${item.seriesName} ${item.seriesName}
: :
${item.value}人 ${item.value}人
<br/>`; <br/>`
}else{ } else {
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color} str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
"></span> "></span>
${item.seriesName} ${item.seriesName}
: :
${item.value}% ${item.value}%
<br/>`; <br/>`
} }
} }
}); })
return str; return str
} },
}, },
series: [ series: [
@ -138,77 +142,76 @@ const options = {
name: '3-11岁任务数', name: '3-11岁任务数',
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
stack: 'BB', stack: 'BB',
type: 'bar' type: 'bar',
}, },
{ {
name: '3-11岁全程接种量', name: '3-11岁全程接种量',
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
stack: 'BB', stack: 'BB',
type: 'bar' type: 'bar',
}, },
{ {
name: '60岁任务数', name: '60岁任务数',
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
stack: 'AA', stack: 'AA',
type: 'bar' type: 'bar',
}, },
{ {
name: '60岁全程接种量', name: '60岁全程接种量',
data: [880, 30, 124, 118, 35, 47, 160], data: [880, 30, 124, 118, 35, 47, 160],
stack: 'AA', stack: 'AA',
type: 'bar' type: 'bar',
}, },
{ {
name: '80岁任务数', name: '80岁任务数',
data: [660, 30, 124, 118, 35, 47, 160], data: [660, 30, 124, 118, 35, 47, 160],
stack: 'Ad', stack: 'Ad',
type: 'bar' type: 'bar',
}, },
{ {
name: '80岁全程接种量', name: '80岁全程接种量',
data: [880, 30, 124, 118, 35, 47, 160], data: [880, 30, 124, 118, 35, 47, 160],
stack: 'Ad', stack: 'Ad',
type: 'bar' type: 'bar',
}, },
{ {
name: '完成率', name: '完成率',
data: [50, 130, 124, 18, 35, 47, 160], data: [50, 130, 124, 18, 35, 47, 160],
yAxisIndex:1, yAxisIndex: 1,
type: 'line', type: 'line',
markLine: { markLine: {
symbol: 'none', symbol: 'none',
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle: { lineStyle: {
type: 'dotted' type: 'dotted',
}
}
}, },
data: [{ type: 'average', name: 'Avg' + '%' }] },
},
data: [{ type: 'average', name: 'Avg' + '%' }],
}, },
// symbol: 'none', // symbol: 'none',
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle: { lineStyle: {
width: 2, width: 2,
type: 'solid' //'dotted'虚线 'solid'实线 type: 'solid', //'dotted'虚线 'solid'实线
},
},
},
},
],
} }
} let chart: EChartsType
} const initChart = () => {
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

168
src/views/charts/components/otherDiscard/bullish.vue
View File

File diff suppressed because one or more lines are too long

112
src/views/charts/components/otherDiscard/line.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
backgroundColor: '#031d33', backgroundColor: '#031d33',
legend: { legend: {
top: '20', top: '20',
@ -37,8 +37,7 @@ const options = {
fontSize: 16, fontSize: 16,
color: 'rgba(101, 213, 255, 1)', color: 'rgba(101, 213, 255, 1)',
}, },
icon: icon: 'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
itemWidth: 8, // 设置宽度 itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度、 itemHeight: 8, // 设置高度、
itemGap: 12, // 设置间距 itemGap: 12, // 设置间距
@ -162,34 +161,34 @@ const options = {
{ {
name: '', name: '',
nameTextStyle: { nameTextStyle: {
color: '#65d5ff' color: '#65d5ff',
}, },
min: 0, min: 0,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#233653' color: '#233653',
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#233653' color: '#233653',
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#78bdf5' color: '#78bdf5',
}, },
formatter: function(value) { formatter: function (value) {
return value * 100 + '%' return value * 100 + '%'
} },
}, },
axisTick: { axisTick: {
show: false show: false,
} },
} },
], ],
series: [ series: [
{ {
@ -303,26 +302,30 @@ const options = {
{ {
name: '变化占比', name: '变化占比',
type: 'line', type: 'line',
data: [0.3,0.5,0.3,0.35,0.15,0.05,0.05,0.3,0.35,0.4,0.5], data: [0.3, 0.5, 0.3, 0.35, 0.15, 0.05, 0.05, 0.3, 0.35, 0.4, 0.5],
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: 'rgba(255, 227, 168, 0.3)' color: 'rgba(255, 227, 168, 0.3)',
}, {
offset: 0.5,
color: 'rgba(255, 227, 168, 1)'
}, {
offset: 1,
color: 'rgba(255, 227, 168, 0.3)'
}]),
shadowColor: 'rgba(255, 120, 0,1)',
shadowBlur: 10
}
}, },
yAxisIndex: 1 {
offset: 0.5,
color: 'rgba(255, 227, 168, 1)',
},
{
offset: 1,
color: 'rgba(255, 227, 168, 0.3)',
},
]),
shadowColor: 'rgba(255, 120, 0,1)',
shadowBlur: 10,
},
},
yAxisIndex: 1,
}, },
{ {
name: '变化占比', name: '变化占比',
@ -332,31 +335,30 @@ const options = {
rippleEffect: { rippleEffect: {
period: 5, period: 5,
scale: 3, scale: 3,
brushType: 'stroke' brushType: 'stroke',
}, },
hoverAnimation: true, hoverAnimation: true,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(217,247,249,1)', color: 'rgba(217,247,249,1)',
shadowBlur: 10, shadowBlur: 10,
shadowColor: '#333' shadowColor: '#333',
} },
},
data: [],
}, },
data: []
}
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

51
src/views/charts/components/otherDiscard/liquidFill.vue
View File

@ -1,41 +1,41 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidFill.js'
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
backgroundColor: '#0F224C', //背景色 backgroundColor: '#0F224C', //背景色
series: [ series: [
@ -44,7 +44,7 @@ const options = {
radius: '80%', //显示比例 radius: '80%', //显示比例
center: ['50%', '50%'], //中心点 center: ['50%', '50%'], //中心点
amplitude: 20, //水波振幅 amplitude: 20, //水波振幅
data: [0.5,.5,.5], // data个数代表波浪数 data: [0.5, 0.5, 0.5], // data个数代表波浪数
color: [ color: [
{ {
type: 'linear', type: 'linear',
@ -89,18 +89,17 @@ const options = {
}, },
}, },
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

168
src/views/charts/components/otherDiscard/painting.vue
View File

@ -1,63 +1,63 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff'] const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
const indicator = [ const indicator = [
{ {
text: '文明村', text: '文明村',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '卫生村', text: '卫生村',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '森林村庄', text: '森林村庄',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '全面小康', text: '全面小康',
min: 0, min: 0,
max: 100 max: 100,
}, },
{ {
text: '景区村庄', text: '景区村庄',
min: 0, min: 0,
max: 100 max: 100,
} },
] ]
const Data = [80,61,70,86,77] const Data = [80, 61, 70, 86, 77]
function setData() { function setData() {
return [ return [
{ {
value: Data, value: Data,
@ -66,11 +66,11 @@ function setData() {
lineStyle: { lineStyle: {
color: '#4BFFFC', color: '#4BFFFC',
shadowColor: '#4BFFFC', shadowColor: '#4BFFFC',
shadowBlur: 5 shadowBlur: 5,
}, },
shadowColor: '#4BFFFC', shadowColor: '#4BFFFC',
shadowBlur: 5 shadowBlur: 5,
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
@ -83,23 +83,23 @@ function setData() {
colorStops: [ colorStops: [
{ {
offset: 1, offset: 1,
color: '#4BFFFC' color: '#4BFFFC',
}, },
{ {
offset: 0, offset: 0,
color: 'rgba(0,0,0,0)' color: 'rgba(0,0,0,0)',
} },
], ],
globalCoord: false globalCoord: false,
},
opacity: 0.8, // 区域透明度
},
},
}, },
opacity: 0.8 // 区域透明度
}
}
}
] ]
} }
function setgauge(i) { function setgauge(i) {
return { return {
type: 'gauge', type: 'gauge',
detail: false, detail: false,
@ -109,26 +109,26 @@ function setgauge(i) {
startAngle: 90 + 72 * i + 18, //开始刻度的角度 startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度 endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#66ccff', color: '#66ccff',
width: 1 width: 1,
}, },
length: 6, length: 6,
splitNumber: 1 splitNumber: 1,
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
},
} }
} }
} function setSpot() {
function setSpot() {
var scatterData = [] var scatterData = []
Data.map((o, i) => { Data.map((o, i) => {
scatterData.push({ scatterData.push({
@ -139,19 +139,19 @@ function setSpot() {
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
shadowColor: color[i], shadowColor: color[i],
shadowBlur: 8 shadowBlur: 8,
} },
} },
}) })
}) })
return scatterData return scatterData
} }
const options = { const options = {
backgroundColor: '#0E1327', backgroundColor: '#0E1327',
polar: { polar: {
center: ['50%', '50%'], center: ['50%', '50%'],
radius: '60%' radius: '60%',
}, },
radar: { radar: {
shape: 'circle', shape: 'circle',
@ -161,7 +161,7 @@ const options = {
axisName: { axisName: {
color: '#b7e9fd', color: '#b7e9fd',
fontSize: 13, fontSize: 13,
padding: -20 padding: -20,
}, },
nameGap: 45, nameGap: 45,
splitNumber: 4, splitNumber: 4,
@ -170,21 +170,21 @@ const options = {
show: true, show: true,
areaStyle: { areaStyle: {
// 分隔区域的样式设置。 // 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)'] color: ['rgba(27, 50, 66, 0.4)'],
} },
}, },
axisLine: { axisLine: {
//指向外圈文本的分隔线样式 //指向外圈文本的分隔线样式
lineStyle: { lineStyle: {
color: '#5aa3d0' color: '#5aa3d0',
} },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色 color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽 width: 2, // 分隔线线宽
} },
} },
}, },
angleAxis: { angleAxis: {
type: 'category', type: 'category',
@ -193,40 +193,40 @@ const options = {
boundaryGap: false, boundaryGap: false,
clockwise: false, clockwise: false,
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
radiusAxis: { radiusAxis: {
min: 0, min: 0,
max: 100, max: 100,
interval: 25, interval: 25,
splitLine: { splitLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
//指向外圈文本的分隔线样式 //指向外圈文本的分隔线样式
lineStyle: { lineStyle: {
color: '#5aa3d0' color: '#5aa3d0',
} },
}, },
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: '#5aa3d0', color: '#5aa3d0',
align: 'left', align: 'left',
margin: -5 margin: -5,
} },
}, },
series: [ series: [
setgauge(0), setgauge(0),
@ -238,34 +238,32 @@ const options = {
type: 'radar', type: 'radar',
silent: true, silent: true,
lineStyle: { lineStyle: {
color: '#66ffff' color: '#66ffff',
}, },
areaStyle: { areaStyle: {
color: 'rgba(102, 255, 255, 0.31)' color: 'rgba(102, 255, 255, 0.31)',
}, },
data: setData() data: setData(),
}, },
{ {
type: 'scatter', type: 'scatter',
coordinateSystem: 'polar', coordinateSystem: 'polar',
symbolSize: 20, symbolSize: 20,
data: setSpot() data: setSpot(),
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () {
window.addEventListener('resize',function (){ chart && chart.resize()
chart&&chart.resize() })
}) })
})
</script> </script>

63
src/views/charts/components/otherDiscard/pie.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']; let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
let echartData = [ let echartData = [
{ {
name: '设备1', name: '设备1',
value: '3720', value: '3720',
@ -46,13 +46,13 @@ let echartData = [
name: '设备4', name: '设备4',
value: '1420', value: '1420',
}, },
]; ]
let formatNumber = function (num) { let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g; let reg = /(?=(\B)(\d{3})+$)/g
return num.toString().replace(reg, ','); return num.toString().replace(reg, ',')
}; }
const options = { const options = {
backgroundColor: '#364686', backgroundColor: '#364686',
color: color, color: color,
title: [ title: [
@ -123,7 +123,9 @@ const options = {
label: { label: {
normal: { normal: {
formatter: (params) => { formatter: (params) => {
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'; return (
'{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
)
}, },
padding: [0, -70, 30, -70], padding: [0, -70, 30, -70],
rich: { rich: {
@ -183,18 +185,17 @@ const options = {
], ],
}, },
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

46
src/views/charts/components/otherDiscard/progress.vue
View File

@ -1,36 +1,35 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = {
const options = {
title: [ title: [
{ {
text: '已完成', text: '已完成',
@ -132,18 +131,17 @@ const options = {
data: [100], data: [100],
}, },
], ],
}; }
let chart:EChartsType; let chart: EChartsType
const initChart =()=> { const initChart = () => {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

458
src/views/charts/components/otherDiscard/rotate.vue
View File

@ -1,85 +1,104 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
var data = [],data2=[]; var data = [],
var trafficWay = [ data2 = []
var trafficWay = [
{ {
name: '病假', name: '病假',
value: 20 value: 20,
},{ },
{
name: '事假', name: '事假',
value: 1 value: 1,
},{ },
{
name: '婚假', name: '婚假',
value: 30 value: 30,
},{ },
{
name: '丧假', name: '丧假',
value: 40 value: 40,
},{ },
{
name: '年休假', name: '年休假',
value: 40 value: 40,
}]; },
var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF'] ]
for (var i = 0; i < trafficWay.length; i++) { var color = [
data.push({ '#2A8BFD',
'#BAFF7F',
'#00FAC1',
'#00CAFF',
'#FDE056',
'#4ED33C',
'#FF8A26',
'#FF5252',
'#9689FF',
'#CB00FF',
]
for (var i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value, value: trafficWay[i].value,
name: trafficWay[i].name, name: trafficWay[i].name,
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 8, borderWidth: 8,
shadowBlur: 20, shadowBlur: 20,
borderRadius:20, borderRadius: 20,
borderColor:color[i], borderColor: color[i],
shadowColor: color[i] shadowColor: color[i],
} },
} },
}, { },
{
value: 5, value: 5,
name: '', name: '',
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false show: false,
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
color: 'rgba(0, 0, 0, 0)', color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)', borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0 borderWidth: 0,
},
} },
} },
}); )
data2.push({ data2.push(
{
value: trafficWay[i].value, value: trafficWay[i].value,
name: trafficWay[i].name, name: trafficWay[i].name,
}, },
@ -89,233 +108,240 @@ for (var i = 0; i < trafficWay.length; i++) {
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false show: false,
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
color: 'rgba(0, 0, 0, 0)', color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)', borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0, borderWidth: 0,
opacity:0.2 opacity: 0.2,
},
} },
} },
}
) )
}
let angle = 0;//角度，用来做简单的动画效果的
const option = {
backgroundColor:"#061740",
color : color,
legend:{
right:'10%',
top:'10%',
icon:'rect',
itemWidth:15,
itemHeight:15,
textStyle:{
color:'#ffffff',
} }
let angle = 0 //角度，用来做简单的动画效果的
const option = {
backgroundColor: '#061740',
color: color,
legend: {
right: '10%',
top: '10%',
icon: 'rect',
itemWidth: 15,
itemHeight: 15,
textStyle: {
color: '#ffffff',
},
}, },
series: [ series: [
{//外线1 {
name: "ring5", //外线1
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: (0+angle) * Math.PI / 180, startAngle: ((0 + angle) * Math.PI) / 180,
endAngle: (90+angle) * Math.PI / 180 endAngle: ((90 + angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: '#4EE9E6', stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//内线1 {
name: "ring5", //内线1
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: (180+angle) * Math.PI / 180, startAngle: ((180 + angle) * Math.PI) / 180,
endAngle: (270+angle) * Math.PI / 180 endAngle: ((270 + angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#4EE9E6", stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//外线2 {
name: "ring5", //外线2
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: (270+-angle) * Math.PI / 180, startAngle: ((270 + -angle) * Math.PI) / 180,
endAngle: (40+-angle) * Math.PI / 180 endAngle: ((40 + -angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#4EE9E6", stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//外线2 {
name: "ring5", //外线2
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
return { return {
type: 'arc', type: 'arc',
shape: { shape: {
cx: api.getWidth() / 3, cx: api.getWidth() / 3,
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: (90+-angle) * Math.PI / 180, startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: (220+-angle) * Math.PI / 180 endAngle: ((220 + -angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#4EE9E6", stroke: '#4EE9E6',
fill: "transparent", fill: 'transparent',
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点1 {
name: "ring5", //绿点1
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
let point = getCirlPoint(x0, y0, r, (90+-angle)) let point = getCirlPoint(x0, y0, r, 90 + -angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点2 {
name: "ring5", //绿点 //绿点2
name: 'ring5', //绿点
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
let point = getCirlPoint(x0, y0, r, (270+-angle)) let point = getCirlPoint(x0, y0, r, 270 + -angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点3 {
name: "ring5", //绿点3
name: 'ring5',
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
let point = getCirlPoint(x0, y0, r, (90+angle)) let point = getCirlPoint(x0, y0, r, 90 + angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{//绿点4 {
name: "ring5", //绿点 //绿点4
name: 'ring5', //绿点
type: 'custom', type: 'custom',
coordinateSystem: "none", coordinateSystem: 'none',
renderItem: function(params, api) { renderItem: function (params, api) {
let x0 = api.getWidth() / 3; let x0 = api.getWidth() / 3
let y0 = api.getHeight() / 2; let y0 = api.getHeight() / 2
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
let point = getCirlPoint(x0, y0, r, (270+angle)) let point = getCirlPoint(x0, y0, r, 270 + angle)
return { return {
type: 'circle', type: 'circle',
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#66FFFF",//粉 stroke: '#66FFFF', //粉
fill: "#66FFFF" fill: '#66FFFF',
}, },
silent: true silent: true,
}; }
}, },
data: [0] data: [0],
}, },
{ {
name: '', name: '',
@ -323,91 +349,89 @@ const option = {
clockWise: false, clockWise: false,
radius: ['98%', '95%'], radius: ['98%', '95%'],
hoverAnimation: false, hoverAnimation: false,
center:['33.33%','50%'], center: ['33.33%', '50%'],
top:"center", top: 'center',
itemStyle: { itemStyle: {
normal:{ normal: {
label: { label: {
show:false show: false,
}
}
}, },
data:data },
},
data: data,
}, },
{ {
type: 'pie', type: 'pie',
top:"center", top: 'center',
startAngle:90, startAngle: 90,
clockwise:false, clockwise: false,
center:['33.33%','50%'], center: ['33.33%', '50%'],
legendHoverLink:false, legendHoverLink: false,
hoverAnimation: false, hoverAnimation: false,
radius: ['94%', '55%'], radius: ['94%', '55%'],
itemStyle: { itemStyle: {
opacity:0.15 opacity: 0.15,
}, },
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data:data2 data: data2,
}, },
{ {
name: '', name: '',
type: 'pie', type: 'pie',
clockWise: false, clockWise: false,
center:['33.33%','50%'], center: ['33.33%', '50%'],
radius: ['39%', '38%'], radius: ['39%', '38%'],
hoverAnimation: false, hoverAnimation: false,
top:"center", top: 'center',
itemStyle: { itemStyle: {
normal:{ normal: {
label: { label: {
show:false show: false,
}
}
}, },
data:data
}, },
] },
}; data: data,
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) },
function getCirlPoint(x0, y0, r, angle) { ],
let x1 = x0 + r * Math.cos(angle * Math.PI / 180) }
let y1 = y0 + r * Math.sin(angle * Math.PI / 180) //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
return { return {
x: x1, x: x1,
y: y1 y: y1,
}
} }
}
let chart: EChartsType
let chart:EChartsType; const initChart = () => {
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
draw(chart) draw(chart)
return chart return chart
} }
function draw(chart){ function draw(chart) {
angle = angle+3 angle = angle + 3
chart.setOption(option, true) chart.setOption(option, true)
//window.requestAnimationFrame(draw); //window.requestAnimationFrame(draw);
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
setInterval(function() { setInterval(function () {
//用setInterval做动画感觉有问题 //用setInterval做动画感觉有问题
draw(chart) draw(chart)
}, 100); }, 100)
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

401
src/views/charts/components/otherDiscard/sankey.vue
View File

@ -1,231 +1,230 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
let datalist = [ let datalist = [
{ {
name: "公共平台" name: '公共平台',
}, },
{ {
name: "系统0000" name: '系统0000',
}, },
{ {
name: "系统0011" name: '系统0011',
}, },
{ {
name: "系统0022" name: '系统0022',
}, },
{ {
name: "系统0033" name: '系统0033',
}, },
{ {
name: "系统0044" name: '系统0044',
}, },
{ {
name: "系统0055" name: '系统0055',
},{
name: "系统11"
}, },
{ {
name: "系统22" name: '系统11',
}, },
{ {
name: "系统33" name: '系统22',
}, },
{ {
name: "系统44" name: '系统33',
}, },
{ {
name: "系统55" name: '系统44',
}, },
{ {
name: "系统66" name: '系统55',
}, },
{ {
name: "系统77" name: '系统66',
}, },
{ {
name: "系统88" name: '系统77',
}, },
{ {
name: "系统99" name: '系统88',
}
];
let linksData = [
{
source: "公共平台",
target: "系统0000",
value: 1044305
}, },
{ {
source: "公共平台", name: '系统99',
target: "系统0011", },
value: 651527 ]
let linksData = [
{
source: '公共平台',
target: '系统0000',
value: 1044305,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0022", target: '系统0011',
value: 651527 value: 651527,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0033", target: '系统0022',
value: 486710 value: 651527,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0044", target: '系统0033',
value: 212670 value: 486710,
}, },
{ {
source: "公共平台", source: '公共平台',
target: "系统0055", target: '系统0044',
value: 210400 value: 212670,
},{
source: "系统0011",
target: "系统11",
value: 645246
}, },
{ {
source: "系统0022", source: '公共平台',
target: "系统22", target: '系统0055',
value: 513275 value: 210400,
}, },
{ {
source: "系统0011", source: '系统0011',
target: "系统33", target: '系统11',
value: 282986 value: 645246,
}, },
{ {
source: "系统0011", source: '系统0022',
target: "系统44", target: '系统22',
value: 118655 value: 513275,
}, },
{ {
source: "系统0022", source: '系统0011',
target: "系统55", target: '系统33',
value: 105989 value: 282986,
}, },
{ {
source: "系统0022", source: '系统0011',
target: "系统66", target: '系统44',
value: 95100 value: 118655,
}, },
{ {
source: "系统0033", source: '系统0022',
target: "系统77", target: '系统55',
value: 87796 value: 105989,
}, },
{ {
source: "系统0044", source: '系统0022',
target: "系统88", target: '系统66',
value: 47658 value: 95100,
}, },
{ {
source: "系统0055", source: '系统0033',
target: "系统99", target: '系统77',
value: 243660 value: 87796,
}, },
{
source: '系统0044',
]; target: '系统88',
let Color = [ value: 47658,
"#61FEFF", },
"#937FE6", {
"#2B56D3", source: '系统0055',
"#87E7AA", target: '系统99',
"#937FE6", value: 243660,
"#FF9B97", },
"#8f23f5", ]
"#0576ea", let Color = [
"#2cb8cf", '#61FEFF',
"#8A7EE0", '#937FE6',
"#2cb8cf", '#2B56D3',
"#4e70f0", '#87E7AA',
"#1fa3de", '#937FE6',
"#bbc951", '#FF9B97',
"#FFC14B", '#8f23f5',
"#b785a6", '#0576ea',
'#2cb8cf',
]; let Color1 = [ '#8A7EE0',
"#04E0F3", '#2cb8cf',
"#682EFC", '#4e70f0',
"#35A7FE", '#1fa3de',
"#0DC09F", '#bbc951',
"#682EFC", '#FFC14B',
"#ED6663", '#b785a6',
"#8f23f5", ]
"#0576ea", let Color1 = [
"#2cb8cf", '#04E0F3',
"#8A7EE0", '#682EFC',
"#2cb8cf", '#35A7FE',
"#4e70f0", '#0DC09F',
"#1fa3de", '#682EFC',
"#bbc951", '#ED6663',
"#FFC14B", '#8f23f5',
"#b785a6", '#0576ea',
'#2cb8cf',
]; '#8A7EE0',
let sourceLabel = [ '#2cb8cf',
"right", '#4e70f0',
"left", '#1fa3de',
"left", '#bbc951',
"left", '#FFC14B',
"left", '#b785a6',
"left", ]
"left", let sourceLabel = [
"left", 'right',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left", 'left',
"left" 'left',
]; 'left',
let itemStyleColor = []; 'left',
let labelSource = []; 'left',
for (let i = 0; i < datalist.length; i++) { 'left',
'left',
'left',
'left',
]
let itemStyleColor = []
let labelSource = []
for (let i = 0; i < datalist.length; i++) {
datalist[i].label = { datalist[i].label = {
normal: { normal: {
position: sourceLabel[i] position: sourceLabel[i],
},
} }
}; labelSource.push(sourceLabel[i])
labelSource.push(sourceLabel[i]); }
} for (let d = 0; d < datalist.length; d++) {
for (let d = 0; d < datalist.length; d++) {
datalist[d].itemStyle = { datalist[d].itemStyle = {
normal: { normal: {
// color: Color[d] // color: Color[d]
color: { color: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 1, y: 1,
x2: 0, x2: 0,
@ -242,57 +241,59 @@ for (let d = 0; d < datalist.length; d++) {
], ],
global: false, // 缺省为 false global: false, // 缺省为 false
}, },
},
}
itemStyleColor.push(datalist[d])
} }
};
itemStyleColor.push(datalist[d]);
}
const options = { const options = {
backgroundColor: "#031d7a", backgroundColor: '#031d7a',
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
triggerOn: "mousemove", triggerOn: 'mousemove',
formatter: function(params) { formatter: function (params) {
if (params.name == "公共平台") { if (params.name == '公共平台') {
return " 公共平台 " return ' 公共平台 '
} else { } else {
let value = params.data.value; let value = params.data.value
if (!value && value !== 0) return 0; if (!value && value !== 0) return 0
let str = value.toString(); let str = value.toString()
let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
if (params.data.source == "公共平台") { if (params.data.source == '公共平台') {
return params.data.target + " : " + str.replace(reg, "$1,"); return params.data.target + ' : ' + str.replace(reg, '$1,')
} else { } else {
return params.data.source + " : " + str.replace(reg, "$1,"); return params.data.source + ' : ' + str.replace(reg, '$1,')
}
} }
} }
}, },
series: [{ },
type: "sankey", series: [
layout: "none", {
top: "4%", type: 'sankey',
bottom: "12%", layout: 'none',
left: "20", top: '4%',
right: "20", bottom: '12%',
left: '20',
right: '20',
nodeGap: 15, nodeGap: 15,
nodeWidth: 25, nodeWidth: 25,
focusNodeAdjacency: "allEdges", focusNodeAdjacency: 'allEdges',
data: itemStyleColor, data: itemStyleColor,
links: linksData, links: linksData,
label: { label: {
normal: { normal: {
color: "#fff", color: '#fff',
fontSize: 14, fontSize: 14,
formatter: function(params) { formatter: function (params) {
if (params.data.name == '公共平台') { if (params.data.name == '公共平台') {
let strs = params.data.name.split(''); //字符串数组 let strs = params.data.name.split('') //字符串数组
let str = '' let str = ''
for (let i = 0, s; s = strs[i++];) { //遍历字符串数组 for (let i = 0, s; (s = strs[i++]); ) {
str += s; //遍历字符串数组
if (!(i % 1)) str += '\n'; //按需要求余 str += s
if (!(i % 1)) str += '\n' //按需要求余
} }
return "{white|" + str + "}" return '{white|' + str + '}'
} else { } else {
return params.data.name return params.data.name
} }
@ -301,37 +302,37 @@ const options = {
white: { white: {
fontSize: 16, fontSize: 16,
lineHeight: 30, lineHeight: 30,
padding: [0, 0, 0, -26] padding: [0, 0, 0, -26],
} },
} },
} },
}, },
lineStyle: { lineStyle: {
normal: { normal: {
opacity: 0.4, opacity: 0.4,
color: "source", color: 'source',
curveness: 0.5 curveness: 0.5,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 1, borderWidth: 1,
borderColor: "transparent" borderColor: 'transparent',
},
},
},
],
} }
} let chart: EChartsType
}] const initChart = () => {
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

55
src/views/charts/components/simple/bar.vue
View File

@ -1,66 +1,65 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
}, },
series: [ series: [
{ {
data: [150, 230, 150, 80, 70, 110, 130], data: [150, 230, 150, 80, 70, 110, 130],
type: 'bar' type: 'bar',
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

55
src/views/charts/components/simple/candlestick.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'] data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
}, },
yAxis: {}, yAxis: {},
series: [ series: [
@ -47,22 +47,21 @@ const options = {
[20, 34, 10, 38], [20, 34, 10, 38],
[40, 35, 30, 50], [40, 35, 30, 50],
[31, 38, 33, 44], [31, 38, 33, 44],
[38, 15, 5, 42] [38, 15, 5, 42],
] ],
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

75
src/views/charts/components/simple/funnel.vue
View File

@ -1,55 +1,55 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 0, top: 0,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '0%', bottom: '0%',
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c}%' formatter: '{a} <br/>{b} : {c}%',
}, },
toolbox: { toolbox: {
feature: { feature: {
dataView: { readOnly: false }, dataView: { readOnly: false },
restore: {}, restore: {},
saveAsImage: {} saveAsImage: {},
} },
}, },
legend: { legend: {
show:false, show: false,
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'] data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
}, },
series: [ series: [
{ {
@ -67,45 +67,44 @@ const options = {
gap: 2, gap: 2,
label: { label: {
show: true, show: true,
position: 'inside' position: 'inside',
}, },
labelLine: { labelLine: {
length: 10, length: 10,
lineStyle: { lineStyle: {
width: 1, width: 1,
type: 'solid' type: 'solid',
} },
}, },
itemStyle: { itemStyle: {
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1 borderWidth: 1,
}, },
emphasis: { emphasis: {
label: { label: {
fontSize: 20 fontSize: 20,
} },
}, },
data: [ data: [
{ value: 60, name: 'Visit' }, { value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' }, { value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' }, { value: 20, name: 'Order' },
{ value: 80, name: 'Click' }, { value: 80, name: 'Click' },
{ value: 100, name: 'Show' } { value: 100, name: 'Show' },
] ],
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

58
src/views/charts/components/simple/gauge.vue
View File

@ -1,65 +1,63 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
tooltip: { tooltip: {
formatter: '{a} <br/>{b} : {c}%' formatter: '{a} <br/>{b} : {c}%',
}, },
series: [ series: [
{ {
name: 'Pressure', name: 'Pressure',
type: 'gauge', type: 'gauge',
detail: { detail: {
formatter: '{value}' formatter: '{value}',
}, },
data: [ data: [
{ {
value: 50, value: 50,
name: 'SCORE' name: 'SCORE',
},
],
},
],
} }
] let chart: EChartsType
} const initChart = () => {
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

77
src/views/charts/components/simple/graph.vue
View File

@ -1,60 +1,60 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun']; const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun']
const data = axisData.map(function (item, i) { const data = axisData.map(function (item, i) {
return Math.round(Math.random() * 1000 * (i + 1)); return Math.round(Math.random() * 1000 * (i + 1))
}); })
const links = data.map(function (item, i) { const links = data.map(function (item, i) {
return { return {
source: i, source: i,
target: i + 1 target: i + 1,
}; }
}); })
links.pop(); links.pop()
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: axisData data: axisData,
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
}, },
series: [ series: [
{ {
@ -63,29 +63,28 @@ const options = {
coordinateSystem: 'cartesian2d', coordinateSystem: 'cartesian2d',
symbolSize: 40, symbolSize: 40,
label: { label: {
show: true show: true,
}, },
edgeSymbol: ['circle', 'arrow'], edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10], edgeSymbolSize: [4, 10],
data: data, data: data,
links: links, links: links,
lineStyle: { lineStyle: {
color: '#2f4554' color: '#2f4554',
},
},
],
} }
} let chart: EChartsType
] const initChart = () => {
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

58
src/views/charts/components/simple/line.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" ref="chartsRef"/> <div :id="id" :class="className" :style="{ height: height, width: width }" ref="chartsRef" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core' import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement|null>() const chartsRef = ref<HTMLElement | null>()
const props = defineProps({ const props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
xAxisData: { xAxisData: {
type: Array, type: Array,
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, },
config: { config: {
type: Object, type: Object,
default: () => {} default: () => {},
}, },
seriesData: { seriesData: {
type: Array, type: Array,
default: () => [150, 230, 224, 218, 135, 147, 260] default: () => [150, 230, 224, 218, 135, 147, 260],
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
@ -47,33 +47,31 @@ const options = {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: props.xAxisData data: props.xAxisData,
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
}, },
series: [ series: [
{ {
data: props.seriesData, data: props.seriesData,
type: 'line' type: 'line',
} },
], ],
...props.config ...props.config,
} }
let chart:EChartsType let chart: EChartsType
const initChart = () => { const initChart = () => {
const chart = echarts.init(chartsRef.value) const chart = echarts.init(chartsRef.value)
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(() => { onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
chart && chart.resize() chart && chart.resize()
}) })
}) })
</script> </script>
<style> <style></style>
</style>

113
src/views/charts/components/simple/pictorialBar.vue
View File

@ -1,83 +1,81 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let category = []; let category = []
let dottedBase = +new Date(); let dottedBase = +new Date()
let lineData = []; let lineData = []
let barData = []; let barData = []
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
let date = new Date((dottedBase += 3600 * 24 * 1000)); let date = new Date((dottedBase += 3600 * 24 * 1000))
category.push( category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-') let b = Math.random() * 200
); let d = Math.random() * 200
let b = Math.random() * 200; barData.push(b)
let d = Math.random() * 200; lineData.push(d + b)
barData.push(b); }
lineData.push(d + b); let props = defineProps({
}
let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
backgroundColor: '#0f375f', backgroundColor: '#0f375f',
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
} },
}, },
legend: { legend: {
data: ['line', 'bar'], data: ['line', 'bar'],
textStyle: { textStyle: {
color: '#ccc' color: '#ccc',
} },
}, },
xAxis: { xAxis: {
data: category, data: category,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#ccc' color: '#ccc',
} },
} },
}, },
yAxis: { yAxis: {
splitLine: { show: false }, splitLine: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#ccc' color: '#ccc',
} },
} },
}, },
series: [ series: [
{ {
@ -87,7 +85,7 @@ const options = {
showAllSymbol: true, showAllSymbol: true,
symbol: 'emptyCircle', symbol: 'emptyCircle',
symbolSize: 15, symbolSize: 15,
data: lineData data: lineData,
}, },
{ {
name: 'bar', name: 'bar',
@ -97,10 +95,10 @@ const options = {
borderRadius: 5, borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' }, { offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' } { offset: 1, color: '#43eec6' },
]) ]),
}, },
data: barData data: barData,
}, },
{ {
name: 'line', name: 'line',
@ -111,38 +109,37 @@ const options = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' }, { offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' }, { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' } { offset: 1, color: 'rgba(20,200,212,0)' },
]) ]),
}, },
z: -12, z: -12,
data: lineData data: lineData,
}, },
{ {
name: 'dotted', name: 'dotted',
type: 'pictorialBar', type: 'pictorialBar',
symbol: 'rect', symbol: 'rect',
itemStyle: { itemStyle: {
color: '#0f375f' color: '#0f375f',
}, },
symbolRepeat: true, symbolRepeat: true,
symbolSize: [12, 4], symbolSize: [12, 4],
symbolMargin: 1, symbolMargin: 1,
z: -10, z: -10,
data: lineData data: lineData,
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

65
src/views/charts/components/simple/pie.vue
View File

@ -1,47 +1,47 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
legend: { legend: {
top: '0%', top: '0%',
left: 'center' left: 'center',
}, },
series: [ series: [
{ {
@ -51,39 +51,38 @@ const options = {
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: '40', fontSize: '40',
fontWeight: 'bold' fontWeight: 'bold',
} },
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: [ data: [
{ value: 1048, name: 'Search Engine' }, { value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' }, { value: 735, name: 'Direct' },
{ value: 580, name: 'Email' }, { value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' }, { value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' } { value: 300, name: 'Video Ads' },
] ],
},
],
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

127
src/views/charts/components/simple/radar.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const dataBJ = [ const dataBJ = [
[55, 9, 56, 0.46, 18, 6, 1], [55, 9, 56, 0.46, 18, 6, 1],
[25, 11, 21, 0.65, 34, 9, 2], [25, 11, 21, 0.65, 34, 9, 2],
[56, 7, 63, 0.3, 14, 5, 3], [56, 7, 63, 0.3, 14, 5, 3],
@ -59,10 +59,10 @@ const dataBJ = [
[160, 120, 186, 2.77, 91, 50, 28], [160, 120, 186, 2.77, 91, 50, 28],
[134, 96, 165, 2.76, 83, 41, 29], [134, 96, 165, 2.76, 83, 41, 29],
[52, 24, 60, 1.03, 50, 21, 30], [52, 24, 60, 1.03, 50, 21, 30],
[46, 5, 49, 0.28, 10, 6, 31] [46, 5, 49, 0.28, 10, 6, 31],
]; ]
const dataGZ = [ const dataGZ = [
[26, 37, 27, 1.163, 27, 13, 1], [26, 37, 27, 1.163, 27, 13, 1],
[85, 62, 71, 1.195, 60, 8, 2], [85, 62, 71, 1.195, 60, 8, 2],
[78, 38, 74, 1.363, 37, 7, 3], [78, 38, 74, 1.363, 37, 7, 3],
@ -93,10 +93,10 @@ const dataGZ = [
[56, 48, 68, 1.336, 37, 9, 28], [56, 48, 68, 1.336, 37, 9, 28],
[82, 92, 174, 3.29, 0, 13, 29], [82, 92, 174, 3.29, 0, 13, 29],
[106, 116, 188, 3.628, 101, 16, 30], [106, 116, 188, 3.628, 101, 16, 30],
[118, 50, 0, 1.383, 76, 11, 31] [118, 50, 0, 1.383, 76, 11, 31],
]; ]
const dataSH = [ const dataSH = [
[91, 45, 125, 0.82, 34, 23, 1], [91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2], [65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3], [83, 60, 84, 1.09, 73, 27, 3],
@ -127,47 +127,47 @@ const dataSH = [
[93, 68, 96, 1.05, 79, 29, 28], [93, 68, 96, 1.05, 79, 29, 28],
[188, 143, 197, 1.66, 99, 51, 29], [188, 143, 197, 1.66, 99, 51, 29],
[174, 131, 174, 1.55, 108, 50, 30], [174, 131, 174, 1.55, 108, 50, 30],
[187, 143, 201, 1.39, 89, 53, 31] [187, 143, 201, 1.39, 89, 53, 31],
]; ]
const lineStyle = { const lineStyle = {
width: 1, width: 1,
opacity: 0.5 opacity: 0.5,
}; }
const options = { const options = {
backgroundColor: '#161627', backgroundColor: '#161627',
title: { title: {
text: 'AQI - Radar', text: 'AQI - Radar',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: '#eee' color: '#eee',
} },
}, },
legend: { legend: {
show:false, show: false,
bottom: 5, bottom: 5,
data: ['Beijing', 'Shanghai', 'Guangzhou'], data: ['Beijing', 'Shanghai', 'Guangzhou'],
itemGap: 20, itemGap: 20,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 14 fontSize: 14,
}, },
selectedMode: 'single' selectedMode: 'single',
}, },
radar: { radar: {
indicator: [ indicator: [
{ name: 'AQI', max: 300,min:1 }, { name: 'AQI', max: 300, min: 1 },
{ name: 'PM2.5', max: 250,min:1 }, { name: 'PM2.5', max: 250, min: 1 },
{ name: 'PM10', max: 300,min:1 }, { name: 'PM10', max: 300, min: 1 },
{ name: 'CO', max: 5,min:1 }, { name: 'CO', max: 5, min: 1 },
{ name: 'NO2', max: 200,min:1 }, { name: 'NO2', max: 200, min: 1 },
{ name: 'SO2', max: 100,min:1 } { name: 'SO2', max: 100, min: 1 },
], ],
shape: 'circle', shape: 'circle',
splitNumber: 5, splitNumber: 5,
axisName: { axisName: {
color: 'rgb(238, 197, 102)' color: 'rgb(238, 197, 102)',
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -177,18 +177,18 @@ const options = {
'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)', 'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)' 'rgba(238, 197, 102, 1)',
].reverse() ].reverse(),
} },
}, },
splitArea: { splitArea: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(238, 197, 102, 0.5)' color: 'rgba(238, 197, 102, 0.5)',
} },
} },
}, },
series: [ series: [
{ {
@ -198,11 +198,11 @@ const options = {
data: dataBJ, data: dataBJ,
symbol: 'none', symbol: 'none',
itemStyle: { itemStyle: {
color: '#F9713C' color: '#F9713C',
}, },
areaStyle: { areaStyle: {
opacity: 0.1 opacity: 0.1,
} },
}, },
{ {
name: 'Shanghai', name: 'Shanghai',
@ -211,11 +211,11 @@ const options = {
data: dataSH, data: dataSH,
symbol: 'none', symbol: 'none',
itemStyle: { itemStyle: {
color: '#B3E4A1' color: '#B3E4A1',
}, },
areaStyle: { areaStyle: {
opacity: 0.05 opacity: 0.05,
} },
}, },
{ {
name: 'Guangzhou', name: 'Guangzhou',
@ -224,25 +224,24 @@ const options = {
data: dataGZ, data: dataGZ,
symbol: 'none', symbol: 'none',
itemStyle: { itemStyle: {
color: 'rgb(238, 197, 102)' color: 'rgb(238, 197, 102)',
}, },
areaStyle: { areaStyle: {
opacity: 0.05 opacity: 0.05,
},
},
],
} }
} let chart: EChartsType
] const initChart = () => {
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

53
src/views/charts/components/simple/scatter.vue
View File

@ -1,40 +1,40 @@
<template> <template>
<div :id="id" :class="className" :style="{height:height,width:width}" /> <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import {EChartsType} from "echarts/core"; import { EChartsType } from 'echarts/core'
import {onMounted} from "vue"; import { onMounted } from 'vue'
let props = defineProps({ let props = defineProps({
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
config:{ config: {
type: Object, type: Object,
default: ()=>{} default: () => {},
}, },
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart',
}, },
width: { width: {
type: String, type: String,
default: '200px' default: '200px',
}, },
height: { height: {
type: String, type: String,
default: '200px' default: '200px',
} },
}) })
const options = { const options = {
grid: { grid: {
top: 10, top: 10,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true,
}, },
xAxis: {}, xAxis: {},
yAxis: {}, yAxis: {},
@ -63,23 +63,22 @@ const options = {
[12.0, 6.26], [12.0, 6.26],
[12.0, 8.84], [12.0, 8.84],
[7.08, 5.82], [7.08, 5.82],
[5.02, 5.68] [5.02, 5.68],
],
type: 'scatter',
},
], ],
type: 'scatter'
} }
] let chart: EChartsType
}; const initChart = () => {
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id)) let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options) chart.setOption(options)
return chart return chart
} }
onMounted(()=>{ onMounted(() => {
chart = initChart() chart = initChart()
window.addEventListener('resize',function (){ window.addEventListener('resize', function () {
chart&&chart.resize() chart && chart.resize()
})
}) })
})
</script> </script>

16
src/views/charts/line.vue
View File

@ -5,20 +5,18 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Chart from '@/components/Charts/LineMarker.vue'
import Chart from '@/components/Charts/LineMarker.vue' // export default {
// // name: 'LineChart',
// export default { // // components: { Chart }
// // name: 'LineChart', // }
// // components: { Chart }
// }
</script> </script>
<style scoped> <style scoped>
.chart-container{ .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100vh - 130px); height: calc(100vh - 130px);
} }
</style> </style>

10
src/views/charts/map.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<div class="echarts-map"> <div class="echarts-map">
<map-charts height="100%" width="100%" id="sankey"/> <map-charts height="100%" width="100%" id="sankey" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MapCharts from './components/map/index.vue' import MapCharts from './components/map/index.vue'
</script> </script>
<style> <style>
.echarts-map{ .echarts-map {
height: calc(100vh - 150px); height: calc(100vh - 150px);
} }
</style> </style>

13
src/views/charts/migration.vue
View File

@ -1,31 +1,30 @@
<template> <template>
<div class="echarts-map"> <div class="echarts-map">
<el-card class="info">Echarts 实现飞线图、地图增加图标、高亮</el-card> <el-card class="info">Echarts 实现飞线图、地图增加图标、高亮</el-card>
<migration-charts height="100%" width="100%" id="migration"/> <migration-charts height="100%" width="100%" id="migration" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MigrationCharts from './components/migration/index.vue' import MigrationCharts from './components/migration/index.vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echarts-map{ .echarts-map {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: calc(100vh - 93px); height: calc(100vh - 93px);
position: relative; position: relative;
.info{ .info {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
font-weight: bold; font-weight: bold;
z-index: 999; z-index: 999;
} }
::v-deep(.el-card){ ::v-deep(.el-card) {
border-radius: 0; border-radius: 0;
} }
} }
</style> </style>

65
src/views/charts/simple.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<u-container-layout style="width: 100%;"> <u-container-layout style="width: 100%">
<el-row class="row-bg" :gutter="10"> <el-row class="row-bg" :gutter="10">
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card"> <el-card class="box-card">
@ -8,7 +8,7 @@
<span>折线图</span> <span>折线图</span>
</div> </div>
</template> </template>
<line-charts height="200px" width="100%"/> <line-charts height="200px" width="100%" />
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
@ -18,8 +18,8 @@
<span>柱状图</span> <span>柱状图</span>
</div> </div>
</template> </template>
<bar-charts height="200px" width="100%" id="bar"/> <bar-charts height="200px" width="100%" id="bar" /> </el-card
</el-card></el-col> ></el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
@ -27,7 +27,7 @@
<span>饼图</span> <span>饼图</span>
</div> </div>
</template> </template>
<pie-charts height="200px" width="100%" id="pie"/> <pie-charts height="200px" width="100%" id="pie" />
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
@ -37,7 +37,7 @@
<span>散点图</span> <span>散点图</span>
</div> </div>
</template> </template>
<scatter-charts height="200px" width="100%" id="scatter"/> <scatter-charts height="200px" width="100%" id="scatter" />
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
@ -47,7 +47,7 @@
<span>仪表盘</span> <span>仪表盘</span>
</div> </div>
</template> </template>
<gauge-charts height="200px" width="100%" id="gauge"/> <gauge-charts height="200px" width="100%" id="gauge" />
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
@ -57,7 +57,7 @@
<span>漏斗图</span> <span>漏斗图</span>
</div> </div>
</template> </template>
<funnel-charts height="200px" width="100%" id="funnel"/> <funnel-charts height="200px" width="100%" id="funnel" />
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
@ -67,19 +67,19 @@
<span>K 线图</span> <span>K 线图</span>
</div> </div>
</template> </template>
<candlestick-charts height="200px" width="100%" id="candlestick"/> <candlestick-charts height="200px" width="100%" id="candlestick" />
</el-card> </el-card>
</el-col> </el-col>
<!-- <el-col :xs="24" :sm="12" :lg="8">--> <!-- <el-col :xs="24" :sm="12" :lg="8">-->
<!-- <el-card class="box-card">--> <!-- <el-card class="box-card">-->
<!-- <template #header>--> <!-- <template #header>-->
<!-- <div class="card-header">--> <!-- <div class="card-header">-->
<!-- <span>雷达图</span>--> <!-- <span>雷达图</span>-->
<!-- </div>--> <!-- </div>-->
<!-- </template>--> <!-- </template>-->
<!-- <radar-charts height="200px" width="100%" id="radar"/>--> <!-- <radar-charts height="200px" width="100%" id="radar"/>-->
<!-- </el-card>--> <!-- </el-card>-->
<!-- </el-col>--> <!-- </el-col>-->
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
@ -87,7 +87,7 @@
<span>雷达图</span> <span>雷达图</span>
</div> </div>
</template> </template>
<graph-charts height="200px" width="100%" id="graph"/> <graph-charts height="200px" width="100%" id="graph" />
</el-card> </el-card>
</el-col> </el-col>
@ -98,13 +98,10 @@
<span>虚线柱状图效果</span> <span>虚线柱状图效果</span>
</div> </div>
</template> </template>
<pictorial-bar height="200px" width="100%" id="pictorial"/> <pictorial-bar height="200px" width="100%" id="pictorial" />
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</u-container-layout> </u-container-layout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -118,28 +115,26 @@
import RadarCharts from './components/simple/radar.vue' import RadarCharts from './components/simple/radar.vue'
import GraphCharts from './components/simple/graph.vue' import GraphCharts from './components/simple/graph.vue'
import PictorialBarCharts from './components/simple/pictorialBar.vue' import PictorialBarCharts from './components/simple/pictorialBar.vue'
import PictorialBar from "@/views/charts/components/simple/pictorialBar.vue"; import PictorialBar from '@/views/charts/components/simple/pictorialBar.vue'
</script> </script>
<style> <style>
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.text { .text {
font-size: 14px; font-size: 14px;
} }
.item { .item {
margin-bottom: 18px; margin-bottom: 18px;
} }
.box-card { .box-card {
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; width: 100%;
} }
</style> </style>

20
src/views/chat/components/u-chartBox/chat.js
View File

@ -1,15 +1,15 @@
export const chatData = [ export const chatData = [
{ {
is_self:0, is_self: 0,
created_at:'2022-03-11', created_at: '2022-03-11',
content:'hello 你好呀!', content: 'hello 你好呀!',
id:1 id: 1,
}, },
{ {
is_self:1, is_self: 1,
created_at:'2022-03-11', created_at: '2022-03-11',
content:'hello 你好呀!', content: 'hello 你好呀!',
id:2, id: 2,
type:1, // 文字 type: 1, // 文字
} },
] ]

206
src/views/chat/components/u-chartBox/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="g-container-chat"> <div class="g-container-chat">
<div class="g-layout-content-center" style="width:100%;" ref="chatContentBoxs"> <div class="g-layout-content-center" style="width: 100%" ref="chatContentBoxs">
<div v-for="item,index in chatDatas" :key="item.id" style="padding-top: 15px;"> <div v-for="(item, index) in chatDatas" :key="item.id" style="padding-top: 15px">
<div class="from_user_info" v-if="item.is_self===0"> <div class="from_user_info" v-if="item.is_self === 0">
<div class="contact-nickname">{{ item.created_at }} 林峰</div> <div class="contact-nickname">{{ item.created_at }} 林峰</div>
<div class="receive-message-wrap"> <div class="receive-message-wrap">
<div class="avatar-show"> <div class="avatar-show">
<img src="@/assets/image/avator.png"/> <img src="@/assets/image/avator.png" />
</div> </div>
<div style="position: relative; display: flex"> <div style="position: relative; display: flex">
<div class="receive-message-info" v-html="item.content"></div> <div class="receive-message-info" v-html="item.content"></div>
@ -17,53 +17,56 @@
<div class="contact-nickname">{{ item.created_at }} 林峰</div> <div class="contact-nickname">{{ item.created_at }} 林峰</div>
<div class="receive-message-wrap public-show-pic"> <div class="receive-message-wrap public-show-pic">
<div style="position: relative; display: flex"> <div style="position: relative; display: flex">
<div class="receive-message-info" v-if="item.type==1"> <div class="receive-message-info" v-if="item.type == 1">
<div class="text-content" v-html="item.content"></div> <div class="text-content" v-html="item.content"></div>
</div> </div>
<div class="public-show-pic" v-else-if="item.type===2"> <div class="public-show-pic" v-else-if="item.type === 2">
<el-image :src="item.content" :preview-src-list="[item.content]" style="max-width:200px;" :data-resid="Date.now()"/> <el-image
:src="item.content"
:preview-src-list="[item.content]"
style="max-width: 200px"
:data-resid="Date.now()"
/>
</div> </div>
</div> </div>
<div class="avatar-show"> <div class="avatar-show">
<img src="@/assets/image/avator.png"/> <img src="@/assets/image/avator.png" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<u-toolbar @insert="insertInput" @upload="upload"/> <u-toolbar @insert="insertInput" @upload="upload" />
<div <div
@blur="contentBlur" @blur="contentBlur"
ref="contenteditableInputs" ref="contenteditableInputs"
class="g-chat-container-footer-input" class="g-chat-container-footer-input"
contenteditable=true></div> contenteditable="true"
></div>
<div class="g-chat-container-footer-btn"> <div class="g-chat-container-footer-btn">
<div class="" style="margin-right:10px"> <div class="" style="margin-right: 10px"> Ctrl+V粘贴, Ctrl+Enter换行 </div>
Ctrl+V粘贴, Ctrl+Enter换行
</div>
<el-button @click="sendInfoAction">发送</el-button> <el-button @click="sendInfoAction">发送</el-button>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {onMounted,ref,nextTick} from 'vue' import { onMounted, ref, nextTick } from 'vue'
import UToolbar from '../u-toolbar/index.vue' import UToolbar from '../u-toolbar/index.vue'
import defalutAvator from '@/assets/image/avator.png' import defalutAvator from '@/assets/image/avator.png'
import {chatData} from './chat.js' import { chatData } from './chat.js'
import {ElMessage} from "element-plus"; import { ElMessage } from 'element-plus'
import dayjs from "dayjs"; import dayjs from 'dayjs'
const range = ref<HTMLElement|null>(null) const range = ref<HTMLElement | null>(null)
const selection = ref<any>(null) const selection = ref<any>(null)
const chatDatas = ref<any>(chatData) const chatDatas = ref<any>(chatData)
const defalutAvatorImg = ref<any>(defalutAvator) const defalutAvatorImg = ref<any>(defalutAvator)
const contenteditableInputs = ref<HTMLElement|null>(null) const contenteditableInputs = ref<HTMLElement | null>(null)
const chatContentBoxs = ref<HTMLElement|null>(null) const chatContentBoxs = ref<HTMLElement | null>(null)
const preview_src_data = ref<string[]>([]) const preview_src_data = ref<string[]>([])
const focusContentEditable = ()=>{ const focusContentEditable = () => {
const editor = contenteditableInputs.value const editor = contenteditableInputs.value
editor?.focus() editor?.focus()
// 获取选中的元素 // 获取选中的元素
@ -71,13 +74,15 @@
range.value = selection.value.getRangeAt(0) range.value = selection.value.getRangeAt(0)
} }
const keepLastIndex = (obj)=> { const keepLastIndex = (obj) => {
if (window.getSelection) { // ie11 10 9 ff safari if (window.getSelection) {
// ie11 10 9 ff safari
obj.focus() // 解决ff不获取焦点无法定位问题 obj.focus() // 解决ff不获取焦点无法定位问题
let range = window.getSelection() // 创建range let range = window.getSelection() // 创建range
range.selectAllChildren(obj) // range 选择obj下所有子内容 range.selectAllChildren(obj) // range 选择obj下所有子内容
range.collapseToEnd() // 光标移至最后 range.collapseToEnd() // 光标移至最后
} else if (document.selection) { // ie10 9 8 7 6 5 } else if (document.selection) {
// ie10 9 8 7 6 5
let range = document.selection.createRange() // 创建选择对象 let range = document.selection.createRange() // 创建选择对象
// var range = document.body.createTextRange(); // var range = document.body.createTextRange();
range.moveToElementText(obj) // range定位到obj range.moveToElementText(obj) // range定位到obj
@ -86,7 +91,7 @@
} }
} }
const setCursor =(node?:any, before?:boolean)=> { const setCursor = (node?: any, before?: boolean) => {
/** /**
* node 为传入的节点，不传则foucs到之前保存的位置 * node 为传入的节点，不传则foucs到之前保存的位置
* before 控制折叠方向 * before 控制折叠方向
@ -106,7 +111,7 @@
selection.value.addRange(range.value) selection.value.addRange(range.value)
} }
} }
const contentBlur = ()=>{ const contentBlur = () => {
/** /**
* 每次焦点移出都要保存一次当前 range ，后面好放回来 * 每次焦点移出都要保存一次当前 range ，后面好放回来
* 由于输入框以外的点击都会使输入框失去焦点，不知道会有什么操作，故勤保存 * 由于输入框以外的点击都会使输入框失去焦点，不知道会有什么操作，故勤保存
@ -118,7 +123,7 @@
* @func 聊天框聚焦 * @func 聊天框聚焦
* @param e * @param e
*/ */
const contentFoucs = (e)=> { const contentFoucs = (e) => {
/** /**
* range更新到点击的位置 * range更新到点击的位置
* 点到图片就根据点击位置和图片大小设置一个合理的位置(前或后) * 点到图片就根据点击位置和图片大小设置一个合理的位置(前或后)
@ -131,30 +136,30 @@
} }
} }
const insertInput = (node?:any,type?:string)=>{ const insertInput = (node?: any, type?: string) => {
if(type==='IMG'){ if (type === 'IMG') {
range.value.insertNode(node) range.value.insertNode(node)
setCursor(node, false) setCursor(node, false)
}else { } else {
setCursor() setCursor()
} }
} }
const sendMessageData = (content:string,type:number=1)=>{ const sendMessageData = (content: string, type = 1) => {
const day = dayjs().format('YYYY-MM-DD'); const day = dayjs().format('YYYY-MM-DD')
return{ return {
is_self:1, is_self: 1,
created_at:day, created_at: day,
content, content,
type, type,
id:Date.now()+Math.random() id: Date.now() + Math.random(),
} }
} }
const getPreviewList = ()=>{ const getPreviewList = () => {
preview_src_data.value = [] preview_src_data.value = []
nextTick(()=>{ nextTick(() => {
chatDatas.value.forEach(item=>{ chatDatas.value.forEach((item) => {
if (item.type === 2) { if (item.type === 2) {
preview_src_data.value.push(item.content) preview_src_data.value.push(item.content)
} }
@ -162,7 +167,7 @@
}) })
} }
const upload = (newBase64:string)=>{ const upload = (newBase64: string) => {
const value = contenteditableInputs.value const value = contenteditableInputs.value
let image = new Image() let image = new Image()
image.onload = function () { image.onload = function () {
@ -174,7 +179,7 @@
image.width = 100 image.width = 100
} }
const scrollHeight = ()=>{ const scrollHeight = () => {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
chatContentBoxs.value.scrollTop = chatContentBoxs.value.scrollHeight chatContentBoxs.value.scrollTop = chatContentBoxs.value.scrollHeight
@ -182,33 +187,33 @@
}) })
} }
const sendInfoAction = ()=>{ const sendInfoAction = () => {
const value = contenteditableInputs.value.innerHTML const value = contenteditableInputs.value.innerHTML
console.log('value===',value) console.log('value===', value)
if(!value){ if (!value) {
setCursor() setCursor()
return ElMessage.error('请填写发送内容') return ElMessage.error('请填写发送内容')
} }
let reg = /<img.*?src="(.*?)".*?title="(.*?)".*?>/ig let reg = /<img.*?src="(.*?)".*?title="(.*?)".*?>/gi
let reg1 = /<img.*?src="(.*?)".*?insert="(.*?)">/ig let reg1 = /<img.*?src="(.*?)".*?insert="(.*?)">/gi
let content = value.replace(reg, '[$2]') let content = value.replace(reg, '[$2]')
let data = [] let data = []
let flag = content.match(reg1) let flag = content.match(reg1)
console.log('content',flag) console.log('content', flag)
if(flag){ if (flag) {
// 过滤图片进行分割 // 过滤图片进行分割
let content2 = content.replace(reg1, (item, $1) => { let content2 = content.replace(reg1, (item, $1) => {
return `/b/~${$1}/b/~` return `/b/~${$1}/b/~`
}) })
let splitImg = content2.split('/b/~') let splitImg = content2.split('/b/~')
for(let item of splitImg){ for (let item of splitImg) {
if(item){ if (item) {
chatDatas.value.push(sendMessageData(item,2)) chatDatas.value.push(sendMessageData(item, 2))
} }
} }
}else { } else {
data = sendMessageData(value) data = sendMessageData(value)
chatDatas.value.push(data) chatDatas.value.push(data)
} }
@ -216,23 +221,22 @@
getPreviewList() getPreviewList()
contenteditableInputs.value.innerHTML = '' contenteditableInputs.value.innerHTML = ''
console.log('content--',chatDatas.value) console.log('content--', chatDatas.value)
scrollHeight() scrollHeight()
} }
onMounted(()=>{ onMounted(() => {
nextTick(()=>{ nextTick(() => {
focusContentEditable() focusContentEditable()
}) })
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.g-layout-content-center{ .g-layout-content-center {
min-height: 300px; min-height: 300px;
padding:0 15px 15px; padding: 0 15px 15px;
flex: auto; flex: auto;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
@ -241,9 +245,11 @@
border-right: 1px solid #ededed; border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed; border-bottom: 1px solid #ededed;
box-sizing: border-box; box-sizing: border-box;
} }
[contenteditable]:focus{outline: none;} [contenteditable]:focus {
.g-chat-container-footer-input{ outline: none;
}
.g-chat-container-footer-input {
word-break: break-all; word-break: break-all;
padding: 8px; padding: 8px;
white-space: pre-wrap; white-space: pre-wrap;
@ -251,25 +257,24 @@
min-height: 120px; min-height: 120px;
flex: 1; flex: 1;
background: #f7f6f4; background: #f7f6f4;
::v-deep(.at-logo){ ::v-deep(.at-logo) {
padding-right: 5px; padding-right: 5px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
}
} .g-chat-container-footer-btn {
.g-chat-container-footer-btn{
height: 50px; height: 50px;
background: #f7f6f4; background: #f7f6f4;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
flex-shrink: 0; flex-shrink: 0;
::v-deep(.el-button){ ::v-deep(.el-button) {
padding: 8px 20px; padding: 8px 20px;
margin-right: 15px; margin-right: 15px;
} }
} }
.g-layout-content-chat-util{ .g-layout-content-chat-util {
height: 46px; height: 46px;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -277,11 +282,11 @@
position: relative; position: relative;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
background: white; background: white;
.item-left{ .item-left {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.upload-picture{ .upload-picture {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -289,7 +294,7 @@
height: 100%; height: 100%;
width: 40px; width: 40px;
} }
.screenshot-upload{ .screenshot-upload {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -297,10 +302,10 @@
height: 100%; height: 100%;
width: 40px; width: 40px;
} }
.recoding-chatbox{ .recoding-chatbox {
position: relative; position: relative;
} }
.emoje{ .emoje {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
@ -310,7 +315,7 @@
cursor: pointer; cursor: pointer;
color: grey; color: grey;
} }
.upload-picture{ .upload-picture {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -319,18 +324,18 @@
justify-content: center; justify-content: center;
} }
.emoje-border-wrap{ .emoje-border-wrap {
top: -364px; top: -364px;
left: 0; left: 0;
position: absolute; position: absolute;
width: 372px; width: 372px;
padding: 10px; padding: 10px;
z-index: 9; z-index: 9;
border: 1px solid #D9D9D9; border: 1px solid #d9d9d9;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
.title-emoje{ .title-emoje {
cursor: pointer; cursor: pointer;
float: left; float: left;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
@ -349,10 +354,9 @@
/*}*/ /*}*/
} }
} }
} }
.from_user_info {
.from_user_info{
width: 100%; width: 100%;
// overflow: hidden; // overflow: hidden;
float: left; float: left;
@ -384,40 +388,40 @@
} }
} }
} }
.receive-message-wrap{ .receive-message-wrap {
display: flex; display: flex;
} }
.text-content{ .text-content {
background: #fff; background: #fff;
word-break: break-all; word-break: break-all;
padding: 5px 10px; padding: 5px 10px;
max-width: 300px; max-width: 300px;
white-space: pre-wrap; white-space: pre-wrap;
} }
.receive-message-info{ .receive-message-info {
background: white; background: white;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 5px; padding: 0 5px;
border-radius: 4px; border-radius: 4px;
} }
.contact-nickname{ .contact-nickname {
margin-bottom: 5px; margin-bottom: 5px;
color: #b4b4b4; color: #b4b4b4;
} }
.avatar-show{ .avatar-show {
flex-shrink:0 ; flex-shrink: 0;
width: 35px; width: 35px;
height: 35px; height: 35px;
margin-right: 10px; margin-right: 10px;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.ower-user_info{ .ower-user_info {
font-size: 12px; font-size: 12px;
display: flex; display: flex;
width: 100%; width: 100%;
@ -425,39 +429,39 @@
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
margin-top: 10px; margin-top: 10px;
.text-content{ .text-content {
word-break: break-all; word-break: break-all;
padding: 5px; padding: 5px;
white-space:pre-wrap; white-space: pre-wrap;
max-width: 300px; max-width: 300px;
} }
.receive-message-wrap{ .receive-message-wrap {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center align-items: center;
} }
.receive-message-info{ .receive-message-info {
background: #9eea6a; background: #9eea6a;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 5px; padding: 0 5px;
border-radius: 4px; border-radius: 4px;
} }
.contact-nickname{ .contact-nickname {
text-align: right; text-align: right;
margin-bottom: 5px; margin-bottom: 5px;
color: #b4b4b4; color: #b4b4b4;
} }
.avatar-show{ .avatar-show {
flex-shrink:0 ; flex-shrink: 0;
width: 35px; width: 35px;
height: 35px; height: 35px;
margin-left: 10px; margin-left: 10px;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
</style> </style>

77
src/views/chat/components/u-toolbar/index.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div class="g-layout-content-chat-util"> <div class="g-layout-content-chat-util">
<div class="item-left"> <div class="item-left">
<div class="emoje" title="选择表情" @click.stop="selectEmojiAction"> <div class="emoje" title="选择表情" @click.stop="selectEmojiAction">
<img src="static/face/emoji-after.png" alt="" style="width:20px"> <img src="static/face/emoji-after.png" alt="" style="width: 20px" />
</div> </div>
<div class="upload-picture" title="上传图片"> <div class="upload-picture" title="上传图片">
<el-upload action multiple :show-file-list="false" :before-upload="beforeUploadAction"> <el-upload action multiple :show-file-list="false" :before-upload="beforeUploadAction">
<el-icon style="font-size:20px"><FolderOpened/></el-icon> <el-icon style="font-size: 20px"><FolderOpened /></el-icon>
</el-upload> </el-upload>
</div> </div>
<div class="emoje-border-wrap" v-show="isShowEmoji"> <div class="emoje-border-wrap" v-show="isShowEmoji">
<div
<div class="title-emoje" class="title-emoje"
v-for="(item,index) in emojis" v-for="(item, index) in emojis"
@click.stop="selectSigleEmojeAction($event,item)" @click.stop="selectSigleEmojeAction($event, item)"
:key="index"> :key="index"
<img :src="`static/face/${item}.png`" :title="item"/> >
<img :src="`static/face/${item}.png`" :title="item" />
</div> </div>
</div> </div>
</div> </div>
@ -24,60 +24,57 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref,defineEmits,onMounted } from 'vue' import { ref, defineEmits, onMounted } from 'vue'
import { import { FolderOpened } from '@element-plus/icons-vue'
FolderOpened import { ElMessage } from 'element-plus'
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import emoji from '@/utils/emojis' import emoji from '@/utils/emojis'
const emojis = ref<string[]>(emoji.imgs) const emojis = ref<string[]>(emoji.imgs)
const isShowEmoji = ref<boolean>(false) const isShowEmoji = ref<boolean>(false)
const emit = defineEmits(['insert','upload']) const emit = defineEmits(['insert', 'upload'])
const selectSigleEmojeAction = (e, item) =>{ const selectSigleEmojeAction = (e, item) => {
if (e.target.tagName === 'IMG') { if (e.target.tagName === 'IMG') {
let node = e.target.cloneNode(true) let node = e.target.cloneNode(true)
node.title = item node.title = item
emit('insert',node,'IMG') emit('insert', node, 'IMG')
} else { } else {
emit('insert',node) emit('insert', node)
} }
} }
const selectEmojiAction =()=> { const selectEmojiAction = () => {
isShowEmoji.value = true isShowEmoji.value = true
emit('insert',null,null) emit('insert', null, null)
} }
const beforeUploadAction = (file, fileList)=>{ const beforeUploadAction = (file, fileList) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var reader = new FileReader() var reader = new FileReader()
let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i) let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
reader.readAsDataURL(file) reader.readAsDataURL(file)
let name = file.name let name = file.name
if(reg.test(name)){ if (reg.test(name)) {
reader.onload = (e:FileReader)=>{ reader.onload = (e: FileReader) => {
resolve(e.target.result) resolve(e.target.result)
emit('upload',e.target.result) emit('upload', e.target.result)
} }
}else{ } else {
ElMessage.error('请上传图片') ElMessage.error('请上传图片')
reject() reject()
} }
}) })
} }
onMounted(()=>{ onMounted(() => {
window.onclick = function (event) { window.onclick = function (event) {
isShowEmoji.value = false isShowEmoji.value = false
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.g-layout-content-chat-util{ .g-layout-content-chat-util {
height: 46px; height: 46px;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -85,11 +82,11 @@
position: relative; position: relative;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
background: white; background: white;
.item-left{ .item-left {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.upload-picture{ .upload-picture {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -97,7 +94,7 @@
height: 100%; height: 100%;
width: 40px; width: 40px;
} }
.screenshot-upload{ .screenshot-upload {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -105,10 +102,10 @@
height: 100%; height: 100%;
width: 40px; width: 40px;
} }
.recoding-chatbox{ .recoding-chatbox {
position: relative; position: relative;
} }
.emoje{ .emoje {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
@ -118,7 +115,7 @@
cursor: pointer; cursor: pointer;
color: grey; color: grey;
} }
.upload-picture{ .upload-picture {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -127,18 +124,18 @@
justify-content: center; justify-content: center;
} }
.emoje-border-wrap{ .emoje-border-wrap {
top: -121px; top: -121px;
left: 0; left: 0;
position: absolute; position: absolute;
width: 372px; width: 372px;
padding: 10px; padding: 10px;
z-index: 9; z-index: 9;
border: 1px solid #D9D9D9; border: 1px solid #d9d9d9;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
.title-emoje{ .title-emoje {
cursor: pointer; cursor: pointer;
float: left; float: left;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
@ -157,5 +154,5 @@
/*}*/ /*}*/
} }
} }
} }
</style> </style>

10
src/views/chat/index.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<u-container-layout> <u-container-layout>
<div> <div>
<div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div> <div style="margin-bottom: 15px"
<u-chat-box/> >聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div
>
<u-chat-box />
</div> </div>
</u-container-layout> </u-container-layout>
</template> </template>
@ -11,6 +13,4 @@
import UChatBox from './components/u-chartBox/index.vue' import UChatBox from './components/u-chartBox/index.vue'
</script> </script>
<style> <style></style>
</style>

10
src/views/clipboard/index.vue
View File

@ -2,24 +2,24 @@
<u-container-layout> <u-container-layout>
<el-card style="margin-bottom: 20px"> <el-card style="margin-bottom: 20px">
<div style="margin-bottom: 10px">输入内容，并点击复制按钮</div> <div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
<el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" /> <el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
<el-button type="primary" @click="handleCopy(inputData,$event)"> <el-button type="primary" @click="handleCopy(inputData, $event)">
<el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制 <el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
</el-button> </el-button>
</el-card> </el-card>
<el-card> <el-card>
<div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div> <div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
<el-input v-model="testValue" placeholder="请输入" style="width:400px;max-width:100%;" /> <el-input v-model="testValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
</el-card> </el-card>
</u-container-layout> </u-container-layout>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref} from 'vue' import { ref } from 'vue'
import clip from '@/utils/clipboard' import clip from '@/utils/clipboard'
const inputData = ref('https://github.com/zouzhibin/vue-admin-perfect') const inputData = ref('https://github.com/zouzhibin/vue-admin-perfect')
const testValue = ref('') const testValue = ref('')
const handleCopy = (text, event)=> { const handleCopy = (text, event) => {
clip(text, event) clip(text, event)
} }
</script> </script>

78
src/views/components-demo/button.vue
View File

@ -4,8 +4,7 @@
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>基础用法 <span>基础用法 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
@ -28,20 +27,19 @@
<el-button type="info" round class="item">Info</el-button> <el-button type="info" round class="item">Info</el-button>
<el-button type="warning" round class="item">Warning</el-button> <el-button type="warning" round class="item">Warning</el-button>
<el-button type="danger" round class="item">Danger</el-button> <el-button type="danger" round class="item">Danger</el-button>
<el-button :icon="Search" circle class="item"/> <el-button :icon="Search" circle class="item" />
<el-button type="primary" :icon="Edit" circle class="item"/> <el-button type="primary" :icon="Edit" circle class="item" />
<el-button type="success" :icon="Check" circle class="item"/> <el-button type="success" :icon="Check" circle class="item" />
<el-button type="info" :icon="Message" circle class="item"/> <el-button type="info" :icon="Message" circle class="item" />
<el-button type="warning" :icon="Star" circle class="item"/> <el-button type="warning" :icon="Star" circle class="item" />
<el-button type="danger" :icon="Delete" circle class="item"/> <el-button type="danger" :icon="Delete" circle class="item" />
</div> </div>
</el-card> </el-card>
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>禁用状态 <span>禁用状态 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
@ -63,8 +61,7 @@
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>文字按钮 <span>文字按钮 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
@ -76,14 +73,13 @@
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>图标按钮 <span>图标按钮 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
<el-button type="primary" :icon="Edit" class="item"/> <el-button type="primary" :icon="Edit" class="item" />
<el-button type="primary" :icon="Share" class="item"/> <el-button type="primary" :icon="Share" class="item" />
<el-button type="primary" :icon="Delete" class="item"/> <el-button type="primary" :icon="Delete" class="item" />
<el-button type="primary" :icon="Search" class="item">Search</el-button> <el-button type="primary" :icon="Search" class="item">Search</el-button>
<el-button type="primary" class="item"> <el-button type="primary" class="item">
Upload<el-icon class="el-icon--right"><Upload /></el-icon> Upload<el-icon class="el-icon--right"><Upload /></el-icon>
@ -94,8 +90,7 @@
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>按钮组 <span>按钮组 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
@ -103,17 +98,16 @@
<el-button type="primary" class="item"> <el-button type="primary" class="item">
下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon> 下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
</el-button> </el-button>
<el-button type="primary" :icon="Edit" class="item"/> <el-button type="primary" :icon="Edit" class="item" />
<el-button type="primary" :icon="Share" class="item"/> <el-button type="primary" :icon="Share" class="item" />
<el-button type="primary" :icon="Delete" class="item"/> <el-button type="primary" :icon="Delete" class="item" />
</div> </div>
</el-card> </el-card>
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>加载中 <span>加载中 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
@ -146,8 +140,7 @@
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>自定义颜色 <span>自定义颜色 </span>
</span>
</div> </div>
</template> </template>
<div> <div>
@ -155,43 +148,32 @@
<el-button color="#626aef" plain class="item">Plain</el-button> <el-button color="#626aef" plain class="item">Plain</el-button>
<el-button color="#626aef" disabled class="item">Disabled</el-button> <el-button color="#626aef" disabled class="item">Disabled</el-button>
<el-button color="#626aef" disabled plain class="item" <el-button color="#626aef" disabled plain class="item">Disabled Plain</el-button>
>Disabled Plain</el-button
>
</div> </div>
</el-card> </el-card>
</div> </div>
</u-container-layout> </u-container-layout>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import { Check, Delete, Edit, Message, Search, Share, Star } from '@element-plus/icons-vue'
Check,
Delete,
Edit,
Message,
Search,
Share,
Star
} from '@element-plus/icons-vue'
</script> </script>
<style> <style>
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.text { .text {
font-size: 14px; font-size: 14px;
} }
.item { .item {
margin-bottom: 18px; margin-bottom: 18px;
} }
.box-card { .box-card {
width: 100%; width: 100%;
margin-bottom:20px; margin-bottom: 20px;
} }
</style> </style>

Some files were not shown because too many files have changed in this diff Show More