214 lines
6.8 KiB
Plaintext
214 lines
6.8 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|||
|
|
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
|||
|
|
<title>
|
|||
|
|
<%= ServerObject.atttable.get("TOPTITLE")%>
|
|||
|
|
</title>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
.subject{
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 1080px;
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/cityHall/bg.png);
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
padding: 0 40px 40px 40px;
|
|||
|
|
}
|
|||
|
|
.subject-top{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 95px;
|
|||
|
|
cursor:pointer;
|
|||
|
|
}
|
|||
|
|
.subject-content{
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 95px);;
|
|||
|
|
border: 1px solid #00c2ff;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
box-shadow: 0 0 15px #00c2ff;
|
|||
|
|
}
|
|||
|
|
.subject-menu{
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 15%;
|
|||
|
|
left: 3%;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
#mainVideo,#listVideo{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: black;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
}
|
|||
|
|
.menu {
|
|||
|
|
cursor:pointer;
|
|||
|
|
}
|
|||
|
|
.menu , .menu-list{
|
|||
|
|
float: left;
|
|||
|
|
margin-right: 30px;
|
|||
|
|
}
|
|||
|
|
.menu-list {
|
|||
|
|
display:none;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
.menu-list > img{
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.menu-list-bg{
|
|||
|
|
z-index: 8;
|
|||
|
|
height: 70px;
|
|||
|
|
width: 300px;
|
|||
|
|
background: rgba(0,0,0,0.52);
|
|||
|
|
border-radius: 35px;
|
|||
|
|
}
|
|||
|
|
.menu-list-content{
|
|||
|
|
z-index: 7;
|
|||
|
|
position: absolute;
|
|||
|
|
top: -30px;
|
|||
|
|
width: 300px;
|
|||
|
|
}
|
|||
|
|
.menu-list-ele{
|
|||
|
|
float: left;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 0 5px;
|
|||
|
|
cursor:pointer;
|
|||
|
|
}
|
|||
|
|
.menu-list-ele >span{
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.listVideo{
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
.menu-list-text{
|
|||
|
|
width: 120px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var mainVideo ;
|
|||
|
|
var listVideo ;
|
|||
|
|
var tbName='tb_doc_file'; //数据表
|
|||
|
|
var tbName = 'tb_doc_file';
|
|||
|
|
var masterId_main = 'cityHallShow_main';
|
|||
|
|
var masterId_list = 'cityHallShow_list';
|
|||
|
|
$(function () {
|
|||
|
|
mainVideo = document.getElementById('mainVideo');
|
|||
|
|
listVideo = document.getElementById('listVideo');
|
|||
|
|
listVideo.addEventListener('ended', function () { //结束
|
|||
|
|
$("#listVideo").hide();
|
|||
|
|
$("#mainVideo").show();
|
|||
|
|
mainVideo.play();
|
|||
|
|
}, false);
|
|||
|
|
$.post(ext.contextPath + '/cityHallShow/getFileList.do', { masterId : masterId_main,tbName : tbName} , function(data) {
|
|||
|
|
if(data.length>0){
|
|||
|
|
for(var i=0;i<data.length;i++){
|
|||
|
|
var id = data[i].id;
|
|||
|
|
var filename = data[i].filename;
|
|||
|
|
var path = data[i].abspath;
|
|||
|
|
path=path.substring(path.indexOf('webapps')+7,path.length);
|
|||
|
|
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
|||
|
|
if(i==0){
|
|||
|
|
mainVideo.src = src;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},'json');
|
|||
|
|
$.post(ext.contextPath + '/cityHallShow/getFileList.do', { masterId : masterId_list,tbName : tbName} , function(data) {
|
|||
|
|
if(data.length>0){
|
|||
|
|
var width = 120*data.length;
|
|||
|
|
$(".menu-list-bg").width((width+80)+"px");
|
|||
|
|
$(".menu-list-content").width((width+70)+"px");
|
|||
|
|
for(var i=0;i<data.length;i++){
|
|||
|
|
var id = data[i].id;
|
|||
|
|
var filename = data[i].filename;
|
|||
|
|
var last=filename.lastIndexOf(".");
|
|||
|
|
if(last<0){
|
|||
|
|
last=filename.length;
|
|||
|
|
}
|
|||
|
|
var path = data[i].abspath;
|
|||
|
|
path=path.substring(path.indexOf('webapps')+7,path.length);
|
|||
|
|
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
|||
|
|
var htmlStr = '<div class="menu-list-ele" onclick="showVideo(\''+id+'\')" >'+
|
|||
|
|
'<div>'+
|
|||
|
|
'<img src="'+src+'" width="120" height="75"/>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<span class="menu-list-text" title="'+filename.substring(0,last)+'">'+filename.substring(0,last)+'</span>'+
|
|||
|
|
'</div>';
|
|||
|
|
$("#menu-list-content").append(htmlStr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},'json');
|
|||
|
|
$("#menu").click(function(){
|
|||
|
|
$(".menu-list").fadeToggle("slow");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
function initialVideo(){
|
|||
|
|
listVideo.pause()
|
|||
|
|
$("#listVideo").hide();
|
|||
|
|
$("#mainVideo").show();
|
|||
|
|
mainVideo.play();
|
|||
|
|
}
|
|||
|
|
function showVideo(masterId){
|
|||
|
|
$("#mainVideo").hide();
|
|||
|
|
mainVideo.pause()
|
|||
|
|
$("#listVideo").show();
|
|||
|
|
$.post(ext.contextPath + '/base/getInputFileListById.do', { masterId : masterId,tbName:tbName} , function(data) {
|
|||
|
|
//console.info(data)
|
|||
|
|
if(data.length>0){
|
|||
|
|
var src= "";
|
|||
|
|
for(var i=0;i<data.length;i++){
|
|||
|
|
var path = data[i].abspath;
|
|||
|
|
path=path.substring(path.indexOf('webapps')+7,path.length);
|
|||
|
|
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
|||
|
|
if(i==0){
|
|||
|
|
listVideo.src = src;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},'json');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="subject">
|
|||
|
|
<div class="subject-top" onclick="initialVideo()"></div>
|
|||
|
|
<div class="subject-content">
|
|||
|
|
<div class="subject-menu">
|
|||
|
|
<div id="menu" class="menu"><img src="<%=request.getContextPath()%>/IMG/cityHall/icon.png"/></div>
|
|||
|
|
<div class="menu-list">
|
|||
|
|
<div class="menu-list-bg"></div>
|
|||
|
|
<div class="menu-list-content" id="menu-list-content">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<video id="mainVideo" controls width="100%" height="100%" autoplay loop></video>
|
|||
|
|
<video id="listVideo" class="listVideo" controls width="100%" height="100%" autoplay></video>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|