提交文件

kongdeqiang

2023-07-31 2abce925663c0c044c9b5421eab9881e4dbe9f18

 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%;