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