<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<LINK rel="Bookmark" href="../images/favicon.ico">
|
<!-- 本框架基本脚本和样式 -->
|
|
<script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
|
<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1101724_fk0hww07xt5.css">
|
<link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}">
|
<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
|
<style>
|
.service::-webkit-scrollbar {
|
width: 1px;
|
}
|
.l_panel{width: 150px;float: left;}
|
.r_panel{width:calc(100% - 180px);float: left;overflow:scroll; overflow-y:hidden;}
|
.name_cell{width: 150px;height: 90px;text-align: center;line-height: 90px;border-top: 2px solid #DCDFE6;border-right: 1px solid #DCDFE6;font-size: 18px;}
|
.name_cell:last-of-type{border-bottom: 2px solid #DCDFE6;}
|
.content_cel{height: 90px;float: left;font-size: 12px;}
|
.content_cel p{margin: 0px;}
|
.c_row{height: 90px;overflow: hidden;}
|
.head_cel{text-align: right;width: 150px;height: 90px;float: left;line-height: 90px;font-size: 18px;border-right: 1px #efefef solid;border-top: 2px solid #DCDFE6;}
|
.wait{border-top:2px solid #8fc440; background: #ecf7e6;text-align: center}
|
.service{cursor: pointer;overflow: scroll;overflow-x: hidden;}
|
.notwork{background: #fafafa;}
|
.serviceWait{border-top:2px solid #d885a1; background: #fdedf0;padding: 5px;cursor: pointer;}
|
.serviceIng{border-top:2px solid #569ff8; background: #bad8fc;padding: 5px;cursor: pointer;}
|
.serviceEnd{border-top:2px solid #dda451; background: #f8ecda;padding: 5px;cursor: pointer;}
|
.example{width: 80px ; height: 30px; margin: 2px 5px; text-align: center; line-height: 30px;border-top:none;display: inline-block;padding: 0;cursor:inherit;}
|
</style>
|
</head>
|
<body>
|
<div class="ibox-content" id="app" v-cloak>
|
<div class="row">
|
<form class="form-horizontal" id="dataform"
|
onsubmit="javascripr:return false;">
|
<div class="form-group">
|
<label class="col-md-1 control-label">预约日期:</label>
|
<div class="col-md-3">
|
<el-date-picker v-model="timeStr" @change="selectTime()"
|
type="date"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
<div class="col-md-6">
|
<span class="example notwork" >未上班</span>
|
<span class="example wait" >可预约</span>
|
<span class="example serviceWait" >已预约</span>
|
<span class="example serviceIng" >服务中</span>
|
<span class="example serviceEnd" >服务结束</span>
|
</div>
|
</div>
|
</form>
|
</div>
|
<div class="row" >
|
<div class="l_panel" >
|
<div class="name_cell" >姓名</div>
|
<div v-for="item in occupancyList " class="name_cell" >{{item.userName}}</div>
|
</div>
|
<div class="r_panel" >
|
<div class="c_row" :style="{width:(timeSpan*basePx)+'px'}">
|
<div class="head_cel" v-for="item in tableHead " >
|
{{item}}
|
</div>
|
</div>
|
<div v-for="item in occupancyList " class="c_row" :style="{width:(timeSpan*basePx)+'px'}" >
|
<div v-for="cell in item.items"
|
:class="{ 'content_cel': true,
|
'service': cell.workType==3,
|
'wait': cell.workType==2,
|
'notwork': cell.workType==1,
|
'serviceWait':cell.serviceState=='已预约',
|
'serviceIng':cell.serviceState=='服务中',
|
'serviceEnd':cell.serviceState=='服务结束'
|
}"
|
:style="{ width: (cell.spanLength*basePx) + 'px' }" >
|
|
<div title="点击查看详情" v-if="cell.workType==3" @click="openService(cell.serviceId)" >
|
<p>
|
<i class="iconfont iconayi" ></i> {{cell.vipName}}
|
<i class="iconfont iconshijian" ></i> {{cell.spanLength}}分钟
|
</p>
|
<p> <i class="iconfont iconxiangmu" ></i> {{cell.projName}}</p>
|
<p> <i class="iconfont icontubiaoCSban-" ></i> {{cell.bedName}}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
|
<script type="text/javascript">
|
|
var vipId = $.query.get("id");
|
console.log(vipId);
|
var app = new Vue({
|
el: '#app',
|
data: {
|
occupancyList: [],
|
tableHead: [],
|
timeStr: new Date(),
|
timeSpan:0,
|
//基础长度
|
basePx:5,
|
},
|
created: function () {
|
this.loadInfo();
|
},
|
|
mounted: function () {
|
|
},
|
|
methods: {
|
|
|
loadInfo: function () {
|
|
console.log('加载客户信息数据');
|
var _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
async: false,
|
url: basePath + '/admin/occupancy/getKanban?timeStr=' + MTools.formatDate(_this.timeStr, "yyyy-MM-dd"),
|
callback: function (data) {
|
_this.occupancyList = data.rows;
|
_this.tableHead = data.mapInfo.tableHead;
|
_this.timeSpan=data.mapInfo.timeSpan;
|
}
|
});
|
|
|
}
|
,
|
selectTime:function(){
|
this.loadInfo();
|
},
|
openService: function (id) {
|
layer.full(layer.open({
|
type : 2,
|
title : "服务单详情流水",
|
maxmin : true,
|
area : ['100%','100%'],
|
content : [ basePath + '/admin/projService/serviceInfo?pageFlae=pc&id=' + id ]
|
}));
|
|
},
|
|
|
|
},
|
filters:
|
{
|
format: function (value, patten) {
|
if (!value) return '';
|
return MTools.formatDate(value, patten)
|
}
|
,
|
}
|
,
|
|
})
|
|
|
</script>
|
</body>
|
</html>
|
