增加图例 图片可放大

liuyg

2021-06-16 17b2d46a754654d4476b1e8648ac1b19a9ccbac1

增加图例 图片可放大

 widgets/legends/Widget.html

@@ -10,6 +10,10 @@
            <div class="m-init"> <i class="m-init-h"><img src="./images/addL/监控.png" /></i> 监控站点 <i>(0个)</i> </div>
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div> -->
        </div>
        <div id="legendsInjiance">
            <div class="m-init"> <i class="m-init-h"><img src="./images/addL/监测.png" /></i> 监测站点 <i>(0个)</i> </div>
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div> -->
        </div>
        <div class="m-init"> <i class="m-init-h"><img src="./images/addL/forgin.png" /></i> 鄱阳湖面积 <i>(3253.52公顷)</i> </div>
        <div class="m-init"> <i class="m-init-h"><img src="./images/addL/fred.png" /></i> 鄱阳湖范围 <i></i> </div>
        <div class="m-init"> <i class="m-init-h"><img src="./images/addL/fblue.png" /></i> 其他 <i></i> </div>

 widgets/legends/Widget.js

@@ -55,6 +55,8 @@
                                        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;
                                    } else if (i == 1) {
                                        onceData[data[k].wetlandName_] = onceData[data[k].wetlandName_] == undefined ? 1 : onceData[data[k].wetlandName_] += 1;
                                    }
                                }
                                twoData.push(onceData)
@@ -88,11 +90,15 @@
                        // 全景
                        init(d[0], '#legendsInquanjing', '全景');
                        // 监控
                        init(d[1], '#legendsInjiankong', '监控');
                        init(d[2], '#legendsInjiankong', '监控');
                        // 监测
                        init(d[1], '#legendsInjiance', '监测');
                    }
                    , doit = () => {
                        var i = 0;
                        myGet(val, i);
                        var i = 1;
                        myGet(val, i);
                        var i = 2;
                        myGet(val, i);


 widgets/legends/css/style.css

@@ -30,6 +30,7 @@
.jimu-widget-legends .main {
  max-height: 300px !important;
  overflow: auto;
  transition: all 2s;
}

.jimu-widget-legends .main .m-init {

 widgets/searchL/Widget.js

@@ -316,27 +316,28 @@
            },
            //定位实体位置
            shiti: function (data, i) {
                console.log(data)
                var imgs = i == 1 ? 'images/addL/全景.png' : i == 2 ? 'images/addL/监控.png' : i == 3 ? 'images/addL/监测.png' : '';
                this.addOneEntitys.add({
                    id: data.id, // 实体ID
                    name: data.name, // 实体名称
                    position: Cesium.Cartesian3.fromDegrees(Number(data.lon), Number(data.lat)), // x,y 实体经纬度
                    // label: {
                    //     show: true,
                    //     text: item.siteName, // text 与实体相关的文字
                    //     font: "700 14px '黑体'",
                    //     fillColor: Cesium.Color.DEEPSKYBLUE,
                    //     // backgroundColor: Cesium.Color.DEEPSKYBLUE,
                    //     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    //     outlineWidth: 2,
                    //     outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
                    //     verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                    //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                    //     pixelOffset: new Cesium.Cartesian2(10, -10), // 文字位置
                    //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
                    //     disableDepthTestDistance: Number.POSITIVE_INFINITY
                    // },
                    label: {
                        show: true,
                        text: data.name, // text 与实体相关的文字
                        font: "700 17px '黑体'",
                        fillColor: Cesium.Color.RED,
                        // backgroundColor: Cesium.Color.DEEPSKYBLUE,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineWidth: 2,
                        outlineColor: Cesium.Color.fromBytes(0, 0, 0), // 文字轮廓的颜色
                        verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                        pixelOffset: new Cesium.Cartesian2(-10, -30), // 文字位置
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
                        disableDepthTestDistance: Number.POSITIVE_INFINITY
                    },
                    billboard: {
                        show: true,
                        // image: 'images/addL/监测.png',
@@ -483,22 +484,8 @@
                        });

                        table.on('row(test1)', function (obj) {
                            console.log(obj)
                            that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
                        });
                        // $('.layui-table-col-special').click((e) => {
                        //     e.stopPropagation();
                        //     if(e.toElement.innerText == '视频'){

                        //     }else if(e.toElement.innerText == '定位'){

                        //     }
                        //     console.log(e.toElement.innerText);
                        // })
                        // $('#test').on('click', 'div[lay-id="test"] .layui-table-body tr', function () {
                        //     var obj = table.cache.conManager[parseInt($(this).attr('data-index'))];
                        //     console.log(obj)
                        // })
                    }
                    if (data2 != 1) {

@@ -605,12 +592,23 @@
                        </tr>
                        <tr>
                            <th>图片：</th>
                            <td class="left" colspan="3">
                            <img src="${obj.data.attList[0].uaOriginPath}" alt="">
                            <td class="left" colspan="3" id="popupsimg">
                            <img layer-src="${obj.data.attList[0].uaOriginPath}" src="${obj.data.attList[0].uaOriginPath}" alt="">
                            </td>
                        </tr>`;
                str += '</table>';
                XQDom.append(str);
                // 相册层
                layui.use(['form', 'layer'], function () {

                    //----------模块----------
                    var form = layui.form;
                    var layer = layui.layer;
                    layer.photos({
                        photos: '#popupsimg'
                        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                });
            },
            getshuiwen: function (stcd) {
                var that = this;

 widgets/searchTabaPopup/Widget.js

@@ -76,6 +76,7 @@
                    window.defultEchartsTimes = [1];
                })

				
            },

            closeToolBox: function (item) {

 widgets/searchTabaPopup/css/style.css

@@ -12,7 +12,7 @@
  background: rgba(0, 0, 0, 0.5);
  /* border : 1px solid #000; */
  /* cursor       : pointer; */
  z-index: 14 !important;
  z-index: 15 !important;
  color: #555;
}

@@ -78,8 +78,7 @@
  overflow: hidden;
}


.jimu-widget-searchTabaPopup .two #poput-m-t-quanjing-iframe{
.jimu-widget-searchTabaPopup .two #poput-m-t-quanjing-iframe {
  width: 100%;
  height: 560px;
  position: absolute;
@@ -162,7 +161,6 @@
  height: 100% !important;
}


.jimu-widget-searchTabaPopup .shishishuju .layui-tab {
  margin-top: 10px !important;
  height: calc(100% - 46px) !important;
@@ -172,17 +170,16 @@
  margin: 0 !important;
}


.jimu-widget-searchTabaPopup .lishijilv {
  height: 100%;
}

.jimu-widget-searchTabaPopup .lishijilv .layui-tab {
  margin-top: 10px !important;
  height: calc(100% - 42px) !important;
}

.jimu-widget-searchTabaPopup .lishijilv .layui-inline,
.jimu-widget-searchTabaPopup .lishijilv .layui-form-item {
.jimu-widget-searchTabaPopup .lishijilv .layui-inline, .jimu-widget-searchTabaPopup .lishijilv .layui-form-item {
  margin: 0 !important;
}

@@ -201,16 +198,13 @@
  font-size: 14px;
}

.jimu-widget-searchTabaPopup .xiangqing tr:nth-child(6) td,
.jimu-widget-searchTabaPopup .xiangqing tr:nth-child(7) td {
.jimu-widget-searchTabaPopup .xiangqing tr:nth-child(6) td, .jimu-widget-searchTabaPopup .xiangqing tr:nth-child(7) td {
  text-align-last: left;
  text-indent: 2em;
  padding-left: 5px;
}

.jimu-widget-searchTabaPopup .xiangqing th,
.jimu-widget-searchTabaPopup .xiangqing td,
.jimu-widget-searchTabaPopup .xiangqing table {
.jimu-widget-searchTabaPopup .xiangqing th, .jimu-widget-searchTabaPopup .xiangqing td, .jimu-widget-searchTabaPopup .xiangqing table {
  border-color: rgba(0, 0, 0, .1);
}

@@ -247,8 +241,7 @@
  height: 100% !important;
}

.jimu-widget-searchTabaPopup .shishishuju thead th,
.jimu-widget-searchTabaPopup .shishishuju tbody td {
.jimu-widget-searchTabaPopup .shishishuju thead th, .jimu-widget-searchTabaPopup .shishishuju tbody td {
  text-align: center;
}

@@ -291,8 +284,7 @@
  font-size: 14px;
}

.jimu-widget-searchTabaPopup .lishijilv #query,
.jimu-widget-searchTabaPopup .lishijilv #empty {
.jimu-widget-searchTabaPopup .lishijilv #query, .jimu-widget-searchTabaPopup .lishijilv #empty {
  border-radius: 5px;
}

@@ -311,11 +303,22 @@
  height: 411px;
}

.jimu-widget-searchTabaPopup .layui-btn,
.jimu-widget-searchTabaPopup .layui-input {
.jimu-widget-searchTabaPopup .layui-btn, .jimu-widget-searchTabaPopup .layui-input {
  height: 32px !important;
  line-height: 32px !important;
}

.jimu-widget-searchTabaPopup .layui-form-mid {
  padding: 6px 0 !important;
}

.layui-layer-photos { 
  /* 图片相册尺寸 */
  width: 1100px !important;
  height: 841px !important;
}
#layui-layer-photos img{ 
  /* 图片相册尺寸 */
  width: 1100px !important;
  height: 841px !important;
}