水滴上线
This commit is contained in:
“wanyongkang”
@@ -32,6 +32,13 @@
|
||||
});
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.bg_blue {
|
||||
background-color: #2955b3;
|
||||
color:white;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
<div id="app">
|
||||
@*<div class="qq">
|
||||
@@ -105,6 +112,7 @@
|
||||
<td>@item.Account</td>
|
||||
<td>
|
||||
<button type="button" class="btnXq toDetail"
|
||||
a-Id="@item.Id"
|
||||
a-UserCode="@item.UserCode"
|
||||
a-ProductName="@item.ProductName"
|
||||
a-PackageName="@item.PackageName"
|
||||
@@ -113,7 +121,9 @@
|
||||
a-ConnectCount="@item.ConnectCount"
|
||||
a-StartTime='@item.StartTime.Value.ToString("yyyy.M.dd H:m")'
|
||||
a-EndTime='@item.EndTime.Value.ToString("yyyy.M.dd H:m")'
|
||||
a-RestTime="@item.RestTime">
|
||||
a-RestTime="@item.RestTime"
|
||||
a-Remark="@item.Remark"
|
||||
a-Raw="@item.Raw">
|
||||
详情
|
||||
</button>
|
||||
<a class="btnXq" asp-action="OnLine" asp-controller="User" asp-route-productId="@item.ProductId" asp-route-account="@item.Account">
|
||||
@@ -251,6 +261,14 @@
|
||||
<td>密码：</td>
|
||||
<td>{{currentAccount.Pwd}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ip地址:</td>
|
||||
<td>{{currentAccount.Remark}}<a v-on:click="change_ip(currentAccount.Id,currentAccount.PackageName,currentAccount.Account,currentAccount.Remark)" data-toggle="modal" data-target="#change_ip_city">切换</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>服务器：</td>
|
||||
<td>{{currentAccount.Raw}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>连接数：</td>
|
||||
<td>{{currentAccount.ConnectCount}}</td>
|
||||
@@ -273,6 +291,68 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /切换地区 -->
|
||||
<div class="modal fade" id="change_ip_city" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document" style="width:80%">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">水滴切换地区和ip</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#city" data-toggle="tab">
|
||||
切换地区
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#ip" v-on:click="selsect_ip()" data-toggle="tab">切换IP</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="myTabContent" class="tab-content" style="padding-top:30px;">
|
||||
<div class="tab-pane fade in active" id="city">
|
||||
<div class="row ">
|
||||
<div class="col-sm-3 text-center" style="height:470px;overflow:auto;overflow-x: hidden;">
|
||||
<label style="border:1px solid #00a63f;padding:3px;width:100%;margin:2px;"><input name="allprovince" @@change="select_all_province()" type="checkbox"> 全部</label>
|
||||
<label v-for="(item,index) in province_city.province_surplus_outs" :key="index" style="border:1px solid #00a63f;padding:3px;width:100%;margin:2px"><input v-model="province" name="province" :value="index" type="checkbox" @@change="select_province()">{{item.en_name}}({{item.total}})</label>
|
||||
</div>
|
||||
<div class="col-sm-9" style="font-size:13px;height:453px;overflow:auto;">
|
||||
<div class="col-sm-4 diqu" v-for="(item,index) in citys" :key="index" :class="'select_addr'+index" v-on:click="selsect_adddr_num(item.province+'-'+item.rid+'-100',index)" style="padding:5px;">
|
||||
<div style="border:1px solid #ddd;padding:5px;">
|
||||
<p v-if="item.isp_class == 0" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[多线]{{item.name}}</p>
|
||||
<p v-else-if="item.isp_class == 1" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[电信]{{item.name}}</p>
|
||||
<p v-else-if="item.isp_class == 2" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[联通]{{item.name}}</p>
|
||||
<p v-else-if="item.isp_class == 3" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[移动]{{item.name}}</p>
|
||||
<p v-else style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[未知]{{item.name}}</p>
|
||||
<hr style="margin:0;">
|
||||
<p style="padding:0;margin:0;">余量:{{item.total}} 延迟:{{item.ping}}ms</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="ip" >
|
||||
<p style="font-weight:bold;">当前IP：{{old_ip}}</p>
|
||||
<p style="font-weight:bold;">
|
||||
<select class="form-control " v-model="change_info.chinge_ip.ip_id" style="height:50px;font-size:15px;width:30%;">
|
||||
<option value="0">-请选择-</option>
|
||||
<option v-for="item in ip_list" :value="item.id">{{item.address}}</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" v-on:click="change_submit()" class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
@@ -367,6 +447,7 @@
|
||||
Count:0
|
||||
},
|
||||
currentAccount: {
|
||||
Id: "",
|
||||
UserCode: "",
|
||||
ProductName: "",
|
||||
PackageName: "",
|
||||
@@ -376,7 +457,32 @@
|
||||
StartTime: "",
|
||||
EndTime: "",
|
||||
RestTime: "",
|
||||
}
|
||||
Remark: "",
|
||||
Raw: "",
|
||||
},
|
||||
citys:[],
|
||||
shuidi:{
|
||||
'is_unshar':0, // 0 游戏独享 1 线路独享
|
||||
'game_id':0,
|
||||
'product_id':1,//1静态 2固态
|
||||
},
|
||||
province_city:[],
|
||||
province:[],
|
||||
change_info:{
|
||||
chinge_addr:{
|
||||
type:0,
|
||||
province_id:0,
|
||||
rid:0,
|
||||
account:'',
|
||||
},
|
||||
chinge_ip:{
|
||||
type:0,
|
||||
ip_id:0,
|
||||
account:'',
|
||||
},
|
||||
},
|
||||
old_ip:'',
|
||||
ip_list:[]
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -388,6 +494,133 @@
|
||||
this.getProducts();
|
||||
},
|
||||
methods: {
|
||||
change_ip(account_id,package,account,old_ip){
|
||||
this.province_city = [];
|
||||
let data = {
|
||||
cookie:document.cookie,
|
||||
data: account_id
|
||||
}
|
||||
|
||||
this.old_ip = old_ip
|
||||
|
||||
var pack = package.split('-');
|
||||
if (pack[0] == '静态') {
|
||||
this.shuidi.product_id = 0;
|
||||
} else {
|
||||
this.shuidi.product_id = 1;
|
||||
}
|
||||
|
||||
this.change_info.chinge_addr.account = account;
|
||||
this.change_info.chinge_ip.account = account;
|
||||
this.change_info.chinge_addr.type = this.shuidi.product_id;
|
||||
this.change_info.chinge_addr.province_id = 0;
|
||||
this.change_info.chinge_addr.rid = 0;
|
||||
this.change_info.chinge_ip.type = this.shuidi.product_id;
|
||||
this.change_info.chinge_ip.ip_id = 0;
|
||||
|
||||
var that = this
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: 'http://php-api.juip.com/jinyou/jinyoujt/address_margin',
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
beforeSend: function(xhr) {
|
||||
xhr.withCredentials = true;
|
||||
},
|
||||
crossDomain: true,
|
||||
success: function (res) {
|
||||
that.province_city = res.data.region
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
for (var i in this.province_city.province_surplus_outs) {
|
||||
this.province.push(i);
|
||||
this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
|
||||
}
|
||||
},
|
||||
selsect_ip(){
|
||||
let data = {
|
||||
cookie:document.cookie,
|
||||
data: this.change_info.chinge_ip
|
||||
}
|
||||
|
||||
var that = this
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: 'http://php-api.juip.com/jinyou/jinyoujt/change_ip_list',
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
beforeSend: function(xhr) {
|
||||
xhr.withCredentials = true;
|
||||
},
|
||||
crossDomain: true,
|
||||
success: function (res) {
|
||||
that.ip_list = res.data
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
select_province() {
|
||||
this.citys = [];
|
||||
for (var i in this.province_city.province_surplus_outs) {
|
||||
if (this.province.includes(i)) {
|
||||
this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
|
||||
}
|
||||
}
|
||||
},
|
||||
select_all_province() {
|
||||
var checkboxes = document.querySelector('input[name="allprovince"]');
|
||||
|
||||
if (checkboxes.checked) {
|
||||
for (var i in this.province_city.province_surplus_outs) {
|
||||
this.province.push(i);
|
||||
this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
|
||||
}
|
||||
} else {
|
||||
this.province = [];
|
||||
this.citys = [];
|
||||
}
|
||||
},
|
||||
|
||||
selsect_adddr_num(addr_id,index) {
|
||||
|
||||
for(it in this.citys) {
|
||||
$(".select_addr"+it).removeClass("bg_blue");
|
||||
}
|
||||
var addr = addr_id.split('-');
|
||||
|
||||
this.change_info.chinge_addr.province_id = addr[0];
|
||||
this.change_info.chinge_addr.rid = addr[1];
|
||||
$(".select_addr"+index).addClass("bg_blue");
|
||||
},
|
||||
change_submit() {
|
||||
let data = {
|
||||
cookie:document.cookie,
|
||||
data: this.change_info
|
||||
}
|
||||
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: 'http://php-api.juip.com/jinyou/jinyoujt/change_ip',
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
beforeSend: function(xhr) {
|
||||
xhr.withCredentials = true;
|
||||
},
|
||||
crossDomain: true,
|
||||
success: function (res) {
|
||||
alert('切换成功');
|
||||
$('#change_ip_city').modal('hide')
|
||||
}
|
||||
});
|
||||
},
|
||||
initPackages: function () {
|
||||
var productId = this.searchModel.ProductId;
|
||||
if (productId == 0) return;
|
||||
@@ -501,6 +734,7 @@
|
||||
})
|
||||
function showDetail(_self) {
|
||||
var currentOrder = {
|
||||
Id: $(_self).attr('a-Id'),
|
||||
UserCode: $(_self).attr('a-UserCode'),
|
||||
ProductName: $(_self).attr('a-ProductName'),
|
||||
PackageName: $(_self).attr('a-PackageName'),
|
||||
@@ -510,6 +744,8 @@
|
||||
StartTime: $(_self).attr('a-StartTime'),
|
||||
EndTime: $(_self).attr('a-EndTime'),
|
||||
RestTime: $(_self).attr('a-RestTime'),
|
||||
Remark: $(_self).attr('a-Remark'),
|
||||
Raw: $(_self).attr('a-Raw'),
|
||||
}
|
||||
app.setAccountInfo(currentOrder);
|
||||
$(_self).show();
|
||||
|
||||
Reference in New Issue
Block a user