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',
};

46
src/App.vue
View File

@ -3,27 +3,27 @@
</template> </template>
<style lang="scss"> <style lang="scss">
#app { #app {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/*background: #f6f8f9;*/ /*background: #f6f8f9;*/
/*background: goldenrod;*/ /*background: goldenrod;*/
font-family: Avenir, sans-serif; font-family: Avenir, sans-serif;
-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,
height: 100%; body {
background: #f6f8f9; height: 100%;
background: #f6f8f9;
} }
.el-pager li:focus{ .el-pager li:focus {
border: none; border: none;
} }
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
</style> </style>

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

@ -1,155 +1,162 @@
<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: {
type: String,
default: 'chart',
},
width: {
type: String,
default: '200px',
},
height: {
type: String,
default: '200px',
},
}, },
id: { data() {
type: String, return {
default: 'chart' chart: null,
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
} }
this.chart.setOption({ },
backgroundColor: '#08263a', mounted() {
grid: { this.initChart()
left: '5%', },
right: '5%' beforeDestroy() {
}, if (!this.chart) {
xAxis: [{ return
show: false, }
data: xAxisData this.chart.dispose()
}, { this.chart = null
show: false, },
data: xAxisData methods: {
}], initChart() {
visualMap: { this.chart = echarts.init(document.getElementById(this.id))
show: false,
min: 0, const xAxisData = []
max: 50, const data = []
dimension: 0, const data2 = []
inRange: { for (let i = 0; i < 50; i++) {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] xAxisData.push(i)
} data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
}, data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
} }
}) this.chart.setOption({
} backgroundColor: '#08263a',
grid: {
left: '5%',
right: '5%',
},
xAxis: [
{
show: false,
data: xAxisData,
},
{
show: false,
data: xAxisData,
},
],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'],
},
},
yAxis: {
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#4a657a',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f',
},
},
axisTick: {
show: false,
},
},
series: [
{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111',
},
},
},
{
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent',
},
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000',
},
},
},
{
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5,
},
},
},
],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
},
})
},
},
} }
}
</script> </script>

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

@ -1,230 +1,277 @@
<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',
title: { title: {
top: 20, top: 20,
text: 'Requests', text: 'Requests',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['CMCC', 'CTCC', 'CUCC'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
top: 100,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
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']
}],
yAxis: [{
type: 'value',
name: '(%)',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: { textStyle: {
fontSize: 14 fontWeight: 'normal',
} fontSize: 16,
color: '#F1F1F3',
},
left: '1%',
}, },
splitLine: { tooltip: {
lineStyle: { trigger: 'axis',
color: '#57617B' axisPointer: {
} lineStyle: {
} color: '#57617B',
}], },
series: [{ },
name: 'CMCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}, },
areaStyle: { legend: {
normal: { top: 20,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ icon: 'rect',
offset: 0, itemWidth: 14,
color: 'rgba(137, 189, 27, 0.3)' itemHeight: 5,
}, { itemGap: 13,
offset: 0.8, data: ['CMCC', 'CTCC', 'CUCC'],
color: 'rgba(137, 189, 27, 0)' right: '4%',
}], false), textStyle: {
shadowColor: 'rgba(0, 0, 0, 0.1)', fontSize: 12,
shadowBlur: 10 color: '#F1F1F3',
} },
}, },
itemStyle: { grid: {
normal: { top: 100,
color: 'rgb(137,189,27)', left: '2%',
borderColor: 'rgba(137,189,2,0.27)', right: '2%',
borderWidth: 12 bottom: '2%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
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',
],
},
],
yAxis: [
{
type: 'value',
name: '(%)',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#57617B',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
lineStyle: {
color: '#57617B',
},
},
},
],
series: [
{
name: 'CMCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)',
},
{
offset: 0.8,
color: 'rgba(137, 189, 27, 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12,
},
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
},
{
name: 'CTCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)',
},
{
offset: 0.8,
color: 'rgba(0, 136, 212, 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12,
},
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
},
{
name: 'CUCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)',
},
{
offset: 0.8,
color: 'rgba(219, 50, 51, 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12,
},
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
},
],
})
return chart
}
} watch(isCollapse, () => {
}, setTimeout(() => {
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122] chart && chart.resize()
}, { }, 300)
name: 'CTCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: 'CUCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}]
})
return chart
}
watch(isCollapse,()=>{
setTimeout(()=>{
chart&&chart.resize()
},300)
})
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
}) onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,271 +1,238 @@
<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: {
type: String,
default: 'chart',
},
width: {
type: String,
default: '200px',
},
height: {
type: String,
default: '200px',
},
}, },
id: { data() {
type: String, return {
default: 'chart' chart: null,
}
}, },
width: { mounted() {
type: String, this.initChart()
default: '200px'
}, },
height: { beforeDestroy() {
type: String, if (!this.chart) {
default: '200px' return
} }
}, this.chart.dispose()
data() { this.chart = null
return { },
chart: null methods: {
} initChart() {
}, this.chart = echarts.init(document.getElementById(this.id))
mounted() { const xData = (function () {
this.initChart() const data = []
}, for (let i = 1; i < 13; i++) {
beforeDestroy() { data.push(i + 'month')
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xData = (function() {
const data = []
for (let i = 1; i < 13; i++) {
data.push(i + 'month')
}
return data
}())
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: 'statistics',
x: '20',
top: '20',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
} }
}, return data
tooltip: { })()
trigger: 'axis', this.chart.setOption({
axisPointer: { backgroundColor: '#344b58',
title: {
text: 'statistics',
x: '20',
top: '20',
textStyle: { textStyle: {
color: '#fff' color: '#fff',
} fontSize: '22',
} },
}, subtextStyle: {
grid: { color: '#90979c',
left: '5%', fontSize: '16',
right: '5%', },
borderWidth: 0,
top: 150,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '5%',
top: '10%',
textStyle: {
color: '#90979c'
}, },
data: ['female', 'male', 'average'] tooltip: {
}, trigger: 'axis',
calculable: true, axisPointer: {
xAxis: [{ textStyle: {
type: 'category', color: '#fff',
axisLine: { },
lineStyle: { },
color: '#90979c'
}
}, },
splitLine: { grid: {
show: false left: '5%',
right: '5%',
borderWidth: 0,
top: 150,
bottom: 95,
textStyle: {
color: '#fff',
},
}, },
axisTick: { legend: {
show: false x: '5%',
top: '10%',
textStyle: {
color: '#90979c',
},
data: ['female', 'male', 'average'],
}, },
splitArea: { calculable: true,
show: false xAxis: [
}, {
axisLabel: { type: 'category',
interval: 0 axisLine: {
lineStyle: {
}, color: '#90979c',
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
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',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: 'female',
type: 'bar',
stack: 'total',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
}, },
position: 'insideTop', },
formatter(p) { splitLine: {
return p.value > 0 ? p.value : '' show: false,
} },
} axisTick: {
} show: false,
}, },
data: [ splitArea: {
709, show: false,
1917, },
2455, axisLabel: {
2610, interval: 0,
1719, },
1433, data: xData,
1544, },
3285, ],
5208, yAxis: [
3372, {
2484, type: 'value',
4078 splitLine: {
] show: false,
}, },
axisLine: {
lineStyle: {
color: '#90979c',
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
splitArea: {
show: false,
},
},
],
dataZoom: [
{
show: true,
height: 30,
xAxisIndex: [0],
bottom: 30,
start: 10,
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',
handleSize: '110%',
handleStyle: {
color: '#d3dee5',
},
textStyle: {
color: '#fff',
},
borderColor: '#90979c',
},
{
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35,
},
],
series: [
{
name: 'female',
type: 'bar',
stack: 'total',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff',
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : ''
},
},
},
},
data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
},
{ {
name: 'male', name: 'male',
type: 'bar', type: 'bar',
stack: 'total', stack: 'total',
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(0,191,183,1)', color: 'rgba(0,191,183,1)',
barBorderRadius: 0, barBorderRadius: 0,
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
formatter(p) { formatter(p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} },
} },
} },
}, },
data: [ data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
327, },
1776, {
507, name: 'average',
1200, type: 'line',
800, stack: 'total',
482, symbolSize: 10,
204, symbol: 'circle',
1390, itemStyle: {
1001, normal: {
951, color: 'rgba(252,230,48,1)',
381, barBorderRadius: 0,
220 label: {
] show: true,
}, { position: 'top',
name: 'average', formatter(p) {
type: 'line', return p.value > 0 ? p.value : ''
stack: 'total', },
symbolSize: 10, },
symbol: 'circle', },
itemStyle: { },
normal: { data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298],
color: 'rgba(252,230,48,1)', },
barBorderRadius: 0, ],
label: { })
show: true, },
position: 'top', },
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
1036,
3693,
2962,
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()
} },
} },
} }

17
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>

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

@ -5,33 +5,32 @@
</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 },
}, },
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>

42
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,13 +41,13 @@
</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;
margin-bottom: 4px; margin-bottom: 4px;
.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)
} }

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

@ -6,27 +6,32 @@ 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 {
requestAnimationFrame = window.requestAnimationFrame requestAnimationFrame = window.requestAnimationFrame
cancelAnimationFrame = window.cancelAnimationFrame cancelAnimationFrame = window.cancelAnimationFrame
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)
} }
} }

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

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

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

@ -1,65 +1,66 @@
<template> <template>
<div class="m-info"> <div class="m-info">
<el-popover <el-popover width="200px" placement="bottom">
width="200px" <template #reference>
placement="bottom" <el-badge :value="3" class="item-info-pop">
> <el-icon class="bell"><Bell /></el-icon>
<template #reference> </el-badge>
<el-badge :value="3" class="item-info-pop"> </template>
<el-icon class="bell"><Bell /></el-icon> <div>
</el-badge> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
</template> <el-tab-pane label="通知" name="first">
<div> <div class="item-child">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
<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> >
</el-tab-pane> <div class="item-child">
</el-tabs> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
</div> >
</el-popover> </el-tab-pane>
</el-tabs>
</div> </div>
</el-popover>
</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 {
.bell {
color: white;
} }
}
.transverseMenu{
.bell{
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>

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

@ -1,91 +1,94 @@
<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: {
type: Number,
default: 0,
},
type: {
type: Number,
default: 1,
},
dataInfo: {
type: Object,
default: () => {},
},
top: {
type: Number,
default: 0,
},
isViewInfo: {
type: Boolean,
default: true,
},
}, },
left: { watch: {
type: Number, left: {
default: 0 handler(newName, oldName) {
if (newName) {
this.isShow = true
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
// immediate: true
},
}, },
type: { computed: {
type: Number, style() {
default: 1 let clientHeight = document.body.clientHeight
}, let y = this.top
dataInfo: { if (clientHeight - y < 100) {
type: Object, return `left:${this.left}px;bottom:${clientHeight - y}px`
default: () => {} } else {
}, return `left:${this.left}px;top:${this.top}px`
top: {
type: Number,
default: 0
},
isViewInfo: {
type: Boolean,
default: true
}
},
watch: {
left: {
handler (newName, oldName) {
if (newName) {
this.isShow = true
} }
},
},
data() {
return {
isShow: false,
} }
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法 },
// immediate: true methods: {
} /**
},
computed: {
style () {
let clientHeight = document.body.clientHeight
let y = this.top
if (clientHeight - y < 100) {
return `left:${this.left}px;bottom:${clientHeight - y}px`
} else {
return `left:${this.left}px;top:${this.top}px`
}
}
},
data () {
return {
isShow: false
}
},
methods: {
/**
* @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
})
window.addEventListener('mousedown', function (e) {
if (e.which === 3) {
_self.isShow = false _self.isShow = false
} })
}) window.addEventListener('mousedown', function (e) {
if (e.which === 3) {
_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;
@ -94,19 +97,19 @@ export default {
//border: 1px solid #c4c4c4; //border: 1px solid #c4c4c4;
z-index: 9; z-index: 9;
//box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1); //box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
.operating { .operating {
font-size: 12px; font-size: 12px;
padding-left: 23px; padding-left: 23px;
cursor: pointer; cursor: pointer;
line-height: 27px; line-height: 27px;
} }
.operating:hover { .operating:hover {
background: #e2e2e2; background: #e2e2e2;
} }
.last-delete { .last-delete {
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
} }
} }
</style> </style>

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

@ -1,157 +1,154 @@
/* eslint-disable promise/prefer-await-to-then */ /* eslint-disable promise/prefer-await-to-then */
const methodMap = [ const methodMap = [
[ [
'requestFullscreen', 'requestFullscreen',
'exitFullscreen', 'exitFullscreen',
'fullscreenElement', 'fullscreenElement',
'fullscreenEnabled', 'fullscreenEnabled',
'fullscreenchange', 'fullscreenchange',
'fullscreenerror', 'fullscreenerror',
], ],
// New WebKit // New WebKit
[ [
'webkitRequestFullscreen', 'webkitRequestFullscreen',
'webkitExitFullscreen', 'webkitExitFullscreen',
'webkitFullscreenElement', 'webkitFullscreenElement',
'webkitFullscreenEnabled', 'webkitFullscreenEnabled',
'webkitfullscreenchange', 'webkitfullscreenchange',
'webkitfullscreenerror', 'webkitfullscreenerror',
],
], // Old WebKit
// Old WebKit [
[ 'webkitRequestFullScreen',
'webkitRequestFullScreen', 'webkitCancelFullScreen',
'webkitCancelFullScreen', 'webkitCurrentFullScreenElement',
'webkitCurrentFullScreenElement', 'webkitCancelFullScreen',
'webkitCancelFullScreen', 'webkitfullscreenchange',
'webkitfullscreenchange', 'webkitfullscreenerror',
'webkitfullscreenerror', ],
[
], 'mozRequestFullScreen',
[ 'mozCancelFullScreen',
'mozRequestFullScreen', 'mozFullScreenElement',
'mozCancelFullScreen', 'mozFullScreenEnabled',
'mozFullScreenElement', 'mozfullscreenchange',
'mozFullScreenEnabled', 'mozfullscreenerror',
'mozfullscreenchange', ],
'mozfullscreenerror', [
], 'msRequestFullscreen',
[ 'msExitFullscreen',
'msRequestFullscreen', 'msFullscreenElement',
'msExitFullscreen', 'msFullscreenEnabled',
'msFullscreenElement', 'MSFullscreenChange',
'msFullscreenEnabled', 'MSFullscreenError',
'MSFullscreenChange', ],
'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 = {
// eslint-disable-next-line default-param-last // eslint-disable-next-line default-param-last
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, {
isFullscreen: {
get: () => Boolean(document[nativeAPI.fullscreenElement]),
},
element: {
enumerable: true,
get: () => document[nativeAPI.fullscreenElement] ?? undefined,
},
isEnabled: {
enumerable: true,
// Coerce to boolean in case of old WebKit.
get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
},
});
if (!nativeAPI) {
screenfull = {isEnabled: false};
} }
Object.defineProperties(screenfull, {
isFullscreen: {
get: () => Boolean(document[nativeAPI.fullscreenElement]),
},
element: {
enumerable: true,
get: () => document[nativeAPI.fullscreenElement] ?? undefined,
},
isEnabled: {
enumerable: true,
// Coerce to boolean in case of old WebKit.
get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
},
})
export default screenfull; if (!nativeAPI) {
screenfull = { isEnabled: false }
}
export default screenfull

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

@ -1,66 +1,67 @@
<template> <template>
<div class="m-screenful"> <div class="m-screenful">
<el-icon <el-icon
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;
} }
} }

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

@ -1,126 +1,126 @@
<template> <template>
<div> <div>
<div class="m-setting-fix"> <div class="m-setting-fix">
<div class="item"> <div class="item">
<div class="item-child" @click="operator(1)"> <div class="item-child" @click="operator(1)">
<el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><brush /></el-icon> <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><brush /></el-icon>
主题配置 主题配置
</div>
<div class="item-child item-child2" @click="operator(2)">
<el-icon size="30"
color="#3698fd"
style="margin-bottom: 8px"><Link /></el-icon>
源码拷贝
</div>
</div>
</div> </div>
<el-drawer v-model="drawer" title="主题配置" size="300px"> <div class="item-child item-child2" @click="operator(2)">
<div class="drawer-item"> <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><Link /></el-icon>
<label>布局</label> 源码拷贝
<el-select v-model="layout" placeholder="请选择" style="width: 150px" @change="(val)=>changeSwitch(val,2)"> </div>
<el-option label="纵向" value="vertical"></el-option> </div>
<el-option label="横向" value="horizontal"></el-option>
</el-select>
</div>
<div class="drawer-item">
<label>标签</label>
<el-switch v-model="tag" @change="(val)=>changeSwitch(val,1)"/>
</div>
</el-drawer>
</div> </div>
<el-drawer v-model="drawer" title="主题配置" size="300px">
<div class="drawer-item">
<label>布局</label>
<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="horizontal"></el-option>
</el-select>
</div>
<div class="drawer-item">
<label>标签</label>
<el-switch v-model="tag" @change="(val) => changeSwitch(val, 1)" />
</div>
</el-drawer>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
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
return return
case 2: case 2:
window.open('https://github.com/zouzhibin/vue-admin-perfect') window.open('https://github.com/zouzhibin/vue-admin-perfect')
return return
}
} }
}
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;
z-index: 1997; z-index: 1997;
padding: 10px 0 0 0; padding: 10px 0 0 0;
margin: 0; margin: 0;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-top-left-radius: 5.5px; border-top-left-radius: 5.5px;
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;
justify-content: center;
padding: 0 8px 10px 10px;
margin: 0;
list-style: none;
}
.item-child{
color: #3698fd;
width: 60px;
height: 60px;
/*padding-top: 10px;*/
text-align: center;
display: flex;
flex-direction: column;
background: #f6f8f9;
align-items: center;
justify-content: center;
border-radius: 5.5px;
font-size: 12px;
background: #ebf5ff;
transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
justify-content: center;
padding: 0 8px 10px 10px;
margin: 0;
list-style: none;
} }
.item-child2{ .item-child {
margin-top: 10px; color: #3698fd;
color: #b37feb; width: 60px;
background: #f7f2fd; height: 60px;
transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease; /*padding-top: 10px;*/
text-align: center;
display: flex;
flex-direction: column;
background: #f6f8f9;
align-items: center;
justify-content: center;
border-radius: 5.5px;
font-size: 12px;
background: #ebf5ff;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
} }
.item-child2 {
} margin-top: 10px;
.drawer-item{ color: #b37feb;
background: #f7f2fd;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
}
}
.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>

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

@ -1,86 +1,88 @@
<template> <template>
<el-upload <el-upload
action="" action=""
:before-upload="beforeUploadAction" :before-upload="beforeUploadAction"
:list-type="listType" :list-type="listType"
:multiple="multiple" :multiple="multiple"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:file-list="fileList" :file-list="fileList"
> >
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
</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:{ showFileList: {
type:Boolean, type: Boolean,
default:true default: true,
},
})
let fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
const beforeUploadAction = (file, fileLi) => {
return new Promise((resolve, reject) => {
var reader = new FileReader()
let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
reader.readAsDataURL(file)
let name = file.name
if (reg.test(name)) {
reader.onload = (e: FileReader) => {
fileList.value.push({
name: name,
url: e.target.result,
})
emit('update', fileList.value)
resolve(e.target.result)
} }
} else {
ElMessage.error('请上传图片')
reject()
}
}) })
let fileList = ref([ }
]) const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!
dialogVisible.value = true
}
const dialogImageUrl = ref('') onMounted(() => {
const dialogVisible = ref(false) watch(
() => props.modelValue,
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { (value) => {
console.log(uploadFile, uploadFiles) fileList.value = value
} },
{
const beforeUploadAction = (file, fileLi)=>{ immediate: true,
return new Promise((resolve, reject) => { },
var reader = new FileReader() )
let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i) })
reader.readAsDataURL(file)
let name = file.name
if(reg.test(name)){
reader.onload = (e:FileReader)=>{
fileList.value.push({
name:name,
url:e.target.result
})
emit('update',fileList.value)
resolve(e.target.result)
}
}else{
ElMessage.error('请上传图片')
reject()
}
})
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!
dialogVisible.value = true
}
onMounted(()=>{
watch(()=>props.modelValue,(value)=>{
fileList.value = value
},{
immediate:true
})
})
</script> </script>

69
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 = () =>{
// 通过代码获取编辑器内容
let data = editors.txt.html()
alert(data)
}
onMounted(()=>{
watch(()=>props.modelValue,(value)=>{
editors.txt.html(value)
}) })
const editor = new wangEditor(`#wangEditor`)
// 配置 onchange 回调函数，将数据同步到 vue 中 const getEditorData = () => {
editor.config.onchange = (newHtml) => { // 通过代码获取编辑器内容
emit('update:modelValue',newHtml) let data = editors.txt.html()
alert(data)
} }
// 创建编辑器
editor.create()
editors = editor onMounted(() => {
}) watch(
() => props.modelValue,
(value) => {
editors.txt.html(value)
},
)
const editor = new wangEditor(`#wangEditor`)
// 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange = (newHtml) => {
emit('update:modelValue', newHtml)
}
// 创建编辑器
editor.create()
onBeforeUnmount(()=>{ editors = editor
// 调用销毁 API 对当前编辑器实例进行销毁 })
editors.destroy()
editors = null
})
onBeforeUnmount(() => {
// 调用销毁 API 对当前编辑器实例进行销毁
editors.destroy()
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

42
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%;

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

@ -5,45 +5,45 @@
</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: {
isExternal() {
return isExternal(this.to)
}, },
type() { computed: {
if (this.isExternal) { isExternal() {
return 'a' return isExternal(this.to)
} },
return 'router-link' type() {
} if (this.isExternal) {
}, return 'a'
methods: {
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
} }
} return 'router-link'
return { },
to: to },
} methods: {
} linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener',
}
}
return {
to: to,
}
},
},
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
a{ a {
text-decoration: none; text-decoration: none;
} }
</style> </style>

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

@ -1,78 +1,77 @@
<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(()=>{
return !store.state.app.isCollapse
})
const isCollapse = computed(() => {
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%;
height: 60px;
line-height: 60px;
background: #2b2f3a;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%; width: 100%;
height: 60px;
line-height: 60px;
background: #2b2f3a;
text-align: center;
overflow: hidden;
& .sidebar-logo { & .sidebar-logo-link {
width: 32px; height: 100%;
height: 32px; width: 100%;
vertical-align: middle;
margin-right: 12px; & .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
} }
& .sidebar-title { &.collapse {
display: inline-block; .sidebar-logo {
margin: 0; margin-right: 0px;
color: #fff; }
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
} }
} }
&.collapse {
.sidebar-logo {
margin-right: 0px;
}
}
}
</style> </style>

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

@ -1,49 +1,49 @@
<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"
:key="child.path" :key="child.path"
:item="child" :item="child"
:base-path="resolvePath(child.path)" :base-path="resolvePath(child.path)"
/> />
</el-sub-menu> </el-sub-menu>
</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>

26
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%;
}
.crollbar-wrapper{
height: 100%;
.el-scrollbar__view{
height: 100%; height: 100%;
} }
} .crollbar-wrapper {
height: 100%;
.el-scrollbar__view {
height: 100%;
}
}
</style> </style>

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

@ -1,51 +1,56 @@
<template> <template>
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
active-text-color="#ffd04b" active-text-color="#ffd04b"
background-color="#304156" background-color="#304156"
text-color="#fff" text-color="#fff"
:mode="mode" :mode="mode"
:collapse-transition="false" :collapse-transition="false"
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
</el-menu> v-for="route in permission_routes"
:key="route.path"
:item="route"
:base-path="route.path"
/>
</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) {
return meta.activeMenu return meta.activeMenu
} }
return path return path
}) })
// 是否折叠 // 是否折叠
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>

86
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>

216
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
:ref="setTagRef" v-for="tag in visitedViews"
:path= "tag.path" :ref="setTagRef"
:data-id="tag.path" :path="tag.path"
:fullPath="tag.fullPath" :data-id="tag.path"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" :fullPath="tag.fullPath"
:key="tag.path" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
class="item-tag-wrap" :key="tag.path"
:class="isActive(tag)?'active':''" class="item-tag-wrap"
@click="routerGo(tag)"> :class="isActive(tag) ? 'active' : ''"
<div class="tags-view-item" >{{ tag.title }}</div> @click="routerGo(tag)"
<el-icon @click.prevent.stop="(e)=>closeSelectedTag(e,tag)" class="tag-icon"> >
<circle-close-filled /></el-icon> <div class="tags-view-item">{{ tag.title }}</div>
<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,99 +155,98 @@
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)
}
break
} }
break
}
} }
}) })
} }
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;
justify-content: space-between;
align-items: center;
padding-left: 10px;
.tags-view{
background: white;
flex: 1;
box-sizing: border-box;
overflow: hidden;
}
.refresh{
//margin-left: 20px;
cursor: pointer;
font-size: 22px;
flex-shrink: 0;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; padding-left: 10px;
.refresh-inner{ .tags-view {
background: white;
flex: 1;
box-sizing: border-box;
overflow: hidden;
}
.refresh {
//margin-left: 20px;
cursor: pointer;
font-size: 22px;
flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 50px; .refresh-inner {
height: 100%; display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 100%;
}
//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;

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

@ -1,21 +1,17 @@
<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"
:rules="rules" :rules="rules"
label-width="120px" label-width="120px"
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>

122
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: '确定',
'确定退出登录吗？', cancelButtonText: '取消',
'退出登录', type: 'warning',
{ })
confirmButtonText: '确定', .then(async () => {
cancelButtonText: '取消', try {
type: 'warning', await store.dispatch('user/logout')
} router.push({ path: '/login' })
) store.dispatch('permission/clearRoutes')
.then(async () => { store.dispatch('tagsView/clearVisitedView')
try { } catch (e) {}
await store.dispatch('user/logout') })
router.push({path:'/login'}) .catch(() => {})
store.dispatch('permission/clearRoutes')
store.dispatch('tagsView/clearVisitedView')
}catch (e) {
}
})
.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)
} }

20
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>

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

@ -1,198 +1,208 @@
<template> <template>
<div class="m-animation" ref="mAnimation"> <div class="m-animation" ref="mAnimation">
<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"
<div class="text-der text-decenter-wrapr"> ><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to
<span class="left">同比去年</span> ></div>
<img src="@/assets/image/allow.png"/> <div class="text-der text-decenter-wrapr">
<span class="right">+78%</span> <span class="left">同比去年</span>
</div> <img src="@/assets/image/allow.png" />
<span class="right">+78%</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> </div>
<div class="circle-dot" v-for="item,index in pointStyle" :key="index" :style="{ <div>
left:`${item.left}px`, <div
top:`${item.top}px` class="circle-dot"
}"></div> v-for="(item, index) in pointStyle"
</div> :key="index"
:style="{
left: `${item.left}px`,
top: `${item.top}px`,
}"
></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)
case 2: case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum) return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
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]) {
if (!obj[i]) { 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++) {
if (!obj[i]) {
obj[i] = {}
}
obj[i].top = randomNum(0, mAnimationInfo.height)
}
return obj
} }
for (let i = 0; i < 30; i++) {
if (!obj[i]) { obj[i] = {} }
obj[i].top = randomNum(0, mAnimationInfo.height)
}
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{ @keyframes rotate {
0%{transform:rotate(0deg);} 0% {
100%{transform:rotate(360deg);} transform: rotate(0deg);
} }
.item { 100% {
transform: rotate(360deg);
}
}
.item {
display: flex;
/*align-items: center;*/
.item-icon {
width: 117px;
height: 109px;
}
.item-icon1 {
background: url('../../assets/image/center-inner1.png') no-repeat center 43%;
}
.item-right {
margin-left: 20px;
.item-right-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text-title {
font-size: 20px;
letter-spacing: 1px;
color: #ffffff;
/*margin-bottom: 6px;*/
/*height: 20px;*/
}
.text-number {
font-size: 44px;
letter-spacing: 2px;
color: #00e4ff;
}
.text-der {
overflow: hidden;
box-sizing: border-box;
display: flex;
font-size: 16px;
color: #ffffff;
letter-spacing: 1px;
.left {
margin-right: 10px;
}
img {
margin-right: 4px;
margin-top: 4px;
width: 11px;
height: 15px;
}
.right {
color: #ff0000;
}
}
}
}
display: flex; .circle-dot {
/*align-items: center;*/ width: 5px;
.item-icon { height: 5px;
width: 117px; border-radius: 50%;
height: 109px; background: yellow;
} text-align: center;
.item-icon1{ font-weight: bold;
background: url("../../assets/image/center-inner1.png") no-repeat center 43%; position: absolute;
} /*line-height: 100px;*/
.item-right{ z-index: 1;
margin-left: 20px; &::before {
.item-right-inner{ background: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%; height: 100%;
display: flex; left: 0;
flex-direction: column; top: 0;
justify-content: space-between; z-index: -2;
border-radius: 50%;
animation: twinkling 2.2s ease-in-out infinite;
} }
.text-title{ &::after {
font-size: 20px; background: inherit;
letter-spacing: 1px; content: '';
color: #ffffff; position: absolute;
/*margin-bottom: 6px;*/ width: 130%;
/*height: 20px;*/ height: 130%;
} left: -15%;
.text-number{ top: -15%;
font-size: 44px; z-index: -1;
letter-spacing: 2px; border-radius: 50%;
color: #00e4ff; animation: twinkling 2.2s ease-in-out infinite;
}
.text-der{
overflow: hidden;
box-sizing: border-box;
display: flex;
font-size: 16px;
color: #ffffff;
letter-spacing: 1px;
.left{
margin-right: 10px;
}
img{
margin-right: 4px;
margin-top: 4px;
width: 11px;
height: 15px;
}
.right{
color: #ff0000;
}
} }
} }
} @keyframes twinkling {
0% {
opacity: 0.2;
filter: alpha(opacity=20);
transform: scale(1);
}
50% {
opacity: 0.5;
filter: alpha(opacity=50);
transform: scale(1.4);
}
100% {
.circle-dot { opacity: 0.2;
width: 5px; filter: alpha(opacity=20);
height: 5px; transform: scale(0.7);
border-radius: 50%; }
background: yellow;
text-align: center;
font-weight: bold;
position: absolute;
/*line-height: 100px;*/
z-index: 1;
&::before {
background: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -2;
border-radius: 50%;
animation: twinkling 2.2s ease-in-out infinite;
} }
&::after {
background: inherit; .item-animation {
content: ''; padding: 20px;
position: absolute;
width: 130%;
height: 130%;
left: -15%;
top: -15%;
z-index: -1;
border-radius: 50%;
animation: twinkling 2.2s ease-in-out infinite;
} }
} }
@keyframes twinkling {
0% {
opacity: 0.2;
filter: alpha(opacity=20);
transform: scale(1);
}
50% {
opacity: 0.5;
filter: alpha(opacity=50);
transform: scale(1.4);
}
100% {
opacity: 0.2;
filter: alpha(opacity=20);
transform: scale(0.7);
}
}
.item-animation{
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>

179
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; 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>

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

@ -1,79 +1,77 @@
<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%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true, containLabel: true,
}, },
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>

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

@ -1,102 +1,103 @@
<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',
backgroundColor: 'rgba(0,0,0,0.7)', backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 0, borderWidth: 0,
borderColor: 'rgba(0,0,0,0.7)', borderColor: 'rgba(0,0,0,0.7)',
formatter: (name, val) => { formatter: (name, val) => {
const tipHtml = ` const tipHtml = `
<div class="m-info" style=" opacity: 0.95;font-size: 12px; color: white;" > <div class="m-info" style=" opacity: 0.95;font-size: 12px; color: white;" >
<div class="title" ></div> <div class="title" ></div>
<div class="title" >完成占比${name[0].value}</div> <div class="title" >完成占比${name[0].value}</div>
</div>` </div>`
return tipHtml return tipHtml
} },
},
yAxis: {
// 设置坐标轴的 文字样式
axisLabel: {
color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。
}, },
axisTick: { // 取消坐标轴刻度线 yAxis: {
show: false // 设置坐标轴的 文字样式
axisLabel: {
color: '#bbdaff',
margin: 20, // 刻度标签与轴线之间的距离。
},
axisTick: {
// 取消坐标轴刻度线
show: false,
},
// 坐标轴轴线相关设置。
splitLine: {
lineStyle: {
color: '#2d5baf',
},
},
}, },
// 坐标轴轴线相关设置。 xAxis: {
splitLine: { splitLine: {
lineStyle: { show: false,
color: '#2d5baf' },
} // 坐标轴轴线相关设置。
} axisLine: {
}, lineStyle: {
xAxis: { color: '#2d5baf',
splitLine: { },
show: false },
}, type: 'category',
// 坐标轴轴线相关设置。 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: { axisLabel: {
lineStyle: { // 设置坐标轴的 文字样式
color: '#2d5baf' color: '#bbdaff',
} margin: 20, // 刻度标签与轴线之间的距离。
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { // 设置坐标轴的 文字样式
color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。
},
axisTick: { // 取消坐标轴刻度线
show: false
}
},
series: [
{
data: dataOptions,
type: 'bar',
barMaxWidth: 18,
markLine: {
silent: true
}, },
axisTick: {
}] // 取消坐标轴刻度线
}) show: false,
},
},
series: [
{
data: dataOptions,
type: 'bar',
barMaxWidth: 18,
markLine: {
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>

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

File diff suppressed because one or more lines are too long

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

@ -1,79 +1,77 @@
<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%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true, containLabel: true,
}, },
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>

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

@ -1,79 +1,77 @@
<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%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true, containLabel: true,
}, },
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>

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

@ -1,96 +1,97 @@
<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',
backgroundColor: 'rgba(0,0,0,0.7)', backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 0, borderWidth: 0,
borderColor: 'rgba(0,0,0,0.7)', borderColor: 'rgba(0,0,0,0.7)',
formatter: (name, val) => { formatter: (name, val) => {
const tipHtml = ` const tipHtml = `
<div class="m-info" style=" opacity: 0.95;font-size: 12px; color: white;" > <div class="m-info" style=" opacity: 0.95;font-size: 12px; color: white;" >
<div class="title" ></div> <div class="title" ></div>
<div class="title" >完成占比${name[0].data}</div> <div class="title" >完成占比${name[0].data}</div>
</div>` </div>`
return tipHtml return tipHtml
}
},
yAxis: {
// 设置坐标轴的 文字样式
axisLabel: {
color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。
},
// 坐标轴轴线相关设置。
splitLine: {
lineStyle: {
color: '#2d5baf'
}
}
},
xAxis: {
splitLine: {
show: false
},
// 坐标轴轴线相关设置。
axisLine: {
lineStyle: {
color: '#2d5baf'
}
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { // 设置坐标轴的 文字样式
color: '#bbdaff',
margin: 20 // 刻度标签与轴线之间的距离。
},
boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
axisTick: { // 取消坐标轴刻度线
show: false
}
},
series: [
{
data: [154, 230, 224, 218, 135, 147, 260],
type: 'line',
// smooth:false, //关键点，为true是不支持虚线的，实线就用true
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
markLine: {
silent: true
}, },
itemStyle: { },
normal: { yAxis: {
color: '#920783', // 设置 symbol的颜色 // 设置坐标轴的 文字样式
lineStyle: { axisLabel: {
width: 3, color: '#bbdaff',
color: '#920783', margin: 20, // 刻度标签与轴线之间的距离。
type: 'solid' // 'dotted'虚线 'solid'实线 },
} // 坐标轴轴线相关设置。
} splitLine: {
} lineStyle: {
color: '#2d5baf',
}] },
}) },
},
xAxis: {
splitLine: {
show: false,
},
// 坐标轴轴线相关设置。
axisLine: {
lineStyle: {
color: '#2d5baf',
},
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
// 设置坐标轴的 文字样式
color: '#bbdaff',
margin: 20, // 刻度标签与轴线之间的距离。
},
boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
axisTick: {
// 取消坐标轴刻度线
show: false,
},
},
series: [
{
data: [154, 230, 224, 218, 135, 147, 260],
type: 'line',
// smooth:false, //关键点，为true是不支持虚线的，实线就用true
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
markLine: {
silent: true,
},
itemStyle: {
normal: {
color: '#920783', // 设置 symbol的颜色
lineStyle: {
width: 3,
color: '#920783',
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>

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

@ -1,106 +1,105 @@
<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 = {
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
backgroundColor: '#0F224C', //背景色
series: [
{
type: 'liquidFill', //水位图
radius: '80%', //显示比例
center: ['50%', '50%'], //中心点
amplitude: 20, //水波振幅
data: [0.5,.5,.5], // data个数代表波浪数
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
], //波浪颜色
backgroundStyle: {
borderWidth: 1, //外边框
// borderColor: '#23cc72', //边框颜色
color: 'RGBA(51, 66, 127, 0.7)', //边框内部填充部分颜色
},
label: {
//标签设置
position: ['50%', '45%'],
formatter: '50%', //显示文本,
textStyle: {
fontSize: '52px', //文本字号,
color: '#fff',
},
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
}, },
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
const options = {
}) grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true,
},
backgroundColor: '#0F224C', //背景色
series: [
{
type: 'liquidFill', //水位图
radius: '80%', //显示比例
center: ['50%', '50%'], //中心点
amplitude: 20, //水波振幅
data: [0.5, 0.5, 0.5], // data个数代表波浪数
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
], //波浪颜色
backgroundStyle: {
borderWidth: 1, //外边框
// borderColor: '#23cc72', //边框颜色
color: 'RGBA(51, 66, 127, 0.7)', //边框内部填充部分颜色
},
label: {
//标签设置
position: ['50%', '45%'],
formatter: '50%', //显示文本,
textStyle: {
fontSize: '52px', //文本字号,
color: '#fff',
},
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,271 +1,269 @@
<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: '文明村',
min: 0,
max: 100
},
{
text: '卫生村',
min: 0,
max: 100
},
{
text: '森林村庄',
min: 0,
max: 100
},
{
text: '全面小康',
min: 0,
max: 100
},
{
text: '景区村庄',
min: 0,
max: 100
}
]
const Data = [80,61,70,86,77]
function setData() {
return [
{ {
value: Data, text: '文明村',
itemStyle: { min: 0,
normal: { max: 100,
lineStyle: { },
color: '#4BFFFC', {
shadowColor: '#4BFFFC', text: '卫生村',
shadowBlur: 5 min: 0,
}, max: 100,
shadowColor: '#4BFFFC', },
shadowBlur: 5 {
} text: '森林村庄',
}, min: 0,
areaStyle: { max: 100,
normal: { },
// 单项区域填充样式 {
color: { text: '全面小康',
type: 'radial', min: 0,
x: 0.5, //右 max: 100,
y: 0.5, //下 },
r: 1, {
colorStops: [ text: '景区村庄',
{ min: 0,
offset: 1, max: 100,
color: '#4BFFFC' },
},
{
offset: 0,
color: 'rgba(0,0,0,0)'
}
],
globalCoord: false
},
opacity: 0.8 // 区域透明度
}
}
}
] ]
} const Data = [80, 61, 70, 86, 77]
function setData() {
function setgauge(i) { return [
return { {
type: 'gauge', value: Data,
detail: false, itemStyle: {
splitNumber: 10, //刻度数量 normal: {
radius: '80%', //图表尺寸 lineStyle: {
center: ['50%', '50%'], color: '#4BFFFC',
startAngle: 90 + 72 * i + 18, //开始刻度的角度 shadowColor: '#4BFFFC',
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度 shadowBlur: 5,
axisLine: { },
show: false shadowColor: '#4BFFFC',
}, shadowBlur: 5,
axisTick: { },
show: true, },
lineStyle: { areaStyle: {
color: '#66ccff', normal: {
width: 1 // 单项区域填充样式
color: {
type: 'radial',
x: 0.5, //右
y: 0.5, //下
r: 1,
colorStops: [
{
offset: 1,
color: '#4BFFFC',
},
{
offset: 0,
color: 'rgba(0,0,0,0)',
},
],
globalCoord: false,
},
opacity: 0.8, // 区域透明度
},
},
},
]
}
function setgauge(i) {
return {
type: 'gauge',
detail: false,
splitNumber: 10, //刻度数量
radius: '80%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: {
show: false,
},
axisTick: {
show: true,
lineStyle: {
color: '#66ccff',
width: 1,
},
length: 6,
splitNumber: 1,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
}, },
length: 6,
splitNumber: 1
},
splitLine: {
show: false
},
axisLabel: {
show: false
} }
} }
} function setSpot() {
function setSpot() { var scatterData = []
var scatterData = [] Data.map((o, i) => {
Data.map((o, i) => { scatterData.push({
scatterData.push({ value: [o, i],
value: [o, i], itemStyle: {
itemStyle: { normal: {
normal: { color: color[i],
color: color[i], borderColor: '#fff',
borderColor: '#fff', borderWidth: 1,
borderWidth: 1, shadowColor: color[i],
shadowColor: color[i], shadowBlur: 8,
shadowBlur: 8 },
} },
} })
})
return scatterData
}
const options = {
backgroundColor: '#0E1327',
polar: {
center: ['50%', '50%'],
radius: '60%',
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: indicator,
axisName: {
color: '#b7e9fd',
fontSize: 13,
padding: -20,
},
nameGap: 45,
splitNumber: 4,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)'],
},
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0',
},
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2, // 分隔线线宽
},
},
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
min: 0,
max: 100,
interval: 25,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0',
},
},
axisLabel: {
fontSize: 12,
color: '#5aa3d0',
align: 'left',
margin: -5,
},
},
series: [
setgauge(0),
setgauge(1),
setgauge(2),
setgauge(3),
setgauge(4),
{
type: 'radar',
silent: true,
lineStyle: {
color: '#66ffff',
},
areaStyle: {
color: 'rgba(102, 255, 255, 0.31)',
},
data: setData(),
},
{
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 20,
data: setSpot(),
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
}) })
}) })
return scatterData
}
const options = {
backgroundColor: '#0E1327',
polar: {
center: ['50%', '50%'],
radius: '60%'
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: indicator,
axisName: {
color: '#b7e9fd',
fontSize: 13,
padding: -20
},
nameGap: 45,
splitNumber: 4,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)']
}
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽
}
}
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 25,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
axisLabel: {
fontSize: 12,
color: '#5aa3d0',
align: 'left',
margin: -5
}
},
series: [
setgauge(0),
setgauge(1),
setgauge(2),
setgauge(3),
setgauge(4),
{
type: 'radar',
silent: true,
lineStyle: {
color: '#66ffff'
},
areaStyle: {
color: 'rgba(102, 255, 255, 0.31)'
},
data: setData()
},
{
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 20,
data: setSpot()
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
})
})
</script> </script>

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

@ -1,200 +1,201 @@
<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:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
let echartData = [
{
name: '设备1',
value: '3720',
},
{
name: '设备2',
value: '2920',
},
{
name: '设备3',
value: '2200',
},
{
name: '设备4',
value: '1420',
},
];
let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g;
return num.toString().replace(reg, ',');
};
const options = {
backgroundColor: '#364686',
color: color,
title: [
{
text: '设备数',
x: 'center',
top: '40%',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: '100',
},
}, },
{ config: {
text: '60%', type: Object,
x: 'center', default: () => {},
top: '50%',
textStyle: {
fontSize: 30,
color: '#00f0ff',
foontWeight: '500',
},
}, },
], id: {
polar: { type: String,
radius: ['44%', '50%'], default: 'chart',
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
}, },
axisLine: { width: {
show: false, type: String,
default: '200px',
}, },
axisTick: { height: {
show: false, type: String,
default: '200px',
}, },
},
series: [
{
type: 'pie',
radius: ['55%', '67%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: '#364684',
borderWidth: 2,
},
},
labelLine: {
normal: {
length: 60,
length2: 60,
lineStyle: {
color: '#e6e6e6',
},
},
},
label: {
normal: {
formatter: (params) => {
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
},
padding: [0, -70, 30, -70],
rich: {
icon: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
},
name: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
color: '#fff',
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: '#fff',
align: 'left',
},
},
},
},
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: '50%',
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false,
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: 'rgba(50,171,241, 1)',
},
{
offset: 0,
color: 'rgba(55,70,130, 0)',
},
]),
// borderWidth: 1,
// borderColor: '',
shadowBlur: 10,
// shadowColor: 'rgba(55,70,130, 1)'
},
},
data: [
{
value: 100,
},
],
},
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
let echartData = [
{
name: '设备1',
value: '3720',
},
{
name: '设备2',
value: '2920',
},
{
name: '设备3',
value: '2200',
},
{
name: '设备4',
value: '1420',
},
]
let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g
return num.toString().replace(reg, ',')
}
}) const options = {
backgroundColor: '#364686',
color: color,
title: [
{
text: '设备数',
x: 'center',
top: '40%',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: '100',
},
},
{
text: '60%',
x: 'center',
top: '50%',
textStyle: {
fontSize: 30,
color: '#00f0ff',
foontWeight: '500',
},
},
],
polar: {
radius: ['44%', '50%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
type: 'pie',
radius: ['55%', '67%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: '#364684',
borderWidth: 2,
},
},
labelLine: {
normal: {
length: 60,
length2: 60,
lineStyle: {
color: '#e6e6e6',
},
},
},
label: {
normal: {
formatter: (params) => {
return (
'{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
)
},
padding: [0, -70, 30, -70],
rich: {
icon: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
},
name: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
color: '#fff',
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: '#fff',
align: 'left',
},
},
},
},
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: '50%',
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false,
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: 'rgba(50,171,241, 1)',
},
{
offset: 0,
color: 'rgba(55,70,130, 0)',
},
]),
// borderWidth: 1,
// borderColor: '',
shadowBlur: 10,
// shadowColor: 'rgba(55,70,130, 1)'
},
},
data: [
{
value: 100,
},
],
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,149 +1,147 @@
<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:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
const options = {
title: [
{
text: '已完成',
x: 'center',
top: '52%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '100',
},
}, },
{ config: {
text: '75%', type: Object,
x: 'center', default: () => {},
y: 'center',
textStyle: {
fontSize: '12',
color: '#FFFFFF',
fontFamily: 'DINAlternate-Bold, DINAlternate',
foontWeight: '600',
},
}, },
], id: {
backgroundColor: '#111', type: String,
polar: { default: 'chart',
radius: ['42%', '52%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
}, },
axisLine: { width: {
show: false, type: String,
default: '200px',
}, },
axisTick: { height: {
show: false, type: String,
default: '200px',
}, },
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: 'rgba(66, 66, 66, .3)',
},
data: [60],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
},
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['56%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['38%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
}) const options = {
title: [
{
text: '已完成',
x: 'center',
top: '52%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '100',
},
},
{
text: '75%',
x: 'center',
y: 'center',
textStyle: {
fontSize: '12',
color: '#FFFFFF',
fontFamily: 'DINAlternate-Bold, DINAlternate',
foontWeight: '600',
},
},
],
backgroundColor: '#111',
polar: {
radius: ['42%', '52%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: 'rgba(66, 66, 66, .3)',
},
data: [60],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
},
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['56%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['38%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

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

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

74
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: "内蒙古自治区", adcode: 150000,
value:[119.24787,42.205741] name: '内蒙古自治区',
}, value: [119.24787, 42.205741],
,{ },
adcode: 150000, ,
name: "内蒙古自治区", {
value:[110.627161,41.16628] adcode: 150000,
}, name: '内蒙古自治区',
{ value: [110.627161, 41.16628],
adcode: 540000, },
name: "西藏自治区", {
value:[89.483714,30.251951] adcode: 540000,
}, name: '西藏自治区',
{ value: [89.483714, 30.251951],
adcode: 630000, },
name: "青海省", {
value:[102.064693,37.084008] adcode: 630000,
}, name: '青海省',
{ value: [102.064693, 37.084008],
adcode: 530000, },
name: "云南省", {
value:[102.187665,25.083688] adcode: 530000,
}, name: '云南省',
{ value: [102.187665, 25.083688],
adcode: 610000, },
name: "陕西省", {
value:[109.20663,35.018625] adcode: 610000,
}, name: '陕西省',
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'
})

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

File diff suppressed because one or more lines are too long

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

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

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

@ -1,292 +1,302 @@
<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: {
type: Object,
default: () => {}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
var geoGpsMap = [109.1162, 34.2004]
var geoCoordMap = {
江苏: [118.8062, 31.9208],
内蒙古: [110.3467, 41.4899],
辽宁: [123.1238, 42.1216],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
河南: [113.4668, 34.6234],
西藏: [116.3896, 39.91],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
湖南: [113.0823, 28.2568],
四川: [113.0823, 28.2568],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
海南: [110.3893, 19.8516]
}
var value = {
江苏: 10000,
内蒙古: 10000,
辽宁: 10000,
陕西: 10000,
福建: 10000,
甘肃: 10000,
青海: 10000,
新疆: 10000,
湖北: 10000,
浙江: 10000,
河南: 10000,
湖南: 10000,
云南: 10000,
广东: 10000,
海南: 10000,
西藏: 10000
}
var colors = '#f9b207'
var year = ['长春', '长春', '青岛', '青岛', '成都', '成都']
var mapData = []
/* 柱子Y名称 */
var categoryData = []
var barData = []
for (var key in geoCoordMap) {
mapData.push({
year: '陕西',
name: key,
value: value[key] / 100,
value1: value[key] / 100
})
}
mapData.sort(function sortNumber (a, b) {
return a.value - b.value
})
for (var j = 0; j < mapData.length; j++) {
barData.push(mapData[j].value1)
categoryData.push(mapData[j].name)
}
echarts.registerMap('china', geoJson)
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
var convertToLineData = function (data, gps) {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var toCoord = geoCoordMap[dataItem.name]
// debugger;
var fromCoord = gps // 郑州
// var toCoord = geoGps[Math.random()*3];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem.value
}, {
coord: toCoord
}])
}
}
return res
}
const options = {
tooltip:{
trigger: 'item',
formatter(val){
// console.log('val==========',val)
}
},
backgroundColor: '#001540',
geo: {
show: true,
map: 'china',
roam: true,
zoom: 1,
center: [101.4038, 36.8207],
label: {
emphasis: {
show: false
}
}, },
itemStyle: { config: {
normal: { type: Object,
borderColor: 'rgba(147, 235, 248, 1)', default: () => {},
borderWidth: 1, },
areaColor: { id: {
type: 'radial', type: String,
x: 0.5, default: 'chart',
y: 0.5, },
r: 0.8, width: {
colorStops: [{ type: String,
offset: 0, default: '200px',
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 },
}, { height: {
offset: 1, type: String,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 default: '200px',
}], },
globalCoord: false // 缺省为 false })
},
shadowColor: 'rgba(128, 217, 248, 1)', var geoGpsMap = [109.1162, 34.2004]
// shadowColor: 'rgba(255, 255, 255, 1)', var geoCoordMap = {
shadowOffsetX: -2, 江苏: [118.8062, 31.9208],
shadowOffsetY: 2, 内蒙古: [110.3467, 41.4899],
shadowBlur: 10 辽宁: [123.1238, 42.1216],
}, 陕西: [109.1162, 34.2004],
emphasis: { 甘肃: [103.5901, 36.3043],
areaColor: '#389BB7', 青海: [101.4038, 36.8207],
borderWidth: 0 新疆: [87.9236, 43.5883],
河南: [113.4668, 34.6234],
西藏: [116.3896, 39.91],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
湖南: [113.0823, 28.2568],
四川: [113.0823, 28.2568],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
海南: [110.3893, 19.8516],
}
var value = {
江苏: 10000,
内蒙古: 10000,
辽宁: 10000,
陕西: 10000,
福建: 10000,
甘肃: 10000,
青海: 10000,
新疆: 10000,
湖北: 10000,
浙江: 10000,
河南: 10000,
湖南: 10000,
云南: 10000,
广东: 10000,
海南: 10000,
西藏: 10000,
}
var colors = '#f9b207'
var year = ['长春', '长春', '青岛', '青岛', '成都', '成都']
var mapData = []
/* 柱子Y名称 */
var categoryData = []
var barData = []
for (var key in geoCoordMap) {
mapData.push({
year: '陕西',
name: key,
value: value[key] / 100,
value1: value[key] / 100,
})
}
mapData.sort(function sortNumber(a, b) {
return a.value - b.value
})
for (var j = 0; j < mapData.length; j++) {
barData.push(mapData[j].value1)
categoryData.push(mapData[j].name)
}
echarts.registerMap('china', geoJson)
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
})
} }
} }
}, return res
series: [ }
var convertToLineData = function (data, gps) {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var toCoord = geoCoordMap[dataItem.name]
// debugger;
var fromCoord = gps // 郑州
// var toCoord = geoGps[Math.random()*3];
if (fromCoord && toCoord) {
res.push([
{
coord: fromCoord,
value: dataItem.value,
},
{
coord: toCoord,
},
])
}
}
return res
}
// 地图？ const options = {
{ tooltip: {
type: 'map', trigger: 'item',
formatter(val) {
// console.log('val==========',val)
},
},
backgroundColor: '#001540',
geo: {
show: true,
map: 'china', map: 'china',
geoIndex: 0, roam: true,
aspectScale: 0.75, // 长宽比 zoom: 1,
showLegendSymbol: false, // 存在legend时显示 center: [101.4038, 36.8207],
label: { label: {
normal: {
show: false
},
emphasis: { emphasis: {
show: false, show: false,
textStyle: { },
color: '#fff'
}
}
}, },
roam: true,
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: '#031525', borderColor: 'rgba(147, 235, 248, 1)',
borderColor: '#FFFFFF' borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
}, },
emphasis: { emphasis: {
areaColor: '#2B91B7' areaColor: '#389BB7',
} borderWidth: 0,
},
animation: false
},
// 地图点的动画效果
{
// name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(mapData.sort(function (a, b) {
return b.value - a.value
}).slice(0, 20)),
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: colors,
shadowBlur: 10,
shadowColor: colors
}
},
zlevel: 1
},
// 地图线的动画效果
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 3 // 图标大小
},
lineStyle: {
normal: {
color: colors,
width: 0.1, // 尾迹线条宽度
opacity: 0.5, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: convertToLineData(mapData, geoGpsMap)
},
{
type:'scatter',
zlevel: 16,
coordinateSystem: 'geo',
symbolSize:30,
symbol:`image://${logo}`,
data:cityIconData,
rippleEffect: {
period: 4, brushType: 'stroke', scale: 4
},
tooltip:{
trigger:'item',
padding:0,
borderColor:'black',
background:'rgba(0,0,0,0.7)',
textStyle: {
fontSize:20
}, },
formatter(val){ },
console.log('val=======',val) },
let tipHtml = ` series: [
// 地图？
{
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75, // 长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7',
},
},
animation: false,
},
// 地图点的动画效果
{
// name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
mapData
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, 20),
),
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
},
itemStyle: {
normal: {
color: colors,
shadowBlur: 10,
shadowColor: colors,
},
},
zlevel: 1,
},
// 地图线的动画效果
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 3, // 图标大小
},
lineStyle: {
normal: {
color: colors,
width: 0.1, // 尾迹线条宽度
opacity: 0.5, // 尾迹线条透明度
curveness: 0.3, // 尾迹线条曲直度
},
},
data: convertToLineData(mapData, geoGpsMap),
},
{
type: 'scatter',
zlevel: 16,
coordinateSystem: 'geo',
symbolSize: 30,
symbol: `image://${logo}`,
data: cityIconData,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4,
},
tooltip: {
trigger: 'item',
padding: 0,
borderColor: 'black',
background: 'rgba(0,0,0,0.7)',
textStyle: {
fontSize: 20,
},
formatter(val) {
console.log('val=======', val)
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;
padding-top: 10px; padding-top: 10px;
@ -296,22 +306,22 @@ const options = {
<!-- <div style=" font-size: 22px; color: #ff0000;">258944</div>--> <!-- <div style=" font-size: 22px; color: #ff0000;">258944</div>-->
<!-- </div>--> <!-- </div>-->
</div>` </div>`
return tipHtml return tipHtml
} },
} },
}, },
] ],
} }
let chart:EChartsType let chart: EChartsType
const initChart = () => { 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>

179
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; 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>

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

File diff suppressed because one or more lines are too long

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

@ -1,362 +1,364 @@
<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:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
const options = {
backgroundColor: '#031d33',
legend: {
top: '20',
x: 'center',
textStyle: {
fontSize: 16,
color: 'rgba(101, 213, 255, 1)',
}, },
icon: config: {
'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', type: Object,
itemWidth: 8, // 设置宽度 default: () => {},
itemHeight: 8, // 设置高度、
itemGap: 12, // 设置间距
},
tooltip: {
show: true,
trigger: 'axis', //axis , item
backgroundColor: 'RGBA(0, 49, 85, 1)',
borderColor: 'rgba(0, 151, 251, 1)',
borderWidth: 1,
borderRadius: 0,
textStyle: {
color: '#BCE9FC',
fontSize: 16,
align: 'left',
}, },
}, id: {
grid: { type: String,
right: '5%', default: 'chart',
top: '10%',
left: '5%',
bottom: '5%',
containLabel: true,
},
xAxis: {
name: '部门',
nameTextStyle: {
color: '#65d5ff',
}, },
type: 'category', width: {
boundaryGap: true, type: String,
data: ['HWS', 'SE', 'V&V', 'HQ', 'RPA', 'SC', 'RPA', 'PM', 'CCB', 'RSW'], default: '200px',
axisLabel: { },
//坐标轴刻度标签的相关设置。 height: {
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』 type: String,
// margin:15, default: '200px',
},
})
const options = {
backgroundColor: '#031d33',
legend: {
top: '20',
x: 'center',
textStyle: { textStyle: {
color: '#65D5FF',
fontStyle: 'normal',
fontSize: 16, fontSize: 16,
color: 'rgba(101, 213, 255, 1)',
}, },
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',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度、
itemGap: 12, // 设置间距
}, },
axisTick: { tooltip: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: 'rgba(77, 128, 254, 0.2)',
},
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: true, show: true,
lineStyle: { trigger: 'axis', //axis , item
color: 'rgba(77, 128, 254, 0.2)', backgroundColor: 'RGBA(0, 49, 85, 1)',
}, borderColor: 'rgba(0, 151, 251, 1)',
}, borderWidth: 1,
}, borderRadius: 0,
dataZoom: [
{
type: 'slider',
show: true,
bottom: '20px',
borderColor: '#07417a',
backgroundColor: 'transparent',
dataBackground: {
lineStyle: {
color: 'transparent',
shadowOffsetY: 0,
},
areaStyle: {
color: 'transparent',
shadowOffsetY: 0,
},
},
// 拖拽手柄样式 svg 路径
handleIcon:
'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
handleColor: '#aab6c6',
height: 6,
handleSize: 12,
showDataShadow: false,
filterMode: 'filter',
textStyle: { textStyle: {
color: '#ccc', color: '#BCE9FC',
fontSize: 16,
align: 'left',
}, },
start: 0,
end: 100,
}, },
], grid: {
yAxis: [ right: '5%',
{ top: '10%',
name: '个', left: '5%',
bottom: '5%',
containLabel: true,
},
xAxis: {
name: '部门',
nameTextStyle: { nameTextStyle: {
color: '#65d5ff', color: '#65d5ff',
}, },
type: 'value', type: 'category',
splitNumber: 3, boundaryGap: true,
data: ['HWS', 'SE', 'V&V', 'HQ', 'RPA', 'SC', 'RPA', 'PM', 'CCB', 'RSW'],
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
// margin:15,
textStyle: { textStyle: {
color: '#65D5FF', color: '#65D5FF',
fontStyle: 'normal', fontStyle: 'normal',
fontSize: 16, fontSize: 16,
}, },
}, },
axisLine: { axisTick: {
//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisTick: { axisLine: {
show: false, //坐标轴轴线相关设置
lineStyle: {
color: 'rgba(77, 128, 254, 0.2)',
},
}, },
splitLine: { splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(77, 128, 254, 0.2)', color: 'rgba(77, 128, 254, 0.2)',
}, },
}, },
}, },
{ dataZoom: [
name: '', {
nameTextStyle: { type: 'slider',
color: '#65d5ff'
},
min: 0,
splitLine: {
show: true,
lineStyle: {
color: '#233653'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#233653'
}
},
axisLabel: {
show: true, show: true,
bottom: '20px',
borderColor: '#07417a',
backgroundColor: 'transparent',
dataBackground: {
lineStyle: {
color: 'transparent',
shadowOffsetY: 0,
},
areaStyle: {
color: 'transparent',
shadowOffsetY: 0,
},
},
// 拖拽手柄样式 svg 路径
handleIcon:
'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
handleColor: '#aab6c6',
height: 6,
handleSize: 12,
showDataShadow: false,
filterMode: 'filter',
textStyle: { textStyle: {
color: '#78bdf5' color: '#ccc',
}, },
formatter: function(value) { start: 0,
return value * 100 + '%' end: 100,
}
}, },
axisTick: { ],
show: false yAxis: [
} {
} name: '个',
], nameTextStyle: {
series: [ color: '#65d5ff',
{ },
name: '变更', type: 'value',
type: 'pictorialBar', splitNumber: 3,
barWidth: '50%', axisLabel: {
label: { textStyle: {
normal: { color: '#65D5FF',
fontStyle: 'normal',
fontSize: 16,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(77, 128, 254, 0.2)',
},
},
},
{
name: '',
nameTextStyle: {
color: '#65d5ff',
},
min: 0,
splitLine: {
show: true,
lineStyle: {
color: '#233653',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#233653',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#78bdf5',
},
formatter: function (value) {
return value * 100 + '%'
},
},
axisTick: {
show: false, show: false,
}, },
}, },
itemStyle: { ],
normal: { series: [
color: { {
type: 'linear', name: '变更',
x: 0, type: 'pictorialBar',
y: 0, barWidth: '50%',
x2: 0, label: {
y2: 1, normal: {
colorStops: [ show: false,
},
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255, 64, 0, 0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 34, 66, 0.2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
}, //渐变颜色
},
},
symbol:
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
data: [23, 44, 22, 27, 12, 2, 3, 23, 12, 32],
},
{
name: '新增',
type: 'pictorialBar',
barWidth: '50%',
label: {
normal: {
show: false,
},
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(48, 236, 166,0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 34, 66, 0.2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
}, //渐变颜色
},
},
symbol:
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
data: [13, 24, 31, 12, 7, 3, 1, 23, 2, 42],
},
{
name: '废弃',
type: 'pictorialBar',
barWidth: '50%',
label: {
normal: {
show: false,
},
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(161, 159, 158, 0.8)', // 处的颜色
},
{
offset: 1,
color: 'rgba(133, 133, 196, 0.2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
}, //渐变颜色
},
},
symbol:
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
data: [4, 3, 12, 4, 15, 2, 3, 12, 34, 23],
},
{
name: '变化占比',
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],
smooth: true,
symbol: 'none',
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: 'rgba(255, 64, 0, 0.8)', // 0% 处的颜色 color: 'rgba(255, 227, 168, 0.3)',
},
{
offset: 0.5,
color: 'rgba(255, 227, 168, 1)',
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(0, 34, 66, 0.2)', // 100% 处的颜色 color: 'rgba(255, 227, 168, 0.3)',
}, },
], ]),
globalCoord: false, // 缺省为 false shadowColor: 'rgba(255, 120, 0,1)',
}, //渐变颜色 shadowBlur: 10,
},
}, },
yAxisIndex: 1,
}, },
symbol: {
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z', name: '变化占比',
yAxisIndex: 1,
data: [23, 44, 22, 27, 12, 2, 3, 23, 12, 32], type: 'effectScatter',
}, showEffectOn: 'render',
{ rippleEffect: {
name: '新增', period: 5,
type: 'pictorialBar', scale: 3,
barWidth: '50%', brushType: 'stroke',
label: {
normal: {
show: false,
}, },
}, hoverAnimation: true,
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: 'rgba(217,247,249,1)',
type: 'linear', shadowBlur: 10,
x: 0, shadowColor: '#333',
y: 0, },
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(48, 236, 166,0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 34, 66, 0.2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
}, //渐变颜色
}, },
data: [],
}, },
symbol: ],
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z', }
let chart: EChartsType
data: [13, 24, 31, 12, 7, 3, 1, 23, 2, 42], const initChart = () => {
}, let chart = echarts.init(document.getElementById(props.id))
{ chart.setOption(options)
name: '废弃', return chart
type: 'pictorialBar', }
barWidth: '50%', onMounted(() => {
label: { chart = initChart()
normal: { window.addEventListener('resize', function () {
show: false, chart && chart.resize()
}, })
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(161, 159, 158, 0.8)', // 处的颜色
},
{
offset: 1,
color: 'rgba(133, 133, 196, 0.2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
}, //渐变颜色
},
},
symbol:
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
data: [4, 3, 12, 4, 15, 2, 3, 12, 34, 23],
},
{
name: '变化占比',
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],
smooth: true,
symbol: 'none',
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
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
},
{
name: '变化占比',
yAxisIndex: 1,
type: 'effectScatter',
showEffectOn: 'render',
rippleEffect: {
period: 5,
scale: 3,
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: 'rgba(217,247,249,1)',
shadowBlur: 10,
shadowColor: '#333'
}
},
data: []
}
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
})
</script> </script>

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

@ -1,106 +1,105 @@
<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 = {
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
backgroundColor: '#0F224C', //背景色
series: [
{
type: 'liquidFill', //水位图
radius: '80%', //显示比例
center: ['50%', '50%'], //中心点
amplitude: 20, //水波振幅
data: [0.5,.5,.5], // data个数代表波浪数
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
], //波浪颜色
backgroundStyle: {
borderWidth: 1, //外边框
// borderColor: '#23cc72', //边框颜色
color: 'RGBA(51, 66, 127, 0.7)', //边框内部填充部分颜色
},
label: {
//标签设置
position: ['50%', '45%'],
formatter: '50%', //显示文本,
textStyle: {
fontSize: '52px', //文本字号,
color: '#fff',
},
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
}, },
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
const options = {
}) grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true,
},
backgroundColor: '#0F224C', //背景色
series: [
{
type: 'liquidFill', //水位图
radius: '80%', //显示比例
center: ['50%', '50%'], //中心点
amplitude: 20, //水波振幅
data: [0.5, 0.5, 0.5], // data个数代表波浪数
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
], //波浪颜色
backgroundStyle: {
borderWidth: 1, //外边框
// borderColor: '#23cc72', //边框颜色
color: 'RGBA(51, 66, 127, 0.7)', //边框内部填充部分颜色
},
label: {
//标签设置
position: ['50%', '45%'],
formatter: '50%', //显示文本,
textStyle: {
fontSize: '52px', //文本字号,
color: '#fff',
},
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,271 +1,269 @@
<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: '文明村',
min: 0,
max: 100
},
{
text: '卫生村',
min: 0,
max: 100
},
{
text: '森林村庄',
min: 0,
max: 100
},
{
text: '全面小康',
min: 0,
max: 100
},
{
text: '景区村庄',
min: 0,
max: 100
}
]
const Data = [80,61,70,86,77]
function setData() {
return [
{ {
value: Data, text: '文明村',
itemStyle: { min: 0,
normal: { max: 100,
lineStyle: { },
color: '#4BFFFC', {
shadowColor: '#4BFFFC', text: '卫生村',
shadowBlur: 5 min: 0,
}, max: 100,
shadowColor: '#4BFFFC', },
shadowBlur: 5 {
} text: '森林村庄',
}, min: 0,
areaStyle: { max: 100,
normal: { },
// 单项区域填充样式 {
color: { text: '全面小康',
type: 'radial', min: 0,
x: 0.5, //右 max: 100,
y: 0.5, //下 },
r: 1, {
colorStops: [ text: '景区村庄',
{ min: 0,
offset: 1, max: 100,
color: '#4BFFFC' },
},
{
offset: 0,
color: 'rgba(0,0,0,0)'
}
],
globalCoord: false
},
opacity: 0.8 // 区域透明度
}
}
}
] ]
} const Data = [80, 61, 70, 86, 77]
function setData() {
function setgauge(i) { return [
return { {
type: 'gauge', value: Data,
detail: false, itemStyle: {
splitNumber: 10, //刻度数量 normal: {
radius: '80%', //图表尺寸 lineStyle: {
center: ['50%', '50%'], color: '#4BFFFC',
startAngle: 90 + 72 * i + 18, //开始刻度的角度 shadowColor: '#4BFFFC',
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度 shadowBlur: 5,
axisLine: { },
show: false shadowColor: '#4BFFFC',
}, shadowBlur: 5,
axisTick: { },
show: true, },
lineStyle: { areaStyle: {
color: '#66ccff', normal: {
width: 1 // 单项区域填充样式
color: {
type: 'radial',
x: 0.5, //右
y: 0.5, //下
r: 1,
colorStops: [
{
offset: 1,
color: '#4BFFFC',
},
{
offset: 0,
color: 'rgba(0,0,0,0)',
},
],
globalCoord: false,
},
opacity: 0.8, // 区域透明度
},
},
},
]
}
function setgauge(i) {
return {
type: 'gauge',
detail: false,
splitNumber: 10, //刻度数量
radius: '80%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: {
show: false,
},
axisTick: {
show: true,
lineStyle: {
color: '#66ccff',
width: 1,
},
length: 6,
splitNumber: 1,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
}, },
length: 6,
splitNumber: 1
},
splitLine: {
show: false
},
axisLabel: {
show: false
} }
} }
} function setSpot() {
function setSpot() { var scatterData = []
var scatterData = [] Data.map((o, i) => {
Data.map((o, i) => { scatterData.push({
scatterData.push({ value: [o, i],
value: [o, i], itemStyle: {
itemStyle: { normal: {
normal: { color: color[i],
color: color[i], borderColor: '#fff',
borderColor: '#fff', borderWidth: 1,
borderWidth: 1, shadowColor: color[i],
shadowColor: color[i], shadowBlur: 8,
shadowBlur: 8 },
} },
} })
})
return scatterData
}
const options = {
backgroundColor: '#0E1327',
polar: {
center: ['50%', '50%'],
radius: '60%',
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: indicator,
axisName: {
color: '#b7e9fd',
fontSize: 13,
padding: -20,
},
nameGap: 45,
splitNumber: 4,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)'],
},
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0',
},
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2, // 分隔线线宽
},
},
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
min: 0,
max: 100,
interval: 25,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0',
},
},
axisLabel: {
fontSize: 12,
color: '#5aa3d0',
align: 'left',
margin: -5,
},
},
series: [
setgauge(0),
setgauge(1),
setgauge(2),
setgauge(3),
setgauge(4),
{
type: 'radar',
silent: true,
lineStyle: {
color: '#66ffff',
},
areaStyle: {
color: 'rgba(102, 255, 255, 0.31)',
},
data: setData(),
},
{
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 20,
data: setSpot(),
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
}) })
}) })
return scatterData
}
const options = {
backgroundColor: '#0E1327',
polar: {
center: ['50%', '50%'],
radius: '60%'
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: indicator,
axisName: {
color: '#b7e9fd',
fontSize: 13,
padding: -20
},
nameGap: 45,
splitNumber: 4,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)']
}
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽
}
}
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 25,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
axisLabel: {
fontSize: 12,
color: '#5aa3d0',
align: 'left',
margin: -5
}
},
series: [
setgauge(0),
setgauge(1),
setgauge(2),
setgauge(3),
setgauge(4),
{
type: 'radar',
silent: true,
lineStyle: {
color: '#66ffff'
},
areaStyle: {
color: 'rgba(102, 255, 255, 0.31)'
},
data: setData()
},
{
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 20,
data: setSpot()
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
})
})
</script> </script>

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

@ -1,200 +1,201 @@
<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:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
let echartData = [
{
name: '设备1',
value: '3720',
},
{
name: '设备2',
value: '2920',
},
{
name: '设备3',
value: '2200',
},
{
name: '设备4',
value: '1420',
},
];
let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g;
return num.toString().replace(reg, ',');
};
const options = {
backgroundColor: '#364686',
color: color,
title: [
{
text: '设备数',
x: 'center',
top: '40%',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: '100',
},
}, },
{ config: {
text: '60%', type: Object,
x: 'center', default: () => {},
top: '50%',
textStyle: {
fontSize: 30,
color: '#00f0ff',
foontWeight: '500',
},
}, },
], id: {
polar: { type: String,
radius: ['44%', '50%'], default: 'chart',
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
}, },
axisLine: { width: {
show: false, type: String,
default: '200px',
}, },
axisTick: { height: {
show: false, type: String,
default: '200px',
}, },
},
series: [
{
type: 'pie',
radius: ['55%', '67%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: '#364684',
borderWidth: 2,
},
},
labelLine: {
normal: {
length: 60,
length2: 60,
lineStyle: {
color: '#e6e6e6',
},
},
},
label: {
normal: {
formatter: (params) => {
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
},
padding: [0, -70, 30, -70],
rich: {
icon: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
},
name: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
color: '#fff',
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: '#fff',
align: 'left',
},
},
},
},
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: '50%',
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false,
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: 'rgba(50,171,241, 1)',
},
{
offset: 0,
color: 'rgba(55,70,130, 0)',
},
]),
// borderWidth: 1,
// borderColor: '',
shadowBlur: 10,
// shadowColor: 'rgba(55,70,130, 1)'
},
},
data: [
{
value: 100,
},
],
},
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
let echartData = [
{
name: '设备1',
value: '3720',
},
{
name: '设备2',
value: '2920',
},
{
name: '设备3',
value: '2200',
},
{
name: '设备4',
value: '1420',
},
]
let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g
return num.toString().replace(reg, ',')
}
}) const options = {
backgroundColor: '#364686',
color: color,
title: [
{
text: '设备数',
x: 'center',
top: '40%',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: '100',
},
},
{
text: '60%',
x: 'center',
top: '50%',
textStyle: {
fontSize: 30,
color: '#00f0ff',
foontWeight: '500',
},
},
],
polar: {
radius: ['44%', '50%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
type: 'pie',
radius: ['55%', '67%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: '#364684',
borderWidth: 2,
},
},
labelLine: {
normal: {
length: 60,
length2: 60,
lineStyle: {
color: '#e6e6e6',
},
},
},
label: {
normal: {
formatter: (params) => {
return (
'{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
)
},
padding: [0, -70, 30, -70],
rich: {
icon: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
},
name: {
fontSize: 14,
align: 'left',
padding: [4, 0, 0, 0],
color: '#fff',
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: '#fff',
align: 'left',
},
},
},
},
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: '50%',
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false,
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: 'rgba(50,171,241, 1)',
},
{
offset: 0,
color: 'rgba(55,70,130, 0)',
},
]),
// borderWidth: 1,
// borderColor: '',
shadowBlur: 10,
// shadowColor: 'rgba(55,70,130, 1)'
},
},
data: [
{
value: 100,
},
],
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,149 +1,147 @@
<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:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
const options = {
title: [
{
text: '已完成',
x: 'center',
top: '52%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '100',
},
}, },
{ config: {
text: '75%', type: Object,
x: 'center', default: () => {},
y: 'center',
textStyle: {
fontSize: '12',
color: '#FFFFFF',
fontFamily: 'DINAlternate-Bold, DINAlternate',
foontWeight: '600',
},
}, },
], id: {
backgroundColor: '#111', type: String,
polar: { default: 'chart',
radius: ['42%', '52%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
}, },
axisLine: { width: {
show: false, type: String,
default: '200px',
}, },
axisTick: { height: {
show: false, type: String,
default: '200px',
}, },
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: 'rgba(66, 66, 66, .3)',
},
data: [60],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
},
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['56%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['38%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
],
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
}) const options = {
title: [
{
text: '已完成',
x: 'center',
top: '52%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '100',
},
},
{
text: '75%',
x: 'center',
y: 'center',
textStyle: {
fontSize: '12',
color: '#FFFFFF',
fontFamily: 'DINAlternate-Bold, DINAlternate',
foontWeight: '600',
},
},
],
backgroundColor: '#111',
polar: {
radius: ['42%', '52%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: 'rgba(66, 66, 66, .3)',
},
data: [60],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
},
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['56%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['38%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

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

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

119
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; 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>

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

@ -1,68 +1,67 @@
<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: [
{ {
type: 'candlestick', type: 'candlestick',
data: [ data: [
[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; 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>

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

@ -1,111 +1,110 @@
<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: [
{ {
name: 'Funnel', name: 'Funnel',
type: 'funnel', type: 'funnel',
left: '10%', left: '10%',
top: 30, top: 30,
bottom: 10, bottom: 10,
width: '80%', width: '80%',
min: 0, min: 0,
max: 100, max: 100,
minSize: '0%', minSize: '0%',
maxSize: '100%', maxSize: '100%',
sort: 'descending', sort: 'descending',
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; 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>

116
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
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>

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

@ -1,91 +1,90 @@
<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: [
{ {
type: 'graph', type: 'graph',
layout: 'none', layout: 'none',
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; 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>

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

@ -1,79 +1,77 @@
<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%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true, containLabel: true,
}, },
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>

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

@ -1,148 +1,145 @@
<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({
className: {
type: String,
default: 'chart'
},
config:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
} }
}) let props = defineProps({
const options = { className: {
grid: { type: String,
top: 10, default: 'chart',
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData
}, },
{ config: {
name: 'bar', type: Object,
type: 'bar', default: () => {},
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' }
])
},
data: barData
}, },
{ id: {
name: 'line', type: String,
type: 'bar', default: 'chart',
barGap: '-100%', },
barWidth: 10, width: {
itemStyle: { type: String,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ default: '200px',
{ offset: 0, color: 'rgba(20,200,212,0.5)' }, },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' }, height: {
{ offset: 1, color: 'rgba(20,200,212,0)' } type: String,
]) default: '200px',
},
z: -12,
data: lineData
}, },
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f'
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
const options = {
}) grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true,
},
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc',
},
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc',
},
},
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc',
},
},
},
series: [
{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData,
},
{
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' },
]),
},
data: barData,
},
{
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' },
]),
},
z: -12,
data: lineData,
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f',
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData,
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,89 +1,88 @@
<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: [
{ {
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
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; 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>

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

@ -1,248 +1,247 @@
<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:{
type: Object,
default: ()=>{}
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
})
const dataBJ = [
[55, 9, 56, 0.46, 18, 6, 1],
[25, 11, 21, 0.65, 34, 9, 2],
[56, 7, 63, 0.3, 14, 5, 3],
[33, 7, 29, 0.33, 16, 6, 4],
[42, 24, 44, 0.76, 40, 16, 5],
[82, 58, 90, 1.77, 68, 33, 6],
[74, 49, 77, 1.46, 48, 27, 7],
[78, 55, 80, 1.29, 59, 29, 8],
[267, 216, 280, 4.8, 108, 64, 9],
[185, 127, 216, 2.52, 61, 27, 10],
[39, 19, 38, 0.57, 31, 15, 11],
[41, 11, 40, 0.43, 21, 7, 12],
[64, 38, 74, 1.04, 46, 22, 13],
[108, 79, 120, 1.7, 75, 41, 14],
[108, 63, 116, 1.48, 44, 26, 15],
[33, 6, 29, 0.34, 13, 5, 16],
[94, 66, 110, 1.54, 62, 31, 17],
[186, 142, 192, 3.88, 93, 79, 18],
[57, 31, 54, 0.96, 32, 14, 19],
[22, 8, 17, 0.48, 23, 10, 20],
[39, 15, 36, 0.61, 29, 13, 21],
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28],
[134, 96, 165, 2.76, 83, 41, 29],
[52, 24, 60, 1.03, 50, 21, 30],
[46, 5, 49, 0.28, 10, 6, 31]
];
const dataGZ = [
[26, 37, 27, 1.163, 27, 13, 1],
[85, 62, 71, 1.195, 60, 8, 2],
[78, 38, 74, 1.363, 37, 7, 3],
[21, 21, 36, 0.634, 40, 9, 4],
[41, 42, 46, 0.915, 81, 13, 5],
[56, 52, 69, 1.067, 92, 16, 6],
[64, 30, 28, 0.924, 51, 2, 7],
[55, 48, 74, 1.236, 75, 26, 8],
[76, 85, 113, 1.237, 114, 27, 9],
[91, 81, 104, 1.041, 56, 40, 10],
[84, 39, 60, 0.964, 25, 11, 11],
[64, 51, 101, 0.862, 58, 23, 12],
[70, 69, 120, 1.198, 65, 36, 13],
[77, 105, 178, 2.549, 64, 16, 14],
[109, 68, 87, 0.996, 74, 29, 15],
[73, 68, 97, 0.905, 51, 34, 16],
[54, 27, 47, 0.592, 53, 12, 17],
[51, 61, 97, 0.811, 65, 19, 18],
[91, 71, 121, 1.374, 43, 18, 19],
[73, 102, 182, 2.787, 44, 19, 20],
[73, 50, 76, 0.717, 31, 20, 21],
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28],
[82, 92, 174, 3.29, 0, 13, 29],
[106, 116, 188, 3.628, 101, 16, 30],
[118, 50, 0, 1.383, 76, 11, 31]
];
const dataSH = [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7],
[89, 65, 78, 0.86, 51, 26, 8],
[53, 33, 47, 0.64, 50, 17, 9],
[80, 55, 80, 1.01, 75, 24, 10],
[117, 81, 124, 1.03, 45, 24, 11],
[99, 71, 142, 1.1, 62, 42, 12],
[95, 69, 130, 1.28, 74, 50, 13],
[116, 87, 131, 1.47, 84, 40, 14],
[108, 80, 121, 1.3, 85, 37, 15],
[134, 83, 167, 1.16, 57, 43, 16],
[79, 43, 107, 1.05, 59, 37, 17],
[71, 46, 89, 0.86, 64, 25, 18],
[97, 71, 113, 1.17, 88, 31, 19],
[84, 57, 91, 0.85, 55, 31, 20],
[87, 63, 101, 0.9, 56, 41, 21],
[104, 77, 119, 1.09, 73, 48, 22],
[87, 62, 100, 1, 72, 28, 23],
[168, 128, 172, 1.49, 97, 56, 24],
[65, 45, 51, 0.74, 39, 17, 25],
[39, 24, 38, 0.61, 47, 17, 26],
[39, 24, 39, 0.59, 50, 19, 27],
[93, 68, 96, 1.05, 79, 29, 28],
[188, 143, 197, 1.66, 99, 51, 29],
[174, 131, 174, 1.55, 108, 50, 30],
[187, 143, 201, 1.39, 89, 53, 31]
];
const lineStyle = {
width: 1,
opacity: 0.5
};
const options = {
backgroundColor: '#161627',
title: {
text: 'AQI - Radar',
left: 'center',
textStyle: {
color: '#eee'
}
},
legend: {
show:false,
bottom: 5,
data: ['Beijing', 'Shanghai', 'Guangzhou'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
}, },
selectedMode: 'single' config: {
}, type: Object,
radar: { default: () => {},
indicator: [
{ name: 'AQI', max: 300,min:1 },
{ name: 'PM2.5', max: 250,min:1 },
{ name: 'PM10', max: 300,min:1 },
{ name: 'CO', max: 5,min:1 },
{ name: 'NO2', max: 200,min:1 },
{ name: 'SO2', max: 100,min:1 }
],
shape: 'circle',
splitNumber: 5,
axisName: {
color: 'rgb(238, 197, 102)'
}, },
splitLine: { id: {
lineStyle: { type: String,
color: [ default: 'chart',
'rgba(238, 197, 102, 0.1)',
'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)'
].reverse()
}
}, },
splitArea: { width: {
show: false type: String,
default: '200px',
}, },
axisLine: { height: {
lineStyle: { type: String,
color: 'rgba(238, 197, 102, 0.5)' default: '200px',
}
}
},
series: [
{
name: 'Beijing',
type: 'radar',
lineStyle: lineStyle,
data: dataBJ,
symbol: 'none',
itemStyle: {
color: '#F9713C'
},
areaStyle: {
opacity: 0.1
}
}, },
{
name: 'Shanghai',
type: 'radar',
lineStyle: lineStyle,
data: dataSH,
symbol: 'none',
itemStyle: {
color: '#B3E4A1'
},
areaStyle: {
opacity: 0.05
}
},
{
name: 'Guangzhou',
type: 'radar',
lineStyle: lineStyle,
data: dataGZ,
symbol: 'none',
itemStyle: {
color: 'rgb(238, 197, 102)'
},
areaStyle: {
opacity: 0.05
}
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
}) })
const dataBJ = [
[55, 9, 56, 0.46, 18, 6, 1],
[25, 11, 21, 0.65, 34, 9, 2],
[56, 7, 63, 0.3, 14, 5, 3],
[33, 7, 29, 0.33, 16, 6, 4],
[42, 24, 44, 0.76, 40, 16, 5],
[82, 58, 90, 1.77, 68, 33, 6],
[74, 49, 77, 1.46, 48, 27, 7],
[78, 55, 80, 1.29, 59, 29, 8],
[267, 216, 280, 4.8, 108, 64, 9],
[185, 127, 216, 2.52, 61, 27, 10],
[39, 19, 38, 0.57, 31, 15, 11],
[41, 11, 40, 0.43, 21, 7, 12],
[64, 38, 74, 1.04, 46, 22, 13],
[108, 79, 120, 1.7, 75, 41, 14],
[108, 63, 116, 1.48, 44, 26, 15],
[33, 6, 29, 0.34, 13, 5, 16],
[94, 66, 110, 1.54, 62, 31, 17],
[186, 142, 192, 3.88, 93, 79, 18],
[57, 31, 54, 0.96, 32, 14, 19],
[22, 8, 17, 0.48, 23, 10, 20],
[39, 15, 36, 0.61, 29, 13, 21],
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28],
[134, 96, 165, 2.76, 83, 41, 29],
[52, 24, 60, 1.03, 50, 21, 30],
[46, 5, 49, 0.28, 10, 6, 31],
]
}) const dataGZ = [
[26, 37, 27, 1.163, 27, 13, 1],
[85, 62, 71, 1.195, 60, 8, 2],
[78, 38, 74, 1.363, 37, 7, 3],
[21, 21, 36, 0.634, 40, 9, 4],
[41, 42, 46, 0.915, 81, 13, 5],
[56, 52, 69, 1.067, 92, 16, 6],
[64, 30, 28, 0.924, 51, 2, 7],
[55, 48, 74, 1.236, 75, 26, 8],
[76, 85, 113, 1.237, 114, 27, 9],
[91, 81, 104, 1.041, 56, 40, 10],
[84, 39, 60, 0.964, 25, 11, 11],
[64, 51, 101, 0.862, 58, 23, 12],
[70, 69, 120, 1.198, 65, 36, 13],
[77, 105, 178, 2.549, 64, 16, 14],
[109, 68, 87, 0.996, 74, 29, 15],
[73, 68, 97, 0.905, 51, 34, 16],
[54, 27, 47, 0.592, 53, 12, 17],
[51, 61, 97, 0.811, 65, 19, 18],
[91, 71, 121, 1.374, 43, 18, 19],
[73, 102, 182, 2.787, 44, 19, 20],
[73, 50, 76, 0.717, 31, 20, 21],
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28],
[82, 92, 174, 3.29, 0, 13, 29],
[106, 116, 188, 3.628, 101, 16, 30],
[118, 50, 0, 1.383, 76, 11, 31],
]
const dataSH = [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7],
[89, 65, 78, 0.86, 51, 26, 8],
[53, 33, 47, 0.64, 50, 17, 9],
[80, 55, 80, 1.01, 75, 24, 10],
[117, 81, 124, 1.03, 45, 24, 11],
[99, 71, 142, 1.1, 62, 42, 12],
[95, 69, 130, 1.28, 74, 50, 13],
[116, 87, 131, 1.47, 84, 40, 14],
[108, 80, 121, 1.3, 85, 37, 15],
[134, 83, 167, 1.16, 57, 43, 16],
[79, 43, 107, 1.05, 59, 37, 17],
[71, 46, 89, 0.86, 64, 25, 18],
[97, 71, 113, 1.17, 88, 31, 19],
[84, 57, 91, 0.85, 55, 31, 20],
[87, 63, 101, 0.9, 56, 41, 21],
[104, 77, 119, 1.09, 73, 48, 22],
[87, 62, 100, 1, 72, 28, 23],
[168, 128, 172, 1.49, 97, 56, 24],
[65, 45, 51, 0.74, 39, 17, 25],
[39, 24, 38, 0.61, 47, 17, 26],
[39, 24, 39, 0.59, 50, 19, 27],
[93, 68, 96, 1.05, 79, 29, 28],
[188, 143, 197, 1.66, 99, 51, 29],
[174, 131, 174, 1.55, 108, 50, 30],
[187, 143, 201, 1.39, 89, 53, 31],
]
const lineStyle = {
width: 1,
opacity: 0.5,
}
const options = {
backgroundColor: '#161627',
title: {
text: 'AQI - Radar',
left: 'center',
textStyle: {
color: '#eee',
},
},
legend: {
show: false,
bottom: 5,
data: ['Beijing', 'Shanghai', 'Guangzhou'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14,
},
selectedMode: 'single',
},
radar: {
indicator: [
{ name: 'AQI', max: 300, min: 1 },
{ name: 'PM2.5', max: 250, min: 1 },
{ name: 'PM10', max: 300, min: 1 },
{ name: 'CO', max: 5, min: 1 },
{ name: 'NO2', max: 200, min: 1 },
{ name: 'SO2', max: 100, min: 1 },
],
shape: 'circle',
splitNumber: 5,
axisName: {
color: 'rgb(238, 197, 102)',
},
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)',
'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)',
].reverse(),
},
},
splitArea: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)',
},
},
},
series: [
{
name: 'Beijing',
type: 'radar',
lineStyle: lineStyle,
data: dataBJ,
symbol: 'none',
itemStyle: {
color: '#F9713C',
},
areaStyle: {
opacity: 0.1,
},
},
{
name: 'Shanghai',
type: 'radar',
lineStyle: lineStyle,
data: dataSH,
symbol: 'none',
itemStyle: {
color: '#B3E4A1',
},
areaStyle: {
opacity: 0.05,
},
},
{
name: 'Guangzhou',
type: 'radar',
lineStyle: lineStyle,
data: dataGZ,
symbol: 'none',
itemStyle: {
color: 'rgb(238, 197, 102)',
},
areaStyle: {
opacity: 0.05,
},
},
],
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
</script> </script>

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

@ -1,85 +1,84 @@
<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: {},
series: [ series: [
{ {
symbolSize: 20, symbolSize: 20,
data: [ data: [
[10.0, 8.04], [10.0, 8.04],
[8.07, 6.95], [8.07, 6.95],
[13.0, 7.58], [13.0, 7.58],
[9.05, 8.81], [9.05, 8.81],
[11.0, 8.33], [11.0, 8.33],
[14.0, 7.66], [14.0, 7.66],
[13.4, 6.81], [13.4, 6.81],
[10.0, 6.33], [10.0, 6.33],
[14.0, 8.96], [14.0, 8.96],
[12.5, 6.82], [12.5, 6.82],
[9.15, 7.2], [9.15, 7.2],
[11.5, 7.2], [11.5, 7.2],
[3.03, 4.23], [3.03, 4.23],
[12.2, 7.83], [12.2, 7.83],
[2.02, 4.47], [2.02, 4.47],
[1.05, 3.33], [1.05, 3.33],
[4.05, 4.96], [4.05, 4.96],
[6.03, 7.24], [6.03, 7.24],
[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; 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>

22
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>

12
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>

35
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%;
overflow: hidden;
height: calc(100vh - 93px);
position: relative;
.info{
position: absolute;
left: 0;
width: 100%; width: 100%;
font-weight: bold; overflow: hidden;
z-index: 999; height: calc(100vh - 93px);
position: relative;
.info {
position: absolute;
left: 0;
width: 100%;
font-weight: bold;
z-index: 999;
}
::v-deep(.el-card) {
border-radius: 0;
}
} }
::v-deep(.el-card){
border-radius: 0;
}
}
</style> </style>

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

@ -1,25 +1,25 @@
<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">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<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">
<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>
<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>

26
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, // 文字
} },
] ]

530
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,248 +221,247 @@
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;
background: #f7f6f4; background: #f7f6f4;
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;}
.g-chat-container-footer-input{
word-break: break-all;
padding: 8px;
white-space: pre-wrap;
overflow: auto;
min-height: 120px;
flex: 1;
background: #f7f6f4;
::v-deep(.at-logo){
padding-right: 5px;
vertical-align: text-bottom;
} }
[contenteditable]:focus {
} outline: none;
.g-chat-container-footer-btn{
height: 50px;
background: #f7f6f4;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
::v-deep(.el-button){
padding: 8px 20px;
margin-right: 15px;
} }
} .g-chat-container-footer-input {
.g-layout-content-chat-util{ word-break: break-all;
height: 46px; padding: 8px;
display: flex; white-space: pre-wrap;
flex-shrink: 0; overflow: auto;
justify-content: space-between; min-height: 120px;
position: relative; flex: 1;
border-bottom: 1px solid #ebebeb; background: #f7f6f4;
background: white; ::v-deep(.at-logo) {
.item-left{ padding-right: 5px;
vertical-align: text-bottom;
}
}
.g-chat-container-footer-btn {
height: 50px;
background: #f7f6f4;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end;
flex-shrink: 0;
::v-deep(.el-button) {
padding: 8px 20px;
margin-right: 15px;
}
} }
.upload-picture{ .g-layout-content-chat-util {
cursor: pointer; height: 46px;
display: flex; display: flex;
align-items: center; flex-shrink: 0;
justify-content: center; justify-content: space-between;
height: 100%;
width: 40px;
}
.screenshot-upload{
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 40px;
}
.recoding-chatbox{
position: relative; position: relative;
} border-bottom: 1px solid #ebebeb;
.emoje{ background: white;
display: flex; .item-left {
align-items: center; display: flex;
height: 100%; align-items: center;
justify-content: center; }
width: 40px; .upload-picture {
font-size: 25px;
cursor: pointer;
color: grey;
}
.upload-picture{
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
width: 40px;
justify-content: center;
}
.emoje-border-wrap{
top: -364px;
left: 0;
position: absolute;
width: 372px;
padding: 10px;
z-index: 9;
border: 1px solid #D9D9D9;
background-color: #fff;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.2);
.title-emoje{
cursor: pointer; cursor: pointer;
float: left;
border: 1px solid #e8e8e8;
height: 32px;
width: 32px;
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: -1px 0 0 -1px; height: 100%;
//padding: 4px 2px; width: 40px;
text-align: center;
/*img{*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
} }
} .screenshot-upload {
} cursor: pointer;
.from_user_info{
width: 100%;
// overflow: hidden;
float: left;
font-size: 12px;
display: flex;
flex-direction: column;
margin-bottom: 10px;
::v-deep .share-link {
color: #000;
text-decoration: none;
section {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%;
width: 40px;
} }
.clamp { .recoding-chatbox {
display: -webkit-box; position: relative;
-webkit-box-orient: vertical; }
-webkit-line-clamp: 2; .emoje {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
width: 40px;
font-size: 25px;
cursor: pointer;
color: grey;
}
.upload-picture {
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
width: 40px;
justify-content: center;
}
.emoje-border-wrap {
top: -364px;
left: 0;
position: absolute;
width: 372px;
padding: 10px;
z-index: 9;
border: 1px solid #d9d9d9;
background-color: #fff;
overflow: hidden; overflow: hidden;
} box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
.left-side { .title-emoje {
flex: 1; cursor: pointer;
} float: left;
.right-side { border: 1px solid #e8e8e8;
width: 60px; height: 32px;
margin-left: 20px; width: 32px;
img { overflow: hidden;
width: 100%; display: flex;
align-items: center;
justify-content: center;
margin: -1px 0 0 -1px;
//padding: 4px 2px;
text-align: center;
/*img{*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
} }
} }
} }
.receive-message-wrap{
.from_user_info {
width: 100%;
// overflow: hidden;
float: left;
font-size: 12px;
display: flex; display: flex;
} flex-direction: column;
.text-content{ margin-bottom: 10px;
background: #fff; ::v-deep .share-link {
word-break: break-all; color: #000;
padding: 5px 10px; text-decoration: none;
max-width: 300px; section {
white-space: pre-wrap; display: flex;
} align-items: center;
.receive-message-info{ }
background: white; .clamp {
display: flex; display: -webkit-box;
align-items: center; -webkit-box-orient: vertical;
padding: 0 5px; -webkit-line-clamp: 2;
border-radius: 4px; overflow: hidden;
} }
.contact-nickname{ .left-side {
margin-bottom: 5px; flex: 1;
color: #b4b4b4; }
} .right-side {
.avatar-show{ width: 60px;
flex-shrink:0 ; margin-left: 20px;
width: 35px; img {
height: 35px; width: 100%;
margin-right: 10px; }
border: 1px solid #e9e9e9; }
img{ }
width: 100%; .receive-message-wrap {
height: 100%; display: flex;
}
.text-content {
background: #fff;
word-break: break-all;
padding: 5px 10px;
max-width: 300px;
white-space: pre-wrap;
}
.receive-message-info {
background: white;
display: flex;
align-items: center;
padding: 0 5px;
border-radius: 4px;
}
.contact-nickname {
margin-bottom: 5px;
color: #b4b4b4;
}
.avatar-show {
flex-shrink: 0;
width: 35px;
height: 35px;
margin-right: 10px;
border: 1px solid #e9e9e9;
img {
width: 100%;
height: 100%;
}
} }
} }
} .ower-user_info {
.ower-user_info{ font-size: 12px;
font-size: 12px;
display: flex;
width: 100%;
float: right;
justify-content: flex-end;
flex-direction: column;
margin-top: 10px;
.text-content{
word-break: break-all;
padding: 5px;
white-space:pre-wrap;
max-width: 300px;
}
.receive-message-wrap{
display: flex; display: flex;
width: 100%;
float: right;
justify-content: flex-end; justify-content: flex-end;
align-items: center flex-direction: column;
} margin-top: 10px;
.receive-message-info{ .text-content {
background: #9eea6a; word-break: break-all;
display: flex; padding: 5px;
align-items: center; white-space: pre-wrap;
padding: 0 5px; max-width: 300px;
border-radius: 4px; }
} .receive-message-wrap {
.contact-nickname{ display: flex;
text-align: right; justify-content: flex-end;
margin-bottom: 5px; align-items: center;
color: #b4b4b4; }
} .receive-message-info {
.avatar-show{ background: #9eea6a;
flex-shrink:0 ; display: flex;
width: 35px; align-items: center;
height: 35px; padding: 0 5px;
margin-left: 10px; border-radius: 4px;
border: 1px solid #e9e9e9; }
img{ .contact-nickname {
width: 100%; text-align: right;
height: 100%; margin-bottom: 5px;
color: #b4b4b4;
}
.avatar-show {
flex-shrink: 0;
width: 35px;
height: 35px;
margin-left: 10px;
border: 1px solid #e9e9e9;
img {
width: 100%;
height: 100%;
}
} }
} }
}
</style> </style>

199
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,138 +24,135 @@
</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;
flex-shrink: 0;
justify-content: space-between;
position: relative;
border-bottom: 1px solid #ebebeb;
background: white;
.item-left{
display: flex; display: flex;
align-items: center; flex-shrink: 0;
} justify-content: space-between;
.upload-picture{
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 40px;
}
.screenshot-upload{
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 40px;
}
.recoding-chatbox{
position: relative; position: relative;
} border-bottom: 1px solid #ebebeb;
.emoje{ background: white;
display: flex; .item-left {
align-items: center; display: flex;
height: 100%; align-items: center;
justify-content: center; }
width: 40px; .upload-picture {
font-size: 25px;
cursor: pointer;
color: grey;
}
.upload-picture{
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
width: 40px;
justify-content: center;
}
.emoje-border-wrap{
top: -121px;
left: 0;
position: absolute;
width: 372px;
padding: 10px;
z-index: 9;
border: 1px solid #D9D9D9;
background-color: #fff;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.2);
.title-emoje{
cursor: pointer; cursor: pointer;
float: left;
border: 1px solid #e8e8e8;
height: 32px;
width: 32px;
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: -1px 0 0 -1px; height: 100%;
//padding: 4px 2px; width: 40px;
text-align: center; }
/*img{*/ .screenshot-upload {
/* width: 100%;*/ cursor: pointer;
/* height: 100%;*/ display: flex;
/*}*/ align-items: center;
justify-content: center;
height: 100%;
width: 40px;
}
.recoding-chatbox {
position: relative;
}
.emoje {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
width: 40px;
font-size: 25px;
cursor: pointer;
color: grey;
}
.upload-picture {
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
width: 40px;
justify-content: center;
}
.emoje-border-wrap {
top: -121px;
left: 0;
position: absolute;
width: 372px;
padding: 10px;
z-index: 9;
border: 1px solid #d9d9d9;
background-color: #fff;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
.title-emoje {
cursor: pointer;
float: left;
border: 1px solid #e8e8e8;
height: 32px;
width: 32px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: -1px 0 0 -1px;
//padding: 4px 2px;
text-align: center;
/*img{*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
}
} }
} }
}
</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>

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

@ -1,25 +1,25 @@
<template> <template>
<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>

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

@ -4,44 +4,42 @@
<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 class="item">Default</el-button> <el-button class="item">Default</el-button>
<el-button type="primary" class="item">Primary</el-button> <el-button type="primary" class="item">Primary</el-button>
<el-button type="success" class="item">Success</el-button> <el-button type="success" class="item">Success</el-button>
<el-button type="info" class="item">Info</el-button> <el-button type="info" class="item">Info</el-button>
<el-button type="warning" class="item">Warning</el-button> <el-button type="warning" class="item">Warning</el-button>
<el-button type="danger" class="item">Danger</el-button> <el-button type="danger" class="item">Danger</el-button>
<el-button class="item">中文</el-button> <el-button class="item">中文</el-button>
<el-button plain class="item">Plain</el-button> <el-button plain class="item">Plain</el-button>
<el-button type="primary" plain class="item">Primary</el-button> <el-button type="primary" plain class="item">Primary</el-button>
<el-button type="success" plain class="item">Success</el-button> <el-button type="success" plain class="item">Success</el-button>
<el-button type="info" plain class="item">Info</el-button> <el-button type="info" plain class="item">Info</el-button>
<el-button type="warning" plain class="item">Warning</el-button> <el-button type="warning" plain class="item">Warning</el-button>
<el-button type="danger" plain class="item">Danger</el-button> <el-button type="danger" plain class="item">Danger</el-button>
<el-button round class="item">Round</el-button> <el-button round class="item">Round</el-button>
<el-button type="primary" round class="item">Primary</el-button> <el-button type="primary" round class="item">Primary</el-button>
<el-button type="success" round class="item">Success</el-button> <el-button type="success" round class="item">Success</el-button>
<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>
@ -124,8 +118,8 @@
<div class="custom-loading"> <div class="custom-loading">
<svg class="circular" viewBox="-10, -10, 50, 50"> <svg class="circular" viewBox="-10, -10, 50, 50">
<path <path
class="path" class="path"
d=" d="
M 30 15 M 30 15
L 28 17 L 28 17
M 25.61 25.61 M 25.61 25.61
@ -133,7 +127,7 @@
A 15 15, 0, 1, 1, 27.99 7.5 A 15 15, 0, 1, 1, 27.99 7.5
L 15 15 L 15 15
" "
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
/> />
</svg> </svg>
</div> </div>
@ -146,52 +140,40 @@
<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 color="#626aef" class="item">Default</el-button> <el-button color="#626aef" class="item">Default</el-button>
<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