添加图列

qinbo

2021-10-19 b6293ccb3e087f24944dc19bbfea2e0d628380ad

添加图列

 img/tuglie/gk_co.png

 img/tuglie/gk_no2.png

 img/tuglie/gk_pm10.png

 img/tuglie/gk_pm25.png

 img/tuglie/jc_tsp.png

 img/tuglie/other_co.png

 img/tuglie/other_no.png

 img/tuglie/other_no2.png

 img/tuglie/other_nox.png

 img/tuglie/other_pm10.png

 img/tuglie/other_pm2.5.png

 img/tuglie/wz_co.png

 img/tuglie/wz_no2.png

 img/tuglie/wz_pm10.png

 img/tuglie/wz_pm25.png

 widgetsTS/logoAndMenu/view.html

@@ -30,8 +30,9 @@
                onclick="javascript:activateWidget('widgetsTS/windsetting/widget.js');javascript:$('#menu4Child').toggle()">
                <i class="fa fa-gear"></i>风场参数设置
            </li>
            <li class="widget-btn" onclick="window.open//(&apos;http://www.marsgis.cn&apos;)"><i
                    class="fa fa-home"></i>&#x5173;&#x4E8E;&#x6211;&#x4EEC;</li>
            <li class="widget-btn" 
                    onclick="javascript:activateWidget('widgetsTS/tuglie/widget.js')"><i
                    class="fa fa-home"></i>显示图列</li>
        </ul>
    </div>
</div>

 widgetsTS/tuglie/view.html

New file
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图列</title>
    <script src="../../lib/jquery/jquery-1.11.3.min.js"></script>
    <style>
        
        ul {
            list-style: none;
        }
        ul{
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;

        }
        ul li {
            width: 70px;
            height: 20px;
            color: aliceblue;
            background: rgba(32,160,255,0.3);
            text-align: center;
            line-height: 20px;
            font-family: Arial, Helvetica, sans-serif;
            box-sizing: border-box;
            /* box-shadow: 3px 3px 3px #eee;; */
            border-right: 1px solid #f5f5f5;
            cursor:pointer
        }
        #day04{
            width: 100px;
        }

        .showTime{
            width: 890px;
            height: 200px;
            /* border: 1px solid #ffff66; */
        }
        .showTime p{
            width: 100%;
            height:100%;
            margin: 0;
        }
        .navbar{
            display: flex;
            flex-direction: column;
            /* align-items: center; */
            /* justify-content: center; */
        }
        .touchOn{
            background:#ff9966;
            /* font-size: 20px; */
            font-weight: bold;
        }
    </style>
</head>
<body>
    
  <div class="navbar">
    <ul>
        <li id="day01">国控点</li>
        <li id="day02">微站</li>
        <li id="day03">监测点</li>
        <li id="day04">道路与区域</li>
       
    </ul>
    <div class="showTime">
        <p id="content01">
            <img src="../../img/tuglie/gk_pm25.png" alt="">
            <img src="../../img/tuglie/gk_pm10.png" alt="">
            <img src="../../img/tuglie/gk_no2.png" alt="">
            <img src="../../img/tuglie/gk_co.png" alt="">
        </p>
        <p id="content02">
            <img src="../../img/tuglie/wz_pm25.png" alt="">
            <img src="../../img/tuglie/wz_pm10.png" alt="">
            <img src="../../img/tuglie/wz_no2.png" alt="">
            <img src="../../img/tuglie/wz_co.png" alt="">
        </p>
        <p id="content03">
            <img src="../../img/tuglie/jc_tsp.png" alt="">
        </p>
        <p id="content04">
            <img src="../../img/tuglie/other_pm2.5.png" alt="">
            <img src="../../img/tuglie/other_pm10.png" alt="">
            <img src="../../img/tuglie/other_no2.png" alt="">
            <img src="../../img/tuglie/other_no.png" alt="">
            <img src="../../img/tuglie/other_co.png" alt="">
            <img src="../../img/tuglie/other_nox.png" alt="">
        </p>
    </div>
 </div>


</body>
<script>
    var thisWidget;
    function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget
    }

    $(function(){
    $(".showTime").find("p").hide();//先隐藏所有p元素
    })
    $("ul li").click(function () {
    if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素，在这里极为好用
        $(this).addClass("touchOn");//给所点击元素加上touchOn类
    }
    $(this).siblings().removeClass("touchOn");//移除其他元素的touchOn类
    var id = $(this).attr('id');//获取所点击元素的id
    id = id.slice(4, 5);//获取所点击元素的id的序号，方便与下文p的id对应         
    var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//因为index从0开始，这里须id-1
    showId='#'+showId;
    $(showId).show();
    $(showId).siblings().hide();//注意！！！这里不能写$("showId")
    })
</script>
</html>

 widgetsTS/tuglie/widget.js

New file
@@ -0,0 +1,56 @@
'use script'; //开发环境建议开启严格模式

(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    // get resources() {
    //   return [
    //     'view.css'
    //   ]
    // }

    //页面配置， append是添加DOM节点到html中的方式
    get view() {
      return {
        type: "window",
        url: "view.html",
        parent: "#centerDiv",
        windowOptions: {
          width: 890,
          height: 230,
          position: {
            left: 5,
            bottom: 25
        },
        },
      };
    }
 
    //初始化[仅执行1次]
    create() {}

    //每个窗口创建完成后调用
    winCreateOK(viewopt, html) {
      if (viewopt.type != "append") {
        return;
      }
      // this.reloadData();
    }

    //激活插件
    activate() {

    }

    //释放插件
    disable() {
      //toastr.info('释放插件_example_append')
    }
  }

  //注册到widget管理器中。
  mars3d.widget.bindClass(MyWidget)

  //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d)