liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

设备频次添加滚动条

Browse Source
This commit is contained in:
fengerli
2025-10-09 14:38:00 +08:00
parent 8e552df724
commit dc28fb65ba
2 changed files with 122 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'
# 开发环境
#VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
VITE_APP_BASE_API = 'http://192.168.110.56:8000'
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
#VITE_APP_BASE_API = 'http://192.168.2.34:8000'
#代永飞接口
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'

144
src/views/homeIndex/components/DeviceUsage.vue
View File

@ -4,9 +4,10 @@
<div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
<div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
</div>
<div ref="chartContainerRef" class="chartContainer" :class="{ 'show-scroll': showScroll }">
<div ref="chartRef" class="chartRef"></div>
</div>
</div>
</template>
<script setup lang="ts">
@ -14,19 +15,46 @@ import * as echarts from 'echarts';
import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
const chartRef = ref<HTMLDivElement | null>(null);
const chartContainerRef = ref<HTMLDivElement | null>(null);
const activeTab = ref('month');
let myChart: echarts.ECharts | null = null; // 保存图表实例
let dataTimer: NodeJS.Timeout | null = null; // 数据更新定时器
const showScroll = ref(false); // 控制是否显示滚动条
let myChart: echarts.ECharts | null = null;
let dataTimer: NodeJS.Timeout | null = null;
// 根据天数获取数据并更新图表
const fetchDataAndUpdate = (days: number) => {
getDeviceUsageFrequency({ days }).then((res) => {
if (res.code === 200 && res.data && myChart) {
//（转换为图表所需格式）
// 模拟数据（根据需求调整数量）
const dataCount = activeTab.value === 'month' ? 8 : 25; // 一月8条，半年25条
const mockData = Array.from({ length: dataCount }, (_, index) => ({
deviceName: `设备${index + 1}`,
frequency: Math.floor(Math.random() * 100)
}));
const chartData = res.data.map(item => ({
name: item.deviceName,
value: item.frequency
}));
const scrollThreshold = 20;
showScroll.value = chartData.length > scrollThreshold;
// 动态计算图表高度
const baseItemHeight = 20;
const minHeight = 200;
const maxHeight = 600;
let chartHeight;
if (showScroll.value) {
chartHeight = Math.min(chartData.length * baseItemHeight, maxHeight);
} else {
chartHeight = Math.max(chartData.length * baseItemHeight, minHeight);
}
if (chartRef.value) {
chartRef.value.style.height = `${chartHeight}px`;
}
// 更新图表
myChart.setOption({
yAxis: {
@ -36,21 +64,30 @@ const fetchDataAndUpdate = (days: number) => {
data: chartData.map(item => item.value)
}]
});
// 数据更新后，重新调整图表尺寸
setTimeout(() => {
if (myChart) {
myChart.resize();
}
}, 0);
}
}).catch(err => {
console.error('获取数据失败', err);
console.error(err);
});
};
// 切换标签逻辑
const switchTab = (tab: string) => {
activeTab.value = tab;
// 根据标签切换天数（近一月=30天，近半年=180天）
const days = tab === 'month' ? 30 : 180;
fetchDataAndUpdate(days);
// 切换标签后重新启动定时器
startDataTimer();
// 重置滚动位置
if (chartContainerRef.value) {
chartContainerRef.value.scrollTop = 10;
}
};
// 开始数据定时器
@ -58,7 +95,6 @@ const startDataTimer = () => {
if (dataTimer) {
clearInterval(dataTimer);
}
// 每300秒（5分钟）更新一次数据
dataTimer = setInterval(() => {
const days = activeTab.value === 'month' ? 30 : 180;
fetchDataAndUpdate(days);
@ -81,18 +117,19 @@ const initChart = () => {
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
axisPointer: { type: 'shadow' }
},
grid: {
left: '5%',
right: '10%',
bottom: '3%',
top: '20%',
right: '5%',
bottom: '2%',
top: '12%',
containLabel: true
},
yAxis: {
type: 'category',
data: [], // 初始空数据
inverse: true,
data: [],
axisLine: {
lineStyle: {
color: '#1e3a8a',
@ -100,26 +137,37 @@ const initChart = () => {
}
},
axisLabel: {
color: '#DEEFFF'
color: '#DEEFFF',
fontSize: 12
},
axisTick: {
alignWithLabel: true
}
},
xAxis: {
type: 'value',
axisLine: { show: false },
axisLabel: { show: false },
splitLine: { show: false }
splitLine: {
show: true,
lineStyle: {
color: 'rgba(30, 58, 138, 0.3)',
type: 'dashed'
}
}
},
series: [{
name: '使用频次',
type: 'bar',
data: [], // 初始空数据
barWidth: '9px',
data: [],
barWidth: '12px',
stack: 'total',
label: {
show: true,
position: 'right',
valueAnimation: true,
color: '#DEEFFF'
color: '#DEEFFF',
fontSize: 11
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
@ -130,15 +178,14 @@ const initChart = () => {
]
),
borderRadius: 4
}
},
barGap: '30%',
barCategoryGap: '40%'
}]
};
myChart.setOption(option);
// 初始化数据
fetchDataAndUpdate(30);
// 启动定时器
startDataTimer();
};
@ -155,11 +202,8 @@ onMounted(() => {
});
onUnmounted(() => {
// 清除定时器
clearDataTimer();
// 移除事件监听
window.removeEventListener('resize', handleResize);
// 销毁图表实例
if (myChart) {
myChart.dispose();
myChart = null;
@ -170,7 +214,8 @@ onUnmounted(() => {
<style scoped lang="scss">
.vchartPage {
margin-top: 4.9vh;
position: relative; // 确保按钮定位正确
position: relative;
height: 100%;
}
.btn_mounth_box {
@ -191,7 +236,7 @@ onUnmounted(() => {
color: #fff;
font-size: 0.8vw;
cursor: pointer;
margin-left: 0.5vw; // 按钮间距
margin-left: 0.5vw;
}
.cur {
@ -199,8 +244,49 @@ onUnmounted(() => {
background-size: 100% 100%;
}
.chartContainer {
width: 100%;
height: auto;
overflow-y: hidden;
overflow-x: hidden;
position: relative;
// margin-top: 2vh;
transition: all 0.3s ease;
// 当需要显示滚动条时的样式
&.show-scroll {
height: 24vh;
overflow-y: auto;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(7, 104, 212, 0.8);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(7, 104, 212, 1);
}
&::-webkit-scrollbar-track {
background-color: rgba(30, 58, 138, 0.1);
border-radius: 4px;
}
&::-webkit-scrollbar-track:hover {
background-color: rgba(30, 58, 138, 0.2);
}
}
}
.chartRef {
width: 100%;
height: 25vh;
min-height: 100px;
box-sizing: border-box;
}
</style>