Edit D:\xinhaisoft\crisis_new\school\v1.htm

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <title></title>
  <link rel="stylesheet" href="/Scripts/amazeui/css/amazeui.min.css">
  <style>
    body {
      background-color: #DDDBDC;
    }

header {
      position: relative;
    }

h1 {
      text-align: center;
      letter-spacing: 0.5rem;
    }

table {
      width: 100%;
    }

th {
      background-color: #00778D;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      line-height: 1.2rem;
    }

th>span {
      border-left: 1px solid #ADD4DB;
      display: block;
    }

.am-modal-bd>p {
      padding-left: 0;
    }

#time {
      position: absolute;
      right: 0;
      top: 10px;
      width: 250px;
      text-align: right;
    }

.panel {
      background-color: #fff;
      padding: 5px;
    }

.panel h2 {
      font-size: 1.2rem;
      text-align: center;
      margin-bottom: 0.5rem;
      font-weight: normal;
    }

#yuyue th {
      width: 14.28%
    }

#yuyue td {
      vertical-align: top;
    }

.yuyue-item {
      color: #000;
      background-color: #E6F1F3;
      border-radius: 3px;
      height: 30px;
      margin: 5px 2.5px;
      font-size: 12px;
      line-height: 14px;
      padding-left: 3px;
      overflow: hidden;
    }

.yuyue-item--2 {
      background-color: #00778D;
      color: #fff;
    }

.yuyue-item-0 {
      background-color: #9ACBD2;
    }

.yuyue-item-1 {
      background-color: #00778D;
      color: #fff;
    }

.yuyue-item-2 {
      background-color: #D9D9D9;
    }

.yuyue-item-3 {
      background-color: #FFCFA7;
    }

.yuyue-item--1 {
      background-color: #FF8726;
    }

#today-count {
      text-align: center;
    }

#today-count .triangle {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      display: inline-block;
      font-size: 2rem;
      margin-top: -25px;
    }

#today-count h2 {
      margin: 0;
      font-size: 1rem;
      font-weight: normal;
      color: #fff;
      margin-top: -26px;
      padding: 5px 0;
      white-space: nowrap;
      overflow: hidden;
    }

#today-count p {
      background-color: #fff;
      margin: 0;
      padding: 5px 0;
    }

#count td {
      text-align: center;
      padding: 5px 0;
    }
  </style>
</head>

<body>
  <div class="am-g">
    <div class="am-u-sm-12">
      <header>
        <h1></h1>
        <div id="time" class="am-show-md-up"></div>
      </header>
    </div>
    <div class="am-u-sm-12 am-u-md-4">
      <div class="panel" id="yuyue">
        <h2>?????????</h2>
        <table></table>
        <table>
          <tbody>
            <tr>
              <td style="text-align:center;"><span style="color:#50A1B2;">??</span> ???</td>
              <td style="text-align:center;"><span style="color:#9ACBD2;">??</span> ???</td>
              <td style="text-align:center;"><span style="color:#D9D9D9;">??</span> ???</td>
              <td style="text-align:center;"><span style="color:#FFCFA7;">??</span> ???</td>
              <td style="text-align:center;"><span style="color:#FF8726;">??</span> ???</td>
              <td style="text-align:center;"><span style="color:#FE5400;">??</span> ???</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="am-u-sm-12 am-u-md-8">
      <div class="am-g" id="today-count">
        <div class="am-u-sm-4 am-u-md-2">
          <span class="triangle" style="color:#FD8727;">??</span>
          <h2 style="background-color:#FD8727;">???????????</h2>
          <p></p>
        </div>
        <div class="am-u-sm-4 am-u-md-2">
          <span class="triangle" style="color:#FFCFA7;">??</span>
          <h2 style="background-color:#FFCFA7;">?????????</h2>
          <p></p>
        </div>
        <div class="am-u-sm-4 am-u-md-2">
          <span class="triangle" style="color:#D9D9D9;">??</span>
          <h2 style="background-color:#D9D9D9;">?????????</h2>
          <p></p>
        </div>
        <div class="am-u-sm-4 am-u-md-2">
          <span class="triangle" style="color:#9ACBD2;">??</span>
          <h2 style="background-color:#9ACBD2;">?????????</h2>
          <p></p>
        </div>
        <div class="am-u-sm-4 am-u-md-2">
          <span class="triangle" style="color:#067A91;">??</span>
          <h2 style="background-color:#067A91;">??????</h2>
          <p></p>
        </div>
        <div class="am-u-sm-4 am-u-md-2">
          <span class="triangle" style="color:#FD8727;">??</span>
          <h2 style="background-color:#FD8727;">?????????</h2>
          <p></p>
        </div>
      </div>
      <table id="count" style="margin-top:20px;">
        <thead>
          <tr>
            <th>??????</th>
            <th><span>??????</span></th>
            <th><span>???????</span></th>
            <th><span>??????</span></th>
            <th><span>?????????</span></th>
            <th><span>?????????</span></th>
            <th><span>??????</span></th>
            <th><span>???????</span></th>
            <th><span>??????</span></th>
            <th><span>??????</span></th>
          </tr>
        </thead>
        <tbody>
          <tr style="background-color:#fff;">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div class="am-g" style="margin-top:20px;">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="panel">
            <h2>?????????</h2>
            <div id="test-normal" style="height:178px;"></div>
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-6">
          <div class="panel">
            <h2>?????????</h2>
            <div id="zixun-count" style="height:178px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="am-g" style="margin-top:20px;">
    <div class="am-u-sm-12 am-u-md-5">
      <div class="panel">
        <div class="am-g">
          <div class="am-u-sm-12 am-u-md-6">
            <h2>????????????</h2>
            <div id="pinggu" style="height:180px;"></div>
          </div>
          <div class="am-u-sm-12 am-u-md-6">
            <h2>???????????????</h2>
            <div id="zhuizong" style="height:180px;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="am-u-sm-12 am-u-md-7">
      <div class="panel">
        <h2>???????????????????????????</h2>
        <div class="am-g">
          <div class="am-u-sm-12 am-u-md-8">
            <div id="crisis-bar" style="height:180px;"></div>
          </div>
          <div class="am-u-sm-12 am-u-md-4">
            <div id="crisis-pie" style="height:180px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="am-modal am-modal-no-btn" id="modal-msg">
    <div class="am-modal-dialog">
      <div class="am-modal-bd">
        <p></p>
      </div>
    </div>
  </div>
  <div class="am-modal am-modal-prompt" id="modal-prompt">
    <div class="am-modal-dialog">
      <div class="am-modal-bd">
        ????????????
        <input type="number" class="am-modal-prompt-input">
      </div>
      <div class="am-modal-footer">
        <button type="button" class="am-btn am-modal-btn am-btn-primary" data-am-modal-confirm>???</button>
      </div>
    </div>
  </div>
  <script src="/Scripts/jquery.min.js"></script>
  <script src="/Scripts/dayjs/dayjs.min.js"></script>
  <script src="/Scripts/dayjs/locale/zh-cn.js"></script>
  <script src="/Scripts/md5.min.js"></script>
  <script src="/Scripts/echarts/echarts.min.js"></script>
  <script src="/Scripts/amazeui/js/amazeui.min.js"></script>
  <script src="/Scripts/getquerystring.js"></script>
  <script src="/Scripts/global.js"></script>
  <script>
    $(function () {
      // ????????1280*720
      dayjs.locale('zh-cn')
      var today = dayjs()
      var i, j

// school???????????????????????
      var school = GetQueryString('school') || window.location.href.split('/')[4]
      if (!/^\d{6,}$/.test(school)) { mymsg('??????(School)???????????') }
      else {
        // ?????????
        $.getJSON(Global.Host + '/school/' + school + '/setting', function (json) {
          if (json.code === 0) {
            // $('title,h1').text('????????????')
            // show()
            if (json.data.password === null || json.data.password === 'd41d8cd98f00b204e9800998ecf8427e') { mymsg('??????????????????') }
            else {
              $('#modal-prompt').modal({
                relatedTarget: this,
                closeViaDimmer: 0,
                closeOnConfirm: false,
                onConfirm: function (e) {
                  if (e.data && md5(e.data) === json.data.password) {
                    $('#modal-prompt').modal('close')
                    $('title,h1').text(json.data.title)
                    show()
                  } else {
                    $('#modal-prompt').find('input').css('border-color', 'red').trigger('focus')
                  }
                }
              })
            }
          }
        })
      }

// ???????
      function show() {
        // ?????????
        $('#time').text(dayjs().format('YYYY/MM/DD dddd HH:mm'))
        setInterval(function () { $('#time').text(dayjs().format('YYYY/MM/DD dddd HH:mm')) }, 1000 * 30)

// ????????
        yuyue()
        setInterval(yuyue, 1000 * 60 * 10)

// ?????????
        getToday()
        setInterval(getToday, 1000 * 60 * 15)

// ??????
        $.getJSON(Global.Host + '/school/' + school + '/summary-count', { act: '0,1,2,3,4,5,6,7,8,14' }, function (json) {
          if (json.code === 0) {
            var $td = $('#count').find('td')
            $td.eq(0).text(json.data[0] + '??')
            $td.eq(1).text(json.data[8] + '??')
            $td.eq(2).text(json.data[1] + '??')
            $td.eq(3).text(json.data[2] + '??')
            $td.eq(4).text(json.data[3] + '??')
            $td.eq(5).text(json.data[4] + '??')
            $td.eq(6).text(json.data[5] + '??')
            $td.eq(7).text(json.data[6] + '??')
            $td.eq(8).text(json.data[7] + '??')
            $td.eq(9).text(json.data[14] + '??')
          }
        })

// ?????????
        $.getJSON(Global.Host + '/school/' + school + '/data-visualization-stat', { act: 4 }, function (json) {
          if (json.code === 0) {
            var list = json.data
            var x = []
            var v1 = []
            var v2 = []
            for (i = 0; i < list.length; i++) {
              x.push(list[i].name)
              v1.push(list[i].normal[0])
              v2.push(list[i].normal[1])
            }
            echarts.init(document.getElementById('test-normal')).setOption({
              grid: { left: 10, right: 60, bottom: 5, top: 10, containLabel: true },
              xAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { interval: 0 }, data: x },
              yAxis: { axisLine: { show: false }, axisTick: { show: false }, minInterval: 1 },
              legend: { data: ['???', '???'], orient: 'vertical', right: 0, top: 'center', icon: 'circle', selectedMode: false },
              color: ['#00778D', '#FF8A28'],
              series: [
                { name: '???', type: 'bar', stack: '???', data: v1 },
                { name: '???', type: 'bar', stack: '???', data: v2 }
              ]
            })
          }
        })

// ?????????
        $.getJSON(Global.Host + '/school/' + school + '/data-visualization-stat', { act: 1 }, function (json) {
          if (json.code === 0) {
            var year = today.year()
            echarts.init(document.getElementById('zixun-count')).setOption({
              grid: { left: 10, right: 10, bottom: 30, top: 10, containLabel: true },
              xAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { interval: 0 }, data: ['1??', '2??', '3??', '4??', '5??', '6??', '7??', '8??', '9??', '10??', '11??', '12??'] },
              yAxis: { axisLine: { show: false }, axisTick: { show: false }, minInterval: 1 },
              legend: { data: [(year - 1) + '??', year + '??'], right: 5, top: 'bottom', icon: 'circle', selectedMode: false },
              color: ['#00778D', '#FF8A28'],
              series: [{
                name: (year - 1) + '??',
                type: 'line',
                data: json.data.lastyear
              }, {
                name: year + '??',
                type: 'line',
                data: json.data.thisyear
              }]
            })
          }
        })

// ????????????
        $.getJSON(Global.Host + '/school/' + school + '/data-visualization-stat', { act: 2 }, function (json) {
          if (json.code === 0) {
            echarts.init(document.getElementById('pinggu')).setOption({
              color: ['#EDEBEC', '#D9D9D9', '#CAC8C9', '#FFCFA7', '#FFB16F', '#FDA448', '#FF8726'],
              series: {
                type: 'pie',
                label: { formatter: '{b} ({d}%)' },
                silent: true,
                data: json.data
              }
            })
          }
        })

// ???????????????
        $.getJSON(Global.Host + '/school/' + school + '/data-visualization-stat', { act: 3 }, function (json) {
          if (json.code === 0) {
            echarts.init(document.getElementById('zhuizong')).setOption({
              color: ['#067A91', '#5AA8B2', '#9ACBD2', '#D9D9D9'],
              series: {
                type: 'pie',
                label: { formatter: '{b} ({d}%)' },
                silent: true,
                data: json.data
              }
            })
          }
        })

// ????????121??111??risis_evaluate??160
        var start = (today.year() - 1) + '-1-1'
        $.when(
          $.getJSON(Global.Host + '/stat', { act: 5, lb: 121, type: school, start: start }),
          $.getJSON(Global.Host + '/stat', { act: 5, lb: 111, type: school, start: start }),
          $.getJSON(Global.Host + '/stat', { act: 8, type: school, start: start }),
          $.getJSON(Global.Host + '/stat', { act: 5, lb: 160, type: school, start: start })
        ).done(function (json1, json2, json3, json4) {
          var d1 = json1[0].data
          var d2 = json2[0].data
          var d3 = json3[0].data
          var d4 = json4[0].data
          var x1 = ['??????', '??????', '??????', '??????']
          var x2 = ['???', '???', '???', '???', '???']
          // ????????
          echarts.init(document.getElementById('crisis-bar')).setOption({
            grid: { left: 10, right: 10, bottom: 30, top: 10, containLabel: true },
            xAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { interval: 0 }, data: x1 },
            yAxis: { axisLine: { show: false }, axisTick: { show: false }, minInterval: 1 },
            legend: { data: x2, right: 5, top: 'bottom', icon: 'circle', selectedMode: false },
            color: ['#067A91', '#9ACBD2', '#D9D9D9', '#FFCFA7', '#FF8726'],
            series: [
              { name: x2[0], type: 'bar', data: [d1[0], d2[0], d3[0], d4[0]] },
              { name: x2[1], type: 'bar', data: [d1[1], d2[1], d3[1], d4[1]] },
              { name: x2[2], type: 'bar', data: [d1[2], d2[2], d3[2], d4[2]] },
              { name: x2[3], type: 'bar', data: [d1[3], d2[3], d3[3], d4[3]] },
              { name: x2[4], type: 'bar', data: [d1[4], d2[4], d3[4], d4[4]] }
            ]
          })
          // ??????
          var v = []
          for (i = 0; i < 5; i++) { v.push({ name: x2[i], value: d1[i] + d2[i] + d3[i] + d4[i] }) }
          echarts.init(document.getElementById('crisis-pie')).setOption({
            color: ['#067A91', '#9ACBD2', '#D9D9D9', '#FFCFA7', '#FF8726'],
            series: {
              type: 'pie',
              label: { formatter: '{b} ({d}%)' },
              silent: true,
              roseType: 'radius',
              radius: [30, '75%'],
              data: v
            }
          })
        })
      }

// ????????
      function yuyue() {
        var tb = '<thead><tr>'
        for (i = 0; i < 7; i++) {
          var thedate = today.add(i, 'day')
          tb += '<th>'
          if (i === 0) { tb += thedate.format('ddd<br>MM/DD') }
          else { tb += '<span>' + thedate.format('ddd<br>MM/DD') + '</span>' }
          tb += '</th>'
        }
        tb += '</thead><tbody><tr>'
        $.getJSON(Global.Host + '/school/' + school + '/data-visualization-yuyue', function (json) {
          if (json.code === 0) {
            var list = json.data
            for (i = 0; i < 7; i++) {
              var n = 0
              var thedate = today.add(i, 'day').format('YYYY-MM-DD')
              tb += '<td>'
              for (j = 0; j < list.length; j++) {
                var item = list[j]
                if (item.thedate === thedate) {
                  n++
                  // tb += '<div class="yuyue-item yuyue-item-' + item.status + '" title="' + item.status + '">' + item.thetime + '<br>' + item.counsellorname + '</div>'
                  tb += '<div class="yuyue-item yuyue-item-' + item.status + '">' + (item.thetime ? item.thetime.substring(0, 5) : '') + '<br>' + item.counsellorname + '</div>'
                }
                if (n === 8) { break }
              }
              for (j = 0; j < 8 - n; j++) {
                tb += '<div class="yuyue-item"></div>'
              }
              tb += '</td>'
            }
          }
          else { tb += '<td colspan="7">' + json.message + '</td>' }
          tb += '</tr></tbody>'
          $('#yuyue').find('table').first().html(tb)
        })
      }

// ?????????
      function getToday() {
        $.getJSON(Global.Host + '/school/' + school + '/summary-count', { t1: today.format('YYYY-MM-DD'), act: '7,8,9,11,12,13' }, function (json) {
          if (json.code === 0) {
            var $p = $('#today-count').find('p')
            $p.eq(0).text(json.data[11] + '??')
            $p.eq(1).text(json.data[12] + '??')
            $p.eq(2).text(json.data[8] + '??')
            $p.eq(3).text(json.data[9] + '??')
            $p.eq(4).text(json.data[13] + '??')
            $p.eq(5).text(json.data[7] + '??')
          }
        })
      }

// ?????????????????
      function mymsg(s) { $('#modal-msg').find('p').html(s).end().modal({ closeViaDimmer: 0 }) }
    })
  </script>
</body>

</html>

Ms-Dos/Windows Unix Write backup

jsp File Browser version 1.2 by www.vonloesch.de