wszhyWx/src/views/page/dataAnalysis.vue

<template>
    <div class="formula history dataAnalysis">
        <!-- 数据分析 -->
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/image/analysis.png" alt="" />
                数据分析
            </div>
            <div class="flex-view">
                <div class="input-btn">
                    <span>快速查询</span>
                    <div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
                        今日
                    </div>
                    <div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
                        昨日
                    </div>
                    <div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
                        自定义
                    </div>
                </div>
                <div class="input-sel-time">
                    <span>时间段</span>
                    <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </div>
                <div class="input-btn ">
                    <div class="btn blue" @click="search">
                        查询
                    </div>
                </div>
            </div>

            <div class="analysis-charts">
                <div class="charts" id="realTime-line"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { realTimeLine1 } from '@/assets/js/charts'
export default {
    data() {
        return {
            active: 0,
            value1: '',
            indexs: 1,
            dateRange: [],
        }
    },
    watch:{
        active(newVal, oldVal) {
            if (newVal != 2) {
                this.dataInit()
            }
        },
        $route(newVal, oldVal) {
            const that = this;
            const store = this.$store.state

            this.dataInit()
        },
    },
    mounted() {
        this.indexs = this.$route.query.index ? this.$route.query.index : 1;
        this.dataInit()

    },
    methods: {
        getTime(time) {
            // 中国标准时间
            var chinaTime = new Date(time);

            // 将中国标准时间转换为UTC时间
            var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);

            // 将UTC时间转换为2024-02-17 00:00:00格式
            var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
            return formattedTime
        },
        search() {
            this.dataInit()
        },
        timeInit() {
            const start = new Date()
            start.setHours(0, 0, 0, 0)
            const end = new Date()
            this.dateRange = [start, end]
        },
        dataInit() {
                this.loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
            if (this.active == 0) {
                this.timeInit()
            } else if (this.active == 1) {
                this.yesterdayTime()
            }
            setTimeout(() => {
                this.getData()
            }, 0);

        },
        yesterdayTime() {
            // 获取当前日期
            var today = new Date();

            // 获取昨天的日期
            var yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 1);

            // 设置时间为00:00
            yesterday.setHours(0, 0, 0, 0);
            var start = yesterday.toISOString();

            // 设置时间为23:59
            yesterday.setHours(23, 59, 59, 999);
            var end = yesterday.toISOString();
            this.dateRange = [start, end]
        },
        getData() {
            var store = this.$store.state
            var index = store.equipmentIndex;
            var data = {
                equipmentId: store.equipmentList[index - 1].deviceId,
                startTime: this.getTime(this.dateRange[0]),
                endTime: this.getTime(this.dateRange[1]),
                page: 1,
                pageSize: 999,
                isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
            }
            this.api.selFsTime(data).then(res => {
                  this.loading.close()
                if (res.data.code == 200) {
                    var chartsData = res.data.data.data.map(item => {
                        return {
                            time: item.updateTime,
                            value: item.equipment.map(equipmentItem => {
                                return {
                                    name: equipmentItem.environmentDataId,
                                    value: equipmentItem.environmentData,
                                    time: equipmentItem.updateTime
                                };
                            })
                        };
                    });
                    realTimeLine1('realTime-line', chartsData)
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
    },

}
</script>

<style lang="scss"></style>