carInsightSystem_web/src/views/Index/dynamicNumber/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-09 14:25:05
 * @LastEditTime: 2021-11-05 11:24:18
 * @LastEditors: Please set LastEditors
 * @Description: 大数据统计gif
 * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
-->
<template>
    <div class="dy-outter" v-loading="load">
        <img src="../../../assets/images/Index/d3.gif" class="load-m1">
        <div class="d1" @click="handlerClick(6)">
            <span class="s1">APP</span>
            <span class="s2">
                <countTo :startVal='form.app-100 >= 0 ? form.app-100 : 0' :endVal='form.app' :duration='3000'></countTo>
            </span>
        </div>
        <div class="d1 dd1" @click="handlerClick(8)">
            <span class="s1">其他</span>
            <span class="s2">
                <countTo :startVal='form.other-100 >= 0 ? form.other-100 : 0' :endVal='form.other' :duration='3000'></countTo>
            </span>
        </div>
        <div class="d1 dd2" @click="handlerClick(4)">
            <span class="s1">微信</span>
            <span class="s2">
                <countTo :startVal='form.wecat-100 >= 0 ? form.wecat-100 : 0' :endVal='form.wecat' :duration='3000'></countTo>
            </span>
        </div>
        <div class="d2 dd3" @click="handlerClick(3)">
            <span class="s1">
                <countTo :startVal='form.forum-100 >= 0 ? form.forum-100 : 0' :endVal='form.forum' :duration='3000'></countTo>
            </span>
            <span class="s2">论坛</span>
        </div>
        <div class="d2 dd4" @click="handlerClick(5)">
            <span class="s1">
                <countTo :startVal='form.weipo-100 >= 0 ? form.weipo-100 : 0' :endVal='form.weipo' :duration='3000'></countTo>
            </span>
            <span class="s2">微博</span>
        </div>
        <div class="d2 dd5" @click="handlerClick(1)">
            <span class="s1">
                <countTo :startVal='form.news-100 >= 0 ? form.news-100 : 0' :endVal='form.news' :duration='3000'></countTo>
            </span>
            <span class="s2">新闻</span>
        </div>
        <div class="d3" @click="handlerClick(-1)">
            <span class="s1">系统入库 数据总量</span>
            <span class="s2">
                <countTo :startVal='form.total-100 >= 0 ? form.total-100 : 0' :endVal='form.total' :duration='3000'></countTo>
            </span>
        </div>
    </div>
</template>

<script>
import countTo from "vue-count-to";
import { getHomeCount0528 } from "@/api/home";
export default {
    name: "dynamic-number",
    components: {
        countTo,
    },
    data() {
        return {
            load: false,
            form: {
                total: 0,
                app: 0,
                news: 0,
                weipo: 0,
                other: 0,
                short: 0,
                forum: 0,
                wecat: 0,
            },
            begin: true,
            intval: null,
        };
    },
    created() {
        this.load = true;
        this.getData(1).then(() => {
             this.load = false;
            this.startDyfun(6000);
        });
    },
    destroyed() {
        if(this.intval) {
            clearTimeout(this.intval)
        }
    },
    methods: {
        // 获取后台数据
        getData(n) {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCommTime, { iStatus: n });
                getHomeCount0528(obj).then((res) => {
                    let data = res.data;
                    this.form.total = data.count;
                    let sourcetypeCount = data.sourcetypeCount;
                    if (Array.isArray(sourcetypeCount)) {
                        sourcetypeCount.forEach((ele) => {
                            if (ele.key == "新闻") {
                                this.form.news = ele.value;
                            } else if (ele.key == "APP") {
                                this.form.app = ele.value;
                            } else if (ele.key == "论坛") {
                                this.form.forum = ele.value;
                            } else if (ele.key == "微信") {
                                this.form.wecat = ele.value;
                            } else if (ele.key == "微博") {
                                this.form.weipo = ele.value;
                            } else {
                                this.form.other = ele.value;
                            }
                        });
                    }
                    resolve(res)
                }).catch(() => {
                    reject(false)
                });
            });
        },
        // // 点击中间的全网数据显示
        // handlerAllData() {
        //     this.$emit("allData");
        // },
        // 定时器调后台数据
        startDyfun(time) {
            this.intval = self.setTimeout(() => {
                if (this.begin) {
                    this.begin = false;
                    this.getData(2)
                        .then(() => {
                            this.begin = true;
                            this.startDyfun(time);
                        })
                        .catch(() => {
                            this.begin = false;
                        });
                }
            }, time);
        },
        handlerClick(n) {
             this.$emit("allData", n);
        }
    },
};
</script>

<style lang="less" scoped>
.dy-outter {
    position: relative;
    width: 100%;
    height: 100%;
    .load-m1 {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
    }
    .d1 {
        position: absolute;
        display: flex;
        width: 280px;
        height: 9%;
        background-image: url("../../../assets/images/Index/img_jbtter.png");
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: flex-start;
        align-items: center;
        top: 38%;
        left: 0px;
        cursor: pointer;
        .s1 {
            display: block;
            font-size: 18px;
            margin-left: 32px;
            color: #d2dadf;
        }
        .s2 {
            display: block;
            font-size: 28px;
            font-family: Bebas;
            color: #ffffff;
            margin-left: 24px;
        }
    }
    .d2 {
        position: absolute;
        display: flex;
        width: 280px;
        height: 9%;
        background-image: url("../../../assets/images/Index/img_jbtter.png");
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: flex-end;
        align-items: center;
        top: 10%;
        left: 0px;
        cursor: pointer;
        .s2 {
            display: block;
            font-size: 18px;
            margin-left: 32px;
            color: #d2dadf;
            margin-right: 32px;
        }
        .s1 {
            display: block;
            font-size: 28px;
            font-family: Bebas;
            color: #ffffff;
        }
    }
    .d3 {
        position: absolute;
        width: 320px;
        height: 13%;
        background-image: url("../../../assets/images/Index/img_jbtt.png");
        background-repeat: no-repeat;
        background-size: cover;
        left: 30%;
        top: 47%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        .s1 {
            display: block;
            font-size: 18px;
            color: #d2dadf;
            width: 72px;
            margin-left: 38px;
        }
        .s2 {
            display: block;
            font-size: 32px;
            font-family: Bebas;
            color: #ffffff;
            margin-left: 23px;
        }
    }
}
.dd1 {
    top: 58% !important;
    left: 0px !important;
}
.dd2 {
    top: 15% !important;
    left: 45% !important;
}
.dd3 {
    top: 36% !important;
    left: 70% !important;
}
.dd4 {
    top: 60% !important;
    left: 70% !important;
}
.dd5 {
    top: 72% !important;
    left: 29% !important;
}
</style>