<!DOCTYPE html>
|
<html lang="en">
|
<meta charset="utf-8">
|
<title></title>
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
<meta content="" name="description">
|
<meta content="" name="author">
|
<script src="../js/jquery-1.7.2.min.js"></script>
|
<script src="../js/foundation-2.0.js"></script>
|
<script type="text/javascript" src="../js/echarts.common.min.js"></script>
|
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
|
|
<style>
|
body {
|
font-size: 14px;
|
}
|
|
ul {
|
margin-left: 8%;
|
margin-right: 20%;
|
}
|
|
ul li {
|
margin: 10px 0;
|
}
|
|
ul li span {
|
float: right;
|
padding-right: 50px;
|
}
|
</style>
|
<script type="text/javascript">
|
var templte_message, messageUl, message, messageTitle, messageImg;
|
|
templte_message = [
|
'<li>',
|
'<a href="javascript:void(0)" style="color:#5c5c5c;" onclick="loadnews(27)"></a>',
|
'<span style="color: #ACACAC;">',
|
'</span>',
|
'<a style="float:right; padding-right:10px;">',
|
'<img src="../image/home/fujian.png">',
|
'</a>',
|
'</li>'
|
];
|
|
function loadnews(id) {
|
Win.popup({url: "root/page/system/broadcast.html?id=" + id, width: 700, height: 500});
|
};
|
|
function getChart(id,rows,flag,isMonth) {
|
//1
|
var dataList = [];
|
var RateData = [];
|
var categoryList = [];
|
var series =[];
|
var yAxis = [{
|
type: 'value',
|
name: '金额',
|
min: 0,
|
position: 'left',
|
axisLine: {
|
lineStyle: {
|
color: '#4488bb'
|
}
|
},
|
splitArea:{
|
show:true
|
},
|
axisLabel: {
|
formatter: '{value}'
|
}
|
}
|
];
|
|
|
|
for(var index=0;index<rows.length;index++) {
|
var value = rows[index];
|
if(index == 0){
|
dataList.push({"name" : value.category});
|
|
}
|
else {
|
if(!dataList.exists("name",value.category)) {
|
dataList.push({"name" : value.category});
|
}
|
}
|
}
|
|
|
for(var inx = 0; inx < dataList.length; inx++) {
|
|
var value = dataList[inx];
|
|
var typeData = [0,0,0,0,0,0,0,0,0,0,0,0];
|
|
for(var j = 0; j < rows.length; j++){
|
|
if(rows[j].category == value.name) {
|
|
if(isMonth){
|
|
var month = parseInt(rows[j].month.split("月")[0]);
|
typeData[month-1] += parseInt(rows[j].monthtarget);
|
}
|
else {
|
var quarter = parseInt(rows[j].quarter.split("季度")[0]);
|
typeData[quarter-1] += parseInt(rows[j].monthtarget);
|
}
|
}
|
}
|
if(!isMonth){
|
typeData = typeData.slice(0,4);
|
}
|
dataList[inx].data = typeData;
|
dataList[inx].type = "bar";
|
}
|
|
if(flag && dataList[1].name == "销售额") {
|
categoryList = ['销售额','指标','达成率','增长率'];
|
}
|
else if(flag && dataList[0].name == "基台") {
|
categoryList = ['基台','种植体','达成率'];
|
}
|
else if(flag && dataList[1].name == "销售数量") {
|
categoryList = ['销售数量','指标','达成率'];
|
}
|
else {
|
categoryList = ['销售额','指标'];
|
}
|
|
if(flag) {
|
var saleData = [];
|
var targetData = [];
|
for ( var int = 0; int < dataList.length; int++) {
|
var value = dataList[int];
|
if(value.name == "销售额" || value.name == "基台"){
|
saleData = value.data;
|
}
|
else if (value.name == "销售数量" ) {
|
categoryList[0] = "销售数量";
|
saleData = value.data;
|
}
|
else if (value.name == "指标" || value.name == "种植体") {
|
targetData = value.data;
|
}
|
|
}
|
|
for(var idx=0;idx<saleData.length;idx++){
|
var value = saleData[idx];
|
RateData[idx] = Math.floor((value*100/targetData[idx]));
|
}
|
|
}
|
|
if(flag) {
|
var rate = {
|
type: 'value',
|
name: '达成率',
|
position: 'right',
|
axisLine: {
|
lineStyle: {
|
color: '#e86de4'
|
}
|
},
|
axisLabel: {
|
formatter: '{value} %'
|
}
|
};
|
var increase = {
|
type: 'value',
|
name: '增长率',
|
position: 'right',
|
offset: 50,
|
axisLine: {
|
lineStyle: {
|
color: '#0e901e'
|
}
|
},
|
axisLabel: {
|
formatter: '{value} %'
|
}
|
};
|
var seriesRate = {
|
name:'达成率',
|
type:'line',
|
yAxisIndex:1,
|
data:RateData
|
};
|
var increaseData = "";
|
if (isMonth) {
|
increaseData = [-38.3,-6.2,215.4,46.3,45.6,56.4,31.5,117.7,344.8];
|
}
|
else {
|
increaseData = [-50.3,49.7,161.7];
|
}
|
|
var increaseRate = {
|
name:'增长率',
|
type:'line',
|
yAxisIndex:1,
|
data:increaseData
|
};
|
yAxis.push(rate);
|
/* yAxis.push(increase); */
|
dataList.push(seriesRate);
|
dataList.push(increaseRate);
|
|
|
}
|
|
series = dataList;
|
//2
|
var colors = ['#87cefa', '#ff7f50', '#e86de4','#0e901e'];
|
var option = {
|
color: colors,
|
grid: {
|
left: 100
|
},
|
tooltip: {
|
trigger: 'axis',
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {show: true}
|
}
|
},
|
legend: {
|
data:categoryList
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: !isMonth?['1季度','2季度','3季度','4季度'] :['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
|
}
|
],
|
yAxis: yAxis,
|
series: series
|
};
|
|
var chart =echarts.init(document.getElementById(id));
|
chart.setOption(option);
|
}
|
function more() {
|
Win.popup({url: "root/page/Default.html?", width: 1000, height: 450});
|
|
};
|
|
$(document).ready(function() {
|
Loading.hide();
|
messageUl = $("#message_ul");
|
Server.call('root/data/Announcement/getSetByPage',"pageno=1&pagesize=10",function(result){
|
if(result.success){
|
for(var i =0; i < result.total; i++) {
|
var entity = result.entityset[i];
|
var message = templte_message;
|
message[1] = '<a id="message_title" href="javascript:void(0)" style="color:#5c5c5c;" onclick="loadnews('+entity.id+')">'+entity.title+'</a>';
|
if(entity.attachment){
|
message[4] = '<a id="image_herf" href="'+entity.attachment+'" style="float:right; padding-right:10px;">';
|
}else{
|
message[4] = '<a style="float:right; padding-right:10px;display:none">';
|
}
|
var messageele = $(templte_message.join(""));
|
messageUl.append(messageele);
|
}
|
}
|
});
|
|
|
Server.call('root/data/procedure/getDistributorTotalKPICharts/getDataSet',null,function(callback){
|
if(callback.success){
|
/* getChart('chartmonth',callback.rows,true,true); */
|
getChart('chartquarter',callback.rows,true,false);
|
}
|
});
|
|
});
|
</script>
|
</head>
|
<body>
|
|
<div style="position: relative; height: 400px">
|
<div id="chartmonth" style="width: 45%;height:400px;position: absolute;left: 50%"></div>
|
<div id="chartquarter" style="width: 45%;height:400px;position: absolute;"></div>
|
</div>
|
<h3 style="color:#90B91D; margin-left: 50px;">公告</h3>
|
<hr style="margin-top:5px;">
|
<ul id="messgae_ul">
|
</ul>
|
<ul style="list-style:none">
|
<li id="inform_more" style="float:left;width:100px;text-align:center"><a href="javascript:void(0)" style="color: #8DB91E;" onclick="more()">查看更多..</a></li>
|
</ul>
|
</body>
|
</html>
|
