247 lines
9.3 KiB
JavaScript
247 lines
9.3 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);
|
||
}
|
||
});
|
||
|
||
$("#queryBt").click(function(){
|
||
var keyword = $('#keyword').val();
|
||
let json = {
|
||
"keyword": keyword
|
||
}
|
||
// 对表格进行重载。id 即 table表格的id
|
||
table.reload('table', {
|
||
// //设定异步数据接口的额外参数
|
||
page:{curr : 1}
|
||
,where: json
|
||
})
|
||
})
|
||
|
||
//排序方式下拉选监听
|
||
form.on('select(sortType)', function(data){
|
||
// data.value得到被选中的值
|
||
alert(data.value); // 输出：0, 1, 2, 3
|
||
});
|
||
|
||
|
||
|
||
$("#reset").click(function(){
|
||
$('#keyword').val('');
|
||
let json = {
|
||
"keyword": ''
|
||
}
|
||
// 对表格进行重载。id 即 table表格的id
|
||
table.reload('table', {
|
||
// //设定异步数据接口的额外参数
|
||
page:{curr : 1}
|
||
,where: json
|
||
})
|
||
})
|
||
|
||
|
||
init(year,month)
|
||
setData(null)
|
||
|
||
$("#displayType>div").click(function(){
|
||
$("#displayType>div").removeClass("displayTypeDivClick");
|
||
$(this).addClass("displayTypeDivClick");
|
||
|
||
var text = $(this).text();
|
||
if(text == "照片视图"){
|
||
$("#inspectionTourContent").css("display", "")
|
||
$("#inspectionTourList").css("display", "none")
|
||
}
|
||
if(text == "列表显示"){
|
||
$("#inspectionTourContent").css("display", "none")
|
||
$("#inspectionTourList").css("display", "")
|
||
|
||
initTable();
|
||
}
|
||
})
|
||
});
|
||
|
||
|
||
// 静态数据
|
||
var tableData = [
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
|
||
];
|
||
/**
|
||
* 初始化表格数据
|
||
*/
|
||
function initTable(){
|
||
// 渲染表格
|
||
table.render({
|
||
elem: '#table',
|
||
// url: "/sys/achievement",
|
||
page: true,
|
||
skin: 'line', // 表格样式
|
||
cols: [[
|
||
{
|
||
title: '序号',
|
||
field: 'zizeng',
|
||
align: 'center',
|
||
type: 'numbers',
|
||
},
|
||
{field:'name', title: '杆塔名称',align: 'center'},
|
||
{field:'personOne', title: '护线员第一次巡视',align: 'center'},
|
||
{field:'dayOne', title: '巡视日期第一次巡视',align: 'center'},
|
||
{field:'personTwo', title: '护线员第二次巡视',align: 'center'},
|
||
{field:'dayTwo', title: '巡视日期第二次巡视',align: 'center'},
|
||
]],
|
||
data: tableData
|
||
});
|
||
|
||
}
|
||
|
||
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)
|
||
|
||
})
|
||
}
|
||
|
||
|
||
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/userIcon.png" width="18">
|
||
<span style="color: #333333;font-size:12px">张三</span>
|
||
<img src="../../../image/calendarIcon.png" width="18">
|
||
<span style="color: #333333;font-size:12px">2024-03-15</span>
|
||
</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/userIcon.png" width="18">
|
||
<span style="color: #333333;font-size:12px">张三</span>
|
||
<img src="../../../image/calendarIcon.png" width="18">
|
||
<span style="color: #333333;font-size:12px">2024-03-15</span>
|
||
</div>
|
||
</div>`
|
||
}
|
||
html += `</div>`;
|
||
|
||
$("#inspectionTourContent").append(html);
|
||
}
|
||
|
||
//页面赋值
|
||
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
|
||
});
|
||
}
|
||
}
|
||
} |