ZLPMS/PMS.WebUI/Views/CloudMonitor/EditCustomAlertsConfig.cshtml


@{
    ViewBag.Title = "EditCustomAlertsConfig";
    Layout = "~/Views/Shared/_CloudMonitor.cshtml";
}
<form class="layui-form" id="ff" action="" lay-filter="ff">
    <input type="text" name="ID" style="display:none;" value="" placeholder="" autocomplete="off" class="layui-input">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">渠道</label>
            <div class="layui-input-inline">
                <select name="渠道ID" lay-search="" lay-verify="required" id="渠道" lay-filter="渠道">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">项目</label>
            <div class="layui-input-inline">
                <select name="项目ID" lay-search="" lay-verify="required" id="项目" lay-filter="项目">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">指标名称</label>
            <div class="layui-input-inline">
                <input type="text" name="指标名称" lay-verify="required" value="" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">服务器</label>
            <div class="layui-input-inline">
                <select name="服务器ID" lay-search="" lay-verify="required" id="服务器" lay-filter="服务器">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">数据库</label>
            <div class="layui-input-inline">
                <select name="数据库ID" lay-search="" lay-verify="required" id="数据库" lay-filter="数据库">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">频率：间隔</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="number" name="频率" lay-verify="required" value="" placeholder="" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-text-em">分执行</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" title="数据库查询sql">数据库查询sql</label>
        <div class="layui-input-block">
            <textarea name="数据库查询SQL" lay-verify="required" placeholder="select 10 as '预警值'" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="display:none;">
        <label class="layui-form-label" title="预警通知内容模板">预警通知内容模板</label>
        <div class="layui-input-block">
            <textarea name="预警通知内容模板" placeholder="预警通知内容模板" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">启用</label>
        <div class="layui-input-block">
            <input type="checkbox" name="是否启用" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
        </div>
    </div>
</form>
<script src="~/ViewModels/CustomAlertsConfigIndex.js?r=@DateTime.Now.ToLongTimeString()"></script>
<script src="~/ViewModels/getPingyin.js"></script>
<style>
    label.layui-form-label {
        width: 100px; /* 容器宽度 */
        text-align: left;
        /*overflow: hidden;*/ /* 超出隐藏 */
        /*white-space: nowrap;*/ /* 不换行 */
        /*text-overflow: ellipsis;*/ /* 使用省略号(...)表示被隐藏的文本 */
    }

</style>
<script type="text/javascript">
    $(function () {
        let form = layui.form;

        function 加载渠道() {
            ZLPMS.BindLayUiSelect({
                "url": "/ProManager/Datagrid",
                "method": "Get",
                "key": "ID",
                "text": "名称",
                "dom": $("#渠道"),
                "form":form
            });
        }

        function 加载项目(渠道ID) {
            if(渠道ID=="") return;
            ZLPMS.BindLayUiSelect({
                "url": `/ProManager/BingProData?ChannelID=${渠道ID}&Search=`,
                "method": "Get",
                "key": "ID",
                "text": "名称",
                "dom": $("#项目"),
                "form": form
            });
        }

        function 加载服务器(项目ID) {
            if(项目ID=="") return;
            ZLPMS.BindLayUiSelect({
                "url": `/CloudMonitor/GetServerByItemId?itemid=${项目ID}`,
                "method": "Get",
                "key": "ID",
                "text": "IP地址",
                "dom": $("#服务器"),
                "form": form
            });  
        }

        function 加载数据库(服务器ID) {
            if (服务器ID == "") return;
            ZLPMS.BindLayUiSelect({
                "url": `/CloudMonitor/GetDbInfoByServerId?serverId=${服务器ID}`,
                "method": "Get",
                "key": "ID",
                "text": "名称",
                "dom": $("#数据库"),
                "form": form
            });
        }

        // 渠道改变事件
        form.on('select(渠道)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            if (value != "") {
                加载项目(value);
            }
        });

        // 项目改变事件
        form.on('select(项目)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            if (value != "") {
                加载服务器(value);
            }
        });

        // 项目改变事件
        form.on('select(服务器)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            if (value != "") {
                加载数据库(value);
            }
        });

        window.加载下拉选项 = function () {
            加载渠道();
        }

        window.加载数据 = function (data) {
            加载渠道();
            加载项目(data["渠道ID"]);
            加载服务器(data["项目ID"]);
            加载数据库(data["服务器ID"])
            form.val('ff',data );
        }

    })
</script>