siwei
/
visualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!--
 * @Descripttion: 
 * @version: 
 * @Author: 牛夏蕊
 * @Date: 2023-06-29 10:39:18
 * @LastEditors: 牛夏蕊
 * @LastEditTime: 2023-07-10 18:33:24
-->
<!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/AlwaysDifferent.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="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 id="containerPie" class="XZQDJ"></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="time_line_box">
            <div class="time_line" style="width:100%;">
                <ol>
                    <li>
                        <a class="order_item" style="left:5%;">2015</a>
                    </li>
                    <li>
                        <a class="order_item selected" style="left:25%;">2016</a>
                    </li>
                    <li>
                        <a class="order_item" style="left:45%;">2017</a>
                    </li>
                    <li>
                        <a class="order_item" style="left:65%;">2018</a>
                    </li>
                    <li>
                        <a class="order_item" style="left:85%;">2019</a>
                    </li>
                </ol>
            </div>
        </div>
        <div class="XZQSM">
            *说明：将耕地按照1-4等、5-8等、9-12等、13-15等划分为优等地、高等地、中等地、低等地。
        </div>

    </div>
    <div class="bottomRight borderStyle" id="myChart3" style="height: 55% !important; top: 45%;padding-left: 10px;">
        <div style="" class="titleClass1"><img class="titleImage" src="./font/statistics.png" style="margin-left: 10px;"/>耕地质量类别总量变化趋势图</div>
        <div class="containerClass" id="mychartsLine" style=" width: calc(100% - 20px); height: calc(100% - 45px);"></div>
    </div>
    <div class="bottomLeft borderStyle" id="myChart2" style="height: 100% !important;">
        <div style="" class="titleClass"><img class="titleImage" src="./font/query.png" />耕地质量行政区划统计分析</div>
        <div class="containerClass" id="containerClass2" style="margin: 10px 0px 10px 10px; width: calc(100% - 20px); height: calc(100% - 45px); position: absolute; top: 25px;">
            <!-- <div id='myChartTable2' lay-filter='myChartTable2' style="width: 95%;"></div> --> 
            <div id='containerClassLine1' style="width: 50%;height: 50%;float: left;"></div>
            <div id='containerClassLine2' style="width: 50%;height: 50%;float: left;"></div>
            <div id='containerClassLine3' style="width: 50%;height: 50%;float: left;"></div>
            <div id='containerClassLine4' style="width: 50%;height: 50%;float: left;"></div>
        </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/AlwaysDifferent.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>