<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport"
|
content="width=device-width, viewport-fit=cover, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>加贝控制中心</title>
|
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
|
<script src="js/jquery.min.js"></script>
|
<script src="http://cdn.yeshitv.com/js/vue.min.js"></script>
|
<script src="js/qwebchannel.js"></script>
|
<script src="js/http.js"></script>
|
<script src="js/vconsole.min.js"></script>
|
<script src="layui/layui.js"></script>
|
<script src="js/md5.min.js"></script>
|
<script src="js/delegate.js"></script>
|
<script>
|
window.onresize = function() {
|
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
|
};
|
window.onresize();
|
</script>
|
<style>
|
.white {
|
color: #FFF;
|
}
|
|
.red {
|
color: #FF0000;
|
}
|
|
.red-bg {
|
background-color: #FF0000;
|
}
|
|
.dark-red {
|
color: #CE0E5F;
|
}
|
|
.dark-red-bg {
|
background-color: #CE0E5F;
|
}
|
|
|
|
.purple {
|
color: rgb(209, 135, 252);
|
}
|
|
.purple-bg {
|
background-color: rgb(209, 135, 252);
|
}
|
|
.blue {
|
color: #0088FF;
|
}
|
|
.blue-bg {
|
background-color: #85CAFF;
|
}
|
|
|
|
.green {
|
color: #009688;
|
}
|
|
.light-green {
|
color: rgb(36, 164, 36);
|
|
}
|
|
.light-green-1 {
|
color: #00E600;
|
}
|
|
|
|
.green-bg {
|
background-color: #009688;
|
}
|
|
.orange {
|
color: #FF5722;
|
}
|
|
.orange-bg {
|
background-color: #FF5722;
|
}
|
|
|
.gray {
|
color: gray;
|
}
|
|
.gray-bg {
|
background-color: gray;
|
}
|
|
|
.yellow {
|
color: #FF8020;
|
}
|
</style>
|
|
<style>
|
body {
|
background-color: #EEE;
|
line-height: 0.3rem;
|
color: white;
|
font-weight: 500;
|
font-family: 微软雅黑;
|
}
|
|
.scroll-y {
|
overflow: hidden;
|
overflow-y: auto;
|
white-space: nowrap;
|
outline: none;
|
}
|
|
#app {
|
width: 100%;
|
height: 100%;
|
}
|
|
.layui-btn {
|
width: 65px;
|
height: 32px;
|
line-height: 32px;
|
padding: 0;
|
font-size: 13px;
|
margin-left: 5px !important;
|
}
|
|
.title {
|
text-align: right;
|
padding: 0.1rem;
|
color: black;
|
}
|
|
.trade_queue {
|
margin-top: 0.1rem;
|
display: flex;
|
background-color: black;
|
}
|
|
.trade_queue div {
|
|
width: 1.5rem;
|
height: 0.35rem;
|
line-height: 0.35rem;
|
text-align: center;
|
padding: 0;
|
}
|
|
.delegating-list .item {
|
margin-bottom: 0rem;
|
padding: 0.05rem 0.1rem;
|
color: black;
|
font-size: 13px;
|
}
|
|
.text {
|
word-wrap: break-word;
|
flex-wrap: wrap;
|
display: flex;
|
}
|
|
.img-warning {
|
height: 18px;
|
line-height: 18px;
|
margin-top: -5px;
|
}
|
|
.delegate-records {
|
height: 30%;
|
}
|
|
.delegate-records table tr {
|
|
font-size: 14px;
|
}
|
|
.delegate-records table tr td,
|
th {
|
padding: 2px 5px;
|
border: 1px solid #ddd;
|
}
|
</style>
|
|
</head>
|
|
<body>
|
<div id="app">
|
<div class="title">
|
账户可用资金：{{account_available_money}}元
|
<button class="layui-btn layui-btn-primary" @click="refresh_data">刷新</button>
|
</div>
|
<div class="delegate-records scroll-y" style=" overflow-x: auto;">
|
|
<table style="width: 680px; ">
|
<thead style="color: #000;">
|
<th style="width: 70px;">委托时间</th>
|
<th style="width: 70px;">合约名称</th>
|
<th style="width: 50px;">操作</th>
|
<th style="width: 70px;">委托数量</th>
|
<th style="width: 70px;">已成交</th>
|
<th style="width: 100px;">备注</th>
|
<th style="width: 70px;">委托价格</th>
|
<th style="width: 70px;">成交均价</th>
|
<th style="width: 70px;">撤单时间</th>
|
</thead>
|
<tbody>
|
|
<tr v-if="item.orderStatus==3||item.orderStatus==4||item.orderStatus==5"
|
v-for="(item,index) in getReversedDelegateRecords()"
|
:class="{'blue':item.direction==1&&item.cancelTime.length==0, 'gray':item.cancelTime.length>0,'red':item.direction==0&&item.cancelTime.length==0, 'red':(item.orderStatus==3||item.orderStatus==4)&&item.direction==0, 'yellow':item.orderStatus==5&&item.direction==0}">
|
<td>{{item.acceptTime}}</td>
|
<td>{{item.securityName}}</td>
|
<td>{{item.direction==0?'买入':'卖出'}}</td>
|
<td>{{item.volume}}</td>
|
<td>
|
{{item.volumeTraded}}
|
</td>
|
<td>{{getOrderStatusDesc(item.orderStatus)}}</td>
|
<td>{{item.limitPrice}}</td>
|
<td>
|
<span v-if="item.volumeTraded>0">
|
{{ (parseFloat(item.turnover)/item.volumeTraded).toFixed(2)}}
|
</span>
|
<span v-else>
|
--
|
</span>
|
<td>{{item.cancelTime}}</td>
|
</tr>
|
|
|
<tr v-if="item.orderStatus==2"
|
v-for="(item,index) in getReversedDelegateRecords()"
|
:class="{'blue':item.direction==1&&item.cancelTime.length==0, 'gray':item.cancelTime.length>0,'red':item.direction==0&&item.cancelTime.length==0, 'red':(item.orderStatus==3||item.orderStatus==4||item.orderStatus==2)&&item.direction==0, 'yellow':item.orderStatus==5&&item.direction==0}">
|
<td>{{item.acceptTime}}</td>
|
<td>{{item.securityName}}</td>
|
<td>{{item.direction==0?'买入':'卖出'}}</td>
|
<td>{{item.volume}}</td>
|
<td>
|
{{item.volumeTraded}}
|
</td>
|
<td>{{getOrderStatusDesc(item.orderStatus)}}</td>
|
<td>{{item.limitPrice}}</td>
|
<td>
|
<span v-if="item.volumeTraded>0">
|
{{ (parseFloat(item.turnover)/item.volumeTraded).toFixed(2)}}
|
</span>
|
<span v-else>
|
--
|
</span>
|
<td>{{item.cancelTime}}</td>
|
</tr>
|
|
|
<tr v-if="item.orderStatus!=3&&item.orderStatus!=4&&item.orderStatus!=5&&item.orderStatus!=2"
|
v-for="(item,index) in getReversedDelegateRecords()"
|
:class="{'blue':item.direction==1&&item.cancelTime.length==0, 'gray':item.cancelTime.length>0,'red':item.direction==0&&item.cancelTime.length==0, 'red':(item.orderStatus==3||item.orderStatus==4)&&item.direction==0, 'yellow':item.orderStatus==5&&item.direction==0}">
|
<td>{{item.acceptTime}}</td>
|
<td>{{item.securityName}}</td>
|
<td>{{item.direction==0?'买入':'卖出'}}</td>
|
<td>{{item.volume}}</td>
|
<td>{{item.volumeTraded}}</td>
|
<td>{{getOrderStatusDesc(item.orderStatus)}}</td>
|
<td>{{item.limitPrice}}</td>
|
<td><span v-if="item.volumeTraded>0">
|
{{ (parseFloat(item.turnover)/item.volumeTraded).toFixed(2)}}
|
</span>
|
<span v-else>
|
--
|
</span>
|
</td>
|
<td>{{item.cancelTime}}</td>
|
</tr>
|
|
</tbody>
|
|
</table>
|
</div>
|
|
<div style="height: 30px;"></div>
|
|
|
<div class="delegating-list scroll-y">
|
|
<div class="item" v-for="(item,index) in delegates">
|
|
<div style="display: flex;justify-content: space-between;min-height: 35px;align-items: center;">
|
<div style="position: absolute; right: 0.1rem;">
|
<button class="layui-btn dark-red-bg" @click="update_l_down_cancel_rate(item)">修改</button>
|
<button class="layui-btn blue-bg"
|
@click="audo_increase_l_down_cancel_rate(item)">变大</button>
|
<button class="layui-btn orange-bg" @click="reset_l_down_cancel_rate(item)">立改</button>
|
<button class="layui-btn green-bg"
|
@click="audo_decrease_l_down_cancel_rate(item)">变小</button>
|
<button class="layui-btn gray-bg" @click="cancelOrder(item)">撤单</button>
|
<button class="layui-btn"
|
:style="{'visibility': index%2==1?'hidden':'visibility' , 'display':index%2==0?'none':'inline'}"></button>
|
<button class="layui-btn layui-btn-primary" @click="viewDetail(item)">查看</button>
|
</div>
|
</div>
|
<div>
|
<div>
|
<span :class="{'red': item.pay_attention}">{{item.code_info[0]}}({{item.code_info[1]}})
|
<span v-if="item.pay_attention">****</span></span>
|
|
</div>
|
<div>
|
剩<span :class="{'red': item.left_count<=10}">{{item.left_count}}</span>笔 <span
|
:class="{'red': parseMoneyAsW(item.left_money)<=1500}">{{item.left_money}}</span>/封单{{item.buy1_money}}【排预期：<span
|
class="dark-red">{{item.trade_progress_percent}}%</span>】
|
{{item.zyltgb}}
|
</div>
|
<div>
|
<span>【撤：<span class="green">{{(item.l_down_cancel_rate*100).toFixed(2)}}% </span>
|
|
<span v-if="item.l_down_watch_indexes_info&&item.l_down_watch_indexes_info.current">
|
|
/
|
实撤： <img :style="{'visibility': (item.id in warning_ids_info)?'visible':'hidden'}"
|
class="img-warning"
|
:src="warning_ids_info[item.id] > now_timestamp?'images/warning.gif':'images/warning.png'" />
|
<span class="blue">{{item.l_down_watch_indexes_info.current[3]}}%</span>
|
|
<br>
|
（大：<span class="orange">{{ item.l_down_watch_indexes_info.current[5][0]}}%</span>
|
{{ toMoneyDesc(item.l_down_watch_indexes_info.current[5][3])}}/{{ toMoneyDesc(item.l_down_watch_indexes_info.current[5][1])}}
|
{{ item.l_down_watch_indexes_info.current[5][4]}}笔/<span
|
:class="{'red': item.l_down_watch_indexes_info.current[5][2] <3 }">{{ item.l_down_watch_indexes_info.current[5][2]}}</span>笔
|
）
|
/
|
{{ item.l_down_watch_indexes_info.current[2][0]}}笔&{{ item.l_down_watch_indexes_info.current[0][0]}}笔
|
/
|
{{ toMoneyDesc(item.l_down_watch_indexes_info.current[2][1])}}&{{toMoneyDesc( item.l_down_watch_indexes_info.current[0][1])}}
|
】
|
<img src="images/icon_open.png" style="width: 20px;height: 20px;"
|
@click="open_l2_down_watch_index_overview(item.code_info[0], item.code_info[1])" />
|
</span>
|
<span v-else>
|
】
|
</span>
|
|
</span>
|
|
</div>
|
<div v-if="item.deal_big_money_info">
|
建比：{{(item.deal_big_money_info[1]*100/item.deal_big_money_info[5]).toFixed(0)}}%
|
实成：<span
|
:class="{'light-green-1':item.deal_big_money_info[5]*0.8>item.deal_big_money_info[1],'yellow': item.deal_big_money_info[5]*0.8<=item.deal_big_money_info[1]&& item.deal_big_money_info[1]<item.deal_big_money_info[5], 'dark-red':item.deal_big_money_info[1]>=item.deal_big_money_info[5]}">{{toMoneyDesc(item.deal_big_money_info[1])}}</span> / 要求：{{toMoneyDesc(item.deal_big_money_info[5])}}
|
</div>
|
|
<div>
|
<span> 涨停价：{{item.limit_up_price}}， </span>
|
<span>
|
{{item.block}}，
|
</span>
|
<span> 涨停时间：{{item.limit_up_time}} </span>
|
|
</div>
|
|
<div class="trade_queue" @dblclick="open_trade_queue(item)">
|
<div v-for="(item1, index1) in item.trade_queue"
|
:class="{'red':item1[1]==0,'white':item1[1]==1,'purple':item1[1]==2 }" v-if="index1<8">
|
{{toMoneyDesc(item1[2])}}
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
</div>
|
|
|
</div>
|
</div>
|
|
</body>
|
|
|
<script>
|
</script>
|
|
|
|
|
</html>
|
