fire-mh/src/components/mixins/linstener.js

// 常规列表混入
export default {
    data() {
        return {
            stroes: this.$useStore(),

            resizeTime: true,
            windowWidth: 1920 + 1080,
            // windowWidth: 6144 + 2304,
            isVsFirePie: false,
            distance: 300, // 3D饼图大小配置
            isVsTab: false,
            current: 1,
            size: 20,
            //size: 6.25,
        };
    },
    watch: {
        "stroes.$state.typeTime" (val) {
            this.getData && this.getData(val);
        },
        "stroes.$state.timeList" (val) {
            this.getData && this.getData(val);
        },
    },
    mounted() {
        // window.addEventListener("resize", this.resizeTimeActions);
    },
    methods: {
        resizeTimeActions(list) {
            if (!this.resizeTime) return;
            this.resizeTime = false;
            setTimeout(() => {
                list.forEach((element) => {
                    element && element.resize();
                });

                this.resizeTime = true;
                this.windowWidth = document.documentElement.clientWidth + document.documentElement.clientHeight;
            }, 300);
        },
        vsClick(val) {
            this[val] = !this[val];
            if (val === "isVsFirePie") {
                this.$nextTick(() => {
                    this.$refs.firePie1 && this.$refs.firePie1.resize();
                    this.$refs.firePie2 && this.$refs.firePie2.resize();
                });
            }
        },

        /**
         * @获取当前日期前七天的日期
         */
        getMonth() {
            let oneDay = 24 * 60 * 60 * 1000;
            let endTime = new Date(Date.now());
            endTime = this.formatterDate(endTime, "yyyy-MM-dd hh:mm:ss");
            let startTime = new Date(Date.now() - 30 * oneDay);
            startTime = this.formatterDate(startTime, "yyyy-MM-dd hh:mm:ss");
            const days = {
                startTime,
                endTime,
            };
            return days;
        },
        /**
         * @获取当前日期前七天的日期
         */
        getDays() {
            let oneDay = 24 * 60 * 60 * 1000;
            let endTime = new Date(Date.now());
            endTime = this.formatterDate(endTime, "yyyy-MM-dd hh:mm:ss");
            let startTime = new Date(Date.now() - 7 * oneDay);
            startTime = this.formatterDate(startTime, "yyyy-MM-dd hh:mm:ss");
            const days = {
                startTime,
                endTime,
            };
            return days;
        },
        /**
         * @处理公共日期格式
         */
        formatterDate(date, fmt) {
            let nowDate = {
                yyyy: date.getFullYear(), // 年
                MM: date.getMonth() + 1, // 月份
                dd: date.getDate(), //日
                hh: date.getHours(),
                mm: date.getMinutes(),
                ss: date.getSeconds(),
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in nowDate) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? nowDate[k] : ("00" + nowDate[k]).substr(("" + nowDate[k]).length));
                }
            }
            return fmt;
        },
        autoScroll(stop) {
            // 拿到表格中承载数据的div元素
            const divData = this.$refs.reportTable.$refs.bodyWrapper
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            if (stop) {
            //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
            window.clearInterval(this.scrolltimer)
            } else {
                this.scrolltimer = window.setInterval(() => {
                        // 元素自增距离顶部1像素
                        divData.scrollTop += 1
                        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        // 重置table距离顶部距离
                        divData.scrollTop = 0
                        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                        // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                        }
                }, 150) // 滚动速度
            }
        },
        autoScroll1(stop) {
            // 拿到表格中承载数据的div元素
            const divData = this.$refs.reportTable1.$refs.bodyWrapper
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            if (stop) {
            //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
            window.clearInterval(this.scrolltimer)
            } else {
                this.scrolltimer = window.setInterval(() => {
                        // 元素自增距离顶部1像素
                        divData.scrollTop += 1
                        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        // 重置table距离顶部距离
                        divData.scrollTop = 0
                        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                        // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                        }
                }, 150) // 滚动速度
            }
        },
    },
    unmount() {
        window.removeEventListener("resize", this.resizeTimeActions, true);
    },
};