<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<title>意见调查详情</title>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
body{
overflow: hidden;
}
.main{
width: 100%;
height: 100%;
padding: .3125rem;
box-sizing: border-box;
overflow: scroll;
background-color: #D48E34;
}
#shujuC{
background: url(../images/work-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.main>div{
}
.item{
padding: 1.56rem 1.25rem 0 1.25rem;
}
.item-content img{
height: 3rem;
margin-right: 1rem;
}
.item-content .name{
font-size: 2.2rem;
font-family:PingFang SC;
font-weight:bold;
color:rgba(255,255,255,1);
}
.item-content .time{
font-size: 2rem;
font-family:PingFang SC;
font-weight:500;
color:rgba(153,153,153,1);
margin-top: .625rem;
}
.flex{
display: flex;
}
.flex-between{
display: flex;
justify-content: space-between;
line-height: 2rem;
}
.item-content{
padding-bottom: 1.56rem;
border-bottom: 4px solid rgba(255, 255, 255, .2);
}
.color-w{
color:rgba(255,255,255,1);
font-size: 1.4rem;
font-family:PingFang SC;
}
.money div{
width: 49%;
}
.money div:nth-child(1){
margin-right: 1%
}
.padding-bottom{
padding-bottom: 1.56rem;
}
.spinner {
margin: 0 auto 0;
width: 100%;
text-align: center;
background-color: white;
position: fixed;
left: 0;
top: 0;
z-index: 2018;
padding-top: 35%;
height: 80rem;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #e95252;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
.scrollbar::-webkit-scrollbar {
/*滚动条整体样式*/
width: 0px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 47px;
}
.scrollbar::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 4px;
background: rgba(255, 197, 21, 0);
}
.scrollbar::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 4px;
background: rgba(204, 68, 39, 0);
}
.nav{
display: flex;
align-items: center;
line-height: 2.5rem;
height: 2.5rem;
}
.nav>div{
width: 50%;
text-align: center;
background-color: #26252b;
color: white;
cursor: pointer;
height: 100%;
}
.nav>div span{
border-bottom: 1px solid transparent;
display: inline-block;
}
.nav>div span.active{
color: #00adff;
border-bottom: 1px solid #00adff;
}
#kehuC{
display: none;
}
.kehu-item{
line-height: 2.5rem;
color: #333;
display: flex;
justify-content: space-between;
padding: 0 .5rem;
padding-bottom: .5rem;
border-bottom: 1px solid #c7c7c7;
}
.kehu-item>div{
display: flex;
align-items: center;
}
.kehu-item>div img{
height: 2.5rem;
width: 2.5rem;
margin-right: 1rem;
border-radius: 50%;
}
.noneData{
text-align: center;
margin-top: 2rem;
}
</style>
</head>
<body>
<div class="nav">
<div onclick="setContent(1, 'shuju', 'kehu')"><span id="shuju" class="active">数据统计</span></div>
<div onclick="setContent(2, 'kehu', 'shuju')"><span id="kehu">激活客户</span></div>
</div>
<div class="main scrollbar" id="main">
<div id="shujuC">
<div class="item">
<div class="item-content flex">
<img src="../images/work-rili.png" alt="">
<div>
<p class="name" id="name">工作汇报</p>
<p class="time" id="time">2019年9月11日</p>
</div>
</div>
</div>
<div class="item color-w">
<div class="item-content">
<div class="flex-between"><span>散客人数</span><span id="sanke">0人</span></div>
<div class="flex-between"><span>单团人数</span><span id="dantuan">0人</span></div>
</div>
</div>
<div class="item color-w">
<div class="item-content">
<div class="flex-between"><span>今日外出时间</span><span id="waichusj">00:00:00</span></div>
<div class="flex-between"><span>今日计划完成数</span><span id="jihuas">0次</span></div>
<div class="flex-between"><span>今日拜访客户总数</span><span id="baifangs">0人</span></div>
<div class="flex-between"><span>未来拜访计划次数</span><span id="weilaib">0次</span></div>
</div>
</div>
<div class="item color-w">
<div class="item-content">
<div class="flex-between"><span>下载行程次数</span><span id="DownloadTrip">0次</span></div>
<div class="flex-between"><span>使用42助手的时间统计</span><span id="UsedApp">0</span></div>
<div class="flex-between"><span>使用公司系统的时间统计</span><span id="UsedErp">0</span></div>
</div>
</div>
<div class="item color-w">
<div class="item-content">
<div class="flex-between"><span>新同行增加数</span><span id="AddCustomer">0次</span></div>
<div class="flex-between"><span>IM广告系统发送数</span><span id="AdSend">0次</span></div>
<div class="flex-between"><span>IM系统同行互动次数</span><span id="ImUsedCount">0次</span></div>
<div class="flex-between"><span>IM系统同行互动时数</span><span id="ImUsedTime">0</span></div>
<div class="flex-between"><span>老同行的网站浏览数</span><span id="ClientPv">0次</span></div>
</div>
</div>
<div class="item color-w padding-bottom">
<div>
<div class="flex-between"><span>广告制作次数</span><span id="BuilderAd">0次</span></div>
<div class="flex-between"><span>完成的广告转发到IM系统次数</span><span id="AdToApp">0次</span></div>
<div class="flex-between money">
<div class="flex-between"><span>收款</span><span id="IncomeMoney">0次</span></div>
<div class="flex-between"><span>收款金额</span><span id="IncomeMoneyFinish">0</span></div>
</div>
<div class="flex-between"><span>处理投诉次数</span><span id="Tousu">0次</span></div>
</div>
</div>
<div class="spinner" id="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<p>加载中...</p>
</div>
</div>
<div id="kehuC">
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/md5.js"></script>
<script type="text/javascript" src="../js/layer/layer.js"></script>
<script type="text/javascript" src="../js/mian.js?t='666'"></script>
<script type="text/javascript" src="../js/autosize.js"></script>
<script>
var str = location.href; //取得整个地址栏
var param = str.substr(str.indexOf("?")+1);
param = param.split('&');
let empId = param[0].split('=')[1],
finishDate = decodeURI(param[1].split('=')[1]),
token = param[2].split('=')[1];
// 测试数据
// let finishDate = '2019-10-11',
// empId = 1755,
// token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1NzA3NjExMzMuMCwiZXhwIjoxNTcwODQ3NTMzLjAsInVzZXJJbmZvIjp7InVpZCI6IjE3NTUiLCJyZXF1ZXN0RnJvbSI6MX19.y3dsvymnxj6vZPYgiiLSnK2pPAyDBMXOz3jOilbFCHA";
$.ajax({
type: "POST",
url: "http://reborn.oytour.com/api/common/post",
// url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData('user_post_get_usertodaysixstatistics', {empId: empId, finishDate: finishDate}, token),
async: false,
success: function (res) {
if (res.resultCode === 1) {
let data = res.data.details;
$("#name").text(data.EmName + ' 工作汇报')
$("#time").text(finishDate.replace('-', '年').replace('-', '月'))
$("#sanke").text(data.SanCount + '人')
$("#dantuan").text(data.DanCount + '人')
$("#waichusj").text(renderMinute(data.OutTime*3600))
$("#jihuas").text(data.FinishPlanCount + '次')
$("#baifangs").text(data.FinishClientCount + '人')
$("#weilaib").text(data.FutureCount + '次')
$("#DownloadTrip").text(data.DownloadTrip + '次')
$("#UsedApp").text(renderMinute(data.UsedApp*60))
$("#UsedErp").text(renderMinute(data.UsedErp*60))
$("#AddCustomer").text(data.AddCustomer + '次')
$("#AdSend").text(data.AdSend + '次')
$("#ImUsedCount").text(data.ImUsedCount + '次')
$("#ImUsedTime").text(renderMinute(data.ImUsedTime*60))
$("#ClientPv").text(data.ClientPv + '次')
$("#BuilderAd").text(data.BuilderAd + '次')
$("#AdToApp").text(data.AdToApp + '次')
$("#IncomeMoney").text(data.IncomeMoney + '次')
$("#IncomeMoneyFinish").text(data.IncomeMoneyFinish)
$("#Tousu").text(data.Tousu)
}
},
error: function (res) {
}
});
$.ajax({
type: "POST",
url: "http://reborn.oytour.com/api/common/post",
// url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData('app_customer_GetMyCustomerIMList', {EmoloyeeId: empId}, token),
async: false,
success: function (res) {
if (res.resultCode === 1) {
$("#spinner").hide()
let data = res.data;
console.log(data)
let html = ''
if (data.length > 0) {
for(let i = 0; i < data.length; i++){
if (data[i].sort === 1) {
html += `<div class="kehu-item">
<div>
<img src="${data[i].businessCardPhotos !== null ? data[i].businessCardPhotos[0] : '../images/default_head_img.jpg'}" alt="">
<span>${data[i].contact}</span>
</div>
<span>${data[i].customerName}</span>
</div>`
}
}
} else {
html = `<div class="noneData">暂无数据</div>`
}
$("#kehuC").html(html)
}
},
error: function (res) {
}
});
function renderMinute(time){
let result = parseInt(time)
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
result = `${h}:${m}:${s}`
return result
}
function setContent(t, showId, hideId){
$(`#${showId}`).addClass('active')
$(`#${hideId}`).removeClass('active')
$(`#${showId}C`).show()
$(`#${hideId}C`).hide()
let bgC = t === 1 ? '#D48E34' : '#f5f5f5'
$(`#main`).css('background', bgC)
}
</script>
</body>
</html>