yn_hxy_web/hxy-web/js/dataStatistics/workVisa/workVisaDetails.js

var table,form,layer,laydate,element;
var currentDate = new Date();
var tabList=[];
var month = currentDate.getMonth() + 1;//当前第几月
var year = currentDate.getFullYear();
var orders="";
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
		if(data.value==1){
			orders=" order by createTime desc"
		}else if(data.value==2){
			orders=" order by state desc"
		}else if(data.value==3){
			orders=" order by state asc"
		}
	});
	
	
	
    $("#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();
		}
	})
});


// 静态数据
 
/**
 * 初始化表格数据
 */
function initTable(){
      // 渲染表格
  table.render({
    elem: '#table',
    url: PATH_URL + "/workvisa/getList",
    page: true,
	where:{
		proId:localStorage.getItem("resultVisaProId"),
		makeMonth:localStorage.getItem("resultVisaMakeMonth"),orders:orders
	},
	method:'post',
    skin: 'line', // 表格样式
    cols: [[
        {
            title: '序号',
            field: 'zizeng',
            align: 'center',
            type: 'numbers',
        },
        {field:'gtName', title: '杆塔名称',align: 'center'},
        {field:'oneUserName', title: '护线员第一次巡视',align: 'center'},
        {field:'oneMakeTime', title: '巡视日期第一次巡视',align: 'center'},
        {field:'twoUserName', title: '护线员第二次巡视',align: 'center'},
        {field:'twoMakeTime', 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(){
	// ①已上传：展示修改、删除图标，上传日期不可选择，照片信息，杆塔号；颜色为“#52C1F5”；
	// ②未上传：展示上传图标，上传日期可选择，杆塔号，颜色为“#F56C6C”；
	// ③巡护段外：展示修改、删除图标，上传日期不可选择，照片信息，工程名称，杆塔号；颜色为“#FF9900”；
	// ④特巡/值守：展示修改、删除图标，上传日期不可选择，照片信息，备注；颜色为“#73A0FA”；
	// ⑤正在编辑：修改图标绿色背景，可重新上传照片、重新选择日期，编辑即边框闪烁；
	$.ajax({//id获取详情打开弹窗传值子页面
	    type: 'post',
	    url: PATH_URL  + "/workvisa/getVisitationDetail",
	    dataType: 'json',
		async:false,
	    data: {
	        proId:localStorage.getItem("resultVisaProId"),
	        makeMonth:localStorage.getItem("resultVisaMakeMonth")
	    },
	    success: function (data) {
			console.log(data,"result");
			viewList1=data.mgtListone;
			photoList1=data.vgtListone;
			viewList2=data.mgtListtwo;
			photoList2=data.vgtListtwo;
			viewList3=data.mgtListspe;
			photoList3=data.mgtListspe;
			
	    },
		error:function(e){
			
		}
	})
	
	$("#inspectionTourContent").empty();
	//杆塔集合
 //    viewList1 = [{id:"1",name:"#1"},{id:"2",name:'#2'},{id:"3",name:'#3'},{id:"4",name:'#4'},{id:"5",name:'#5'},{id:"6",name:'#6'},
	// {id:"7",name:'#7'},{id:"8",name:'#8'},{id:"9",name:'#9'}]
	// //照片集合
	var filePath = 'http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/c0a62f0b51924a4584ec0c8f011fc2af0074P3wTgy1h3gtizuzvfj30zk0zg7ad.jpg';
	var sFilePath='../../../image/viewImg.jpg';
	// photoList1 = [{name:'#2', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},{name:'#3', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},
	// {name:'#4', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},{name:'#5', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},
	// {name:'#6', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'}]
	
    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>
				<span style="color:#666666">正常巡视-第一次巡视</span>
				<span style="color:#F56C6C">(负责的巡护区段杆塔)</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span style="color:#999999">注：若需上传负责区域之外的杆塔，请点击</span>
				<span style="color:#0000FF;cursor: pointer;" onclick="patrolOutsideAdd()">巡护段外上传>></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++) {	
		var gtName = viewList1[i].gtName.length>4?viewList1[i].gtName.substring(0,4) + '...': viewList1[i].gtName;
		html += `<div class="viewBox">
					<div style="width: 100%;height:100%">`
						if("1"==viewList1[i].makeType){
							html +=`<div class="viewHeader" style="background-color: #FF9900;">`
						}else{
							html +=`<div class="viewHeader">`
						}
							html += `<img src="../../../image/tower_white.png" alt="">
							<span style="width: 33%;" title="${viewList1[i].gtName}">${gtName}</span>
						</div>
						<div class="viewContent">`
							var flag = false;
							for (var j = 0; j < photoList1.length; j++) {
								if(viewList1[i].gtId == photoList1[j].gtId){
									//照片存在，直接显示
									html += `<img src="${IMG_URL+photoList1[j].sfilePath}" alt="" onclick="filePreView('${IMG_URL+photoList1[j].filePath}')">`
									flag = true;
									break;
								}
							}
							if(!flag){
								//照片不存在，显示上传照片按钮
								html += `<img src="../../../image/add2.png" style="width:150px;height:150px;border: 1px solid #E9E9E9;backgroubd:#F9F9F9;cursor: pointer;margin-top: 10px;" alt="" onclick="uploadPhoto(${viewList1[i].gtId},1,${viewList1[i].makeType})">
										<div style="color:#cccccc">上传图片</div>`
							}
							html += `<div style="display: none;align-items: center;justify-content: center;position: relative;top:-100%;width:100%;height:100%;z-index:99;background-color: rgba(0,0,0,.2)">
								<button class="layui-btn" onclick="uploadPhoto(${viewList1[i].gtId},1,${viewList1[i].makeType})">
									<i class="layui-icon layui-icon-refresh-3"></i>
									重新上传
								</button>
							</div>
						</div>
						<div class="viewFooter">
							<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;`
							for (var j = 0; j < photoList1.length; j++) {
								if(viewList1[i].gtId == photoList1[j].gtId){
									//照片存在，直接显示
									html += `${photoList1[j].makeTime}`
									break;
								}
							}
						html +=`</div>
					</div>
					
				</div>`
    }
	html += `</div>`;
	
 //    viewList2 = [{id:"1",name:"#1"},{id:"2",name:'#2'},{id:"3",name:'#3'},{id:"4",name:'#4'},{id:"5",name:'#5'},{id:"6",name:'#6'},
	// {id:"7",name:'#7'},{id:"8",name:'#8'},{id:"9",name:'#9'}]
	// photoList2 = [{name:'#2', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},{name:'#3', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},
	// {name:'#4', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},{name:'#5', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},
	// {name:'#6', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'}]
	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>
				<span style="color:#666666">正常巡视-第二次巡视</span>
				<span style="color:#F56C6C">(负责的巡护区段杆塔)</span>
			</div>
			<div id="secondViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
    for (let i = 0;i < viewList2.length;i++) {
		var gtName = viewList2[i].gtName.length>4?viewList2[i].gtName.substring(0,4) + '...': viewList2[i].gtName;
		html += `<div class="viewBox">
					<div style="width: 100%;height:100%">
						`
							if("1"==viewList2[i].makeType){
								html +=`<div class="viewHeader" style="background-color: #FF9900;">`
							}else{
								html +=`<div class="viewHeader">`
							}
								html += `
							<img src="../../../image/tower_white.png" alt="">
							<span style="width: 33%;" title="${viewList2[i].gtName}">${gtName}</span>
						</div>
						<div class="viewContent">`
							var flag = false;
							for (var j = 0; j < photoList2.length; j++) {
								if(viewList2[i].gtId == photoList2[j].gtId){
									//照片存在，直接显示
									html += `<img src="${IMG_URL+photoList2[j].sfilePath}" alt="" onclick="filePreView('${IMG_URL+photoList2[j].filePath}')">`
									flag = true;
									break;
								}
							}
							if(!flag){
								//照片不存在，显示上传照片按钮
								html += `<img src="../../../image/add2.png" style="width:150px;height:150px;border: 1px solid #E9E9E9;backgroubd:#F9F9F9;cursor: pointer;margin-top: 10px;" alt="" onclick="uploadPhoto(${viewList2[i].gtId},2,${viewList2[i].makeType})">
										<div style="color:#cccccc">上传图片</div>`
							}
							html += `<div style="display: none;align-items: center;justify-content: center;position: relative;top:-100%;width:100%;height:100%;z-index:99;background-color: rgba(0,0,0,.2)">
								<button class="layui-btn"  onclick="uploadPhoto(${viewList2[i].gtId},2,${viewList2[i].makeType})>
									<i class="layui-icon layui-icon-refresh-3"></i>
									重新上传
								</button>
							</div>
						</div>
						<div class="viewFooter">
							<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;`
							for (var j = 0; j < photoList2.length; j++) {
								if(viewList2[i].gtId == photoList2[j].gtId){
									//照片存在，直接显示
									html += `${photoList2[j].makeTime}`
									break;
								}
							}
						html +=`
						</div>
					</div>
				</div>`
    }
	html += `</div>`;
	
	
	
 //    viewList3 = [{id:"1",name:"#1"},{id:"2",name:'#2'},{id:"3",name:'#3'},{id:"4",name:'#4'},{id:"5",name:'#5'},{id:"6",name:'#6'},
	// {id:"7",name:'#7'},{id:"8",name:'#8'},{id:"9",name:'#9'}]
	// photoList3 = [{name:'#2', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},{name:'#3', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},
	// {name:'#4', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},{name:'#5', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'},
	// {name:'#6', filePath:filePath,sFilePath:sFilePath,makeTime:'2024-08-19'}]
	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 i = 0;i < viewList3.length;i++) {
		var gtName = viewList3[i].gtName.length>11?viewList3[i].gtName.substring(0,11) + '...': viewList3[i].gtName;
		html += `<div class="viewBox">
					<div style="width: 100%;height:100%">
						<div class="viewHeader" style="font-size:12px">
							<img src="../../../image/tower_white.png" alt="">
							<span style="width: 33%;" title="${viewList3[i].gtName}">${gtName}</span>
						</div>
						<div class="viewContent">
							`
								var flag = false;
								for (var j = 0; j < photoList3.length; j++) {
									if(viewList3[i].gtId == photoList3[j].gtId){
										//照片存在，直接显示
										html += `<img src="${IMG_URL+photoList3[j].sfilePath}" alt="" onclick="filePreView('${IMG_URL+photoList3[j].filePath}')">`
										flag = true;
										break;
									}
								}
								if(!flag){
									//照片不存在，显示上传照片按钮
									html += `<img src="../../../image/add2.png" style="width:150px;height:150px;border: 1px solid #E9E9E9;backgroubd:#F9F9F9;cursor: pointer;margin-top: 10px;" alt="" ">
											<div style="color:#cccccc">上传图片</div>`
								}
								html += `
							<div style="display: none;align-items: center;justify-content: center;position: relative;top:-100%;width:100%;height:100%;z-index:99;background-color: rgba(0,0,0,.2)">
								<button class="layui-btn">
									<i class="layui-icon layui-icon-refresh-3"></i>
									重新上传
								</button>
							</div>
						</div>
						<div class="viewFooter">
							<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
							`
								for (var j = 0; j < photoList3.length; j++) {
									if(viewList3[i].gtId == photoList3[j].gtId){
										//照片存在，直接显示
										html += `${photoList3[j].makeTime}`
										break;
									}
								}
							html +=`
						</div>
					</div>
					
				</div>`
    }
	html += `</div>`;
    $("#inspectionTourContent").append(html);
}

//页面赋值
function setData(data){
	$.ajax({//id获取详情打开弹窗传值子页面
	    type: 'post',
	    url: PATH_URL + "/workvisa/getProjectDetail",
	    dataType: 'json',
	    data: {
	        proId:localStorage.getItem("resultVisaProId"),
	        makeMonth:localStorage.getItem("resultVisaMakeMonth")
	    },
	    success: function (data) {
	        $("#proName").text(data.data.proName);
	        $("#isTwo").text(data.data.isTwo==1?"双回路":"单回路");
	        $("#powerNum").text(data.data.powerNum);
	        $("#oneNum").text(data.data.oneNum);
	        $("#twoNum").text(data.data.twoNum);
	        $("#userNum").text(data.data.userNum);
	    },
		error:function(e){
			
		}
	})
}

//文件查看
//查看附件详情
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
            });
        }
    }
}