<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>
|
window.onresize = function() {
|
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
|
};
|
window.onresize();
|
</script>
|
<style>
|
.white {
|
color: #FFF;
|
}
|
|
.red {
|
color: #FF2A07;
|
}
|
|
.dark-red {
|
color: #CE0E5F;
|
}
|
|
.purple {
|
color: #CC4EE8;
|
}
|
|
.blue {
|
color: #0088FF;
|
}
|
|
.dark-blue {
|
color: #159EEC;
|
}
|
|
|
.green {
|
color: #00E600;
|
}
|
|
.orange {
|
color: #FF5722;
|
}
|
|
|
.gray {
|
color: gray;
|
}
|
|
.yellow {
|
color: #F0F888;
|
}
|
|
.pink {
|
color: #FF8DB7;
|
}
|
|
|
.yellow {
|
color: #FF8020;
|
}
|
|
.dark-green {
|
color: #009688;
|
}
|
|
</style>
|
|
<style>
|
body {
|
background-color: #000;
|
line-height: 0.3rem;
|
color: white;
|
font-weight: 500;
|
font-family: 微软雅黑;
|
-webkit-user-select: none;
|
/* Chrome, Safari, Opera */
|
-moz-user-select: none;
|
/* Firefox */
|
-ms-user-select: none;
|
/* IE 10+ */
|
user-select: none;
|
}
|
|
.scroll-y {
|
overflow: hidden;
|
overflow-y: auto;
|
white-space: nowrap;
|
outline: none;
|
}
|
|
#app {
|
width: 100%;
|
height: 100%;
|
}
|
|
|
|
|
.text {
|
word-wrap: break-word;
|
flex-wrap: wrap;
|
display: flex;
|
}
|
|
.img-warning {
|
height: 18px;
|
line-height: 18px;
|
margin-top: -5px;
|
}
|
|
table {
|
width: 100%;
|
}
|
|
table tbody {
|
font-size: 19px;
|
}
|
|
table tbody tr {
|
height: 30px;
|
}
|
|
table tbody td {
|
padding: 5px;
|
}
|
|
table th:nth-child(1) {
|
width: 30px;
|
}
|
|
table .active {
|
background-color: #410080;
|
}
|
|
.delete {
|
display: block;
|
padding: 0px 5px;
|
}
|
|
#detail-info {
|
display: none;
|
position: fixed;
|
z-index: 1000;
|
background-color: #EEE;
|
width: 400px;
|
height: 200px;
|
}
|
|
#detail-info tbody {
|
font-size: 19px;
|
color: #000;
|
}
|
|
#detail-info tr td {
|
padding: 5px;
|
}
|
|
#detail-info tr td:nth-child(1) {
|
width: 150px;
|
max-width: 130px;
|
text-align: left;
|
vertical-align: top;
|
}
|
|
#detail-info tr td:nth-child(2) {
|
width: 300px;
|
max-width: 300px;
|
text-align: left;
|
}
|
</style>
|
|
</head>
|
|
<body>
|
<div id="app">
|
<div class="want-codes-list scroll-y">
|
<table>
|
<tbody>
|
<tr style="color: #BBB;">
|
<td></td>
|
<td>名称</td>
|
<td style="text-align: right;">涨幅</td>
|
<td style="text-align: right;">现手</td>
|
<td style="text-align: right;">自由市值</td>
|
<td style="text-align: right;">现价</td>
|
<td style="text-align: right;">操作</td>
|
</tr>
|
|
<tr v-for="(item,index) in want_codes_list" :class="{'active':selected_index==index}"
|
@click="select_item(index,item[0])" @mouseenter="activeIndex = index"
|
@mouseleave="activeIndex = -1">
|
<td>{{index+1}}</td>
|
<td style="width: 120px;"
|
:class="{'yellow':item[7]==0,'dark-blue':item[9]==10||item[9]==11,'pink':item[9]==13||item[9]==14, 'dark-red':item[9]==12}">
|
<span @mouseenter="show_detail_info($event, index, item)"
|
@mouseleave="dismiss_detail_info"> {{item[1]}}</span> <span
|
v-if="item[8]&&item[8][0]!=null"
|
style="font-size: 12px">{{item[8][0][1]+1}}/{{item[8][0][2]}}</span>
|
</td>
|
<td style="width: 120px;text-align: right;"
|
:class="{'red':item[3]<(item[0].indexOf('30')==0?19.5:9.5)&&item[3]>=0, 'green': item[3]<0, 'purple': item[0].indexOf('30') == 0? item[3]>=19.5: item[3]>=9.5 }">
|
<span v-if="!isNaN(item[3])">
|
<span v-if="item[3]>0">+</span>{{item[3].toFixed(2)}}%
|
</span>
|
<span v-else>
|
{{item[3]}}
|
</span>
|
<span style="font-size: 14px;color: #FFF;">
|
<span v-if="!isNaN(item[11])" :class="{'red':item[11]>=0.7}"> {{(item[11]*100).toFixed(0)}}%</span>
|
|
<span v-else> {{item[11]}}%</span>
|
|
</span>
|
</td>
|
<td style="width: 80px;text-align: right;"
|
:class="{'red':item[4][1]>0, 'green':item[4][1]<0}">
|
<div style="display: flex;align-items: center;justify-content: flex-end;">
|
<span>{{item[4][0]}}</span>
|
<svg width="20px" height="20px" viewBox="1 1 20 20" style="margin-left: -2px;"
|
v-if="item[4][1]>0">
|
<path d="M12 6l-5 5h3v6h4v-6h3z" fill="#FF2A07" stroke="#FF2A07"
|
stroke-width="2" />
|
</svg>
|
|
|
<svg width="20px" height="20px" viewBox="1 1 14 20" style="margin-left: -2px;"
|
v-else>
|
<path d="M12 18l5-5h-3V7h-4v6H7z" fill="#00E600" stroke="#00E600"
|
stroke-width="2" />
|
</svg>
|
</div>
|
</td>
|
<td style="width: 100px;;text-align: right;">{{item[5]}}</td>
|
<td style="width: 70px;text-align: right;padding-right: 10px;"
|
:class="{'red':item[3]>0, 'green':item[3]<0}">
|
<span v-if="!isNaN(item[6])">
|
{{item[6].toFixed(2)}}
|
</span>
|
<span v-else>
|
{{item[6]}}
|
</span>
|
</td>
|
|
<td style="width: 50px;;text-align: right;">
|
<img v-show="activeIndex === index" class="delete" src="images/delete.png"
|
@click.stop="addToForbidden(item[0])" />
|
|
|
</td>
|
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div id="detail-info" style="">
|
<table>
|
|
<tr>
|
<td>开盘啦板块：</td>
|
<td>
|
<span v-if="detail_index>=0">
|
<span>{{want_codes_list[detail_index][8][2]}}</span>
|
<span >/ {{want_codes_list[detail_index][8][3]}}</span>
|
</span>
|
<span v-else>-- </span>
|
</td>
|
</tr>
|
|
<tr>
|
<td>最终板块：</td>
|
<td>
|
<span v-if="detail_index>=0">
|
|
<span v-for="(item, index) in want_codes_list[detail_index][8][1]">
|
{{item}}
|
<span v-if="index+1<want_codes_list[detail_index][8][1].length">、</span>
|
</span>
|
</span>
|
<span v-else>-- </span>
|
</td>
|
</tr>
|
|
<tr>
|
<td>大买单：</td>
|
<td>
|
<span v-if="big_order_deal_info&&big_order_deal_info[2]&&(temp=big_order_deal_info[2])">
|
<span :class="{'dark-green':parseMoneyAsW(temp[4][1])*0.8>parseMoneyAsW(temp[1]),'yellow': parseMoneyAsW(temp[4][1])*0.8<=parseMoneyAsW(temp[1])&& parseMoneyAsW(temp[1])<parseMoneyAsW(temp[4][1]), 'dark-red':parseMoneyAsW(temp[1])>=parseMoneyAsW(temp[4][1])}">{{temp[1]}}</span> / {{temp[4][1]}}
|
</span>
|
<span v-else>--</span>
|
</td>
|
</tr>
|
|
<tr>
|
<td>卖单：</td>
|
<td>
|
<span v-if="big_order_deal_info">
|
{{big_order_deal_info[3][2][0]>100000000?((big_order_deal_info[3][2][0]/100000000).toFixed(2)+'亿'):((big_order_deal_info[3][2][0]/10000).toFixed(2)+'万')}}/{{big_order_deal_info[3][2][1]}}
|
</span>
|
|
<span v-else>--</span>
|
</td>
|
</tr>
|
|
<tr>
|
<td>参考量日期：</td>
|
<td><span v-if="detail_index>=0" >{{want_codes_list[detail_index][10]}}</span></td>
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
</div>
|
|
|
|
</body>
|
|
|
<script>
|
document.addEventListener("DOMContentLoaded", function() {
|
//把对象赋值到JS中
|
try {
|
new QWebChannel(qt.webChannelTransport, function(channel) {
|
window.pyjs = channel.objects.Bridge;
|
console.log("回调成功");
|
});
|
} catch (e) {
|
|
}
|
});
|
|
$(function() {
|
new VConsole();
|
var app = new Vue({
|
el: "#app",
|
data: {
|
want_codes_list: [],
|
selected_index: -1,
|
activeIndex: -1,
|
show_info: false,
|
kpl_code_info: null,
|
detail_index: -1,
|
big_order_deal_info: null
|
},
|
mounted: function() {
|
setTimeout(function() {
|
app.get_want_buy_detail_list();
|
}, 500);
|
|
setInterval(function() {
|
if (is_trade_time()) {
|
app.get_want_buy_detail_list();
|
}
|
}, 3000);
|
|
},
|
methods: {
|
get_want_buy_detail_list: function() {
|
http_util.get_want_buy_detail_list(function(res) {
|
res = JSON.parse(res);
|
if (res.code == 0) {
|
let data = res.data;
|
app.want_codes_list = data;
|
}
|
});
|
},
|
parseMoneyAsW: function(money_str) {
|
if (money_str.indexOf('亿') >= 0) {
|
return parseFloat(money_str.replace("亿", "")) * 10000
|
} else if (money_str.indexOf('万') >= 0) {
|
return parseFloat(money_str.replace("万", ""))
|
} else {
|
return parseFloat(money_str) / 10000
|
}
|
},
|
toMoneyDesc: function(money) {
|
if (Math.abs(money) > 100000000) {
|
return (money / 100000000.0).toFixed(2) + "亿";
|
} else if (Math.abs(money) > 10000) {
|
return (money / 10000.0).toFixed(2) + "万";
|
} else {
|
return money + "";
|
}
|
},
|
select_item: function(index, code) {
|
app.selected_index = index;
|
app.viewDetail(code);
|
},
|
viewDetail: function(code) {
|
pyjs.set_target_code(code);
|
pyjs.add_code_to_ths(code);
|
},
|
addToForbidden: function(code) {
|
http_util.do_action_for_code(code, '', 0, function(res) {
|
app.get_want_buy_detail_list();
|
});
|
return false;
|
},
|
show_detail_info: function(event, index, item) {
|
app.detail_index = index;
|
const clientX = event.clientX;
|
const clientY = event.clientY;
|
const rect = event.target.getBoundingClientRect();
|
this.get_big_order_deal_info(item[0]);
|
|
const viewportHeight = window.innerHeight;
|
|
|
$("#detail-info").css("display", "block");
|
|
if (rect.bottom + $("#detail-info").height() < viewportHeight) {
|
$("#detail-info").css("top", rect.bottom);
|
} else {
|
$("#detail-info").css("top", rect.bottom - $("#detail-info").height());
|
}
|
$("#detail-info").css("left", rect.right);
|
|
|
console.log("鼠标位置：", clientX, clientY);
|
},
|
dismiss_detail_info: function() {
|
console.log("移除鼠标");
|
$("#detail-info").css("display", "none");
|
},
|
get_big_order_deal_info: function(code) {
|
http_util.get_big_order_deal_info(code, function(res) {
|
res = JSON.parse(res);
|
console.log("大单：", res);
|
if (res.code == 0) {
|
app.big_order_deal_info = res.data[0];
|
}
|
});
|
|
},
|
}
|
|
|
});
|
|
|
|
});
|
</script>
|
|
|
|
|
</html>
|
