Files
juipnet/Host/Views/LineList/Index.cshtml
“wanyongkang” c66a3839b5 线路表水滴显示
2024-04-10 16:31:36 +08:00

611 lines
23 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@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="loading">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</div>
<style>
.loader {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.loader-inner {
bottom: 0;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap {
animation:
spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
@@keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<style>
.blueLine img {
display: inline !important;
}
table,table tr th,td {
border:1px solid #ccc;
}
</style>
<div id="app">
<div class="container-fluid" style="background-color:#f7f6f7;">
<div class="container">
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-12 text-center" style="padding: 10px 0 0 0;">
<p class="hot" style="padding: 3px;margin:0;color:#00a63f;">*线路表和账号必须为同一产品才能使用。</p>
<p class="hot" style="padding: 3px;margin:0;color:#00a63f;">*请优先选择客户端连接 <a style="color:#0777ff;" href="/product/soft"><<<下载客户端>>></a> </p>
<p class="hot" style="padding: 3px;margin:0;color:#00a63f;">*无对应客户端时,可通过线路表直连支持所有设备<a style="color:#0777ff;" href="/article/index"><<<教程&帮助>>></a></p>
<br>
</div>
</div>
</div>
</div>
<div class="container">
<div class="xianlu" style="padding-top: 2em;">
@foreach (var item in product.Where(m => m.Id != 3 && m.Id != 7 && m.Id != 9&& m.Id != 20&& m.Id != 21).OrderBy(m=>m.Sort))
{
<div style="background-color:#00a63f;" v-on:click="select_product(@item.Id)" id="product-@item.Id" class="item @(item.Id==pid?"blueLine":"")" a-pid="@item.Id" a-name="@item.Name">
<span>@item.Name</span><img src="~/img/check.png">
</div>
}
</div>
</div>
<div class="container">
<div class="row">
<div class="text-center">
<div style="margin-bottom: 10px;">
<span style="width:5em;height:37px;background:#00a63f;color:white;padding: 10px 0 10px 12px;">{{search_field}}
<input style="width:50%;margin:0;color:black;" v-on:keyup.13="search_product()" type="text" v-model="search_product_data" name="KeyWord" class="searchDq" placeholder="输入地区/名称/服务器" />
</span>
<button v-on:click="search_product()" class="btn btn-primary" style="margin-left:20px;">搜索当前线路表</button>
<span class="daochu" v-on:click="export_data()" ><img src="~/img/excel.png">导出Excel</span>
</div>
</div>
<div style="margin:20px 0;">
<div style="color: red;line-height:50%;" v-if="product_id ==1|| product_id==2">
<p style="text-align:center;">
<span style="font-size: 20px;color:#FF0033;">{{search_field}}</span> 用服务器地址直连用户请注意:
</p>
<p>因电信联通机房限制此协议会存在个别地区直连无法连接电脑客户端和安卓APP不受影响。</p>
<p v-if="product_id ==1">解决方法IP账号后边输入@@特征码例如您的IP账号为zx1234要用sstp直连温州的那账号框就输入zx1234@zjwz服务器输入任意一个全国混拨的服务器则会连接到温州。</p>
<p v-if="product_id==2">解决方法IP账号后边输入@@特征码例如您的IP账号为zx1234要用sstp直连三亚的那账号框就输入zx1234@hnsy服务器输入任意一个全国混拨的服务器则会连接到三亚。</p>
</div>
<div style="color: #CC3333;line-height:50%;text-align:center;font-size:20px;" v-if="product_id ==19">
<p>该产品切记一定要指定一下地区,不然会没有网络</p>
</div>
<div style="color: red;line-height:50%;text-align:center;font-size:20px;" v-if="product_id ==22">
<p>静态线路里面名称不带宽带字样的线路ip是相对固定不变的。</p>
<p>只要线路名称里面带“宽带”两个字的是完全模拟家庭宽带网络的线路和家庭宽度网络一样一般1-2天不等自动换一次ip</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 miyao">
<p style="font-size:13px;color:#00a63f;font-weight: bold;"><img src="~/img/miyao.png"> L2TP密钥<b style="color:red;">{{l2tp}}</b></p>
<p style="font-size:13px;color:#00a63f;font-weight: bold;"><img src="~/img/dk.png"> SSTP端口<b style="color:red;">{{sstp}}</b></p>
</div>
<div class="col-lg-10">
<p style="margin:0 0 0 10px;font-size:15px;color:#00a63f;font-weight: bold;"><img src="~/img/shuju.png">实时总线路:{{count}}条<img src="~/img/shuju.png">实时可用线路:{{use_count}}条</p>
<p style=" font-size:15px;color:#FF0033;margin-bottom:30px;color:#00a63f;font-weight: bold;">{{search_field}}-每5分钟更新一次,禁止频繁访问!https://php-api.juip.com/script/linedata/display.php?product={{product_id}}</p>
</div>
</div>
</div>
<div class="container" >
<table class="table table-striped xianluTable" style="margin-bottom: 10px;">
<tr>
<th>产品</th>
<th>城市</th>
<th v-if="product_id ==19">剩余拨数</th>
<th v-else="product_id ==19">运营商</th>
<th>服务器域名</th>
<th>IP量</th>
<th>实时带宽</th>
<th>维护状态</th>
<th v-if="product_id ==1|| product_id==2">特征码</th>
<th v-else="product_id ==1|| product_id==2">负载状态</th>
</tr>
<tr v-for="site in table_data" :style="(site.online=='故障')?'color:#ec5656;':''">
<td>{{site.name}}</td>
<td colspan="7" v-if="!site.nasname" style="color:#339933;font-weight:bold;">{{site.city}}</td>
<td v-if="site.nasname">{{site.city}}</td>
<td v-if="site.nasname">{{site.supply}}</td>
<td v-if="site.nasname">{{site.nasname}}</td>
<td v-if="site.nasname">{{site.ip}}</td>
<td v-if="site.nasname">{{site.daikuan}}</td>
<td v-if="site.nasname">{{site.online}}</td>
<td v-if="site.nasname">{{site.status}}</td>
</tr>
</table>
<div id="more" v-if="!is_all && (product_id == 0)" class="text-center" style="margin-bottom: 20px;">
<button @@click="get_index_data()" type="button" class="btn btn-link" style="font-size:25px;">
------------------------------------------更多
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-double-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
------------------------------------------
</button>
</div>
</div>
<div class="visible-lg text-center text-new" style="position:fixed;left:9px;top:30%;color:#00a63f !important;cursor:pointer;width:14%;background-color:white;">
<table class="table table-striped " >
<tr>
<th>产品</th>
<th>L2TP秘钥</th>
<th>SSTP端口</th>
</tr>
<tr>
<td>蘑菇</td>
<td onclick ='navigator.clipboard.writeText(8899);' >8899</td>
<td>4430</td>
</tr>
<tr>
<td>麒麟</td>
<td>123</td>
<td>4432</td>
</tr>
<tr>
<td>猎豹</td>
<td>1234</td>
<td>4430</td>
</tr>
<tr>
<td>先锋</td>
<td>6666</td>
<td>889</td>
</tr>
<tr>
<td>强子</td>
<td>888888</td>
<td>1500</td>
</tr>
<tr>
<td>讯连</td>
<td>123</td>
<td>1500</td>
</tr>
<tr>
<td>云牛</td>
<td>888888</td>
<td>5908</td>
</tr>
<tr>
<td>西瓜</td>
<td>123456</td>
<td>4433</td>
</tr>
<tr>
<td>天天</td>
<td>1234</td>
<td>4430</td>
</tr>
<tr>
<td>极客</td>
<td>123456</td>
<td>4433</td>
</tr>
<tr>
<td>水滴独享</td>
<td>123</td>
<td>4432</td>
</tr>
<tr>
<td>火狐静态</td>
<td>888888</td>
<td>5908</td>
</tr>
<tr>
<td>强子静态</td>
<td>888888</td>
<td>1500</td>
</tr>
</table>
</div>
</div>
<script src="~/js/vue.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){
$("#loading").hide();
},500);
});
var app = new Vue({
el: '#app',
data: {
table_data: [],
search_all_data: '',
search_product_data:'',
product_id:0,
l2tp:'',
search_field:'全部',
sstp:'',
count:0,
use_count:0,
all_data: [],
is_all: false
},
computed: {
},
watch: {
},
created: function () {
this.select_product(0);
},
methods: {
select_product(ProductId){
this.product_id = ProductId;
let datalist = [];
let count = 0;
let use_count = 0;
$("div").removeClass("blueLine");
$("#product-"+ProductId).addClass("blueLine");
switch(ProductId){
case 2:
this.l2tp = '123';
this.search_field = '讯连IP';
this.sstp = '1500';
break;
case 4:
this.l2tp = '123456';
this.search_field = '金瑞IP';
this.sstp = '4438';
break;
case 5:
this.l2tp = '123';
this.search_field = '老鹰IP';
this.sstp = '4430';
break;
case 6:
this.l2tp = '6666';
this.search_field = '先锋IP';
this.sstp = '889';
break;
case 10:
this.l2tp = '88';
this.search_field = '无限-单窗口单ip';
this.sstp = '';
break;
case 13:
this.l2tp = '123456';
this.search_field = '极客IP';
this.sstp = '4433';
break;
case 17:
this.l2tp = '123456';
this.search_field = '西瓜IP';
this.sstp = '4433';
break;
case 14:
this.l2tp = '1234';
this.search_field = '天天IP';
this.sstp = '4430';
break;
case 26:
this.l2tp = '1234';
this.search_field = '猎豹IP';
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 = '强子IP';
this.sstp = '1500';
break;
case 8:
this.l2tp = '88';
this.search_field = '星星IP';
this.sstp = '6666';
break;
case 18:
this.l2tp = '8899';
this.search_field = '蘑菇IP';
this.sstp = '4430';
break;
case 22:
this.l2tp = '888888';
this.search_field = '火狐IP';
this.sstp = '5908';
break;
case 23:
this.l2tp = '888888';
this.search_field = '云牛IP';
this.sstp = '5908';
break;
case 25:
this.l2tp = '888888';
this.search_field = '强子静态IP';
this.sstp = '1500';
break;
case 27:
this.l2tp = '123';
this.search_field = '麒麟IP';
this.sstp = '4432';
break;
case 28:
this.l2tp = '123';
this.search_field = '水滴独享IP';
this.sstp = '4432';
break;
}
$.ajax({
type: 'GET',
url: 'https://php-api.juip.com/script/linedata/display.php?product=' + ProductId,
dataType: "json",
async:false,
success: function (res) {
datalist = res.data;
count = res.count;
use_count = res.use_count;
}
});
if (ProductId == 0){
this.all_data = datalist;
let now_data = [];
for (let i = 0;i<50;i++){
now_data[i] = datalist[i];
}
this.table_data = now_data;
} else {
this.table_data = datalist;
}
this.count = count;
if(ProductId != 16){
this.use_count = use_count;
} else {
this.use_count = count;
}
},
get_index_data(){
this.table_data = this.all_data;
this.is_all = true;
},
search_all(){
$('#more').hide();
this.is_all = true;
if(!this.search_all_data){
this.select_product(0);
return;
}
$.ajax({
type: 'GET',
url: 'https://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(){
$('#more').hide();
if(!this.search_product_data){
this.select_product(this.product_id);
return;
}
$.ajax({
type: 'GET',
url: 'https://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='https://php-api.juip.com/script/linedata/data/download/all.csv';
break;
case 2:
self.location.href='https://php-api.juip.com/script/linedata/data/download/xunlian.csv';
break;
case 4:
self.location.href='https://php-api.juip.com/script/linedata/data/download/jinrui.csv';
break;
case 5:
self.location.href='https://php-api.juip.com/script/linedata/data/download/laoying.csv';
break;
case 6:
self.location.href='https://php-api.juip.com/script/linedata/data/download/xianfeng.csv';
break;
case 10:
self.location.href='https://php-api.juip.com/script/linedata/data/download/wuxian.csv';
break;
case 13:
self.location.href='https://php-api.juip.com/script/linedata/data/download/jike.csv';
break;
case 17:
self.location.href='https://php-api.juip.com/script/linedata/data/download/xigua.csv';
break;
case 18:
self.location.href='https://php-api.juip.com/script/linedata/data/download/mogu.csv';
break;
case 14:
self.location.href='https://php-api.juip.com/script/linedata/data/download/tiantian.csv';
break;
case 15:
self.location.href='https://php-api.juip.com/script/linedata/data/download/gongxiang.csv';
break;
case 16:
self.location.href='https://php-api.juip.com/script/linedata/data/download/shihui.csv';
break;
case 1:
self.location.href='https://php-api.juip.com/script/linedata/data/download/qiangzi.csv';
break;
case 8:
self.location.href='https://php-api.juip.com/script/linedata/data/download/xingxing.csv';
break;
case 17:
self.location.href='https://php-api.juip.com/script/linedata/data/download/xigua.csv';
break;
case 18:
self.location.href='https://php-api.juip.com/script/linedata/data/download/mogu.csv';
break;
case 22:
self.location.href='https://php-api.juip.com/script/linedata/data/download/huohu.csv';
break;
case 23:
self.location.href='https://php-api.juip.com/script/linedata/data/download/yunniu.csv';
break;
case 25:
self.location.href='https://php-api.juip.com/script/linedata/data/download/qiangzijt.csv';
break;
case 26:
self.location.href='https://php-api.juip.com/script/linedata/data/download/liebao.csv';
break;
case 27:
self.location.href='https://php-api.juip.com/script/linedata/data/download/qilin.csv';
break;
case 28:
self.location.href='https://php-api.juip.com/script/linedata/data/download/qilinjt.csv';
break;
}
}
}
})
</script>