2024大数据职业技能竞赛（国赛）模块E-工业 用折线图展示设备OP160每日的运行时长

 2024大数据职业技能竞赛（国赛）模块E数据展现题解--工业

编写Vue工程代码，根据接口，用折线图展示设备OP160每日的运行时长（秒），同时将用于图表展示 的数据结构在浏览器的console中进行打印输出， 将图表可视化结果和浏览器console打印结果分别截 图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

结果展示：

代码展示：

<template>
    <div>
        <h2>用折线图展示设备OP160每日的运行时长</h2>
    </div>
    <!-- 用来存放echarts图表的容器 -->
    <div id="main" ref="main"></div>
</template>

<script>
// 引入echarts和axios库
import * as echarts from '../assets/echarts.min';  // 引入本地echarts.min.js文件
import axios from 'axios';  // 引入axios用于发起API请求

export default {
    // 组件挂载后执行的生命周期函数
    mounted() {
        // 初始化echarts实例并绑定到页面上指定的DOM元素
        var myChart = echarts.init(this.$refs.main);  // 使用refs获取#main元素并初始化echarts

        // 发送POST请求，获取后台返回的设备状态数据
        axios.post('/api/selectGyInfo').then(res => {
            let responseData = res.data.data;  // 从响应中获取设备数据

            let dates = [];  // 存储日期
            let runDurations = [];  // 存储每个日期的运行时长
            let machineRunTimeMap = new Map();  // 存储每个日期的累计运行时长（以秒为单位）

            // 处理设备OP160的所有数据，计算每天的运行时长
            responseData.filter(device => device.machineNo == 'OP160')
                .forEach((device) => {
                    device.showFactChangeRecordList
                        .filter((record) => record.changeRecordState == '运行')
                        .forEach((changeRecord) => {
                            let recordDate = changeRecord.changeStartTime.split(" ")[0];  // 获取日期部分
                            let durationInSeconds = (new Date(changeRecord.changeEndTime) - new Date(changeRecord.changeStartTime)) / 1000;  // 计算运行时长，单位为秒

                            // 累加每天的运行时长
                            if (machineRunTimeMap.has(recordDate)) {
                                machineRunTimeMap.set(recordDate, machineRunTimeMap.get(recordDate) + durationInSeconds);
                            } else {
                                machineRunTimeMap.set(recordDate, durationInSeconds);
                            }
                        });
                });

            // 将Map转换为数组并按日期排序
            const sortedRunTimes = Array.from(machineRunTimeMap).sort((a, b) => a[0].localeCompare(b[0], 'zh-CN'));

            // 提取排序后的日期和对应的运行时长数据
            sortedRunTimes.forEach((res) => {
                console.log(res)
                dates.push(res[0]);
                runDurations.push(res[1]);
            });

            // 配置echarts图表的选项
            var option = {
                title: { text: '设备OP160每日的运行时长（秒）', left: 'left' },
                legend: {},
                xAxis: {
                    type: "category",
                    data: dates,  // 使用日期作为X轴数据
                    axisLabel: {
                        lineHeight: 60,
                    },
                },
                yAxis: {
                    name: '运行时长（秒）',
                    axisLabel: {
                        formatter: '{value}',
                    },
                },
                series: [
                    {
                        name: "OP160",  // 系列名称
                        data: runDurations,  // 每天的运行时长数据
                        type: "line",  // 设置为折线图
                        label: { show: true },  // 显示标签
                    },
                ],
            };

            // 设置图表数据
            myChart.setOption(option);
        });
    }
};
</script>

私聊博主获取全部数据