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

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

Browse Source
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
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",
"build": "vite build",
"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": {
"@better-scroll/core": "^2.4.2",
@@ -47,14 +48,19 @@
"@vitejs/plugin-vue": "^3.0.0",
"dart-sass": "^1.25.0",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.3.0",
"fast-glob": "^3.2.11",
"prettier": "^2.7.1",
"typescript": "^4.6.4",
"unplugin-auto-import": "^0.10.3",
"unplugin-vue-components": "^0.21.2",
"unplugin-vue-define-options": "^0.7.3",
"vite": "^3.0.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^0.38.4"
}
}

14
prettier.config.cjs Normal file
View File

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

18
src/App.vue
View File

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

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

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

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

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

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

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

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

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

15
src/components/HelloWorld.vue
View File

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

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

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

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

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

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

@@ -1,6 +1,10 @@
<template>
<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">
<zb-icon type="play-filled" />
</div>
@@ -8,14 +12,14 @@
<div class="zb-pipeline-start-title">开始</div>
<div class="zb-pipeline-start-tooltip">
<el-tooltip placement="top-start" content="点击进行构建基础设置">
<el-icon >
<el-icon>
<Help />
</el-icon>
</el-tooltip>
<!-- <zb-tooltip placement="right">-->
<!-- <zb-icon type="help" />-->
<!-- <div slot="content">点击进行构建基础设置</div>-->
<!-- </zb-tooltip>-->
<!-- <zb-tooltip placement="right">-->
<!-- <zb-icon type="help" />-->
<!-- <div slot="content">点击进行构建基础设置</div>-->
<!-- </zb-tooltip>-->
</div>
</div>
</div>
@@ -23,41 +27,128 @@
</div>
</template>
<script lang="ts" setup>
import {
Help
} from '@element-plus/icons-vue'
import { Help } from '@element-plus/icons-vue'
</script>
<style>
/* zb-pipeline-start-wrapper */
.zb-pipeline-start-wrapper { position:relative; padding:0 40px; }
/* zb-pipeline-start-wrapper */
.zb-pipeline-start-wrapper {
position: relative;
padding: 0 40px;
}
/* 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: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 */
.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: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:after { }
.zb-pipeline-start:hover .zb-pipeline-start-header { border-color:#2d8cf0; }
.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 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 .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:after { }
.zb-pipeline-start.active .zb-pipeline-start-header { border-color:#2d8cf0; }
.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 { }
/* 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 .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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6
src/icons/index.js
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,58 +1,58 @@
<template>
<div ref="bsWrap" class="tags-scroll-wrap">
<div ref="bsContent" class="tags-scroll" >
<div ref="bsContent" class="tags-scroll">
<slot></slot>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted,nextTick } from 'vue';
import { useElementSize } from '@vueuse/core';
import BScroll from '@better-scroll/core';
import type { Options } from '@better-scroll/core';
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { useElementSize } from '@vueuse/core'
import BScroll 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 */
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();
options: Options
}
});
onMounted(() => {
initBetterScroll();
});
const props = defineProps<Props>()
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>
<style scoped>
.tags-scroll-wrap{
.tags-scroll-wrap {
width: 100%;
}
.tags-scroll-inner{
}
.tags-scroll-inner {
/*display: flex;*/
}
.tags-scroll{
}
.tags-scroll {
display: inline-block;
}
}
</style>

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

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

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

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

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

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

63
src/layout/index.vue
View File

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

2
src/styles/index.scss
View File

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

28
src/styles/sidebar.scss
View File

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

3
src/styles/transition.scss
View File

@@ -27,7 +27,6 @@
transform: translateX(20px);
}
// 面包屑动画
.breadcrumb-enter-active {
transition: all 0.25s;
@@ -38,8 +37,6 @@
transform: translateX(30px) skewX(-50deg);
}
.fade-transform-leave-active,
.fade-transform-enter-active {
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
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$blue: #324157;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;

5
src/utils/auth.js
View File

@@ -1,4 +1,3 @@
const TokenKey = 'zb-token'
export function getToken() {
@@ -6,9 +5,9 @@ export function getToken() {
}
export function setToken(token) {
return localStorage.TokenKey = token
return (localStorage.TokenKey = token)
}
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) {
console.log({folder})
let folderPromises: Promise<any>[] = [];
const folderPromises: Promise<any>[] = [];
const promises = folder?.files?.map(async param => await handleEachFile(param, zip, folder.folderName));
await Promise.all([...promises, ...folderPromises]);
}
@@ -169,7 +169,7 @@ function handleDataWithRender(worksheet: Worksheet, sheet: ISheet) {
// @ts-ignore
function getValueFromRender(renderResult: any) {
if (renderResult?.type) {
let children = renderResult?.props?.children;
const children = renderResult?.props?.children;
if (children?.type) {
return getValueFromRender(children);
} else {

43
src/utils/emojis.js
View File

@@ -1,12 +1,35 @@
export default {
imgs: ['爱你',
'爱情', '爱心', '傲慢',
'白眼', '抱拳', '鄙视',
'闭嘴', '便便', '擦汗',
'菜刀', '差劲', '呲牙',
'大哭', '蛋糕', '刀',
'得意', '凋谢', '发呆', 'NO', 'OK',
'发抖', '发怒', '饭', '飞吻', '奋斗',
'疯了', '尴尬', '勾引', '鼓掌', '哈欠',
]
imgs: [
'爱你',
'爱情',
'爱心',
'傲慢',
'白眼',
'抱拳',
'鄙视',
'闭嘴',
'便便',
'擦汗',
'菜刀',
'差劲',
'呲牙',
'大哭',
'蛋糕',
'刀',
'得意',
'凋谢',
'发呆',
'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);
// 设置列名
let columnsName = [];
const columnsName = [];
column.forEach((item,index)=>{
let obj = {
const obj = {
header: item.label, key:item.name, width: null
}
if(autoWidth){
let maxArr = [autoWidthAction(item.label)]
const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{
let str = ite[item.name] ||''
const str = ite[item.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
@@ -93,15 +93,15 @@ export const exportStyleExcel =async ({column,data,filename,autoWidth,format})=>
// 创建工作表
const worksheet = workbook.addWorksheet(filename);
// 设置列名
let columnsName = [];
const columnsName = [];
column.forEach((item,index)=>{
let obj = {
const obj = {
header: item.label, key:item.name, width: null
}
if(autoWidth){
let maxArr = [autoWidthAction(item.label)]
const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{
let str = ite[item.name] ||''
const str = ite[item.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
@@ -161,7 +161,7 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
// 创建excel
const workbook = new ExcelJS.Workbook();
// 创建工作表
let sheet = workbook.addWorksheet("sheet1");
const sheet = workbook.addWorksheet("sheet1");
// 添加表头
sheet.getRow(1).values = ["序号", "日期","地址" ,"配送消息" ,,, ];
@@ -173,16 +173,16 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
"城市",
"邮编"
];
let headers = [];
const headers = [];
column.forEach((item,index)=>{
if(item.children){
item.children.forEach(itemChild=>{
let obj = {
const obj = {
key:itemChild.name, width: null
}
let maxArr = [autoWidthAction(itemChild.label)]
const maxArr = [autoWidthAction(itemChild.label)]
data.forEach(ite=>{
let str = ite[itemChild.name] ||''
const str = ite[itemChild.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
@@ -193,12 +193,12 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
})
}else {
let obj = {
const obj = {
key:item.name, width: null
}
let maxArr = [autoWidthAction(item.label)]
const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{
let str = ite[item.name] ||''
const str = ite[item.name] ||''
if(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') {
date = time
} else {
if ((typeof time === 'string')) {
if ((/^[0-9]+$/.test(time))) {
if (typeof time === 'string') {
if (/^[0-9]+$/.test(time)) {
// support "1548221490638"
time = parseInt(time)
} 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
}
date = new Date(time)
@@ -40,12 +40,14 @@ export function parseTime(time, cFormat) {
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
a: date.getDay(),
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
return value.toString().padStart(2, '0')
})
return time_str
@@ -81,15 +83,7 @@ export function formatTime(time, option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
)
}
}
@@ -124,7 +118,7 @@ export function byteLength(str) {
const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2
if (code >= 0xDC00 && code <= 0xDFFF) i--
if (code >= 0xdc00 && code <= 0xdfff) i--
}
return s
}
@@ -150,10 +144,10 @@ export function cleanArray(actual) {
export function param(json) {
if (!json) return ''
return cleanArray(
Object.keys(json).map(key => {
Object.keys(json).map((key) => {
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
})
}),
).join('&')
}
@@ -168,7 +162,7 @@ export function param2Obj(url) {
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
searchArr.forEach((v) => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
@@ -202,7 +196,7 @@ export function objectMerge(target, source) {
if (Array.isArray(source)) {
return source.slice()
}
Object.keys(source).forEach(property => {
Object.keys(source).forEach((property) => {
const sourceProperty = source[property]
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty)
@@ -227,8 +221,7 @@ export function toggleClass(element, className) {
classString += '' + className
} else {
classString =
classString.substr(0, nameIndex) +
classString.substr(nameIndex + className.length)
classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
}
element.className = classString
}
@@ -254,7 +247,7 @@ export function getTime(type) {
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
@@ -271,7 +264,7 @@ export function debounce(func, wait, immediate) {
}
}
return function(...args) {
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
@@ -298,7 +291,7 @@ export function deepClone(source) {
throw new Error('error arguments', 'deepClone')
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
Object.keys(source).forEach((keys) => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys])
} else {
@@ -356,70 +349,77 @@ export function removeClass(ele, cls) {
}
}
export function getColor() {
var str = '#';
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var str = '#'
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++) {
var num = parseInt(Math.random() * 16);
str += arr[num];
var num = parseInt(Math.random() * 16)
str += arr[num]
}
return str;
return str
}
// 检查给定的值是否是数组
export const isArray = function(value) {
return objToString.call(value) === "[object Array]";
};
var funProto = Function.prototype;
var objProto = Object.prototype;
export const isArray = function (value) {
return objToString.call(value) === '[object Array]'
}
var funProto = Function.prototype
var objProto = Object.prototype
var getPrototypeOf = Object.getPrototypeOf;
var getPrototypeOf = Object.getPrototypeOf
var objToString = objProto.toString;
var hasOwnProperty = objProto.hasOwnProperty;
var funToString = funProto.toString;
var objToString = objProto.toString
var hasOwnProperty = objProto.hasOwnProperty
var funToString = funProto.toString
// 检查给定的值是否是字符串
export const isString = function(value) {
return objToString.call(value) === "[object String]";
};
export const isString = function (value) {
return objToString.call(value) === '[object String]'
}
// 检查给定的值是否是纯对象，纯对象是指通过 {} 或 new Object() 声明的对象
export const isPlainObject = function(value) {
if (!value || objToString.call(value) !== "[object Object]") {
return false;
export const isPlainObject = function (value) {
if (!value || objToString.call(value) !== '[object Object]') {
return false
}
var prototype = getPrototypeOf(value);
var prototype = getPrototypeOf(value)
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 对象，返回克隆后的副本
export const deepObjClone = function(obj){
export const deepObjClone = function (obj) {
let weakMap = new WeakMap()
function clone (obj){
if(obj==null){return obj}
if(obj instanceof Date){ return new Date(obj) }
if(obj instanceof RegExp){ return new RegExp(obj)}
if(typeof obj !== 'object') return obj
function clone(obj) {
if (obj == null) {
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)
}
var copy = new obj.constructor
weakMap.set(obj,copy)
for(var key in obj){
if(Object.prototype.hasOwnProperty.call(obj, key)){
var value = obj[key];
copy[key] = clone(value);
var copy = new obj.constructor()
weakMap.set(obj, copy)
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var value = obj[key]
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}
*/
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)
}
@@ -60,7 +61,8 @@ export function validAlphabets(str) {
* @returns {Boolean}
*/
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)
}

12
src/views/Home.vue
View File

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

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

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

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

@@ -12,22 +12,21 @@
</div>
</template>
<script setup lang="ts">
import LineCharts from './components/complex/line/index.vue'
import BarCharts from './components/complex/bar/index.vue'
import LineCharts from './components/complex/line/index.vue'
import BarCharts from './components/complex/bar/index.vue'
</script>
<style lang="scss" scoped>
.m-complex{
.m-complex {
height: 100%;
width: 100%;
background-color: #030409;
.m-complex-inner{
.m-complex-inner {
padding: 20px;
display: flex;
flex-wrap: wrap;
}
}
.item-complex{
.item-complex {
width: 454px;
height: 292px;
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-repeat: no-repeat;
}
</style>

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

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

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

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

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,40 +1,38 @@
export const cityIconData = [
{
adcode: 650000,
name: "新疆维吾尔自治区",
value:[88.999903,43.607078]
},{
adcode: 150000,
name: "内蒙古自治区",
value:[119.24787,42.205741]
name: '新疆维吾尔自治区',
value: [88.999903, 43.607078],
},
,{
{
adcode: 150000,
name: "内蒙古自治区",
value:[110.627161,41.16628]
name: '内蒙古自治区',
value: [119.24787, 42.205741],
},
,
{
adcode: 150000,
name: '内蒙古自治区',
value: [110.627161, 41.16628],
},
{
adcode: 540000,
name: "西藏自治区",
value:[89.483714,30.251951]
name: '西藏自治区',
value: [89.483714, 30.251951],
},
{
adcode: 630000,
name: "青海省",
value:[102.064693,37.084008]
name: '青海省',
value: [102.064693, 37.084008],
},
{
adcode: 530000,
name: "云南省",
value:[102.187665,25.083688]
name: '云南省',
value: [102.187665, 25.083688],
},
{
adcode: 610000,
name: "陕西省",
value:[109.20663,35.018625]
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
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
!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"});
!(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'
})

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

File diff suppressed because one or more lines are too long

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

@@ -1,170 +1,167 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script lang="ts" setup>
import 'echarts-liquidfill/src/liquidFill.js'
import './china.js'
import './bmap.min.js'
import * as echarts from "echarts";
import {EChartsType} from "echarts/core";
import {onMounted} from "vue";
import 'echarts-liquidfill/src/liquidFill.js'
import './china.js'
import './bmap.min.js'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted } from 'vue'
let props = defineProps({
let props = defineProps({
className: {
type: String,
default: 'chart'
default: 'chart',
},
config:{
config: {
type: Object,
default: ()=>{}
default: () => {},
},
id: {
type: String,
default: 'chart'
default: 'chart',
},
width: {
type: String,
default: '200px'
default: '200px',
},
height: {
type: String,
default: '200px'
}
})
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 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 = [];
//数据部分
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];
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
value: geoCoord.concat(data[i].value),
})
}
}
return res;
};
return res
}
const options = {
const options = {
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: true
readOnly: true,
},
restore: {
show: true
show: true,
},
saveAsImage: {
show: true
}
show: true,
},
top:40,
right:40
},
top: 40,
right: 40,
},
title: {
//text: '2020年全国大厅监测得分',
top:40,
top: 40,
//subtext: 'from 零点有数',
left: 'center',
textStyle: {
color: '#ffffff',
fontSize: 30
fontSize: 30,
},
subtextStyle: {
fontSize: 20
}
fontSize: 20,
},
},
legend: {
left: 'left',
data: ['强', '中', '弱'],
textStyle: {
color: '#ccc'
}
color: '#ccc',
},
},
backgroundColor: {
type: 'linear',
@@ -172,12 +169,17 @@ const options = {
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#0f2c70' // 0% 处的颜色
}, {
offset: 1, color: '#091732' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
colorStops: [
{
offset: 0,
color: '#0f2c70', // 0% 处的颜色
},
{
offset: 1,
color: '#091732', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
visualMap: {
min: 75,
@@ -187,12 +189,12 @@ const options = {
calculable: false,
text: ['高', '低'],
inRange: {
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)']
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)'],
},
textStyle: {
color: '#ffffff',
fontSize: 10
}
fontSize: 10,
},
},
geo: {
map: 'china',
@@ -200,17 +202,17 @@ const options = {
roam: true,
label: {
emphasis: {
show: true
}
show: true,
},
},
itemStyle: {
normal: {
areaColor: '#091632',
borderColor: '#1773c3',
shadowColor: '#1773c3',
shadowBlur: 20
}
}
shadowBlur: 20,
},
},
},
series: [
{
@@ -226,20 +228,20 @@ const options = {
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
borderWidth: 1.5
borderWidth: 1.5,
},
emphasis: {
areaColor: '#0f2c70'
}
areaColor: '#0f2c70',
},
},
},
{
@@ -248,42 +250,41 @@ const options = {
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2]/8;
return val[2] / 8
},
label: {
normal: {
formatter: '{b}',
position: 'bottom',
textStyle:{
fontSize:10,
fontWeight:'bolder',
color:'#ffffff'
textStyle: {
fontSize: 10,
fontWeight: 'bolder',
color: '#ffffff',
},
show: true
show: true,
},
emphasis: {
show: true
}
show: true,
},
},
itemStyle: {
normal: {
color: '#ddb926'
color: '#ddb926',
},
},
},
],
}
}
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
})
</script>

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

File diff suppressed because one or more lines are too long

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

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

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

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

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

File diff suppressed because one or more lines are too long

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

@@ -1,34 +1,34 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import {EChartsType} from "echarts/core";
import {onMounted} from "vue";
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted } from 'vue'
let props = defineProps({
let props = defineProps({
className: {
type: String,
default: 'chart'
default: 'chart',
},
config:{
config: {
type: Object,
default: ()=>{}
default: () => {},
},
id: {
type: String,
default: 'chart'
default: 'chart',
},
width: {
type: String,
default: '200px'
default: '200px',
},
height: {
type: String,
default: '200px'
}
})
const options = {
default: '200px',
},
})
const options = {
backgroundColor: '#031d33',
legend: {
top: '20',
@@ -37,8 +37,7 @@ const options = {
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',
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, // 设置间距
@@ -162,34 +161,34 @@ const options = {
{
name: '',
nameTextStyle: {
color: '#65d5ff'
color: '#65d5ff',
},
min: 0,
splitLine: {
show: true,
lineStyle: {
color: '#233653'
}
color: '#233653',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#233653'
}
color: '#233653',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#78bdf5'
color: '#78bdf5',
},
formatter: function(value) {
formatter: function (value) {
return value * 100 + '%'
}
},
},
axisTick: {
show: false
}
}
show: false,
},
},
],
series: [
{
@@ -303,26 +302,30 @@ const options = {
{
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],
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, [{
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
}
color: 'rgba(255, 227, 168, 0.3)',
},
yAxisIndex: 1
{
offset: 0.5,
color: 'rgba(255, 227, 168, 1)',
},
{
offset: 1,
color: 'rgba(255, 227, 168, 0.3)',
},
]),
shadowColor: 'rgba(255, 120, 0,1)',
shadowBlur: 10,
},
},
yAxisIndex: 1,
},
{
name: '变化占比',
@@ -332,31 +335,30 @@ const options = {
rippleEffect: {
period: 5,
scale: 3,
brushType: 'stroke'
brushType: 'stroke',
},
hoverAnimation: true,
itemStyle: {
normal: {
color: 'rgba(217,247,249,1)',
shadowBlur: 10,
shadowColor: '#333'
}
shadowColor: '#333',
},
},
data: [],
},
data: []
}
],
};
let chart:EChartsType;
const initChart =()=> {
}
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
})
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,34 +1,34 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import {EChartsType} from "echarts/core";
import {onMounted} from "vue";
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted } from 'vue'
let props = defineProps({
let props = defineProps({
className: {
type: String,
default: 'chart'
default: 'chart',
},
config:{
config: {
type: Object,
default: ()=>{}
default: () => {},
},
id: {
type: String,
default: 'chart'
default: 'chart',
},
width: {
type: String,
default: '200px'
default: '200px',
},
height: {
type: String,
default: '200px'
}
})
const dataBJ = [
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],
@@ -59,10 +59,10 @@ const dataBJ = [
[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]
];
[46, 5, 49, 0.28, 10, 6, 31],
]
const dataGZ = [
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],
@@ -93,10 +93,10 @@ const dataGZ = [
[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]
];
[118, 50, 0, 1.383, 76, 11, 31],
]
const dataSH = [
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],
@@ -127,47 +127,47 @@ const dataSH = [
[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]
];
[187, 143, 201, 1.39, 89, 53, 31],
]
const lineStyle = {
const lineStyle = {
width: 1,
opacity: 0.5
};
opacity: 0.5,
}
const options = {
const options = {
backgroundColor: '#161627',
title: {
text: 'AQI - Radar',
left: 'center',
textStyle: {
color: '#eee'
}
color: '#eee',
},
},
legend: {
show:false,
show: false,
bottom: 5,
data: ['Beijing', 'Shanghai', 'Guangzhou'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
fontSize: 14,
},
selectedMode: 'single'
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 }
{ 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)'
color: 'rgb(238, 197, 102)',
},
splitLine: {
lineStyle: {
@@ -177,18 +177,18 @@ const options = {
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)'
].reverse()
}
'rgba(238, 197, 102, 1)',
].reverse(),
},
},
splitArea: {
show: false
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
color: 'rgba(238, 197, 102, 0.5)',
},
},
},
series: [
{
@@ -198,11 +198,11 @@ const options = {
data: dataBJ,
symbol: 'none',
itemStyle: {
color: '#F9713C'
color: '#F9713C',
},
areaStyle: {
opacity: 0.1
}
opacity: 0.1,
},
},
{
name: 'Shanghai',
@@ -211,11 +211,11 @@ const options = {
data: dataSH,
symbol: 'none',
itemStyle: {
color: '#B3E4A1'
color: '#B3E4A1',
},
areaStyle: {
opacity: 0.05
}
opacity: 0.05,
},
},
{
name: 'Guangzhou',
@@ -224,25 +224,24 @@ const options = {
data: dataGZ,
symbol: 'none',
itemStyle: {
color: 'rgb(238, 197, 102)'
color: 'rgb(238, 197, 102)',
},
areaStyle: {
opacity: 0.05
opacity: 0.05,
},
},
],
}
}
]
};
let chart:EChartsType;
const initChart =()=> {
let chart: EChartsType
const initChart = () => {
let chart = echarts.init(document.getElementById(props.id))
chart.setOption(options)
return chart
}
onMounted(()=>{
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize',function (){
chart&&chart.resize()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
})
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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