@ -3,10 +3,10 @@
< el -row :gutter ="15" class = "home-card-one mb15" >
< el -row :gutter ="15" class = "home-card-one mb15" >
< el -col
< el -col
: xs = "24"
: xs = "24"
: sm = " 24 "
: sm = " 1 2"
: md = " 24 "
: md = " 1 2"
: lg = " 8 "
: lg = " 6 "
: xl = " 8 "
: xl = " 6 "
v - for = "(v, k) in state.homeOne"
v - for = "(v, k) in state.homeOne"
: key = "k"
: key = "k"
class = "home-media-sm"
class = "home-media-sm"
@ -26,32 +26,125 @@
< / div >
< / div >
< / e l - c o l >
< / e l - c o l >
< / e l - r o w >
< / e l - r o w >
< el -row :gutter ="15" class = "home-card-two mb15" >
< div v-if ="isMobile" >
< el -col
< div class = "system-dept-container " style = "width: 380px;" >
: xs = "24"
< el -card shadow = "hover" class = "layout-padding-auto" >
: sm = "24"
< div class = "date-picker-container" >
: md = "24"
: lg = "24"
: xl = "24"
>
< div class = "home-card-item" >
<!-- 添加日期范围选择框 -- >
< div class = "date-picker-container" >
< el -date -picker
< el -date -picker
v - model = "dateRange"
style = "width: auto;"
v - model = "dateRangeBar"
type = "datetimerange"
type = "datetimerange"
range - separator = "至"
range - separator = "至"
start - placeholder = "开始时间"
start - placeholder = "开始时间"
end - placeholder = "结束时间"
end - placeholder = "结束时间"
format = "YYYY-MM-DD HH:mm:ss"
format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
@ change = "handleDate Change "
@ change = "handleDate Bar "
/ >
/ >
< / div >
< / div >
< div style = "height: 100%; width: 100%" ref = "homeBarRef" > < / div >
< el -table :data ="AIabliltyData" style = "width: auto;" >
< el -table -column prop = "ability" label = "AI能力" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "successnNum" label = "成功次数" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "failNum" label = "失败次数" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< / e l - c a r d >
< / div >
< div class = "system-dept-container " style = "width: 380px; margin-top: 15px;" >
< el -card shadow = "hover" class = "layout-padding-auto" >
< div class = "date-picker-container" >
< el -date -picker
style = "width: auto;"
v - model = "dateRangeLine"
type = "datetimerange"
range - separator = "至"
start - placeholder = "开始时间"
end - placeholder = "结束时间"
format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
@ change = "handleDateLine"
/ >
< / div >
< el -table :data ="lineChartData" style = "width: auto;" >
< el -table -column prop = "consume" label = "消费钻石数" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "time" label = "时间节点" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< / e l - c a r d >
< / div >
< / div >
< div v-else >
< el -row :gutter ="15" class = "home-card-two mb15" >
< el -col
: xs = "24"
: sm = "24"
: md = "24"
: lg = "24"
: xl = "24"
>
< div class = "home-card-item" >
<!-- 添加日期范围选择框 -- >
< div class = "date-picker-container" >
< el -date -picker
v - model = "dateRangeBar"
type = "datetimerange"
range - separator = "至"
start - placeholder = "开始时间"
end - placeholder = "结束时间"
format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
@ change = "handleDateChangeBar"
/ >
< / div >
< div style = "height: 100%; width: 100%" ref = "homeBarRef" > < / div >
< / div >
< / e l - c o l >
< / e l - r o w >
< el -row :gutter ="15" class = "home-card-three mb15" >
< el -col
: xs = "24"
: sm = "24"
: md = "24"
: lg = "24"
: xl = "20" >
< div class = "home-card-item" >
< div class = "date-picker-container" >
< el -date -picker
v - model = "dateRangeLine"
type = "datetimerange"
range - separator = "至"
start - placeholder = "开始时间"
end - placeholder = "结束时间"
format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
: picker - options = "datePickerOptions"
@ change = "handleDateChangeLine"
/ >
< / div >
< div style = "height: 100%" ref = "homeLineRef" > < / div >
< / div >
< / e l - c o l >
< / e l - r o w >
< / div >
<!-- < el -button plain @ click = "centerDialogVisible = true" >
Click to open the Dialog
< / e l - b u t t o n >
< el -dialog
v - model = "centerDialogVisible"
title = "Warning"
width = "500"
align - center
>
< span > Open the dialog from the center from the screen < / span >
< template # footer >
< div class = "dialog-footer" >
< el -button @ click = "centerDialogVisible = false" > Cancel < / e l - b u t t o n >
< el -button type = "primary" @ click = "centerDialogVisible = false" >
Confirm
< / e l - b u t t o n >
< / div >
< / div >
< / e l - c o l >
< / template
< / e l - r o w >
< / e l - di a l o g > - - >
< / div >
< / div >
< / template > < / template >
@ -62,15 +155,15 @@ import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig' ; import { useThemeConfig } from '/@/stores/themeConfig' ;
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes' ; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes' ;
import { logApi } from '/@/api/log' ; import { logApi } from '/@/api/log' ;
import { ElMessage } from 'element-plus' ;
const logapi = logApi ( ) ; const logapi = logApi ( ) ;
/ / 定 义 变 量 内 容 / / 定 义 变 量 内 容
/ / c o n s t c e n t e r D i a l o g V i s i b l e = r e f ( f a l s e )
const homeLineRef = ref ( ) ; const homeLineRef = ref ( ) ;
const homePieRef = ref ( ) ; const homePieRef = ref ( ) ;
const homeBarRef = ref ( ) ; const homeBarRef = ref ( ) ;
const dateRange = ref ( '' ) ;
const defaultTime1 = new Date ( 2000 , 1 , 1 , 0 , 0 , 0 ) / / ' 1 2 : 0 0 : 0 0 '
const storesTagsViewRoutes = useTagsViewRoutes ( ) ; const storesTagsViewRoutes = useTagsViewRoutes ( ) ;
const storesThemeConfig = useThemeConfig ( ) ; const storesThemeConfig = useThemeConfig ( ) ;
const { themeConfig } = storeToRefs ( storesThemeConfig ) ; const { themeConfig } = storeToRefs ( storesThemeConfig ) ;
@ -203,21 +296,30 @@ const getList = async() =>{
{
{
num1 : data . userTodayCount ,
num1 : data . userTodayCount ,
/ / n u m 2 : " 4 2 . 3 2 " , / / 示 例 百 分 比 变 化 值
/ / n u m 2 : " 4 2 . 3 2 " , / / 示 例 百 分 比 变 化 值
num3 : "今 日 用户数",
num3 : "今 天新增 用户数",
color1 : '#6690F9' ,
color1 : '#6690F9' ,
color2 : '--next-color-success-lighter' ,
color2 : '--next-color-success-lighter' ,
color3 : '--el-color-success' ,
color3 : '--el-color-success' ,
num4 : "iconfont icon-ditu" ,
num4 : "iconfont icon-ditu" ,
} ,
} ,
{
{
num1 : data . homeview Count,
num1 : data . homeview Today Count,
/ / n u m 2 : " 1 7 . 3 2 " , / / 示 例 百 分 比 变 化 值
/ / n u m 2 : " 1 7 . 3 2 " , / / 示 例 百 分 比 变 化 值
num3 : " 首页浏览数",
num3 : " 今日 首页浏览数",
color1 : '#6690F9' ,
color1 : '#6690F9' ,
color2 : '--next-color-warning-lighter' ,
color2 : '--next-color-warning-lighter' ,
color3 : '--el-color-warning' ,
color3 : '--el-color-warning' ,
num4 : "iconfont icon-zaosheng" ,
num4 : "iconfont icon-zaosheng" ,
} ,
} ,
{
num1 : data . homeviewCount ,
/ / n u m 2 : ' - 1 0 . 0 1 ' ,
num3 : '首页总浏览数' ,
num4 : 'fa fa-github-alt' ,
color1 : '#FF6462' ,
color2 : '--next-color-danger-lighter' ,
color3 : '--el-color-danger' ,
} ,
] ;
] ;
}
}
} catch ( error ) {
} catch ( error ) {
@ -225,88 +327,6 @@ const getList = async() =>{
}
}
} ; } ;
/ / 折 线 图
const initLineChart = ( ) => {
if ( ! state . global . dispose . some ( ( b : any ) => b === state . global . homeChartOne ) ) state . global . homeChartOne . dispose ( ) ;
state . global . homeChartOne = markRaw ( echarts . init ( homeLineRef . value , state . charts . theme ) ) ;
const option = {
backgroundColor : state . charts . bgColor ,
title : {
text : '政策补贴额度' ,
x : 'left' ,
textStyle : { fontSize : '15' , color : state . charts . color } ,
} ,
grid : { top : 70 , right : 20 , bottom : 30 , left : 30 } ,
tooltip : { trigger : 'axis' } ,
legend : { data : [ '预购队列' , '最新成交价' ] , right : 0 } ,
xAxis : {
data : [ '1月' , '2月' , '3月' , '4月' , '5月' , '6月' , '7月' , '8月' , '9月' , '10月' , '11月' , '12月' ] ,
} ,
yAxis : [
{
type : 'value' ,
name : '价格' ,
splitLine : { show : true , lineStyle : { type : 'dashed' , color : '#f5f5f5' } } ,
} ,
] ,
series : [
{
name : '预购队列' ,
type : 'line' ,
symbolSize : 6 ,
symbol : 'circle' ,
smooth : true ,
data : [ 0 , 41.1 , 30.4 , 65.1 , 53.3 , 53.3 , 53.3 , 41.1 , 30.4 , 65.1 , 53.3 , 10 ] ,
lineStyle : { color : '#fe9a8b' } ,
itemStyle : { color : '#fe9a8b' , borderColor : '#fe9a8b' } ,
areaStyle : {
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : '#fe9a8bb3' } ,
{ offset : 1 , color : '#fe9a8b03' } ,
] ) ,
} ,
} ,
{
name : '最新成交价' ,
type : 'line' ,
symbolSize : 6 ,
symbol : 'circle' ,
smooth : true ,
data : [ 0 , 24.1 , 7.2 , 15.5 , 42.4 , 42.4 , 42.4 , 24.1 , 7.2 , 15.5 , 42.4 , 0 ] ,
lineStyle : { color : '#9E87FF' } ,
itemStyle : { color : '#9E87FF' , borderColor : '#9E87FF' } ,
areaStyle : {
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : '#9E87FFb3' } ,
{ offset : 1 , color : '#9E87FF03' } ,
] ) ,
} ,
emphasis : {
itemStyle : {
color : {
type : 'radial' ,
x : 0.5 ,
y : 0.5 ,
r : 0.5 ,
colorStops : [
{ offset : 0 , color : '#9E87FF' } ,
{ offset : 0.4 , color : '#9E87FF' } ,
{ offset : 0.5 , color : '#fff' } ,
{ offset : 0.7 , color : '#fff' } ,
{ offset : 0.8 , color : '#fff' } ,
{ offset : 1 , color : '#fff' } ,
] ,
} ,
borderColor : '#9E87FF' ,
borderWidth : 2 ,
} ,
} ,
} ,
] ,
} ;
state . global . homeChartOne . setOption ( option ) ;
state . myCharts . push ( state . global . homeChartOne ) ;
} ;
/ / 饼 图 / / 饼 图
const initPieChart = ( ) => { const initPieChart = ( ) => {
if ( ! state . global . dispose . some ( ( b : any ) => b === state . global . homeChartTwo ) ) state . global . homeChartTwo . dispose ( ) ;
if ( ! state . global . dispose . some ( ( b : any ) => b === state . global . homeChartTwo ) ) state . global . homeChartTwo . dispose ( ) ;
@ -393,93 +413,368 @@ const initPieChart = () => {
state . myCharts . push ( state . global . homeChartTwo ) ;
state . myCharts . push ( state . global . homeChartTwo ) ;
} ; } ;
/ / 获 取 柱 状 图 的 数 据 / / 获 取 当 天 的 具 体 时 间
const fetchChartData = async ( start ? : string , end ? : string ) => { const setDefaultDateBar = (
try {
type : number
const params = start && end ? { start , end } : { } ; / / 参 数
) : string => {
const response = await logapi . getabilityList ( params ) ; / / 调 用 接 口 获 取 数 据
let t = '' ;
if ( response && response . data ) {
let date = new Date ( ) ;
initBarChart ( response . data ) ; / / 调 用 图 表 初 始 化 函 数 并 传 入 数 据
let dateMap = {
}
year : date . getFullYear ( ) ,
} catch ( error ) {
month : date . getMonth ( ) + 1 ,
console . error ( '获取柱状图数据失败:' , error ) ;
day : date . getDate ( ) ,
}
} ;
let month = dateMap . month >= 10 ? dateMap . month : "0" + dateMap . month
let day = dateMap . day >= 10 ? dateMap . day : "0" + dateMap . day
/ / 当 天 默 认 初 始 时 间 0 0 : 0 0 : 0 0
if ( type === 0 ) {
t = date . getFullYear ( ) + "-" + month + "-" + day + ' ' + '00' + ':' + '00' + ':' + '00' ;
}
/ / 当 天 默 认 初 始 时 间 2 3 : 5 9 : 5 9
if ( type === 1 ) {
const date = new Date ( ) ;
const year = date . getFullYear ( ) ;
const month = String ( date . getMonth ( ) + 1 ) . padStart ( 2 , '0' ) ;
const day = String ( date . getDate ( ) ) . padStart ( 2 , '0' ) ;
const hours = String ( date . getHours ( ) ) . padStart ( 2 , '0' )
const minutes = String ( date . getMinutes ( ) ) . padStart ( 2 , '0' )
const second = String ( date . getSeconds ( ) ) . padStart ( 2 , '0' )
t = ` ${ year } - ${ month } - ${ day } ${ hours } : ${ minutes } : ${ second } ` ;
}
return t ;
} ; } ;
/ / 处 理 日 期 范 围 变 化 const setDefaultDateLine = (
const handleDateChange = ( ) => { type : number
if ( dateRange . value . length === 2 ) {
) : string => {
const [ start , end ] = dateRange . value ; / / 已 是 y y y y - M M - d d H H : m m : s s 格 式
const date = new Date ( ) ;
fetchChartData ( start , end ) ; / / 将 选 择 后 的 日 期 范 围 传 递 给 图 表 数 据 接 口
const year = date . getFullYear ( ) ;
} else {
const month = ( date . getMonth ( ) + 1 ) . toString ( ) . padStart ( 2 , '0' ) ;
fetchChartData ( ) ; / / 日 期 范 围 清 空 时 的 操 作
const day = date . getDate ( ) . toString ( ) . padStart ( 2 , '0' ) ;
let startDate = new Date ( year , date . getMonth ( ) , date . getDate ( ) ) ;
let endDate = new Date ( year , date . getMonth ( ) , date . getDate ( ) ) ;
/ / 调 整 日 期 以 周 的 时 间 段
if ( type === 0 ) {
startDate . setDate ( startDate . getDate ( ) - 6 ) ; / / 起 始 是 从 今 天 往 前 开 始 的 前 7 天
}
if ( type === 1 ) {
endDate = date ; / / 终 止 是 今 天 的 当 前 时 刻
}
const formattedStartDate = [
startDate . getFullYear ( ) ,
( startDate . getMonth ( ) + 1 ) . toString ( ) . padStart ( 2 , '0' ) ,
startDate . getDate ( ) . toString ( ) . padStart ( 2 , '0' )
] . join ( '-' ) + ' 00:00:00' ;
const formattedEndDate = [
endDate . getFullYear ( ) ,
( endDate . getMonth ( ) + 1 ) . toString ( ) . padStart ( 2 , '0' ) ,
endDate . getDate ( ) . toString ( ) . padStart ( 2 , '0' )
] . join ( '-' ) + ` ${ endDate . getHours ( ) . toString ( ) . padStart ( 2 , '0' ) } : ${ endDate . getMinutes ( ) . toString ( ) . padStart ( 2 , '0' ) } : ${ endDate . getSeconds ( ) . toString ( ) . padStart ( 2 , '0' ) } ` ;
return type === 0 ? formattedStartDate : formattedEndDate ;
} ;
const dateRangeBar = ref ( [ setDefaultDateBar ( 0 ) , setDefaultDateBar ( 1 ) ] ) ;
const dateRangeLine = ref ( [ setDefaultDateLine ( 0 ) , setDefaultDateLine ( 1 ) ] ) ;
console . log ( 111111111111111 , dateRangeLine . value ) ;
/ / A I 能 力 使 用 数 据
const AIabliltyData = ref ( [ ] ) ;
/ / A I 钻 石 消 费 数 据
const lineChartData = ref ( [ ] ) ;
/ / 处 理 A I 能 力 统 计 移 动 端 日 期 范 围 变 化
const handleDateBar = ( ) => {
const [ start , end ] = dateRangeBar . value ;
fetchBarMobile ( start , end ) ;
} ;
/ / 移 动 端 A I 能 力 数 据 获 取
const fetchBarMobile = async ( start ? : string , end ? : string ) => {
try {
const params = start && end ? { start , end } : { } ; / / 参 数
const response = await logapi . getabilityList ( params ) ;
if ( response ? . success ) {
AIabliltyData . value = response . data ;
console . log ( 'AI能力使用数据' , AIabliltyData . value ) ;
}
} catch ( error ) {
console . error ( '获取AI能力使用失败' , error ) ;
}
} ;
/ / 处 理 禁 用 日 期
const datePickerOptions = ref ( {
disabledDate : ( time : Date ) : boolean => false , / / 默 认 不 禁 用 任 何 日 期
} ) ;
/ / 处 理 A I 消 费 钻 石 移 动 端 日 期 范 围 变 化
const handleDateLine = ( ) => {
const [ start ] = dateRangeLine . value ;
console . log ( [ start ] , 44444 ) ;
if ( start ) {
const startDate = new Date ( start ) ;
const minDate = new Date ( startDate ) ;
minDate . setDate ( startDate . getDate ( ) - 2 ) ; / / 设 置 最 小 允 许 日 期 为 开 始 日 期 前 两 天
console . log ( minDate , 'zuixiao' ) ;
const maxDate = new Date ( startDate ) ;
maxDate . setDate ( startDate . getDate ( ) + 2 ) ; / / 设 置 最 大 允 许 日 期 为 开 始 日 期 后 两 天
console . log ( maxDate , 'zuida' ) ;
/ / 更 新 禁 用 日 期 的 配 置
datePickerOptions . value = {
disabledDate : ( time : Date ) : boolean => {
return time < minDate || time > maxDate ;
}
} ;
}
fetchLineMobile ( start , dateRangeLine . value [ 1 ] ) ;
} ;
/ / 移 动 端 A I 消 费 钻 石 数 据 获 取
const fetchLineMobile = async ( start ? : string , end ? : string ) => {
try {
const params = start && end ? { start , end } : { } ; / / 参 数
const response = await logapi . getaiabilityConsumeList ( params ) ;
/ / c o n s o l e . l o g ( 2 2 2 2 2 2 2 2 2 2 2 , r e s p o n s e . v a l u e ) ;
if ( response ? . success ) {
lineChartData . value = response . data ;
console . log ( 'AI消费钻石数据' , lineChartData . value ) ;
}
} catch ( error ) {
console . error ( '获取AI消费钻石数据失败:' , error )
}
}
/ / 处 理 柱 状 图 日 期 范 围 变 化
const handleDateChangeBar = ( ) => {
const [ start , end ] = dateRangeBar . value ; / / 已 是 y y y y - M M - d d H H : m m : s s 格 式
fetchBarChartData ( start , end ) ; / / 将 选 择 后 的 日 期 范 围 传 递 给 柱 状 图 图 表 数 据 接 口
} ;
/ / 处 理 折 线 图 日 期 范 围 变 化
const handleDateChangeLine = ( ) => {
const [ start ] = dateRangeLine . value ;
console . log ( [ start ] , 44444 ) ;
if ( start ) {
const startDate = new Date ( start ) ;
const minDate = new Date ( startDate ) ;
minDate . setDate ( startDate . getDate ( ) - 2 ) ; / / 设 置 最 小 允 许 日 期 为 开 始 日 期 前 两 天
console . log ( minDate , 'zuixiao' ) ;
const maxDate = new Date ( startDate ) ;
maxDate . setDate ( startDate . getDate ( ) + 2 ) ; / / 设 置 最 大 允 许 日 期 为 开 始 日 期 后 两 天
console . log ( maxDate , 'zuida' ) ;
/ / 更 新 禁 用 日 期 的 配 置
datePickerOptions . value = {
disabledDate : ( time : Date ) : boolean => {
return time < minDate || time > maxDate ;
}
} ;
}
fetchLineCharData ( start , dateRangeLine . value [ 1 ] ) ;
} ;
/ / 获 取 柱 状 图 的 数 据
const fetchBarChartData = async ( start ? : string , end ? : string ) => {
try {
const params = start && end ? { start , end } : { } ; / / 参 数
const response = await logapi . getabilityList ( params ) ; / / 调 用 接 口 获 取 数 据
if ( response && response . data ) {
initBarChart ( response . data ) ; / / 调 用 图 表 初 始 化 函 数 并 传 入 数 据
}
}
} catch ( error ) {
console . error ( '获取柱状图数据失败:' , error ) ;
}
} ;
/ / 获 取 折 线 图 的 数 据
const fetchLineCharData = async ( start ? : string , end ? : string ) => {
try {
const params = start && end ? { start , end } : { } ; / / 参 数
const response = await logapi . getaiabilityConsumeList ( params ) ;
/ / c o n s o l e . l o g ( 2 2 2 2 2 2 2 2 2 2 2 , r e s p o n s e . v a l u e ) ;
if ( response && response . data ) {
lineChartData . value = response . data ;
console . log ( '折线图数据' , lineChartData . value ) ;
initLineChart ( response . data ) ;
}
} catch ( error ) {
console . error ( '获取折线图数据失败:' , error )
}
} ; } ;
/ / 柱 状 图 / / 柱 状 图
const initBarChart = ( data : any = [ ] ) => { const initBarChart = ( data : any = [ ] ) => {
if ( ! state . global . dispose . some ( ( b ) => b === state . global . homeCharThree ) )
console . log ( 'Chart Data:' , data ) ; / / D e b u g : L o g t h e d a t a
state . global . homeCharThree . dispose ( ) ;
state . global . homeCharThree = markRaw ( echarts . init ( homeBarRef . value , state . charts . theme ) ) ;
if ( state . global . homeCharThree ) {
state . global . homeCharThree . clear ( ) ; / / 正 常 清 理 而 非 d i s p o s e , 以 防 止 图 表 被 卸 载
} else {
state . global . homeCharThree = markRaw ( echarts . init ( homeBarRef . value , state . charts . theme ) ) ;
}
const abilities = data . length ? data . map ( ( item ) => item . ability ) : [ '无数据' ] ;
/ / 数 据 不 为 空 ， 正 常 渲 染 逻 辑
const numbers = data . length ? data . map ( ( item ) => item . num ) : [ 0 ] ;
if ( data && data . length > 0 ) {
/ / c o n s o l e . l o g ( 3 3 3 3 3 3 3 3 3 3 3 3 ) ;
const option = {
const abilities = data . map ( ( item ) => item . ability ) ;
backgroundColor : state . charts . bgColor ,
const successNums = data . map ( ( item ) => item . successnNum ) ;
title : {
const failNums = data . map ( ( item ) => item . failNum ) ;
text : 'AI能力使用统计' ,
x : 'left' ,
const option = {
textStyle : { fontSize : '15' , color : state . charts . color } ,
backgroundColor : state . charts . bgColor ,
} ,
title : {
tooltip : { trigger : 'axis' } ,
text : 'AI能力使用统计' ,
grid : { top : 100 , right : 30 , bottom : 100 , left : 50 } ,
x : 'left' ,
xAxis : [
textStyle : { fontSize : '15' , color : state . charts . color } ,
{
} ,
type : 'category' ,
tooltip : { trigger : 'axis' } ,
data : abilities ,
grid : { top : 100 , right : 30 , bottom : 100 , left : 50 } ,
axisTick : { show : false } ,
xAxis : [
axisLabel : {
{
color : state . charts . color ,
type : 'category' ,
interval : 0 ,
data : abilities ,
rotate : 30 ,
axisTick : { show : false } ,
} ,
axisLabel : {
axisLine : {
color : state . charts . color ,
lineStyle : { color : state . charts . color } ,
interval : 0 ,
} ,
rotate : 30 ,
} ,
} ,
] ,
axisLine : {
yAxis : [
lineStyle : { color : state . charts . color } ,
{
} ,
type : 'value' ,
} ,
name : '使用次数' ,
] ,
nameTextStyle : { padding : [ 0 , 0 , 10 , 0 ] } ,
yAxis : [
splitLine : { show : true , lineStyle : { type : 'dashed' , color : '#f5f5f5' } } ,
{
axisLine : { show : false } ,
type : 'value' ,
axisTick : { show : false } ,
name : '使用次数' ,
axisLabel : { color : state . charts . color , formatter : '{value}' } ,
nameTextStyle : { padding : [ 0 , 0 , 10 , 0 ] } ,
} ,
splitLine : { show : true , lineStyle : { type : 'dashed' , color : '#f5f5f5' } } ,
] ,
axisLine : { show : false } ,
series : [
axisTick : { show : false } ,
{
axisLabel : { color : state . charts . color , formatter : '{value}' } ,
name : '使用次数' ,
} ,
type : data . length ? 'bar' : 'line' , / / 无 数 据 时 显 示 为 一 条 线
] ,
barWidth : '40%' ,
series : [
itemStyle : {
{
color : data . length ? new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
name : '成功使用次数' ,
{ offset : 0 , color : 'rgba(108,80,243,0.8)' } ,
type : 'bar' ,
{ offset : 1 , color : 'rgba(108,80,243,0.3)' } ,
barWidth : '40%' ,
] ) : undefined , / / 符 合 b a r 和 l i n e 样 式
itemStyle : {
borderRadius : [ 5 , 5 , 0 , 0 ] ,
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
} ,
{ offset : 0 , color : 'rgba(108,80,243,0.8)' } ,
data : numbers ,
{ offset : 1 , color : 'rgba(108,80,243,0.3)' } ,
} ,
] ) ,
] ,
borderRadius : [ 5 , 5 , 0 , 0 ] ,
} ;
} ,
data : successNums ,
label : {
show : true ,
position : 'top'
}
} ,
{
name : '失败使用次数' ,
type : 'bar' ,
barWidth : '40%' ,
itemStyle : {
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : 'rgba(23,145,239,0.8)' } ,
{ offset : 1 , color : 'rgba(23,145,239,0.3)' } ,
] ) ,
borderRadius : [ 5 , 5 , 0 , 0 ] ,
} ,
data : failNums ,
label : {
show : true ,
position : 'top'
}
} ,
] ,
} ;
state . global . homeCharThree . setOption ( option ) ;
state . global . homeCharThree . setOption ( option ) ;
state . myCharts . push ( state . global . homeCharThree ) ;
} else {
console . warn ( '没有图表数据' ) ;
}
state . myCharts . push ( state . global . homeCharThree ) ;
} ; } ;
/ / 折 线 图
const initLineChart = ( data : any = [ ] ) => {
console . log ( 'LineChart Data:' , data ) ;
if ( ! state . global . dispose . some ( ( b : any ) => b === state . global . homeChartOne ) ) state . global . homeChartOne . dispose ( ) ;
state . global . homeChartOne = markRaw ( echarts . init ( homeLineRef . value , state . charts . theme ) ) ;
const consume = data . map ( ( item ) => item . consume ) ;
const time = data . map ( ( item ) => item . time ) ;
const option = {
backgroundColor : state . charts . bgColor ,
title : {
text : 'AI能力消费钻石数' ,
x : 'left' ,
textStyle : { fontSize : '15' , color : state . charts . color } ,
} ,
grid : { top : 70 , right : 20 , bottom : 100 , left : 30 } ,
tooltip : { trigger : 'axis' } ,
legend : { data : [ '消费钻石数' ] , right : 0 } ,
xAxis : {
data : time ,
axisTick : { show : false } ,
} ,
yAxis : [
{
type : 'value' ,
name : '钻石数量' ,
splitLine : { show : true , lineStyle : { type : 'dashed' , color : '#f5f5f5' } } ,
} ,
] ,
series : [
{
name : '消费钻石数' ,
type : 'line' ,
symbolSize : 6 ,
symbol : 'circle' ,
smooth : true ,
data : consume ,
label : {
show : true ,
position : 'top'
} ,
lineStyle : { color : '#fe9a8b' } ,
itemStyle : { color : '#fe9a8b' , borderColor : '#fe9a8b' } ,
areaStyle : {
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : '#fe9a8bb3' } ,
{ offset : 1 , color : '#fe9a8b03' } ,
] ) ,
} ,
} ,
] ,
} ;
state . global . homeChartOne . setOption ( option ) ;
state . myCharts . push ( state . global . homeChartOne ) ;
} ;
/ / 批 量 设 置 e c h a r t s r e s i z e / / 批 量 设 置 e c h a r t s r e s i z e
const initEchartsResizeFun = ( ) => { const initEchartsResizeFun = ( ) => {
nextTick ( ( ) => {
nextTick ( ( ) => {
@ -494,11 +789,50 @@ const initEchartsResizeFun = () => {
const initEchartsResize = ( ) => { const initEchartsResize = ( ) => {
window . addEventListener ( 'resize' , initEchartsResizeFun ) ;
window . addEventListener ( 'resize' , initEchartsResizeFun ) ;
} ; } ;
/ / 检 测 是 否 是 手 机 设 备
const isMobile = /Mobi|Android|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|Silk-Accelerated|Opera Mini|webOS/i . test ( navigator . userAgent ) ;
/ / 页 面 加 载 时 / / 页 面 加 载 时
onMounted ( ( ) => { onMounted ( ( ) => {
initEchartsResize ( ) ;
getList ( ) ;
getList ( ) ;
fetchChartData ( ) ; / / 初 始 加 载 无 参 数 调 用
initEchartsResize ( ) ; / / 初 始 加 载 无 参 数 调 用
/ / f o r m a t t e d D a t e ( ) ;
if ( isMobile ) {
console . log ( 'Mobile device detected' ) ;
/ / E l M e s s a g e . s u c c e s s ( ' M o b i l e d e v i c e d e t e c t e d ' ) ;
/ / 在 此 处 可 以 初 始 化 移 动 端 相 关 逻 辑
fetchBarMobile ( setDefaultDateBar ( 0 ) , setDefaultDateBar ( 1 ) )
fetchLineMobile ( setDefaultDateLine ( 0 ) , setDefaultDateLine ( 1 ) )
} else {
console . log ( 'Desktop device detected' ) ;
/ / 在 此 处 可 以 初 始 化 P C 端 相 关 逻 辑
/ / 监 听 p i n i a 中 是 否 开 启 深 色 主 题
watch (
( ) => themeConfig . value . isIsDark ,
( isIsDark ) => {
nextTick ( ( ) => {
state . charts . theme = isIsDark ? 'dark' : '' ;
state . charts . bgColor = isIsDark ? 'transparent' : '' ;
state . charts . color = isIsDark ? '#dadada' : '#303133' ;
setTimeout ( async ( ) => {
await fetchBarChartData ( setDefaultDateBar ( 0 ) , setDefaultDateBar ( 1 ) ) ;
} , 500 ) ;
setTimeout ( ( ) => {
initPieChart ( ) ;
} , 800 ) ;
setTimeout ( async ( ) => {
await fetchLineCharData ( setDefaultDateLine ( 0 ) , setDefaultDateLine ( 1 ) )
/ / i n i t L i n e C h a r t ( ) ;
} , 1200 ) ;
} ) ;
} ,
{
deep : true ,
immediate : true ,
}
) ;
}
} ) ; } ) ;
/ / 由 于 页 面 缓 存 原 因 ， k e e p - a l i v e / / 由 于 页 面 缓 存 原 因 ， k e e p - a l i v e
onActivated ( ( ) => { onActivated ( ( ) => {
@ -511,30 +845,7 @@ watch(
initEchartsResizeFun ( ) ;
initEchartsResizeFun ( ) ;
}
}
) ; ) ;
/ / 监 听 p i n i a 中 是 否 开 启 深 色 主 题
watch (
( ) => themeConfig . value . isIsDark ,
( isIsDark ) => {
nextTick ( ( ) => {
state . charts . theme = isIsDark ? 'dark' : '' ;
state . charts . bgColor = isIsDark ? 'transparent' : '' ;
state . charts . color = isIsDark ? '#dadada' : '#303133' ;
setTimeout ( ( ) => {
initLineChart ( ) ;
} , 500 ) ;
setTimeout ( ( ) => {
initPieChart ( ) ;
} , 700 ) ;
setTimeout ( ( ) => {
initBarChart ( ) ;
} , 1000 ) ;
} ) ;
} ,
{
deep : true ,
immediate : true ,
}
) ;
< / script > < / script >
< style scoped lang = "scss" > < style scoped lang = "scss" >
@ -588,8 +899,7 @@ $homeNavLengh: 8;
. home - card - two ,
. home - card - two ,
. home - card - three {
. home - card - three {
. home - card - item {
. home - card - item {
/ / h e i g h t : 6 0 0 p x ;
height : 500 px ;
height : 700 px ;
width : 100 % ;
width : 100 % ;
overflow : hidden ;
overflow : hidden ;
. home - monitor {
. home - monitor {
@ -628,7 +938,7 @@ $homeNavLengh: 8;
} }
. date - picker - container { . date - picker - container {
margin - bottom : 10 px ; /* 添加与标题的间距 */ margin - bottom : 10 px ; /* 添加与标题的间距 */
} }
. chart - title { . chart - title {
@ -637,4 +947,19 @@ $homeNavLengh: 8;
font - weight : bold ; /* 字体加粗，增强可读性 */
font - weight : bold ; /* 字体加粗，增强可读性 */
color : var ( -- el - text - color - primary ) ;
color : var ( -- el - text - color - primary ) ;
} }
. system - dept - container {
: deep ( . el - card _ _body ) {
display : flex ;
width : 350 px ;
flex - direction : column ;
flex : 1 ;
overflow : auto ;
. el - table {
flex : 1 ;
}
} ;
}
. layout - container . layout - padding - auto {
width : 361 px ;
}
< / style > < / style >
