<!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="">
	<meta name="csrf-token"/>
	<title>移动端告警处理</title>
	<link href="/css/bootstrap.min.css?v=3.4.1" rel="stylesheet"/>
	<link href="/css/font-awesome.min.css?v=4.7.0" rel="stylesheet"/>
	<!-- bootstrap-table 表格插件样式 -->
	<link href="/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.24.1" rel="stylesheet"/>
	<link href="/css/animate.min.css?v=20210831" rel="stylesheet"/>
	<link href="/css/style.min.css?v=20250731" rel="stylesheet"/>
	<link href="/ruoyi/css/ry-ui.css?v=4.8.3" rel="stylesheet"/>

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

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

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

        .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;
        }

        .action-record-wrap {
            position: relative;
        }

        .action-record {
            width: 100%;
            min-height: 142px;
            padding: 12px;
            border: 1px solid #d7dee8;
            border-radius: 8px;
            color: #172033;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
            box-shadow: none;
        }

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

        .record-counter {
            margin-top: 7px;
            text-align: right;
            color: #7b8495;
            font-size: 11px;
        }

        .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;
            letter-spacing: 0;
            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 = "\/"; var lockscreen = null; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>
    <a id="scroll-up" href="javascript:;" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
	<script src="/js/jquery.min.js?v=3.7.1"></script>
	<script src="/js/bootstrap.min.js?v=3.4.1"></script>
	<!-- bootstrap-table 表格插件 -->
	<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.24.1"></script>
	<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.24.1"></script>
	<script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.24.1"></script>
	<!-- jquery-validate 表单验证插件 -->
	<script src="/ajax/libs/validate/jquery.validate.min.js?v=1.21.0"></script>
	<script src="/ajax/libs/validate/jquery.validate.extend.js?v=1.21.0"></script>
	<script src="/ajax/libs/validate/messages_zh.js?v=1.21.0"></script>
	<!-- bootstrap-table 表格树插件 -->
	<script src="/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.24.1"></script>
	<!-- 遮罩层 -->
	<script src="/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
    <script src="/ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
	<script src="/ajax/libs/layer/layer.min.js?v=3.7.0"></script>
	<script src="/ajax/libs/layui/layui.min.js?v=2.8.18"></script>
	<script src="/ruoyi/js/common.js?v=4.8.3"></script>
	<script src="/ruoyi/js/ry-ui.js?v=4.8.3"></script>

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

    $(function() {
        refreshFeedbackState();
        refreshCounter();
        $("input[name='feedback']").on("change", refreshFeedbackState);
        $("#actionRecord").on("input", refreshCounter);
    });

    // 刷新移动端处理结果选中态
    function refreshFeedbackState() {
        $(".feedback-card").removeClass("is-selected");
        $("input[name='feedback']:checked").closest(".feedback-card").addClass("is-selected");
    }

    // 刷新行动记录字数
    function refreshCounter() {
        $("#recordLength").text(($("#actionRecord").val() || "").length);
    }

    // 提交移动端告警处理表单
    function submitMobileProcess() {
        if (submitting) {
            return;
        }
        var id = $.trim($("input[name='id']").val());
        var feedback = $("input[name='feedback']:checked").val();
        var actionRecord = $.trim($("#actionRecord").val());
        if (!id) {
            layer.msg("未找到告警记录", {icon: 2});
            return;
        }
        if (!feedback) {
            layer.msg("请选择处理结果", {icon: 2});
            return;
        }
        if (!actionRecord) {
            layer.msg("请填写行动记录", {icon: 2});
            return;
        }
        if (actionRecord.length > 1000) {
            layer.msg("行动记录不能超过1000个字符", {icon: 2});
            return;
        }
        setSubmitState(true, "提交中");
        var processParams = $.trim($("input[name='processParams']").val());
        var requestUrl = processParams ? (prefix + "/mobile/process") : (prefix + "/process");
        var requestData = {
            id: id,
            feedback: feedback,
            actionRecord: actionRecord
        };
        if (processParams) {
            requestData.params = processParams;
            delete requestData.id;
        }
        $.ajax({
            url: requestUrl,
            type: "post",
            dataType: "json",
            data: requestData,
            success: function(result) {
                if (Number(result.code) === 0) {
                    $("#dealStatusChip").removeClass("pending").addClass("done").text("已处理");
                    $("#readStatusChip").removeClass("pending").addClass("done").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);
    }

    // 打开告警截图预览
    function showImage() {
        var imagePath = $("#eventImage").attr("src");
        if (!imagePath) {
            return;
        }
        layer.photos({
            photos: {
                title: "",
                start: 0,
                data: [{
                    alt: "告警截图",
                    pid: 1,
                    src: imagePath
                }]
            },
            closeBtn: 2,
            footer: false
        });
    }
</script>
</body>
</html>
