ZHadmin/pages/QRcoddetails/static/recordDetaile.js

Infos();
function Infos() {
    var info = [];
    var name,value;
    var str=location.href;
    var num=str.indexOf("?");
    str=str.substr(num+1);
    var arr=str.split("&");
    for(var i=0;i < arr.length;i++){
        num=arr[i].indexOf("=");
        if(num>0){
            name=arr[i].substring(0,num);
            value=arr[i].substr(num+1);
            this[name]=value;
            info.push(value)
        }
    }
    $.ajax({
        url:Url+'/record/v1/getRecordInstanceDetailList',
        type:'get',
        data:{
            recordParentId:info[0],
            departmentId:JSON.parse(getItem('UserQrcode')).organizationIds
        },
        success:function (res) {
            console.log(res,'reswwww');
            if (res.code === '200') {
                if (res.data.pageRecord != null) {
                    $('.submitBtn').show();
                    $('.note').addClass('margin08').removeClass('noneMargin');
                }else {
                    $('.submitBtn').hide();
                    $('.note').addClass('noneMargin').removeClass('margin08');
                }
                var recordInstanceList = res.data.recordInstanceList;
                for (var r= 0; r< recordInstanceList.length;r++) {
                    var str = `<div class="note ">                            
                           </div>`;
                    $('.g-flexview').append(str);
                    var str1 = `<div class="top recordInfo">
                                <div class="icon"><img src="img/0001.png"></div>
                                <div class="note-name">${recordInstanceList[r].templateName}</div>
                                <div class="note-time">${recordInstanceList[r].createDate}</div>
                                <div class="name">${recordInstanceList[r].createName}</div>
                            </div>`;
                    $('.note').append(str1);
                    // 状态
                    if (recordInstanceList[r].recordStatusInstanceList != null) {
                        var strs = `<div class="m-card">
                                        <div class="header"><span>状态</span></div>
                                        <div class="content">
                                            <div class="m-cell statusItem">
                                                                                   
                                            </div>
                                        </div>
                                     </div>`;
                        $('.note').append(strs);
                        for (var u = 0; u < recordInstanceList[r].recordStatusInstanceList.length; u++) {
                            var str2 = `<div class="cell-item">
                                            <div class="cell-left">${recordInstanceList[r].recordStatusInstanceList[u].statusName}</div>
                                            <div class="cell-right" id="statusP${u}">
                                             
                                            </div>
                                         </div>  `;
                            $('.statusItem').append(str2);
                            var colors = recordInstanceList[r].recordStatusInstanceList[u].recordStatusInstanceItemList;
                            console.log(colors,'colors')
                            for (var c = 0; c < colors.length; c++) {
                                var statu = `<span style="color:${colors[c].statusColor};margin-left: 3px">${colors[c].statusContent}</span>`;
                                $('#statusP'+u).append(statu)
                            }
                        }

                    }else {
                        var str2 = `<div class="m-card">
                            <div class="header"><span>状态</span></div>
                                <div class="content">
                                    <div class="m-cell">
                                        <div class="cell-item">
                                            <div class="cell-left">${recordInstanceList[r].statusName}</div>
                                            <div class="cell-right"><span class="blue">${recordInstanceList[r].statusContent}</span></div>
                                        </div>                                     
                                    </div>
                                </div>
                             </div>`;
                        $('.note').append(str2);
                    }
                    var m_card =`<div class="m-card fileP">
                                <div class="header">
                                    <span>记录项</span>
                                </div>
                                <div class="content contents">
                                </div>
                            </div>`;
                    $('.note').append(m_card);
                    if (recordInstanceList[r].inputList != null) {
                        // 记录项
                        var record = `
                                <div class="m-cell recordItem">
                 
                                </div>                                         
                                   `;
                        $('.fileP .contents').append(record);
                        for (var i = 0; i < recordInstanceList[r].inputList.length; i++) {
                            if (recordInstanceList[r].inputList[i].inputType != 'file' && recordInstanceList[r].inputList[i].inputType != "mp3" && recordInstanceList[r].inputList[i].inputType != "photo" && recordInstanceList[r].inputList[i].inputType != "video" && recordInstanceList[r].inputList[i].values != ""){
                                var recordItem = `<div class="cell-item">
                                            <div class="cell-title">${recordInstanceList[r].inputList[i].inputName}：</div>
                                            <div class="cell-content"><span class="normal">${recordInstanceList[r].inputList[i].values[0]}</span></div>
                                        </div>`;
                                $('.recordItem').append(recordItem);
                            }
                        }
                    }
                    // 检查项
                    if (recordInstanceList[r].checkItemMap != null) {
                        var inspectItems =`<div class="m-card inspectItems">
                                <div class="header">
                                    <span>检查项</span>
                                </div>
                                <div class="content">
                                </div>
                            </div>`;
                        $('.note').append(inspectItems);
                        var inspect = `
                                    <div class="m-cell inspectItem">
                     
                                    </div>                                         
                                    `;
                        $('.inspectItems .content').append(inspect);
                        $.each(recordInstanceList[r].checkItemMap,function(key,value){
                            var text = [];
                            for (var r = 0; r < value.length; r++) {
                                text.push(value[r].itemValue)
                            }
                            var trem = `<div class="cell-item">
                                    <div class="cell-title">${key}：</div>
                                    <div class="cell-content"><span class="normal">${text.join(',')}</span></div>
                                </div>`
                            $('.inspectItem').append(trem);

                        });
                    }
                    // 图片
                    if (recordInstanceList[r].inputList != null) {
                        for (var p = 0; p < recordInstanceList[r].inputList.length; p++) {
                            // 图片
                            if (recordInstanceList[r].inputList[p].inputType === "photo") {
                                if (recordInstanceList[r].inputList[p].values !="") {
                                    var photo = `<div class="card-box">
                                                <div class="title">图片：</div>
                                                <div class="content">
                                                    <div class="my-gallery img-list" data-pswp-uid="1">
                                                       
                                                      
                                                    </div>
                                                </div>
                                            </div>`;
                                    $('.fileP .contents').append(photo);
                                    for (var j = 0; j < recordInstanceList[r].inputList[p].values.length; j++) {
                                        var photoTrem = ` <figure>
                                            <div class="img-dv img-item">
                                                <a href="${recordInstanceList[r].inputList[p].values[j]}" data-size="1920x1080">
                                                     <img src="${recordInstanceList[r].inputList[p].values[j]}">
                                                </a>
                                            </div>                                                         
                                        </figure>`;
                                        $('.img-list ').append(photoTrem);
                                        setTimeout( photoFun,500);
                                    }
                                }
                            }
                        }
                        // 文件
                        for (var t = 0; t < recordInstanceList[r].inputList.length; t++) {
                            if (recordInstanceList[r].inputList[t].inputType === "file") {
                                if (recordInstanceList[r].inputList[t].values !="") {
                                    var files = `<div class="card-box">
                                    <div class="title">文件：</div>
                                        <div class="content">
                                            <div class="file-list">
                                                
                    
                                            </div>
                                        </div>
                                    </div>`;
                                    $('.fileP .contents').append(files);
                                    for (var j = 0; j<recordInstanceList[r].inputList[t].values.length; j++) {
                                        var type = recordInstanceList[r].inputList[t].values[j].substring(recordInstanceList[r].inputList[t].values[j].lastIndexOf(".")+1);
                                        var name =recordInstanceList[r].inputList[t].values[j].substring(recordInstanceList[r].inputList[t].values[j].lastIndexOf("-")+1);
                                        var Urls =recordInstanceList[r].inputList[t].values[j].substring(recordInstanceList[r].inputList[t].values[j],recordInstanceList[r].inputList[t].values[j].lastIndexOf("-"));
                                        var fileTrem = ` <div class="file-item" file-Url="${Urls}">
                                                    <a href="javascript:;">
                                                         <img src="img/office-icon/${type}.png">
                                                         <p>${name}</p>
                                                    </a>
                                                </div>`;
                                        $('.file-list ').append(fileTrem);
                                    }
                                }
                            }
                        }
                        // 录音
                        for (var a = 0; a < recordInstanceList[r].inputList.length; a++) {
                            if (recordInstanceList[r].inputList[a].inputType === "mp3") {
                                if (recordInstanceList[r].inputList[a].values != "") {
                                    var audio = `
                                         <div class="card-box">
                                            <div class="title titleAudio">录音：</div>
                                              
                                            </div>
                                        </div>`;
                                    $('.fileP .contents').append(audio);
                                    var audioItem = `
                                         <div class="audio_a" style="position: relative;height: 30px;">    
                                         <audio id="audio_src" controls style="height: 30px;">
                                             <source src="${recordInstanceList[r].inputList[a].values[0]}">
                                        </audio>                                   
                                            
                                          </div>`;
                                    $('.titleAudio').after(audioItem);
                                }
                            }
                        }
                        // 视频
                        for (var v = 0; v < recordInstanceList[r].inputList.length; v++) {
                            if (recordInstanceList[r].inputList[v].inputType === "video") {
                                if (recordInstanceList[r].inputList[v].values != "") {
                                    var vedio = `
                                     <div class="card-box">
                                        <div class="title">视频：</div>
                                        <div class="content vedios">
                                           
                                        </div>
                                    </div>`;
                                    $('.fileP .contents').append(vedio);
                                    var vedioItem = `
                                         <video controls webkit-playsinline="true" class="video" style="width: 100%;height: 200px;">
                                            <source src="${recordInstanceList[r].inputList[v].values[0]}">
                                        </video>`;
                                    $('.vedios').append(vedioItem);
                                }
                            }
                        }
                    }
                }
            }
        }
    })
}
function photoFun() {
    auto_data_size();
    var initPhotoSwipeFromDOM = function(gallerySelector) {
        var parseThumbnailElements = function(el) {
            var thumbElements = el.childNodes,
                numNodes = thumbElements.length,
                items = [],
                figureEl,
                linkEl,
                size,
                item,
                divEl;
            for(var i = 0; i < numNodes; i++) {
                figureEl = thumbElements[i]; // <figure> element
                // 仅包括元素节点
                if(figureEl.nodeType !== 1) {
                    continue;
                }
                divEl = figureEl.children[0];
                linkEl = divEl.children[0]; // <a> element
                size = linkEl.getAttribute('data-size').split('x');
                // 创建幻灯片对象
                item = {
                    src: linkEl.getAttribute('href'),
                    w: parseInt(size[0], 10),
                    h: parseInt(size[1], 10)
                };
                if(figureEl.children.length > 1) {
                    item.title = figureEl.children[1].innerHTML;
                }
                if(linkEl.children.length > 0) {
                    // <img> 缩略图节点, 检索缩略图网址
                    item.msrc = linkEl.children[0].getAttribute('src');
                }
                item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
                items.push(item);
            }
            return items;
        };

        // 查找最近的父节点
        var closest = function closest(el, fn) {
            return el && ( fn(el) ? el : closest(el.parentNode, fn) );
        };

        // 当用户点击缩略图触发
        var onThumbnailsClick = function(e) {
            e = e || window.event;
            e.preventDefault ? e.preventDefault() : e.returnValue = false;
            var eTarget = e.target || e.srcElement;
            var clickedListItem = closest(eTarget, function(el) {
                return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
            });
            if(!clickedListItem) {
                return;
            }
            var clickedGallery = clickedListItem.parentNode,
                childNodes = clickedListItem.parentNode.childNodes,
                numChildNodes = childNodes.length,
                nodeIndex = 0,
                index;
            for (var i = 0; i < numChildNodes; i++) {
                if(childNodes[i].nodeType !== 1) {
                    continue;
                }
                if(childNodes[i] === clickedListItem) {
                    index = nodeIndex;
                    break;
                }
                nodeIndex++;
            }
            if(index >= 0) {
                openPhotoSwipe( index, clickedGallery );
            }
            return false;
        };

        var photoswipeParseHash = function() {
            var hash = window.location.hash.substring(1),
                params = {};
            if(hash.length < 5) {
                return params;
            }
            var vars = hash.split('&');
            for (var i = 0; i < vars.length; i++) {
                if(!vars[i]) {
                    continue;
                }
                var pair = vars[i].split('=');
                if(pair.length < 2) {
                    continue;
                }
                params[pair[0]] = pair[1];
            }
            if(params.gid) {
                params.gid = parseInt(params.gid, 10);
            }
            return params;
        };

        var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
            var pswpElement = document.querySelectorAll('.pswp')[0],
                gallery,
                options,
                items;
            items = parseThumbnailElements(galleryElement);
            // 这里可以定义参数
            options = {
                barsSize: {
                    top: 100,
                    bottom: 100
                },
                fullscreenEl : false,
                shareButtons: [
                    {id:'wechat', label:'分享微信', url:'#'},
                    {id:'weibo', label:'新浪微博', url:'#'},
                    {id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
                ],
                galleryUID: galleryElement.getAttribute('data-pswp-uid'),
                getThumbBoundsFn: function(index) {
                    var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                        rect = thumbnail.getBoundingClientRect();
                    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
                }
            };
            if(fromURL) {
                if(options.galleryPIDs) {
                    for(var j = 0; j < items.length; j++) {
                        if(items[j].pid == index) {
                            options.index = j;
                            break;
                        }
                    }
                } else {
                    options.index = parseInt(index, 10) - 1;
                }
            } else {
                options.index = parseInt(index, 10);
            }
            if( isNaN(options.index) ) {
                return;
            }
            if(disableAnimation) {
                options.showAnimationDuration = 0;
            }
            gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        };

        var galleryElements = document.querySelectorAll( gallerySelector );
        for(var i = 0, l = galleryElements.length; i < l; i++) {
            galleryElements[i].setAttribute('data-pswp-uid', i+1);
            galleryElements[i].onclick = onThumbnailsClick;
        }
        var hashData = photoswipeParseHash();
        if(hashData.pid && hashData.gid) {
            openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
        }
    };
    initPhotoSwipeFromDOM('.my-gallery');
}
function auto_data_size(){
    $("figure img").each(function() {
        var imgs = new Image();
        imgs.src=$(this).attr("src");
        var w = imgs.width,
            h = imgs.height;
        $(this).parent("a").attr("data-size","").attr("data-size",w+"x"+h);
    })
};


$('body').on('click','.file-list>.file-item',function () {
    var url = $(this).attr('file-Url');
    var type = url.substring(url.lastIndexOf(".")+1);
    console.log(type,'type')
    if (type == 'zip' || type == 'rar') {
        window.location.href = url;
    } else if(type == 'ppt' || type == 'pptx'){
        window.open('https://view.officeapps.live.com/op/view.aspx?src='+url)
    }else {
        window.open('https://view.officeapps.live.com/op/view.aspx?src='+url)
    }
});
$('.submitBtn').on("click",function () {
     location.href = 'addRecord.html'
});
// $('body').on('click','.seeDoc',function () {
//     var url = $(this).attr('file-Url');
//     window.open('https://view.officeapps.live.com/op/view.aspx?src='+url)
// });
// $('body').on('click','.downloadPDF',function () {
//     var url = $(this).attr('file-Url');
//     window.location.href = url;
//
// });
// $('body').on('click','.seePdf',function () {
//     var url = $(this).attr('file-Url');
//     setItem('pdfUrl',url);
//     window.open('http://apptest.jieweizhineng.com/assets/html/QRcoddetails/pdf.html');
// });
// $('body').on('click','.seePpt',function () {
//     var url = $(this).attr('file-Url');
//     window.open('https://view.officeapps.live.com/op/view.aspx?src='+url)
// });