From 47e10b936ccf6f1cf54a6cf69362474a2ec238c1 Mon Sep 17 00:00:00 2001
From: qinbo <qinbo@shsening.com>
Date: 星期四, 16 九月 2021 11:46:56 +0800
Subject: [PATCH] Menu button01页面
---
widgetsTS/widget_/viewLeft.html | 378 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 325 insertions(+), 53 deletions(-)
diff --git a/widgetsTS/widget_/viewLeft.html b/widgetsTS/widget_/viewLeft.html
index 75aef35..48d9474 100644
--- a/widgetsTS/widget_/viewLeft.html
+++ b/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涓璏yWidget瀹炰緥鍖栧悗鐨勫璞�
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>
--
Gitblit v1.9.1