master

分支 (1)

管理

管理

master

SWAT
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长三角中小流域环境综合治理示范系统</title>
    <script src="libs/leaflet/leaflet-src.js"></script>
    <script src="libs/leaflet/leaflet.ajax.js"></script>
    <script src="libs/leaflet/leaflet-raw-dem.js"></script>
    <script src="libs/leaflet/leaflet.hotline.js"></script>
    <script src="libs/leaflet-icon/L.Icon.Pulse.js"></script>
    <script src="libs/leaflet/esri2geo.js"></script>
    <script src="libs/jquery-3.4.1.min.js"></script>
    <script src="libs/echarts.min.js"></script>
    <script src="libs/layui/layui.js"></script>
    <script src="libs/timePlay/timePlay.js"></script>
    <script src="js/map.js"></script>
    <script src="js/buildChart.js"></script>
    <script src="js/shine.js"></script>
    <link rel="stylesheet" href="libs/leaflet/leaflet.css"/>
    <link rel="stylesheet" href="libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="libs/timePlay/timePlay.css" />
    <link rel="stylesheet" href="libs/leaflet-icon/L.Icon.Pulse.css" />
    <link rel="stylesheet" href="css/main.css"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-size: 87.5%;
            overflow: hidden;
        }
		#rightPanel .header {
			height: 50px;
		}
		#rightPanel #aside_close_btn {
			top: 6px;
		}
		#rightPanel .header div {
			padding: 0;
		}
		.chartPanel {
			margin: 0;
			overflow-x: hidden;
		}
		.layui-tab-content {
			padding: 0px;
		}
        .leaflet-interactive {
            background: #FFFFFF00;
            border: 0;
        }
    </style>
</head>
<body>
<div id="mapPanel">
    <div id="timePlay"></div>
</div>
<div id="rightPanel">
    <div class="header">
        <div><h1 class="title"></h1></div>
        <span id="aside_close_btn" onclick="showChart(false)"><span class="aside_close_btn_ico"></span></span>
    </div>
    <div class="chartPanel">


		<div class="layui-tab">
		  <ul class="layui-tab-title">
			<li class="layui-this">水质</li>
			<li>流量</li>
		  </ul>
		  <div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<div class="layui-row">
					<div id="chart3" style="width: 580px;height:300px;"></div>
				</div>
				<div class="layui-row">
					<div id="chart4" style="width: 580px;height:300px;"></div>
                </div>
                <div id="layerDemo" style="position:absolute; top:70px; right:40px;">
                    <button id="vie" data-method="offset" data-type="rb" type="button"
                        class="layui-btn layui-btn-normal layui-btn-sm">总体效果</button>
                </div>
			</div>
			<div class="layui-tab-item">
				<div class="layui-row">
					<div id="chart1" style="width: 580px;height:300px;"></div>
				</div>
				<div class="layui-row">
					<div id="chart2" style="width: 580px;height:300px;"></div>
				</div>
			</div>
		  </div>
		</div>

    </div>
</div>

<div class="logo"></div>

<div class="legend">
    <div class="layui-row">
        <h1>图例</h1>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <span style="background-color: #240fe0"></span>
            <p>Ⅰ类</p>
        </div>
        <div class="layui-col-md6">
            <span style="background-color: #5976fa"></span>
            <p>Ⅱ类</p>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <span style="background-color: #f5e612"></span>
            <p>Ⅲ类</p>
        </div>
        <div class="layui-col-md6">
            <span style="background-color: #ee7b38"></span>
            <p>Ⅳ类</p>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <span style="background-color: #f2000a"></span>
            <p>Ⅴ类</p>
        </div>
        <div class="layui-col-md6">
            <span style="background-color: #6f0c8d"></span>
            <p>劣Ⅴ类</p>
        </div>
    </div>

</div>
</body>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
});

layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

  //触发事件
  var active = {
    offset: function(othis){
      var type = othis.data('type')
      ,text = othis.text();

      layer.open({
        type: 1,
        area: ['600px', '328px']
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div style="padding: 5px;"><img width="100%" src="'+ taburl +'" /></div>'
        ,shade: 0 //不显示遮罩
        ,title: "总体效果"
        ,yes: function(){
          layer.closeAll();
        }
      });
    }
  };

  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });

});
</script>

</html>