<template>
|
<div class="IndexMoudleBlock-wrap">
|
<div
|
@click="handleClickTk"
|
class="IndexMoudle-block"
|
>
|
<svg
|
class="IndexMoudleSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="360px" height="160px"
|
viewBox="0 0 360 160">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M17.860,16.000 L92.472,16.000 L102.273,6.000 L350.000,6.000 L350.000,140.709 L339.424,154.000 L6.000,154.000 L6.000,28.703 L17.860,16.000 Z"/>
|
<g class="zhuangshi-kuai">
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M92.000,6.000 L100.000,6.000 L91.000,15.000 L83.000,15.000 L92.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M81.000,6.000 L89.000,6.000 L80.000,15.000 L72.000,15.000 L81.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M70.000,6.000 L78.000,6.000 L69.000,15.000 L61.000,15.000 L70.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M59.000,6.000 L67.000,6.000 L58.000,15.000 L50.000,15.000 L59.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M48.000,6.000 L56.000,6.000 L47.000,15.000 L39.000,15.000 L48.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M37.000,6.000 L45.000,6.000 L36.000,15.000 L28.000,15.000 L37.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M26.000,6.000 L34.000,6.000 L25.000,15.000 L17.000,15.000 L26.000,6.000 Z"/>
|
</g>
|
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M153.000,153.000 L339.000,153.000 L349.000,139.000 L349.000,95.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M29.000,17.000 L17.000,17.000 L7.000,30.000 L7.000,41.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M338.000,6.000 L350.000,6.000 L350.000,17.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M17.000,154.000 L6.000,154.000 L6.000,143.000 "/>
|
</svg>
|
|
<div class="svg-main">
|
<div class="svgMain-top">
|
<div class="svgMain-img">
|
<!--<img src="../../../assets/img/yunIcon.png" alt="">-->
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44" height="32"
|
viewBox="0 0 44 32" fill="none">
|
<defs>
|
<rect id="path_0" x="0" y="0" width="44" height="32"/>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 22 16)">
|
<mask id="bg-mask-0" fill="white">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path id="分组 1" fill-rule="evenodd" style="fill:#00ecff"
|
transform="translate(0 0) rotate(0 22 16)" opacity="1"
|
d="M8.3 11.13C3.5 12.45 0 16.52 0 21.33C0 27.01 4.86 31.68 11 32L31.63 32C38.46 32 44 26.33 44 19.33C44 12.59 38.57 7.1 31.72 6.7C29.7 2.74 25.5 0 20.63 0C14.1 0 8.76 4.91 8.3 11.13Z M14.6667 16L29.3367 16C30.4367 16 31.3367 15.1 31.3367 14C31.3367 12.9 30.4367 12 29.3367 12L14.6667 12C13.5667 12 12.6667 12.9 12.6667 14C12.6667 15.1 13.5567 16 14.6667 16Z M14.6667 21.3333L29.3367 21.3333C30.4367 21.3333 31.3367 20.4333 31.3367 19.3333C31.3367 18.2333 30.4367 17.3333 29.3367 17.3333L14.6667 17.3333C13.5667 17.3333 12.6667 18.2333 12.6667 19.3333C12.6667 20.4333 13.5567 21.3333 14.6667 21.3333Z M14.6667 26.6667L29.3367 26.6667C30.4367 26.6667 31.3367 25.7667 31.3367 24.6667C31.3367 23.5667 30.4367 22.6667 29.3367 22.6667L14.6667 22.6667C13.5667 22.6667 12.6667 23.5667 12.6667 24.6667C12.6667 25.7667 13.5567 26.6667 14.6667 26.6667Z "/>
|
</g>
|
</g>
|
</svg>
|
</div>
|
<h1>主机</h1>
|
</div>
|
<div class="svgMain-bottom">
|
<div class="svgMain-bottom-block">
|
<h1>监控主机</h1>
|
<h2>
|
<countTo
|
ref="fuwuCountTo1"
|
:start-val="0"
|
:end-val="zhuji.count"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
<div class="svgMain-bottom-block">
|
<h1>正常主机</h1>
|
<h2>
|
<countTo
|
ref="fuwuCountTo2"
|
:start-val="0"
|
:end-val="zhuji.normalCount"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
@click="handleClickTk"
|
class="IndexMoudle-block"
|
>
|
<svg
|
class="IndexMoudleSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="360px" height="160px"
|
viewBox="0 0 360 160">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M17.860,16.000 L92.472,16.000 L102.273,6.000 L350.000,6.000 L350.000,140.709 L339.424,154.000 L6.000,154.000 L6.000,28.703 L17.860,16.000 Z"/>
|
<g class="zhuangshi-kuai">
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M92.000,6.000 L100.000,6.000 L91.000,15.000 L83.000,15.000 L92.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M81.000,6.000 L89.000,6.000 L80.000,15.000 L72.000,15.000 L81.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M70.000,6.000 L78.000,6.000 L69.000,15.000 L61.000,15.000 L70.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M59.000,6.000 L67.000,6.000 L58.000,15.000 L50.000,15.000 L59.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M48.000,6.000 L56.000,6.000 L47.000,15.000 L39.000,15.000 L48.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M37.000,6.000 L45.000,6.000 L36.000,15.000 L28.000,15.000 L37.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M26.000,6.000 L34.000,6.000 L25.000,15.000 L17.000,15.000 L26.000,6.000 Z"/>
|
</g>
|
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M153.000,153.000 L339.000,153.000 L349.000,139.000 L349.000,95.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M29.000,17.000 L17.000,17.000 L7.000,30.000 L7.000,41.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M338.000,6.000 L350.000,6.000 L350.000,17.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M17.000,154.000 L6.000,154.000 L6.000,143.000 "/>
|
</svg>
|
<div class="svg-main">
|
<div class="svgMain-top">
|
<div class="svgMain-img">
|
<!--<img src="../../../assets/img/yunIcon.png" alt="">-->
|
<svg fill="#00ecff" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
<defs>
|
<rect height="32" id="path_0" width="32" x="0" y="0"/>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 16 16)">
|
<mask fill="white" id="bg-mask-0">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path
|
d="M2.2 0.617893C1.59 0.617893 1.04 0.867893 0.65 1.26789C0.25 1.65789 0 2.20789 0 2.81789L0 9.27789C0 9.88789 0.25 10.4379 0.65 10.8379C1.04 11.2379 1.59 11.4779 2.2 11.4779L8.66 11.4779C9.27 11.4779 9.82 11.2379 10.22 10.8379C10.62 10.4379 10.86 9.88789 10.86 9.27789L10.86 2.81789C10.86 2.20789 10.62 1.65789 10.22 1.26789C9.82 0.867893 9.27 0.617893 8.66 0.617893L2.2 0.617893Z M9.11878 2.35667C9.00878 2.23667 8.83878 2.16667 8.65878 2.16667L2.19878 2.16667C2.01878 2.16667 1.85878 2.23667 1.73878 2.35667C1.61878 2.47667 1.54878 2.63667 1.54878 2.81667L1.54878 9.27667C1.54878 9.45667 1.61878 9.62667 1.73878 9.73667C1.85878 9.85667 2.01878 9.92667 2.19878 9.92667L8.65878 9.92667C8.83878 9.92667 9.00878 9.85667 9.11878 9.73667C9.23878 9.62667 9.30878 9.45667 9.30878 9.27667L9.30878 2.81667C9.30878 2.63667 9.23878 2.47667 9.11878 2.35667Z M0 22.287C0 22.897 0.25 23.447 0.65 23.847C1.04 24.247 1.59 24.487 2.2 24.487L8.66 24.487C9.27 24.487 9.82 24.247 10.22 23.847C10.62 23.447 10.86 22.897 10.86 22.287L10.86 15.827C10.86 15.217 10.62 14.667 10.22 14.277C9.82 13.877 9.27 13.627 8.66 13.627L2.2 13.627C1.59 13.627 1.04 13.877 0.65 14.277C0.25 14.667 0 15.217 0 15.827L0 22.287Z M2.19878 15.1759C2.01878 15.1759 1.85878 15.2459 1.73878 15.3659C1.61878 15.4859 1.54878 15.6459 1.54878 15.8259L1.54878 22.2859C1.54878 22.4659 1.61878 22.6359 1.73878 22.7459C1.85878 22.8659 2.01878 22.9359 2.19878 22.9359L8.65878 22.9359C8.83878 22.9359 9.00878 22.8659 9.11878 22.7459C9.23878 22.6359 9.30878 22.4659 9.30878 22.2859L9.30878 15.8259C9.30878 15.6459 9.23878 15.4859 9.11878 15.3659C9.00878 15.2459 8.83878 15.1759 8.65878 15.1759L2.19878 15.1759Z M15.4407 24.487L21.9007 24.487C22.5107 24.487 23.0607 24.247 23.4607 23.847C23.8607 23.447 24.1007 22.897 24.1007 22.287L24.1007 15.827C24.1007 15.217 23.8607 14.667 23.4607 14.277C23.0607 13.877 22.5107 13.627 21.9007 13.627L15.4407 13.627C14.8307 13.627 14.2807 13.877 13.8907 14.277C13.4907 14.667 13.2407 15.217 13.2407 15.827L13.2407 22.287C13.2407 22.897 13.4907 23.447 13.8907 23.847C14.2807 24.247 14.8307 24.487 15.4407 24.487Z M22.3596 22.7459C22.4796 22.6359 22.5496 22.4659 22.5496 22.2859L22.5496 15.8259C22.5496 15.6459 22.4796 15.4859 22.3596 15.3659C22.2496 15.2459 22.0796 15.1759 21.8996 15.1759L15.4396 15.1759C15.2596 15.1759 15.0996 15.2459 14.9796 15.3659C14.8596 15.4859 14.7896 15.6459 14.7896 15.8259L14.7896 22.2859C14.7896 22.4659 14.8596 22.6359 14.9796 22.7459C15.0996 22.8659 15.2596 22.9359 15.4396 22.9359L21.8996 22.9359C22.0796 22.9359 22.2496 22.8659 22.3596 22.7459Z M24.1547 4.72L20.2747 0.64C20.0847 0.45 19.8647 0.29 19.6147 0.18C19.3647 0.07 19.0947 0.01 18.8247 0C18.5547 -0.01 18.2747 0.04 18.0247 0.14C17.7747 0.24 17.5347 0.38 17.3447 0.57L13.2647 4.45C13.0647 4.63 12.9147 4.86 12.8047 5.11C12.6947 5.35 12.6347 5.62 12.6247 5.89L12.6247 5.9C12.6147 6.17 12.6647 6.44 12.7647 6.7C12.8547 6.95 13.0047 7.18 13.1947 7.38L17.0747 11.46C17.2547 11.65 17.4847 11.81 17.7247 11.92C17.9747 12.03 18.2447 12.09 18.5247 12.1C18.7947 12.1 19.0647 12.06 19.3147 11.96C19.5747 11.86 19.8047 11.72 20.0047 11.53L24.0747 7.65C24.2747 7.46 24.4347 7.24 24.5447 6.99C24.6547 6.74 24.7147 6.48 24.7147 6.2L24.7147 6.2L24.7147 6.2C24.7247 5.93 24.6747 5.65 24.5847 5.4C24.4847 5.15 24.3347 4.92 24.1547 4.72Z M18.9365 1.69584C18.8865 1.67584 18.8365 1.66584 18.7865 1.66584C18.7265 1.66584 18.6765 1.67584 18.6265 1.69584C18.5765 1.71584 18.5265 1.73584 18.4965 1.77584L18.4965 1.77584L14.4165 5.65584C14.3765 5.69584 14.3465 5.73584 14.3265 5.78584C14.2965 5.83584 14.2865 5.88584 14.2865 5.93584L14.2865 5.93584C14.2865 5.99584 14.2965 6.04584 14.3165 6.09584C14.3365 6.14584 14.3665 6.19584 14.3965 6.22584L14.3965 6.22584L18.2765 10.3058C18.3165 10.3458 18.3565 10.3758 18.4065 10.3958C18.4565 10.4158 18.5065 10.4358 18.5565 10.4358C18.6165 10.4358 18.6665 10.4258 18.7165 10.4058C18.7665 10.3858 18.8165 10.3558 18.8565 10.3258L22.9265 6.44584C22.9665 6.40584 23.0065 6.36584 23.0265 6.31584L23.0265 6.31584C23.0465 6.26584 23.0565 6.21584 23.0565 6.16584L23.0565 6.16584L23.0565 6.15584L23.0565 6.15584C23.0565 6.10584 23.0465 6.05584 23.0265 6.00584L23.0265 6.00584C23.0065 5.95584 22.9865 5.90584 22.9465 5.86584L19.0665 1.79584C19.0265 1.75584 18.9865 1.72584 18.9365 1.69584Z "
|
fill-rule="evenodd" id="分组 1" opacity="1" style="fill:#00ecff"
|
transform="translate(3.6083750000000006 3.7892318074446276) rotate(0 12.359387461427312 12.244743471277683)"/>
|
</g>
|
</g>
|
</svg>
|
</div>
|
<h1>数通设备</h1>
|
</div>
|
<div class="svgMain-bottom">
|
<div class="svgMain-bottom-block">
|
<h1>监控设备</h1>
|
<h2>
|
<countTo
|
ref="shutongCountTo1"
|
:start-val="0"
|
:end-val="tongxun.count"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
<div class="svgMain-bottom-block">
|
<h1>正常设备</h1>
|
<h2>
|
<countTo
|
ref="shutongCountTo2"
|
:start-val="0"
|
:end-val="tongxun.normalCount"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
@click="handleClickTk"
|
class="IndexMoudle-block">
|
<svg
|
class="IndexMoudleSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="360px" height="160px"
|
viewBox="0 0 360 160">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M17.860,16.000 L92.472,16.000 L102.273,6.000 L350.000,6.000 L350.000,140.709 L339.424,154.000 L6.000,154.000 L6.000,28.703 L17.860,16.000 Z"/>
|
<g class="zhuangshi-kuai">
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M92.000,6.000 L100.000,6.000 L91.000,15.000 L83.000,15.000 L92.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M81.000,6.000 L89.000,6.000 L80.000,15.000 L72.000,15.000 L81.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M70.000,6.000 L78.000,6.000 L69.000,15.000 L61.000,15.000 L70.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M59.000,6.000 L67.000,6.000 L58.000,15.000 L50.000,15.000 L59.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M48.000,6.000 L56.000,6.000 L47.000,15.000 L39.000,15.000 L48.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M37.000,6.000 L45.000,6.000 L36.000,15.000 L28.000,15.000 L37.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M26.000,6.000 L34.000,6.000 L25.000,15.000 L17.000,15.000 L26.000,6.000 Z"/>
|
</g>
|
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M153.000,153.000 L339.000,153.000 L349.000,139.000 L349.000,95.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M29.000,17.000 L17.000,17.000 L7.000,30.000 L7.000,41.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M338.000,6.000 L350.000,6.000 L350.000,17.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M17.000,154.000 L6.000,154.000 L6.000,143.000 "/>
|
</svg>
|
<div class="svg-main">
|
<div class="svgMain-top">
|
<div class="svgMain-img">
|
<!--<img src="../../../assets/img/yunIcon.png" alt="">-->
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"
|
viewBox="0 0 32 32" fill="none">
|
<defs>
|
<rect id="path_0" x="0" y="0" width="32" height="32"/>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 16 16)">
|
<mask id="bg-mask-0" fill="white">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path id="路径 1" fill-rule="evenodd" style="fill:#00ecff"
|
transform="translate(7.18671875 12.98984375) rotate(0 8.813281249999998 4.28984375)"
|
opacity="1"
|
d="M9.42,8.21C9.67,8.46 10,8.58 10.33,8.58C10.65,8.58 10.98,8.45 11.23,8.21C11.24,8.2 11.24,8.19 11.24,8.19L17.25,2.18C17.75,1.69 17.75,0.87 17.25,0.37C16.76,-0.12 15.94,-0.12 15.44,0.37L10.33,5.49L6.71,1.87C6.21,1.38 5.39,1.38 4.9,1.87L0.37,6.4C-0.12,6.89 -0.12,7.71 0.37,8.21C0.87,8.7 1.69,8.7 2.18,8.21L5.8,4.59L9.41,8.19C9.41,8.2 9.42,8.2 9.42,8.21Z "/>
|
<path id="分组 1" fill-rule="evenodd" style="fill:#00ecff"
|
transform="translate(1.28125 0.640625) rotate(0 14.720312499999999 15.3609375)" opacity="1"
|
d="M29.44 6.4C29.44 4.28 27.72 2.56 25.6 2.56L23.54 2.56C23.13 1.08 21.77 0 20.16 0L9.28 0C7.67 0 6.31 1.08 5.89 2.56L3.84 2.56C1.72 2.56 0 4.28 0 6.4L0 26.88C0 29 1.72 30.72 3.84 30.72L25.6 30.72C27.72 30.72 29.44 29 29.44 26.88L29.44 6.4Z M8.31875 4.15938C8.31875 4.68937 8.74875 5.11938 9.27875 5.11938L20.1588 5.11938C20.6888 5.11938 21.1188 4.68937 21.1188 4.15938L21.1188 3.51938C21.1188 2.98938 20.6888 2.55938 20.1588 2.55938L9.27875 2.55938C8.74875 2.55938 8.31875 2.98938 8.31875 3.51938L8.31875 4.15938Z M3.83625 28.1588L25.5963 28.1588C26.3062 28.1588 26.8762 27.5887 26.8762 26.8787L26.8762 26.8787L26.8762 6.39875C26.8762 5.69875 26.3062 5.11875 25.5963 5.11875L23.5462 5.11875C23.1262 6.59875 21.7662 7.67875 20.1562 7.67875L9.27625 7.67875C7.66625 7.67875 6.31625 6.58875 5.89625 5.11875L3.83625 5.11875C3.13625 5.11875 2.55625 5.69875 2.55625 6.39875L2.55625 26.8787C2.55625 27.5887 3.13625 28.1588 3.83625 28.1588Z "/>
|
</g>
|
</g>
|
</svg>
|
</div>
|
<h1>运维计划</h1>
|
</div>
|
<div class="svgMain-bottom">
|
<div class="svgMain-bottom-block">
|
<h1>计划总数</h1>
|
<h2>
|
<countTo
|
ref="yunweiCountTo1"
|
:start-val="0"
|
:end-val="yunwei.count"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
<div class="svgMain-bottom-block">
|
<h1>已完成计划</h1>
|
<h2>
|
<countTo
|
ref="yunweiCountTo2"
|
:start-val="0"
|
:end-val="yunwei.normalCount"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
@click="handleClickTk"
|
class="IndexMoudle-block">
|
<svg
|
class="IndexMoudleSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="360px" height="160px"
|
viewBox="0 0 360 160">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M17.860,16.000 L92.472,16.000 L102.273,6.000 L350.000,6.000 L350.000,140.709 L339.424,154.000 L6.000,154.000 L6.000,28.703 L17.860,16.000 Z"/>
|
<g class="zhuangshi-kuai">
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M92.000,6.000 L100.000,6.000 L91.000,15.000 L83.000,15.000 L92.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M81.000,6.000 L89.000,6.000 L80.000,15.000 L72.000,15.000 L81.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M70.000,6.000 L78.000,6.000 L69.000,15.000 L61.000,15.000 L70.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M59.000,6.000 L67.000,6.000 L58.000,15.000 L50.000,15.000 L59.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M48.000,6.000 L56.000,6.000 L47.000,15.000 L39.000,15.000 L48.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M37.000,6.000 L45.000,6.000 L36.000,15.000 L28.000,15.000 L37.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M26.000,6.000 L34.000,6.000 L25.000,15.000 L17.000,15.000 L26.000,6.000 Z"/>
|
</g>
|
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M153.000,153.000 L339.000,153.000 L349.000,139.000 L349.000,95.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M29.000,17.000 L17.000,17.000 L7.000,30.000 L7.000,41.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M338.000,6.000 L350.000,6.000 L350.000,17.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M17.000,154.000 L6.000,154.000 L6.000,143.000 "/>
|
</svg>
|
<div class="svg-main">
|
<div class="svgMain-top">
|
<div class="svgMain-img">
|
<!--<img src="../../../assets/img/yunIcon.png" alt="">-->
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"
|
viewBox="0 0 32 32" fill="none">
|
<defs>
|
<rect id="path_0" x="0" y="0" width="32" height="32"/>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 16 16)">
|
<mask id="bg-mask-0" fill="white">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path id="分组 1" fill-rule="evenodd" style="fill:#00ecff"
|
transform="translate(1.9981302812499995 1.99813028125) rotate(0 13.998200828125 13.998200828125)"
|
opacity="1"
|
d="M24 0L4 0C1.79 0 0 1.79 0 4L0 24C0 26.21 1.79 28 4 28L24 28C26.21 28 28 26.21 28 24L28 4C28 1.79 26.21 0 24 0Z M25.9981 13.0081C25.9981 13.0081 25.9981 13.0081 25.9981 13.0081Z M21.0581 11.6881C21.1681 11.3581 21.4381 11.1081 21.7681 11.0281C22.1081 10.9481 22.4581 11.0481 22.7081 11.2981L24.4181 13.0081L25.9981 13.0081L25.9981 3.99813C25.9981 3.46813 25.7881 2.95813 25.4181 2.58813C25.0381 2.20813 24.5281 1.99813 23.9981 1.99813L4.00813 1.99813C3.46813 1.99813 2.95813 2.20813 2.58813 2.58813C2.20813 2.95813 1.99813 3.46813 1.99813 3.99813L1.99813 13.0081L3.37813 12.9981L7.10813 5.55813C7.28813 5.18813 7.68813 4.96813 8.09813 5.00813C8.50813 5.04813 8.84813 5.32812 8.95813 5.72813L12.1581 16.9181L15.0781 9.62813C15.2181 9.26813 15.5681 9.01813 15.9581 9.00813C16.3581 8.98812 16.7181 9.20813 16.8981 9.55813L19.8181 15.3981L21.0581 11.6881Z M25.9981 15.0053C25.9981 15.0053 25.9981 15.0053 25.9981 15.0053Z M23.9981 25.9953C24.5281 26.0053 25.0381 25.7953 25.4081 25.4153L25.4181 25.4153C25.7881 25.0453 25.9981 24.5353 25.9981 24.0053L25.9981 15.0053L24.0081 15.0053C23.7381 15.0053 23.4881 14.8953 23.2981 14.7153L22.4381 13.8553L20.9481 18.3153C20.8181 18.7053 20.4781 18.9653 20.0681 18.9953C19.6681 19.0253 19.2881 18.8053 19.1081 18.4453L16.0981 12.4353L12.9281 20.3753C12.7781 20.7553 12.4081 21.0053 11.9981 21.0053C11.9881 21.0053 11.9681 21.0053 11.9481 20.9953C11.5281 20.9753 11.1581 20.6853 11.0381 20.2753L7.74813 8.74526L4.89813 14.4453C4.72813 14.7853 4.37813 14.9953 3.99813 14.9953L1.99813 15.0053L1.99813 24.0053C1.99813 24.5353 2.20813 25.0353 2.58813 25.4153C2.96813 25.7953 3.46813 25.9953 4.00813 25.9953L23.9981 25.9953Z "/>
|
</g>
|
</g>
|
</svg>
|
</div>
|
<h1>动环系统</h1>
|
</div>
|
<div class="svgMain-bottom">
|
<div class="svgMain-bottom-block">
|
<h1>ups</h1>
|
<h2>
|
<countTo
|
ref="donghuanCountTo1"
|
:start-val="0"
|
:end-val="up.ups"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
<span>/</span>
|
<countTo
|
ref="donghuanCountTo2"
|
:start-val="0"
|
:end-val="up.ups2"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
<div class="svgMain-bottom-block">
|
<h1>电池组</h1>
|
<h2>
|
<countTo
|
ref="donghuanCountTo3"
|
:start-val="0"
|
:end-val="up.dianchi"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
<span>/</span>
|
<countTo
|
ref="donghuanCountTo4"
|
:start-val="0"
|
:end-val="up.dianchi2"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
@click="handleClickTk"
|
class="IndexMoudle-block">
|
<svg
|
class="IndexMoudleSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="360px" height="160px"
|
viewBox="0 0 360 160">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M17.860,16.000 L92.472,16.000 L102.273,6.000 L350.000,6.000 L350.000,140.709 L339.424,154.000 L6.000,154.000 L6.000,28.703 L17.860,16.000 Z"/>
|
<g class="zhuangshi-kuai">
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M92.000,6.000 L100.000,6.000 L91.000,15.000 L83.000,15.000 L92.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M81.000,6.000 L89.000,6.000 L80.000,15.000 L72.000,15.000 L81.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M70.000,6.000 L78.000,6.000 L69.000,15.000 L61.000,15.000 L70.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M59.000,6.000 L67.000,6.000 L58.000,15.000 L50.000,15.000 L59.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M48.000,6.000 L56.000,6.000 L47.000,15.000 L39.000,15.000 L48.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M37.000,6.000 L45.000,6.000 L36.000,15.000 L28.000,15.000 L37.000,6.000 Z"/>
|
<path fill-rule="evenodd" fill="rgb(0, 236, 255)"
|
d="M26.000,6.000 L34.000,6.000 L25.000,15.000 L17.000,15.000 L26.000,6.000 Z"/>
|
</g>
|
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M153.000,153.000 L339.000,153.000 L349.000,139.000 L349.000,95.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M29.000,17.000 L17.000,17.000 L7.000,30.000 L7.000,41.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M338.000,6.000 L350.000,6.000 L350.000,17.000 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M17.000,154.000 L6.000,154.000 L6.000,143.000 "/>
|
</svg>
|
<div class="svg-main">
|
<div class="svgMain-top">
|
<div class="svgMain-img">
|
<!--<img src="../../../assets/img/yunIcon.png" alt="">-->
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"
|
viewBox="0 0 32 32" fill="none">
|
<defs>
|
<rect id="path_0" x="0" y="0" width="32" height="32"/>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 16 16)">
|
<mask id="bg-mask-0" fill="white">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path id="路径 1" fill-rule="evenodd" style="fill:#00ecff"
|
transform="translate(3.4896 2.7887999999999997) rotate(0 11.514400598879156 13.2352)"
|
opacity="1"
|
d="M21.11,3.57L21.11,13.53C21.11,14.06 21.54,14.49 22.07,14.49C22.6,14.49 23.03,14.06 23.03,13.53L23.03,3.57C23.03,1.6 21.43,0 19.46,0L3.57,0C1.6,0 0,1.6 0,3.57L0,22.9C0,24.87 1.6,26.47 3.57,26.47L19.46,26.47C21.43,26.47 23.03,24.87 23.03,22.9C23.03,22.37 22.6,21.94 22.07,21.94C21.54,21.94 21.11,22.37 21.11,22.9C21.11,23.81 20.37,24.55 19.46,24.55L3.57,24.55C2.66,24.55 1.92,23.81 1.92,22.9L1.92,3.57C1.92,2.66 2.66,1.92 3.57,1.92L19.46,1.92C20.37,1.92 21.11,2.66 21.11,3.57Z "/>
|
<path id="分组 1" fill-rule="evenodd" style="fill:#00ecff"
|
transform="translate(9.0528 6.5168) rotate(0 6.0088 5.2208000000000006)" opacity="1"
|
d="M12.02 7.49L12.02 2.95C12.02 1.32 10.69 0 9.07 0L2.95 0C1.32 0 0 1.32 0 2.95L0 7.49C0 9.12 1.32 10.44 2.95 10.44L9.07 10.44C10.69 10.44 12.02 9.12 12.02 7.49Z M1.92 2.95L1.92 7.49C1.92 8.06 2.38 8.52 2.95 8.52L9.07 8.52C9.63 8.52 10.1 8.06 10.1 7.49L10.1 2.95C10.1 2.38 9.64 1.92 9.07 1.92L2.95 1.92C2.38 1.92 1.92 2.38 1.92 2.95Z "/>
|
<path id="分组 2" fill-rule="evenodd" style="fill:#336BFF"
|
transform="translate(9.054400000000001 18.5312) rotate(0 9.9944 2.475200000000001)"
|
opacity="1"
|
d="M19.99 2.48C19.99 1.11 18.88 0 17.51 0L2.48 0C1.11 0 0 1.11 0 2.48C0 3.84 1.11 4.95 2.48 4.95L17.51 4.95C18.88 4.95 19.99 3.84 19.99 2.48Z M1.92 2.48C1.92 2.78 2.17 3.03 2.48 3.03L17.51 3.03C17.82 3.03 18.07 2.78 18.07 2.48C18.07 2.17 17.82 1.92 17.51 1.92L2.48 1.92C2.17 1.92 1.92 2.17 1.92 2.48Z "/>
|
</g>
|
</g>
|
</svg>
|
</div>
|
<h1>空调</h1>
|
</div>
|
<div class="svgMain-bottom">
|
<div class="svgMain-bottom-block">
|
<h1>ups空调</h1>
|
<h2>
|
<countTo
|
ref="menjinCountTo1"
|
:start-val="0"
|
:end-val="kongtiao.upsKongtiao"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
<span>/</span>
|
<countTo
|
ref="menjinCountTo2"
|
:start-val="0"
|
:end-val="kongtiao.upsKongtiao2"
|
:duration="2500"
|
class="count-number"
|
:autoplay="false"></countTo>
|
</h2>
|
</div>
|
<div class="svgMain-bottom-block">
|
<h1>中心空调</h1>
|
<h2>
|
<countTo
|
ref="menjinCountTo3"
|
:start-val="0"
|
: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>
|
</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<indexMoudleForm ref="indexMoudleForm" v-if="indexMoudleVisiable"></indexMoudleForm>
|
</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";
|
export default {
|
name: "IndexMoudleBlock",
|
components: {
|
countTo,
|
indexMoudleForm
|
},
|
data() {
|
return {
|
indexMoudleVisiable: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.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()
|
})
|
},
|
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();
|
},
|
// countToCallBack() {
|
// this.autoplay = true
|
// },
|
initNum() {
|
this.fuwuqiconfig1 = {
|
number: [3689],
|
style: {
|
fontSize: 32,
|
fill: '#fff',
|
fontFamily:'Myriad Pro'
|
},
|
}
|
this.fuwuqiconfig2 = {
|
number: [3052]
|
}
|
},
|
loading(){
|
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:'-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>
|
|
<style lang="scss">
|
.dv-digital-flop{
|
width: 100%!important;
|
height: auto!important;
|
}
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3,h4,h5{
|
padding:0;
|
margin:0;
|
font-weight: normal;
|
}
|
.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%;
|
}
|
.svg-main{
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
padding: 0.1042rem /* 20/192 */;
|
box-sizing: border-box;
|
.svgMain-top{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
.svgMain-img{
|
width: 0.2396rem /* 46/192 */;
|
height: 0.2396rem /* 46/192 */;
|
img{
|
width: 100%;
|
}
|
}
|
h1{
|
font-size: 0.1042rem /* 20/192 */;
|
color: #1ee3f3;
|
margin-left: 0.15625rem /* 30/192 */;
|
}
|
}
|
.svgMain-bottom{
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
.svgMain-bottom-block{
|
width: 50%;
|
//margin-top: 0.1042rem /* 20/192 */;
|
display: flex;
|
flex-direction: column;
|
}
|
h1{
|
color: #fff;
|
font-size: 0.078125rem /* 15/192 */;
|
text-align: center;
|
}
|
h2{
|
color: #fff;
|
font-size: 0.1458rem /* 28/192 */;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.zhuangshi-kuai{
|
display: flex;
|
}
|
}
|
</style>
|
