From 2abce925663c0c044c9b5421eab9881e4dbe9f18 Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期一, 31 七月 2023 14:58:06 +0800
Subject: [PATCH] 提交文件
---
src/pages/show/showIndex/IndexMoudleBlock.vue | 302 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 247 insertions(+), 55 deletions(-)
diff --git a/src/pages/show/showIndex/IndexMoudleBlock.vue b/src/pages/show/showIndex/IndexMoudleBlock.vue
index 01b7e76..97e8539 100644
--- a/src/pages/show/showIndex/IndexMoudleBlock.vue
+++ b/src/pages/show/showIndex/IndexMoudleBlock.vue
@@ -1,7 +1,9 @@
<template>
<div class="IndexMoudleBlock-wrap">
- <div class="IndexMoudle-block">
-
+ <div
+ @click="handleClickTk"
+ class="IndexMoudle-block"
+ >
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -73,7 +75,7 @@
</g>
</svg>
</div>
- <h1>鏈嶅姟鍣�</h1>
+ <h1>涓绘満</h1>
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
@@ -82,7 +84,7 @@
<countTo
ref="fuwuCountTo1"
:start-val="0"
- :end-val="3689"
+ :end-val="zhuji.count"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -94,7 +96,7 @@
<countTo
ref="fuwuCountTo2"
:start-val="0"
- :end-val="3650"
+ :end-val="zhuji.normalCount"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -103,7 +105,10 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk1"
+ class="IndexMoudle-block"
+ >
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -179,24 +184,24 @@
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>鐩戞帶涓绘満</h1>
+ <h1>鐩戞帶璁惧</h1>
<h2>
<countTo
ref="shutongCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="tongxun.count"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>姝ｅ父涓绘満</h1>
+ <h1>姝ｅ父璁惧</h1>
<h2>
<countTo
ref="shutongCountTo2"
:start-val="0"
- :end-val="3650"
+ :end-val="tongxun.normalCount"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -205,7 +210,8 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -284,24 +290,24 @@
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>鐩戞帶涓绘満</h1>
+ <h1>璁″垝鎬绘暟</h1>
<h2>
<countTo
ref="yunweiCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="yunwei.count"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>姝ｅ父涓绘満</h1>
+ <h1>宸插畬鎴愯鍒�</h1>
<h2>
<countTo
ref="yunweiCountTo2"
:start-val="0"
- :end-val="3650"
+ :end-val="yunwei.normalCount"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -310,7 +316,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk2"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -386,12 +394,12 @@
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>ups/鐢垫睜缁�</h1>
+ <h1>ups</h1>
<h2>
<countTo
ref="donghuanCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="up.ups"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -399,27 +407,27 @@
<countTo
ref="donghuanCountTo2"
:start-val="0"
- :end-val="365"
+ :end-val="up.ups2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>娓╂箍搴﹁澶�/姘寸</h1>
+ <h1>鐢垫睜缁�</h1>
<h2>
<countTo
- ref="donghuanCountTo2"
+ ref="donghuanCountTo3"
:start-val="0"
- :end-val="3650"
+ :end-val="up.dianchi"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
<span>/</span>
<countTo
- ref="donghuanCountTo2"
+ ref="donghuanCountTo4"
:start-val="0"
- :end-val="365"
+ :end-val="up.dianchi2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -428,7 +436,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk3"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -507,36 +517,44 @@
</g>
</svg>
</div>
- <h1>闂ㄧ</h1>
+ <h1>绌鸿皟</h1>
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>姝ｅ父闂ㄧ/鐩戞帶闂ㄧ</h1>
+ <h1>ups绌鸿皟</h1>
<h2>
<countTo
ref="menjinCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="kongtiao.upsKongtiao"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
<span>/</span>
<countTo
- ref="menjinCountTo1"
+ ref="menjinCountTo2"
:start-val="0"
- :end-val="360"
+ :end-val="kongtiao.upsKongtiao2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>绌鸿皟</h1>
+ <h1>涓績绌鸿皟</h1>
<h2>
<countTo
- ref="menjinCountTo2"
+ ref="menjinCountTo3"
:start-val="0"
- :end-val="3650"
+ :end-val="kongtiao.zhongxinKongtiao"
+ :duration="2500"
+ class="count-number"
+ :autoplay="false"></countTo>
+ <span>/</span>
+ <countTo
+ ref="menjinCountTo4"
+ :start-val="0"
+ :end-val="kongtiao.zhongxinKongtiao2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -545,32 +563,160 @@
</div>
</div>
</div>
+ <indexMoudleForm ref="indexMoudleForm" v-if="indexMoudleVisiable"></indexMoudleForm>
+ <indexMoudleForm1 ref="indexMoudleForm1" v-if="indexMoudleVisiable1"></indexMoudleForm1>
+ <indexMoudleForm2 ref="indexMoudleForm2" v-if="indexMoudleVisiable2"></indexMoudleForm2>
+ <indexMoudleForm3 ref="indexMoudleForm3" v-if="indexMoudleVisiable3"></indexMoudleForm3>
</div>
</template>
<script>
import {animateShanFlash} from '@/utils/animateShanFlash'
+ import {getHost,getSnmp,getTask,getTaskInfoById,getUps,getKongtiao} from '@/api/daping'
import countTo from "vue-count-to"
+ import indexMoudleForm from "./IndexMoudleBlock/IndexMoudleForm";
+ import indexMoudleForm1 from "./IndexMoudleBlock/IndexMoudleForm1";
+ import indexMoudleForm2 from "./IndexMoudleBlock/IndexMoudleForm2";
+ import indexMoudleForm3 from "./IndexMoudleBlock/IndexMoudleForm3";
export default {
name: "IndexMoudleBlock",
components: {
- countTo
+ countTo,
+ indexMoudleForm,
+ indexMoudleForm1,
+ indexMoudleForm2,
+ indexMoudleForm3,
},
data() {
return {
+ indexMoudleVisiable:false, //寮规
+ indexMoudleVisiable1:false, //寮规
+ indexMoudleVisiable2:false, //寮规
+ indexMoudleVisiable3:false, //寮规
fuwuqiconfig1: {
number: [0],
},
fuwuqiconfig2: {
number: [0],
},
+ zhuji: {
+ count: 0,
+ normalCount: 0
+ },
+ tongxun: {
+ count: 0,
+ normalCount: 0
+ },
+ yunwei: {
+ count: 0,
+ normalCount: 0
+ },
+ up: {
+ dianchi:0,
+ dianchi2:0,
+ ups:0,
+ ups2:0,
+ },
+ kongtiao: {
+ upsKongtiao:0,
+ upsKongtiao2:0,
+ zhongxinKongtiao:0,
+ zhongxinKongtiao2:0
+ },
+ timer:null
}
},
+ destroyed() {
+ clearInterval(this.timer)
+ },
mounted() {
- this.loading()
+ //this.loading()
+ this.getHost()
+ this.getSnmp()
+ this.getTask()
+ this.getUps()
+ this.getKongtiao()
+ this.timer = setInterval(() => {
+ this.getHost()
+ this.getSnmp()
+ this.getTask()
+ this.getUps()
+ this.getKongtiao()
+ },300000)
},
methods: {
+ handleClickTk() {
+ this.indexMoudleVisiable = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm.init()
+ })
+ },
+ handleClickTk1() {
+ this.indexMoudleVisiable1 = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm1.init()
+ })
+ },
+ handleClickTk2() {
+ this.indexMoudleVisiable2 = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm2.init()
+ })
+ },
+ handleClickTk3() {
+ this.indexMoudleVisiable3 = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm3.init()
+ })
+ },
+ getHost(){ //涓绘満
+ getHost().then(res =>{
+ console.log(res,'res====')
+ if(res.code == 0) {
+ res.data.count && (this.zhuji.count = res.data.count)
+ res.data.normalCount && (this.zhuji.normalCount = res.data.normalCount)
+ }
+ })
+ },
+ getSnmp() { //鏁伴�氳澶�
+ getSnmp().then(res => {
+ if(res.code == 0) {
+ this.tongxun.count = res.data.count
+ this.tongxun.normalCount = res.data.normalCount
+ }
+ })
+ },
+ getTask() { //杩愮淮璁″垝
+ getTask().then(res => {
+ if(res.code == 0) {
+ this.yunwei.count = res.data.count
+ this.yunwei.normalCount = res.data.normalCount
+ }
+ })
+ },
+ getUps() {
+ getUps().then(res => {
+ if(res.code == 0) {
+ this.up.dianchi = res.data.dianchi
+ this.up.dianchi2 = res.data.dianchi2
+ console.log(this.up.dianchi,'this.up.dianchi1====')
+ console.log(this.up.dianchi2,'this.up.dianchi2====')
+ this.up.ups = res.data.ups
+ this.up.ups2 = res.data.ups2
+ }
+ })
+ },
+ getKongtiao() {
+ getKongtiao().then(res => {
+ if(res.code == 0) {
+ this.kongtiao.upsKongtiao = res.data.upsKongtiao
+ this.kongtiao.upsKongtiao2 = res.data.upsKongtiao2
+ this.kongtiao.zhongxinKongtiao = res.data.zhongxinKongtiao
+ this.kongtiao.zhongxinKongtiao2 = res.data.zhongxinKongtiao2
+ }
+ })
+ },
start() {
this.$refs.countTo.start();
},
@@ -599,29 +745,73 @@
yoyo: true
})
})
- tl.from('.IndexMoudleBlock-wrap',{
- y:'100',
- autoAlpha: 0,
- ease:'back.out(1.7)',
- duration:1,
- delay:0.5,
- oncomplete: setTimeout(() => {
- this.$refs.fuwuCountTo1.start();
- this.$refs.fuwuCountTo2.start();
- this.$refs.shutongCountTo1.start();
- this.$refs.shutongCountTo2.start();
- this.$refs.yunweiCountTo1.start();
- this.$refs.yunweiCountTo2.start();
- this.$refs.donghuanCountTo1.start();
- this.$refs.donghuanCountTo2.start();
- this.$refs.donghuanCountTo2.start();
- this.$refs.menjinCountTo1.start();
- this.$refs.menjinCountTo2.start();
- },1000)
+ tl.fromTo('.IndexMoudleBlock-wrap',{
+ x:'-105%',
+ },{
+ x:'0',
+ //autoAlpha: 0,
+ ease:'back.out(1.7)',
+ duration:1,
+ delay:0.5,
+ oncomplete: setTimeout(() => {
+ this.$refs.fuwuCountTo1.start();
+ this.$refs.fuwuCountTo2.start();
+ this.$refs.shutongCountTo1.start();
+ this.$refs.shutongCountTo2.start();
+ this.$refs.yunweiCountTo1.start();
+ this.$refs.yunweiCountTo2.start();
+ this.$refs.donghuanCountTo1.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo3.start();
+ this.$refs.donghuanCountTo4.start();
+ this.$refs.menjinCountTo1.start();
+ this.$refs.menjinCountTo2.start();
+ this.$refs.menjinCountTo3.start();
+ this.$refs.menjinCountTo4.start();
+ },1000)
})
- }
+ },
+ loading2(){
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ let pathArry = this.gsap.utils.toArray('.zhuangshi-kuai')
+ pathArry.forEach(item => {
+ animateShanFlash(item.children,{
+ duration: 1.2,
+ yoyo: true
+ })
+ })
+ tl.fromTo('.IndexMoudleBlock-wrap',{
+ x:'0',
+ },{
+ x:'-105%',
+ //autoAlpha: 0,
+ ease:'back.out(1.7)',
+ duration:1,
+ delay:0.5,
+ oncomplete: setTimeout(() => {
+ this.$refs.fuwuCountTo1.start();
+ this.$refs.fuwuCountTo2.start();
+ this.$refs.shutongCountTo1.start();
+ this.$refs.shutongCountTo2.start();
+ this.$refs.yunweiCountTo1.start();
+ this.$refs.yunweiCountTo2.start();
+ this.$refs.donghuanCountTo1.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo3.start();
+ this.$refs.donghuanCountTo4.start();
+ this.$refs.menjinCountTo1.start();
+ this.$refs.menjinCountTo2.start();
+ this.$refs.menjinCountTo3.start();
+ this.$refs.menjinCountTo4.start();
+ },1000)
+ })
+
+
+ }
}
}
</script>
@@ -641,9 +831,11 @@
.IndexMoudleBlock-wrap{
width: 100%;
display: flex;
+ transform: translateX(-105%);
.IndexMoudle-block{
position: relative;
margin: 0.0521rem /* 10/192 */ 0.078125rem /* 15/192 */;
+ cursor: pointer;
.IndexMoudleSvg{
width: 100%;
height: 100%;
--
Gitblit v1.9.1