|
|
@@ -1,10 +1,7 @@
|
|
|
<@override name="head">
|
|
|
<title>广告投放系统</title>
|
|
|
<!--Include Required css file-->
|
|
|
-<link rel="stylesheet" href="${ctx}/assets/css/public-head.css"/>
|
|
|
-<link rel="stylesheet" href="${ctx}/assets/css/dashboard.css"/>
|
|
|
<link rel="stylesheet" href="${ctx}/assets/css/daterangepicker.css"/>
|
|
|
-<link rel="stylesheet" href="${ctx}/assets/css/bootstrap.min.css"/>
|
|
|
|
|
|
<!--Include Required Prerequisites js-->
|
|
|
<script type="text/javascript" src="${ctx}/assets/js/lib/jquery-1.9.1.min.js"></script>
|
|
|
@@ -22,7 +19,7 @@
|
|
|
$(document).ready(function(){
|
|
|
//显示今天时间
|
|
|
var date = new Date();
|
|
|
- $("#content-left .up .today").text(formatDate(date));
|
|
|
+ $("#today").text(formatDate(date));
|
|
|
function formatDate(now) {
|
|
|
var year = now.getFullYear();
|
|
|
var month = now.getMonth()+1;
|
|
|
@@ -63,7 +60,7 @@ $(document).ready(function(){
|
|
|
*更改日期的函数，所有更改日期的事件都是调用此函数
|
|
|
*/
|
|
|
function cb(start, end) {
|
|
|
- $('#date-range input').val(start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));//将日期显示在input标签里面
|
|
|
+ $('#dateRangePicker').val(start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));//将日期显示在input标签里面
|
|
|
searchAndDraw(start, end);
|
|
|
}
|
|
|
/*
|
|
|
@@ -93,26 +90,12 @@ $(document).ready(function(){
|
|
|
* 仅仅设置语言为cn, 最大选择日期问今天
|
|
|
* 绑定一个确定按钮点击事件,回调函数,执行cb函数,更改日期,其实不用改,只不过是为了查询数据和绘制图表
|
|
|
*/
|
|
|
- $('#date-range-picker').dateRangePicker({
|
|
|
+ $('#dateRangePicker').dateRangePicker({
|
|
|
language:'cn',
|
|
|
- endDate:new Date(),
|
|
|
+ endDate:new Date()
|
|
|
}).bind('datepicker-apply', function(evt, obj) {
|
|
|
cb(moment(obj.date1), moment(obj.date2));
|
|
|
});
|
|
|
-
|
|
|
- /*
|
|
|
- *下拉框广告主改变,调用searchAndDraw重新查询数据绘制图形
|
|
|
- */
|
|
|
- $('#selectedAdvertiserId3').change(function() {
|
|
|
- var opt = '#selectedAdvertiserId3 option[value=' + $(this).val() + ']';
|
|
|
- var txt = '趋势图：' + $(opt).html();
|
|
|
- console.log(txt);
|
|
|
- $('#chartContent .chart-down .chart-down-left').html(txt);
|
|
|
- var chooseDate = $('#date-range-picker').val().split(' to ',2);
|
|
|
- var start = moment(chooseDate[0]);//转换为moment格式
|
|
|
- var end = moment(chooseDate[1]);//转换为moment格式
|
|
|
- searchAndDraw(start, end);
|
|
|
- });
|
|
|
|
|
|
/*
|
|
|
*发送ajax请求，查询数据
|
|
|
@@ -230,9 +213,9 @@ $(document).ready(function(){
|
|
|
/*
|
|
|
*快速设置为(今天 昨天 过去7天 过去30天)
|
|
|
*/
|
|
|
- $('#chartContent .chart-up .right span.time').click(function(e){ //今天 昨天 过去七天 过去三十天触发函数
|
|
|
+ $('#dashboard_chartContent .chart-up .right span.time').click(function(e){ //今天 昨天 过去七天 过去三十天触发函数
|
|
|
e.preventDefault;
|
|
|
- $('#chartContent .chart-up .right span').css('color','#344c67');
|
|
|
+ $('#dashboard_chartContent .chart-up .right span').css('color','#344c67');
|
|
|
$(this).css('color','#36aeea');
|
|
|
var ind = $(this).index();
|
|
|
switch (ind){
|
|
|
@@ -254,7 +237,7 @@ $(document).ready(function(){
|
|
|
/*
|
|
|
*四条折线(消费,曝光数,点击数,点击率),点击切换
|
|
|
*/
|
|
|
- $('#chartContent form input[type="radio"]').click(function(){
|
|
|
+ $('#dashboard_chartContent #right_radio input[type="radio"]').click(function(){
|
|
|
var n = $(this).val();
|
|
|
var data = flow[n];
|
|
|
consume = tipLabel[n];
|
|
|
@@ -263,7 +246,7 @@ $(document).ready(function(){
|
|
|
if(n == 1){ txt = '曝光数（次）'; }
|
|
|
if(n == 2){ txt = '点击数（次）'; }
|
|
|
if(n == 3){ txt = '点击率（%）'; }
|
|
|
- $('#chartContent .chart-down .chart-down-right').html(txt);
|
|
|
+ $('#dashboard_chartContent .chart-down .chart-down-right').html(txt);
|
|
|
drawDiagram(labels,data,consume);
|
|
|
});
|
|
|
|
|
|
@@ -310,15 +293,15 @@ $(document).ready(function(){
|
|
|
$("#diagramHead span:first-child").click(function(){
|
|
|
$("#sheetContent").css("display","none");
|
|
|
$("#diagramHead span:first-child").css("border-bottom","1px solid #ffffff");
|
|
|
- $("#chartContent").css("display","block");
|
|
|
+ $("#dashboard_chartContent").css("display","block");
|
|
|
$("#diagramHead span:last-child").css("border-bottom","1px solid #d5dee8");
|
|
|
});
|
|
|
$("#diagramHead span:last-child").click(function(){
|
|
|
- $("#chartContent").css("display","none");
|
|
|
+ $("#dashboard_chartContent").css("display","none");
|
|
|
$("#diagramHead span:first-child").css("border-bottom","1px solid #d5dee8");
|
|
|
$("#sheetContent").css("display","block");
|
|
|
$("#diagramHead span:last-child").css("border-bottom","1px solid #ffffff");
|
|
|
- var chooseDate = $('#date-range-picker').val().split(' to ',2);
|
|
|
+ var chooseDate = $('#dateRangePicker').val().split(' to ',2);
|
|
|
var start = chooseDate[0];//转换为moment格式
|
|
|
var end = chooseDate[1];//转换为moment格式
|
|
|
var advertiserId = $('#selectedAdvertiserId3').val();
|
|
|
@@ -334,46 +317,10 @@ $(document).ready(function(){
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- /*
|
|
|
- *根据广告主选择账户余额
|
|
|
- * 选择一个广告主,发送ajax请求,获取数据
|
|
|
- */
|
|
|
- $('#selectedAdvertiserId').change(function() {
|
|
|
- var agentId = $("#agentId").val(); //获取代理商id
|
|
|
- var advertiserId = $('#selectedAdvertiserId').val();
|
|
|
- var param = {};
|
|
|
- if(advertiserId == -1) {
|
|
|
- param = {
|
|
|
- 'agentId':agentId
|
|
|
- };
|
|
|
- } else {
|
|
|
- param = {
|
|
|
- 'advertiserId':advertiserId
|
|
|
- };
|
|
|
- }
|
|
|
- //发送ajax请求
|
|
|
- $.ajax({
|
|
|
- type : 'post', //请求方式，post
|
|
|
- data : param, //请求参数，param
|
|
|
- url : '/ssp_web/advertiser/main/dashboard/findCompareAjax', //请求url
|
|
|
- async : false, //是否设置为异步请求
|
|
|
- cache : false, //是否缓存
|
|
|
- dataType : 'json', //数据类型为json
|
|
|
- success : function(data){ //请求成功回调函数处理，参数为返回回来的json数组
|
|
|
- $('#accountBalance .data-down').text(data.balance);
|
|
|
- $('#exposure .data-down').text(data.totalImpression);
|
|
|
- $('#click .data-down').text(data.totalClick);
|
|
|
- },
|
|
|
- error : function (XMLHttpRequest, textStatus, errorThrown) { //url请求出错的回调函数
|
|
|
- console.info('error');
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
/*
|
|
|
*根据广告主id创建订单
|
|
|
*/
|
|
|
- $('#content-right button').click(function(){
|
|
|
+ $('#right button.btn1').click(function(){
|
|
|
var advertiserId = null;
|
|
|
//判断是广告主还是代理商
|
|
|
if(role == "advertiser"){
|
|
|
@@ -399,7 +346,10 @@ $(document).ready(function(){
|
|
|
|
|
|
//获取广告主的值
|
|
|
if($("#role").val() == "agent"){
|
|
|
- var _url = "${ctx}/widget/selector/provide/advertiser?parentId="+agentId; //请求地址
|
|
|
+ $("#advertiser_son_ul").hide();
|
|
|
+ $("#advertiser_son_ul2").hide();
|
|
|
+ $("#advertiser_son_ul3").hide();
|
|
|
+ var _url = "${ctx}/widget/selector/provide/advertiser?parentId="+$("#agentId").val(); //请求地址
|
|
|
getSelectData("advertiserul_span","advertiser_son_ul","advertiserul_box","全部广告主",_url);
|
|
|
getSelectData("advertiserul_span2","advertiser_son_ul2","advertiserul_box2","请选择广告主",_url);
|
|
|
getSelectData("advertiserul_span3","advertiser_son_ul3","advertiserul_box3","请选择广告主",_url);
|
|
|
@@ -456,15 +406,14 @@ $(document).ready(function(){
|
|
|
$("#selectedAdvertiserId3").val($(this).attr("value"));
|
|
|
$("#selectedAdvertiserName3").val($(this).html());
|
|
|
$('#advertiser_son_ul3').hide(); //ul隐藏
|
|
|
- $('#chartContent .chart-down .chart-down-left').html("趋势图："+$(this).html());
|
|
|
- var chooseDate = $('#date-range-picker').val().split(' to ',2);
|
|
|
+ $('#dashboard_chartContent .chart-down .chart-down-left').html("趋势图："+$(this).html());
|
|
|
+ var chooseDate = $('#dateRangePicker').val().split(' to ',2);
|
|
|
var start = moment(chooseDate[0]);//转换为moment格式
|
|
|
var end = moment(chooseDate[1]);//转换为moment格式
|
|
|
searchAndDraw(start, end);
|
|
|
});
|
|
|
|
|
|
function getSelectData(target_spanId,target_sonulId,target_boxId,defaultName,url){
|
|
|
- $("#"+target_spanId).hide();
|
|
|
$("#"+target_sonulId).append("<li value='-1' style='width:130px;'>"+defaultName+"</li>");
|
|
|
$.getJSON( url, function(data) {
|
|
|
var data_1 = data.advertiserList;
|
|
|
@@ -490,118 +439,118 @@ $(document).ready(function(){
|
|
|
|
|
|
<@override name="body">
|
|
|
<#include "public-head.ftl">
|
|
|
-<div id= "pagecontent">
|
|
|
- <div id="quickNav">
|
|
|
- <i class="icon-home"></i> <a href="${ctx}/advertiser/main/dashboard">首页</a>
|
|
|
- </div>
|
|
|
+<div id="pagecontent">
|
|
|
<div id="content">
|
|
|
- <div id="content-left">
|
|
|
- <div class="up">
|
|
|
- <span class="today"></span>
|
|
|
- <ul id="main_advertiserul">
|
|
|
- <li class="select_box" id="advertiserul_box">
|
|
|
- <span id="advertiserul_span">${selectedadvertiserName!}</span>
|
|
|
- <ul class="son_ul" id="advertiser_son_ul"></ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <input type="hidden" name="selectedAdvertiserId" id="selectedAdvertiserId" value="${advertiserId!}">
|
|
|
- <input type="hidden" name="selectedadvertiserName" id="selectedadvertiserName" value="${selectedadvertiserName!}">
|
|
|
- </div>
|
|
|
- <div class="down">
|
|
|
- <div id="exposure">
|
|
|
- <div class="data-up">
|
|
|
- <span>曝光数</span>
|
|
|
- <!-- <span>45%</span> -->
|
|
|
- <#if compareMap.impressionStatus == 'up'>
|
|
|
- <i class="icon-arrow-up"></i>
|
|
|
- <#else>
|
|
|
- <i class="icon-arrow-down"></i>
|
|
|
- </#if>
|
|
|
- </div>
|
|
|
- <div class="data-down">${compareMap.totalImpression!}</div>
|
|
|
+ <div id="navDiv">
|
|
|
+ <ul id="navDiv_ul">
|
|
|
+ <li><i class="icon-home"></i>首页</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div id="dashboard_top_advertiser">
|
|
|
+ <div id="left">
|
|
|
+ <div class="up">
|
|
|
+ <span id="today"></span>
|
|
|
+ <ul id="main_advertiserul">
|
|
|
+ <li class="select_box" id="advertiserul_box">
|
|
|
+ <span id="advertiserul_span">${selectedadvertiserName!}</span>
|
|
|
+ <ul class="son_ul" id="advertiser_son_ul"></ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" name="selectedAdvertiserId" id="selectedAdvertiserId" value="${advertiserId!}">
|
|
|
+ <input type="hidden" name="selectedadvertiserName" id="selectedadvertiserName" value="${selectedadvertiserName!}">
|
|
|
</div>
|
|
|
- <div id="click">
|
|
|
- <div class="data-up">
|
|
|
- <span>点击数</span>
|
|
|
- <!-- <span>33%</span> -->
|
|
|
- <#if compareMap.clickStatus == 'up'>
|
|
|
- <i class="icon-arrow-up"></i>
|
|
|
- <#else>
|
|
|
- <i class="icon-arrow-down"></i>
|
|
|
- </#if>
|
|
|
+ <div class="down">
|
|
|
+ <div id="exposure" class="dataFrame">
|
|
|
+ <div class="dataFrame_name">
|
|
|
+ <span>曝光数</span>
|
|
|
+ <#if compareMap.impressionStatus == 'up'>
|
|
|
+ <i class="icon-arrow-up"></i>
|
|
|
+ <#else>
|
|
|
+ <i class="icon-arrow-down"></i>
|
|
|
+ </#if>
|
|
|
+ </div>
|
|
|
+ <div class="dataFrame_data">${compareMap.totalImpression!}</div>
|
|
|
+ </div>
|
|
|
+ <div id="click" class="dataFrame">
|
|
|
+ <div class="dataFrame_name">
|
|
|
+ <span>点击数</span>
|
|
|
+ <#if compareMap.impressionStatus == 'up'>
|
|
|
+ <i class="icon-arrow-up"></i>
|
|
|
+ <#else>
|
|
|
+ <i class="icon-arrow-down"></i>
|
|
|
+ </#if>
|
|
|
+ </div>
|
|
|
+ <div class="dataFrame_data">${compareMap.totalClick!}</div>
|
|
|
+ </div>
|
|
|
+ <div id="accountBalance" class="dataFrame">
|
|
|
+ <div class="dataFrame_name"><span>账户余额</span></div>
|
|
|
+ <div class="dataFrame_data">${compareMap.balance!}</div>
|
|
|
</div>
|
|
|
- <div class="data-down">${compareMap.totalClick!}</div>
|
|
|
- </div>
|
|
|
- <div id="accountBalance">
|
|
|
- <div class="data-up"><span>账户余额</span></div>
|
|
|
- <div class="data-down">${compareMap.balance!}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="content-right">
|
|
|
- <div class="up">
|
|
|
- <span>创建新的订单</span>
|
|
|
- </div>
|
|
|
- <div class="down">
|
|
|
- <ul id="main_advertiserul2">
|
|
|
- <li class="select_box" id="advertiserul_box2">
|
|
|
- <span id="advertiserul_span2">${selectedadvertiserName2!}</span>
|
|
|
- <ul class="son_ul" id="advertiser_son_ul2"></ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <input type="hidden" name="selectedAdvertiserId2" id="selectedAdvertiserId2" value="${advertiserId2!}">
|
|
|
- <input type="hidden" name="selectedadvertiserName2" id="advertiserName2" value="${selectedadvertiserName2!}">
|
|
|
- <button href='${ctx}/advertiser/main/ad/order/create'>创建新的订单</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="diagram">
|
|
|
- <div id="diagramHead">
|
|
|
- <span>图像模式</span>
|
|
|
- <span>列表模式</span>
|
|
|
- </div>
|
|
|
- <div id="chartContent">
|
|
|
- <div class="chart-up">
|
|
|
- <div class="pull-down">
|
|
|
- <span class="span">选择广告主</span>
|
|
|
- <ul id="main_advertiserul3">
|
|
|
- <li class="select_box" id="advertiserul_box3">
|
|
|
- <span id="advertiserul_span3">${selectedadvertiserName3!}</span>
|
|
|
- <ul class="son_ul" id="advertiser_son_ul3"></ul>
|
|
|
+ </div>
|
|
|
+ <div id="right">
|
|
|
+ <div class="up"><span>创建新的订单</span></div>
|
|
|
+ <div class="down">
|
|
|
+ <ul id="main_advertiserul2">
|
|
|
+ <li class="select_box" id="advertiserul_box2">
|
|
|
+ <span id="advertiserul_span2">${selectedadvertiserName2!}</span>
|
|
|
+ <ul class="son_ul" id="advertiser_son_ul2"></ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <input type="hidden" name="selectedAdvertiserId3" id="selectedAdvertiserId3" value="${advertiserId3!}">
|
|
|
- <input type="hidden" name="selectedadvertiserName3" id="advertiserName3" value="${selectedadvertiserName3!}">
|
|
|
+ <input type="hidden" name="selectedAdvertiserId2" id="selectedAdvertiserId2" value="${advertiserId2!}">
|
|
|
+ <input type="hidden" name="selectedadvertiserName2" id="advertiserName2" value="${selectedadvertiserName2!}">
|
|
|
+ <button class="btn1" href='${ctx}/advertiser/main/ad/order/create'>创建新的订单</button>
|
|
|
</div>
|
|
|
- <div class="time-period">
|
|
|
- <span class="span">时间周期选择</span>
|
|
|
- <div id="date-range" class="pull-right">
|
|
|
- <i class="icon-calendar" style="background:none;"></i>
|
|
|
- <input readonly='readonly' id="date-range-picker" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="dashboard_diagram">
|
|
|
+ <div id="diagramHead">
|
|
|
+ <span>图像模式</span>
|
|
|
+ <span>列表模式</span>
|
|
|
+ </div>
|
|
|
+ <div id="dashboard_chartContent">
|
|
|
+ <div class="chart-up">
|
|
|
+ <div class="pull-down">
|
|
|
+ <span class="span">选择广告主</span>
|
|
|
+ <ul id="main_advertiserul3">
|
|
|
+ <li class="select_box" id="advertiserul_box3">
|
|
|
+ <span id="advertiserul_span3">${selectedadvertiserName3!}</span>
|
|
|
+ <ul class="son_ul" id="advertiser_son_ul3"></ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" name="selectedAdvertiserId3" id="selectedAdvertiserId3" value="${advertiserId3!}">
|
|
|
+ <input type="hidden" name="selectedadvertiserName3" id="advertiserName3" value="${selectedadvertiserName3!}">
|
|
|
+ </div>
|
|
|
+ <div class="time-period">
|
|
|
+ <span class="span">时间周期选择</span>
|
|
|
+ <span id="calendar_span">
|
|
|
+ <i class="icon-calendar"></i>
|
|
|
+ <input type="text" name="dateRangePicker" id="dateRangePicker" value="${dateRangePicker!}"/>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span class='time'>今天</span>
|
|
|
+ <span class='time'>昨天</span>
|
|
|
+ <span class='time'>最近7天</span>
|
|
|
+ <span class='time'>最近30天</span>
|
|
|
+ <div id="right_radio">
|
|
|
+ <span><input type="radio" name="item" checked="checked" value="0"/>消费数</span>
|
|
|
+ <span><input type="radio" name="item" value="1"/>曝光数</span>
|
|
|
+ <span><input type="radio" name="item" value="2"/>点击数</span>
|
|
|
+ <span><input type="radio" name="item" value="3"/>点击率</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <span class='time'>今天</span>
|
|
|
- <span class='time'>昨天</span>
|
|
|
- <span class='time'>最近7天</span>
|
|
|
- <span class='time'>最近30天</span>
|
|
|
- <form>
|
|
|
- <input type="radio" name="item" checked="checked" value="0" /><span>消费数</span>
|
|
|
- <input type="radio" name="item" value="1" /><span>曝光数</span>
|
|
|
- <input type="radio" name="item" value="2" /><span>点击数</span>
|
|
|
- <input type="radio" name="item" value="3" /><span>点击率</span>
|
|
|
- </form>
|
|
|
+ <div class="chart-down">
|
|
|
+ <div class="chart-down-left">趋势图：请选择广告主</div>
|
|
|
+ <div class="chart-down-right">消费 (元)</div>
|
|
|
+ <div id="chart" style="width:99.8%;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="chart-down">
|
|
|
- <div class="chart-down-left">趋势图：请选择广告主</div>
|
|
|
- <div class="chart-down-right">消费 (元)</div>
|
|
|
- <div id="chart"></div>
|
|
|
+ <div id="sheetContent">
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="sheetContent">
|
|
|
-
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
ying.rong