##主界面
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>

    <link href="../static/css/Datacages_Homeindex.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/ProgressBarWars.css" rel="stylesheet" />
    <style type="static/text/css">
      * {
        padding: 0;
        margin: 0;
      }

      .loadEffect {
        width: 100px;
        height: 100px;
        position: relative;
        margin: 0 auto;
        top: 26%;
      }

      .loadEffect span {
        animation: load 1.04s ease infinite;
        display: inline-block;
        width: 30px;
        height: 10px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        background: lightgreen;
        position: absolute;
      }

      .loadEffect span:nth-child(1) {
        left: 0;
        top: 50%;
        margin-top: -5px;
        animation-delay: 0.13s;
      }

      .loadEffect span:nth-child(2) {
        left: 10px;
        top: 20px;
        transform: rotate(45deg);
        animation-delay: 0.26s;
      }

      .loadEffect span:nth-child(3) {
        left: 50%;
        top: 10px;
        margin-left: -15px;
        transform: rotate(90deg);
        animation-delay: 0.39s;
      }

      .loadEffect span:nth-child(4) {
        top: 20px;
        right: 10px;
        transform: rotate(135deg);
        animation-delay: 0.52s;
      }

      .loadEffect span:nth-child(5) {
        right: 0;
        top: 50%;
        margin-top: -5px;
        transform: rotate(180deg);
        animation-delay: 0.65s;
      }

      .loadEffect span:nth-child(6) {
        right: 10px;
        bottom: 20px;
        transform: rotate(225deg);
        animation-delay: 0.78s;
      }

      .loadEffect span:nth-child(7) {
        bottom: 10px;
        left: 50%;
        margin-left: -15px;
        transform: rotate(270deg);
        animation-delay: 0.91s;
      }

      .loadEffect span:nth-child(8) {
        bottom: 20px;
        left: 10px;
        transform: rotate(315deg);
        animation-delay: 1.04s;
      }

      @keyframes load {
        0% {
          opacity: 1;
        }

        100% {
          opacity: 0.2;
        }
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      #loading {
        background-color: #181e20;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
      }
    </style>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/echarts-all.js"></script>
    <script src="../static/js/ProgressBarWars.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .progress {
        margin-top: 30px;
      }

      .down_span {
        color: #dfdede;
        font-size: 12px;
        font-weight: lighter;
      }

      h3,
      ul,
      li {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .scrollbox {
        width: 268px;
        margin: 0 auto;
      }

      #scrollDiv {
        width: 268px;
        height: 280px;
        overflow: hidden;
      }

      /*这里的高度和超出隐藏是必须的*/
      #scrollDiv ul li {
        height: 66px;
        width: 259px;
        background-color: #07325e;
        overflow: hidden;
        margin-bottom: 4px;
        color: #dfdede;
        font-size: 14px;
        padding: 0 9px 0 9px;
        line-height: 30px;
        position: relative;
      }

      #scrollDiv ul li span {
        position: absolute;
        bottom: 5px;
        right: 16px;
        display: block;
        width: 68px;
        height: 18px;
        text-align: center;
        color: #081e49;
        background-color: #69c200;
        line-height: 18px;
      }

      .sent-div {
        width: 98%;
        height: 98%;
        margin: 0 auto;
      }
    </style>
    <title>网络运维实时检测平台</title>
    <div id="loading">
      <div class="loadEffect">
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span>
      </div>
    </div>
    <!--标题栏-->
    <div class="Hometitlebox">
      <a style="color: #00e4ff" href="">网络运维实时检测平台</a>
    </div>
    
    <!--动效显示-->
    <div class="flasheffectoutbox">
      <div style="width: 1000px; height: 500px; position: relative">
        <div class="line2 line"></div>
        <div class="line3 line"></div>
        <div class="line4 line"></div>
        <div class="line5 line"></div>
        <div class="line6 line"></div>
        <!--主动效-->
        <div class="maineffectoutbox circleeffectclass">
          <a href=""><img
              class="effectposition maindataeffect"
              src="../static/img/maindataeffect.png"
            />
            <div
              class="effectposition acrossremindeffectout"
              style="width: 76px; height: 76px; margin: 9px"
            >
              <div
                class="acrossremindeffectin"
                style="width: 68px; height: 68px; margin: 4px"
              ></div>
            </div>
            <img
              class="effectposition maindataspecialeffect"
              src="../static/img/maindataspecialeffect.png"
            /><img
              class="effectposition acrossremindeffecindex"
              src="../static/img/maindataicon.png"
            /><span class="stagetitle">Nginx反向代理服务器</span>
          </a>
        </div>
        <!--卫星动效-->
        <div
          class="circleeffectclass aroundfunctioneffect"
          style="left: 254px; top: 135px"
        >
          <img
            class="effectposition arounddataeffect02"
            src="../static/img/aroundeffect.png"
          />
          <div
            class="
              effectposition
              acrossremindeffectout
              acrossremindeffectoutard
            "
          >
            <div class="acrossremindeffectin acrossremindeffectinard"></div>
          </div>
          <img
            class="effectposition acrossremindeffecindex"
            src="../static/img/xingzhengshenpi.png"
          /><span class="stagetitle stagearoundtitle">静态资源服务器</span>
        </div>
        <div
          class="circleeffectclass aroundfunctioneffect"
          style="left: 190px; bottom: 89px"
        >
          <img
            class="effectposition arounddataeffect01"
            src="../static/img/aroundeffect.png"
          />
          <div
            class="
              effectposition
              acrossremindeffectout
              acrossremindeffectoutard
            "
          >
            <div class="acrossremindeffectin acrossremindeffectinard"></div>
          </div>
          <img
            class="effectposition acrossremindeffecindex"
            src="../static/img/baixingpaiAPP.png"
          /><span class="stagetitle stagearoundtitle">MYSQL数据库</span>
        </div>
        <div
          class="circleeffectclass aroundfunctioneffect"
          style="right: 405px; bottom: 53px"
        >
          <img
            class="effectposition arounddataeffect02"
            src="../static/img/aroundeffect.png"
          />
          <div
            class="
              effectposition
              acrossremindeffectout
              acrossremindeffectoutard
            "
          >
            <div class="acrossremindeffectin acrossremindeffectinard"></div>
          </div>
          <img
            class="effectposition acrossremindeffecindex"
            src="../static/img/zhatuyunshu.png"
          /><span class="stagetitle stagearoundtitle">WEB服务器</span>
        </div>
        <div
          class="circleeffectclass aroundfunctioneffect"
          style="right: 243px; bottom: 165px"
        >
          <img
            class="effectposition arounddataeffect01"
            src="../static/img/aroundeffect.png"
          />
          <div
            class="
              effectposition
              acrossremindeffectout
              acrossremindeffectoutard
            "
          >
            <div class="acrossremindeffectin acrossremindeffectinard"></div>
          </div>
          <img
            class="effectposition acrossremindeffecindex"
            src="../static/img/12319rexian.png"
          /><span class="stagetitle stagearoundtitle">业务服务器1</span>
        </div>
        <div
          class="circleeffectclass aroundfunctioneffect"
          style="right: 294px; top: 79px"
        >
          <img
            class="effectposition arounddataeffect03"
            src="../static/img/aroundeffect.png"
          />
          <div
            class="
              effectposition
              acrossremindeffectout
              acrossremindeffectoutard
            "
          >
            <div class="acrossremindeffectin acrossremindeffectinard"></div>
          </div>
          <img
            class="effectposition acrossremindeffecindex"
            src="../static/img/zonghezhifa.png"
          /><span class="stagetitle stagearoundtitle">业务服务器2</span>
        </div>



      </div>
    
    </div>
    <!--弹出功能-->
    <div class="popuofunxtionbox">
      <!--标题-->
      <div class="popupboxtitlebox">
        <span class="popupboxtitlemsg">xxxx审批系统数据分析</span>
        <div class="popupboxclose"></div>
      </div>
    </div>
    <!--侧边浮窗-->
    <div class="fltoutbox leftbox">
      <div style="height: 65px; padding-top: 25px">
        <span class="analyzedatashowtitle">【服务器CPU占用率】</span>
      </div>
      <!--左上分析内容放置框-->
      <div class="analyzemsgbgbox" style="margin-left: 2px">
        <div class="sent-div" id="container1"></div>
      </div>
      <!--左下分析内容放置框-->
      <div
        class="analyzemsgbgbox"
        style="margin-top: 20px; height: 350px; overflow: hidden"
      >
        <span
          class="analyzedatashowtitle"
          style="line-height: 66px; margin-left: 38px"
          >【服务器磁盘空间占比】</span
        >
        <div class="scrollbox">
          <div id="scrollDiv">

          </div>
          <script type="static/text/javascript">
            $('#scrollDiv').Scroll({
              line: 1,
              speed: 500,
              timer: 5000,
              up: 'but_up',
              down: 'but_down'
            })
          </script>
        </div>
      </div>
      <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
      <div class="fltdecarround fltdecarroundtop fltdecarroundright"></div>
      <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
      <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
    </div>
    <div class="fltoutbox rightbox">
      <div style="height: 36px; padding-top: 25px">
        <span class="analyzedatashowtitle">【服务器内存运行载荷】</span>
      </div>
      <!--右上分析内容放置框-->
      <div
        class="analyzemsgbgbox"
        style="margin-right: 2px; padding-bottom: 29px"
      >

        <div style="background-color: #022542; opacity: 0.9; height: 300px">


  <div class="analyzemsgbgbox" >
        <div class="sent-div" id="container2"></div>
      </div>

        </div>

        <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
        <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
      </div>
      <!--右下分析内容放置框-->
      <div class="analyzemsgbgbox" style="margin-top: 20px; height: 400px">
        <span class="analyzedatashowtitle">【服务器宽带速率】</span>



   <div class="analyzemsgbgbox" style=" height: 360px">
        <div class="sent-div" id="container3"></div>
      </div>




        </div>
        <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
        <div class="fltdecarround fltdecarroundtop fltdecarroundright"></div>
        <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
        <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
      </div>
    </div>
    <!--版权-->
   <script>
      var salesMyChart0 = echarts.init($('#container1')[0])
      option = {
        tooltip: {
          trigger: 'item'

        },
      series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 500, name: '未用CPU' },
        { value: 500, name: '已用CPU' }
      ]
    }
  ]
      }
      salesMyChart0.setOption(option)
    </script>
    <script>
      var scrollDivs1 = echarts.init($('#scrollDiv')[0])
      option = {
        tooltip: {
          trigger: 'item'

        },
       series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '未用磁盘' },
        { value: 735, name: '已用磁盘' },

      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
      }
      scrollDivs1.setOption(option)
    </script>
<script>
      var salesMyChart2 = echarts.init($('#container2')[0])
      option = {
        tooltip: {
          trigger: 'item'

        },
      series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 484, name: '未用内存' },
        { value: 300, name: '已用内存' }
      ]
    }
  ]
      }
      salesMyChart2.setOption(option)
    </script>
<script>
      var salesMyChart3 = echarts.init($('#container3')[0])
      option = {
        tooltip: {
          trigger: 'item'

        },
   series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start and end angle
      startAngle: 180,
      endAngle: 360,
      data: [
        { value: 20, name: '上行' },
        { value: 50, name: '下行' },

      ]
    }
  ]
      }
      salesMyChart3.setOption(option)
    </script>
  <script>
// 轮询间隔（毫秒），例如每5秒轮询一次
var pollingInterval = 3000;

// 轮询函数
function pollData() {
    $.ajax({
        url: '../api_msg', // 替换为你的服务器端点
        type: 'GET', // 或者 'POST', 'PUT', 'DELETE' 等
        dataType: 'json', // 预期服务器返回的数据类型
        success: function(data) {
    scrollDivs1.setOption({
        series: [{
            data: data.disk
        }]
    });
        salesMyChart3.setOption({
        series: [{
            data: data.kuandai
        }]
    });
    salesMyChart2.setOption({
        series: [{
            data: data.neicun
        }]
    });

    salesMyChart0.setOption({
        series: [{
            data: data.cpu
        }]
    });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 处理请求失败的情况
            console.error('AJAX error:', textStatus, errorThrown);
        },
        complete: function() {
            // 如果需要，可以在这里执行一些完成后的操作
        }
    });
}

// 开始轮询
var intervalId = setInterval(pollData, pollingInterval);

  </script>
  </body>
</html>
