1
0
mirror of https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git synced 2025-06-17 03:34:05 +08:00

智慧运营-厅店效能大屏监控看板

This commit is contained in:
郎大伟 2020-01-12 12:54:30 +08:00
parent d2331ad27f
commit 44c5ba93f1
35 changed files with 10791 additions and 0 deletions

View File

@ -0,0 +1,193 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>厅店效能分析</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link href="../static/js/pluginsPackage/bootstrap-3.3.0/bootstrap.css" rel="stylesheet" type="text/css"></link>
<link href="../static/js/pluginsPackage/swiper/swiper.min.css" rel="stylesheet" type="text/css">
<link href="../static/css/style.css" rel="stylesheet" type="text/css"></link>
<link href="../static/css/office_efficiency_index.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
//埋点全局变量
var gDataGather={
systemCode:"dataanalysis",
systemName:"CRM数据分析",
moduleCode:"dataanalysis-m001",
moduleName:"稳定运营",
pageCode:"dataanalysis-m001-p0007",
pageName:"厅店效能分析",
param:"{}"
}
</script>
</head>
<body>
<div class="container-fluid container-bg office-efficiency-index">
<div class="row office-header">
<div class="col-sm-12 col-md-12 pd title-info">厅店营业效能分析</div>
<div class="col-sm-5 col-md-5 pd analysis-info">XXXX-XXXX</div>
<div class="col-sm-7 col-md-7 pd analysis-filter">
<table style="width:100%;height:48px;">
<tr>
<td style="width:70%;text-align:right;">
</td>
<td style="width:15%;text-align:right;padding-left:10px;color:#fff;font-size:14px;font-weight:bold;" id="td-data-date">
<!-- <input type="text" id="data-date" name="dataDate" class="form-control" style="width:100px;"/> -->
</td>
<td style="width:15%;">
<div class="cust-type-default right" type="2">政企</div>
<div class="cust-type-default left active" type="1">公众</div>
</td>
</tr>
</table>
</div>
<!--地域渠道条件选择-->
<div id="select-group-channel-tablebar" class="select-group-channel-tablebar">
<div class="row">
<div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">地域选择:</div>
<div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;">
<input type="text" id="selectCity" name="cityCode" class="form-control" style="width:150px;"/>
</div>
<div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">区域选择:</div>
<div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;">
<input type="text" id="selectCounty" name="countyCode" class="form-control" style="width:150px;"/>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">渠道名称:</div>
<div class="col-sm-6 col-md-6 pd" style="height:40px;margin-top:15px;">
<input type="text" id="channel_name" name="channelName" class="form-control" style="width:330px;" placeHolder=""/>
</div>
<div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;text-align:center;">
<button type="button" class="btn btn-info btn-sm" style="height:35px;width:70px;margin-left:10px;background:#181C41;" onclick="doQueryChannelName();">查询</button>
<button type="button" class="btn btn-info btn-sm" style="height:35px;width:70px;background:#282C55;" onclick="doRestChannelName();">重置</button>
</div>
</div>
</div>
</div>
<div class="row office-header-content">
<div class="col-sm-3 col-md-3 pd">
<div class="col-info">
<div class="title">门店基本信息</div>
<div class="content base-info" id="base-info">
<table>
<tr>
<td colspan="4"><div class="channel-name">XXXX</div></td>
</tr>
<tr>
<td rowspan="2"><div id="integral_echart" class="integral-echart"></div></td>
<td><div class="ding-dan-bg"></div></td>
<td><div class="ke-liu-bg"></div></td>
<td><div class="pai-dui-ji-bg"></div></td>
</tr>
<tr>
<td><div class="liang-shu-zhi" type="dingdanVal">--</div></td>
<td><div class="liang-shu-zhi" type="custNumVal">--</div></td>
<td><div class="liang-shu-zhi" type="lineUpVal">--</div></td>
</tr>
<tr class="td-shu-zhi">
<td class="popval">全省前5%</td>
<td>订单量</td>
<td>当日客流</td>
<td>排队时长</td>
</tr>
<tr>
<td><div class="channel-star-level">门店星级</div></td>
<td colspan="3" class="chanenl-star">
<img src="../static/images/star1.png" style="width:21px;height:20px;"/>
<img src="../static/images/star1.png" style="width:21px;height:20px;"/>
<img src="../static/images/star1.png" style="width:21px;height:20px;"/>
<img src="../static/images/star1.png" style="width:21px;height:20px;"/>
<img src="../static/images/star1.png" style="width:21px;height:20px;"/>
<div class="channel-total-score">--分</div>
</td>
</tr>
<tr>
<td class="label-name">台席健康度:</td>
<td class="label-value device-score">
<img src="../static/images/star1.png"/>
<div class="score-val">1分</div>
</td>
<td class="label-name">受理速度:</td>
<td class="label-value avgtime">
<img src="../static/images/star1.png"/>
<div class="score-val">1分</div>
</td>
</tr>
<tr>
<td class="label-name">违规行为:</td>
<td class="label-value weigui">
<img src="../static/images/star1.png"/>
<div class="score-val">1分</div>
</td>
<td class="label-name">营销评级:</td>
<td class="label-value yingxiao">
<img src="../static/images/star1.png"/>
<div class="score-val">1分</div>
</td>
</tr>
<tr>
<td class="label-name">业务量:</td>
<td class="label-value yewuliang">
<img src="../static/images/star1.png"/>
<div class="score-val">1分</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 pd">
<div class="col-info">
<div class="title">门店历史受理详情 </div>
<div class="content" id="channel_handle_detail"></div>
</div>
</div>
<div class="col-sm-3 col-md-3 pd">
<div class="col-info">
<div class="title">营业员受理详情</div>
<div class="content staff-info" id="staff-info">
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 pd device-info-col">
<div class="col-info">
<div class="title">门店台席健康度</div>
<div class="title-icon">
<div class="device-alarm"><svg class="icon" aria-hidden="true"><use xlink:href="#icongaojing2"></use></svg><span type="grayGrade">0</span></div>
<div class="device-alarm"><svg class="icon" aria-hidden="true"><use xlink:href="#icongaojing1"></use></svg><span type="redGrade">0</span></div>
<div class="device-alarm"><svg class="icon" aria-hidden="true"><use xlink:href="#icongaojing"></use></svg><span type="greenGrade">0</span></div>
</div>
<div class="content deviceInfo" id="device-info">
</div>
</div>
</div>
<div class="col-sm-5 col-md-5 pd time-step-col">
<div class="col-info">
<div class="title">耗时步骤分析</div>
<div class="content" id="time-step-detial"></div>
</div>
</div>
<div class="col-sm-4 col-md-4 pd business-type-time-col">
<div class="col-info">
<div class="title">业务类型耗时分析</div>
<div class="content" id="business-type-time-detial"></div>
</div>
</div>
</div>
</div>
<!--特效动画效果-->
<div id="query-page-data" style="display:none" onclick="loadPageData()" sa-gatherClick="true" elementCode="dataanalysis-m001-p0007-e00001" elementName="查询数据"></div>
<script src="../static/js/pluginsPackage/jquery/jquery.1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/pluginsPackage/bootstrap-3.3.0/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/pluginsPackage/bootstrap-3.3.0/respond.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/pluginsPackage/swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/pluginsPackage/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/office_efficiency_data.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/office_efficiency_index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

View File

@ -0,0 +1,150 @@
.office-efficiency-index{font-family:PingFangSC-Semibold,PingFang SC;background-color:#22284A;background-size:cover;}
/*头部样式*/
.office-header{height:9rem;background: url("../images/office_efficiency_header_bg.png")no-repeat center center;background-size: 100% 100%;}
.office-header .title-info{height: 2em;color:#03C2EC;text-align: center;font-size: 24px;font-family:'cuhei';font-weight: 600;line-height: 2em;vertical-align: middle;}
.analysis-info{height:4rem;line-height:3.5rem;vertical-align:middle;font-size: 20px;font-weight: 600;background-image: linear-gradient(#D8AE22, #DC9546);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 60s infinite linear;}
.analysis-filter{height:4.5rem;}
.analysis-filter .col-md-4{padding:0px;margin:0px 10px 0px 10px;}
.analysis-filter .control-label{font-size:15px;color:#fff;}
.analysis-filter .form-control{height:38px;}
/*渠道选择*/
.datagrid-toolbar, .datagrid-pager{background: #181C41;}
.datagrid-header{background: #181C41;}
.datagrid-body{background: #181C41;}
.datagrid-htable{background: #181C41;}
.panel-header,.panel-body{border-color:#03C2EC;}
.datagrid-htable .datagrid-row{color:red;}
.datagrid-cell{background: #181C41;color:#fff;height:35px!important;line-height:35px;vertical-align:middle;font-size:16px;}
.datagrid-cell:hover{color:#14B4FE;}
.datagrid-header, .datagrid-toolbar, .datagrid-pager, .datagrid-footer-inner{border-color:#7187AC;}
.datagrid-header td, .datagrid-body td, .datagrid-footer td{border:0px;}
.datagrid-header-row,.datagrid-row {height: 35px;}
.datagrid-header .datagrid-cell span{font-size:16px;}
.textbox{background:transparent;border:0px;color:#fff;}
.textbox-text.validatebox-text{background:transparent;color:#fff;font-size:15px; width:75px;font-weight:600;padding-left:0px;text-align:right!important;}
.datagrid-pager.pagination{color:#fff;}
.pagination-page-list,.pagination-num{color:fff;background: #181C41;}
.combo-panel.panel-body.panel-body-noheader{background:#282C55;}
.textbox-icon{opacity:1}
.combobox-item{color:#fff;}
.combobox-item-selected{background:#14B4FE;color:#fff;}
.combobox-item-hover{background:#14B4FE;color:#fff;}
.combo-arrow {background: url('../images/select_arrow.png') no-repeat center center;background-size:15px 8px;}
.combo-arrow:hover{background: url('../images/select_arrow.png') no-repeat center center;background-size:15px 8px;}
.textbox-focused {-webkit-box-shadow:none;box-shadow:none;}
.form-control.Wdate{border:0;color:#fff;-webkit-box-shadow:none;box-shadow:none;}
.Wdate{background: url('../images/select_arrow.png') no-repeat right!important;background-size:15px 8px!important;}
.cust-type-default{float:right;cursor:pointer;width:62px;height:32px;line-height:27px;color:#14B4FE;border:1px solid #14B4FE;text-align:center;}
.cust-type-default.left{border-radius:6px 0px 0px 6px;}
.cust-type-default.right{border-radius:0px 6px 6px 0px;}
.cust-type-default.active{background: #14B4FE;color:#fff;}
.select-group-channel-tablebar{display:none;}
/* 加载旋转动画 */
#load{width:100%;height:100%;position:absolute;background:url(../images/iframe/data08.png) no-repeat #061537;background-size:cover;top:0;left:0;z-index:999;}
#load .load_img{position:absolute;left:calc(50% - 182px);top:calc(50% - 182px);}
.load_img img{position:absolute;left:0;top:0;}
.load_img .jzxz1{animation:xz1 8s infinite linear;}
@keyframes xz1 {
from {
transform:rotate(0deg);
}
50% {
transform:rotate(180deg);
}
to{
transform:rotate(360deg);
}
}
.load_img .jzxz2{animation:xz2 7s infinite linear;}
@keyframes xz2 {
from {
transform:rotate(0deg);
}
50% {
transform:rotate(-180deg);
}
to{
transform:rotate(-360deg);
}
}
/*数据模块样式*/
.office-efficiency-index .office-header-content{margin-bottom:10px;}
.office-efficiency-index .office-header-content .col-sm-3.col-md-3.pd{padding:0px;margin:0px;}
.office-efficiency-index .office-header-content .col-sm-4.col-md-4.pd{padding:0px;margin:0px;}
.office-efficiency-index .office-header-content .col-sm-5.col-md-5.pd{padding:0px;margin:0px;}
.office-efficiency-index .office-header-content .col-sm-6.col-md-6.pd{padding:0px;margin:0px;}
.office-efficiency-index .col-info{height:37rem;margin:0px 10px 20px 10px;border-radius:8px; background-color:#181C41;}
.office-efficiency-index .col-info .title{height:4rem;line-height:4rem;vertical-align:middle;padding-left:15px;font-size: 16px;font-weight: 600;color:#03C2EC;text-align: left;}
.office-efficiency-index .col-info .content{height:33rem;line-height:4rem;vertical-align:middle;padding-left:15px;}
/*门店基本信息*/
.office-efficiency-index .col-info .content.base-info table{width:100%;}
.office-efficiency-index .col-info .content.base-info table td{width:25%;height:20px;}
.content.base-info table td .channel-name{height:4rem;max-width:360px;color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.content.base-info .integral-echart{height:9rem;}
.content.base-info .ding-dan-bg{margin-left:15px;height:60px;max-width:85px;background: url("../images/ding-dan.png")no-repeat center center;background-size:50px 44px;}
.content.base-info .ke-liu-bg{margin-left:15px;height:60px;max-width:85px;background: url("../images/ke-liu.png")no-repeat center center;background-size:50px 44px;}
.content.base-info .pai-dui-ji-bg{margin-left:14px;height:60px;max-width:85px;background: url("../images/pai-dui-ji.png")no-repeat center center;background-size:33px 44px;}
.content.base-info .liang-shu-zhi{height:3rem;line-height:3rem;vertical-align:middle;color:#00A8FE;text-align:center;font-size:25px;font-weight:600;}
.content.base-info .td-shu-zhi{color:#fff;text-align:center;height:20px;}
.content.base-info .channel-star-level{font-size:15px;color:#fff;padding-left:20px;}
.content.base-info .chanenl-star{height:30px;line-heigth:30px;padding-left:10px;}
.content.base-info .chanenl-star img{float:left;width:21px;height:20px;margin-top:13px;margin-left:5px;}
.content.base-info .chanenl-star div{float:left;padding-left:15px;color:#fff;}
.content.base-info .label-name{color:#fff;white-space:nowrap;padding-left:20px;}
.content.base-info .label-value{padding-left:15px;color:#fff;}
.content.base-info .label-value img{float:left;width:21px;height:20px;margin-top:3px;}
.content.base-info .label-value .score-val{float:left;padding-left:5px;height:30px;line-height:30px;color:#fff;}
/*营业员受理详情*/
.office-efficiency-index .col-info .content.staff-info table{width:100%;}
.office-efficiency-index .col-info .content.staff-info table td{width:33%;height:20px;}
.content.staff-info .td-avg-time div{float:left;color:#fff;margin-right:5px;margin-top:10px;}
.content.staff-info .td-avg-time .index{width: 20px;height: 20px;line-height:18px;vertical-align:middle;border-radius:10px;display:block;text-align:center;color:#03C2EC;border:1px solid #03C2EC;margin-top:26px;font-size: 10px;}
.content.staff-info .td-avg-time .index.first{color:#E60012;border:1px solid #E60012;}
.content.staff-info .td-avg-time .index.second{color:#E8BC25;border:1px solid #E8BC25;}
.content.staff-info .td-avg-time .staff-name{font-size:20px;font-weight:600;color:rgba(255,255,255,1);margin-right:15px;}
.content.staff-info .td-avg-time .avg-time-label{font-size:15px;width:60px;white-space: nowrap;}
.content.staff-info .td-avg-time .avg-time-value{color:#DC9546;white-space: nowrap;text-align:left;}
.content.staff-info .staff-cust-time{height:6rem;line-height:3rem;margin-left:5px;margin-right:5px;vertical-align:middle;text-align:center;color:#fff;background:#22284A;border-radius:6px;}
.content.staff-info .staff-order-count{height:6rem;line-height:3rem;margin-left:5px;margin-right:5px;vertical-align:middle;text-align:center;color:#fff;background:#22284A;border-radius:6px;}
.content.staff-info .staff-alarm{height:6rem;line-height:3rem;margin-left:5px;margin-right:5px;vertical-align:middle;text-align:center;color:#fff;background:#22284A;border-radius:6px;}
.content.staff-info .split-line{margin:15px;height:2px;background:linear-gradient(to left,#181C41,#7187AC,#181C41)}
.content.staff-info .td-integral div{float:left;color:#fff;margin-right:5px;}
.content.staff-info .td-integral .integral-label{font-size:15px;width:80px;white-space: nowrap;padding-left:5px;}
.content.staff-info .td-integral .integral-value{color:#DC9546;width:80px;white-space: nowrap;text-align:left;padding-left:5px;}
/*门店台席受理详情*/
.office-efficiency-index .device-info-col .col-info{height:45rem;}
.office-efficiency-index .device-info-col .content{height:41rem;background: url("../images/office_efficiency_foot_bg.png")no-repeat bottom center;}
.office-efficiency-index .device-info-col .col-info .title{width:200px;}
.office-efficiency-index .device-info-col .col-info .title-icon{position:absolute; top:0px;right:10px;width:280px;height:50px;padding-right:10px;}
.office-efficiency-index .device-info-col .col-info .title-icon .device-alarm{float:right;font-size:25px;margin:5px 5px 0px 5px;}
.office-efficiency-index .device-info-col .col-info .title-icon .device-alarm span{color:#fff;padding-left:2px;padding-top:1px;}
.office-efficiency-index .device-info-col .col-info .content.deviceInfo table{width:100%;}
.office-efficiency-index .device-info-col .col-info .content.deviceInfo table td{width:25%;height:25px;padding:0px;margin:0px;}
.content.deviceInfo .device-img{text-align:center;}
.content.deviceInfo .device-img img{width:50px;height:45px;}
.content.deviceInfo .label-name{font-size:14px;width:80px;height:30px;line-height:30px;vertical-align:middle;white-space: nowrap;color:#fff;}
.content.deviceInfo .label-name .os-name{width:80px;height:30px;line-height:30px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;}
.content.deviceInfo .label-name.score{color:#E5BB2E;font-size:22px;font-weight:600;}
.content.deviceInfo .kuan-dai{text-align:center;}
.content.deviceInfo .kuan-dai .progress-label{float:left;margin-bottom:10px;text-align:left;color:#fff;font-size:16px;white-space:nowrap;width:100%;height:20px;line-height:20px;vertical-align:middle;}
.content.deviceInfo .nei-cun-size{width:70px;height:70px;background: url("../images/nei_cun_size.png")no-repeat center center;background-size:60px 60px;}
.content.deviceInfo .cpu-use{width:70px;height:70px;background: url("../images/cpu_use.png")no-repeat center center;background-size:60px 60px;}
.content.deviceInfo .nei-cun-use{width:70px;height:70px;background: url("../images/nei_cun_use.png")no-repeat center center;background-size:60px 60px;}
.content.deviceInfo .device-use span{display: block;font-size: 15px;font-weight: 500;color: #fff;line-height: 67px;text-align: center;vertical-align: middle;}
.content.deviceInfo .split-line{margin:15px;height:2px;background:linear-gradient(to left,#181C41,#7187AC,#181C41)}
.content.deviceInfo .labe-value{color:#fff;height:30px;line-height:30px;vertical-align:middle;}
.content.deviceInfo .progress-bar {background-color: #009AFD;}
/*耗时步骤分析详情*/
.office-efficiency-index .time-step-col .col-info{height:45rem;}
.office-efficiency-index .time-step-col .content{height:41rem;background: url("../images/office_efficiency_foot_bg.png")no-repeat bottom center;}
/*业务类型耗时分析详情*/
.office-efficiency-index .business-type-time-col .col-info{height:45rem;}
.office-efficiency-index .business-type-time-col .content{height:41rem;background: url("../images/office_efficiency_foot_bg.png")no-repeat bottom center;}

View File

@ -0,0 +1,121 @@
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11;text-decoration:underline;}
/*滚动条样式*/
::-webkit-scrollbar {width: 6px;height:6px;}
::-webkit-scrollbar-track-piece{background-color: #eee;margin: -2px;}
::-webkit-scrollbar-thumb{background: #aaa;min-height: 150px;min-width: 150px;border-radius: 10px;}
::-webkit-scrollbar-thumb:vertical:hover{background: #555555}
::-webkit-scrollbar-thumb:horizontal:hover{background: #555555}
/* scrolltext */
.scrolltext{padding-top: 35px;width:90%;height:100%;overflow:hidden;margin:20px auto 0 auto;}
.scrolltext ol li{cursor:pointer;padding-left:7px;width:570px;height:25px;font-size:13px;line-height:25px;border-bottom:2px solid #fff;}
.scrolltext ol li a{color:#6f746e;display:inline;width:570px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;}
.scrolltext ol li a:hover{color:#1990FF;text-decoration:none;}
.scrolltext .part{width:100%;padding-top:20px;}
.scrolltext .part span{margin-left:26px;cursor:pointer;}
/*自定义横向tab切效果*/
.Shortcut{height:2.8em;}
.custom-nav-tabs{height:40px;line-height: 40px;vertical-align: top;text-align:left;padding-left: 2em;font-family: MicrosoftYaHei;background: #FFFFFF;border: 1px solid #E8E8E8;box-shadow: 1px 1px 10px 0 rgba(235,235,235,0.50);border-top-left-radius: 5px;border-top-right-radius: 5px;}
.custom-nav-tabs li{float:left;margin-right:10px;height:38px;line-height:38px;vertical-align: middle;padding:0px 5px 0px 5px;}
.custom-nav-tabs li.active{border-bottom: 3px solid #1990FF;}
.custom-nav-tabs li:hover{border-bottom: 3px solid #1990FF;}
.custom-nav-tabs li a{height:30px;float:left;color:#666666;font-size:13px;font-weight:bold;text-decoration:none;}
.shortcutEntry{width:50px;height: 50px;background: #29CB97;border-radius: 5px;margin: 0 auto;margin-bottom:6px;}
/*页面头部菜单导航样式*/
.all-nav {position: absolute;left: 0;top: 0;height: 50px;width: 50px;color: #fff;cursor: default;text-align: center;border-right: 1px solid hsla(0,0%,100%,.15);transition: all .2s ease-in-out;cursor:pointer;}
.all-nav img{margin-top:11px;}
.all-nav.active,.all-nav:hover {background:#3063E3;}
.all-navbar-header{width:25%;position:relative;left:60px;height: 45px;vertical-align:middle;}
.all-navbar-header svg{margin-top:12px;float:left;width:25px;height:25px;}
.all-navbar-header div{float:left;width:180px;height:25px;margin:13px 0px 0px 5px;color:#FFFFFF;font-size:15px;font-family: MicrosoftYaHei;letter-spacing: 1.66px;}
/*菜单手风琴效果*/
.accordionMenu{background:#333333;width:200px;height:100%;display:none;z-index:999;position:absolute;top:50px;left:-500px;}
.accordionMenu .item_dl dt{height:20px;display:block;padding:10px;border-bottom:1px solid #161616;cursor:pointer;}
.accordionMenu .item_dl dt.expansion:hover{background:none;}
.accordionMenu .item_dl dt svg{width:16px;height:16px;float:left;color:#fff;margin-top:2px;opacity:1;}
.accordionMenu .item_dl dt .item_title{width:120px;font-size:14px;color:#fff;margin-left:10px;margin-right:10px;float:left;opacity:1;}
.accordionMenu .item_dl dt .arrowClass{float:left;-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition: all 1s;transition: all 1s;}
.accordionMenu .item_dl dt.active .arrowClass{-ms-transform:rotate(540deg);-moz-transform:rotate(540deg);-webkit-transform:rotate(540deg);-o-transform:rotate(540deg);transform:rotate(540deg);-webkit-transition: all 1.5s;transition: all 1.5s;}
.accordionMenu .item_dd .menuSecond{background:#161616;min-height:50px;height:200px;overflow-y:auto;padding:5px;display: none;}
.accordionMenu .item_dd .menuSecond div{height:30px;line-height:30px;vertical-align:middle;text-align:left;color:#fff;font-size:14px;margin:2px;cursor:pointer;opacity:0.65;padding-left: 40px;}
.accordionMenu .item_dd .menuSecond div:hover{color:#1890FF;opacity:1;}
.upAndExpand{width:60px;height:27.5px;line-height:27.5px;vertical-align:middle;padding-left:9px;color:#0090FF;cursor:pointer;float:right;}
.upAndExpand.up{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition: all 1s;transition: all 1s;}
.upAndExpand.expand{-ms-transform:rotate(540deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition: all 1s;transition: all 1s;}
/*自动隐藏提示框*/
.autoHidden-nofitTips{position:fixed;padding:20px; background: url(../../images/iframe/bg_trans.png) repeat 0 0; font-size:14px; color: #fff; border-radius:5px; z-index: 120; }
.autoHidden-nofitTips i{display: inline-block; vertical-align: -3px; margin-right: 5px; width:16px; height:16px; background: url(../../images/iframe/tipsBg.png) no-repeat;}
.autoHidden-nofitTips i.sf-ok{background-position:-182px 0px;}
.autoHidden-nofitTips i.sf-error{background-position:-182px -70px;}
.autoHidden-nofitTips i.sf-tip{background-position:-182px -140px;}
.autoHidden-nofitTips i.sf-help{background-position:-182px -210px;}
/*阿里图标库*/
.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor; overflow: hidden;}
/*办理业务耗时头部tab切换样式*/
.navTitle{font-size:16px; font-family:'微软雅黑'; color:#333; border-left:solid 2px #0090FF; padding-left:10px}
.tabSpan{width: 100px; height: 32px; display: inline-block; line-height: 32px; cursor: pointer;}
.cation-content{width: 100%;margin: 0 auto;padding: 0;position: relative;}
.cation-middle{height:35px;line-height: 35px;font-size: 14px;}
.cation-middle dl {margin-bottom: 0px;border-bottom: 0.5px solid #E1E6EB}
.cation-list{overflow: hidden;}
.cation-list dt{float: left;width: 190px;font-weight: 400;font-family: regular;height:35px;line-height: 35px;position: relative;color: #4c4c4c;text-align: center;font-size: 14px;background: #E5E9F2;border-bottom: 0.5px solid #E1E6EB;}
.cation-list:last-child dt{border-bottom: none;}
.cation-list:last-child dd{border-bottom: none;}
.cation-list dd .areaInfo{margin-left:200px;margin-top:2px;height:32px;}
.cation-list dd .dateInfo{margin-left:200px;margin-top:3px;height:32px;}
.cation-list dd a{color: #444;font-size: 14px;max-width:105px;text-align: left;height: 35px;line-height: 35px;display: inline-block;float: left;margin-left: 40px;text-decoration: none;}
.cation-list dd a.all{text-align: center;}
.cation-list dd a.active,.cation-list a:hover{color: #4D85FF;font-weight: 600;}
.dateDim div{color: #444;font-size: 14px;float:left;margin:5px 10px 0px 10px;cursor:pointer;}
.dateDim div.active,.dateDim div:hover{color: #4D85FF;font-weight: 600;}
/*已选菜单*/
#filter_condition_selected{padding-top:8px;}
#filter_condition_selected div{height:23px;line-height:23px;vertical-align:middle;cursor:pointer;margin-right:15px;padding:0px 5px 0px 5px;float:left;}
#filter_condition_selected div i{background: url("../../images/iframe/deleteBtn.png");background-size:16px 16px;width:16px;height:16px;margin-left:3px;display:inline-block;}
/*营业厅提示*/
.channelTipClass{height:30px;line-height:30px;color:#4D85FF;font-size:13px;}
#selectChannelTable_bar{padding:5px;display:none;height:40px;}
#selectChannelTable_bar label{width:80px;text-align: center;}
.breadcrumb > .active a{color: #777;}
/*动态星星特效*/
.starIcon{position:absolute;width:32px;height:32px;background: url(../../images/iframe/star.gif) no-repeat;}
/*动态进度条1*/
.sf-shade{position: fixed; left: 0; top: 0; width:100%; background: #000; opacity: 0.4; height: 100%; z-index: 135;}
.loader-progress{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-mos-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align:center;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor:default;}
.loader-progress .text{position: absolute;left: -8.3em;top: -1.7em;-webkit-animation: text 2s infinite;-moz-animation: text 2s infinite;-moz-animation: text 2s infinite;-ms-animation: text 2s infinite;-o-animation: text 2s infinite;animation: text 2s infinite;width:250px;color:#ffffff;}
.loader-progress .vertical{position:absolute;top: -1.84em;left: -0.4em;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}
.loader-progress .horizontal{position:absolute;top:0em;left:0em;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
.loader-progress .circlesup{position:absolute;top: -4.7em;right: 12.1em;}
.loader-progress .circlesdwn{position:absolute;top:2.5em;right:-13.5em;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}
.loader-progress .circle{position: absolute;width: 15em;height: 15em;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-ms-animation: orbit 2s infinite;-o-animation: orbit 2s infinite;animation: orbit 2s infinite;z-index:5;}
.loader-progress .circle:after{content: '';position: absolute;width: 2em;height: 2em;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;border-radius: 100%;background: #13A3A5;}
.loader-progress .circle:nth-child(2){-webkit-animation-delay: 100ms;-moz-animation-delay: 100ms;-ms-animation-delay: 100ms;-o-animation-delay: 100ms;animation-delay: 100ms;z-index:4;}
.loader-progress .circle:nth-child(2):after{background: #56bebf;-webkit-transform: scale(0.8,0.8);-moz-transform: scale(0.8,0.8);-ms-transform: scale(0.8,0.8);-o-transform: scale(0.8,0.8);transform: scale(0.8,0.8);}
.loader-progress .circle:nth-child(3){-webkit-animation-delay: 225ms;-moz-animation-delay: 225ms;-ms-animation-delay: 225ms;-o-animation-delay: 225ms;animation-delay: 225ms;z-index:3;}
.loader-progress .circle:nth-child(3):after{background: #ffa489;-webkit-transform: scale(0.6,0.6);-moz-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-o-transform: scale(0.6,0.6);transform: scale(0.6,0.6);}
.loader-progress .circle:nth-child(4){-webkit-animation-delay: 350ms;-moz-animation-delay: 350ms;-ms-animation-delay: 350ms;-o-animation-delay: 350ms;animation-delay: 350ms;z-index:2;}
.loader-progress .circle:nth-child(4):after{background: #ff6d37;-webkit-transform: scale(0.4,0.4);-moz-transform: scale(0.4,0.4);-ms-transform: scale(0.4,0.4);-o-transform: scale(0.4,0.4);transform: scale(0.4,0.4);}
.loader-progress .circle:nth-child(5){-webkit-animation-delay: 475ms;-moz-animation-delay: 475ms;-ms-animation-delay: 475ms;-o-animation-delay: 475ms;animation-delay: 475ms;z-index:1;}
.loader-progress .circle:nth-child(5):after{background: #DB2F00;-webkit-transform: scale(0.2,0.2);-moz-transform: scale(0.2,0.2);-ms-transform: scale(0.2,0.2);-o-transform: scale(0.2,0.2);transform: scale(0.2,0.2);}
@-webkit-keyframes orbit{0%{-webkit-transform:rotate(45deg);}5%{-webkit-transform:rotate(45deg); -webkit-animation-timing-function: ease-out;}70%{-webkit-transform:rotate(405deg); -webkit-animation-timing-function: ease-in;}100%{-webkit-transform:rotate(405deg);}}
@-moz-keyframes orbit{0%{-moz-transform:rotate(45deg);}5%{-moz-transform:rotate(45deg); -moz-animation-timing-function: ease-out;}70%{-moz-transform:rotate(405deg); -moz-animation-timing-function: ease-in;}100%{-moz-transform:rotate(405deg);}}
@-ms-keyframes orbit{0%{-ms-transform:rotate(45deg);}5%{-ms-transform:rotate(45deg); -ms-animation-timing-function: ease-out;}70%{-ms-transform:rotate(405deg); -ms-animation-timing-function: ease-in;}100%{-ms-transform:rotate(405deg);}}
@-o-keyframes orbit{0%{-o-transform:rotate(45deg);}5%{-o-transform:rotate(45deg); -o-animation-timing-function: ease-out;}70%{-o-transform:rotate(405deg); -o-animation-timing-function: ease-in;}100%{-o-transform:rotate(405deg);}}
@keyframes orbit{0%{transform:rotate(45deg);}5%{transform:rotate(45deg); animation-timing-function: ease-out;}70%{transform:rotate(405deg); animation-timing-function: ease-in;}100%{transform:rotate(405deg);}}
@-webkit-keyframes text{0%{-webkit-transform:scale(0.2,0.2); -webkit-animation-timing-function: ease-out;}40%,60%{-webkit-transform:scale(1,1); -webkit-animation-timing-function: ease-out;}70%,100%{-webkit-transform:scale(0.2,0.2);}}
@-moz-keyframes text{0%{-moz-transform:scale(0.2,0.2); -moz-animation-timing-function: ease-out;}50%{-moz-transform:scale(1,1); -moz-animation-timing-function: ease-out;}60%{-moz-transform:scale(1,1);-moz-animation-timing-function: ease-out;}100%{-moz-transform:scale(0.2,0.2);}}
@-mos-keyframes text{0%{-mos-transform:scale(0.2,0.2); -mos-animation-timing-function: ease-out;}50%{-mos-transform:scale(1,1); -mos-animation-timing-function: ease-out;}60%{-mos-transform:scale(1,1); -mos-animation-timing-function: ease-out;}100%{-mos-transform:scale(0.2,0.2);}}
@-o-keyframes text{0%{-o-transform:scale(0.2,0.2); -o-animation-timing-function: ease-out;}50%{-o-transform:scale(1,1); -o-animation-timing-function: ease-out;}60%{-o-transform:scale(1,1); -o-animation-timing-function: ease-out;}100%{-o-transform:scale(0.2,0.2);}}
@keyframes text{0%{transform:scale(0.2,0.2); animation-timing-function: ease-out;}50%{transform:scale(1,1); animation-timing-function: ease-out;}60%{transform:scale(1,1); animation-timing-function: ease-out;}100%{transform:scale(0.2,0.2);}}
/*动态进度条2*/
.preloader{background: #fff url("../../images/iframe/loader.gif") no-repeat center center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 601 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 255 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,525 @@
var data={
"code":0,
"businessTypeAnalysis":{
"orderNum":[
"39",
"77",
"96",
"41",
"24",
"17",
"0",
"10"
],
"categoryArr":[
"订购附属",
"新装",
"拆机",
"改客户资料",
"补换卡",
"过户",
"换挡",
"移机"
],
"avgTime":[
"10.79",
"17.05",
"14.84",
"10.07",
"5.58",
"10.36",
"0.00",
"4.43"
],
"legendArr":[
"耗时时间",
"订单量"
]
},
"timeStepAnalysis":{
"channelTime":[
"5.52",
"15.80",
"46.38",
"51.46",
"14.51",
"44.30",
"26.80"
],
"categoryArr":[
"客户定位",
"业务选择",
"选号",
"选址",
"订购附属",
"实名拍照",
"业务确认"
],
"legendArr":[
"厅耗时",
"省耗时"
],
"provinceTime":[
"2.64",
"15.53",
"30.09",
"21.19",
"73.74",
"45.76",
"24.43"
]
},
"staffHandleInfo":{
"channelJfMap":{
"NJ05166060_charge":9194,
"NJ68689949_charge":2848,
"NJ11050091_charge":-119,
"NJ11057808_charge":-688,
"NJ68689949_index":11,
"NJ0104010153_charge":-139,
"NJ72000095_charge":9433,
"NJ05166060_index":6,
"NJ11049063_index":10,
"9901500010_charge":-250,
"channelOrder":28,
"channelTotal":57159,
"NJ72000095_index":5,
"NJ11010340_index":15,
"9901660106_index":3,
"NJ51789168_index":4,
"NJ36038678_charge":918,
"NJ90906337_index":7,
"NJ37825052_index":8,
"NJ0104010153_index":18,
"channelLength":21,
"NJ11049063_charge":6081,
"NJ11032104_charge":-71,
"NJ11032099_charge":6750,
"0915020_index":13,
"NJ37709514_charge":13063,
"NJ51789168_charge":11633,
"channelSum":97714,
"staffCode":-3505,
"9901660106_charge":12390,
"NJ11057808_index":20,
"NJ90906337_charge":8411,
"0915020_charge":221,
"NJ90908499_index":21,
"NJ37825052_charge":7930,
"NJ11010340_charge":0,
"NJ36038678_index":12,
"9901500010_index":19,
"NJ37709514_index":2,
"NJ11032500_charge":169,
"NJ11032500_index":14,
"NJ11050091_index":17,
"NJ156677_charge":13445,
"NJ156677_index":1,
"NJ90908499_charge":-3505,
"NJ11032099_index":9,
"NJ11032104_index":16
},
"channelStaffLen":11,
"channelStartWeiGui":1,
"channelOrderNum":"233",
"staffHandleInfo":{
"map_201912311524067392":[
{
"staffCode":"9901500010",
"index":1,
"orderNum":"21",
"avgTime":"0.73",
"staffName":"金志慧"
},
{
"staffCode":"9901660106",
"index":2,
"orderNum":"23",
"avgTime":"1.55",
"staffName":"李春君"
}
],
"map_201912311524064349":[
{
"staffCode":"NJ11032099",
"index":3,
"orderNum":"29",
"avgTime":"1.07",
"staffName":"冷静"
},
{
"staffCode":"NJ11032500",
"index":4,
"orderNum":"4",
"avgTime":"1.49",
"staffName":"郑芳"
}
],
"map_201912311524064395":[
{
"staffCode":"NJ156677",
"index":5,
"orderNum":"35",
"avgTime":"1.16",
"staffName":"宣婷婷"
},
{
"staffCode":"NJ36038678",
"index":6,
"orderNum":"1",
"avgTime":"0.73",
"staffName":"陈昱燃"
}
],
"map_201912311524063662":[
{
"staffCode":"NJ37709514",
"index":7,
"orderNum":"27",
"avgTime":"1.42",
"staffName":"陈光明"
},
{
"staffCode":"NJ37825052",
"index":8,
"orderNum":"10",
"avgTime":"1.75",
"staffName":"周梦盼"
}
],
"map_201912311524062632":[
{
"staffCode":"NJ51789168",
"index":9,
"orderNum":"19",
"avgTime":"1.74",
"staffName":"倪露"
},
{
"staffCode":"NJ72000095",
"index":10,
"orderNum":"32",
"avgTime":"1.59",
"staffName":"许茂"
}
],
"map_201912311524063302":[
{
"staffCode":"NJ90906337",
"index":11,
"orderNum":"32",
"avgTime":"0.92",
"staffName":"李赢"
}
]
},
"staffWgInfo":{
"NJ11032500":0,
"NJ36038678":0,
"NJ156677":0,
"NJ37709514":0,
"NJ51789168":0,
"NJ90906337":0,
"NJ37825052":0,
"9901500010":0,
"NJ72000095":0,
"9901660106":0,
"NJ11032099":0
},
"channelAvgTime":"1.28"
},
"channelDeviceInfo":{
"channelCustNum":163,
"finalDeviceScore":"0.63",
"channelOrderNum":230,
"deviceInfo":{
"map_201912311524068762":[
{
"cpuUsageAvg":0.23,
"down":"15.9Mbps",
"healthGrade":1,
"memUsageAvg":0.77,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":84,
"up":"63.2Mbps"
},
{
"cpuUsageAvg":0.24,
"down":"11.3Mbps",
"healthGrade":1,
"memUsageAvg":0.72,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":80,
"up":"67.3Mbps"
}
],
"map_201912311524066142":[
{
"cpuUsageAvg":0.09,
"down":"9.7Mbps",
"healthGrade":2,
"memUsageAvg":0.47,
"memory":"3.2GB",
"osName":"Microsoft Windows XP Professional",
"score":78,
"up":"61.1Mbps"
},
{
"cpuUsageAvg":0.11,
"down":"61.0Mbps",
"healthGrade":1,
"memUsageAvg":0.48,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":88,
"up":"90.3Mbps"
}
],
"map_201912311524069469":[
{
"cpuUsageAvg":0.22,
"down":"7.6Mbps",
"healthGrade":2,
"memUsageAvg":0.49,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":71,
"up":"12.4Mbps"
},
{
"cpuUsageAvg":0.23,
"down":"13.5Mbps",
"healthGrade":1,
"memUsageAvg":0.59,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":82,
"up":"61.0Mbps"
}
],
"map_201912311524062159":[
{
"cpuUsageAvg":0.48,
"down":"11.7Mbps",
"healthGrade":1,
"memUsageAvg":0.69,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":81,
"up":"65.0Mbps"
},
{
"cpuUsageAvg":0.27,
"down":"13.0Mbps",
"healthGrade":1,
"memUsageAvg":0.39,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":82,
"up":"72.1Mbps"
}
],
"map_201912311524068866":[
{
"cpuUsageAvg":0.3,
"down":"14.7Mbps",
"healthGrade":1,
"memUsageAvg":0.56,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":83,
"up":"63.7Mbps"
},
{
"cpuUsageAvg":0.16,
"down":"9.4Mbps",
"healthGrade":2,
"memUsageAvg":0.52,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":79,
"up":"54.5Mbps"
}
],
"map_201912311524069532":[
{
"cpuUsageAvg":0.24,
"down":"0Mbps",
"healthGrade":2,
"memUsageAvg":0.44,
"memory":"3.9GB",
"osName":"Microsoft Windows 7 旗舰版",
"score":20,
"up":"0Mbps"
}
]
},
"greenGrade":7,
"grayGrade":0,
"redGrade":4
},
"channelHandleInfo":{
"orderNumData":[
"251",
"189",
"212",
"222",
"207",
"150",
"181",
"202",
"183",
"193",
"0",
"0",
"0",
"0",
"0",
"198",
"202",
"205",
"242",
"216",
"176",
"126",
"254",
"207",
"211",
"191",
"224",
"213",
"297",
"0"
],
"lineUpData":[
"2.00",
"1.50",
"2.98",
"2.01",
"1.39",
"2.09",
"5.99",
"3.02",
"2.51",
"4.61",
"2.44",
"1.51",
"3.88",
"7.67",
"0.25",
"5.70",
"1.76",
"3.78",
"4.10",
"6.02",
"3.93",
"1.93",
"5.10",
"3.89",
"2.78",
"5.30",
"6.67",
"5.65",
"12.59",
"0"
],
"custNumData":[
"228",
"176",
"206",
"203",
"186",
"137",
"162",
"177",
"164",
"169",
"0",
"0",
"0",
"0",
"0",
"175",
"185",
"179",
"224",
"191",
"161",
"115",
"229",
"190",
"172",
"164",
"201",
"192",
"273",
"0"
],
"dataDateArr":[
"12月\n01号",
"12月\n02号",
"12月\n03号",
"12月\n04号",
"12月\n05号",
"12月\n06号",
"12月\n07号",
"12月\n08号",
"12月\n09号",
"12月\n10号",
"12月\n11号",
"12月\n12号",
"12月\n13号",
"12月\n14号",
"12月\n15号",
"12月\n16号",
"12月\n17号",
"12月\n18号",
"12月\n19号",
"12月\n20号",
"12月\n21号",
"12月\n22号",
"12月\n23号",
"12月\n24号",
"12月\n25号",
"12月\n26号",
"12月\n27号",
"12月\n28号",
"12月\n29号",
"12月\n30号"
],
"handleTimeData":[
"7.35",
"7.31",
"7.75",
"7.45",
"7.01",
"6.46",
"8.01",
"6.18",
"5.23",
"7.08",
"0.00",
"0.00",
"0.00",
"0.00",
"0.00",
"7.29",
"6.61",
"6.79",
"6.54",
"6.87",
"6.45",
"6.10",
"6.93",
"6.85",
"5.87",
"8.98",
"6.26",
"6.95",
"7.36",
"0.00"
]
}
}

View File

@ -0,0 +1,889 @@
//全局客户类型(1:公众;2:政企)
var g_custType="1";
//数据日期
var g_dataDate="20191231"
//全局渠道信息
var g_channelInfo={};
var g_channelCode="";
var g_channelName="";
//门店基本信息
function loadChannelBaseInfo(data){
//获取渠道积分数据
var staffHandleInfo=data.staffHandleInfo;
//获取渠道总积分
var channelJfMap=staffHandleInfo.channelJfMap || {};
//获取渠道总积分
var channelSum=channelJfMap.channelSum || 0;
//获取渠道排名
var channelOrder=channelJfMap.channelOrder || 1;
var channelTotal=channelJfMap.channelTotal || 1
var popval=String(parseFloat(channelOrder/channelTotal));
//获取台席健康度得分
var channelDeviceInfo=data.channelDeviceInfo;
var finalDeviceScore=channelDeviceInfo.finalDeviceScore || 0;
if(finalDeviceScore<=0){
$("#base-info .device-score").find("img").attr("src","../static/images/star3.png");
}else if(finalDeviceScore<0.95){
$("#base-info .device-score").find("img").attr("src","../static/images/star2.png");
}else{
$("#base-info .device-score").find("img").attr("src","../static/images/star1.png");
}
$("#base-info .device-score").find(".score-val").text(finalDeviceScore+"分");
//设置渠道当日客流量、订单量
$("#base-info").find("div[type='dingdanVal']").text(channelDeviceInfo.channelOrderNum || "--");
$("#base-info").find("div[type='custNumVal']").text(channelDeviceInfo.channelCustNum || "--");
//设置门店基本信息-违规行为
var channelStartWeiGui=staffHandleInfo.channelStartWeiGui || 0;
if(channelStartWeiGui==1){
$("#base-info .weigui").find("img").attr("src","../static/images/star1.png");
}else{
$("#base-info .weigui").find("img").attr("src","../static/images/star3.png");
}
$("#base-info .weigui").find(".score-val").text(channelStartWeiGui+"分");
//设置门店基本信息-营销评级
var yingxiaoval=1-popval;
yingxiaoval=keepTwoDecimal(yingxiaoval);
if(yingxiaoval<=0){
$("#base-info .yingxiao").find("img").attr("src","../static/images/star3.png");
}else if(yingxiaoval<0.95){
$("#base-info .yingxiao").find("img").attr("src","../static/images/star2.png");
}else{
$("#base-info .yingxiao").find("img").attr("src","../static/images/star1.png");
}
$("#base-info .yingxiao").find(".score-val").text(yingxiaoval+"分");
//设置门店基本信息-受理速度
var avgTimeScore=0;
var timeStepAnalysis=data.timeStepAnalysis;
if(timeStepAnalysis.channelTime.length>0){
avgTimeScore=timeStepAnalysis.channelTime[4]/timeStepAnalysis.provinceTime[4];
if(avgTimeScore>1){
avgTimeScore=avgTimeScore*0.335;
}
}
avgTimeScore=keepTwoDecimal(avgTimeScore*0.5+0.5);
avgTimeScore=avgTimeScore>1?1:avgTimeScore;
if(avgTimeScore<=0){
$("#base-info .avgtime").find("img").attr("src","../static/images/star3.png");
}else if(avgTimeScore<0.95){
$("#base-info .avgtime").find("img").attr("src","../static/images/star2.png");
}else{
$("#base-info .avgtime").find("img").attr("src","../static/images/star1.png");
}
$("#base-info .avgtime").find(".score-val").text(avgTimeScore+"分");
//设置门店基本信息-业务量
var yewuliangVal=0;
var channelHandleInfo=data.channelHandleInfo;
var orderNumData=channelHandleInfo.orderNumData;
if(orderNumData.length>2){
var t1=orderNumData[orderNumData.length-1];
var t2=orderNumData[orderNumData.length-2];
if(t1!=0 && t2!=0){
yewuliangVal=t1>t2?t2/t1:t1/t2;
}else{
yewuliangVal=0.45;
}
if(yewuliangVal>1){
yewuliangVal=yewuliangVal*0.335;
}
}
yewuliangVal=keepTwoDecimal(yewuliangVal*0.5+0.5);
yewuliangVal=yewuliangVal>1?1:yewuliangVal;
if(yewuliangVal<=0){
$("#base-info .yewuliang").find("img").attr("src","../static/images/star3.png");
}else if(yewuliangVal<0.95){
$("#base-info .yewuliang").find("img").attr("src","../static/images/star2.png");
}else{
$("#base-info .yewuliang").find("img").attr("src","../static/images/star1.png");
}
$("#base-info .yewuliang").find(".score-val").text(yewuliangVal+"分");
//设置门店基本信息-排队机耗时
var channelHandleInfo=data.channelHandleInfo;
var callTime=channelHandleInfo.lineUpData[channelHandleInfo.lineUpData.length-1];
$("#base-info").find("div[type='lineUpVal']").text(callTime|| "无");
//开始计算门店星级
var channelTotalScore=parseFloat(finalDeviceScore)+parseFloat(channelStartWeiGui)+parseFloat(yingxiaoval)+parseFloat(avgTimeScore)+parseFloat(yewuliangVal);
channelTotalScore=String(channelTotalScore);
channelTotalScore=keepTwoDecimal(channelTotalScore);
$("#base-info").find(".channel-total-score").text(channelTotalScore+"分" || "--分");
$("#base-info").find(".chanenl-star").empty();
var starLen=Math.floor(channelTotalScore);
for(var idx=0;idx<starLen;idx++){
var img='<img src="../static/images/star1.png"/>';
$("#base-info").find(".chanenl-star").append(img);
}
$("#base-info").find(".chanenl-star").append('<div>'+channelTotalScore+'分</div>');
if(starLen<channelTotalScore){
var img='<img src="../static/images/star2.png" style="width:21px;height:20px;"/>';
$("#base-info").find("#chanenl-star").append(img);
}
var unit="";
if(channelSum>90000){
unit="万";
channelSum=keepTwoDecimal(channelSum/10000);
}
var maxval=channelSum-channelSum*(1-popval),currval=channelSum;
//特殊处理,优化饼图数据美观
if(0==channelSum ){
maxval=1000;
}
var option = {
series: [{
type: 'pie',radius: ['65%', '80%'],color: '#E63F19',label: {normal: {position: 'center'}},
data: [{
value: currval,//当前值
name: '积分',
label: {normal: {formatter: currval + unit,textStyle: {fontSize: 16,color: '#FED546'}}}
},{
value: maxval,//比对值
name: '积分',
label: {normal: {formatter: function (params) {return '\n积分' },textStyle: {color: '#fff',fontSize: 13}}},
itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},
}]
}]
};
var myChart= echarts.init(document.getElementById('integral_echart'));
myChart.clear();
myChart.setOption(option);
$("#base-info").find(".channel-name").text(g_channelName || "XXXX");
var popval2=keepTwoDecimal(popval);
$("#base-info").find(".popval").text("全省前"+(popval2*100)+"%" || "全省前0%");
var rePortData={};
//厅办理业务平均耗时
rePortData.channelAvgTime=staffHandleInfo.channelAvgTime;
//厅排队机
rePortData.lineUpData=channelHandleInfo.lineUpData
//渠道积分排名占比
rePortData.popval=popval;
rePortData.custNumData=channelHandleInfo.custNumData;
channelReportContent(rePortData);
}
//渠道报告内容建议说明
function channelReportContent(rePortData){
var reportContent="很抱歉,目前暂无可分析的数据";
if(undefined!=rePortData.channelAvgTime && ""!=rePortData.channelAvgTime){
if(rePortData.channelAvgTime>20){
if(rePortData.popval<=0.3){
reportContent="业绩很棒,受理偏慢,请适当加快受理";
}else{
reportContent="受理速度偏慢,影响客户感知,请加强受理技能培训";
}
}else{
//判断厅是否有排队机
if(rePortData.lineUpData.length>0){
var callTime=rePortData.lineUpData[rePortData.lineUpData.length-1];
var t1=rePortData.channelAvgTime-callTime;
if(t1>=3){
if(rePortData.popval<=0.3){
reportContent="门店运营良好,可适当提升受理速度";
}else{
reportContent="门店运营良好,建议加强营销";
}
}else if(callTime>rePortData.channelAvgTime){
reportContent="门店台席规划不合理,存在客户积压,请按业务类型分流";
}else if(0<=t1 && t1<3){
if(rePortData.popval<=0.3){
reportContent="门店运营状态良好,台席规划合理,请继续保持";
}else{
reportContent="台席规划合理,建议适当加强营销";
}
}
}else{
var custNum=rePortData.custNumData[rePortData.custNumData.length-1] || 0;
if(custNum<=50){
if(rePortData.popval<=0.3){
reportContent="营业效能规划合理,厅内客流量仍有上升空间";
}else{
reportContent="客流较小,请加强营销手段";
}
}else{
if(rePortData.popval<=0.3){
reportContent="厅店客流量大,营业效能规划合理,请继续保持";
}else{
reportContent="厅店客流量大,请把握机会加强营销";
}
}
}
}
}
$(".analysis-info").text(reportContent);
}
//门店受理详情
function loadChannelHandleDetail(data){
var option = {
tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#fff'}}},
legend: {
icon: 'rect',
itemWidth: 14,itemHeight: 5,itemGap:10,
data: ['受理时长', '排队时长', '订单量','客流量'],
right: '10px',top: '0px',
textStyle: {fontSize: 12,color: '#fff'}
},
grid: {x:40,y:50,x2:45,y2:40},
xAxis: [{
type: 'category',boundaryGap: false,axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {textStyle: {color:'#fff'}},
data: data.dataDateArr
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {lineStyle: {color: '#57617B'}},
axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'},
splitLine: {lineStyle: {color: '#57617B'}}
},{
type: 'value',
axisTick: {
show: false
},
axisLine: {lineStyle: {color: '#57617B'}},
axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}个'},
splitLine: {show: false,lineStyle: {color: '#57617B'}}
}],
series: [{
name: '受理时长',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
yAxisIndex:0,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(185,150,248,0.3)'
}, {
offset: 0.8,
color: 'rgba(185,150,248,0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {normal: { color: '#B996F8'}},
data: data.handleTimeData
}, {
name: '排队时长',type: 'line',smooth: true,lineStyle: { normal: {width: 2}},
yAxisIndex:0,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {normal: {color: '#03C2EC'}},
data: data.lineUpData
}, {
name: '订单量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
yAxisIndex:1,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(218, 57, 20, 0.3)'
}, {
offset: 0.8,
color: 'rgba(218, 57, 20, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {normal: {color: '#DA3914'}},
data: data.orderNumData
},{
name: '客流量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
yAxisIndex:1,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(232, 190, 49, 0.3)'
}, {
offset: 0.8,
color: 'rgba(232, 190, 49, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {normal: {color: '#E8BE31'}},
data:data.custNumData
}]
};
var myChart = echarts.init(document.getElementById('channel_handle_detail'));
myChart.clear();
if(data.handleTimeData.length>0){
myChart.setOption(option);
}else{
noDataTip($("#channel_handle_detail"));
}
}
//加载营业员受理详情
function loadStaffHandleDetail(data){
//获取员工违规信息
var staffWgInfo=data.staffWgInfo;
//获取员工积分信息
var channelJfMap=data.channelJfMap;
var channelStaffLen=data.channelStaffLen;
var staffHandleInfo=data.staffHandleInfo || [],staffHandleInfoLen=staffHandleInfo.length;
var html=[],index=0;
for(var key in staffHandleInfo){
var itemArr=staffHandleInfo[key];
index++;
var indexClass=(1==index)?"first":"";
var wgCount=staffWgInfo[itemArr[0].staffCode] || "0";
var tr1=[
'<tr class="td-avg-time">',
'<td colspan="3">',
'<div class="index '+indexClass+'">'+itemArr[0].index+'</div>',
'<div class="staff-name">'+itemArr[0].staffName+'</div>',
'<div class="avg-time-label">|&nbsp;&nbsp;厅排名</div>',
'<div class="avg-time-value">'+itemArr[0].index+'/'+channelStaffLen+'</div>',
'</td>',
'</tr>',
'<tr>',
'<td> ',
'<div class="staff-cust-time">',
'<span style="font-size:15px;">订单耗时</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[0].avgTime+'分</span>',
'</div>',
'</td>',
'<td>',
'<div class="staff-order-count">',
'<span style="font-size:15px;">订单量</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[0].orderNum+'笔</span>',
'</div>',
'</td>',
'<td>',
'<div class="staff-alarm">',
'<span style="font-size:15px;">违规告警</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+wgCount+'次</span>',
'</div>',
'</td>',
'</tr> ',
'<tr class="td-integral"> ',
'<td colspan="3"> ',
'<div class="integral-label">个人积分:</div> ',
'<div class="integral-value">'+(channelJfMap[itemArr[0].staffCode+'_charge'] || 0)+'分</div> ',
'<div class="integral-label" style="width:60px;">|厅排名</div>',
'<div class="integral-value" style="width:100px;">'+(channelJfMap[itemArr[0].staffCode+"_index"] || 0)+'/'+(channelJfMap["channelLength"] || 0)+'</div>',
'</td> ',
'</tr> ',
];
var tr2=[];
if(itemArr.length>1){
index++;
var indexClass=(2==index)?"second":"";
var wgCount=staffWgInfo[itemArr[1].staffCode] || "0";
tr2=[
'<tr><td colspan="3"><div class="split-line"></div></td></tr>',
'<tr class="td-avg-time"> ',
'<td colspan="3"> ',
'<div class="index '+indexClass+'">'+itemArr[1].index+'</div>',
'<div class="staff-name">'+itemArr[1].staffName+'</div>',
'<div class="avg-time-label">|&nbsp;&nbsp;厅排名</div>',
'<div class="avg-time-value">'+itemArr[1].index+'|'+channelStaffLen+'</div>',
'</td>',
'</tr>',
'<tr>',
'<td> ',
'<div class="staff-cust-time">',
'<span style="font-size:15px;">订单耗时</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[1].avgTime+'分</span>',
'</div>',
'</td>',
'<td>',
'<div class="staff-order-count">',
'<span style="font-size:15px;">订单量</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[1].orderNum+'笔</span>',
'</div>',
'</td>',
'<td>',
'<div class="staff-alarm">',
'<span style="font-size:15px;">违规告警</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+wgCount+'次</span>',
'</div>',
'</td>',
'</tr> ',
'<tr class="td-integral"> ',
'<td colspan="3"> ',
'<div class="integral-label">个人积分:</div> ',
'<div class="integral-value">'+(channelJfMap[itemArr[1].staffCode+'_charge'] || 0)+'分</div> ',
'<div class="integral-label" style="width:60px;">|厅排名</div>',
'<div class="integral-value" style="width:100px;">'+(channelJfMap[itemArr[1].staffCode+"_index"] || 0)+'/'+(channelJfMap["channelLength"] || 0)+'</div>',
'</td> ',
'</tr> ',
]
}
var staffHtml=[
'<div class="swiper-slide">',
'<table>',
tr1.join(""),
tr2.join(""),
'</table>',
'</div> '
];
html.push(staffHtml.join(""));
}
$("#staff-info").html("");
if(html.length>0){
var dataHtml="<div class='swiper-container visual_swiper_staffInfo'><div class='swiper-wrapper'>"+html.join("")+"</div>"
$("#staff-info").html(dataHtml);
var mySwiper1 = new Swiper('.visual_swiper_staffInfo', {
autoplay: true,//可选选项,自动滑动
speed:1500,//可选选项,滑动速度
autoplay: {
delay: 15000,//毫秒
}
});
}else{
noDataTip($("#staff-info"));
}
}
//加载门店台席健康度详情
function loadChannelDeviceDetail(data){
var html=[];
//设置台席灯
$(".device-alarm").eq(2).find("span[type='greenGrade']").text(data.greenGrade || "0");
$(".device-alarm").eq(1).find("span[type='redGrade']").text(data.redGrade || "0");
$(".device-alarm").eq(0).find("span[type='grayGrade']").text(data.grayGrade || "0");
var deviceInfo=data.deviceInfo;
for(var key in deviceInfo){
var itemArr=deviceInfo[key];
itemArr[0].up=itemArr[0].up || "--";
itemArr[0].down=itemArr[0].down || "--";
var gradeImg="";
if(1==itemArr[0].healthGrade){
gradeImg="device-green.png";
}else if(2==itemArr[0].healthGrade){
gradeImg="device-red.png";
}else{
gradeImg="device-gray.png";
}
var tr1=[
'<tr> ',
'<td rowspan="3" class="device-img">',
'<img src="../static/images/'+gradeImg+'"/>',
'</td> ',
'<td><div class="label-name">台席分数</div></td> ',
'<td rowspan="3" colspan="2" class="kuan-dai"> ',
'<div class="progress-label">上行宽度速率 '+itemArr[0].up+'</div>',
'<div style="width:180px;height:15px;"> ',
'<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
'<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[0].up.replace("Mbps","")+'%"></div>',
'</div>',
'</div> ',
'<div class="progress-label">下行宽度速率 '+itemArr[0].down+'</div>',
'<div style="width:180px;height:15px;">',
'<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
'<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[0].down.replace("Mbps","")+'%"></div>',
'</div>',
'</div>',
'</td>',
'</tr>',
'<tr>',
'<td class="label-name score">'+itemArr[0].score+'分</td>',
'</tr>',
'<tr>',
'<td class="label-name"><div class="os-name" title="'+(itemArr[0].osName || "--")+'">'+(itemArr[0].osName || "--")+'</div></td>',
'</tr>',
'<tr class="device-use">',
'<td></td>',
'<td><div class="nei-cun-size"><span>'+(itemArr[0].memory || 0)+'</span></div></td>',
'<td><div class="cpu-use"><span>'+itemArr[0].cpuUsageAvg+'</span></div></td>',
'<td><div class="nei-cun-use"><span>'+itemArr[0].memUsageAvg+'</span></div></td>',
'</tr>',
'<tr>',
'<td></td>',
'<td><div class="labe-value">内存大小</div></td>',
'<td><div class="labe-value">cpu占用率</div></td>',
'<td><div class="labe-value">内存使用率</div></td>',
'</tr>'
];
var tr2=[];
if(itemArr.length>1){
itemArr[1].up=itemArr[1].up || "--";
itemArr[1].down=itemArr[1].down || "--";
var gradeImg="";
if(1==itemArr[1].healthGrade){
gradeImg="device-green.png";
}else if(2==itemArr[1].healthGrade){
gradeImg="device-red.png";
}else{
gradeImg="device-gray.png";
}
tr2=[
'<tr><td colspan="4"><div class="split-line"></div></td></tr>',
'<tr> ',
'<td rowspan="3" class="device-img">',
'<img src="../static/images/'+gradeImg+'"/>',
'</td> ',
'<td><div class="label-name">台席分数</div></td> ',
'<td rowspan="3" colspan="2" class="kuan-dai"> ',
'<div class="progress-label">上行宽度速率 '+itemArr[1].up+'</div>',
'<div style="width:180px;height:15px;"> ',
'<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
'<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[1].up.replace("Mbps","")+'%"></div>',
'</div>',
'</div> ',
'<div class="progress-label">下行宽度速率 '+itemArr[1].down+'</div>',
'<div style="width:180px;height:15px;">',
'<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
'<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[1].down.replace("Mbps","")+'%"></div>',
'</div>',
'</div>',
'</td>',
'</tr>',
'<tr>',
'<td class="label-name score">'+itemArr[1].score+'分</td>',
'</tr>',
'<tr>',
'<td class="label-name"><div class="os-name" title="'+(itemArr[0].osName || "--")+'">'+(itemArr[0].osName || "--")+'</div></td>',
'</tr>',
'<tr class="device-use">',
'<td></td>',
'<td><div class="nei-cun-size"><span>'+(itemArr[1].memory || 0)+'</span></div></td>',
'<td><div class="cpu-use"><span>'+itemArr[1].cpuUsageAvg+'</span></div></td>',
'<td><div class="nei-cun-use"><span>'+itemArr[1].memUsageAvg+'</span></div></td>',
'</tr>',
'<tr>',
'<td></td>',
'<td><div class="labe-value">内存大小</div></td>',
'<td><div class="labe-value">cpu占用率</div></td>',
'<td><div class="labe-value">内存使用率</div></td>',
'</tr>'
]
}
var deviceHtml=[
'<div class="swiper-slide">',
'<table>',
tr1.join(""),
tr2.join(""),
'</table>',
'</div> '
];
html.push(deviceHtml.join(""));
}
$("#device-info").html("");
if(html.length>0){
var dataHtml="<div class='swiper-container visual_swiper_deviceInfo'><div class='swiper-wrapper'>"+html.join("")+"</div>"
$("#device-info").html(dataHtml);
var mySwiper1 = new Swiper('.visual_swiper_deviceInfo', {
autoplay: true,//可选选项,自动滑动
speed:1500,//可选选项,滑动速度
autoplay: {
delay: 15000,//毫秒
}
});
}else{
noDataTip($("#device-info"));
}
}
//加载耗时步骤详情
function loadTimeStepDetail(data){
var option = {
tooltip: {trigger: 'axis',},
grid: {left:'6%',right: '5%',bottom:'10%'},
legend: {
icon: 'rect',
itemWidth: 14,itemHeight: 5,itemGap:10,
data:data.legendArr,
left: '10px',top: '0px',
textStyle: {fontSize: 12,color: '#fff'}
},
xAxis: [
{
type: 'category',
axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {interval:0,textStyle: {color:'#fff',}},
data:data.categoryArr
}
],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {lineStyle: {color: '#57617B'}},
axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}秒'},
splitLine: {
show: true,
lineStyle:{
type:'dashed',
color: ['#25CEF3']
}
}
}],
series: [
{
name:'厅耗时',
type:'bar',
barWidth:8,
itemStyle : {
normal: {
barBorderRadius:[10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#009AFD"
}, {
offset: 0.8,
color: "#33DAFF"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
data:data.channelTime
},
{
name:'省耗时',
type:'bar',
barWidth:8,
barGap:2,
itemStyle : {
normal: {
barBorderRadius:[10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#E57230"
}, {
offset: 0.8,
color: "#D8AE22"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
data:data.provinceTime
}
]
};
var myChart = echarts.init(document.getElementById('time-step-detial'));
myChart.clear();
if(data.channelTime.length>0){
myChart.setOption(option);
}else{
noDataTip($("#time-step-detial"));
}
}
//加载业务类型耗时详情
function loadBusinessTypeTimeDetail(data){
var maxOrder=Math.max.apply(null,data.orderNum);
var option = {
title : {text:'',subtext:'',top:'3',right:'0'},
tooltip: {trigger: 'axis'},
grid: {left: '8%',right: '8%',bottom: '10%'},
xAxis: {type: 'category',axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {interval:0,textStyle: {color:'#fff',}},data: data.categoryArr},
yAxis:[
{
type: 'value',name: '',
axisLine: {lineStyle: {color: '#57617B'}},
axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'},
splitLine: {show: false}
},
{
type: 'value',name: '',max:maxOrder+parseInt(maxOrder*0.2),
axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}笔'},
splitLine: {
show: true,
lineStyle:{
type:'dashed',
color: ['#25CEF3']
}
}
}
],
series: [
{
name:'耗时时间',
type:'line',
yAxisIndex:0,
smooth: false,
symbolSize:5,
lineStyle: { normal: {width: 2}},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(230, 48, 123, 0.8)'
}, {
offset: 0.8,
color: 'rgba(230, 48, 123, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {normal: { color: '#DA2F78'}},
data:data.avgTime
},
{
name:'订单量',
type:'bar',
barWidth:12,
yAxisIndex:1,
itemStyle : {
normal: {
barBorderRadius:[10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#4033F9"
}, {
offset: 0.8,
color: "#BA97F9"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
data:data.orderNum
}
]
};
var myChart = echarts.init(document.getElementById('business-type-time-detial'));
myChart.clear();
if(data.orderNum.length>0){
myChart.setOption(option);
}else{
noDataTip($("#business-type-time-detial"));
}
}
//初始化基础信息
function initBaseInfo(){
//初始化日期
/*$("#data-date").my97({
dateFmt:'yyyyMMdd',
minDate:"%y-{%M}-{%d-30}",
maxDate:"%y-%M-{%d}",
startDate: [{
doubleCalendar: false,
isShowWeek: false,
isShowClear: false,
readOnly: true
}],
onpicked:function(dp){
g_dataDate=$('#data-date').val();
$("#query-page-data").trigger("click");
}
});*/
var dataDate="2019年12月31日";
$("#td-data-date").text(dataDate);
$(".cust-type-default").on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
g_custType=$(this).attr("type");
$("#query-page-data").trigger("click");
});
}
//获取渠道参数
function getGroupChannelParam(){
var areaCode="";
try{
var cityId=$('#selectCity').combobox("getValue");
var countyId=$('#selectCounty').combobox("getValue");
if(""==areaCode && ""!=countyId){
areaCode=countyId;
}else if(""==areaCode && ""!=cityId){
areaCode=cityId;
}
}catch(e){
}
var channelName=$.trim($("#channel_name").val());
var channelParam={'areaCode':areaCode,"channelName":channelName};
return channelParam;
}
function noDataTip($selector){
var currModH=$selector.height();
var top=currModH>180?"35%":"13%";
var $li=[
"<div class='no-data' style='width:90%;position: absolute;top:"+top+";text-align:center;color:#a59999;'>",
"<img src='../static/images/no-data.png' style='width:200px;height:200px;'/>",
"<div style='font-size:16px;opacity:0.7;color:#fff;'>暂无数据</div>",
"</div>"
]
$selector.append($li.join(""));
}
function keepTwoDecimal(currVal){
var result = parseFloat(currVal);
if (isNaN(result)) {
return false;
}
result = Math.round(currVal *100) / 100;
return result;
}
//初始化页面
function loadPageData(){
//获取渠道信息
var groupChannelInfo=g_channelInfo;
//第一步优先判断url请求参数里面
let param=JSON.parse(gDataGather.param);
if(Object.keys(param).length>0){
groupChannelInfo=param;
gDataGather.param="{}";
}
if(Object.keys(groupChannelInfo).length==0){
groupChannelInfo=window.localStorage.getItem("group-channel-info");
if(undefined==groupChannelInfo || null==groupChannelInfo){
groupChannelInfo={"channelCode":"11228790","groupChannelCode":"3201001965930","channelName":"中国电信南京分公司@玄武大钟亭营业厅"};
}else{
groupChannelInfo=JSON.parse(groupChannelInfo);
}
}else{
window.localStorage.setItem("group-channel-info",JSON.stringify(groupChannelInfo));
}
//设置全局渠道编码、渠道名称
g_channelCode=groupChannelInfo.channelCode;
g_channelName=groupChannelInfo.channelName;
//开始动画特效
$('#load').show();
$('#load').fadeOut(500,function(){
});
//引入office_efficiency_data.js缓存假数据
if(data.code==0){
$(".no-data").remove();
//加载门店基本信息
loadChannelBaseInfo(data);
//加载门店历史受理详情
loadChannelHandleDetail(data.channelHandleInfo);
//加载营业员受理详情
loadStaffHandleDetail(data.staffHandleInfo);
//加载门店台席健康度详情
loadChannelDeviceDetail(data.channelDeviceInfo);
//加载耗时步骤分析
loadTimeStepDetail(data.timeStepAnalysis);
//加载业务类型耗时详情
loadBusinessTypeTimeDetail(data.businessTypeAnalysis);
}
}
$(function(){
//加载基础信息
initBaseInfo();
//加载页面数据
loadPageData();
})

View File

@ -0,0 +1,224 @@
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
(function(w) {
"use strict";
w.matchMedia = w.matchMedia || function(doc, undefined) {
var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");
div.id = "mq-test-1";
div.style.cssText = "position:absolute;top:-100em";
fakeBody.style.background = "none";
fakeBody.appendChild(div);
return function(q) {
div.innerHTML = '&shy;<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
docElem.insertBefore(fakeBody, refNode);
bool = div.offsetWidth === 42;
docElem.removeChild(fakeBody);
return {
matches: bool,
media: q
};
};
}(w.document);
})(this);
/*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */
(function(w) {
"use strict";
var respond = {};
w.respond = respond;
respond.update = function() {};
var requestQueue = [], xmlHttp = function() {
var xmlhttpmethod = false;
try {
xmlhttpmethod = new w.XMLHttpRequest();
} catch (e) {
xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
}
return function() {
return xmlhttpmethod;
};
}(), ajax = function(url, callback) {
var req = xmlHttp();
if (!req) {
return;
}
req.open("GET", url, true);
req.onreadystatechange = function() {
if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) {
return;
}
callback(req.responseText);
};
if (req.readyState === 4) {
return;
}
req.send(null);
};
respond.ajax = ajax;
respond.queue = requestQueue;
respond.regex = {
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
only: /(only\s+)?([a-zA-Z]+)\s?/,
minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,
maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/
};
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
if (respond.mediaQueriesSupported) {
return;
}
var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() {
var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false;
div.style.cssText = "position:absolute;font-size:1em;width:1em";
if (!body) {
body = fakeUsed = doc.createElement("body");
body.style.background = "none";
}
docElem.style.fontSize = "100%";
body.style.fontSize = "100%";
body.appendChild(div);
if (fakeUsed) {
docElem.insertBefore(body, docElem.firstChild);
}
ret = div.offsetWidth;
if (fakeUsed) {
docElem.removeChild(body);
} else {
body.removeChild(div);
}
docElem.style.fontSize = originalHTMLFontSize;
if (originalBodyFontSize) {
body.style.fontSize = originalBodyFontSize;
}
ret = eminpx = parseFloat(ret);
return ret;
}, applyMedia = function(fromResize) {
var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime();
if (fromResize && lastCall && now - lastCall < resizeThrottle) {
w.clearTimeout(resizeDefer);
resizeDefer = w.setTimeout(applyMedia, resizeThrottle);
return;
} else {
lastCall = now;
}
for (var i in mediastyles) {
if (mediastyles.hasOwnProperty(i)) {
var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em";
if (!!min) {
min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
}
if (!!max) {
max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
}
if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) {
if (!styleBlocks[thisstyle.media]) {
styleBlocks[thisstyle.media] = [];
}
styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
}
}
}
for (var j in appendedEls) {
if (appendedEls.hasOwnProperty(j)) {
if (appendedEls[j] && appendedEls[j].parentNode === head) {
head.removeChild(appendedEls[j]);
}
}
}
appendedEls.length = 0;
for (var k in styleBlocks) {
if (styleBlocks.hasOwnProperty(k)) {
var ss = doc.createElement("style"), css = styleBlocks[k].join("\n");
ss.type = "text/css";
ss.media = k;
head.insertBefore(ss, lastLink.nextSibling);
if (ss.styleSheet) {
ss.styleSheet.cssText = css;
} else {
ss.appendChild(doc.createTextNode(css));
}
appendedEls.push(ss);
}
}
}, translate = function(styles, href, media) {
var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;
href = href.substring(0, href.lastIndexOf("/"));
var repUrls = function(css) {
return css.replace(respond.regex.urls, "$1" + href + "$2$3");
}, useMedia = !ql && media;
if (href.length) {
href += "/";
}
if (useMedia) {
ql = 1;
}
for (var i = 0; i < ql; i++) {
var fullq, thisq, eachq, eql;
if (useMedia) {
fullq = media;
rules.push(repUrls(styles));
} else {
fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
rules.push(RegExp.$2 && repUrls(RegExp.$2));
}
eachq = fullq.split(",");
eql = eachq.length;
for (var j = 0; j < eql; j++) {
thisq = eachq[j];
mediastyles.push({
media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",
rules: rules.length - 1,
hasquery: thisq.indexOf("(") > -1,
minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
});
}
}
applyMedia();
}, makeRequests = function() {
if (requestQueue.length) {
var thisRequest = requestQueue.shift();
ajax(thisRequest.href, function(styles) {
translate(styles, thisRequest.href, thisRequest.media);
parsedSheets[thisRequest.href] = true;
w.setTimeout(function() {
makeRequests();
}, 0);
});
}
}, ripCSS = function() {
for (var i = 0; i < links.length; i++) {
var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
if (!!href && isCSS && !parsedSheets[href]) {
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
translate(sheet.styleSheet.rawCssText, href, media);
parsedSheets[href] = true;
} else {
if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) {
if (href.substring(0, 2) === "//") {
href = w.location.protocol + href;
}
requestQueue.push({
href: href,
media: media
});
}
}
}
}
makeRequests();
};
ripCSS();
respond.update = ripCSS;
respond.getEmValue = getEmValue;
function callMedia() {
applyMedia(true);
}
if (w.addEventListener) {
w.addEventListener("resize", callMedia, false);
} else if (w.attachEvent) {
w.attachEvent("onresize", callMedia);
}
})(this);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long