combineQuery.html 16.8 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/JavaScript.js"></script>
    <script src="/static/js/popupJS.js"></script>

    <script src="/static/js/layui/layui.js"></script>
    <script src="/static/js/eventJS/search.js"></script>

    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/search.css">

    <style>
        .show-tab-title {
            width: 480px;
            overflow: auto;
            overflow-y: hidden;
        }

        .layui-form {
            height: 190px;
            /* width: 270px; */
            font-size: 14px;
        }

        .layui-form-item {
            margin-top: 3px;
            margin-bottom: 7px;
            height: 30px;
            float: left;
            clear: inherit;
        }

        .layui-input-block {
            height: 25px;
            font-size: 14px;
            width: 150px;
            margin-left: 80px;
        }

        .layui-form-label {
            float: left;
            padding: 9px 0px;
            text-align: center;
        }

        .tool {
            /* float: left; */
            left: 20px;
        }

        .layui-tab {
            padding-top: 2px;
        }

        .layui-tab-content {
            padding: 0px;
        }

        .layui-form-label,
        .layui-tab-title {
            color: #FFF;
        }

        .layui-tab-title .layui-this {
            color: aqua;
        }

        .showdiv {
            width: 480px;
            height: 230px;
        }

        .ul {
            width: 480px;
        }

        .layui-form-select .layui-input {
            height: 30px;
            padding-top: 2px;
        }

        .layui-form-select dl dd {
            height: 30px;
        }

        .layui-select-title {
            padding-top: 1px;
        }

        .tiaojian .search-btn {
            width: 80px;
        }

        .layui-form-radio * {
            color: white;
        }

        .layui-form-item .layui-form-text {
            width: 400px;
        }

        .layui-textarea {
            min-height: 50px;
            height: 70px;
            width: 350px;
        }
    </style>
</head>

<body marginwidth="0" marginheight="0" onload="init()">
    <div id="mainDiv" class="dialog tiaojian">
        <h1 class="title" onmousedown="MouseDown(event)" onmouseup="MouseUp(event)" onmouseout="MouseUp(event)">
            组合查询<i class="guanbibtn" onclick="Close()">X</i>
        </h1>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">图层过滤</label>
                <div class="layui-input-block">
                    <!-- <select id="layerSelect" name="interest" onchange="layerChange()"></select> -->
                    <select id="layerSelect" name="interest" lay-filter="layer">
                        <option value="" selected=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">属性选择</label>
                <div class="layui-input-block">
                    <!-- <select id="attrName" name="interest" onchange="atteNameChange()"> -->
                    <select id="attrName" name="interest" lay-filter="attrName">
                        <option value="" selected=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">运算符</label>
                <div class="layui-input-block">
                    <select id="operator" name="interest">
                        <option value="=">等于</option>
                        <option value=">">大于 </option>
                        <option value="<"> 小于</option>
                        <option value=">=">大于等于</option>
                        <option value="<=">小于等于</option>
                        <option value="<>">不等于</option>
                        <option value="like">部分等于</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">属性值</label>
                <div class="layui-input-block">
                    <select id="attrValue" name="interest">
                        <option value="" selected=""></option>
                    </select>
                </div>
            </div>

            <div style="padding:5px 0px 5px 10px;">
                <button type="button" class="search-btn" id="addOper1">AND</button>
                <button type="button" class="search-btn" id="addOper2">OR</button>
                <button type="button" class="search-btn" id="addCondition">添加</button>
                <button type="button" class="search-btn" id="clearCondition">清空</button>
                <button type="button" class="search-btn" onclick="conditional()">查询</button>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">组合条件</label>
                <div class="layui-input-block">
                    <!-- placeholder="请输入内容" -->
                    <textarea id="combineCondition" class="layui-textarea" name="condition"
                        lay-filter="content"></textarea>
                </div>
            </div>
        </form>


        <div class="result layui-tab">
            <h1 class="dialog title">属性展示</h1>
            <div class="show-tab-title">
                <ul class="layui-tab-title">

                </ul>
            </div>

            <ul class="ul">
                <li class="item">
                    <span class="name">属性名</span>
                    <span class="value">属性值</span>
                </li>
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>


    <script>
        layui.use(['form', 'element'], function () {
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                tabAdd: function () {
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        , content: '内容' + (Math.random() * 1000 | 0)
                        , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                }
                , tabDelete: function (othis) {
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”


                    othis.addClass('layui-btn-disabled');
                }
                , tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });

            var form = layui.form;
            form.render('select');
            form.on('select(layer)', function (data) {
                layerChange(data.value);
                form.render('select');
            });
            form.on('select(attrName)', function (data) {
                atteNameChange(data.value);
                form.render('select');
            });

            $('#addCondition').on('click', function () {
                $("#combineCondition").append(addCondition());

            });
            $('#clearCondition').on('click', function () {
                $("#combineCondition").val("");
            });
            $("#addOper1").on('click', function () {
                var txt = $("#combineCondition").val();
                if (txt !== "") {
                    $("#combineCondition").append(" AND ");
                }
            });
            $("#addOper2").on('click', function () {
                var txt = $("#combineCondition").val();
                if (txt !== "") {
                    $("#combineCondition").append(" OR ");
                }
            });
        });
    </script>


    <script>
        function init() {
            var sgworld = CreateSGObj();
            ScanTree();
            var content = "";
            //layersList 是外部的定义数组，里面存的是检索到的图层的ID
            for (var i = 0; i < layersList.length; i++) {
                var element = layersList[i];
                var objID = element.id;
                var obj = SGWorld.ProjectTree.GetObject(objID);//获取对象
                if (obj.ObjectType == 36) {//如果是IFeatureLayer类型
                    //var objName = SGWorld.ProjectTree.GetItemName(objID);//获取图层名称
                    //ObjID 图层的ID  ； ObjName 图层的名称
                    content += "<option value='" + objID + "' >" + element.name + "</option>";
                } else if (obj.ObjectType == 38) {//如果是IMeshLayer类型
                    //我们需要的是I3DMLFeatureLayer,I3DMLFeatureLayer是IMeshLayer的子图层
                    var meshlayers = obj.FeatureLayers;//获取IMeshLayer的所有子图层
                    for (var j = 0; j < meshlayers.Count; j++) {
                        var meshlayer = meshlayers.Item(j);//第j个子图层
                        var meshlayerID = meshlayer.ID;//自图层ID
                        //自图层名称
                        var meshlayerName = SGWorld.ProjectTree.GetItemName(meshlayerID);
                        content += "<option value='" + meshlayerID + "' >" + meshlayerName + "</option>";
                    }
                }
            }
            // 图层选择  下拉框中的内容
            $("#layerSelect").html(content);
            //清空相关的对象
        }

        //图层选择好后，在属性名称下拉框中添加相应的图层的名称
        function layerChange(layerID) {
            // alert("layerChange");
            var sgWorld = CreateSGObj();
            // var layerID = $("#layerSelect").val();
            $("#attrName").html("");
            if (layerID !== "") {
                var layer = sgWorld.ProjectTree.GetObject(layerID);
                var attrCount = layer.DataSourceInfo.Attributes.Count;
                var content = "";
                for (var i = 0; i < attrCount; i++) {
                    var attrName = layer.DataSourceInfo.Attributes.Item(i).Name;
                    var attrType = layer.DataSourceInfo.Attributes.Item(i).Type;
                    //this.layerList.push({ id: attrType, name: attrName });
                    content += "<option value='" + attrName + "' attrType='" + attrType + "'>" + attrName + "</option>";
                }
                $("#attrName").append(content);
            }
        }
        //属性选择好后，对应的属性值的改变
        function atteNameChange(propertySelected) {
            var sgWorld = CreateSGObj();
            // var propertySelected = $("#attrName").val();
            var layerID = $("#layerSelect").val();
            $("#attrValue").html("");
            if (layerID != "") {
                var layer = sgWorld.ProjectTree.GetObject(layerID);
                var allPropValue = [];
                var features = null;
                if (layer.ObjectType == 36) {
                    features = layer.FeatureGroups.Item(0).Features;
                }
                else if (layer.ObjectType == 39) {
                    features = layer.ExecuteQuery(
                        "",
                        -1,
                        "",
                        sgWorld.Creator.GeometryCreator.CreatePolygonGeometry(null)
                    );
                }
                for (var i = 0; i < features.Count; i++) {
                    var feature = features.Item(i);
                    var propValue = feature.FeatureAttributes.GetFeatureAttribute(
                        propertySelected
                    ).Value;
                    allPropValue.push(propValue);
                }
                var newPropValue = [];
                for (var i = 0; i < allPropValue.length; i++) {
                    if (newPropValue.indexOf(allPropValue[i]) == -1) {
                        newPropValue.push(allPropValue[i]);
                    }
                }
                //拼接字符串，填充到 选择属性值 下拉框中
                var content = "";
                for (var i = 0; i < newPropValue.length; i++) {
                    try {
                        var ls = newPropValue[i];
                        content = content + "<option value='" + ls + "'>" + ls + "</option>";
                    } catch (e) {
                        alert(" - " + e.Message);
                    }
                }
                $("#attrValue").append(content);
            }
        }

        function addCondition() {
            var layerID = $("#layerSelect").val();
            var property = $("#attrName").val();
            var propertyType = $("#attrName").find("option:selected").attr("attrType");
            var operator = $("#operator").val();
            var value = $("#attrValue").val();
            var strSQL = "";
            if (propertyType == 0) {
                //TEXT
                // strSQL = "'" + property + "'" + operator + "'" + value + "'";
                strSQL = "'" + property + "'" + operator;//+ "'" + value + "'";
                if (operator === "like") {
                    strSQL += "'%" + value + "%'"
                } else {
                    strSQL += "'" + value + "'";
                }
            } else if (propertyType == 1) {
                //1: INTEGER
                strSQL = "'" + property + "'" + operator + parseInt(value);
            } else if (propertyType == 2) {
                //2:DOUBLE
                strSQL = "'" + property + "'" + operator + parseFloat(value);
            }
            return strSQL;
        }

        function conditional() {
            var layerID = $("#layerSelect").val();
            // var property = $("#attrName").val();
            // var propertyType = $("#attrName").find("option:selected").attr("attrType");
            // var operator = $("#operator").val();
            var strSQL = $("#combineCondition").val();
            // alert(strSQL);
            var sgWorld = CreateSGObj();
            var layer = sgWorld.ProjectTree.GetObject(layerID);
            var features = null; //features 是经过检索查询之后查找到的对象
            if (layer.ObjectType == 36) {
                layer.Filter = strSQL;
                layer.Streaming = 0;
                layer.Refresh();
                features = layer.FeatureGroups(0).GetCurrentFeatures();

            } else if (layer.ObjectType == 39) {
                features = layer.ExecuteQuery(
                    strSQL,
                    -1,
                    "",
                    sgWorld.Creator.GeometryCreator.CreatePolygonGeometry(null)
                );
            }

            $(".layui-tab-title").html("");
            $(".layui-tab-content").html("");
            for (var i = 0; i < features.Count; i++) {
                var pIFeature = features.Item(i);
                $(".layui-tab-title").append("<li>" + pIFeature.ID + "</li>");//Tab表的表头
                var strAdd = "<div class='layui-tab-item'><div class='showdiv'><ul class='ul' id='liitems'>";
                var attr = getObjectAttributes(pIFeature);
                var arr = Object.keys(attr);
                for (var index = 0; index < arr.length; index++) {
                    // addItem(arr[index], msg[arr[index]]);
                    strAdd += "<li class='item'><span class='name'>" +
                        arr[index] + "</span><span class='value'>" +
                        attr[arr[index]] + "</span></li>";
                }
                strAdd += "</ul></div></div>";
                $(".layui-tab-content").append(strAdd);
            }
            $(".layui-tab-title").children(":first").addClass("layui-this");
            $(".layui-tab-content").children(":first").addClass("layui-show");
            //检索完成后将查询条件清除，刷新
            layer.Filter = "";
            layer.Refresh();
        }
    </script>

</body>

</html>