root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Pear-Admin-Layui/view/document/SeniorDetail.html

466 lines
10 KiB
HTML
Raw Normal View History

增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
<!DOCTYPE html>
<html>
行为日志页面
2020-09-13 11:41:50 +00:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>高级详情</title>
<link href="../../component/pear/css/pear.css" rel="stylesheet">
<style type="text/css">
.layui-row .layui-col-xs4 {
padding-bottom: 16px;
}
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
.layui-row .layui-col-xs8 {
padding-bottom: 16px;
}
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
.lay-step {
padding-left: 10%;
}
</style>
</head>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs12">
<div class="layui-card">
<div class="layui-card-header">工单信息</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space1">
<div class="layui-col-xs8" style="padding-bottom: 10px;">
<b>单号:234231029431</b>
</div>
<div class="layui-col-xs4" style="padding-bottom: 10px;">
<div class="pear-btn-group">
<button class="pear-btn pear-btn-sm"> 操作 </button>
<button class="pear-btn pear-btn-primary pear-btn-sm"> 操作 </button>
<button class="pear-btn pear-btn-success pear-btn-sm"> 操作 </button>
<button class="pear-btn pear-btn-success pear-btn-sm" lay-dropdown="{templateMenu: '#myMenus'}">更多操作 </button>
</div>
</div>
<div class="layui-col-xs4">
创建人:曲丽丽
</div>
<div class="layui-col-xs4">
订购产品:XX 服务
</div>
<div class="layui-col-xs4">
状态:待审批
</div>
<div class="layui-col-xs4">
创建时间:2017-07-07
</div>
<div class="layui-col-xs4">
关联单据:12421
</div>
<div class="layui-col-xs4">
生效日期:2017-07-07 ~ 2017-08-08
</div>
<div class="layui-col-xs4">
备注:请于两个工作日内确认
</div>
<div class="layui-col-xs4">
订单金额:¥568.08
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
</div>
</div>
</div>
</div>
</div>
行为日志页面
2020-09-13 11:41:50 +00:00
<div class="layui-col-xs12">
<div class="layui-card">
<div class="layui-card-header">流程进度</div>
<div class="layui-card-body">
<div class="layui-carousel" id="stepForm" lay-filter="stepForm"></div>
</div>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
</div>
</div>
行为日志页面
2020-09-13 11:41:50 +00:00
<div class="layui-col-xs12">
<div class="layui-card">
<div class="layui-card-header">用户信息</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space1 userInfo">
<div class="layui-col-xs4">
用户姓名：付小小
</div>
<div class="layui-col-xs4">
联系电话：18100000000
</div>
<div class="layui-col-xs4">
常用快递：菜鸟仓储
</div>
<div class="layui-col-xs8">
取货地址：浙江省杭州市西湖区万塘路18号
</div>
<div class="layui-col-xs4">
备注：无
</div>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
</div>
</div>
</div>
</div>
行为日志页面
2020-09-13 11:41:50 +00:00
<div class="layui-col-xs6">
<div class="layui-card">
<div class="layui-card-header">工单明细</div>
<div class="layui-card-body">
<table id="orderItems"></table>
</div>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
</div>
</div>
行为日志页面
2020-09-13 11:41:50 +00:00
<div class="layui-col-xs6">
<div class="layui-card">
<div class="layui-card-header">占比统计</div>
<div class="layui-card-body">
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div id="echarts-records" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
</div>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
</div>
</div>
</div>
行为日志页面
2020-09-13 11:41:50 +00:00
<div class="layui-col-xs12">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">操作日志</li>
<li>访问日志</li>
<li>更改日志</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table id="operateLog"></table>
</div>
<div class="layui-tab-item">
<table id="requestLog"></table>
</div>
<div class="layui-tab-item">
<table id="editLog"></table>
</div>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
</div>
</div>
</div>
</div>
</div>
</div>
行为日志页面
2020-09-13 11:41:50 +00:00
<script id="myMenus" type="text/script">
[
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
[{txt: "操作一", event: "operate1"}]
[{txt: "操作二", event: "operate2"}]
[{txt: "操作三", event: "operate3"}]
]
</script>
行为日志页面
2020-09-13 11:41:50 +00:00
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['jquery', 'form', 'element', 'table', 'step', 'dropdown', 'echarts', 'topBar'], function() {
var form = layui.form;
var element = layui.element;
var table = layui.table;
var step = layui.step;
var dropdown = layui.dropdown;
var echarts = layui.echarts;
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
dropdown.onFilter('test1', function(event) {
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
})
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '100%',
height: '150px',
stepItems: [{
title: '创建项目',
desc: "曲丽丽",
time: "2016-12-12 12:32"
}, {
title: '部门初审',
desc: "周毛毛",
time: ""
}, {
title: '财务复核',
desc: '',
time: ""
}, {
title: '完成',
desc: '',
time: ""
}]
});
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
table.render({
elem: '#orderItems',
skin: 'line',
height: '300',
cols: [
[{
field: "id",
title: "编号"
},
{
field: "name",
title: "名称"
},
{
field: "remark",
title: "备注"
},
{
field: "fee",
title: "维修费用"
}
]
],
data: [{
id: 1234561,
name: "冰箱",
remark: "制冷设备损坏",
fee: "100.00"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
{
行为日志页面
2020-09-13 11:41:50 +00:00
id: 1234562,
name: "空调",
remark: "外机固定架更换",
fee: "30.00"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
{
行为日志页面
2020-09-13 11:41:50 +00:00
id: 1234563,
name: "地板",
remark: "地板维修",
fee: "300.00"
}, {
id: 1234564,
name: "草坪",
remark: "需携带除草机",
fee: "2000.00"
}, {
id: 1234566,
name: "扫雪",
remark: "专业扫雪设备",
fee: "16000.00"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
}
]
行为日志页面
2020-09-13 11:41:50 +00:00
});
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
table.render({
elem: '#operateLog',
skin: 'line',
cols: [
[{
field: "operateType",
title: "操作类型"
},
{
field: "operateName",
title: "操作人"
},
{
field: "executeResult",
title: "执行结果"
},
{
field: "operateTime",
title: "操作时间"
},
{
field: "remark",
title: "备注"
}
]
],
data: [{
operateType: "订购关系生效",
operateName: "曲丽丽",
executeResult: "成功",
operateTime: "2017-10-03 19:23:12",
remark: "-"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
{
行为日志页面
2020-09-13 11:41:50 +00:00
operateType: "财务复审",
operateName: "付小小",
executeResult: "驳回",
operateTime: "2017-10-03 19:23:12",
remark: "不通过原因"
}, {
operateType: "部门初审",
operateName: "周毛毛",
executeResult: "成功",
operateTime: "2017-10-03 19:23:12",
remark: "很棒"
}, {
operateType: "提交订单",
operateName: "汗牙牙",
executeResult: "成功",
operateTime: "2017-10-03 19:23:12",
remark: "-"
}, {
operateType: "创建订单",
operateName: "曲丽丽",
executeResult: "成功",
operateTime: "2017-10-03 19:23:12",
remark: "-"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
}
]
行为日志页面
2020-09-13 11:41:50 +00:00
});
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
table.render({
elem: '#requestLog',
skin: 'line',
cols: [
[{
field: "time",
title: "时间"
},
{
field: "userName",
title: "访问人员"
}
]
],
data: [{
time: "2017-10-01 14:10",
userName: "西门吹雪"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
{
行为日志页面
2020-09-13 11:41:50 +00:00
time: "2017-10-01 14:10",
userName: "独孤求败"
}, {
time: "2017-10-01 14:10",
userName: "刺客567"
}, {
time: "2017-10-01 14:10",
userName: "张麻子"
}, {
time: "2017-10-01 14:10",
userName: "文西"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
}
]
行为日志页面
2020-09-13 11:41:50 +00:00
});
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
table.render({
elem: '#editLog',
skin: 'line',
cols: [
[{
field: "time",
title: "时间"
},
{
field: "userName",
title: "编辑人员"
},
{
field: "editContent",
title: "编辑内容"
}
]
],
data: [{
time: "2017-10-01 14:10",
userName: "刘备",
editContent: "金额"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
{
行为日志页面
2020-09-13 11:41:50 +00:00
time: "2017-10-01 14:10",
userName: "关羽",
editContent: "武力值"
}, {
time: "2017-10-01 14:10",
userName: "张飞",
editContent: "怒气值"
}, {
time: "2017-10-01 14:10",
userName: "路人甲",
editContent: "眼力值"
}, {
time: "2017-10-01 14:10",
userName: "炮灰乙",
editContent: "概率值"
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
]
行为日志页面
2020-09-13 11:41:50 +00:00
});
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
var option = {
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%']
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
行为日志页面
2020-09-13 11:41:50 +00:00
visualMap: {
type: 'piecewise',
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
show: false,
行为日志页面
2020-09-13 11:41:50 +00:00
dimension: 0,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [{
type: 'line',
smooth: 0.6,
symbol: 'none',
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
lineStyle: {
行为日志页面
2020-09-13 11:41:50 +00:00
color: 'green',
width: 5
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
行为日志页面
2020-09-13 11:41:50 +00:00
markLine: {
symbol: ['none', 'none'],
label: {
show: false
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
},
行为日志页面
2020-09-13 11:41:50 +00:00
data: [{
xAxis: 1
},
{
xAxis: 3
},
{
xAxis: 5
},
{
xAxis: 7
}
]
},
areaStyle: {},
data: [
['2019-10-10', 200],
['2019-10-11', 400],
['2019-10-12', 650],
['2019-10-13', 500],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
}]
};
echartsRecords.setOption(option);
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
window.onresize = function() {
echartsRecords.resize();
}
});
</script>
</body>
增加基本详情页与高级详情页
2020-09-13 03:28:26 +00:00
行为日志页面
2020-09-13 11:41:50 +00:00
</html>