数据大屏图表接口对接

2025-09-28 15:28:15 +08:00
parent c4d00bfdc3
commit b202de76ec
15 changed files with 755 additions and 64 deletions
--- a/src/views/homeIndex/components/DeviceUsage.vue
+++ b/src/views/homeIndex/components/DeviceUsage.vue
@ -1,6 +1,158 @@
 <template>
-    <div></div>
+    <div class="vchartPage">
+        <div class="btn_mounth_box">
+            <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>
 </template>
-<script setup lang="ts"> 
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
+const chartRef = ref<HTMLDivElement | null>(null);
+const activeTab = ref('month');
+let myChart: echarts.ECharts | null = null; // 保存图表实例
+
+// 根据天数获取数据并更新图表
+const fetchDataAndUpdate = (days: number) => {
+    getDeviceUsageFrequency({ days }).then((res) => {
+        if (res.code === 200 && res.data && myChart) {
+            // 处理接口返回的真实数据（转换为图表所需格式）
+            const chartData = res.data.map(item => ({
+                name: item.deviceName,
+                value: item.frequency
+            }));
+            // 更新图表
+            myChart.setOption({
+                yAxis: {
+                    data: chartData.map(item => item.name)
+                },
+                series: [{
+                    data: chartData.map(item => item.value)
+                }]
+            });
+        }
+    }).catch(err => {
+        console.error('获取数据失败', err);
+    });
+};
+
+// 切换标签逻辑
+const switchTab = (tab: string) => {
+    activeTab.value = tab;
+    // 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
+    const days = tab === 'month' ? 30 : 180;
+    fetchDataAndUpdate(days);
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        // 初始化图表实例
+        myChart = echarts.init(chartRef.value);
+        
+        // 初始图表配置（空数据占位）
+        const option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
+            },
+            grid: {
+                left: '5%',
+                right: '10%',
+                bottom: '3%',
+                top: '20%',
+                containLabel: true
+            },
+            yAxis: {
+                type: 'category',
+                data: [], // 初始空数据
+                axisLine: {
+                    lineStyle: {
+                        color: '#1e3a8a',
+                        show: false
+                    }
+                },
+                axisLabel: {
+                    color: '#DEEFFF'
+                }
+            },
+            xAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { show: false },
+                splitLine: { show: false }
+            },
+            series: [{
+                name: '使用频次',
+                type: 'bar',
+                data: [], // 初始空数据
+                barWidth: '14px',
+                stack: 'total',
+                label: {
+                    show: true,
+                    position: 'right',
+                    valueAnimation: true,
+                    color: '#DEEFFF'
+                },
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0, 0, 1, 0,
+                        [
+                            { offset: 0, color: '#0768D4' },
+                            { offset: 1, color: '#0EC4DF' }
+                        ]
+                    ),
+                    borderRadius: 4
+                }
+            }]
+        };
+        myChart.setOption(option);
+        fetchDataAndUpdate(30);
+        // 窗口resize自适应
+        window.addEventListener('resize', () => {
+            myChart?.resize();
+        });
+    }
+});
 </script>
-<style scoped lang="scss"></style>
+
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.8vh;
+    position: relative; // 新增：确保按钮定位正确
+}
+
+.btn_mounth_box {
+    display: flex;
+    position: absolute;
+    right: 1vh;
+    top: 0vh;
+    z-index: 1;
+}
+
+.btn_mounth {
+    width:4.5vw;
+    height:4.5vh;
+    background: url(@/assets/homeIndex/btn.png) no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 4.4vh;
+    color: #fff;
+    font-size: 0.8vw;
+    cursor: pointer;
+    margin-left: 0.5vw; // 新增：按钮间距
+}
+
+.cur {
+    background: url(@/assets/homeIndex/btn_cur.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.chartRef {
+    width: 100%;
+    height: 22vh;
+}
+</style>