zhengbingbing
/
Autobio_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="../../Script/Common/huayi.load.js"></script>
		<script src="../../Script/Common/huayi.http.js"></script>
    	<script src="../../Script/Common/huayi.config.js"></script>
		<link rel="stylesheet" href="../css/init.css" />
		<link rel="stylesheet" href="../css/taskDetail.css" />
		<title>语音文件管理</title>
		<style type="text/css">
			.m-kuang{
				width: 134px;
			    background-color: #ffffff;
			    background-image: none !important;
			    filter: none !important;
			    border: 1px solid #e5e5e5;
			    outline: none;
			    height: 34px !important;
    			line-height: 30px;
    			padding: 4px 6px;
			}
			.tool{
				margin: 20px 0;
			}
			.tool table{
				width: 100%;
			}
			.tool table td{
				width: 33%;
			}
			.ztColor {
			    padding: 2px;
			    color: #fff;
			}
			.qiy{
				background: #3cc051;
			}
			.bany{
				background: #fcb322;
			}
			.audio{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="daoHang clearfix">
				<div class="dhLeft">
					<sapn><i class="syIcon"></i>位置：
						<a id="ReIndex" href="javaScript:;">首页</a>&gt;
						<!--<a href="javaScript:;">系统管理</a>&gt;-->
						<a href="javaScript:;" style="color: #1ab394;">语音文件管理</a>
					</sapn>
				</div>
			</div>
			<div class="tool">
				<table >
					<tr>
						<td>
							<b>查询：</b>
							<input type="text" class="m-kuang" />
							<select name="" id="" class="m-kuang">
								<option value="">----请选择----</option>
								<option value="">查询所有</option>
								<option value="">ID</option>
								<option value="">所属企业</option>
								<option value="">文件说明</option>
							</select>
							<button class="btns"><i class="fa fa-search"></i>查询</button>
							<button class="btns"><i class="fa fa-sign-in"></i>导出</button>
						</td>
						<!--<td><b>开始时间：</b><input type="text" id="strTime" class="m-kuang" /></td>
						<td><b>结束时间：</b><input type="text" id="endTime" class="m-kuang" /></td>-->
					</tr>
				</table>
			</div>
			<div class="detCon">
					<table id="table1" data-row-style="rowStyle" data-query-params="queryParams">
							<thead>
								<tr>
									<!--<th data-align="center" data-formatter="setCode1">#</th>-->
									<th data-field="code" data-align="center">ID</th>
									<th data-field="name" data-align="center">所属企业</th>
									<th data-field="num" data-align="center">文件说明</th>	
									<th data-field="finish" data-align="center" data-formatter="audio">语音文件(格式要求：8k,8bit,wav)</th>		
									<th data-field="zhuang" data-align="center" data-formatter="oper">状态</th>
									<th data-field="sheng" data-align="center">录音文件内容</th>
									<th data-align="center" data-formatter="CZ">操作</th>
								</tr>
							</thead>
						</table>
			</div>
			<div class="model audioCon">
				<div class="box">
					<div class="btop clearfix">
						<p class="btl">录音文件播放</p>
						<p class="btr adbtr"><i class="fa fa-remove"></i></p>
					</div>
					<div class="boxCon" style="min-height: 120px;">
						<audio controls="controls" class="aud" src="song.mp3">
				  <!--<source src="song.ogg" type="audio/ogg">-->
				  <!--<source src="song.mp3" type="audio/mpeg">-->
				<!--Your browser does not support the audio element.-->
				</audio>
					</div>
				</div>
				
			</div>
			<div class="model caoZuo">
				<div class="box">
					<div class="btop clearfix">
						<p class="btl">录音文件详情</p>
						<p class="btr czbtr"><i class="fa fa-remove"></i></p>
					</div>
					<div class="boxCon">
						<table class="table">
							<tr>
								<th>所属企业 :</th>
								<td class="name"></td>
							</tr>
							<tr>
								<th>文件说明:</th>
								<td class="explain"></td>
							</tr>
							<tr>
								<th>录音文件内容:</th>
								<td class="content"></td>
							</tr>
							<tr>
								<th>语音文件(格式要求：8k,8bit,wav) :</th>
								<td class="filed"></td>
							</tr>
							<tr>
								<th>状态:</th>
								<td class="state"></td>
							</tr>
							<tr>
								<th>更新时间:</th>
								<td class="refreTime"></td>
							</tr>
							<tr>
								<th>只读 :</th>
								<td class="readOnly"></td>
							</tr>
							<tr>
								<th>排序 :</th>
								<td class="sort"></td>
							</tr>
						</table>
					</div>
				</div>
				
			</div>
			
		</div>
		<script>
			
			var table1 = $('#table1');
			initTable1()
			function initTable1() {
				//先销毁表格
				table1.bootstrapTable('destroy');
				//初始化表格,动态从服务器加载数据
				table1.bootstrapTable({
					method: "get", //使用get请求到服务器获取数据
					//					url: huayi.config.callcenter_url+"Log/GetList", //获取数据的Servlet地址
					url: "../table1.json", //获取数据的Servlet地址
					contentType: 'application/x-www-form-urlencoded',
					striped: true, //表格显示条纹
					pagination: true, //启动分页
					pageSize: 2, //每页显示的记录数
					pageNumber: 1, //当前第几页
					pageList: [3, 10, 50, 100], //记录数可选列表
					search: false, //是否启用查询
					showColumns: false, //显示下拉框勾选要显示的列
					showRefresh: false, //显示刷新按钮
					sidePagination: "server", //表示服务端请求
					//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
					//设置为limit可以获取limit, offset, search, sort, order
					queryParamsType: "undefined",
					queryParams: function queryParams(params) { //设置查询参数
						var param = {
							pageindex: params.pageNumber,
							pagesize: params.pageSize,
						};
						return param;
					},
					onLoadSuccess: function() { //加载成功时执行
						//layer.msg("加载成功");
					},
					onLoadError: function() { //加载失败时执行
						//layer.msg("加载数据失败", { time: 1500, icon: 2 });
					}
				});
			}

			function setCode1(val, row, index) {
				return index + 1;
			}
			
			function CZ(val,row){
//																								 row. row.num
				return '<a title="查看语音详情" style="display:block; " href="javaScript:;" onclick= CZValue("' + row.code + '")>查看</a>'
			}
			function CZValue(code,name,num,finish,zhuang,sheng){
				$('.caoZuo').show();
				$('.name').html(name);//所属企业
				$('.explain').html(num);//文件说明
				$('.content').html(finish);//文件内容
				$('.filed').html(zhuang);//语音文件
				$('.state').html(zhuang);//状态
				$('.refreTime').html(zhuang);//更新时间
				$('.readOnly').html(zhuang);//只读
				$('.sort').html(zhuang);//排序
			}
			$('.czbtr').click(function(){
				$('.caoZuo').hide();
			})
			function oper(val,row) {
				if(val=='启用'){
					return '<span class="ztColor qiy">'+ val +'</span>'
				}else if(val=='禁用'){
					return '<span class="ztColor bany">'+ val +'</span>'
				}
   			}
			function audio(val,row) {
//				audclick("' + row.id + '")
					return '<a class="audio"  onclick= audclick()>'+ val +'</a>'
   			}
			function audclick(){
				$('.audioCon').show();
				$('.aud').attr('src','../song.mp3');
			}
			$('.adbtr').click(function(){
				$('.audioCon').hide();
				$('.aud').attr('src','');
			})
			
		</script>
	</body>

</html>