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
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|