241 lines
8.4 KiB
JavaScript
241 lines
8.4 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:", date)
|
||
init(date.year,date.month);
|
||
}
|
||
});
|
||
|
||
|
||
|
||
init(year,month)
|
||
setData(null)
|
||
|
||
});
|
||
|
||
//工程切换
|
||
function projectTab(event){
|
||
//修改所点工程样式
|
||
$("#projects>div").removeClass("projectsStyle");
|
||
$(event).addClass("projectsStyle")
|
||
|
||
//获取时间
|
||
var date = $("#month").val();
|
||
var year;
|
||
var month;
|
||
if(date != ''){
|
||
//截取年
|
||
year = date.split("-")[0];
|
||
//截取月，并去0
|
||
month = Integer.parseInt(date.split("-")[1]);
|
||
}else{
|
||
layer.msg("日期获取错误", { icon: 0 });
|
||
return;
|
||
}
|
||
getView(year, month);
|
||
}
|
||
|
||
function formatCurrentMonth() {
|
||
var date = new Date();
|
||
var month = date.getMonth() + 1; // 注意月份是从0开始的，所以加1
|
||
return date.getFullYear() + '-' + (month < 10 ? '0' + month : month);
|
||
}
|
||
/**
|
||
* 初始化数据
|
||
*/
|
||
function init(chosenYear,chosenMonth){
|
||
layui.use(['table'], function () {
|
||
getView(chosenYear, chosenMonth)
|
||
|
||
getTab(chosenMonth)
|
||
})
|
||
}
|
||
|
||
|
||
function getTab(chosenMonth){
|
||
tabList = [{id:'1',projectName:'xxx工程1'},{id:'2',projectName:'xxx工程2'},{id:'3',projectName:'xxx工程3'},{id:'4',projectName:'xxx工程4'}]
|
||
// projectList
|
||
$("#projects").empty()
|
||
let html = ``
|
||
for (let i = 0; i < tabList.length; i++) {
|
||
var className = ""
|
||
if(i == 0){
|
||
className = "projectsStyle";
|
||
}
|
||
html += `<div class="${className}" onclick="projectTab(this)">
|
||
<span id="${tabList[i].id}">${tabList[i].projectName}</span>
|
||
</div>`
|
||
}
|
||
$("#projects").append(html);
|
||
}
|
||
|
||
function getView(chosenYear, chosenMonth){
|
||
// ①已上传：展示修改、删除图标，上传日期不可选择，照片信息，杆塔号；颜色为“#52C1F5”；
|
||
// ②未上传：展示上传图标，上传日期可选择，杆塔号，颜色为“#F56C6C”；
|
||
// ③巡护段外：展示修改、删除图标，上传日期不可选择，照片信息，工程名称，杆塔号；颜色为“#FF9900”；
|
||
// ④特巡/值守：展示修改、删除图标，上传日期不可选择，照片信息，备注；颜色为“#73A0FA”；
|
||
// ⑤正在编辑：修改图标绿色背景，可重新上传照片、重新选择日期，编辑即边框闪烁；
|
||
|
||
|
||
$("#inspectionTourContent").empty();
|
||
viewList1 = [{name:"sss"},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'}]
|
||
let html = ``;
|
||
html += `<div style="width: 90%;height: 30px;font-weight: bold;">
|
||
<span style="border: 3px solid #409EFF;width: 20px;height: 10px;margin-left: 2%;margin-right: 1%;"></span>正常巡视-第一次巡视
|
||
</div>
|
||
<div id="firstViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
|
||
for (let i = 0;i < viewList1.length;i++) {
|
||
html += `<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="" onclick="filePreView('${"s.jpg"}')">
|
||
</div>
|
||
<div class="viewFooter">
|
||
<img src="../../../image/calendarIcon.png" width="18">
|
||
2024-03-15
|
||
</div>
|
||
</div>`
|
||
}
|
||
html += `</div>`;
|
||
|
||
|
||
viewList2 = [{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'}]
|
||
html += `<div style="width: 90%;height: 30px;font-weight: bold;">
|
||
<span style="border: 3px solid #409EFF;width: 20px;height: 10px;margin-left: 2%;margin-right: 1%;"></span>正常巡视-第二次巡视
|
||
</div>
|
||
<div id="secondViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
|
||
for (let j = 0;j < viewList2.length;j++) {
|
||
html += `<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="" onclick="filePreView('${"s.jpg"}')">
|
||
</div>
|
||
<div class="viewFooter">
|
||
<img src="../../../image/calendarIcon.png" width="18">
|
||
2024-03-15
|
||
</div>
|
||
</div>`
|
||
}
|
||
html += `</div>`;
|
||
|
||
|
||
|
||
viewList3 = [{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'}]
|
||
html += `<div style="width: 90%;height: 30px;font-weight: bold;">
|
||
<span style="border: 3px solid #409EFF;width: 20px;height: 10px;margin-left: 2%;margin-right: 1%;"></span>特巡 / 值守
|
||
</div>
|
||
<div style="width: 94%;height: 150px;overflow: auto;margin-left: 1.8%;">
|
||
<table id="isWorkList" class="layui-table" lay-skin="row" style="width:100%;"></table>
|
||
</div>
|
||
<div id="specialViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
|
||
for (let j = 0;j < viewList3.length;j++) {
|
||
html += `<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="" onclick="filePreView('${"s.jpg"}')">
|
||
</div>
|
||
<div class="viewFooter">
|
||
<img src="../../../image/calendarIcon.png" width="18">
|
||
2024-03-15
|
||
</div>
|
||
</div>`
|
||
}
|
||
html += `</div>`;
|
||
$("#inspectionTourContent").append(html);
|
||
|
||
|
||
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
|
||
});
|
||
}
|
||
|
||
//页面赋值
|
||
function setData(data){
|
||
$("#username").text("张三");
|
||
$("#phone").text("15856564578");
|
||
$("#num").text("60");
|
||
$("#oneNum").text("16");
|
||
$("#twoNum").text("16");
|
||
$("#otherNum").text("16");
|
||
}
|
||
|
||
//文件查看
|
||
//查看附件详情
|
||
function filePreView(url) {
|
||
if(url != "" && url != null){
|
||
var suffix = url.split(".")[1];
|
||
if(suffix == "mp4"){
|
||
localStorage.setItem("filePath", url);
|
||
var height = '99%';
|
||
var width = '70%';
|
||
var index = parent.layer.open({
|
||
title: ["查看", 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
|
||
type: 2,
|
||
content: '../../videoPlay.html',
|
||
area: [width, height],
|
||
maxmin: false
|
||
});
|
||
}else{
|
||
// localStorage.setItem("filePath", url);
|
||
// localStorage.setItem("fileName", fileName);
|
||
// localStorage.setItem("fileTime", time);
|
||
var height = '99%';
|
||
var width = '70%';
|
||
var index = parent.layer.open({
|
||
title: ["查看", 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
|
||
type: 2,
|
||
content: '../../photoView.html',
|
||
area: [width, height],
|
||
maxmin: false
|
||
});
|
||
}
|
||
}
|
||
} |