juipnet/Host/Views.Mobile/LineList/Index.cshtml

@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using Hncore.Pass.Vpn.Service
@inject ProductService m_ProductService
@model List<ProductRouteEntity>
@{
    var pid = this.Context.Request.GetInt("ProductId");
    var product = ViewData["products"] as List<ProductEntity>;
    var currentProduct = (await m_ProductService.GetById(pid)) ?? new ProductEntity();
    var lineTotalCount = Model.Count;
    var lineCount = Model.Where(m => m.Status == "正常").Count();
}
<div id="app">
<div class="quanjushousuo">
        <p><input type="text" v-model="search_all_data" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" /><button type="submit"  v-on:click="search_all()" class="btnOrange">搜索全部</button></p>
        <p><img src="~/m/img/shuju.png"> 实时总线路：@(lineTotalCount)条 <img src="~/m/img/shuju.png"> 实时可用线路：@(lineCount)条</p>
        <p>所有线路均支持：【电脑/安卓/苹果】【PPTP/L2TP/SSTP】</p>
</div>

<div class="zhilian">
    <div class="item">
        <span class="btnZhilian">
            <a asp-index="" asp-controller="article" asp-route-Catalog="4"><img src="~/m/img/zhilian.png">直连教程</a>
        </span>
    </div>
    <div class="item">
        <p class="grayText" style="font-size: 25px;">线路表与账号必须为同一产品才能使用</p>
        <a href="/linelist/index2" style="font-size: 25px;">查看老版本服务器</a>
    </div>
</div>

<div class="lineBar"></div>

<div class="cpList">
    <ul>
        @foreach (var item in product.Where(m => m.Id != 3 && m.Id != 7 && m.Id != 9))
        {
            <li v-on:click="select_product(@item.Id)" id="product-@item.Id"  class="item @(item.Id==pid?"cpActive":"")" a-pid="@item.Id" a-name="@item.Name">@item.Name</li>
        }
    </ul>
</div>

<div class="dangqianshousuo">
        <p>
            <input type="hidden" name="ProductId" id="ProductId" value="@pid" />
            <input type="text" v-model="search_product_data" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" />
            <button   v-on:click="search_product()" type="submit" class="btnBlue">搜索当前</button>
        </p>
</div>

<div class="daochu">
    <div class="item">
        <p><img src="~/m/img/miyao.png"> L2TP密钥：{{l2tp}}</p>
        <p><img src="~/m/img/dk.png"> SSTP端口：{{sstp}}</p>
    </div>
    <div class="item">
        <span  v-on:click="export_data()"><img src="~/m/img/excel.png"> 导出Excel</span>
    </div>
</div>

<div class="tableTit">
    <div class="item">
        地区
    </div>
    <div class="item">
        运营商
    </div>
    <div class="item">
        服务器域名
    </div>
    <div class="item">
        详情
    </div>
</div>

<div class="cityData"  v-for="site in table_data" :style="(site.online=='故障')?'color:#ec5656;':''">
    <div class="item" v-if="site.online==null" style="color:#993399">{{site.city}}</div>                   
    <div class="item" v-if="site.online!=null">{{site.city}}</div>                   
    <div class="item">{{site.supply}}</div>
    <div class="item">{{site.nasname}}</div>
    <div class="item">
        <button type="button" v-on:click="detail(site)" class="btnDetail">详情</button>
    </div>
</div>



<!-- 弹窗详情 -->
<div class="layerTable">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>产品：</td>
            <td>{{info.name}}</td>
        </tr>
        <tr>
            <td>城市：</td>
            <td>{{info.city}}</td>
        </tr>
        <tr>
            <td>运营商：</td>
            <td>{{info.supply}}</td>
        </tr>
        <tr>
            <td>服务器域名：</td>
            <td>{{info.nasname}}</td>
        </tr>
        <tr>
            <td>IP量：</td>
            <td>{{info.ip}}</td>
        </tr>
        <tr>
            <td>实时带宽：</td>
            <td>{{info.daikuan}}</td>
        </tr>
        <tr>
            <td>维护状态：</td>
            <td>{{info.online}}</td>
        </tr>   
        <tr>
            <td>负载状态：</td>
            <td>{{info.status}}</td>
        </tr>      
    </table>
    <div v-on:click="back()" class="back">
        <img src="~/m/img/arrowback.png"> 返回列表
    </div>
</div>
</div>

<script type="text/javascript">
    
    var app = new Vue({
        el: '#app',
        data: {
            table_data: [],
            search_all_data: '',
            search_product_data:'',
            product_id:0,
            l2tp:'',
            search_field:'',
            sstp:'',
            info: {}
        },
        computed: {

        },
        watch: {
            
        },
        created: function () {
            this.select_product(0);
        },
        methods: {
            select_product(ProductId){
                this.product_id = ProductId;
                let datalist = [];
                $("li").removeClass("cpActive");
                $("#product-"+ProductId).addClass("cpActive");
                switch(ProductId){
                    case 2:
                        this.l2tp = '123';
                        this.search_field = '讯连pptp';
                        this.sstp = '1500';
                    break;
                    case 4:
                        this.l2tp = '123456';
                        this.search_field = '金瑞pptp';
                        this.sstp = '4438';
                    break;
                    case 5:
                        this.l2tp = 'ipdd';
                        this.search_field = '老鹰pptp';
                        this.sstp = '4430';
                    break;
                    case 6:
                        this.l2tp = '123';
                        this.search_field = '先锋pptp';
                        this.sstp = '6665';
                    break;
                    case 10:
                        this.l2tp = '88';
                        this.search_field = '无限-单窗口单ip';
                        this.sstp = '';
                    break;
                    case 13:
                        this.l2tp = '123456';
                        this.search_field = '极客pptp';
                        this.sstp = '4433';
                    break;
                    case 14:
                        this.l2tp = '91ip';
                        this.search_field = '天天pptp';
                        this.sstp = '4430';
                    break;
                    case 15:
                        this.l2tp = '66';
                        this.search_field = '共享IP';
                        this.sstp = '888';
                    break;
                    case 16:
                        this.l2tp = '8899';
                        this.search_field = '实惠IP';
                        this.sstp = '不支持';
                    break;
                    case 1:
                        this.l2tp = '888888';
                        this.search_field = '强子pptp';
                        this.sstp = '1500';
                    break;
                    case 8:
                        this.l2tp = '88';
                        this.search_field = '星星pptp';
                        this.sstp = '6666';
                    break;
                }
                $.ajax({
                    type: 'GET',
                    url: 'http://php-api.juip.com/script/linedata/display.php?product=' + ProductId,
                    dataType: "json",
                    async:false,
                    success: function (res) {
                        datalist = res.data; 
                    }
                });
                this.table_data = datalist;
            },
            search_all(){
                if(!this.search_all_data){
                    this.select_product(0);
                    return;
                }
                $.ajax({
                    type: 'GET',
                    url: 'http://php-api.juip.com/script/linedata/search.php?type=1&info=' + this.search_all_data,
                    dataType: "json",
                    async:false,
                    success: function (res) {
                        datalist = res.data; 
                    }
                });
                this.table_data = datalist;
            },
            search_product(){
                if(!this.search_product_data){
                    this.select_product(this.product_id);
                    return;
                }
                $.ajax({
                    type: 'GET',
                    url: 'http://php-api.juip.com/script/linedata/search.php?type=0&productid='+this.product_id+'&info=' + this.search_product_data,
                    dataType: "json",
                    async:false,
                    success: function (res) {
                        datalist = res.data; 
                    }
                });
                this.table_data = datalist;
            },
            export_data(){
                switch(this.product_id){
                    case 0:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/all.csv';
                    break;
                    case 2:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/xunlian.csv';
                    break;
                    case 4:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/jinrui.csv';
                    break;
                    case 5:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/laoying.csv';
                    break;
                    case 6:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/xianfeng.csv';
                    break;
                    case 10:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/wuxian.csv';
                    break;
                    case 13:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/jike.csv';
                    break;
                    case 14:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/tiantian.csv';
                    break;
                    case 15:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/gongxiang.csv';
                    break;
                    case 16:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/shihui.csv';
                    break;
                    case 1:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/qiangzi.csv';
                    break;
                    case 8:
                        self.location.href='http://php-api.juip.com/script/linedata/data/download/xingxing.csv';
                    break;
                }
            },
            detail(r){
                $(".layerTable").show();
                this.info= r;
            },
            back(){
                $(".layerTable").hide();
            }
        }
    })
</script>