智慧运营-厅店效能大屏监控看板
193
智慧运营/厅店效能大屏监控看板/page/index.html
Normal 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>
|
150
智慧运营/厅店效能大屏监控看板/static/css/office_efficiency_index.css
Normal 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;}
|
||||
|
||||
|
121
智慧运营/厅店效能大屏监控看板/static/css/style.css
Normal 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;}
|
BIN
智慧运营/厅店效能大屏监控看板/static/images/arrow_down.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/arrow_up.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/champion.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/compare_analysis.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/cpu_use.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/device-gray.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/device-green.png
Normal file
After Width: | Height: | Size: 4.4 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/device-red.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/ding-dan.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/gloomy_face.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/ke-liu.png
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/nei_cun_size.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/nei_cun_use.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/no-data.png
Normal file
After Width: | Height: | Size: 105 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/office_efficiency_foot_bg.png
Normal file
After Width: | Height: | Size: 654 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/office_efficiency_header_bg.png
Normal file
After Width: | Height: | Size: 601 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/pai-dui-ji.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/runnerup.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/select_arrow.png
Normal file
After Width: | Height: | Size: 255 B |
BIN
智慧运营/厅店效能大屏监控看板/static/images/smiling_face.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/star1.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/star2.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
智慧运营/厅店效能大屏监控看板/static/images/star3.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
525
智慧运营/厅店效能大屏监控看板/static/js/office_efficiency_data.js
Normal 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"
|
||||
]
|
||||
}
|
||||
}
|
889
智慧运营/厅店效能大屏监控看板/static/js/office_efficiency_index.js
Normal 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">| 厅排名</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">| 厅排名</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();
|
||||
})
|
6361
智慧运营/厅店效能大屏监控看板/static/js/pluginsPackage/bootstrap-3.3.0/bootstrap.css
vendored
Normal file
2276
智慧运营/厅店效能大屏监控看板/static/js/pluginsPackage/bootstrap-3.3.0/bootstrap.js
vendored
Normal file
224
智慧运营/厅店效能大屏监控看板/static/js/pluginsPackage/bootstrap-3.3.0/respond.js
vendored
Normal 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 = '­<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);
|