左上指示器可选菜单

liuyg

2021-06-11 124254f51ea930f4f8bcfb32132cd73bc2413233

左上指示器可选菜单

 widgets/instructions/Widget.html

@@ -1,4 +1,4 @@
<div>
    <img src="../../images/addL/leftdidian.png" alt="">
<div class=" demo1">
    <img src="./images/addL/leftdidian.png" alt="">
    <div class="instructions-title">鄱阳湖保护区</div>
</div>

 widgets/instructions/Widget.js

@@ -29,9 +29,53 @@
            layers: {},
            startup: function () {
                // 暴露在外的接口
                var that = this
                    , url = 'http://171.34.76.171:8880/pyh-station/metaWetlandProtect/queryNameAndIdAssembleMap'
                    , token = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMzOTIwNTcsImV4cCI6MTYyNTk4NDA1N30.wyhtQWDfyBM4Wvu9x_GpzWErqDkZ3J-PWEjyzoaHT9w6mMBenso5q0ZdnFueCZaCOjsHM5AMwLawATT0Zqc4aQ"
                    ;
                axios.get(url, {
                    headers: {
                        "token": token
                    }
                }).then((res) => {
                    if (res.data.code == 200) {
                        var data = res.data.data;
                        // console.log(data, 99999);
                        that.beginLayuiDropdown(data)
                    }
                })

            },
            beginLayuiDropdown: function (data) {
                var d = [];
                for (var k in data) {
                    d.push({
                        title: data[k].name,
                        id: data[k].id
                    })
                }
                layui.use(['dropdown', 'util', 'layer', 'table'], function () {
                    var dropdown = layui.dropdown
                        , util = layui.util
                        , layer = layui.layer
                        , table = layui.table
                        , $ = layui.jquery;


                    dropdown.render({
                        elem: '.demo1'
                        , data: d
                        , click: function (obj) {
                            //点击事件
                            // layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
                            var str = obj.title;
                            $('.jimu-widget-instructions').find('.instructions-title').empty().append(str);
						
						
                        }
                    });
                });
            },
            closeToolBox: function (item) {
            },


 widgets/instructions/css/style.css

@@ -2,8 +2,8 @@
  position: absolute !important;
  font-size: 14px;
  height: 42px !important;
  line-height: 32px;
  width: 160px !important;
  line-height: 42px;
  /* min-width: 160px !important; */
  right: auto !important;
  bottom: auto !important;
  left: 260px;
@@ -17,17 +17,21 @@
  /* cursor       : pointer; */
  z-index: 15 !important;
  box-sizing: border-box;
  padding: 0 20px 0 20px;
  /* padding: 0 20px 0 20px!important; */
  display: flex;
  align-items: center;
  justify-content: center;
   /* display: flex; */
  /*align-items: center;
  justify-content: center; */
  transition: all 0.5s;
  cursor: pointer;
}

.jimu-widget-instructions img {
  width: 20px;
  position: relative;
  top:-2px;
  left: -5px;
  margin-left: 11px;
}

.jimu-widget-instructions .instructions-title {
@@ -35,4 +39,6 @@
  font-size: 1rem;
  font-weight: 400;
  letter-spacing:1.5px;
  display: inline-block;
  margin-right: 11px;
}