379 lines
10 KiB
Vue
379 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="home">
|
|||
|
|
<nav-bar/>
|
|||
|
|
<div class="bj"></div>
|
|||
|
|
<ul class="timeSlelct">
|
|||
|
|
<li
|
|||
|
|
v-for="(item, index) in same_week"
|
|||
|
|
:class="{ active: same_day == item.date }"
|
|||
|
|
@click="timeSlelct(item)"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div>{{ item.week }}</div>
|
|||
|
|
<div>{{ item.name }}</div>
|
|||
|
|
<span></span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<div class="list" v-if="panbanList.length > 0">
|
|||
|
|
<ul>
|
|||
|
|
<li
|
|||
|
|
v-for="(item, index) in panbanList"
|
|||
|
|
:key="index"
|
|||
|
|
@click="handleDetail(item)"
|
|||
|
|
>
|
|||
|
|
<a>
|
|||
|
|
<h2><img src="../assets/member_tx.png"/></h2>
|
|||
|
|
<!-- <h2><img :src="item.img" /></h2> -->
|
|||
|
|
<!-- :class="{'on':item.APPOINT_COUNT=='0'}" -->
|
|||
|
|
<h3>
|
|||
|
|
{{ item.DoctorCode }}
|
|||
|
|
<span>{{ item.DoctorTitle }}</span>
|
|||
|
|
<!-- <em>余{{ item.APPOINT_COUNT.__text || '1000' }}</em> -->
|
|||
|
|
<p>{{ item.DeptName }}</p>
|
|||
|
|
</h3>
|
|||
|
|
<h3 class="on">
|
|||
|
|
<van-cell
|
|||
|
|
:title="
|
|||
|
|
getTime(item.TimeInterval) +
|
|||
|
|
' 余' +
|
|||
|
|
(item.RegisterCount === 0 ? '9999' : item.RegisterCount)
|
|||
|
|
"
|
|||
|
|
/>
|
|||
|
|
</h3>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<van-empty description="暂无数据" v-else style="padding-top: 90px"/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {apiGetAppointSchedulesMark} from "@/request/api.js";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
active: 0,
|
|||
|
|
time: "",
|
|||
|
|
|
|||
|
|
paihao: {},
|
|||
|
|
|
|||
|
|
today: "",
|
|||
|
|
week: [],
|
|||
|
|
same_week: [], //保存当前最新的时间
|
|||
|
|
same_day: "", //当天的时间
|
|||
|
|
overshow: false,
|
|||
|
|
|
|||
|
|
panbanList: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
// this.getpbryList()
|
|||
|
|
this.getWeek();
|
|||
|
|
// this.onLoad()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getTime(time) {
|
|||
|
|
switch (time) {
|
|||
|
|
case "AM":
|
|||
|
|
return "上午";
|
|||
|
|
case "PM":
|
|||
|
|
return "下午";
|
|||
|
|
case "AL":
|
|||
|
|
return "白天";
|
|||
|
|
case "NT":
|
|||
|
|
return "昼夜";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleDetail(data) {
|
|||
|
|
// data.DOCTOR_CODE
|
|||
|
|
this.paihao.d = data.DoctorCode; //医生编号
|
|||
|
|
this.paihao.n = data.DoctorName; //医生姓名
|
|||
|
|
this.paihao.b = data.DoctorTitle;
|
|||
|
|
console.log(this.yuyue.DoctorCode);
|
|||
|
|
//this.yuyue.p = data.DeptName; //医生科室
|
|||
|
|
sessionStorage.setItem("paihao", JSON.stringify(this.paihao));
|
|||
|
|
// this.$router.push({path: "/Ysgh"});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
timeSlelct(item) {
|
|||
|
|
this.same_day = item.date;
|
|||
|
|
this.paihao.t = item.date2;
|
|||
|
|
if (item.date == this.today) {
|
|||
|
|
this.paihao.z = 1;
|
|||
|
|
} else {
|
|||
|
|
this.paihao.z = 2;
|
|||
|
|
}
|
|||
|
|
// console.log(this.yuyue);
|
|||
|
|
this.getpbryList();
|
|||
|
|
// console.log(item);
|
|||
|
|
// console.log(this.same_day.replace(new RegExp('/','g'),'-'))
|
|||
|
|
},
|
|||
|
|
getWeek() {
|
|||
|
|
// 默认显示当天前一周的数据
|
|||
|
|
let data = [];
|
|||
|
|
this.start = this.getDay(+7);
|
|||
|
|
this.end = this.getDay();
|
|||
|
|
for (let i = 13; i >= 0; i--) {
|
|||
|
|
data.push(this.getDay(+i));
|
|||
|
|
}
|
|||
|
|
var date = data.reverse(); //得出一周的日期进行排序
|
|||
|
|
this.week = date;
|
|||
|
|
var date = this.week;
|
|||
|
|
var pkc = []; /* 用于存储展示的日期数据 */
|
|||
|
|
var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
|||
|
|
date.forEach((item, index) => {
|
|||
|
|
//循坏日期
|
|||
|
|
var f = new Date(item);
|
|||
|
|
var week = f.getDay(); //计算出星期几
|
|||
|
|
var str1 = item.split("/");
|
|||
|
|
var strs =
|
|||
|
|
(str1[1] >= 10 ? str1[1] : "0" + str1[1]) +
|
|||
|
|
"." +
|
|||
|
|
(str1[2] >= 10 ? str1[2] : "0" + str1[2]);
|
|||
|
|
var yyyyddmmdate =
|
|||
|
|
str1[0] +
|
|||
|
|
"-" +
|
|||
|
|
(str1[1] >= 10 ? str1[1] : "0" + str1[1]) +
|
|||
|
|
"-" +
|
|||
|
|
(str1[2] >= 10 ? str1[2] : "0" + str1[2]);
|
|||
|
|
var weeks = weekday[week]; /* 将计算出来的时间带入数字得出中文 */
|
|||
|
|
var time = Math.round(new Date(item) / 1000); //时间戳转换
|
|||
|
|
var s = {}; //用于存储每个日期对象
|
|||
|
|
s.date = item;
|
|||
|
|
s.date2 = yyyyddmmdate;
|
|||
|
|
s.name = strs;
|
|||
|
|
s.week = weeks;
|
|||
|
|
s.times = time;
|
|||
|
|
pkc.push(s);
|
|||
|
|
});
|
|||
|
|
this.same_week = pkc;
|
|||
|
|
// console.log(this.same_week)
|
|||
|
|
//pkc存储着今天的年月日星期几，时间戳等
|
|||
|
|
this.same_day = this.today = pkc[0].date; //今天的数据
|
|||
|
|
this.paihao.t = pkc[0].date2;
|
|||
|
|
// console.log(this.same_day)
|
|||
|
|
this.paihao.z = 1;
|
|||
|
|
|
|||
|
|
this.getpbryList();
|
|||
|
|
// console.log(this.same_day)
|
|||
|
|
},
|
|||
|
|
getDay(day) {
|
|||
|
|
var today = new Date();
|
|||
|
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
|
|||
|
|
today.setTime(targetday_milliseconds);
|
|||
|
|
var tYear = today.getFullYear();
|
|||
|
|
var tMonth = today.getMonth();
|
|||
|
|
var tDate = today.getDate();
|
|||
|
|
tMonth = this.doHandleMonth(tMonth + 1);
|
|||
|
|
tDate = this.doHandleMonth(tDate);
|
|||
|
|
return tYear + "/" + tMonth + "/" + tDate;
|
|||
|
|
},
|
|||
|
|
doHandleMonth(month) {
|
|||
|
|
var m = month;
|
|||
|
|
if (month.toString().length == 1) {
|
|||
|
|
m = month;
|
|||
|
|
}
|
|||
|
|
return m;
|
|||
|
|
},
|
|||
|
|
formateDateTime(time, fmt) {
|
|||
|
|
let o = {
|
|||
|
|
'M+': time.getMonth() + 1, // 月份
|
|||
|
|
'd+': time.getDate(), // 日
|
|||
|
|
'h+': time.getHours(), // 小时
|
|||
|
|
'm+': time.getMinutes(), // 分
|
|||
|
|
's+': time.getSeconds(), // 秒
|
|||
|
|
'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
|
|||
|
|
S: time.getMilliseconds(), // 毫秒
|
|||
|
|
};
|
|||
|
|
if (/(y+)/.test(fmt)) {
|
|||
|
|
fmt = fmt.replace(RegExp.$1, (time.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|||
|
|
}
|
|||
|
|
for (var k in o) {
|
|||
|
|
if (new RegExp('(' + k + ')').test(fmt))
|
|||
|
|
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
|
|||
|
|
}
|
|||
|
|
return fmt;
|
|||
|
|
},
|
|||
|
|
getpbryList() {
|
|||
|
|
|
|||
|
|
let pbtemp = sessionStorage.getItem('paiban')
|
|||
|
|
var parsepb = JSON.parse(pbtemp);
|
|||
|
|
if (pbtemp === null) {//如果没有缓存数据，说明没有调用接口
|
|||
|
|
|
|||
|
|
|
|||
|
|
let param = {
|
|||
|
|
SearchType: '2',
|
|||
|
|
DepartCode: ''
|
|||
|
|
}
|
|||
|
|
apiGetAppointSchedulesMark(param).then(r => {
|
|||
|
|
let jsonObj = this.$x2js.xml2js(r.data);
|
|||
|
|
let jsonObj2 = this.$x2js.xml2js(
|
|||
|
|
jsonObj.Envelope.Body.MOP_OutpDoctorQueryResponse
|
|||
|
|
.MOP_OutpDoctorQueryResult
|
|||
|
|
);
|
|||
|
|
let paiban = jsonObj2.response.data.data_row
|
|||
|
|
sessionStorage.setItem("paiban", JSON.stringify(paiban));
|
|||
|
|
let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
|
|||
|
|
sessionStorage.setItem("paibandate", old_date)
|
|||
|
|
// let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
|
|||
|
|
// sessionStorage.setItem("paibandate", new Date())
|
|||
|
|
|
|||
|
|
this.panbanList = paiban.filter((item, index) => {
|
|||
|
|
return item.Registerdate === this.paihao.t
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
let new_date = new Date()
|
|||
|
|
let oldDate = new Date(sessionStorage.getItem('paibandate'))
|
|||
|
|
// 3,600,000 一个小时的时间，更新一次
|
|||
|
|
if (new_date.getTime() - oldDate.getTime() >= 3600000) {
|
|||
|
|
let param = {
|
|||
|
|
SearchType: '2',
|
|||
|
|
DepartCode: ''
|
|||
|
|
}
|
|||
|
|
apiGetAppointSchedulesMark(param).then(r => {
|
|||
|
|
let jsonObj = this.$x2js.xml2js(r.data);
|
|||
|
|
let jsonObj2 = this.$x2js.xml2js(
|
|||
|
|
jsonObj.Envelope.Body.MOP_OutpDoctorQueryResponse
|
|||
|
|
.MOP_OutpDoctorQueryResult
|
|||
|
|
);
|
|||
|
|
let paiban = jsonObj2.response.data.data_row
|
|||
|
|
sessionStorage.setItem("paiban", JSON.stringify(paiban));
|
|||
|
|
let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
|
|||
|
|
sessionStorage.setItem("paibandate", old_date)
|
|||
|
|
// let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
|
|||
|
|
// sessionStorage.setItem("paibandate", new Date())
|
|||
|
|
|
|||
|
|
this.panbanList = paiban.filter((item, index) => {
|
|||
|
|
return item.Registerdate === this.paihao.t
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.panbanList = parsepb.filter((item, index) => {
|
|||
|
|
return item.Registerdate === this.paihao.t
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//首先把数据缓存起来，之后从缓存中按照日期查找数据
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
::-webkit-scrollbar {
|
|||
|
|
width: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul.timeSlelct {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1.8rem;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
padding: 0.25rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: rgba(22, 104, 204, 0.2);
|
|||
|
|
position: relative;
|
|||
|
|
border-left: 1px solid #f5f5f5;
|
|||
|
|
border-radius: 0.25rem;
|
|||
|
|
margin: 0.05rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
li:nth-child(1) {
|
|||
|
|
border-left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
background-color: #166bcc;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bj {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
position: fixed;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
margin-top: 1.75rem;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list ul li {
|
|||
|
|
background: #fff;
|
|||
|
|
margin-bottom: 0.25rem;
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
display: flex;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0.375rem;
|
|||
|
|
|
|||
|
|
h2 img {
|
|||
|
|
width: 1.5rem;
|
|||
|
|
height: 1.5rem;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 30px;
|
|||
|
|
position: relative;
|
|||
|
|
// width: calc(100% - 118px);
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #666;
|
|||
|
|
padding-left: 0.125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 0.375rem;
|
|||
|
|
color: #999;
|
|||
|
|
display: block;
|
|||
|
|
padding-top: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
em {
|
|||
|
|
width: 1rem;
|
|||
|
|
height: 0.375rem;
|
|||
|
|
line-height: 0.375rem;
|
|||
|
|
background: linear-gradient(-90deg, #ff464f, #ff6e77);
|
|||
|
|
border-radius: 0.125rem;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
font-size: 0.25rem;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3.on em {
|
|||
|
|
background: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|