@ -5,7 +5,7 @@
: xs = "24"
: sm = "12"
: md = "12"
: lg = " 6 "
: lg = " 8 "
: xl = "6"
v - for = "(v, k) in state.homeOne"
: key = "k"
@ -15,7 +15,7 @@
< div class = "flex-margin flex w100" : class = "` home-one-animation${k}`" >
< div class = "flex-auto" >
< span class = "font30" > { { v . num1 } } < / span >
< span class = "ml5 font16" : style = "{ color: v.color1 }" > { { v . num2 } } % < / span >
<!-- < span class = "ml5 font16" : style = "{ color: v.color1 }" > { { v . num2 } } % < / span > -- >
< div class = "mt10" > { { v . num3 } } < / div >
< / div >
< div class = "home-card-item-icon flex" : style = "{ background: `var(${v.color2})` }" >
@ -25,40 +25,29 @@
< / div >
< / e l - c o l >
< / e l - r o w >
< el -row :gutter ="15" class = "home-card-two mb15" >
< el -col :xs ="24" :sm ="14" :md ="14" :lg ="16" :xl ="16" >
< el -row :gutter ="15" class = "home-card-two mb15" >
< el -col
: xs = "24"
: sm = "24"
: md = "24"
: lg = "24"
: xl = "20"
>
< div class = "home-card-item" >
< div style = "height: 100%" ref = "homeLineRef" > < / div >
< / div >
< / e l - c o l >
< el -col :xs ="24" :sm ="10" :md ="10" :lg ="8" :xl ="8" class = "home-media" >
< div class = "home-card-item" >
< div style = "height: 100%" ref = "homePieRef" > < / div >
< / div >
< / e l - c o l >
< / e l - r o w >
< el -row :gutter ="15" class = "home-card-three" >
< el -col :xs ="24" :sm ="10" :md ="10" :lg ="8" :xl ="8" >
< div class = "home-card-item" >
< div class = "home-card-item-title" > 快捷导航工具 < / div >
< div class = "home-monitor" >
< div class = "flex-warp" >
< div class = "flex-warp-item" v-for ="(v, k) in state.homeThree" :key ="k" >
< div class = "flex-warp-item-box" :class ="`home-animation${k}`" >
< div class = "flex-margin" >
< i :class ="v.icon" : style = "{ color: v.iconColor }" > < / i >
< span class = "pl5" > { { v . label } } < / span >
< div class = "mt10" > { { v . value } } < / div >
< / div >
< / div >
< / div >
< / div >
<!-- 添加日期范围选择框 -- >
< div class = "date-picker-container" >
< el -date -picker
v - model = "dateRange"
type = "datetimerange"
range - separator = "至"
start - placeholder = "开始时间"
end - placeholder = "结束时间"
format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
@ change = "handleDateChange"
/ >
< / div >
< / div >
< / e l - c o l >
< el -col :xs ="24" :sm ="14" :md ="14" :lg ="16" :xl ="16" class = "home-media" >
< div class = "home-card-item" >
< div style = "height: 100%" ref = "homeBarRef" > < / div >
< div style = "height: 100%; width: 100%" ref = "homeBarRef" > < / div >
< / div >
< / e l - c o l >
< / e l - r o w >
@ -71,11 +60,16 @@ import * as echarts from 'echarts';
import { storeToRefs } from 'pinia' ;
import { useThemeConfig } from '/@/stores/themeConfig' ;
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes' ;
import { logApi } from '/@/api/log' ;
const logapi = logApi ( ) ;
/ / 定 义 变 量 内 容
const homeLineRef = ref ( ) ;
const homePieRef = 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 storesThemeConfig = useThemeConfig ( ) ;
const { themeConfig } = storeToRefs ( storesThemeConfig ) ;
@ -88,42 +82,42 @@ const state = reactive({
dispose : [ null , '' , undefined ] ,
} as any ,
homeOne : [
num1 : '125,12' ,
num2 : '-12.32' ,
num3 : '订单统计信息' ,
num4 : 'fa fa-meetup' ,
color1 : '#FF6462' ,
color2 : '--next-color-primary-lighter' ,
color3 : '--el-color-primary' ,
}
num1 : '653,33' ,
num2 : '+42.32' ,
num3 : '月度计划信息' ,
num4 : 'iconfont icon-ditu' ,
color1 : '#6690F9' ,
color2 : '--next-color-success-lighter' ,
color3 : '--el-color-success' ,
}
num1 : '125,65' ,
num2 : '+17.32' ,
num3 : '年度计划信息' ,
num4 : 'iconfont icon-zaosheng' ,
color1 : '#6690F9' ,
color2 : '--next-color-warning-lighter' ,
color3 : '--el-color-warning' ,
}
num1 : '520,43' ,
num2 : '-10.01' ,
num3 : '访问统计信息' ,
num4 : 'fa fa-github-alt' ,
color1 : '#FF6462' ,
color2 : '--next-color-danger-lighter' ,
color3 : '--el-color-danger' ,
}
/ /
/ / n u m 1 : ' 1 2 5 , 1 2 '
/ / n u m 2 : ' - 1 2 . 3 2 '
/ / n u m 3 : ' 订 单 统 计 信 息 '
/ / n u m 4 : ' f a f a - m e e t u p '
/ / c o l o r 1 : ' # F F 6 4 6 2 '
/ / c o l o r 2 : ' - - n e x t - c o l o r - p r i m a r y - l i g h t e r '
/ / c o l o r 3 : ' - - e l - c o l o r - p r i m a r y '
/ / }
/ /
/ / n u m 1 : ' 6 5 3 , 3 3 '
/ / n u m 2 : ' + 4 2 . 3 2 '
/ / n u m 3 : ' 月 度 计 划 信 息 '
/ / n u m 4 : ' i c o n f o n t i c o n - d i t u '
/ / c o l o r 1 : ' # 6 6 9 0 F 9 '
/ / c o l o r 2 : ' - - n e x t - c o l o r - s u c c e s s - l i g h t e r '
/ / c o l o r 3 : ' - - e l - c o l o r - s u c c e s s '
/ / }
/ /
/ / n u m 1 : ' 1 2 5 , 6 5 '
/ / n u m 2 : ' + 1 7 . 3 2 '
/ / n u m 3 : ' 年 度 计 划 信 息 '
/ / n u m 4 : ' i c o n f o n t i c o n - z a o s h e n g '
/ / c o l o r 1 : ' # 6 6 9 0 F 9 '
/ / c o l o r 2 : ' - - n e x t - c o l o r - w a r n i n g - l i g h t e r '
/ / c o l o r 3 : ' - - e l - c o l o r - w a r n i n g '
/ / }
/ /
/ / n u m 1 : ' 5 2 0 , 4 3 '
/ / n u m 2 : ' - 1 0 . 0 1 '
/ / n u m 3 : ' 访 问 统 计 信 息 '
/ / n u m 4 : ' f a f a - g i t h u b - a l t '
/ / c o l o r 1 : ' # F F 6 4 6 2 '
/ / c o l o r 2 : ' - - n e x t - c o l o r - d a n g e r - l i g h t e r '
/ / c o l o r 3 : ' - - e l - c o l o r - d a n g e r '
/ / }
] ,
homeThree : [
{
@ -189,6 +183,47 @@ const state = reactive({
} ,
} ) ;
const getList = async ( ) => {
try {
const res = await logapi . getbaseUserList ( ) ;
if ( res ? . success ) {
const data = res . data ;
/ / 动 态 构 建 h o m e O n e 数 组
state . homeOne = [
{
num1 : data . userTotalCount ,
/ / n u m 2 : " 1 2 . 3 2 " , / / 示 例 百 分 比 变 化 值
num3 : "总用户数" ,
color1 : '#FF6462' ,
color2 : '--next-color-primary-lighter' ,
color3 : '--el-color-primary' ,
num4 : "iconfont icon-zaosheng" , / / 示 例 图 标 类
} ,
{
num1 : data . userTodayCount ,
/ / n u m 2 : " 4 2 . 3 2 " , / / 示 例 百 分 比 变 化 值
num3 : "今日用户数" ,
color1 : '#6690F9' ,
color2 : '--next-color-success-lighter' ,
color3 : '--el-color-success' ,
num4 : "iconfont icon-ditu" ,
} ,
{
num1 : data . homeviewCount ,
/ / n u m 2 : " 1 7 . 3 2 " , / / 示 例 百 分 比 变 化 值
num3 : "首页浏览数" ,
color1 : '#6690F9' ,
color2 : '--next-color-warning-lighter' ,
color3 : '--el-color-warning' ,
num4 : "iconfont icon-zaosheng" ,
} ,
] ;
}
} catch ( error ) {
console . error ( error )
}
} ;
/ / 折 线 图
const initLineChart = ( ) => {
if ( ! state . global . dispose . some ( ( b : any ) => b === state . global . homeChartOne ) ) state . global . homeChartOne . dispose ( ) ;
@ -356,136 +391,93 @@ const initPieChart = () => {
state . global . homeChartTwo . setOption ( option ) ;
state . myCharts . push ( state . global . homeChartTwo ) ;
} ;
/ / 获 取 柱 状 图 的 数 据
const fetchChartData = 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 handleDateChange = ( ) => {
if ( dateRange . value . length === 2 ) {
const [ start , end ] = dateRange . value ; / / 已 是 y y y y - M M - d d H H : m m : s s 格 式
fetchChartData ( start , end ) ; / / 将 选 择 后 的 日 期 范 围 传 递 给 图 表 数 据 接 口
} else {
fetchChartData ( ) ; / / 日 期 范 围 清 空 时 的 操 作
}
} ;
/ / 柱 状 图
const initBarChart = ( ) => {
if ( ! state . global . dispose . some ( ( b : any ) => b === state . global . homeCharThree ) ) state . global . homeCharThree . dispose ( ) ;
state . global . homeCharThree = markRaw ( echarts . init ( homeBarRef . value , state . charts . theme ) ) ;
const option = {
backgroundColor : state . charts . bgColor ,
title : {
text : '地热开发利用' ,
x : 'left' ,
textStyle : { fontSize : '15' , color : state . charts . color } ,
} ,
tooltip : { trigger : 'axis' } ,
legend : { data : [ '供温' , '回温' , '压力值(Mpa)' ] , right : 0 } ,
grid : { top : 70 , right : 80 , bottom : 30 , left : 80 } ,
xAxis : [
{
type : 'category' ,
data : [ '1km' , '2km' , '3km' , '4km' , '5km' , '6km' ] ,
boundaryGap : true ,
axisTick : { show : false } ,
} ,
] ,
yAxis : [
{
name : '供回温度(℃）' ,
nameLocation : 'middle' ,
nameTextStyle : { padding : [ 3 , 4 , 50 , 6 ] } ,
splitLine : { show : true , lineStyle : { type : 'dashed' , color : '#f5f5f5' } } ,
axisLine : { show : false } ,
axisTick : { show : false } ,
axisLabel : { color : state . charts . color , formatter : '{value} ' } ,
} ,
{
name : '压力值(Mpa)' ,
nameLocation : 'middle' ,
nameTextStyle : { padding : [ 50 , 4 , 5 , 6 ] } ,
splitLine : { show : false } ,
axisLine : { show : false } ,
axisTick : { show : false } ,
axisLabel : { color : state . charts . color , formatter : '{value} ' } ,
} ,
] ,
series : [
{
name : '供温' ,
type : 'line' ,
smooth : true ,
showSymbol : true ,
/ / 矢 量 画 五 角 星
symbol : 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z' ,
symbolSize : 12 ,
yAxisIndex : 0 ,
areaStyle : {
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : 'rgba(250,180,101,0.3)' } ,
{ offset : 1 , color : 'rgba(250,180,101,0)' } ,
] ) ,
shadowColor : 'rgba(250,180,101,0.2)' ,
shadowBlur : 20 ,
} ,
itemStyle : { color : '#FF8000' } ,
/ / d a t a 中 可 以 使 用 对 象 ， v a l u e 代 表 相 应 的 值 ， 另 外 可 加 入 自 定 义 的 属 性
data : [
{ value : 1 , stationName : 's1' } ,
{ value : 3 , stationName : 's2' } ,
{ value : 4 , stationName : 's3' } ,
{ value : 9 , stationName : 's4' } ,
{ value : 3 , stationName : 's5' } ,
{ value : 2 , stationName : 's6' } ,
] ,
} ,
{
name : '回温' ,
type : 'line' ,
smooth : true ,
showSymbol : true ,
symbol : 'emptyCircle' ,
symbolSize : 12 ,
yAxisIndex : 0 ,
areaStyle : {
color : new echarts . graphic . LinearGradient (
0 ,
0 ,
0 ,
1 ,
[
{ offset : 0 , color : 'rgba(199, 237, 250,0.5)' } ,
{ offset : 1 , color : 'rgba(199, 237, 250,0.2)' } ,
] ,
false
) ,
} ,
itemStyle : {
color : '#3bbc86' ,
} ,
data : [
{ value : 31 , stationName : 's1' } ,
{ value : 36 , stationName : 's2' } ,
{ value : 54 , stationName : 's3' } ,
{ value : 24 , stationName : 's4' } ,
{ value : 73 , stationName : 's5' } ,
{ value : 22 , stationName : 's6' } ,
] ,
} ,
{
name : '压力值(Mpa)' ,
type : 'bar' ,
barWidth : 30 ,
yAxisIndex : 1 ,
itemStyle : {
color : new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : 'rgba(108,80,243,0.3)' } ,
{ offset : 1 , color : 'rgba(108,80,243,0)' } ,
] ) ,
/ / 柱 状 图 圆 角
borderRadius : [ 30 , 30 , 0 , 0 ] ,
} ,
data : [
{ value : 11 , stationName : 's1' } ,
{ value : 34 , stationName : 's2' } ,
{ value : 54 , stationName : 's3' } ,
{ value : 39 , stationName : 's4' } ,
{ value : 63 , stationName : 's5' } ,
{ value : 24 , stationName : 's6' } ,
] ,
} ,
] ,
} ;
state . global . homeCharThree . setOption ( option ) ;
state . myCharts . push ( state . global . homeCharThree ) ;
const initBarChart = ( data : any = [ ] ) => {
if ( ! state . global . dispose . some ( ( b ) => b === state . global . homeCharThree ) )
state . global . homeCharThree . dispose ( ) ;
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 ] ;
const option = {
backgroundColor : state . charts . bgColor ,
title : {
text : 'AI能力使用统计' ,
x : 'left' ,
textStyle : { fontSize : '15' , color : state . charts . color } ,
} ,
tooltip : { trigger : 'axis' } ,
grid : { top : 100 , right : 30 , bottom : 100 , left : 50 } ,
xAxis : [
{
type : 'category' ,
data : abilities ,
axisTick : { show : false } ,
axisLabel : {
color : state . charts . color ,
interval : 0 ,
rotate : 30 ,
} ,
axisLine : {
lineStyle : { color : state . charts . color } ,
} ,
} ,
] ,
yAxis : [
{
type : 'value' ,
name : '使用次数' ,
nameTextStyle : { padding : [ 0 , 0 , 10 , 0 ] } ,
splitLine : { show : true , lineStyle : { type : 'dashed' , color : '#f5f5f5' } } ,
axisLine : { show : false } ,
axisTick : { show : false } ,
axisLabel : { color : state . charts . color , formatter : '{value}' } ,
} ,
] ,
series : [
{
name : '使用次数' ,
type : data . length ? 'bar' : 'line' , / / 无 数 据 时 显 示 为 一 条 线
barWidth : '40%' ,
itemStyle : {
color : data . length ? new echarts . graphic . LinearGradient ( 0 , 0 , 0 , 1 , [
{ offset : 0 , color : 'rgba(108,80,243,0.8)' } ,
{ offset : 1 , color : 'rgba(108,80,243,0.3)' } ,
] ) : undefined , / / 符 合 b a r 和 l i n e 样 式
borderRadius : [ 5 , 5 , 0 , 0 ] ,
} ,
data : numbers ,
} ,
] ,
} ;
state . global . homeCharThree . setOption ( option ) ;
state . myCharts . push ( state . global . homeCharThree ) ;
} ;
/ / 批 量 设 置 e c h a r t s r e s i z e
const initEchartsResizeFun = ( ) => {
@ -504,6 +496,8 @@ const initEchartsResize = () => {
/ / 页 面 加 载 时
onMounted ( ( ) => {
initEchartsResize ( ) ;
getList ( ) ;
fetchChartData ( ) ; / / 初 始 加 载 无 参 数 调 用
} ) ;
/ / 由 于 页 面 缓 存 原 因 ， k e e p - a l i v e
onActivated ( ( ) => {
@ -551,7 +545,7 @@ $homeNavLengh: 8;
. home - card - three {
. home - card - item {
width : 100 % ;
height : 130 px ;
height : auto ;
border - radius : 4 px ;
transition : all ease 0.3 s ;
padding : 20 px ;
@ -593,7 +587,7 @@ $homeNavLengh: 8;
. home - card - two ,
. home - card - three {
. home - card - item {
height : 4 00px ;
height : 6 00px ;
width : 100 % ;
overflow : hidden ;
. home - monitor {
@ -630,4 +624,15 @@ $homeNavLengh: 8;
}
}
}
. date - picker - container {
margin - bottom : 10 px ; /* 添加与标题的间距 */
}
. chart - title {
margin - bottom : 0 px ; /* 标题与图表之间的间距 */
font - size : 16 px ; /* 可调整为合适大小 */
font - weight : bold ; /* 字体加粗，增强可读性 */
color : var ( -- el - text - color - primary ) ;
}
< / style >
