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

引导页

tall-guide-1
xuesinan 4 years ago
parent
b0a1281069
commit
a34beb60df
1 changed files with 354 additions and 536 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 890
      index.html

890
index.html
View File

@ -1,543 +1,361 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>插件模板</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.css">
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
<!-- <script type="text/javascript" src="plugin.js"></script> -->
</head>
<body>
<div class="">
<div class="h-10 w-full flex justify-center items-center border-b-2">项目名称</div>
<!-- 角色栏-->
<div class="w-full h-16 flex items-center border-b-2">
<div class="p-2 m-4">项目经理</div>
<div class="p-2 m-4 border-b-2 border-blue-500 text-blue-400">运维</div>
</div>
<div class="w-full p-4 bg-gray-100">
<!-- 日常任务面板-->
<div class="content p-3 h-46 bg-white rounded-lg">
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 bg-gray-100"></div>
</div>
</div>
<div class="task-bar h-100 w-full bg-gray-100 p-4">
<div class="flex mb-3">
<!-- <div class="flex flex-col items-center">
<div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
<div class="w-8 flex-1 flex flex-col items-center">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</div> -->
<div class="flex-1" style="width: 100%; height: 50rem;">
<div class="rounded-lg bg-white p-3" style="height: 100%;">
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
<div data-tname="考勤" data-pid="1472861916249726976" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:50px;width:100%">
<div data-root="p1472866674721169408" style="height: 100%; width: 100%;">
<div class="formulate-plan mt-3">
<div class="p-2 border border-gray-200 rounded-sm text-sm">
<div class="temp flex justify-between items-center w-full">
<p class="w-20 flex-shrink-0 text-gray-400">选择模板</p>
<div class="flex items-center">
<span class="sel-temp-name mr-1">请选择红头文件模板</span>
<img style="width: 15px;" src="https://www.tall.wiki/staticrec/icon/right.svg" />
</div>
</div>
<div class="mt-2 temp-list flex items-center">
</div>
</div>
<div class="temp-box" id="form">
</div>
<div class="mt-4 flex justify-center items-center w-full text-sm">
<!-- <button class="border border-blue-500 text-blue-500 rounded-sm" style="width: 45%; height: 34px; margin-right: 10%;" onclick="p1472866674721169408.bigImg()">预览</button> -->
<button class="border border-blue-500 bg-blue-500 text-white rounded-sm" style="width: 45%; height: 34px;" onclick="p1472866674721169408.submit()">提交</button>
</div>
<div class="img-preview fixed z-10 inset-0 bg-black bg-opacity-60 p-4 flex justify-center items-center" style="display: none;">
<img id="img" src="http://test.tall.wiki/staticrec/plan.png" />
</div>
</div>
</div>
</div>
<script>
document.getElementById("form").addEventListener("input", function(e){
p1472866674721169408.setData(e);
})
//事件委托就是利用事件冒泡特性，给父元素绑定事件
//parent.contains(child) 判断是否是某个节点的子节点
//e.target 触发事件的源节点
document.querySelector('.img-preview').onclick = function(e){
e = window.event || e;
let parentApp = document.getElementById('img');
if(!parentApp.contains(e.target)){
document.querySelector('.img-preview').style.display = 'none';
}
}
var p1472866674721169408 = {
token: '',
projectId: '',
roleId: '',
dom: '',
fileId: '', // 上传文件ID
filePath: '', // 上传文件路径
curStatus: 0, // 当前状态 0 未提交 1 已提交待审核
// curIndex: 0, // 当前选择的模板
tempList: [{name: '模板1', organizer: '国家体育总局社会体育指导中心', title: ''}, {name: '模板2', organizer: '', title: ''}, {name: '模板3', organizer: '', title: ''}],
tempData: {}, // 当前选择的模板数据
currTempData: {}, // 当前计划的模板数据
templateId: '', // 当前选择的模板ID
currTemplateId: '', // 当前计划的模板ID
init() {
this.dom = document.querySelector("div[data-root=p1472866674721169408]");
var domBox = this.dom.parentNode;
var title = this.dom.querySelector('.title');
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
this.projectId = domBox.getAttribute("data-pid");
this.roleId = domBox.getAttribute("data-rid");
// 初始化的时候 获取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) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.token = data.token;
// 查询培训计划
that.getTrainPlan()
} else {
console.log('msg: ', msg);
}
});
},
/**
* 查询当前培训计划
*/
getTrainPlan(){
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/training/get`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json; charset=utf-8'
}),
method: 'POST',
body: JSON.stringify({
param: {projectId: that.projectId}
})
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.templateId = data.templateId;
that.currTemplateId = data.templateId;
that.tempData = data.trainingInfos;
that.currTempData = data.trainingInfos;
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>插件模板</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.css">
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
<!-- <script type="text/javascript" src="plugin.js"></script> -->
</head>
<body>
<div class="">
<div class="h-10 w-full flex justify-center items-center border-b-2">项目名称</div>
<!-- 角色栏-->
<div class="w-full h-16 flex items-center border-b-2">
<div class="p-2 m-4">项目经理</div>
<div class="p-2 m-4 border-b-2 border-blue-500 text-blue-400">运维</div>
</div>
<div class="w-full p-4 bg-gray-100">
<!-- 日常任务面板-->
<div class="content p-3 h-46 bg-white rounded-lg">
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 bg-gray-100"></div>
</div>
</div>
<div class="task-bar h-100 w-full bg-gray-100 p-4">
<div class="flex mb-3">
<div class="flex-1" style="width: 100%; height: 50rem;">
<div class="rounded-lg bg-white p-3" style="height: 100%;">
<div data-tname="考勤" data-pid="1472861916249726976" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:300px;width:100%">
<div data-root="p1483375645978533888" style="height: 100%; width: 100%;">
<div id="outer" class="relative overflow-hidden w-full h-full">
<ul id="imgList" class="absolute left-0 list-none">
<li class="float-left bg-red-200">A<img src="img/1.jpg"/></li>
<li class="float-left bg-green-200">B<img src="img/2.jpg"/></li>
<li class="float-left bg-red-500">C<img src="img/3.jpg"/></li>
<li class="float-left bg-green-500">D<img src="img/4.jpg"/></li>
<li class="float-left bg-pink-500">E<img src="img/5.jpg"/></li>
</ul>
<div id="navContainer" class="absolute" style="bottom: 15px; z-index: 5;">
<!-- 我们就是导航点 -->
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
</div>
<!-- 我们是左右切换按钮 -->
<a href="javascript:;" id="picLbtn" class="absolute" style="left: 8px;" onclick="p1483375645978533888.clickPicLbtn()"><img src="img/pic/picLbtn.png"></a>
<a href="javascript:;" id="picRbtn" class="absolute" style="right: 8px;" onclick="p1483375645978533888.clickPicRbtn()"><img src="img/pic/picRbtn.png"></a>
</div>
</div>
</div>
<script>
var p1483375645978533888 = {
token: '',
projectId: '',
roleId: '',
dom: '',
startX: 0, //记录起始 刚刚触摸的点的位置 x的坐标
moveX: 0, //滑动的时候x的位置
distanceX: 0, //滑动的距离
isMove: false, //是否滑动了
index: 0,
width: 0, // 每一屏的宽度
timer: '',
imgList: '', // 轮播div
imgArr: '', // 所有图片
allA: '', // 所有圆点a标签
picLbtn: '', // 左按钮
picRbtn: '', // 右按钮
init() {
this.dom = document.querySelector("div[data-root=p1483375645978533888]");
var domBox = this.dom.parentNode;
// var title = this.dom.querySelector('.title');
let that = this;
var outer = that.dom.querySelector('#outer');
var navContainer = that.dom.querySelector('#navContainer');
that.imgList = that.dom.querySelector('#imgList');
that.allA = that.dom.querySelector('#navContainer').getElementsByTagName("a");
that.imgArr = that.dom.querySelectorAll("#imgList>li>img");
that.picLbtn = that.dom.querySelector("#picLbtn");
that.picRbtn = that.dom.querySelector("#picRbtn");
// 设置列表每一项的宽高
var lis = that.dom.querySelector('#imgList').getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = outer.offsetWidth + 'px';
lis[i].style.height = outer.offsetHeight + 'px';
}
/**
* 设置按钮居中
*（大div的宽度 - 导航区域的宽度）/ 2 = 导航区域的左边距
*/
navContainer.style.left = (outer.offsetWidth - navContainer.offsetWidth)/2 + "px";
//（大div的高度 - 按钮区域的高度）/ 2 = 按钮区域的上边距
var tempBtnTop = (outer.offsetHeight - that.picLbtn.offsetHeight)/2 + "px";
that.picLbtn.style.top = tempBtnTop;
that.picRbtn.style.top = tempBtnTop;
// 获取outer的宽
var getOuterWidth = that.getStyle(outer, "width");
// //去掉获取到的宽度值的px，使成为number类型的变量，方便计算
var widthObject = getOuterWidth.match(/\d*/);
that.width = widthObject[0];
// 根据图片的数量设置ul的总宽度
that.imgList.style.width = that.width * that.imgArr.length + "px";
//设置默认选中的效果
that.allA[that.index].style.backgroundColor = "black";
// 正常开启自动切换函数
// that.autoChange();
//--实现点击导航点切换图片
//--调用setA、move、autochange函数
for(var i = 0; i < that.allA.length; i++){
that.allA[i].num = i;
that.allA[i].onclick = function() {
clearInterval(that.timer);
that.index = this.num;
that.setRed();
that.move(that.imgList, "left", -that.width * that.index, 20, function(){
that.autoChange();
});
}
}
outer.addEventListener('touchstart', function(e){
clearInterval(that.timer); //--清除定时器,要记得事件结束之后再打开
that.startX = e.touches[0].clientX; //--触摸点的横坐标
});
outer.addEventListener('touchmove', function(e) {
that.moveX = e.touches[0].clientX; //--获取手指当前接触屏幕位置的横坐标
that.distanceX = that.moveX - that.startX; //--移动的距离=现在-初始
that.isMove = true;
console.log('touchmove', -that.width * that.index + that.distanceX)
that.move(that.imgList, "left", -that.width * that.index + that.distanceX, 20, function(){});
});
outer.addEventListener('touchend', function() {
//--滑动超过 1/3 才可以切换图片，否则即为无效，则吸附回去
//math.abs取绝对值
if (that.isMove && Math.abs(that.distanceX) > that.width/3) {
if (that.distanceX > 0 && that.index != 0) { //上一张
that.index = that.index - 1;
} else if (that.distanceX < 0 && that.index != that.imgArr.length - 2) { //下一张
that.index = that.index + 1;
}
that.move(that.imgList, "left", -that.width * that.index, 20, function(){});
} else if (that.isMove && Math.abs(that.distanceX) < that.width/3) {
that.move(that.imgList, "left", -that.width * that.index, 20, function(){});
}
that.setRed();
// that.autoChange();
});
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
// this.projectId = domBox.getAttribute("data-pid");
// this.roleId = domBox.getAttribute("data-rid");
// 初始化的时候 获取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) {
const {
success,
code,
data,
msg
} = res;
if (success && code === 200) {
that.token = data.token;
} else {
console.log('msg: ', msg);
}
});
},
// getCompteredStyle方法和current方法作用相同，都是获取dom对象的属性，前者不兼容ie8，后者不兼容firefox，这样写可以解决兼容性的问题。
getStyle(obj, name) {
if(window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
console.log('msg: ', msg);
return obj.currentStyle[name];
}
// 查询所有模板
that.getAllTemp();
});
},
/**
* 获取所有模板
*/
getAllTemp() {
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/training/template`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json; charset=utf-8'
}),
method: 'POST',
body: JSON.stringify({
param: {projectId: that.projectId}
})
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
for (let i = 0; i < data.length; i++) {
if (data[i].type === 0) {
that.tempList = data[i].templateList;
}
}
that.renderTemp(); // 渲染模板
} else {
console.log('msg: ', msg);
}
});
},
/**
* 选择模板
*/
selTemp(index) {
let obj = this.tempList[index];
let tempName = document.querySelector('.sel-temp-name');
tempName.innerHTML = obj.name;
let temps = document.querySelectorAll('.temp-item');
for (let i = 0; i < temps.length; i++) {
temps[i].classList.remove("border-blue-400");
temps[i].classList.add("border-gray-200");
}
temps[index].classList.add("border-blue-400");
this.templateId = obj.id;
if (this.currTemplateId === obj.id) {
this.tempData = this.currTempData;
this.renderTempData(); // 渲染模板数据
} else {
// this.curIndex = index;
this.getTempData(obj.id);
}
},
// 根据模板id获取模板数据
getTempData(id) {
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/training/templateId`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json; charset=utf-8'
}),
method: 'POST',
body: JSON.stringify({
param: {id: id}
})
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
for (let i = 0; i < data.length; i++) {
if (data[i].type === 0) {
that.tempList = data[i].templateList;
}
}
that.tempData = data;
that.renderTempData(); // 渲染模板数据
} else {
console.log('msg: ', msg);
}
});
},
// 渲染模板
renderTemp() {
let that = this;
let html = '';
for (let j = 0; j < that.tempList.length; j++) {
let d = that.tempList[j];
html += `<div class="temp-item border border-gray-200 flex justify-center items-center ${j > 2 ? 'mt-2' : ''}" style="width: 30%; height: 100px; ${j % 3 == 2 ? '' : 'margin-right: 5%;'}" onclick="p1472866674721169408.selTemp(${j})">
<img style="max-width: 100%; max-height: 100%;" src="${d.path}" />
</div>`;
}
that.dom.querySelector('.temp-list').innerHTML = html;
for (let j = 0; j < that.tempList.length; j++) {
if (that.tempList[j].id === that.currTemplateId) {
that.selTemp(j);
}
}
},
// 渲染模板数据
renderTempData() {
let that = this;
let html = '';
for (let i = 0; i < that.tempData.length; i++) {
let data = that.tempData[i];
if (data.type === 1) {
html += `<div class="ques-box mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
<div class="flex justify-between items-center w-full" style="height: 20px;">
<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
<input data-id="${data.questionId}" class="train-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" value="${data.answer ? data.answer : ''}" placeholder="请输入${data.question}" />
</div>
</div>`;
} else if (data.type === 2) {
html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full h-16 border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
<textarea data-id="${data.questionId}" class="train-desc text-right outline-none" style="width: calc(100% - 6rem)" placeholder="请输入${data.question}">${data.answer ? data.answer : ''}</textarea>
</div>`;
} else if (data.type === 3) {
html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">`;
html += `<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>`;
html += `<div class="flex items-center flex-wrap justify-end">`;
for (let j = 0; j < data.optionList.length; j++) {
html += `<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" ${data.optionList[j].choose ? 'checked' : ''} data-id="${data.questionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
}
html += `</div>`;
html += `</div>`;
} else if (data.type === 4) {
html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">`;
html += `<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>`;
html += `<div class="flex items-center flex-wrap justify-end">`;
for (let j = 0; j < data.optionList.length; j++) {
html += `<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" ${data.optionList[j].choose ? 'checked' : ''} data-id="${data.questionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
}
html += `</div>`;
html += `</div>`;
} else if (data.type === 5) {
data.answer = '1';
html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">`;
html += `<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>`;
html += `<select id="group" data-id="${data.questionId}" value="${data.answer}">`;
for (let j = 0; j < data.optionList.length; j++) {
html += `<option value="${data.optionList[j].submitValue}" ${data.optionList[j].choose ? 'selected' : ''}>${data.optionList[j].showValue}</option>`;
}
html += `</select>`;
html += `</div>`;
} else if (data.type === 6) {
html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
<div class="flex justify-between items-center w-full" style="height: 20px;">
<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
<input class="train-start-time text-right outline-none" data-id="${data.questionId}" type="date" value="${data.answer}" placeholder="请选择${data.question}">
</div>
</div>`;
} else if (data.type === 7) {
html += `<div class="file-upload mt-2.5 px-2 flex justify-between items-center w-full h-8 border border-gray-200 rounded-sm text-sm">
<p class="file-name text-gray-400 truncate" style="width: calc(100% - 50px);">${data.answer ? data.answer : '文件上传'}</p>
<div class="relative flex items-center">
<button>上传</button>
<input class="input-file absolute z-10 opacity-0" type="file" data-id="${data.questionId}" name="files" id="file" multiple>
</div>
</div>`;
}
}
that.dom.querySelector('.temp-box').innerHTML = html;
},
// 监听input框的值
setData(e) {
let that = this;
var event = e || window.event;
var tar = event.target || event.srcElement;
let id = tar.getAttribute("data-id");
let arr = this.tempData;
arr.forEach(function(item, index) {
if (item.type === 1 || item.type === 2 || item.type === 3 || item.type === 5 || item.type === 6) {
if (item.questionId == id) {
item.answer = tar.value;
}
} else if (item.type === 4) {
if (item.questionId == id) {
item.optionList.forEach(v => {
if (v.submitValue === tar.value) {
v.choose = v.choose === 1 ? 0 : 1;
}
})
item.answer = '';
item.optionList.forEach(v => {
if (v.choose === 1) {
item.answer += ',' + v.submitValue;
}
})
}
} else if (item.type === 7) {
tar.addEventListener('change', function(event) {
var files = event.target.files;
if (files && files.length > 0) {
var formData = new FormData();
formData.append('param', files[0]);
that.upload(formData, index);
}
}, false);
}
});
},
// 预览
bigImg() {
document.querySelector('.img-preview').style.display = 'flex';
},
submit() {
let that = this;
console.log("that.tempData",that.tempData)
let questionList = [], arr = that.tempData;
if (!arr.length) {
alert("请选择红头文件模板");
return false;
}
arr.forEach(item => {
if (!item.answer) {
alert("请填写" + item.question);
return false;
}
})
arr.forEach(function(item, index) {
let obj = { questionId: '', answerList: [] };
if (item.type === 1 || item.type === 2 || item.type === 3 || item.type === 6 || item.type === 7) {
obj.questionId = item.questionId;
obj.answerList.push(item.answer);
} else if (item.type === 4) {
obj.questionId = item.questionId;
item.optionList.forEach(v => {
if (v.choose === 1) {
obj.answerList.push(v.submitValue);
}
})
} else if (item.type === 5) {
obj.questionId = item.questionId;
obj.answerList.push(item.answer ? item.answer : 1);
},
move(obj, attr, target, speed, callback) {
let that = this;
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(that.getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
questionList.push(obj);
})
console.log('questionList', questionList)
fetch(`https://test.tall.wiki/gateway/sports/training/save`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json; charset=utf-8'
}),
method: 'POST',
body: JSON.stringify({
param: {
projectId: that.projectId,
questionList,
templateId: that.templateId
}
}),
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.getTrainPlan(); // 重新调用查询培训计划方法，查询提交后的红头文件
} else {
console.log('msg: ', msg);
}
});
},
// 文件上传
upload(formData, index){
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/file/upload`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token
}),
method: 'POST',
body: formData,
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.fileId = data.fileId;
that.filePath = data.path;
let fileName = that.dom.querySelector('.file-name');
fileName.innerHTML = data.name;
that.tempData[index].answer = data.path;
} else {
console.log('msg: ', msg);
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(that.getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
},
autoChange() {
//--这个定时器可以控制图片停留的时间
//--每隔三秒执行一次，不断的被执行图片就不断切换
let that = this;
that.timer = setInterval(function() {
that.index++;
//--index对长度取余，就可以让index一直在范围内循环
that.index %= that.imgArr.length;
//--这个move实现自动切换的平移效果
that.move(that.imgList, "left", -that.width * that.index, 20, function() {
//--执行move函数时调用set方法，将图片颜色改变，并且首末过渡
that.setA();
that.setRed();
});
},3000);
},
setA(){
if(this.index > this.imgArr.length - 1){
this.index = 0;
this.imgList.style.left = 0;
}
},
setRed(){
for(var i=0 ; i<this.allA.length ; i++){
//--去掉内联样式里的颜色，显示样式表里的红色
//--如果这里不这么写的话，他就会每次遍历到某个图片，就会把他的导航点变成黑色，不会变回来
//--这么写每次调用都会先把大家都变成红色，再把需要的变成黑色
this.allA[i].style.backgroundColor = "";
}
});
},
}
p1472866674721169408.init()
</script>
</div>
</div>
</div>
<div class="flex mb-3">
<!-- 序号-->
<div class="flex flex-col items-center">
<div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
<div class="w-8 flex-1 flex flex-col items-center">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</div>
<div class="flex-1">
<!-- 定期任务面板-->
<div class="rounded-lg ml-4 bg-white p-3">
<!-- 示例插件1-->
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
<!-- 示例插件2 id=100-->
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
<script>
const p100 = {
name: 'hello tall plugin',
show() {
alert(this.name)
}
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
.content, .task-bar{
overflow-y: scroll;
}
.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
display: none;
}
</style>
this.allA[this.index].style.backgroundColor = "black";
},
clickPicLbtn() {
let that = this;
clearInterval(that.timer);
if (that.index != 0){
that.index = that.index - 1;
}
that.setRed();
that.move(that.imgList, "left", -that.width * that.index, 20, function(){
that.autoChange();
});
},
clickPicRbtn() {
let that = this;
clearInterval(that.timer);
if (that.index != that.allA.length - 1) {
that.index = that.index + 1;
}
that.setRed();
that.move(that.imgList, "left", -that.width * that.index, 20, function(){
that.autoChange();
});
}
}
p1483375645978533888.init()
</script>
</div>
</div>
</div>
<div class="flex mb-3">
<!-- 序号-->
<div class="flex flex-col items-center">
<div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
<div class="w-8 flex-1 flex flex-col items-center">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</div>
<div class="flex-1">
<!-- 定期任务面板-->
<div class="rounded-lg ml-4 bg-white p-3">
<!-- 示例插件1-->
<button class="bg-blue-500 py-2 px-5 rounded text-white"
onclick="alert('hello')">测试组建1</button>
<!-- 示例插件2 id=100-->
<button class="bg-blue-500 py-2 px-5 rounded text-white"
onclick="p100.show()">测试组建2</button>
<script>
const p100 = {
name: 'hello tall plugin',
show() {
alert(this.name)
}
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
.content,
.task-bar {
overflow-y: scroll;
}
.content::-webkit-scrollbar,
.task-bar::-webkit-scrollbar {
display: none;
}
</style>
</html>

Write Preview
Loading…
Cancel
Save