juipnet/Host/Views.Mobile/User/Online.cshtml

@using Home.Models
@using Hncore.Pass.BaseInfo.Response
@using Hncore.Pass.Vpn.Model 
@using Hncore.Infrastructure.Extension
@model List<OriginAccountOnlineModel>
@{
    Layout = "_Layout";
    var productId = this.Context.Request.GetInt("productId");
}
<style type="text/css">

    body {
        background: #f5f5f5;
    }

    .msg {
        margin-top: 1.466666rem;      
    }

    .lineBar {
        background: #3c5eb5;
        width: 5px;
        height: 30px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }

    .accout_tit {
        height: 1.2rem;
        line-height: 1.2rem;
        border-bottom: 1px solid #eee;
        font-size: 30px;
    }

    .model {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 0.933333rem;
        line-height: 0.933333rem;
        background: #fff;
        flex-wrap: wrap;
        height: auto;
    }

        .model .item {
            border-bottom: 1px solid #f5f5f5;
            height: 0.933333rem;
            line-height: 0.933333rem;
        }

            .model .item:nth-child(odd) {
                width: 30%;
                text-align: right;
            }

            .model .item:nth-child(even) {
                width: 70%;
                text-align: center;
                color: #ccc;
            }

    .red {
        color: red;
    }
    .inputBox {
        width: 330px;
    }
</style>
<vc:redirecct-login></vc:redirecct-login>
<div class="container msg">
    @if (Model.Count == 0)
    {
        <div class="red" style="text-align:center">暂无数据</div>
    }
    @foreach (var item in Model)
    {
    <div class="accout_tit"><span class="lineBar"></span>#@(Model.IndexOf(item)+1)  <button class="btnXq" onclick="killout(@item.Id)">强制离线</button> </div>
        <div class="model">
            <div class="item">
                账号：
            </div>
            <div class="item">
               @item.Account
            </div>
            <div class="item">
                登录时间：
            </div>
            <div class="item">
                @item.LoginTime
            </div>
            <div class="item">
                在线时间：
            </div>
            <div class="item">
                @item.OnlineTime
            </div>
            <div class="item">
                服务器Ip：
            </div>
            <div class="item">
                @item.ServerIP
            </div>
            <div class="item">
                登录ip：
            </div>
            <div class="item">
                @item.LoginIP
            </div>
            <div class="item">
                上/下行：
            </div>
            <div class="item">
                @item.UpStream / @item.UpStream
            </div>
        </div>
    }

</div>
<script>
    /** 表单序列化成json字符串的方法  */
    function form2JsonString(formId) {
        var paramArray = $('#' + formId).serializeArray();
        var jsonObj = {};
        $(paramArray).each(function () {
            jsonObj[this.name] = this.value;
        });
        console.log(jsonObj);
        return JSON.stringify(jsonObj);
    }
    function  killout(productId,id) {
        var that = this;
        $.ajax({
            type: 'GET',
            url: '/api/course/v1/productaccount/KillOut?productId=@productId&id=' + id,
            success: function (res) {
                if (res.Code == 10000) {
                    alert("操作成功");
                    window.location.reload();
                }
            }
        });
    }
</script>