longping
/
subject_gxj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../common/common-meta-include.jsp"></jsp:include>
    <jsp:include page="../common/common-js-include.jsp"></jsp:include>
    <jsp:include page="../common/common-css-include.jsp"></jsp:include>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-colla-content {
            border-width: 0px;
            left: 11px;
            top: 0px;
            width: -webkit-fill-available;
            height: 522px;
            background: inherit;
            background-color: rgba(255, 255, 255, 0.996078431372549);
            border: none;
            border-radius: 12px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .imgUl{
        	display: inline-flex;
    		flex-wrap: wrap;
    		gap:20px;
        }

        .media-box{
        	width:calc(25% - 15px);
        }


        .imgUl li {
        	width: 30%;
        	padding-top: 20px;
        }
        .imgTab{
        	border: 1px solid black;
        	max-height: 300px;
        	max-width: 300px;
        	margin:0 auto 20px;
        }
        .imgUl img{
        	max-height: 280px;
        	max-width: 300px;
        	width:100%;
        	height:100%;
        /* 	height: 300px;
        	width: 300px; */
        }
        .imgTab video{
        	max-height: 240px;
        	max-width: 300px;
        	width:100%;
        	height:100%;
        /* 	height: 270px;
        	width: 300px; */
        }
    </style>
</head>
<body>
<div id="app"></div>
<input type="hidden" id="subId" value="${subId}"/>
<template id="template">
    <div>
        <div class="right_title">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title return">
                        <button class="btn" @click="backHis">返回</button>
                    </h2>
                </div>
            </div>
        </div>
        <div class="layui-tab" lay-filter="formData">
           	<ul class="layui-tab-title">
           		<li class="layui-this">图片</li>
           		<li>视频</li>
           	</ul>
           	<div class="layui-tab-content">
           		<div class="layui-tab-item layui-show">
           			 <div class="layui-colla-content layui-show" style="height: auto;">
		                <div class="table_box" style="padding-top: 0;">
	                    	<div class="imgUl">
		                    	<div v-for="(item, index) in imageList"  class="media-box" @click="showImg(index)" >
		                    		<div class="imgTab">
<%--		                    			<img  :id="idTemp(index)"     :alt="item.time" :lay-src="'${domain}/static/file/'+item.fileAddre+'/showfile'" :src="'${domain}/static/file/'+item.fileAddre+'/showfile'">--%>
		                    			<img  :id="idTemp(index)"     :alt="item.time" :lay-src="'${domain}/static/file/'+item.fileAddre+'/showfileFgw'" :src="picShow(item.fileAddre,item.fileType)">
			                    		<span>{{item.time}}</span>
		                    		</div>
		                    	</div>
	                    	</div>
		                	<div class="pagination-box" id="imagePagination"></div>
		                </div>
           		 	</div>
           		</div>
           		<div class="layui-tab-item">
           			<div class="layui-colla-content layui-show" style="height: auto;">
		                <div class="table_box" style="padding-top: 0;">
		                    <div class="imgUl">
		                    	<div v-for="(item, index) in vedioList" class="media-box" @click="showVideo">
		                    		<div class="imgTab">
		                    			<video controls="controls" loop="loop" preload="auto">
<%--		                    				<source :src="'${domain}/static/file/'+item.fileAddre+'/watch'">--%>
		                    				<source :src="picShow(item.fileAddre,item.fileType)">
		                    			</video>
			                    		<span>{{item.time}}</span>
		                    		</div>
		                    	</div>
		                    </div>
		                	<div class="pagination-box" id="vedioPagination"></div>
		                </div>
           		 	</div>
           		</div>
           	</div>
        </div>
    </div>
</template>
<script type="text/javascript">
    new Vue({
        el : "#app",
        template: "#template",
        data : {
            tabActive : 9,
            vedioList: [],
            imageList: [],
            vedioPageNo: 1,
            vedioPageSize: 8,
            imagePageNo: 1,
            imagePageSize: 8,
            closeMark : false
        },
        mounted : function() {
            this.init();
        },
        methods : {
			picShow(fileId, type) {
				var tempId = "#" + fileId;
				if (type == 8) {
					return "${WebSite.asset}/css/images/pdf.png";
				} else if (type == null || type == "") {
				} else if (type == 101 || type == 102 || type == 103 || type == 104 || type == 105) {
					return "${domain}/static/file/" + fileId + "/showfileFgw";
				} else if (type == 4 || type == 5) {
					return "${WebSite.asset}/css/images/excel.png";
				} else if (type == 2 || type == 3) {
					return "${WebSite.asset}/css/images/word.png";
				} else if (type == 203) {
					return "${WebSite.asset}/css/images/video.png";
				}
			},
            init : function() {
                var self = this;
                this.getImgForm();
                this.getVedioForm();
            },
            showImg: function(index){


				var idName="img"+index;
            	var imageUrl=document.getElementById(idName).getAttribute('src');

				layer.photos({
					photos: {
						"title":"",
						"id": "",
						"start": 0,
						"data": [
							{
								"alt": "",
								"pid": "",
								"src": imageUrl,
								"thumb": imageUrl
							}
						]
					},
					anim: 5,
					closeBtn :"1",
					success: function() {
						//以鼠标位置为中心的图片滚动放大缩小
						$(document).on("mousewheel",".layui-layer-photos",function(ev){
							var oImg = this;
							var ev = event || window.event;//返回WheelEvent
							//ev.preventDefault();
							var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
							var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
									ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
									ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
									w = parseInt(oImg.offsetWidth * ratioDelta),
									h = parseInt(oImg.offsetHeight * ratioDelta),
									l = Math.round(ev.clientX - (w * ratioL)),
									t = Math.round(ev.clientY - (h * ratioT));
							$(".layui-layer-photos").css({
								width: w, height: h
								,left: l, top: t
							});
							$("#layui-layer-photos").css({width: w, height: h});
							$("#layui-layer-photos>img").css({width: w, height: h});
						});
					}
					,end: function(){ //销毁回调

					}

				});

            },
			idTemp: function (index){

				return "img"+index;
			},
			showVideo: function (){
				layer.photos({
					photos: '.imgUl',
					shadeClose: true,
				    closeBtn: 2,
				    anim: 5
				})

			},
            getImgForm: function(){
                var subId = $("#subId").val();
                if(subId == ""){
                    App.msg.warn("请从正规页面进入");
                    return;
                }else{
                    var self = this;
                    App.postJson("/api/rptCont/pageFileBySub",{pageNo: this.imagePageNo, pageSize: this.imagePageSize, subId : subId, type: "IMAGE"}, function(res){
                        if(res.success){
                            self.imageList = res.rows || [];
                            self.loadImagePage(res.total);
                            setTimeout(function() {
                                layui.form.render();
                            }, 200);
                        }
                    });
                }
            },
            loadImagePage : function(totalCount){
                var self = this;
                layui.laypage.render({
                    elem: 'imagePagination',
                    count: totalCount,
                    curr : self.imagePageNo,
                    limit : self.imagePageSize,
                    layout: ['count', 'prev', 'page', 'next', 'skip'],
                    jump: function(obj, first) {

                        //首次不执行
                        if(!first) {
                            self.imgPageNo = obj.curr;
                            self.getImgForm();
                        }
                    }
                });
            },
            getVedioForm: function(){
                var subId = $("#subId").val();
                if(subId == ""){
                    App.msg.warn("请从正规页面进入");
                    return;
                }else{
                    var self = this;
                    App.postJson("/api/rptCont/pageFileBySub",{pageNo: this.vedioPageNo, pageSize: this.vedioPageSize, subId : subId, type: "VEDIO"}, function(res){
                        if(res.success){
                            self.vedioList = res.rows || [];
                            self.loadVedioPage(res.total);
                            setTimeout(function() {
                                layui.form.render();
                            }, 200);
                        }
                    });
                }
            },
            loadVedioPage : function(totalCount){
                var self = this;
                layui.laypage.render({
                    elem: 'vedioPagination',
                    count: totalCount,
                    curr : self.vedioPageNo,
                    limit : self.vedioPageSize,
                    layout: ['count', 'prev', 'page', 'next', 'skip'],
                    jump: function(obj, first) {
                        //首次不执行
                        if(!first) {
                            self.vedioPageNo = obj.curr;
                            self.getVedioForm();
                        }
                    }
                });
            },
            backHis(){
               App.closeCurrentLayer();
            },

        }
    })
</script>
</body>
</html>