在对各种媒体广告进行投放时,投放系统中必备的就是一个广告的排期系统。
如CNZZ广告管家
我也参考此种展示方式开发了一套广告排期系统,如图
我的广告排期,与其他网上成型的有些不同,网站上的都对广告位进行一个排期表的展示,而我的排期系统,是针对广告的投放维度(如:时间、地域、频道、平台等),相对于广告位、时间的排期,我的排期要都以表格的形式展示,很难实现,因为是个多维度的表格,再一个就是维度很多,这样排列组合后的数据也很多,展示给客户他也会疯掉的。所以做成了上图所示,将多个维度做成以查询条件的形式,来进行查询,为了不局限于单一的维度,我这里可以有一个维度信息不录,比如:不录频道,那么就会自动排列北京、时间段1:00 ~6:00,所有频道,在5月份的一个排期情况。
在设计此功能,我将排期表展示与业务逻辑处理,分成了2部分,实现松耦合、高内聚的一个设计原理。这样在其他业务想使用排期时,只需要进行相关业务的代码编写,而不用改动排期相关的程序。
部分代码如下:
JSP页面,排期表的展示,详见55 - 57行,页面在后台进行的组装,前台直接获取展示。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" src="<%=path %>/haier/AdPaiQi/paiQi.js"></script>
</head>
<body>
<form name="fm" method="post">
<input type="hidden" id="month" value="${advInfoVo.sel_month }" />
<input type="hidden" id="year" value="${advInfoVo.sel_year }" />
<table>
<tr>
<td>地域</td>
<td>
<!-- 省份 -->
<div id="div1">
<s:select id="select1" name="advInfoVo.provice"
style="width:100px" headerKey="" headerValue="请选择省"
list="proviceList" listKey="proid" listValue="proname" οnchange="change_checkBox(this)" />
</div>
<!-- 城市 -->
<div id="div2">
<s:select id="select2" name="advInfoVo.areaId"
style="width:160px" headerKey="" headerValue="请选择市"
list="createCityList" listKey="cid" listValue="cname" />
</div>
</td>
</tr>
<tr>
<td>频道</td>
<td>
<s:select name="advInfoVo.channelId"
style="width:300px" headerKey="" headerValue="请选择频道"
list="advChannelMap" listKey="key" listValue="value" />
</td>
</tr>
<tr>
<td>时间段</td>
<td>
<s:select style="width:300px"
name="advInfoVo.timeFlag" list="advTimeMap"
listKey="key" listValue="value" headerKey="" headerValue="请选择时间段" />
</td>
</tr>
<div id ="div_date"></div>
</table>
<table>
<td>
<button type="button" οnclick="findPaiQi();">查询</button>
</td>
</table>
<table>
<%if(request.getAttribute("paiQiStr") == null) {}else{%>
<%=request.getAttribute("paiQiStr") %>
<%} %>
</table>
</form>
</body>
<style type="text/css">
.yangshi1{border:1px solid;cursor:hand;height:18px;width:18px;background-color:#C0FF3E;}
.yangshi2{border:1px solid;cursor:hand;height:18px;width:200px;}
.yangshi3{border:1px solid;cursor:hand;height:18px;width:18px;background-color:#FF0000;}
.yangshi4{border:1px solid;cursor:hand;height:18px;width:18px;}
</style>
<script type="text/javascript">
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
//年月日之间的分隔符
var splitStr="-";
//日期选择
var weekDays = new Array("日","一", "二", "三", "四", "五", "六");
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
var lastDay = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
cal(year, month);
initDate();
//构建日历框
function cal(thisYear, thisMonth) {
var calendarDocument = "";
calendarDocument += '<tr>';
calendarDocument += '<td colspan="31" align="center">';
//构建年份下拉框[1900-2099]年
calendarDocument += "<select id ='sel_year' name='advInfoVo.sel_year' onChange='changeYM()'>";
for (var i = 1900; i <= 2099; i++) {
calendarDocument += "<option value=" + i + ">" + i + "</option>";
}
calendarDocument += "</select>";
calendarDocument += "年";
//构建月份下拉框
calendarDocument += "<select id ='sel_month' name='advInfoVo.sel_month' onChange='changeYM()'>";
for (var i = 1; i <= 12; i++) {
calendarDocument += "<option value=" + i + ">" + i + "</option>";
}
calendarDocument += "</select>";
calendarDocument += "月";
calendarDocument += '</td>';
calendarDocument += '</tr>';
//将构建好的控件字符串追加给div
document.getElementById('div_date').innerHTML = calendarDocument;
//默认选择当前年
document.getElementById('sel_year').value = thisYear;
//默认选择当前月
document.getElementById('sel_month').value = thisMonth;
}
//年月下拉框
function changeYM() {
fullYear = document.getElementById('sel_year').value;
fullMonth = document.getElementById('sel_month').value;
cal(fullYear, fullMonth);
}
function findPaiQi(){
fm.action = "findPaiQi.action";
fm.submit();
}
function initDate(){
if(document.getElementById("month").value != '' || document.getElementById("year").value != ''){
document.getElementById('sel_month').value = document.getElementById("month").value;
document.getElementById('sel_year').value = document.getElementById("year").value;
}
}
</script>
</html>
java代码,其中包含调用业务逻辑、及排期生成方法。
/**
* 获取广告排期
*
* @return
*/
public String findPaiQi() throws Exception {
ActionContext context = ActionContext.getContext();
HttpServletResponse response = (HttpServletResponse) context
.get(ServletActionContext.HTTP_RESPONSE);
HttpServletRequest request = (HttpServletRequest) context
.get(ServletActionContext.HTTP_REQUEST);
int num = DateUtil.getDaysOfMonth(advInfoVo.getSel_year()
+ advInfoVo.getSel_month());
Map paiQiMap = new HashMap();
// 查询广告信息 begin
advInfoVo = getDateRange(advInfoVo);
PageVo pageVo = adService.getAD(advInfoVo, null);
List advInfoList = pageVo.getAdvInfoVoList();
// 查询广告信息 end
Map weiduOfMap = getLiveEpgWeiDu(advInfoList, advInfoVo.getAreaId(),
advInfoVo.getChannelId(), advInfoVo.getTimeFlag(), num,
advInfoVo);
paiQiStr = paiQi(weiduOfMap, num);
request.setAttribute("paiQiStr", paiQiStr);
generateConditions();
return SUCCESS;
}
排期表生成方法,paiQi方法需要接受2个参数一个MAP(key:维度的组合,value:1个月所有天的投放情况),days表示这个月有多少天。
/**
* 生成排期方法 不建议此方法中融合业务逻辑,仅做排期表生成处理。
*
* @param paiQiMap
* @param days
* @return
* @throws Exception
*/
private String paiQi(Map<String, List> paiQiMap, int days) throws Exception {
StringBuffer sb = new StringBuffer();
// 构建排期表
sb.append("<tr>");
sb.append("<td class=\"yangshi2\" align=\"center\">日期</td>");
for (int i = 1; i <= days; i++) {
sb.append("<td class=\"yangshi4\" align=\"center\">" + i + "</td>");
}
sb.append("</tr>");
String key = "";
List valueList;
boolean todayPaiQiBoolean;
for (Map.Entry<String, List> entry : paiQiMap.entrySet()) {
sb.append("<tr>");
key = entry.getKey();
valueList = entry.getValue();
sb.append("<td class=\"yangshi2\">" + key + "</td>");
int size = valueList.size();
for (int i = 0; i < size; i++) {
todayPaiQiBoolean = (Boolean) valueList.get(i);
if (todayPaiQiBoolean) {
sb.append("<td class=\"yangshi3\" align=\"center\"></td>");
} else {
sb.append("<td class=\"yangshi1\" align=\"center\"></td>");
}
}
sb.append("</tr>");
}
return sb.toString();
}
附上一张差不多的成品图