ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-11-12 16:59:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/continew/continew-admin-ui into dev

Browse Source
This commit is contained in:
秋帆
2024-11-03 16:37:10 +08:00
parent abb6d59783 881c7e720e
commit 89f763ae29
191 changed files with 7855 additions and 5796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/dashboard/analysis/components/AccessTimeslot.vue
View File

@@ -10,6 +10,7 @@
import { type EChartsOption, graphic } from 'echarts'
import { useChart } from '@/hooks'
import { type DashboardChartCommonResp, getAnalysisTimeslot as getData } from '@/apis/common'
import handleIcon from '@/assets/icons/slider.svg'
// 提示框
const tooltipItemsHtmlString = (items) => {
@@ -23,7 +24,7 @@ const tooltipItemsHtmlString = (items) => {
<span class="tooltip-value">
${el.value}
</span>
</div>`
</div>`,
)
.join('')
}
@@ -36,7 +37,7 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
left: '40',
right: 0,
top: '20',
bottom: '100'
bottom: '100',
},
xAxis: {
type: 'category',
@@ -49,24 +50,24 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
if (idx === 0) return ''
if (idx === xAxis.value.length - 1) return ''
return `${value}`
}
},
},
axisLine: {
lineStyle: {
color: isDark ? '#3f3f3f' : '#A9AEB8'
}
color: isDark ? '#3f3f3f' : '#A9AEB8',
},
},
axisTick: {
show: true,
alignWithLabel: true,
lineStyle: {
color: '#86909C'
color: '#86909C',
},
interval(idx: number) {
if (idx === 0) return false
if (idx === xAxis.value.length - 1) return false
return true
}
},
},
splitLine: {
show: true,
@@ -75,16 +76,16 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
return idx !== xAxis.value.length - 1
},
lineStyle: {
color: isDark ? '#3F3F3F' : '#E5E8EF'
}
color: isDark ? '#3F3F3F' : '#E5E8EF',
},
},
axisPointer: {
show: true,
lineStyle: {
color: '#23ADFF',
width: 2
}
}
width: 2,
},
},
},
yAxis: {
type: 'value',
@@ -95,17 +96,17 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
return `${value / 1000}k`
}
return `${value}`
}
},
},
axisLine: {
show: false
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
color: isDark ? '#3F3F3F' : '#E5E8EF'
}
}
color: isDark ? '#3F3F3F' : '#E5E8EF',
},
},
},
tooltip: {
show: true,
@@ -117,7 +118,7 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
${tooltipItemsHtmlString(params)}
</div>`
},
className: 'echarts-tooltip-diy'
className: 'echarts-tooltip-diy',
},
series: [
{
@@ -133,23 +134,23 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
focus: 'series',
itemStyle: {
borderWidth: 2,
borderColor: '#E0E3FF'
}
borderColor: '#E0E3FF',
},
},
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(17, 126, 255, 0.16)'
color: 'rgba(17, 126, 255, 0.16)',
},
{
offset: 1,
color: 'rgba(17, 128, 255, 0)'
}
])
}
}
color: 'rgba(17, 128, 255, 0)',
},
]),
},
},
],
dataZoom: [
{
@@ -159,23 +160,22 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
right: 14,
height: 14,
borderColor: 'transparent',
handleIcon:
'image://http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/1ee5a8c6142b2bcf47d2a9f084096447.svg~tplv-49unhts6dw-image.image',
handleIcon: `image://${handleIcon}`,
handleSize: '20',
handleStyle: {
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 4
shadowBlur: 4,
},
brushSelect: false,
backgroundColor: isDark ? '#313132' : '#F2F3F5'
backgroundColor: isDark ? '#313132' : '#F2F3F5',
},
{
type: 'inside',
start: 0,
end: 100,
zoomOnMouseWheel: false
}
]
zoomOnMouseWheel: false,
},
],
}
})

68
src/views/dashboard/analysis/components/AccessTrend.vue
View File

@@ -29,7 +29,7 @@ const tooltipItemsHtmlString = (items) => {
<span class="tooltip-value">
${el.value}
</span>
</div>`
</div>`,
)
.join('')
}
@@ -43,14 +43,14 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
left: '38',
right: '5',
top: '10',
bottom: '50'
bottom: '50',
},
legend: {
bottom: -3,
icon: 'circle',
textStyle: {
color: '#4E5969'
}
color: '#4E5969',
},
},
xAxis: {
type: 'category',
@@ -63,13 +63,13 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
if (idx === 0) return ''
if (idx === xAxis.value.length - 1) return ''
return `${value}`
}
},
},
axisLine: {
show: false
show: false,
},
axisTick: {
show: false
show: false,
},
splitLine: {
show: true,
@@ -78,16 +78,16 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
return idx !== xAxis.value.length - 1
},
lineStyle: {
color: isDark ? '#3F3F3F' : '#E5E8EF'
}
color: isDark ? '#3F3F3F' : '#E5E8EF',
},
},
axisPointer: {
show: true,
lineStyle: {
color: '#23ADFF',
width: 2
}
}
width: 2,
},
},
},
yAxis: {
type: 'value',
@@ -98,17 +98,17 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
return `${value / 1000}k`
}
return `${value}`
}
},
},
axisLine: {
show: false
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
color: isDark ? '#3F3F3F' : '#E5E8EF'
}
}
color: isDark ? '#3F3F3F' : '#E5E8EF',
},
},
},
tooltip: {
show: true,
@@ -120,7 +120,7 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
${tooltipItemsHtmlString(params)}
</div>`
},
className: 'echarts-tooltip-diy'
className: 'echarts-tooltip-diy',
},
series: [
{
@@ -136,22 +136,22 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
focus: 'series',
itemStyle: {
borderWidth: 2,
borderColor: '#E0E3FF'
}
borderColor: '#E0E3FF',
},
},
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(17, 126, 255, 0.16)'
color: 'rgba(17, 126, 255, 0.16)',
},
{
offset: 1,
color: 'rgba(17, 128, 255, 0)'
}
])
}
color: 'rgba(17, 128, 255, 0)',
},
]),
},
},
{
name: '独立IP',
@@ -166,24 +166,24 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
focus: 'series',
itemStyle: {
borderWidth: 2,
borderColor: '#E2F2FF'
}
borderColor: '#E2F2FF',
},
},
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(17, 126, 255, 0.16)'
color: 'rgba(17, 126, 255, 0.16)',
},
{
offset: 1,
color: 'rgba(17, 128, 255, 0)'
}
])
}
}
]
color: 'rgba(17, 128, 255, 0)',
},
]),
},
},
],
}
})

22
src/views/dashboard/analysis/components/Browser.vue
View File

@@ -23,15 +23,15 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
icon: 'circle',
itemWidth: 8,
textStyle: {
color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969'
color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
},
itemStyle: {
borderWidth: 0
}
borderWidth: 0,
},
},
tooltip: {
show: true,
trigger: 'item'
trigger: 'item',
},
series: [
{
@@ -40,15 +40,15 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
center: ['50%', '42%'],
label: {
formatter: '{d}% ',
color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
},
itemStyle: {
borderColor: isDark ? '#000' : '#fff',
borderWidth: 1
borderWidth: 1,
},
data: chartData.value
}
]
data: chartData.value,
},
],
}
})
@@ -64,8 +64,8 @@ const getChartData = async () => {
chartData.value.push({
...item,
itemStyle: {
color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index]
}
color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index],
},
})
})
} finally {

19
src/views/dashboard/analysis/components/DataOverview/Demo1.vue
View File

@@ -39,7 +39,6 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import { useChart } from '@/hooks'
import { useAppStore } from '@/stores'
@@ -50,24 +49,24 @@ const count = ref(0)
const growth = ref(0)
const xAxis = ref<string[]>([])
const chartData = ref<number[]>([])
const { chartOption } = useChart((isDark: EChartsOption) => {
const { chartOption } = useChart(() => {
return {
grid: {
left: 0,
right: 30,
top: 10,
bottom: 0
bottom: 0,
},
xAxis: {
type: 'category',
data: xAxis.value
data: xAxis.value,
},
yAxis: {
show: false
show: false,
},
tooltip: {
show: true,
trigger: 'axis'
trigger: 'axis',
},
series: [
{
@@ -79,10 +78,10 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
lineStyle: {
color: '#246EFF',
width: 2,
type: 'dashed'
}
}
]
type: 'dashed',
},
},
],
}
})

23
src/views/dashboard/analysis/components/DataOverview/Demo2.vue
View File

@@ -39,7 +39,6 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import { useChart } from '@/hooks'
import { useAppStore } from '@/stores'
@@ -49,13 +48,13 @@ const isDark = computed(() => appStore.theme === 'dark')
const count = ref(0)
const growth = ref(0)
const chartData = ref<number[]>([])
const { chartOption } = useChart((isDark: EChartsOption) => {
const { chartOption } = useChart(() => {
return {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
bottom: 0,
},
legend: {
show: true,
@@ -66,11 +65,11 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
itemWidth: 6,
itemHeight: 6,
textStyle: {
color: '#4E5969'
}
color: '#4E5969',
},
},
tooltip: {
show: true
show: true,
},
series: [
{
@@ -79,11 +78,11 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
radius: ['50%', '70%'],
center: ['30%', '50%'],
label: {
show: false
show: false,
},
data: chartData.value
}
]
data: chartData.value,
},
],
}
})
@@ -101,8 +100,8 @@ const getChartData = async () => {
name: `示例${index + 1}`,
value: item,
itemStyle: {
color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index]
}
color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index],
},
})
})
} finally {

19
src/views/dashboard/analysis/components/DataOverview/Ip.vue
View File

@@ -39,7 +39,6 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import { useChart } from '@/hooks'
import { useAppStore } from '@/stores'
import { type DashboardChartCommonResp, getDashboardOverviewIp as getData } from '@/apis'
@@ -52,24 +51,24 @@ const today = ref(0)
const growth = ref(0)
const xAxis = ref<string[]>([])
const chartData = ref<number[]>([])
const { chartOption } = useChart((isDark: EChartsOption) => {
const { chartOption } = useChart(() => {
return {
grid: {
left: 0,
right: 30,
top: 10,
bottom: 0
bottom: 0,
},
xAxis: {
type: 'category',
data: xAxis.value
data: xAxis.value,
},
yAxis: {
show: false
show: false,
},
tooltip: {
show: true,
trigger: 'axis'
trigger: 'axis',
},
series: [
{
@@ -79,10 +78,10 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
showSymbol: false,
lineStyle: {
color: '#2CAB40',
width: 2
}
}
]
width: 2,
},
},
],
}
})

19
src/views/dashboard/analysis/components/DataOverview/Pv.vue
View File

@@ -39,7 +39,6 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import { useChart } from '@/hooks'
import { useAppStore } from '@/stores'
import { type DashboardChartCommonResp, getDashboardOverviewPv as getData } from '@/apis'
@@ -52,24 +51,24 @@ const today = ref(0)
const growth = ref(0)
const xAxis = ref<string[]>([])
const chartData = ref<number[]>([])
const { chartOption } = useChart((isDark: EChartsOption) => {
const { chartOption } = useChart(() => {
return {
grid: {
left: 0,
right: 30,
top: 10,
bottom: 0
bottom: 0,
},
xAxis: {
type: 'category',
data: xAxis.value
data: xAxis.value,
},
yAxis: {
show: false
show: false,
},
tooltip: {
show: true,
trigger: 'axis'
trigger: 'axis',
},
series: [
{
@@ -79,10 +78,10 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
showSymbol: false,
lineStyle: {
color: '#246EFF',
width: 2
}
}
]
width: 2,
},
},
],
}
})

32
src/views/dashboard/analysis/components/Module.vue
View File

@@ -21,7 +21,7 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
left: 55,
right: 20,
top: 0,
bottom: 20
bottom: 20,
},
xAxis: {
type: 'value',
@@ -30,38 +30,38 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
formatter(value: number, idx: number) {
if (idx === 0) return String(value)
return `${Number(value) / 1000}k`
}
},
},
splitLine: {
lineStyle: {
color: isDark ? '#484849' : '#E5E8EF'
}
}
color: isDark ? '#484849' : '#E5E8EF',
},
},
},
yAxis: {
type: 'category',
data: yAxis.value,
axisLabel: {
show: true,
color: '#4E5969'
color: '#4E5969',
},
axisTick: {
show: true,
length: 2,
lineStyle: {
color: '#A9AEB8'
color: '#A9AEB8',
},
alignWithLabel: true
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: isDark ? '#484849' : '#A9AEB8'
}
}
color: isDark ? '#484849' : '#A9AEB8',
},
},
},
tooltip: {
show: true,
trigger: 'axis'
trigger: 'axis',
},
series: [
{
@@ -70,10 +70,10 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
barWidth: 7,
itemStyle: {
color: '#4086FF',
borderRadius: 4
}
}
]
borderRadius: 4,
},
},
],
}
})

22
src/views/dashboard/analysis/components/Os.vue
View File

@@ -23,15 +23,15 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
icon: 'circle',
itemWidth: 8,
textStyle: {
color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969'
color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
},
itemStyle: {
borderWidth: 0
}
borderWidth: 0,
},
},
tooltip: {
show: true,
trigger: 'item'
trigger: 'item',
},
series: [
{
@@ -40,15 +40,15 @@ const { chartOption } = useChart((isDark: EChartsOption) => {
center: ['50%', '42%'],
label: {
formatter: '{d}% ',
color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
},
itemStyle: {
borderColor: isDark ? '#000' : '#fff',
borderWidth: 1
borderWidth: 1,
},
data: chartData.value
}
]
data: chartData.value,
},
],
}
})
@@ -64,8 +64,8 @@ const getChartData = async () => {
chartData.value.push({
...item,
itemStyle: {
color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index]
}
color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index],
},
})
})
} finally {