580 lines
25 KiB
HTML
580 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>工作台</title>
|
||
|
||
<link href="static/green/css/base.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="../custom/green/uimaker/easyui.css">
|
||
<link rel="stylesheet" href="static/green/css/workbench.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div id="hd">
|
||
|
||
</div>
|
||
|
||
<div id="bd">
|
||
<div class="bd-content">
|
||
<div class="right-zone">
|
||
<div class="inform item-box">
|
||
<div class="inform-hd">
|
||
<label>通知公告</label>
|
||
<a href="javascript:;">更多<span>></span></a>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">uimaker信息管理<i></i></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">光电获土耳其最大固网<i></i></a>
|
||
<label>04-12</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">2015中国线缆行业最具竞争</a>
|
||
<label>04-11</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">2016年铝包钢绞线2016管道保温棉询</a>
|
||
<label>04-10</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">力缆（特种导线）再次温棉询</a>
|
||
<label>04-09</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">光电获土耳其最大固网</a>
|
||
<label>04-08</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="price item-box">
|
||
<div class="inform-hd">
|
||
<label>公开竞价</label>
|
||
<a href="javascript:;">更多<span>></span></a>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">界面设计后台界面UI作品</a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">换肤设置-材料在线下单选购</a>
|
||
<label>04-12</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">2016最新软件界面设计欣赏</a>
|
||
<label>04-11</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">作者咨询QQ：32534386</a>
|
||
<label>04-10</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">数据库备份/还原设置修复</a>
|
||
<label>04-09</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">自定义文档属性基本参数设置</a>
|
||
<label>04-08</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">配货方式选择会员产品分类</a>
|
||
<label>04-07</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="attached item-box">
|
||
<div class="inform-hd">
|
||
<label>常用附件下载</label>
|
||
<a href="javascript:;">更多<span>></span></a>
|
||
</div>
|
||
<div class="attached-tab">
|
||
<a href="javascript:;" class="current item-left" attached="public-attached">公开附件</a>
|
||
<a href="javascript:;" class="item-right" attached="inner-attached">内部附件</a>
|
||
</div>
|
||
<ul class="public-attached">
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">界面设计作品PSD源文件免费下载</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">uimaker版权所有禁止转载发布</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">意见建议反馈内容模版</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">系统错误修复文档下载分布</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">采集信息管理系统后台界面</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">用户管理信息文件同步</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="inner-attached hide">
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">意见建议反馈内容模版</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">这里显示的不同内容</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">界面设计作品PSD源文件免费下载</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">系统错误修复文档下载分布</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">采集信息管理系统后台界面</a>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">用户管理信息文件同步</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="center-part">
|
||
<div class="center-items todo">
|
||
<div class="calendar-part">
|
||
<div class="easyui-calendar" style="width:205px;height:231px;"></div>
|
||
</div>
|
||
<ul class="work-items clearfix">
|
||
<li>
|
||
<div class="work-inner">
|
||
<div class="work-item green">
|
||
<i class="iconfont"></i>
|
||
<span class="num">14 <span class="unit">个</span></span>
|
||
<label>待办未处理</label>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="work-inner">
|
||
<div class="work-item red">
|
||
<i class="iconfont"></i>
|
||
<span class="num">6 <span class="unit">条</span></span>
|
||
<label>预警信息未读</label>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="work-inner">
|
||
<div class="work-item yellow">
|
||
<i class="iconfont"></i>
|
||
<span class="num">9 <span class="unit">封</span></span>
|
||
<label>邮件未读</label>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="work-inner">
|
||
<div class="work-item blue">
|
||
<i class="iconfont"></i>
|
||
<span title="2000,00万" class="num">2000,00 <span class="unit">万</span></span>
|
||
<label>我的询价金额</label>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="work-inner">
|
||
<div class="work-item purple">
|
||
<i class="iconfont"></i>
|
||
<span title="2000,00万" class="num">100,00 <span class="unit">万</span></span>
|
||
<label>已完成的合同金额</label>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="work-inner">
|
||
<div class="work-item gray">
|
||
<i class="iconfont"></i>
|
||
<span class="num">10 <span class="unit">个</span></span>
|
||
<label>供应商开发</label>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="center-items chart0 clearfix">
|
||
<div class="chart0-item">
|
||
<div class="item-inner">
|
||
<div class="item-content">
|
||
<div class="content-hd">货源风险</div>
|
||
<div class="chart-chart" id="chart0"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart0-item">
|
||
<div class="item-inner">
|
||
<div class="item-content">
|
||
<div class="content-hd">交货准确率</div>
|
||
<div class="chart-chart" id="chart1"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center-items chart1">
|
||
<div class="chart1-inner">
|
||
<div class="item-hd">询价降本率</div>
|
||
<div class="chart1-chart" id="chart3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ft"></div>
|
||
</div>
|
||
<div class="todo-panel">
|
||
<div class="todo-title">
|
||
<i class="iconfont"></i>
|
||
<span class="num">14 <span class="unit">个</span></span>
|
||
<label>待办未处理</label>
|
||
</div>
|
||
<div class="todo-items">
|
||
<ul>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理<i></i></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>10条</span>供应商开发申请未处理<i></i></a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>0条</span>供应商开发申请未处理，请及时审批<i></i></a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>1条</span>供应商开发申请未处理，请及时审批</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>4条</span>供应商开发申请未处理，请及时审批</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>6条</span>供应商开发申请未处理，请及时审批，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，未处理</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>开发申请未处理，请及时审批，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，未处理会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，会导致失效</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批，未处理</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
<li>
|
||
<span></span>
|
||
<a href="javascript:;" class="ellipsis">您有<span>2条</span>供应商开发申请未处理，请及时审批</a></a>
|
||
<label>04-13</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
<script type="text/javascript" src="../custom/green/jquery.min.js"></script>
|
||
<script type="text/javascript" src="../custom/green/jquery.easyui.min.js"></script>
|
||
<!-- <script type="text/javascript" src="static/green/js/menu.js"></script> -->
|
||
<script type="text/javascript" src="static/green/js/echarts-all.js"></script>
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript">
|
||
//chart0
|
||
|
||
$(document).ready(function(){
|
||
var option0 = {
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient : 'vertical',
|
||
x : 'left',
|
||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
|
||
show:false
|
||
},
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {
|
||
show: true,
|
||
type: ['pie', 'funnel'],
|
||
option: {
|
||
funnel: {
|
||
x: '25%',
|
||
width: '50%',
|
||
funnelAlign: 'center',
|
||
max: 1548
|
||
}
|
||
}
|
||
},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name:'访问来源',
|
||
type:'pie',
|
||
radius : ['50%', '70%'],
|
||
itemStyle : {
|
||
normal : {
|
||
label : {
|
||
show : false
|
||
},
|
||
labelLine : {
|
||
show : false
|
||
}
|
||
},
|
||
emphasis : {
|
||
label : {
|
||
show : true,
|
||
position : 'center',
|
||
textStyle : {
|
||
fontSize : '30',
|
||
fontWeight : 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data:[
|
||
{value:335, name:'直接访问'},
|
||
{value:310, name:'邮件营销'},
|
||
{value:234, name:'联盟广告'},
|
||
{value:135, name:'视频广告'},
|
||
{value:1548, name:'搜索引擎'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
var myChart0 = echarts.init(document.getElementById('chart0'));
|
||
myChart0.setOption(option0);
|
||
|
||
//chart1
|
||
var option1 = {
|
||
tooltip : {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
|
||
show:false
|
||
},
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
xAxis : [
|
||
{
|
||
type : 'category',
|
||
boundaryGap : false,
|
||
data : ['第一周','第二周','第三周','第四周','第五周','第六周','第七周']
|
||
}
|
||
],
|
||
yAxis : [
|
||
{
|
||
type : 'value'
|
||
}
|
||
],
|
||
series : [
|
||
{
|
||
name:'邮件营销',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name:'联盟广告',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[220, 182, 191, 234, 290, 330, 310]
|
||
},
|
||
{
|
||
name:'视频广告',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[150, 232, 201, 154, 190, 330, 410]
|
||
},
|
||
{
|
||
name:'直接访问',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[320, 332, 301, 334, 390, 330, 320]
|
||
},
|
||
{
|
||
name:'搜索引擎',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
||
}
|
||
]
|
||
};
|
||
var myChart1 = echarts.init(document.getElementById('chart1'));
|
||
myChart1.setOption(option1);
|
||
|
||
var option3 = {
|
||
tooltip : {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['蒸发量'],
|
||
show:false
|
||
},
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {show: true, type: ['line', 'bar']},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
xAxis : [
|
||
{
|
||
type : 'category',
|
||
data : ['采购组织','供应商','新物料','uimaker','信息管理','业务系统','采购商']
|
||
}
|
||
],
|
||
yAxis : [
|
||
{
|
||
type : 'value'
|
||
}
|
||
],
|
||
series : [
|
||
{
|
||
name:'蒸发量',
|
||
type:'bar',
|
||
data:[60, 45, 73, 23, 37, 48, 18],
|
||
markPoint : {
|
||
data : [
|
||
{type : 'max', name: '最大值'},
|
||
{type : 'min', name: '最小值'}
|
||
]
|
||
},
|
||
markLine : {
|
||
data : [
|
||
{type : 'average', name: '平均值'}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
var myChart3 = echarts.init(document.getElementById('chart3'));
|
||
myChart3.setOption(option3);
|
||
|
||
//我的待办点击事件
|
||
$(document).on('click','.work-item.green',function(event){
|
||
var width = (2 * $(this).width()) + 10;
|
||
$(".todo-panel").width(width -2).css({top:$(this).offset().top,left:$(this).offset().left}).show();
|
||
event.stopPropagation();
|
||
});
|
||
$(".todo-panel").click(function(){
|
||
event.stopPropagation();
|
||
});
|
||
$(document).click(function(){
|
||
$(".todo-panel").hide();
|
||
});
|
||
|
||
});
|
||
|
||
//公开附件tab事件处理
|
||
$(".attached-tab").on("click","a",function(){
|
||
$(this).closest(".attached-tab").find("a").removeClass("current");
|
||
$(this).addClass("current");
|
||
$(this).closest(".attached").find("ul").addClass("hide");
|
||
$(this).closest(".attached").find("ul." + $(this).attr("attached")).removeClass("hide");
|
||
})
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|