Menu button01页面

qinbo

2021-09-16 47e10b936ccf6f1cf54a6cf69362474a2ec238c1

 widgetsTS/widget_/viewLeft.html

@@ -11,25 +11,69 @@


    <style>
        #echart {
        #top10Div {
            width: 100%;
            height: 50%;
            /* background-color: hotpink; */
            margin-bottom: 80px;
            margin-top: 50px;
            /* margin-bottom: 80px; */
            /* margin-top: 50px; */
        }

        #echart>table {
        #top10Div>table {
            width: 100%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0);
            /* border-collapse:collapse; */
            color: aqua;
            font: italic 400 16px "宋体";
            border-radius: 10px;
            /* color: aqua; */
            /* font: italic 400 16px "宋体"; */
            /* border-radius: 10px; */
        }

        table>tr>th {
            border-radius: 5px;
        .no_bgc_table{
            width: 100%;
            height: 50%;
            padding: 2px;
            background-color: rgba(0, 0, 0, 0);
            color:rgba(255,255,255,.7);
        }
        
        .no_bgc_table_head{
            background-color: rgba(0, 0, 0, 0);
            color:rgba(255,255,255,.7);
        }
        .top_10_table tr {
            border-bottom: 1px solid rgba(77,255,255,.5);
        }

        
        .cnt_div{
            color: #fff;
            background-color: rgba(0, 48, 64, .6);
        }
        .color_white{
            color: #fff;
        }

        .cnt_left_div{
            width: 50%;
            float: left;
        }
        .cnt_right_div{
            width: 50%;
            float: right;
        }    
        .padding_2_p{
            padding: 2%;
        }
        .padding_right_2_p{
            padding: 2%;
        }

        .my_sep{
            width: 96%;
            /* text-align: center; */
            height: 2px;
            margin-left: 2%;
        }
    </style>
</head>
@@ -37,70 +81,298 @@
<!-- <body style="padding:5px;text-align:center;background-color: azure;"> -->

<body cl>
    <ul class="layui-nav" lay-bar="disabled">
        <li class="layui-nav-item">
            <a href="">国控点<span class="layui-badge" id="count1">0</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">监测点<span class="layui-badge" id="count2">0</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">微站<span class="layui-badge" id="count3">0</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">移动监测站<span class="layui-badge" id="count4">0</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">监测区域<span class="layui-badge" id="count5">0</span></a>
        </li>
    </ul>

    <div id="chart" style="width:100%;height:300px;">

    <div class="layui-row">
        <span class="layui-breadcrumb" lay-separator="|"  >
            <a href="#"></a>
            <a href="#" style="color: white!important;">监测总量</a>
            <a href="#"></a>
          </span>
    </div>
    
    <div class="layui-row">
        <div style="float: left;width: 30%;">
            <img src="img/tq_02qing.png">
        </div>
       
        <div id="weather" style="float: right;width: 70%;">
            <table class="layui-table no_bgc_table" lay-skin="nob">
                <tr>
                    <td>温度:35</td>
                    <td>能见度:100%</td>
                </tr>
                <tr>
                    <td>湿度:70%</td>
                    <td>PM2.5:60</td>
                </tr>
            </table>
        </div>
    


        
        
    </div>


    <div class="layui-row cnt_div">
        <div class="layui-row padding_2_p">
            <div class="cnt_left_div">
                <a class="color_white cnt_btn" href="#">
                    <img src="img/count1.png" class="layui-nav-img">
                    <span class="padding_right_2_p">国控点</span>
                    <span class="layui-badge" id="count1">0</span></a>   
            </div>
            <div class="cnt_right_div">
                <a class="color_white cnt_btn" href="#">
                    <img src="img/count2.png" class="layui-nav-img">
                    <span class="padding_right_2_p">监测点</span>
                    <span class="layui-badge" id="count2">0</span></a>
            </div>
        </div>
        <div class="layui-row padding_2_p">
            <div class="cnt_left_div">
                <a class="color_white cnt_btn" href="#">
                    <img src="img/count3.png" class="layui-nav-img">
                    <span class="padding_right_2_p">微站</span>
                    <span class="layui-badge" id="count3">0</span></a>
            </div>
            <div class="cnt_right_div">
                <a class="color_white cnt_btn" href="#">
                    <img src="img/count4.png" class="layui-nav-img">
                    <span class="padding_right_2_p">移动监测站</span>
                    <span class="layui-badge" id="count4">0</span></a>
            </div>
        </div>
        <div class="layui-row padding_2_p">
            <div class="cnt_left_div">
                <a class="color_white cnt_btn" href="#">
                    <img src="img/count5.png" class="layui-nav-img">
                    <span class="padding_right_2_p">区域</span>
                    <span class="layui-badge" id="count5">0</span></a> 
            </div>
            <div class="cnt_right_div cnt_btn">
                <a class="color_white" href="#">
                    <img src="img/count6.png" class="layui-nav-img">
                    <span class="padding_right_2_p">道路</span>
                    <span class="layui-badge" id="count6">0</span></a>
            </div>
        </div>
    </div>



    <!-- <div class="layui-row">
        <ul class="layui-nav" lay-bar="disabled">
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/count1.png" class="layui-nav-img">
                    国控点<span class="layui-badge" id="count1">0</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/count2.png" class="layui-nav-img">
                    监测点<span class="layui-badge" id="count2">0</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/count3.png" class="layui-nav-img">
                    微站<span class="layui-badge" id="count3">0</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/count4.png" class="layui-nav-img">
                    移动监测站<span class="layui-badge" id="count4">0</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/count5.png" class="layui-nav-img">
                    区域<span class="layui-badge" id="count5">0</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/count6.png" class="layui-nav-img">
                    道路<span class="layui-badge" id="count6">0</span></a>
            </li>
        </ul>
    </div> -->
    <hr class="layui-border-blue my_sep" >
    <div class="layui-row">
        <span class="layui-breadcrumb" lay-separator="|"  >
            <a href="#"></a>
            <a href="#" style="color: white!important;">监测Top10</a>
            <a href="#"></a>
          </span>
    </div>

    <div class="layui-row" style="padding-left:1%;padding-right:1%;">
        <table id="" class="layui-table no_bgc_table top_10_table" lay-skin="nob">
            <thead >
            <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
                <th style="font-weight: bold;">序号</th>
                <th style="font-weight: bold;">编号</th>
                <th style="font-weight: bold;">名称</th>
                <th style="font-weight: bold;">指标</th>
            </tr> 
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>2</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>3</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>4</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>5</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>6</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>7</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>8</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>9</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            <tr>
                <td>10</td>
                <td>MN653</td>
                <td>TAXI202</td>
                <td>63</td>
            </tr>
            </tbody>
        </table>   
    </div>

    

    
<!-- 
    <div id="top10Div" style="width:100%;height:300px">
       
    </div> -->




    <script>



        //对应widget.js中MyWidget实例化后的对象
        var thisWidget

        //当前页面业务
        function initWidgetView(_thisWidget) {
            thisWidget = _thisWidget
            //绑定点击事件
            loadWeather();
            
            loadCount();

            $(".cnt_div a").on("click", function () {
                //$("#cnt_div a").removeClass("select_btn");
                //$(this).addClass("select_btn");
                //var potencyWidget = mars3d.widget.getClass("widgetsTS/potency/widget.js");
                var potency = parent.applyPotency();
                console.log(potency);
                var id = $(this).attr("id");
                //showInfo(id);
                
            });

 
        }


        $(document).ready(function() {
            console.log("i am jquery");
        })
        
        //加载天气
        function loadWeather(){

        }

        //
        var backend_url = "http://112.74.77.127:9090/geoserver/sxyd112_47_77_127/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sxyd112_47_77_127%3Atest_userid&maxFeatures=50&outputFormat=application%2Fjson&viewparams=id1:0;id2:10";
        function showDetail(code){
            alert("i am left: your code is "+code);
        }

        //加载count
        function loadCount(){  
            var backend_url = "http://112.74.77.127:9090/geoserver/sxyd112_47_77_127/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sxyd112_47_77_127%3Atest_userid&maxFeatures=50&outputFormat=application%2Fjson&viewparams=id1:0;id2:10";
            backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_all_count_by_id&userid=2";
            backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_1001_top10_hour&datatime=2021-09-08%2012:00:00&qindex=pm10";
            $.ajax({
                type: 'get',
                dataType: 'jsonp',
                crossDomain: true,
                data: {},
                //async: false,//同步
                url: backend_url,
                //jsonp:"callback", //Jquery生成验证参数的名称
                //processData: false,
                //jsonpCallback: "handleCallback",  // 自定义回调函数名
                //timeout: 0,
                success: function (data) {
                    console.log(data);


        $.ajax({
            type: 'get',
            dataType: 'json',
            data: {},
            async: false,//同步
            url: backend_url,
            timeout: 0,
            success: function (data) {
                console.log(data);
                    $("#count1").text(39);
                    $("#count2").text(34);
                    $("#count3").text(0);
                    $("#count4").text(2);
                    $("#count5").text(12);
                },
                error: function (request, textStatus) {
                     
                }
            });   
        }

                $("#count1").text(39);
                $("#count2").text(34);
                $("#count3").text(0);
                $("#count4").text(2);
                $("#count5").text(12);
        function handleCallback(){
            console.log("back");
        }



              
            },
            error: function (request, textStatus) {
                console.log(textStatus, request);
            }
        });

        function test(id) {
            alert("i am left: your id is "+id);
        }
    </script>