设备频次添加滚动条
This commit is contained in:
fengerli
@ -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'
|
||||
|
||||
|
||||
@ -4,8 +4,9 @@
|
||||
<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="chartRef" class="chartRef"></div>
|
||||
<div ref="chartContainerRef" class="chartContainer" :class="{ 'show-scroll': showScroll }">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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 {
|
||||
@ -182,8 +227,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.btn_mounth {
|
||||
width:4.5vw;
|
||||
height:4.5vh;
|
||||
width: 4.5vw;
|
||||
height: 4.5vh;
|
||||
background: url(@/assets/homeIndex/btn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user