统计模块区分移动端和pc端

This commit is contained in:
夕阳微笑1 2025-01-21 15:53:57 +08:00
parent 8fa1f6e1fe
commit f3c79d4ec8
3 changed files with 550 additions and 216 deletions

View File

@ -9,6 +9,7 @@ import { baseUrlHost } from '../baseUrlHost';
* @method getlogList * @method getlogList
* @method getaiabilityList AI能力列表 * @method getaiabilityList AI能力列表
* @method getbaseUserList * @method getbaseUserList
* @method getaiabilityConsumeList AI能力消费钻石列表
*/ */
export function logApi() { export function logApi() {
@ -33,5 +34,12 @@ export function logApi() {
method: 'get', method: 'get',
}); });
}, },
getaiabilityConsumeList: (params:object) => {
return request({
url: baseUrlHost + '/acLog/AiAbilityConsume',
method: 'get',
params,
});
},
}; };
} }

View File

@ -175,14 +175,14 @@ getTableData();
<style scoped lang="scss"> <style scoped lang="scss">
.system-dept-container { .system-dept-container {
:deep(.el-card__body) { :deep(.el-card__body) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
overflow: auto;
.el-table {
flex: 1; flex: 1;
overflow: auto;
.el-table {
flex: 1;
}
} }
} }
}
</style> </style>

View File

@ -5,7 +5,7 @@
:xs="24" :xs="24"
:sm="12" :sm="12"
:md="12" :md="12"
:lg="8" :lg="6"
:xl="6" :xl="6"
v-for="(v, k) in state.homeOne" v-for="(v, k) in state.homeOne"
:key="k" :key="k"
@ -25,32 +25,125 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<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="20"
>
<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="handleDateChange" @change="handleDateBar"
/> />
</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能力"></el-table-column>
<el-table-column prop="successnNum" label="成功次数"></el-table-column>
<el-table-column prop="failNum" label="失败次数"></el-table-column>
</el-table>
</el-card>
</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="消费钻石数"></el-table-column>
<el-table-column prop="time" label="时间节点"></el-table-column>
</el-table>
</el-card>
</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="20"
>
<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>
</el-col>
</el-row>
<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>
</el-col>
</el-row>
</div>
<!-- <el-button plain @click="centerDialogVisible = true">
Click to open the Dialog
</el-button>
<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</el-button>
<el-button type="primary" @click="centerDialogVisible = false">
Confirm
</el-button>
</div> </div>
</el-col> </template>
</el-row> </el-dialog> -->
</div> </div>
</template> </template>
@ -61,15 +154,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();
// //
// const centerDialogVisible = ref(false)
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) // '12:00:00'
const storesTagsViewRoutes = useTagsViewRoutes(); const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig); const { themeConfig } = storeToRefs(storesThemeConfig);
@ -202,21 +295,30 @@ const getList = async() =>{
{ {
num1: data.userTodayCount, num1: data.userTodayCount,
// num2: "42.32", // // num2: "42.32", //
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.homeviewCount, num1: data.homeviewTodayCount,
// num2: "17.32", // // num2: "17.32", //
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,
// num2: '-10.01',
num3: '首页总浏览数',
num4: 'fa fa-github-alt',
color1: '#FF6462',
color2: '--next-color-danger-lighter',
color3: '--el-color-danger',
},
]; ];
} }
}catch(error){ }catch(error){
@ -224,88 +326,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();
@ -392,93 +412,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
// 00:00:00
if (type === 0) {
t = date.getFullYear() + "-" + month + "-" + day + ' '+ '00' + ':'+ '00' +':'+ '00';
}
// 23:59:59
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; // yyyy-MM-dd HH:mm:ss 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);
//AI使
const AIabliltyData = ref([]);
//AI
const lineChartData = ref([]);
//AI
const handleDateBar = () => {
const [start, end] = dateRangeBar.value;
fetchBarMobile(start, end);
};
//AI
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, //
});
//AI
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]);
};
//AI
const fetchLineMobile = async( start?: string, end?: string ) => {
try{
const params = start && end ? {start, end} : {};//
const response = await logapi.getaiabilityConsumeList(params);
// console.log(22222222222,response.value);
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; // yyyy-MM-dd HH:mm:ss
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);
// console.log(22222222222,response.value);
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); // Debug: Log the data
state.global.homeCharThree.dispose();
if (state.global.homeCharThree) {
state.global.homeCharThree.clear(); // dispose,
} else {
state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
}
state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme)); //
if (data && data.length > 0) {
// console.log(333333333333);
const abilities = data.map((item) => item.ability);
const successNums = data.map((item) => item.successnNum);
const failNums = data.map((item) => item.failNum);
const abilities = data.length ? data.map((item) => item.ability) : ['无数据']; const option = {
const numbers = data.length ? data.map((item) => item.num) : [0]; backgroundColor: state.charts.bgColor,
title: {
const option = { text: 'AI能力使用统计',
backgroundColor: state.charts.bgColor, x: 'left',
title: { textStyle: { fontSize: '15', color: state.charts.color },
text: 'AI能力使用统计', },
x: 'left', tooltip: { trigger: 'axis' },
textStyle: { fontSize: '15', color: state.charts.color }, grid: { top: 100, right: 30, bottom: 100, left: 50 },
}, xAxis: [
tooltip: { trigger: 'axis' }, {
grid: { top: 100, right: 30, bottom: 100, left: 50 }, type: 'category',
xAxis: [ data: abilities,
{ axisTick: { show: false },
type: 'category', axisLabel: {
data: abilities, color: state.charts.color,
axisTick: { show: false }, interval: 0,
axisLabel: { rotate: 30,
color: state.charts.color, },
interval: 0, axisLine: {
rotate: 30, lineStyle: { color: state.charts.color },
}, },
axisLine: { },
lineStyle: { color: state.charts.color }, ],
}, yAxis: [
}, {
], type: 'value',
yAxis: [ name: '使用次数',
{ nameTextStyle: { padding: [0, 0, 10, 0] },
type: 'value', splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
name: '使用次数', axisLine: { show: false },
nameTextStyle: { padding: [0, 0, 10, 0] }, axisTick: { show: false },
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } }, axisLabel: { color: state.charts.color, formatter: '{value}' },
axisLine: { show: false }, },
axisTick: { show: false }, ],
axisLabel: { color: state.charts.color, formatter: '{value}' }, series: [
}, {
], name: '成功使用次数',
series: [ type: 'bar',
{ barWidth: '40%',
name: '使用次数', itemStyle: {
type: data.length ? 'bar' : 'line', // 线 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
barWidth: '40%', { offset: 0, color: 'rgba(108,80,243,0.8)' },
itemStyle: { { offset: 1, color: 'rgba(108,80,243,0.3)' },
color: data.length ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [ ]),
{ offset: 0, color: 'rgba(108,80,243,0.8)' }, borderRadius: [5, 5, 0, 0],
{ offset: 1, color: 'rgba(108,80,243,0.3)' }, },
]) : undefined, // barline data: successNums,
borderRadius: [5, 5, 0, 0], label:{
}, show:true,
data: numbers, 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);
};
// echarts resize // echarts resize
const initEchartsResizeFun = () => { const initEchartsResizeFun = () => {
nextTick(() => { nextTick(() => {
@ -493,11 +788,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(); //
// formattedDate();
if (isMobile) {
console.log('Mobile device detected');
// ElMessage.success('Mobile device detected');
//
fetchBarMobile(setDefaultDateBar(0), setDefaultDateBar(1))
fetchLineMobile(setDefaultDateLine(0), setDefaultDateLine(1))
} else {
console.log('Desktop device detected');
// PC
// pinia
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))
// initLineChart();
}, 1200);
});
},
{
deep: true,
immediate: true,
}
);
}
}); });
// keep-alive // keep-alive
onActivated(() => { onActivated(() => {
@ -510,30 +844,7 @@ watch(
initEchartsResizeFun(); initEchartsResizeFun();
} }
); );
// pinia
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">
@ -587,7 +898,7 @@ $homeNavLengh: 8;
.home-card-two, .home-card-two,
.home-card-three { .home-card-three {
.home-card-item { .home-card-item {
height: 600px; height: 500px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
.home-monitor { .home-monitor {
@ -626,7 +937,7 @@ $homeNavLengh: 8;
} }
.date-picker-container { .date-picker-container {
margin-bottom: 10px; /* 添加与标题的间距 */ margin-bottom: 10px; /* 添加与标题的间距 */
} }
.chart-title { .chart-title {
@ -635,4 +946,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: 350px;
flex-direction: column;
flex: 1;
overflow: auto;
.el-table {
flex: 1;
}
};
}
.layout-container .layout-padding-auto{
width: 361px;
}
</style> </style>