Skip to content

S
SURPRISED
Commit 660809e0 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 6adfd791
Hide whitespace changes
Inline Side-by-side
Showing with 2110 additions and 0 deletions
html/annualMeeting/HitMouse46.html 0 → 100644
View file @ 660809e0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>瑞鼠迎福</title>
<script type="text/javascript" src="../../js/autosize2.js"></script>
<link rel="stylesheet" href="css/HitMouse.css">
</head>
<body>
<div class="Box">
<a id="goali" href="alipays://platformapi/startapp" target="_blank" style="position: absolute;z-index: -1;">GO</a>
<audio id="audio" src="video/welcom_mouse.mp3" autoplay></audio>
<!-- <div class="bbb" style="position: fixed;font-size: 0.15rem">测试</div>-->
<!-- 头部一块-->
<div class="top">
<div class="top_title">
<img src="../../images/aM/home.png" alt="" class="return">
<p>打老鼠</p>
<img src="../../images/aM/ranging.png" alt="" class="ranging">
</div>
<div class="top_data">
<div class='Td_L'>
<p>分数：</p>
<p class="score">0分</p>
</div>
<div class='Td_R'>
<p>时间：</p>
<p id="time">30</p>
<img src="../../images/aM/countdown.png" alt="" class="time_img">
</div>
</div>
</div>
<!-- 打老鼠部分-->
<div class="hole-container">
<div class="hole" style="transform: translate(0.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
<!-- <img src="../../images/aM/dadao.png" alt="" class="yan">-->
<!-- <p class="show_score">500</p>-->
</div>
</div>
<div class="hole" style="transform: translate(1.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(0.30rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.45rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.64rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(0.15rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.4rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.8rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
</div>
<!--底部云-->
<img src="../../images/aM/cloud.png" alt="" class="bottom">
<!-- 弹出的一层-->
<div class="status">
<p>保存体力，等待开始</p>
</div>
<div class="status1">
<p>游戏即将开始</p>
</div>
<div class="status2">
<p>你来晚了，游戏已经开始了</p>
</div>
<div class="status3">
<p>游戏已结束</p>
</div>
<div class="circleCount">ready</div>
<!-- 排行榜-->
<div class="rank_mask" id="rank_mask">
<div class="zhezao"></div>
<div class="rank_box">
<div class="rBox_top">
<p>排行榜</p>
</div>
<div class="rank_y">
<p>你的排名 </p>
<p class="o_ranking"></p>
</div>
<div class="rank_i">
</div>
<div class="Close"></div>
</div>
</div>
<!-- 中奖弹窗通知-->
<div class="rank_mask" id="notice">
<div class="zhezao"></div>
<div class="notice_box">
<img src="../../images/aM/all_d.png" alt="" class="notice_top">
<span>恭喜你获得支付宝口令红包</span>
<input class="notice_content" id="tokenReadPackage" readonly="readonly" value="" />
<button class="all_Receive" id="getAliPay" data-clipboard-action="copy" data-clipboard-target="#tokenReadPackage">
复制并领取
</button>
<div class="all_Close"></div>
</div>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="../../js/mian.js"></script>
<script>
$(function () {
//ios禁止被拖动
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, {passive: false});
var activity = JSON.parse('{"EmployeeId":"109","EmName":"等等","imgUrl":"http://192.168.2.214:8130/Upload/Temporary/20200103060438316.jpg","e":"2013-01-01","GiftCode":"202001031805026355"}');
var clipboard = new Clipboard('.all_Receive');
var EmployeeId = activity.EmployeeId + '_Mouse';
var laoshudata = [];//老鼠数据
var audio=document.getElementById("audio");
var conn = $.hubConnection(getApiUrl().urlSignalr, {
qs: `i=${EmployeeId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}&e=${activity.e}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
sendMsg();
sendScore();
joinGeme() //参加活动
ownranking();//自己排名
}).fail(data => {});
getMsg()
let i = 110;
createPage()
function createPage() {
if (i === 160) return
window.open(`./test.html?id=${i}&name=ABC${i}`)
i++
setTimeout(()=>{
createPage()
}, 1000)
}
function sendMsg(msg,type) {
//0,未开始；1，准备中；2，进行中；-1，已结束 菜单状态
proxy.invoke("GetMenuStatus", 'Mouse').done(data => {
console.log(data)
getRankList(data.rank) //以往的排名
if(data.status==0){
$('.status').css({'display':'flex'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
}
if(data.status==1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'flex'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
}
if(data.status==2){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'flex'});
$('.status3').css({'display':'none'});
}
if(data.status==-1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'flex'});
}
});
}
function sendScore(msg) {
proxy.invoke("SetGameScore", 'Mouse',msg).done(data => { //发送分数
console.log(data)
});
}
function joinGeme() {
proxy.invoke("JoinGame", 'Mouse',).done(data => { //加入活动
console.log(data)
});
}
function ownranking() {
proxy.invoke("GetUserRank", 'Mouse',EmployeeId).done(data => {
console.log(data)
if(data.r != -1){
$('.o_ranking').html('第'+data.r+'名')
}else {
$('.o_ranking').html('未上榜')
}
//显示统计窗口
});
}
function getMsg() {
//随时获取游戏的状态
proxy.on('getChangeMenu',function (data) {
console.log(data)
laoshudata = JSON.parse(data.data)
if(data.status==0){
$('.status').css({'display':'flex'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
joinGeme()
}
if(data.status==1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'flex'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
joinGeme()
}
if(data.status==2){
StartGame()
}
if(data.status==-1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'flex'});
}
});
proxy.on('notifyMouseGamerResult',function (data) { //全部排名
console.log(data)
ownranking() //获取自己排名
getRankList(data)
})
proxy.on('notifyMouseWinning',function (data) { //活动中奖通知
console.log(data)
$('#audio').attr("src","video/zhongjiang.mp3");
$('#notice').css('display','flex');
$('#tokenReadPackage').val(data);
$('#rank_mask').css('display','none');
})
}
$('.bbb').click(function () {
StartGame()
})
// sort 是顺序，score分数，type -1鼠，2猪，location位置（出现在第几个洞），interval时间（与下一个间隔时间单位：毫秒）
var key = 0
var timer1;
var score = 0;
var Count=3;
var Count2=30;
function ces2(){
score=0
key = 0
for (var i=0 ;i<laoshudata.length; i++){
laoshudata[i].noclick =0; //0 为未点击 1为点击过
}
timer1 = setInterval(increase ,laoshudata[key].Interval+300)
}
function increase() {
var wz = laoshudata[key].Location-1
if(laoshudata[key].Type == 1){
//创建img元素
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/mouse.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加100分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score + 500;
$('.score').html(score + '分')
sendScore(score)
$('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
$('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score">+500</p>');
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
$('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
},300)
laoshudata[key].noclick=1
}
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
//等动画消失之后删除元素
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
}
if(laoshudata[key].Type == 2){
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加500分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score - 100;
$('.score').html(score + '分')
sendScore(score)
$('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
$('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score">-100</p>');
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
$('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
},300)
laoshudata[key].noclick=1
}
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
//等动画消失之后删除元素
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
}
if(key == laoshudata.length-1){
//清楚定时器
clearInterval(timer1)
}
key++
}
var Count_key = 0
function StartGame() {
$('#audio').attr("src","video/ready321go.mp3");
Count=5;
Count2=30;
Count_key = 0;//初始为0
$('.circleCount').html('ready');
var Count_c=['ready','3','2','1','go']
$('.circleCount').css('display','block');
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
var clock = window.setInterval(function(){
Count--;
Count_key++
$('.circleCount').html(Count_c[Count_key]);
if(Count==0){
$('.circleCount').css('display','none');
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
window.clearInterval(clock);
Count30();
}
}, 1000);
}
//30秒倒计时
function Count30(){
$('#audio').attr("src","video/game_running.mp3");
ces2()
$("#time").html(30);
let clock = window.setInterval(function() {
Count2--;
$("#time").html(Count2);
if (Count2 === 0) {
$('#audio').attr("src","video/gameover.mp3");
window.clearInterval(clock);
window.clearInterval(timer1); //清除老鼠
sendScore(score)
ownranking() //获取自己排名
$('#rank_mask').css('display','block');
}
}, 1000)
}
function getRankList(data){
$(".rank_i").empty()
var html = ''
$.each(data, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
html+='<div class="rank_item">\n' +
' <div class="rank_itemL">\n' +
' <div class="rank_num">'+(i+1)+'</div>\n' +
' <p>'+data[i].n+'</p>\n' +
' </div>\n' +
' <div class="rank_itemR">\n' +
' <div class="shuxi"></div>\n' +
' <p>'+data[i].s+'</p>\n' +
' </div>\n' +
' </div>'
});
$(".rank_i").append(html);
};
$('.Close').click(function () {
$('#rank_mask').css('display','none')
})
$('.ranging').click(function () {
$('#rank_mask').css('display','block')
})
$('.all_Close').click(function () {
$('#notice').css('display','none')
})
$('#getAliPay').click(function(){
setTimeout(function(){
let data = {
'action': 'Linking',
}
window.postMessage(JSON.stringify(data));
},500);
});
$('.return').click(function () {
//返回首页
window.history.back()
})
});
</script>
</html>
html/annualMeeting/test.html 0 → 100644
View file @ 660809e0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>瑞鼠迎福</title>
<script type="text/javascript" src="../../js/autosize2.js"></script>
<link rel="stylesheet" href="css/HitMouse.css">
</head>
<body>
<div class="Box">
<a id="goali" href="alipays://platformapi/startapp" target="_blank" style="position: absolute;z-index: -1;">GO</a>
<audio id="audio" src="video/welcom_mouse.mp3" autoplay></audio>
<!-- <div class="bbb" style="position: fixed;font-size: 0.15rem">测试</div>-->
<!-- 头部一块-->
<div class="top">
<div class="top_title">
<img src="../../images/aM/home.png" alt="" class="return">
<p>打老鼠</p>
<img src="../../images/aM/ranging.png" alt="" class="ranging">
</div>
<div class="top_data">
<div class='Td_L'>
<p>分数：</p>
<p class="score">0分</p>
</div>
<div class='Td_R'>
<p>时间：</p>
<p id="time">30</p>
<img src="../../images/aM/countdown.png" alt="" class="time_img">
</div>
</div>
</div>
<!-- 打老鼠部分-->
<div class="hole-container">
<div class="hole" style="transform: translate(0.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
<!-- <img src="../../images/aM/dadao.png" alt="" class="yan">-->
<!-- <p class="show_score">500</p>-->
</div>
</div>
<div class="hole" style="transform: translate(1.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(0.30rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.45rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.64rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(0.15rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.4rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.8rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
</div>
<!--底部云-->
<img src="../../images/aM/cloud.png" alt="" class="bottom">
<!-- 弹出的一层-->
<div class="status">
<p>保存体力，等待开始</p>
</div>
<div class="status1">
<p>游戏即将开始</p>
</div>
<div class="status2">
<p>你来晚了，游戏已经开始了</p>
</div>
<div class="status3">
<p>游戏已结束</p>
</div>
<div class="circleCount">ready</div>
<!-- 排行榜-->
<div class="rank_mask" id="rank_mask">
<div class="zhezao"></div>
<div class="rank_box">
<div class="rBox_top">
<p>排行榜</p>
</div>
<div class="rank_y">
<p>你的排名 </p>
<p class="o_ranking"></p>
</div>
<div class="rank_i">
</div>
<div class="Close"></div>
</div>
</div>
<!-- 中奖弹窗通知-->
<div class="rank_mask" id="notice">
<div class="zhezao"></div>
<div class="notice_box">
<img src="../../images/aM/all_d.png" alt="" class="notice_top">
<span>恭喜你获得支付宝口令红包</span>
<input class="notice_content" id="tokenReadPackage" readonly="readonly" value="" />
<button class="all_Receive" id="getAliPay" data-clipboard-action="copy" data-clipboard-target="#tokenReadPackage">
复制并领取
</button>
<div class="all_Close"></div>
</div>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="../../js/mian.js"></script>
<script>
$(function () {
let userInfo = {
id: '66',
name: '1asd'
}
if(window.location.href.split('?')[1]){
var param = window.location.href.split('?')[1].split("&") ? window.location.href.split('?')[1].split("&") : null;
userInfo.id = param ? param[0].split('=')[1] : 0;
userInfo.name = param ? param[1].split('=')[1] : 0;
}
//ios禁止被拖动
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, {passive: false});
var activity = {"EmployeeId": userInfo.id,"EmName": userInfo.name,"imgUrl":"http://192.168.2.214:8130/Upload/Temporary/20200103060438316.jpg","e":"2013-01-01","GiftCode":"202001031805026355"};
var clipboard = new Clipboard('.all_Receive');
var EmployeeId = activity.EmployeeId + '_Mouse';
var laoshudata = [];//老鼠数据
var audio=document.getElementById("audio");
var conn = $.hubConnection(getApiUrl().urlSignalr, {
qs: `i=${EmployeeId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}&e=${activity.e}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
sendMsg();
sendScore();
joinGeme() //参加活动
ownranking();//自己排名
}).fail(data => {});
getMsg()
function sendMsg(msg,type) {
//0,未开始；1，准备中；2，进行中；-1，已结束 菜单状态
proxy.invoke("GetMenuStatus", 'Mouse').done(data => {
console.log(data)
getRankList(data.rank) //以往的排名
if(data.status==0){
$('.status').css({'display':'flex'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
}
if(data.status==1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'flex'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
}
if(data.status==2){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'flex'});
$('.status3').css({'display':'none'});
}
if(data.status==-1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'flex'});
}
});
}
function sendScore(msg) {
proxy.invoke("SetGameScore", 'Mouse',msg).done(data => { //发送分数
console.log(data)
});
}
function joinGeme() {
proxy.invoke("JoinGame", 'Mouse',).done(data => { //加入活动
console.log(data)
});
}
function ownranking() {
proxy.invoke("GetUserRank", 'Mouse',EmployeeId).done(data => {
console.log(data)
if(data.r != -1){
$('.o_ranking').html('第'+data.r+'名')
}else {
$('.o_ranking').html('未上榜')
}
//显示统计窗口
});
}
function getMsg() {
//随时获取游戏的状态
proxy.on('getChangeMenu',function (data) {
console.log(data)
laoshudata = JSON.parse(data.data)
if(data.status==0){
$('.status').css({'display':'flex'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
joinGeme()
}
if(data.status==1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'flex'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
joinGeme()
}
if(data.status==2){
StartGame()
}
if(data.status==-1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'flex'});
}
});
proxy.on('notifyMouseGamerResult',function (data) { //全部排名
console.log(data)
ownranking() //获取自己排名
getRankList(data)
})
proxy.on('notifyMouseWinning',function (data) { //活动中奖通知
console.log(data)
$('#audio').attr("src","video/zhongjiang.mp3");
$('#notice').css('display','flex');
$('#tokenReadPackage').val(data);
$('#rank_mask').css('display','none');
})
}
$('.bbb').click(function () {
StartGame()
})
// sort 是顺序，score分数，type -1鼠，2猪，location位置（出现在第几个洞），interval时间（与下一个间隔时间单位：毫秒）
var key = 0
var timer1;
var score = 0;
var Count=3;
var Count2=30;
function ces2(){
score=0
key = 0
for (var i=0 ;i<laoshudata.length; i++){
laoshudata[i].noclick =0; //0 为未点击 1为点击过
}
timer1 = setInterval(increase ,laoshudata[key].Interval+300)
}
function increase() {
var wz = laoshudata[key].Location-1
if(laoshudata[key].Type == 1){
//创建img元素
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/mouse.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加100分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score + 500;
$('.score').html(score + '分')
sendScore(score)
$('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
$('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score">+500</p>');
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
$('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
},300)
laoshudata[key].noclick=1
}
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
//等动画消失之后删除元素
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
}
if(laoshudata[key].Type == 2){
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加500分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score - 100;
$('.score').html(score + '分')
sendScore(score)
$('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
$('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score">-100</p>');
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
$('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
},300)
laoshudata[key].noclick=1
}
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
//等动画消失之后删除元素
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
}
if(key == laoshudata.length-1){
//清楚定时器
clearInterval(timer1)
}
key++
}
var Count_key = 0
function StartGame() {
$('#audio').attr("src","video/ready321go.mp3");
Count=5;
Count2=30;
Count_key = 0;//初始为0
$('.circleCount').html('ready');
var Count_c=['ready','3','2','1','go']
$('.circleCount').css('display','block');
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
var clock = window.setInterval(function(){
Count--;
Count_key++
$('.circleCount').html(Count_c[Count_key]);
if(Count==0){
$('.circleCount').css('display','none');
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
$('.status3').css({'display':'none'});
window.clearInterval(clock);
Count30();
}
}, 1000);
}
//30秒倒计时
function Count30(){
$('#audio').attr("src","video/game_running.mp3");
ces2()
$("#time").html(30);
let clock = window.setInterval(function() {
Count2--;
$("#time").html(Count2);
if (Count2 === 0) {
$('#audio').attr("src","video/gameover.mp3");
window.clearInterval(clock);
window.clearInterval(timer1); //清除老鼠
sendScore(score)
ownranking() //获取自己排名
$('#rank_mask').css('display','block');
}
}, 1000)
}
function getRankList(data){
$(".rank_i").empty()
var html = ''
$.each(data, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
html+='<div class="rank_item">\n' +
' <div class="rank_itemL">\n' +
' <div class="rank_num">'+(i+1)+'</div>\n' +
' <p>'+data[i].n+'</p>\n' +
' </div>\n' +
' <div class="rank_itemR">\n' +
' <div class="shuxi"></div>\n' +
' <p>'+data[i].s+'</p>\n' +
' </div>\n' +
' </div>'
});
$(".rank_i").append(html);
};
$('.Close').click(function () {
$('#rank_mask').css('display','none')
})
$('.ranging').click(function () {
$('#rank_mask').css('display','block')
})
$('.all_Close').click(function () {
$('#notice').css('display','none')
})
$('#getAliPay').click(function(){
setTimeout(function(){
let data = {
'action': 'Linking',
}
window.postMessage(JSON.stringify(data));
},500);
});
$('.return').click(function () {
//返回首页
window.history.back()
})
});
</script>
</html>
html/billPage2.html 0 → 100644
View file @ 660809e0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>印象之旅2019年底大红包</title>
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/cssReset.css">
<script type="text/javascript" src="../js/autosize2.js"></script>
<link rel="stylesheet" href="../css/huikui.css?v='122222'">
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="fan fan-up animated bounceInDown" id="fan-up">
<img src="../images/huikui/arr2.png" alt="">
</div>
<div class="wrap2" id="wrap2">
<div class="page page1" id="page1">
<div class="tit animated fadeInLeft">
<img src="../images/huikui/page1_tit.png" alt="">
</div>
<div class="content">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日</p>
<p>成为印象同行</p>
<div>
<p>由销售经理<span id="CreateBy" class="red"></span>录入</p>
<p>您的资料</p>
<p>正式成为印象会员同行</p>
</div>
</div>
<div class="rili-box">
<div>
<p class="rili-tit" id="rili-tit"></p>
<div class="rili clearfix" id="rili">
</div>
</div>
</div>
</div>
<div class="page page2" id="page2">
<div class="tit">
<img src="../images/huikui/page2_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year"></span>年里</p>
<p>销售经理上门拜访您<span class="num font-c04-s3"></span>次</p>
<div class="margint-20">
我们十分的愿意
<br>
倾听您的声音
</div>
</div>
<div class="bottom-box">
<p class="baifangjihua">
拜访
<br>
计划
</p>
<img class="page2_ren" src="../images/huikui/page2_ren.png" alt="">
<img class="page2_tanzi" src="../images/huikui/page2_tanzi.png" alt="">
</div>
</div>
<div class="page page3" id="page3">
<div class="tit">
<img src="../images/huikui/page3_tit.png" alt="">
</div>
<div class="content dingdany">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日 <span class="red" id="time"></span>分</p>
<p>我们收到了您的第<span class="num3 font-c04-s3">1</span>单</p>
<div class="margint-20">
<p>怀着无比激动与感恩的心</p>
</div>
</div>
<div class="content dingdann">
<p>我们暂未收到您的订单</p>
<div class="margint-20">
<p>我们待着与您的合作</p>
</div>
</div>
<div class="page3_shiz" >
<img src="../images/huikui/page3_shiz.png" alt="">
</div>
</div>
<div class="page page4" id="page4">
<div class="tit">
<img src="../images/huikui/page4_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year4"></span>年</p>
<p class="margint-20">您累计交客<span class="num3 font-c04-s3" id="renshu"></span>人</p>
<p class="margint-20">交易额累计<span class="num3 font-c04-s3" id="jiaoyie"></span>.<span class="num3 font-c04-s3" id="jiaoyie2"></span> 万</p>
<p class="margint-20">感恩您对印象之旅的大力支持与信任</p>
</div>
<div class="page4_shiz" >
<img src="../images/huikui/page4_shiz.png" alt="">
</div>
</div>
<div class="page page5" id="page5">
<div class="tit2">
<span id="fenshu"></span>分
</div>
<div class="content">
<p id="pingjiaY">这是您的客人对我们的总体评价</p>
<p id="pingjiaN">还未收到您的客人评价</p>
</div>
<div class="danmu" id="danmu">
</div>
<div class="page5_img">
<img src="../images/huikui/page5_img.png" alt="">
</div>
</div>
<div class="page page6" id="page6">
<div class="tit">
<img src="../images/huikui/page6_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year6"></span>年，您的客户来自哪里</p>
</div>
<div class="line_box">
<div class="xianlu">
<div id="xianluEchart">
</div>
</div>
<div class="nianling">
<div id="nianlingEchart">
</div>
</div>
</div>
</div>
<div class="page page7" id="page7">
<div class="tit">
<img src="../images/huikui/page7_tit.png" alt="">
</div>
<div class="content">
<p>印象之旅 <span class="red" id="allYear">10</span> 年</p>
<p><span class="font-c04-s3" id="Country"></span> 个国家 <span class="font-c04-s3" id="City"></span> 座城市 <span class="font-c04-s3" id="Company"></span> 个分公司</p>
<p class="margint-20">我们的目标是走得更远<br>让我们的线路覆盖全球...</p>
</div>
<div class="page7_img margint-20">
<img src="../images/huikui/page7_map.png" alt="">
</div>
</div>
<div class="page page8" id="page8">
<div class="tit">
<img src="../images/huikui/page8_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year8"></span> 年</p>
<p>已有同行<span class="font-c04-s3" id="allTH"></span>个</p>
<p class="margint-20">印象之旅感动与世界同步</p>
</div>
<div class="page8_img margint-20">
<img src="../images/huikui/page8_map.png" alt="">
</div>
</div>
<div class="page page9" id="page9">
<div class="tit">
<img src="../images/huikui/page9_tit.png" alt="">
</div>
<div class="content">
<p>年底<span class="red">大红包</span>来啦！</p>
<p>您目前已累计<span class="red">￥</span><span class="font-c04-s3" id="dahongbao"></span>元大红包</p>
</div>
<div class="page9_img">
<img onclick="goRed()" src="../images/huikui/page9_img.png" alt="">
</div>
<div class="shuoming" onclick="showTk(1)">
<div class="shuoming_box margint-20">
<p class="tit3 red">大红包活动及使用说明</p>
<div class="more">
<span>查看更多</span>
<img src="../images/huikui/more.png" alt="">
</div>
</div>
</div>
<div class="tanchuang" onclick="showTk(2)">
<img src="../images/huikui/close.png" alt="">
<div class="tiaokuan">
<p class="tit3 red">大红包活动及使用说明</p>
<p>为答谢广大同行在即将过去的2019年里对印象之旅的厚爱与支持，公司将在新的一年来临之际奉上年底大红包，活动具体说明如下：</p>
<p>1、2019年12月25日至2020年1月2日，同行可在印象之旅APP、小程序、H5站点查阅2019年度账单，并及时查阅预计红包金额。</p>
<p>2、2020年1月2日至2020年1月20日，用户进入活动页面后可以直接领取年底大红包，若用户逾期未领取，则视为主动放弃年底大红包。大红包的具体金额依据同行报名参加印象之旅2019年内的跟团游产品产生的实际交易额来计算。具体计算规则请参照：<span class="rule" onclick="goRule()">《印象之旅2019年底大红包规则》</span></p>
<p>3、大红包一旦领取成功，金额将自动转入用户的幸福存折中并且不能取现。</p>
<p>4、用户可以使用幸福存折的余额对跟团游，自由行，机票，签证，酒店等订单金额进行抵扣，每次最多能使用1000元，且账户余额必须保留9元。</p>
<p>5、幸福存折目前只能在印象相关的同业平台使用，包含同业网站（www.oytour.com）,同业APP（印象同业），同业小程序（行程助理）。</p>
<p>6、幸福存折可以和优惠券一起使用。</p>
<p>7、若为联盟客户，我们将会把大红包转入联盟的主体账户中。如需做红包拆分，请联系您的印象之旅销售客服专员。</p>
</div>
<p class="jieshi red">本活动最终解释权在法律允许范围内归本公司所有。</p>
</div>
</div>
<div class="page page9 page10" id="page10">
<div class="tit animated fadeInLeft">
<img src="../images/huikui/page9_tit.png" alt="">
</div>
<div class="content">
<p>印象之旅<span class="red">2020</span>年</p>
<p>年底<span class="red">大红包</span>玩法来了</p>
<p>殷殷之心,拳拳可见 </p>
<p>印象之旅感动与世界同步</p>
</div>
<!-- <div class="rule_box">
<div class="rule_box_tit">
<img src="../images/huikui/page10_xr.png" alt="">
<p class="red">大红包规则</p>
</div>
</div> -->
<div class="rule_box2">
<img src="../images/huikui/page10_rimg.png" alt="">
</div>
</div>
</div>
<div class="fan fan-down animated bounceInUp" id="fan-down">
<img src="../images/huikui/arr1.png" alt="">
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery.animateNumber.js"></script>
<script type="text/javascript" src="../js/md5.js"></script>
<script type="text/javascript" src="../js/mian.js"></script>
<script type="text/javascript" src="../js/layer/layer.js"></script>
<script type="text/javascript" src="../js/barrageWall.js?v=10086"></script>
<script type="text/javascript">
var userInfo = {
customerId: 0,
token: "",
secretKey: "",
};
$(".tanchuang").hide()
if (!localStorage.onLogin) {
localStorage.billPage = null
}
var billPage = localStorage.billPage ? JSON.parse(localStorage.billPage) : ''
var newPageIndex = localStorage.newPageIndex ? localStorage.newPageIndex : 0,
maxPageIndex = 9;
// 1 判断地址栏是否有参数
if(window.location.href.split('?')[1]){
var param = window.location.href.split('?')[1].split("&") ? window.location.href.split('?')[1].split("&") : null;
userInfo.customerId = param ? param[0].split('=')[1] : 0;
userInfo.token = param ? param[2].split('=')[1] : 0;
userInfo.secretKey = param ? param[3].split('=')[1] : 0;
var userJson = JSON.stringify(userInfo);
localStorage.billPage = userJson;
} else if (billPage){ // 2 获取本地缓存
userInfo.customerId = billPage.customerId
userInfo.token = billPage.token
userInfo.secretKey = billPage.secretKey
} else { // 否则就去登录
window.location.href = 'login.html?page=billPage';
}
var str = location.href,
param = str.substr(str.indexOf("?")+1),
dataObj = {},
FirstOrderCreateStr = [],
TextContentList = [],
danmuIndex = 0;
param = param.split('&');
var customerId = param[0].split('=')[1];
var myChart1 = echarts.init(document.getElementById('xianluEchart'));
var myChart2 = echarts.init(document.getElementById('nianlingEchart'));
var option = {
container: "#danmu",//弹幕墙的id
barrageLen: 5//弹幕的行数
}
//初始化弹幕墙
barrageWall.init(option);
getData();
// 获取数据
function getData(){
// locationName.indexOf('oytour') !== -1 ? userInfo.customerId : 7989
var msg = {
customerId: userInfo.customerId,
}
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("app_get_GetPersonalBills", msg, userInfo.token, userInfo.secretKey),
async: false,
success: function(res) {
if (res.resultCode === 1) {
var CreateTime = res.data.CreateTime.split('-'),
year = CreateTime[0],
month = CreateTime[1],
day = CreateTime[2];
//最后一个参数为0,意为获取2018年10月一共多少天
var monthAllDay = new Date(year, month,0);
creatRili(day, monthAllDay.getDate());
dataObj = res.data;
localStorage.dataObj = JSON.stringify(dataObj);
$("#year").text(year);
$("#month").text(month);
$('#day').animateNumber({ number: day });
$("#CreateBy").text(res.data.CreateBy.split('（')[0])
$("#rili-tit").text( year + '年' + month + '月')
if (dataObj.yearTotalPrice > 0) {
$("#page9").show()
$("#page10").hide()
} else {
$("#page9").hide()
$("#page10").show()
}
if (dataObj.FirstOrderCreateStr == '') {
$(".dingdany").hide()
$(".dingdann").show()
} else {
FirstOrderCreateStr = res.data.FirstOrderCreateStr.replace(' ', '-').replace(':', '-').split('-');
$(".dingdany").show()
$(".dingdann").hide()
}
if (newPageIndex > 0) {
$("#page9 #dahongbao").animateNumber({ number: dataObj.yearTotalPrice}, 2000)
document.getElementById('wrap2').style.transform = 'translateY(' + (-(newPageIndex-1) * 10) + '%)'; //根据手指的位置移动页面
$("#fan-down").hide()
}
// 弹幕
var danmu=document.getElementById('danmu');
var winH=danmu.clientHeight;
if(dataObj.evaluateList.TextContentList && dataObj.evaluateList.TextContentList.length) {
TextContentList = dataObj.evaluateList.TextContentList
createDM()
}
//客户 & 线路
var LineOrder = {
LineName: [],
TotalGuest: []
}
if(dataObj.LineOrder && dataObj.LineOrder.length) {
dataObj.LineOrder.map(x=>{
LineOrder.LineName.push(x.LineName)
LineOrder.TotalGuest.push(x.TotalGuest)
})
creatEchart(LineOrder)
}
var ageData = {
LineName: ['老人', '成年人', '小孩'],
TotalGuest: [dataObj.OldGuest, dataObj.AdultGuest, dataObj.ChildrenGuest]
}
if ((dataObj.OldGuest + dataObj.AdultGuest + dataObj.ChildrenGuest) > 0) {
creatEchart2(ageData)
}
} else {
layer.msg(res.message)
setTimeout(function(){
window.location.href = 'login.html?page=billPage';
},500)
}
}
})
};
// 创建日历
function creatRili(day, maxDay) {
$(".rili-box>div").hide()
var htmlStr = ''
for(var i = 1; i <= maxDay; i++) {
if (i == day) {
htmlStr += '<div class="animated today_box"><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div><span class="today">'+ i +'</span></div>'
} else {
htmlStr += '<div class="animated"><span>'+ i +'</span></div>'
}
}
$("#rili").html(htmlStr)
riliAnimated()
}
// 日历动画
function riliAnimated(){
$("#rili div").each(function (index, ele) {
setTimeout(function (){
$(".rili-box>div").show()
$(ele).addClass('fadeIn')
}, 500)
})
}
$("#fan-up").hide()
// 初始化分页
var pages = function(obj) {
var box = document.getElementById(obj.wrap);
var box2 = document.getElementById(obj.wrap2);
var pageUp = document.getElementById('fan-up')
var pageDown = document.getElementById('fan-down')
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function() {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touchStart
var touchstart = function(event) {
if(!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
};
//touchEnd
var touchend = function(event) {
if (n == 8) {
localStorage.newPageIndex = maxPageIndex
}
//位移小于+-50的不翻页
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前页控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
// 翻页 加载页面动画
if (moveY < -50 || moveY > 50) {
$("#page" + (n+1) + ">div.tit").addClass('animated fadeInLeft')
$("#page" + (n+1) + " .year").text(dataObj.Year)
var number = dataObj.VisiteCount
if (number < 3) {
number = 3
}
$("#page" + (n+1) + " .num").animateNumber({ number: number }, 2000);
$("#page" + (n+1) + " .baifangjihua").addClass('animated fadeIn')
if (FirstOrderCreateStr.length) {
$("#page" + (n+1) + " #year").text(FirstOrderCreateStr[0])
$("#page" + (n+1) + " #month").text(FirstOrderCreateStr[1])
$("#page" + (n+1) + " #day").text(FirstOrderCreateStr[2])
$("#page" + (n+1) + " #time").text(FirstOrderCreateStr[3] + ':' + FirstOrderCreateStr[4])
}
if(dataObj.TotalGuest == '0') {
$("#page" + (n+1) + " #renshu").text('-');
} else {
$("#page" + (n+1) + " #renshu").animateNumber({ number: dataObj.TotalGuest }, 2000);
}
if(dataObj.TotalPrice == '0') {
$("#page" + (n+1) + " #jiaoyie").text('-');
} else {
var TotalPrice = (parseInt(dataObj.TotalPrice) / 10000).toFixed(2)
$("#page" + (n+1) + " #jiaoyie").animateNumber({ number: TotalPrice.split('.')[0] }, 2000);
$("#page" + (n+1) + " #jiaoyie2").animateNumber({ number: TotalPrice.split('.')[1] }, 2000);
}
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
if(dataObj.evaluateList.ScoreNum == '0') {
$("#page" + (n+1) + " #fenshu").text('-')
$("#pingjiaY").hide()
$("#pingjiaN").show()
} else {
$("#pingjiaY").show()
$("#pingjiaN").hide()
$("#page" + (n+1) + " #fenshu").animateNumber({ number: dataObj.evaluateList.ScoreNum }, 2000)
}
$("#page" + (n+1) + " #allYear").animateNumber({ number: 10}, 2000)
$("#page" + (n+1) + " #Country").animateNumber({ number: 3}, 2000)
$("#page" + (n+1) + " #City").animateNumber({ number: 16}, 2000)
$("#page" + (n+1) + " #Company").animateNumber({ number: 17}, 2000)
$("#page" + (n+1) + " #allTH").animateNumber({ number: 14100}, 2000)
$("#page" + (n+1) + " #dahongbao").animateNumber({ number: dataObj.yearTotalPrice}, 2000)
clearInterval(timer2)
timer2 = null
$("#danmu").html('')
barrageWall.init(option);//初始化弹幕墙
if (n == 4 && timer2 == null) {
timer2 = setInterval(function(){
createDM();
},2000);
}
}
if (n == 0) {
$("#fan-up").hide()
} else {
$("#fan-up").show()
}
if (n == len - 1) {
$("#fan-down").hide()
} else {
$("#fan-down").show()
}
$("#fan-up").removeClass('bounceInDown')
$("#fan-down").removeClass('bounceInUp')
setTimeout(()=>{
$("#fan-up").addClass('bounceInDown')
$("#fan-down").addClass('bounceInUp')
}, 500)
};
//touch事件绑定
box.addEventListener("touchstart", function(event) {
touchstart(event)
}, false);
box.addEventListener("touchmove", function(event) {
touchmove(event)
}, false);
box.addEventListener("touchend", function(event) {
touchend(event)
}, false);
pageUp.addEventListener("click", function (event) {
moveY = 100
touchend(event)
}, false)
pageDown.addEventListener("click", function (event) {
moveY = -100
touchend(event)
}, false)
};
pages({
wrap: 'wrap', //.wrap的id
wrap2: 'wrap2', //.wrap2的id
len: maxPageIndex, //一共有几页
n: newPageIndex //页面一打开默认在第几页？第一页就是0，第二页就是1
});
// insert();
var timer2 = setInterval(function(){
createDM();
},2000);
// 创建弹幕
function createDM(){
if (!TextContentList.length) return
var randomS=Math.floor(Math.random()*TextContentList.length);
barrageWall.upWall('', TextContentList[randomS].TextContent, '');
}
// 创建图表1
function creatEchart(Datas){
var option = {
legend: {
icon: "circle",
bottom: '20%',
left:'2%',
itemWidth: 7,
itemHeight: 7,
itemGap: 40,
textStyle:{
color:'#89A7AF',
},
data:[{
name : Datas.LineName[0]
},
{
name : Datas.LineName[1]
},
{
name : Datas.LineName[2]
}
]
},
grid: {
left: '10%',
right: '0%',
top: 60,
},
xAxis: [{
type :'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false,
}
}],
yAxis: [{
//type: 'category',
data: [''],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [
{
name: Datas.LineName[0],
type:'bar',
barWidth:16,
stack: '危货种类占比',
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E8A61F',
backgroundColor: '#E8A61F',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
itemStyle: {
color: '#E8A61F'
},
data:[{
value: Datas.TotalGuest[0],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1,
color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1, color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[1],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#E67C26'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E67C26',
backgroundColor: '#E67C26',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[1],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E67C26' // 0% 处的颜色
}, {
offset: 1,
color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'危化品三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E67C26' // 0% 处的颜色
}, {
offset: 1, color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[2],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#0CD8A7'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#0CD8A7',
backgroundColor: '#0CD8A7',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[2],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1,
color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'其他三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1, color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1] + Datas.TotalGuest[2]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
}
]
};
myChart1.setOption(option);
}
// 创建图表2
function creatEchart2(Datas){
var option = {
legend: {
icon: "circle",
bottom: '20%',
left:'2%',
itemWidth: 7,
itemHeight: 7,
itemGap: 40,
textStyle:{
color:'#89A7AF',
},
data:[{
name : Datas.LineName[0]
},
{
name : Datas.LineName[1]
},
{
name : Datas.LineName[2]
}
]
},
grid: {
left: '10%',
right: '0%',
top: 60,
},
xAxis: [{
type :'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false,
}
}],
yAxis: [{
//type: 'category',
data: [''],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [
{
name: Datas.LineName[0],
type:'bar',
barWidth:16,
stack: '危货种类占比',
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E8A61F',
backgroundColor: '#E8A61F',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
itemStyle: {
color: '#E8A61F'
},
data:[{
value: Datas.TotalGuest[0],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1,
color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1, color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[1],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#E67C26'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E67C26',
backgroundColor: '#E67C26',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[1],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E67C26' // 0% 处的颜色
}, {
offset: 1,
color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'危化品三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E67C26' // 0% 处的颜色
}, {
offset: 1, color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[2],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#0CD8A7'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#0CD8A7',
backgroundColor: '#0CD8A7',
show: true,
position: 'top',
formatter: '{c}',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[2],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1,
color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'其他三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1, color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1] + Datas.TotalGuest[2]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
}
]
};
myChart2.setOption(option);
}
// 展示隐藏说明
function showTk(type){
if (type == 1 ) {
$('.tanchuang').show()
} else {
$('.tanchuang').hide()
}
}
// 跳转规则页面
function goRule(){
window.location.href = 'rule.html';
}
// 跳转开红包页面
function goRed(){
var time1 = new Date(Date.parse(new Date()));
var time2 = new Date(Date.parse('2020-01-02 10:00:00'));
if (time1 > time2) {
window.location.href = 'openRedPacket.html';
} else {
layer.msg('感谢您的关注<br>请于2020-01-02 10:00:00再来打开红包~')
}
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment