longping
/
subject_gxj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
							<%@ 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; */
        }
		 .right_title{
			 margin-bottom: 20px;
		 }
    </style>
</head>
<body>
<div id="app"></div>
<input type="hidden" id="subId" value="${subId}"/>
<template id="template">
    <div style="padding: 0 20px">
<%--        <div class="right_title">--%>
<%--				<div class="layui-collapse">--%>
<%--					<h2 class="layui-colla-title" style="padding-right:0">--%>
<%--					</h2>--%>
<%--				</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">
		                    		<div class="imgTab">
<%--		                    			<img :alt="item.time" :lay-src="'${domain}/static/file/'+item.fileAddre+'/showfile'" :src="'${domain}/static/file/'+item.fileAddre+'/showfile'">--%>
		                    			<img :alt="item.time" :lay-src="'${domain}/static/file/'+item.fileAddre+'/showfile'" :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="showImg">
		                    		<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(){
            	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) {
                        //首次不执行

						console.log(first);
						console.log(obj.curr);
                        if(!first) {
                            self.imagePageNo = 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(){
                if(${layer}){
                    App.closeCurrentLayer();
                }else {
                    window.location.href = "${lastUrl}";
                }
            },

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