图例

liuyg

2021-06-16 124666224532543877aaf344d16254c0bc4db2b4

图例

 widgets/legends/Widget.html

@@ -1,13 +1,17 @@
<div>
    <div class="title">图层列表</div>
    <div class="main">
        <div class="m-init"> <i><img src="./images/addL/dwblue.png"/></i> 全景站点 <i>(20个)</i> </div>
        <div class="m-init m-i-child"> <i></i> 大湖池<i>(1个)</i> </div>
        <div class="m-init m-i-child"> <i></i> 战备胡 <i>(1个)</i> </div>
        <div class="m-init"> <i><img src="./images/addL/dworgin.png"/></i> 监控站点 <i>(50个)</i> </div>
        <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div>
        <div class="m-init"> <i><img src="./images/addL/forgin.png"/></i> 鄱阳湖面积 <i>(3253.52公顷)</i> </div>
        <div class="m-init"> <i><img src="./images/addL/fred.png"/></i> 鄱阳湖范围 <i></i> </div>
        <div class="m-init"> <i><img src="./images/addL/fblue.png"/></i> 其他 <i></i> </div>
        <div id="legendsInquanjing">
            <!-- <div class="m-init"> <i><img src="./images/addL/dwblue.png" /></i> 全景站点 <i>(20个)</i> </div> -->
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池<i>(1个)</i> </div>
            <div class="m-init m-i-child"> <i></i> 战备胡 <i>(1个)</i> </div> -->
        </div>
        <div id="legendsInjiankong">
            <!-- <div class="m-init"> <i><img src="./images/addL/dworgin.png" /></i> 监控站点 <i>(50个)</i> </div> -->
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div> -->
        </div>
        <div class="m-init"> <i><img src="./images/addL/forgin.png" /></i> 鄱阳湖面积 <i>(3253.52公顷)</i> </div>
        <div class="m-init"> <i><img src="./images/addL/fred.png" /></i> 鄱阳湖范围 <i></i> </div>
        <div class="m-init"> <i><img src="./images/addL/fblue.png" /></i> 其他 <i></i> </div>
    </div>
</div>

 widgets/legends/Widget.js

@@ -29,9 +29,85 @@
            layers: {},
            startup: function () {
                // 暴露在外的接口
                topic.subscribe("getLegendsData", lang.hitch(this, this.onGetLegendsData));

            },
            onGetLegendsData: function (item) {
                var val = item == '  ' ? '' : item;
                console.log(val)
                var that = this
                    , twoData = []
                    // url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=&start&limit&type=${index}`
                    , token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyMjU5OTcsImV4cCI6MTYyNTgxNzk5N30.zWpoKa5AK7xLIPNm-CXoHY9D5kpk9AiUTGkuAQOZi2Rdl2BfroT4IqxjBpyUPZlgwCjG2CoJqy_7rnnodpmqNw'
                    , myGet = function (val, i) {
                        var url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=${val}&start&limit&type=${i}`;
                        axios.get(url, {
                            headers: {
                                'token': token
                            }
                        }).then((res) => {
                            if (res.data.code == 200) {
                                var data = res.data.data.panoramaList || res.data.data.stationList || res.data.data.videoList || []
                                    , onceData = {};
                                console.log(data);
                                for (var k in data) {
                                    if (i == 0) {
                                        onceData[data[k].protectArea] = onceData[data[k].protectArea] == undefined ? 1 : onceData[data[k].protectArea] += 1;
                                    } else if (i == 2) {
                                        onceData[data[k].protectName] = onceData[data[k].protectName] == undefined ? 1 : onceData[data[k].protectName] += 1;
                                    }
                                }
                                twoData.push(onceData)
                                if (i == 2) {
                                    ready(twoData);
                                }
                            } else {
                                console.log('请求访问失败')
                            }
                        })
                    }
                    , ready = function (d, i) {
                        console.log(d);
                        // 全景
                        var q = d[0]
                            , num = 0
                            , strq
                            , domq = $('#legendsInquanjing')
                            , h = '';
                        domq.empty();
                        for (var k in q) {
                            num += q[k];
                            h += `<div class="m-init m-i-child"> <i></i> ${k}<i>(${q[k]}个)</i> </div>`;
                        }
                        strq = `<div class="m-init"> <i><img src="./images/addL/全景.png" /></i> 全景站点 <i>(${num}个)</i> </div>` + h;
                        domq.append(strq);

                        // 监控
                        q = d[1];
                        num = 0;
                        strq;
                        domq = $('#legendsInjiankong');
                        h = '';
                        domq.empty();
                        for (var k in q) {
                            num += q[k];
                            h += `<div class="m-init m-i-child"> <i></i> ${k}<i>(${q[k]}个)</i> </div>`;
                        }
                        strq = `<div class="m-init"> <i><img src="./images/addL/监控.png" /></i> 监控站点 <i>(${num}个)</i> </div>` + h;
                        domq.append(strq);


                    }
                    , doit = () => {
                        var i = 0;
                        myGet(val, i);
                        var i = 2;
                        myGet(val, i);

                    }

                doit();
            },
            closeToolBox: function (item) {
            },


 widgets/legends/css/style.css

@@ -1,11 +1,11 @@
.jimu-widget-legends {
  position: absolute !important;
  font-size: 14px;
  height: 290px !important;
  max-height: 330px !important;
  line-height: 32px;
  width: 230px !important;
  width: 300px !important;
  right: 60px !important;
  bottom: 40px !important;
  bottom: 5px !important;
  left: auto !important;
  top: auto !important;
  /* 240px */
@@ -18,6 +18,8 @@
  z-index: 15 !important;
  box-sizing: border-box;
  padding: 0 6px 0 6px!important;
  overflow: auto;
  transition: all 2s;
}

.jimu-widget-legends .title {

 widgets/searchL/Widget.js

@@ -55,6 +55,7 @@

                $(".searchImg").click(function () {
                    that.getInputData();
                    topic.publish('getLegendsData', that.searchDatas);
                    if (typeof that.searchDatas == 'string') {
                        var han = /^[\u4e00-\u9fa5]+$/;
                        if (han.test(that.searchDatas) || that.searchDatas == '  ') {
@@ -101,6 +102,7 @@
                $("#local_data").keyup(function (e) {
                    // console.log(e);
                    that.getInputData();
                    topic.publish('getLegendsData', that.searchDatas);
                    if (e.keyCode == 13 && typeof that.searchDatas == 'string') {
                        var han = /^[\u4e00-\u9fa5]+$/;
                        if (han.test(that.searchDatas) || that.searchDatas == '  ') {
@@ -380,9 +382,9 @@
                            // , page: true //是否显示分页
                            , limits: false
                            , limit: 10 //每页默认显示的数量
                            , done: function(res, curr, count){
                            , done: function (res, curr, count) {
                                that.addTitle();
                              }
                            }

                        });

@@ -423,9 +425,9 @@
                            // , page: true //是否显示分页
                            , limits: false
                            , limit: 10 //每页默认显示的数量
                            , done: function(res, curr, count){
                            , done: function (res, curr, count) {
                                that.addTitle();
                              }
                            }

                        });
                        table.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
@@ -498,9 +500,9 @@
                            // , page: true //是否显示分页
                            , limits: false
                            , limit: 10 //每页默认显示的数量
                            , done: function(res, curr, count){
                            , done: function (res, curr, count) {
                                that.addTitle();
                              }
                            }

                        });