内容修改

819527061@qq.com

2023-07-25 f0b2b04b1b43d4891c1808ad060b9959f9a1209c

 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"
@@ -103,7 +105,10 @@
          </div>
        </div>
      </div>
      <div class="IndexMoudle-block">
      <div
        @click="handleClickTk"
        class="IndexMoudle-block"
      >
        <svg
          class="IndexMoudleSvg"
          xmlns="http://www.w3.org/2000/svg"
@@ -205,7 +210,9 @@
          </div>
        </div>
      </div>
      <div class="IndexMoudle-block">
      <div
        @click="handleClickTk"
        class="IndexMoudle-block">
        <svg
          class="IndexMoudleSvg"
          xmlns="http://www.w3.org/2000/svg"
@@ -310,7 +317,9 @@
          </div>
        </div>
      </div>
      <div class="IndexMoudle-block">
      <div
        @click="handleClickTk"
        class="IndexMoudle-block">
        <svg
          class="IndexMoudleSvg"
          xmlns="http://www.w3.org/2000/svg"
@@ -428,7 +437,9 @@
          </div>
        </div>
      </div>
      <div class="IndexMoudle-block">
      <div
        @click="handleClickTk"
        class="IndexMoudle-block">
        <svg
          class="IndexMoudleSvg"
          xmlns="http://www.w3.org/2000/svg"
@@ -553,6 +564,7 @@
          </div>
        </div>
      </div>
      <indexMoudleForm ref="indexMoudleForm" v-if="indexMoudleVisiable"></indexMoudleForm>
    </div>
</template>

@@ -560,13 +572,16 @@
    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";
    export default {
        name: "IndexMoudleBlock",
        components: {
            countTo
          countTo,
          indexMoudleForm
        },
        data() {
            return {
              indexMoudleVisiable:false, //弹框
                fuwuqiconfig1: {
                    number: [0],
                },
@@ -604,7 +619,7 @@
          clearInterval(this.timer)
        },
        mounted() {
            this.loading()
            //this.loading()
            this.getHost()
            this.getSnmp()
            this.getTask()
@@ -620,6 +635,12 @@

        },
        methods: {
          handleClickTk() {
            this.indexMoudleVisiable = true
            this.$nextTick(() => {
              this.$refs.indexMoudleForm.init()
            })
          },
          getHost(){  //主机
            getHost().then(res =>{
                console.log(res,'res====')
@@ -695,33 +716,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.donghuanCountTo3.start();
                        this.$refs.donghuanCountTo4.start();
                        this.$refs.menjinCountTo1.start();
                        this.$refs.menjinCountTo2.start();
                        this.$refs.menjinCountTo3.start();
                        this.$refs.menjinCountTo4.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>
@@ -741,9 +802,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%;