siwei
/
visualization


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta http-equiv="Cache-Control" content="max-age=864000000000">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta http-equiv="expires" content="0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/layui.css" media="all">
    <link rel="stylesheet" href="./css/degradationStatistics.css" media="all">
</head>

<body onresize="windowResizeFun()">
    <div class="loading">
        <img src="./font/loading.gif" style=" width: 220px; height: 150px;opacity: 0.85;" />
    </div> 
    <div class="time_line_box">
        <div class="time_line" style="width:100%;">
            <ol>
                
            </ol>
        </div>
    </div>
    <div class="topLeft borderStyle" style="height: 45% !important;">
        <div class="containerClass" style="margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px);position: absolute;"></div> 
        <div id="container" style="width: 100%;height: 95%;"></div>
        <div class="XZQDiv">
            行政区域：<span class="layui-breadcrumb" lay-separator=">">
                <a class='xzqBtn' value='' type='1'>山西省</a>
            </span>
            <div id="yearSlide">
                当前：<span class="yearSpan"></span><div id="yearSlideContainer" class="demo-slider"></div>
            </div>
        </div>
        <div class="XZQSM">
            *说明：主要从耕地数据的水土流失、土地干旱、土地侵蚀程度、盐渍化程度、土壤有机质含量5个指标进行变化情况分析。
        </div>
    </div>
    <!-- <div class="bottomLeft borderStyle" id="myChart2" style="height: 45% !important;">
        <div style="" class="titleClass"><img class="titleImage" src="./font/query.png" />土地退化指标面积变化趋势图</div>
        <div class="containerClass" id="mychartDegradationTrends" style=" width: calc(100% - 20px); height: calc(100% - 45px);margin-top: -10px;margin-left: 10px;"></div>
    </div> -->

    <div class="bottomLeft borderStyle" id="myChart3" style="height: 45% !important;">
        <div style="" class="titleClass1"><img class="titleImage" src="./font/statistics.png" style="margin-left: 10px;"/>土地退化指标面积变化趋势图</div>
        <div class="containerClass" id="mychartDegradationTrends" style=" width: calc(100% - 20px); height: calc(100% - 45px);"></div>
    </div>
    <div class="bottomRight borderStyle" id="myChart3" style="width: 27.5%;height: 55% !important; top: 45%;padding-left: 10px;left:0px;">
        <div style="" class="titleClass1"><img class="titleImage" src="./font/statistics.png" style="margin-left: 10px;"/>土壤侵蚀程度统计分析</div>
        <div class="containerClass" id="mychartDegreeErosion" style=" width: calc(100% - 20px); height: calc(100% - 45px);"></div>
    </div>
    <div class="bottomRight borderStyle" id="myChart3" style="width: 27.5%;height: 55% !important; top: 45%;padding-left: 10px;left:27.1%;">
        <div style="" class="titleClass1"><img class="titleImage" src="./font/statistics.png" style="margin-left: 10px;"/>土壤盐渍化程度统计分析</div>
        <div class="containerClass" id="mychartDegreeSalinization" style=" width: calc(100% - 20px); height: calc(100% - 45px);"></div>
    </div>
    <div class="bottomRight borderStyle" id="myChart3" style="width: 45%;height: 55% !important; top: 45%;padding-left: 10px;right:0%;">
        <div style="" class="titleClass1"><img class="titleImage" src="./font/statistics.png" style="margin-left: 10px;"/>土壤有机质含量统计分析</div>
        <div class="containerClass" id="mychartsOrganicMatter" style=" width: calc(100% - 20px); height: calc(100% - 45px);"></div>
    </div>

    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/layui.js"></script>
    <!-- <script src="/scripts/BaseP/User/userinfo.js"></script> -->
    <script src="./js/config.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/degradationStatistics.js"></script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <span class="querySpan">筛选条件：</span>
            <input type="text" autocomplete="off" placeholder="行政区名称" field="XZQ" class="queryInput layui-input">
            <input type="text" autocomplete="off" placeholder="项目名称" field="XMMC" class="queryInput layui-input">
            <input type="text" autocomplete="off" placeholder="批准文号" field="PZWH" class="queryInput layui-input">
            <input type="text" autocomplete="off" placeholder="合同编号" field="HTBH" class="queryInput layui-input">
            <input type="text" autocomplete="off" placeholder="受让人" field="SRR" class="queryInput layui-input">
            <button class="layui-btn layui-btn-sm" lay-event="queryData">查询</button>
        </div>
    </script>
</body>

</html>