<!DOCTYPE html>
<html lang="zh">
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>移动端告警处理</title>
    <link rel="shortcut icon" href="/aicsp/profile/upload/2026/09/29/c297773d-005b-4da7-b95e-0c04f25b3018.png">
    <link href="/aicsp/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/aicsp/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/aicsp/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
    <link href="/aicsp/css/animate.css" rel="stylesheet"/>
    <link href="/aicsp/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/aicsp/ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>

    <style>
        html,
        body {
            min-height: 100%;
            background: #f3f6fa;
        }

        body.mobile-process-page {
            margin: 0;
            color: #172033;
            padding-bottom: calc(180px + env(safe-area-inset-bottom));
            -webkit-font-smoothing: antialiased;
        }

        .mobile-shell {
            width: 100%;
            max-width: 720px;
            margin: 0 auto;
            padding: 12px 12px 16px;
        }

        .mobile-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 2px 14px;
        }

        .mobile-title {
            min-width: 0;
        }

        .mobile-title h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.25;
            color: #172033;
        }

        .mobile-title p {
            margin: 6px 0 0;
            font-size: 12px;
            line-height: 1.35;
            color: #6b7280;
            word-break: break-all;
        }

        .status-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            min-width: 64px;
            height: 30px;
            padding: 0 11px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .status-chip.pending {
            color: #9a3412;
            background: #fff7ed;
            border-color: #fed7aa;
        }

        .status-chip.done {
            color: #047857;
            background: #ecfdf5;
            border-color: #a7f3d0;
        }

        .event-visual {
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 8px;
            background: #0f172a;
            border: 1px solid rgba(15, 23, 42, 0.08);
        }

        .event-visual img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }

        .mobile-panel {
            margin-top: 12px;
            padding: 14px;
            background: #fff;
            border: 1px solid #e5e9f0;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .panel-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: #172033;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .info-item {
            min-width: 0;
            padding: 10px;
            border-radius: 8px;
            background: #f8fafc;
        }

        .info-item.full {
            grid-column: 1 / -1;
        }

        .info-label {
            margin-bottom: 5px;
            color: #7b8495;
            font-size: 11px;
            line-height: 1.2;
        }

        .info-value {
            min-height: 18px;
            color: #172033;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.45;
            word-break: break-all;
        }

        .feedback-options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .feedback-card {
            display: block;
            position: relative;
            margin: 0;
            cursor: pointer;
        }

        .feedback-card input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
        }

        .feedback-content {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 52px;
            padding: 12px;
            border: 1px solid #d7dee8;
            border-radius: 8px;
            background: #fff;
            color: #374151;
            font-size: 14px;
            font-weight: 700;
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }

        .feedback-content .fa {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #eef2f7;
            color: #64748b;
        }

        .feedback-card.is-selected .feedback-content {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
        }

        .feedback-card.is-selected .feedback-content .fa {
            background: #2563eb;
            color: #fff;
        }

        .field-block {
            margin-top: 12px;
        }

        .field-label {
            display: block;
            margin-bottom: 7px;
            color: #475467;
            font-size: 13px;
            font-weight: 600;
        }

        .field-select,
        .field-textarea {
            width: 100%;
            padding: 11px 12px;
            border: 1px solid #d7dee8;
            border-radius: 8px;
            background: #fff;
            color: #172033;
            font-size: 14px;
            line-height: 1.5;
            box-shadow: none;
        }

        .field-select:focus,
        .field-textarea:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
            outline: none;
        }

        .field-textarea {
            min-height: 96px;
            resize: vertical;
        }

        .sticky-actions {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 20;
            padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
            background: rgba(243, 246, 250, 0.92);
            border-top: 1px solid rgba(213, 220, 231, 0.88);
            backdrop-filter: blur(10px);
        }

        .sticky-actions-inner {
            max-width: 720px;
            margin: 0 auto;
        }

        .submit-btn {
            width: 100%;
            height: 48px;
            border: 0;
            border-radius: 8px;
            background: #2563eb;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.26);
        }

        .submit-btn:disabled {
            opacity: .72;
            box-shadow: none;
        }

        .submit-btn .fa {
            margin-right: 7px;
        }

        .empty-state {
            margin: 60px 16px 0;
            padding: 24px 18px;
            border-radius: 8px;
            background: #fff;
            text-align: center;
            color: #6b7280;
            border: 1px solid #e5e9f0;
        }

        @media (max-width: 420px) {
            .mobile-shell {
                padding-left: 10px;
                padding-right: 10px;
            }

            .info-grid,
            .feedback-options {
                grid-template-columns: 1fr;
            }

            .mobile-title h1 {
                font-size: 18px;
            }
        }
    </style>
</head>
<body class="mobile-process-page">
<div class="empty-state">处理链接无效</div>




    <script> var ctx = "\/aicsp\/"; var lockscreen = null; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>
    <a id="scroll-up" href="#" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/aicsp/js/jquery.min.js"></script>
    <script src="/aicsp/js/bootstrap.min.js"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/aicsp/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20210202"></script>
    <script src="/aicsp/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
    <script src="/aicsp/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js?v=20210202"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/aicsp/ajax/libs/validate/jquery.validate.min.js"></script>
    <script src="/aicsp/ajax/libs/validate/messages_zh.min.js"></script>
    <script src="/aicsp/ajax/libs/validate/jquery.validate.extend.js"></script>
    <!-- jquery-validate 表单树插件 -->
    <script src="/aicsp/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <!-- 遮罩层 -->
    <script src="/aicsp/ajax/libs/blockUI/jquery.blockUI.js"></script>
    <script src="/aicsp/ajax/libs/iCheck/icheck.min.js"></script>
    <script src="/aicsp/ajax/libs/layer/layer.min.js"></script>
    <script src="/aicsp/ajax/libs/layui/layui.js"></script>
    <script src="/aicsp/ruoyi/js/common.js?v=4.6.0"></script>
    <script src="/aicsp/ruoyi/js/ry-ui.js?v=4.6.0"></script>

<script>
    var prefix = ctx + "pc/pc_algo_config_alarm";
    var processParams = "";
    var submitting = false;

    $(function () {
        refreshFeedbackState();
        showRemarkIfNeeded();
        $("input[name='alarmEvent']").on("change", function () {
            refreshFeedbackState();
            showRemarkIfNeeded();
        });
    });

    function getSelectedAlarmEvent() {
        return $("input[name='alarmEvent']:checked").val();
    }

    function refreshFeedbackState() {
        $(".feedback-card").removeClass("is-selected");
        $("input[name='alarmEvent']:checked").closest(".feedback-card").addClass("is-selected");
    }

    // 处理详情（alarm_event_have_situation）仅在选中"有情况"时展示，与PC端处理弹窗保持一致
    function showRemarkIfNeeded() {
        var selected = getSelectedAlarmEvent();
        if (selected === "2") {
            $("#remarkBlock").show();
        } else {
            $("#remarkBlock").hide();
            $("#remarkValue").val("");
        }
    }

    function submitMobileProcess() {
        if (submitting) {
            return;
        }
        var selected = getSelectedAlarmEvent();
        var remarkValue = $.trim($("#remarkValue").val());
        var reason = $.trim($("#reason").val());
        if (!selected) {
            layer.msg("请选择处理结果", {icon: 2});
            return;
        }
        if (selected === "2" && !remarkValue) {
            layer.msg("请选择处理详情", {icon: 2});
            return;
        }
        setSubmitState(true, "提交中");
        $.ajax({
            url: prefix + "/mobile/process",
            type: "post",
            dataType: "json",
            data: {
                params: processParams,
                alarmEventValue: selected,
                remarkValue: remarkValue,
                reason: reason
            },
            success: function (result) {
                if (Number(result.code) === 0) {
                    $("#dealStatusChip").removeClass("pending").addClass("done").text("已处理");
                    $("#currentDealText").text("已处理");
                    layer.msg(result.msg || "处理成功", {icon: 1, time: 1200});
                    setSubmitState(false, "重新提交");
                    return;
                }
                layer.msg(result.msg || "处理失败", {icon: 2});
                setSubmitState(false, "提交处理");
            },
            error: function () {
                layer.msg("请求失败，请稍后再试", {icon: 2});
                setSubmitState(false, "提交处理");
            }
        });
    }

    function setSubmitState(isSubmitting, text) {
        submitting = isSubmitting;
        $("#submitBtn").prop("disabled", isSubmitting);
        $("#submitBtn .btn-text").text(text);
    }
</script>
</body>
</html>
