160 lines
5.5 KiB
JavaScript
160 lines
5.5 KiB
JavaScript
var table,form,layer,laydate,element;
|
||
var currentDate = new Date();
|
||
var tabList=[];
|
||
var month = currentDate.getMonth() + 1;//当前第几月
|
||
var year = currentDate.getFullYear();
|
||
layui.use(['form','layer','table','laydate','element'], function () {
|
||
table = layui.table;
|
||
form = layui.form;
|
||
layer = layui.layer;
|
||
laydate = layui.laydate;
|
||
element = layui.element;
|
||
|
||
// 渲染时间选择器
|
||
laydate.render({
|
||
elem:'#month', //指定元素 元素选择器
|
||
type:'month', //选择时间类型 可选值:year(年) month(年月) date(年月日) time(时分秒) datetime(年月日时分秒)
|
||
trigger:'click',
|
||
format: 'yyyy-MM',
|
||
btns:['now','confirm'], //选择框右下角显示的按钮 清除-现在-确定
|
||
value: formatCurrentMonth(), // 如果你想预设当前日期为选中状态
|
||
done: function (value, date) {//时间回调
|
||
console.log(date)
|
||
init(date.year,date.month);
|
||
}
|
||
});
|
||
|
||
function formatCurrentMonth() {
|
||
var date = new Date();
|
||
var month = date.getMonth() + 1; // 注意月份是从0开始的,所以加1
|
||
return date.getFullYear() + '-' + (month < 10 ? '0' + month : month);
|
||
}
|
||
|
||
//监听Tab切换,以改变地址hash值
|
||
element.on('tab(projectTab)', function(data){
|
||
console.log(data)
|
||
console.log(tabList[data.index])
|
||
// tabIndex = data.index;
|
||
getView()
|
||
});
|
||
});
|
||
|
||
|
||
/**
|
||
* 初始化数据
|
||
*/
|
||
function init(chosenYear,chosenMonth){
|
||
layui.use(['table'], function () {
|
||
let table = layui.table;
|
||
let daysInMonth = new Date(chosenYear, chosenMonth, 0).getDate();
|
||
console.log(daysInMonth)
|
||
|
||
let tableData = [{isWork:['7.1','7.3','7.6','7.8']}]
|
||
let cols = []
|
||
for (let k = 1; k <= daysInMonth; k++) {
|
||
let str = chosenMonth+'.'+k;
|
||
let obj = {field:'isWork', title: str,align: 'center',width:70,
|
||
templet: function(d){
|
||
if(d.isWork.includes(d.LAY_COL.title)){
|
||
return `<i class="layui-icon" style="color: red;"></i> `
|
||
}else{
|
||
return `<apan></apan>`
|
||
}
|
||
}}
|
||
cols.push(obj)
|
||
}
|
||
table.render({
|
||
elem: '#isWorkList',
|
||
// url: "/sys/achievement",
|
||
// where: obj,
|
||
skin: 'line', // 表格样式
|
||
cols: [cols],
|
||
data: tableData
|
||
});
|
||
getTab(chosenMonth)
|
||
})
|
||
}
|
||
|
||
|
||
function getTab(chosenMonth){
|
||
console.log(chosenMonth)
|
||
tabList = [{id:'1',projectName:'xxx工程'},{id:'2',projectName:'xxx工程'},{id:'3',projectName:'xxx工程'},{id:'4',projectName:'xxx工程'}]
|
||
// projectList
|
||
$("#projectList").html('')
|
||
let html = ``
|
||
for (let k = 0; k < tabList.length; k++) {
|
||
if(k==0){
|
||
html+= '<li class="layui-this" style="margin-left:20px;">'+ tabList[0].projectName +'</li>';
|
||
}else{
|
||
html+= '<li>'+ tabList[k].projectName +'</li>';
|
||
}
|
||
}
|
||
$("#projectList").append(html);
|
||
getView()
|
||
}
|
||
|
||
function getView(){
|
||
viewList1 = [{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'}]
|
||
$("#firstViewBox").html('');
|
||
let html1 = ``;
|
||
for (let i = 0;i < viewList1.length;i++) {
|
||
html1+= `<div class="viewBox">
|
||
<div class="viewHeader">
|
||
<img src="../../../image/dataIcon3.png" alt="">
|
||
<span>${viewList1[i].name}</span>
|
||
</div>
|
||
<div class="viewContent">
|
||
<img src="../../../image/viewImg.jpg" alt="">
|
||
</div>
|
||
<div class="viewFooter">
|
||
<i class="layui-icon"></i>
|
||
2024-03-15
|
||
</div>
|
||
</div>`;
|
||
}
|
||
$("#firstViewBox").append(html1);
|
||
|
||
viewList2 = [{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'}]
|
||
$("#secondViewBox").html('');
|
||
let html2 = ``;
|
||
for (let j = 0;j < viewList2.length;j++) {
|
||
html2+= `<div class="viewBox">
|
||
<div class="viewHeader">
|
||
<img src="../../../image/dataIcon3.png" alt="">
|
||
<span>${viewList2[j].name}</span>
|
||
</div>
|
||
<div class="viewContent">
|
||
<img src="../../../image/viewImg.jpg" alt="">
|
||
</div>
|
||
<div class="viewFooter">
|
||
<i class="layui-icon"></i>
|
||
2024-03-15
|
||
</div>
|
||
</div>`;
|
||
}
|
||
$("#secondViewBox").append(html2);
|
||
|
||
viewList3 = [{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'}]
|
||
$("#specialViewBox").html('');
|
||
let html3 = ``;
|
||
for (let j = 0;j < viewList3.length;j++) {
|
||
html3+= `<div class="viewBox">
|
||
<div class="viewHeader">
|
||
<img src="../../../image/dataIcon3.png" alt="">
|
||
<span>${viewList3[j].name}</span>
|
||
</div>
|
||
<div class="viewContent">
|
||
<img src="../../../image/viewImg.jpg" alt="">
|
||
</div>
|
||
<div class="viewFooter">
|
||
<i class="layui-icon"></i>
|
||
2024-03-15
|
||
</div>
|
||
</div>`;
|
||
}
|
||
$("#specialViewBox").append(html3);
|
||
|
||
|
||
}
|
||
|
||
|