You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
10 KiB
325 lines
10 KiB
<!--
|
|
* @Author: xw
|
|
* @Date: 2021-10-09 14:25:05
|
|
* @LastEditTime: 2021-12-29 16:59:19
|
|
* @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 class="dn-footer">
|
|
<div class="df-d"><span class="s1">历史入库数据总量</span><span class="s2"><countTo :startVal='form.count_all-100 >= 0 ? form.count_all-100 : 0' :endVal='form.count_all' :duration='3000'></countTo></span></div>
|
|
<div class="df-d"><span class="s1">一年累计入库数据总量</span><span class="s2"><countTo :startVal='form.count_year-100 >= 0 ? form.count_year-100 : 0' :endVal='form.count_year' :duration='3000'></countTo></span></div>
|
|
<div class="df-d"><span class="s1">半年累计入库数据总量</span><span class="s2"><countTo :startVal='form.count_6month-100 >= 0 ? form.count_6month-100 : 0' :endVal='form.count_6month' :duration='3000'></countTo></span></div>
|
|
</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,
|
|
count_all: 0,
|
|
count_6month: 0,
|
|
count_year: 0
|
|
},
|
|
begin: true,
|
|
intval: null,
|
|
};
|
|
},
|
|
created() {
|
|
this.load = true;
|
|
this.getData(1).then(() => {
|
|
this.load = false;
|
|
this.startDyfun(6000);
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
if (this.intval) {
|
|
clearTimeout(this.intval);
|
|
this.intval = null;
|
|
}
|
|
},
|
|
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;
|
|
this.form.count_year = data.count_year;
|
|
this.form.count_6month = data.count_6month;
|
|
this.form.count_all = data.count_all;
|
|
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;
|
|
}
|
|
.dn-footer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 40px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
border: 1px solid;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(1, 79, 184, 0) 0%,
|
|
#002455 51%,
|
|
rgba(1, 79, 184, 0) 100%
|
|
);
|
|
border-image: linear-gradient(
|
|
90deg,
|
|
rgba(26, 145, 255, 0),
|
|
rgba(60, 161, 255, 1),
|
|
rgba(26, 145, 255, 0)
|
|
)
|
|
1 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0px 13px;
|
|
.df-d {
|
|
width: 33.3333%;
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
.s1 {
|
|
font-size: 16px;
|
|
color: #b1b9c0;
|
|
font-weight: 500;
|
|
}
|
|
.s2 {
|
|
font-size: 15px;
|
|
font-family: Bebas;
|
|
color: #63aecc;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|