master

Branches (1)

Manage

Manage

master

InternetCafe
/
main.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/pintuer.css">
  <link rel="stylesheet" href="css/admin.css">
  <script src="js/jquery.js"></script>
  <script src="js/pintuer.js"></script>
  <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <style>
    .item {
      height: 180px;
      transition: linear 0.2s
    }

    .itemFontTitle {
      font-size: 30px;
      text-align: center;
      line-height: 100px;
      color: #ffffff
    }

    .itemFont {
      font-size: 50px;
      text-align: center;
      color: #ffffff
    }

    .item:hover {
      transform: scale(1.03)
    }
            html {
overflow-x: hidden;
overflow-y: auto;
}
  </style>
</head>

<body>
  <div class="panel admin-panel">
    <!-- <div class="panel-head"><strong class="icon-reorder">首页</strong></div> -->
    <div class="conatiner-layout">
      <div class="line-middle">
        <div class="x4">
          <div class="bg-green item">
            <div class="itemFontTitle">用户总数</div>
            <div class="itemFont" id="usercount">-</div>
          </div>
        </div>
        <div class="x4">
          <div class="bg-blue item">
            <div class="itemFontTitle">总营业额</div>
            <div class="itemFont">￥ 1787</div>
          </div>
        </div>
        <div class="x4">
          <div class="bg-red item">
            <div class="itemFontTitle">电脑总数</div>
            <div class="itemFont" id="computercount">-</div>
          </div>
        </div>
      </div>
      <div id="container"></div>
    </div>

  </div>
</body>
<script>
  var chart = Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '年上网均人数'
    },
    // subtitle: {
    //   text: '请点击按钮查看坐标轴变化'
    // },
    xAxis: {
      categories: ['一月', '二月', '三月', '四月', '五月', '六月',
        '七月', '八月', '九月', '十月', '十一月', '十二月'
      ]
    },
    yAxis: {
      labels: {
        x: -15
      },
      title: {
        text: '人数'
      }
    },
    series: [{
      name: '人数',
      data: [434, 523, 345, 785, 565, 843, 726, 590, 665, 434, 312, 432]
    }],
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        // Make the labels less space demanding on mobile
        chartOptions: {
          xAxis: {
            labels: {
              formatter: function () {
                return this.value.replace('月', '')
              }
            }
          },
          yAxis: {
            labels: {
              align: 'left',
              x: 0,
              y: -2
            },
            title: {
              text: ''
            }
          }
        }
      }]
    }
  });

  function setSize(width) {
    chart.setSize(width, 300);
  }
  window.onload = function(){
     $.ajax({
      url: 'http://localhost:3000/api/user/selectusercount',
      dataType: 'jsonp',
      type: 'get',
      data: {},
      success: function (data) {
        if (data != null) {
          console.log(data)
          document.getElementById("usercount").textContent = data.result
        }
      },
      error: function (err) {
        console.log('err', err)
      }
    })
     $.ajax({
      url: 'http://localhost:3000/api/computer/selectcomputercount',
      dataType: 'jsonp',
      type: 'get',
      data: {},
      success: function (data) {
        if (data != null) {
          console.log(data)
          document.getElementById("computercount").textContent = data.result
        }
      },
      error: function (err) {
        console.log('err', err)
      }
    })
  }
</script>

</html>