172 lines
5.7 KiB
JavaScript
172 lines
5.7 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()
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setData(null)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化数据
|
|||
|
|
*/
|
|||
|
|
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);
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//页面赋值
|
|||
|
|
function setData(data){
|
|||
|
|
$("#inspectionStation").text("迪庆运检站");
|
|||
|
|
$("#subComName").text("运检二公司");
|
|||
|
|
$("#proNum").text("60");
|
|||
|
|
$("#lineProtector").text("16");
|
|||
|
|
$("#month").text("3月")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|