wally
/
plugin-templete
1
0
Fork 1
Code Issues Releases Wiki Activity
Browse Source

详情页公用插件

detailsPage
aBin 4 years ago
parent
1080d6c619
commit
aafca379a2
1 changed files with 16 additions and 323 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 339
      index.html

339
index.html
View File

@ -47,351 +47,44 @@
<!-- 示例插件2 id=100--> <!-- 示例插件2 id=100-->
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button> <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
<div data-tname="静脉溶栓" data-pid="1420652719055839232" data-uid="1323567842540523520" data-rid="rid333" data-tid="tid444" data-did="did555" data-pstart="1627560659000" data-rstart="1627564259000" style="height:50px;width:100%"> <div data-tname="静脉溶栓" data-param='{"url":"http://www.baidu.com", "type":0,"code":"SZK"}' data-pid="1420652719055839232" data-uid="1323567842540523520" data-rid="rid333" data-tid="tid444" data-did="did555" data-pstart="1627560659000" data-rstart="1627564259000" style="height:50px;width:100%">
<!-- 到场插件 --> <!-- 详情页插件 -->
<div data-root="p1419895941603008512" class="flex flex-row items-center" style="height:100%;width:100%;"> <div data-root="p1432643387798069249" class="flex flex-row items-center" style="height:100%;width:100%;">
<div class="flex-1 title" onclick="p1419895941603008512.jumpDetails(this)"></div> <div class="flex-1 title" onclick="p1432643387798069249.jumpDetails(this)"></div>
<div class="flex flex-nowrap startBtn mr-2"> <div class="flex flex-row-reverse items-center" onclick="p1432643387798069249.jumpDetails(this)">
<button class="bg-blue-500 text-xs rounded-full py-1 px-5 text-white" onclick="p1419895941603008512.show(this)">开始</button>
</div>
<div class="flex flex-nowrap statusBtn mr-2 font-bold" style="display:none">
<span class="mr-3 startTime" onclick="p1419895941603008512.show(this)"></span>
<span class="text-red-500 disparity"></span>
</div>
<div class="flex flex-row-reverse items-center" onclick="p1419895941603008512.jumpDetails(this)">
<img style="height:16px" src="https://www.tall.wiki/staticrec/photos/right.png"> <img style="height:16px" src="https://www.tall.wiki/staticrec/photos/right.png">
</div> </div>
<div class="time-box w-screen h-screen fixed z-10" style="background: rgba(0,0,0,0.65);top:0;left:0;display:none">
<div class="flex flex-col absolute w-full" style="background:#fff;bottom: 0;height:300px;border-radius:8px 8px 0 0">
<div class="flex justify-between p-2 border-gray-200 border-b-2" style="height:44px;">
<div class="text-gray-500" onclick="p1419895941603008512.cancelTime()">取消</div>
<div>溶栓时间</div>
<div class="text-blue-500" onclick="p1419895941603008512.changeTime()">确定</div>
</div>
<div class="flex flex-1 items-center overflow-hidden" style="padding:0 16px">
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute w-full" style="right:-8px">
<div class="h-full mx-auto year-box overflow-y-scroll" style="padding: 116px 16px 116px 0"></div>
</div>
</div>
<div class="flex flex-row text-center">
年
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute w-full" style="right:-8px">
<div class="h-full month-box mx-auto overflow-y-scroll" style="padding: 116px 16px 116px 0"></div>
</div>
</div>
<div class="flex flex-row text-center">
月
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute w-full" style="right:-8px">
<div class="h-full day-box mx-auto overflow-y-scroll" style="padding: 116px 16px 116px 0"></div>
</div>
</div>
<div class="flex flex-row text-center">
日
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute w-full" style="right:-8px">
<div class="h-full hour-box mx-auto overflow-y-scroll" style="padding: 116px 16px 116px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
时
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute w-full" style="right:-8px">
<div class="h-full min-box mx-auto overflow-y-scroll" style="padding: 116px 16px 116px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
分
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<script> <script>
var p1419895941603008512 = { var p1432643387798069249 = {
token: '',
dom: '',
projectId: '',
planStart: '',
realStart: '',
chooseTimeValue: 0,
init() { init() {
this.dom = document.querySelector("div[data-root=p1419895941603008512]"); this.dom = document.querySelector("div[data-root=p1432643387798069249]");
var domBox = this.dom.parentNode; var domBox = this.dom.parentNode;
var title = this.dom.querySelector('.title'); var title = this.dom.querySelector('.title');
title.innerHTML = domBox.getAttribute('data-tname') title.innerHTML = domBox.getAttribute('data-tname')
this.planStart = domBox.getAttribute('data-pstart')
this.realStart = domBox.getAttribute('data-rstart')
this.chooseTimeValue = +this.realStart
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
this.projectId = domBox.getAttribute("data-pid");
// 初始化的时候 获取token
this.getTokenByUserId(userId);
},
// 获取token
getTokenByUserId(userId){
var that = this
fetch(`https://www.tall.wiki/gateway/tall/v1.0/users/userId?userId=${userId}`)
.then(function(response) {
return response.json();
})
.then(function(res) {
var { success, code, data, msg } = res;
if (success && code === 200) {
that.token = data.token;
} else {
alert(msg || '获取失败')
}
});
},
// 选择时间 添加
async show(){
var timeBox = this.dom.querySelector('.time-box');
timeBox.style.display = 'block'
this.setTimeData()
},
/**
* 确定 批量提交急救信息
* @param { Array } codeAndAnswerList code和答案
* @param { String } projectId 项目ID
* @param { Number } codeAndAnswerList 提交人类型（0平车 1人）
*/
choose(time){
var that = this;
var params = JSON.stringify({
param: {
codeAndAnswerList: [
{
answer: [time],
questionCode: 'JMRSSJ'
}
],
projectId: that.projectId,
userType: 0
}
});
fetch('https://www.tall.wiki/gateway/qcp/v3.0/patient/aidRecord', {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json;charset=utf-8'
}),
method: 'POST',
mode: 'cors',
body: params
}).then(function(response) {
return response.json();
}).catch(function(error){
console.error('Error:', error)
// TODO: 测试数据
that.setDate()
// TODO:
}).then(function(res){
var { success, code, data, msg } = res;
if (success && code === 200) {
that.setDate()
} else {
alert(msg || '添加失败')
}
})
},
// 界面渲染
setDate(res) {
var { dom } = this;
var startBtn = dom.querySelector('.startBtn');
var statusBtn = dom.querySelector('.statusBtn');
var startTime = dom.querySelector('.startTime');
var disparity = dom.querySelector('.disparity');
startBtn.style.display='none';
statusBtn.style.display='block';
var ms = (+this.planStart) - (+this.chooseTimeValue); //时间差的毫秒数
var morbidityTime = Math.ceil(ms/1000/60);
disparity.innerHTML = morbidityTime + "min"
startTime.innerHTML = this.setTime(this.chooseTimeValue)
if(morbidityTime >= 0){
disparity.className="text-red-500 disparity"
}else{
disparity.className="text-green-500 disparity"
}
},
// 转化时间格式
setTime(timestamp) {
let time = new Date(+timestamp)
let year = time.getFullYear()
var month = (time.getMonth() + 1).toString().padStart(2, '0')
var date = (time.getDate()).toString().padStart(2, '0')
var hours = (time.getHours()).toString().padStart(2, '0')
var minute = (time.getMinutes()).toString().padStart(2, '0')
var second = (time.getSeconds()).toString().padStart(2, '0')
return hours + ':' + minute
}, },
// 开始到场 // 开始到场
jumpDetails(that) { jumpDetails(that) {
var param = that.parentNode.parentNode.getAttribute('data-param');
var paramData = JSON.parse(param)
let url = paramData.url
var pId = that.parentNode.parentNode.getAttribute('data-pid'); var pId = that.parentNode.parentNode.getAttribute('data-pid');
var rId = that.parentNode.parentNode.getAttribute('data-rid'); var rId = that.parentNode.parentNode.getAttribute('data-rid');
var uId = that.parentNode.parentNode.getAttribute('data-uid'); var uId = that.parentNode.parentNode.getAttribute('data-uid');
var tId = that.parentNode.parentNode.getAttribute('data-tid'); var tId = that.parentNode.parentNode.getAttribute('data-tid');
location.href = `https://www.tall.wiki/qc/vein?projectId=${pId}&roleId=${rId}&userId=${uId}&id=${tId}`; let jumpUrl = `${url}?projectId=${pId}&roleId=${rId}&userId=${uId}&id=${tId}`;
}, for(let key in paramData) {
if(key !== 'url'){
// 取消时间 jumpUrl += `&${key}=${paramData[key]}`
cancelTime() {
var timeBox = this.dom.querySelector('.time-box');
timeBox.style.display = 'none'
},
// 确定时间
async changeTime() {
var hourDom = this.dom.querySelector('.hour-box');
var minDom = this.dom.querySelector('.min-box');
var yearDom = this.dom.querySelector('.year-box');
var monthDom = this.dom.querySelector('.month-box');
var dayDom = this.dom.querySelector('.day-box');
var year = 2021 - Math.round(yearDom.scrollTop / 26)
let month = Math.round(monthDom.scrollTop / 26) + 1
let day = Math.round(dayDom.scrollTop / 26) + 1
if (month === 2) {
if ( (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0 && year % 4000 !== 0) ) {
if(day > 29) {
day = 29
}
} else {
if(day > 28) {
day = 28
}
} }
} else {
if (month === 2 || month === 4 || month === 6 || month === 9 || month === 11) {
if(day > 30) {
day = 30
}
} else {
if(day > 31) {
day = 31
}
}
}
let hour = Math.round(hourDom.scrollTop / 26)
let min = Math.round(minDom.scrollTop / 26)
if(month<10) {
month = '0' + month
}
if(day<10) {
day = '0' + day
}
if(hour<10) {
hour = '0' + hour
}
if(min<10) {
min = '0' + min
}
var chooseTime = `${year}-${month}-${day} ${hour}:${min}`
this.chooseTimeValue = new Date(chooseTime.replace(/-/g,'/')).getTime()
if(chooseTime){
await this.choose(new Date(chooseTime).getTime())
this.cancelTime()
} }
location.href = jumpUrl
}, },
// 设置时间数据
setTimeData(){
var hourDom = this.dom.querySelector('.hour-box');
var minDom = this.dom.querySelector('.min-box');
var yearDom = this.dom.querySelector('.year-box');
var monthDom = this.dom.querySelector('.month-box');
var dateDom = this.dom.querySelector('.day-box');
// 清空
hourDom.innerHTML = '';
minDom.innerHTML = '';
yearDom.innerHTML = '';
monthDom.innerHTML = '';
dateDom.innerHTML = '';
var nowYear = new Date().getFullYear();
var nowMonth = new Date().getMonth();
var nowDay = new Date().getDate()-1;
var nowHour = new Date().getHours();
var nowMin = new Date().getMinutes();
var yearTop = 0;
var monthTop = 0;
var dayTop = 0;
var hourTop = 0;
var minTop = 0;
/* 生成小时数组 */
for(let i=0;i<24;i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
hourDom.appendChild(div);
if(nowHour === i) {
hourTop = i*26
}
}
/* 生成分钟数组 */
for(let i=0;i<60;i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
minDom.appendChild(div);
if(nowMin === i) {
minTop = i*26
}
}
/* 生成年数组 */
var my = new Date();
var endYear = my.getFullYear();// 获取当前年份
for (var i = endYear; i > 1899; i--) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
yearDom.appendChild(div);
}
/* 生成月数组 */
for (var i = 1; i < 13; i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
monthDom.appendChild(div);
if(nowMonth === i) {
monthTop = i*26
}
}
/* 生成日数组 */
for (var i = 1; i < 32; i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
dateDom.appendChild(div);
if(nowDay === i) {
dayTop = i*26
}
}
hourDom.scrollTop = hourTop
minDom.scrollTop = minTop
monthDom.scrollTop = monthTop
dateDom.scrollTop = dayTop
}
} }
p1419895941603008512.init() p1432643387798069249.init()
</script> </script>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save