jack / photo_show · Commits

Go to a project

Authored by mlge
Commit ae4481bf95cd26328b29ce910f5929fcce52eb97 1 parent dce3d859

增加展示

Inline Side-by-side
Showing 6 changed files with 1264 additions and 0 deletions
package com.example.demo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
/**
* Created by meiling.ge on 2018/7/4.
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ImageAndSimilarResp {
private String sourceImage;
private List<String> similarImages;
}
... ...
... ... @@ -20,6 +20,9 @@ import java.util.ArrayList;
@RequestMapping(path = "/show")
public class ShowCtrl {
// private static final String DEFAULT_DIR = "E:\\图片\\demo.txt";
private static final String DEFAULT_DIR = "/home/jack/makesample/zhurui/shoes/ali_similar.info";
@Autowired
ShowSer showSer;
... ... @@ -184,5 +187,45 @@ public class ShowCtrl {
}
//跳转至样本展示页面--样本 和 前 50个展示
@GetMapping(path = "/toSamples")
public ModelAndView toSamples() {
return new ModelAndView("showSampleAndSimilar");
}
/**
* 获取样本table 分页数据
* @param req
* @param sampleDir
* @return
*/
@RequestMapping ("/loadImagesFromFile")
@ResponseBody
public PageListResp<ImageAndSimilarResp> loadImagesFromFile(PageTableReq req,String sampleDir ) {
int count = 0;
PageListResp.Builder pageListResp = PageListResp.newBuilder().iTotalDisplayRecords(count).iTotalRecords(count);
if(StringUtils.isEmpty( sampleDir )){
sampleDir = DEFAULT_DIR;
}
File file = new File(sampleDir);
if(!file.exists()){
return null;
}
count = showSer.countFileLines(file);//总行数
if( count > 0){//当前行的数据
pageListResp.iTotalDisplayRecords(count).iTotalRecords(count);
pageListResp.aaData(showSer.getImagesPyPage(file, req.getIDisplayStart(), req.getIDisplayLength()));
}else{
pageListResp.aaData(new ArrayList());
}
return pageListResp.build();
}
}
... ...
... ... @@ -421,4 +421,80 @@ public class ShowSer {
// return photoName.substring(2);//头部不显示
return photoName;
}
//统计文件的行
public int countFileLines(File file) {
int count = 0;
LineIterator lineIterator = null;
try {
lineIterator = FileUtils.lineIterator(file, "UTF-8");
while (lineIterator.hasNext()) {
lineIterator.next();
count ++;
}
} catch (IOException e) {
e.printStackTrace();
}
return count;
}
/**
*
* @param file
* @param iDisplayStart --起始行
* @param iDisplayLength --总行数（默认值是1）
* @return
*/
public List<ImageAndSimilarResp> getImagesPyPage(File file, Integer iDisplayStart, Integer iDisplayLength) {
List<ImageAndSimilarResp> result = new ArrayList<>();
try {
int currentLine = 0;//当前行
int readTotal = 0;//已经读取的行数
boolean readFlag = false;
LineIterator lineIterator = FileUtils.lineIterator(file, "UTF-8");
while(lineIterator.hasNext()){
String content = lineIterator.next();
if(iDisplayStart == currentLine){//需要解析的起始行
readFlag = true;
}
if(readFlag){
ImageAndSimilarResp obj = analyzeLineContent(content);
result.add(obj);
readTotal++;//已经读取的行数
}
if(readTotal == iDisplayLength){
break;
}
currentLine++;
}
} catch (IOException e) {
e.printStackTrace();
}
return result;
}
private ImageAndSimilarResp analyzeLineContent(String content) {
ImageAndSimilarResp obj = new ImageAndSimilarResp();
// 测试的
// String[] s = StringUtils.split(content, "-");
String[] s = StringUtils.split(content, ":");
if(s.length == 2){//正确解析的情况
obj.setSourceImage(s[0]);
String[] similars = StringUtils.split(s[1],",");
if(similars.length > 50){//前50
String[] subStr = Arrays.copyOfRange(similars, 0 , 50);
obj.setSimilarImages(Arrays.asList(subStr));
}else{
obj.setSimilarImages( Arrays.asList(similars));
}
}
return obj;
}
}
... ...
... ... @@ -130,6 +130,13 @@
<li>
<a href="toSamples">
展示 </a>
</li>
<li>
<a href="index">
相似图片展示 </a>
... ...
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Metronic | Layouts - Promo Page</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="/media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/style-metro.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/style.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="/media/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<link href="/media/css/promo.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/animate.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" media="screen"/>
<link rel="shortcut icon" href="/media/image/favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed page-full-width">
<!-- BEGIN HEADER -->
<div class="header navbar navbar-inverse navbar-fixed-top">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="navbar-inner">
<div class="container">
<!-- BEGIN LOGO -->
<a class="brand" href="index.html">
<img src="/media/image/logo.png" alt="logo" />
</a>
<!-- END LOGO -->
<!-- BEGIN HORIZANTAL MENU -->
<div class="navbar hor-menu hidden-phone hidden-tablet">
<div class="navbar-inner">
<ul class="nav">
<li class="visible-phone visible-tablet">
<!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
<form class="sidebar-search">
<div class="input-box">
<a href="javascript:;" class="remove"></a>
<input type="text" placeholder="Search..." />
<input type="button" class="submit" value=" " />
</div>
</form>
<!-- END RESPONSIVE QUICK SEARCH FORM -->
</li>
<li>
<a href="index.html">
Dashboard
</a>
</li>
<li class="active">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:;">
<span class="selected"></span>
Layouts
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li >
<a href="index">
相似图片展示 </a>
</li>
<li class="active" >
<a href="toSampleShow" >
样本展示 </a>
</li>
<li >
<a href="loadSingleImage">
单张图片展示 </a>
</li>
</ul>
<b class="caret-out"></b>
</li>
<li>
<a href="">Tables</a>
</li>
<li>
<a data-toggle="dropdown" class="dropdown-toggle" href="">Extra
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Pricing</a></li>
<li><a href="index.html">FAQs</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">Registration</a></li>
<li><a href="index.html">2 Columns (Left)</a></li>
<li><a href="index.html">2 Columns (Right)</a></li>
</ul>
<b class="caret-out"></b>
</li>
<li>
<span class="hor-menu-search-form-toggler">&nbsp;</span>
<div class="search-form hidden-phone hidden-tablet">
<form class="form-search">
<div class="input-append">
<input type="text" placeholder="Search..." class="m-wrap">
<button type="button" class="btn"></button>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
<!-- END HORIZANTAL MENU -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<img src="/media/image/menu-toggler.png" alt="" />
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN TOP NAVIGATION MENU -->
<ul class="nav pull-right">
<!-- BEGIN NOTIFICATION DROPDOWN -->
<li class="dropdown" id="header_notification_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-warning-sign"></i>
<span class="badge">6</span>
</a>
<ul class="dropdown-menu extended notification">
<li>
<p>You have 14 new notifications</p>
</li>
<li>
<a href="#">
<span class="label label-success"><i class="icon-plus"></i></span>
New user registered.
<span class="time">Just now</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-important"><i class="icon-bolt"></i></span>
Server #12 overloaded.
<span class="time">15 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-warning"><i class="icon-bell"></i></span>
Server #2 not respoding.
<span class="time">22 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-info"><i class="icon-bullhorn"></i></span>
Application error.
<span class="time">40 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-important"><i class="icon-bolt"></i></span>
Database overloaded 68%.
<span class="time">2 hrs</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-important"><i class="icon-bolt"></i></span>
2 user IP blocked.
<span class="time">5 hrs</span>
</a>
</li>
<li class="external">
<a href="#">See all notifications <i class="m-icon-swapright"></i></a>
</li>
</ul>
</li>
<!-- END NOTIFICATION DROPDOWN -->
<!-- BEGIN INBOX DROPDOWN -->
<li class="dropdown" id="header_inbox_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-envelope"></i>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu extended inbox">
<li>
<p>You have 12 new messages</p>
</li>
<li>
<a href="inbox.html?a=view">
<span class="photo"><img src="/media/image/avatar2.jpg" alt="" /></span>
<span class="subject">
<span class="from">Lisa Wong</span>
<span class="time">Just Now</span>
</span>
<span class="message">
Vivamus sed auctor nibh congue nibh. auctor nibh
auctor nibh...
</span>
</a>
</li>
<li>
<a href="inbox.html?a=view">
<span class="photo"><img src="/media/image/avatar3.jpg" alt="" /></span>
<span class="subject">
<span class="from">Richard Doe</span>
<span class="time">16 mins</span>
</span>
<span class="message">
Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
auctor nibh...
</span>
</a>
</li>
<li>
<a href="inbox.html?a=view">
<span class="photo"><img src="/media/image/avatar1.jpg" alt="" /></span>
<span class="subject">
<span class="from">Bob Nilson</span>
<span class="time">2 hrs</span>
</span>
<span class="message">
Vivamus sed nibh auctor nibh congue nibh. auctor nibh
auctor nibh...
</span>
</a>
</li>
<li class="external">
<a href="inbox.html">See all messages <i class="m-icon-swapright"></i></a>
</li>
</ul>
</li>
<!-- END INBOX DROPDOWN -->
<!-- BEGIN TODO DROPDOWN -->
<li class="dropdown" id="header_task_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-tasks"></i>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu extended tasks">
<li>
<p>You have 12 pending tasks</p>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">New release v1.2</span>
<span class="percent">30%</span>
</span>
<span class="progress progress-success ">
<span style="width: 30%;" class="bar"></span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Application deployment</span>
<span class="percent">65%</span>
</span>
<span class="progress progress-danger progress-striped active">
<span style="width: 65%;" class="bar"></span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Mobile app release</span>
<span class="percent">98%</span>
</span>
<span class="progress progress-success">
<span style="width: 98%;" class="bar"></span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Database migration</span>
<span class="percent">10%</span>
</span>
<span class="progress progress-warning progress-striped">
<span style="width: 10%;" class="bar"></span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Web server upgrade</span>
<span class="percent">58%</span>
</span>
<span class="progress progress-info">
<span style="width: 58%;" class="bar"></span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Mobile development</span>
<span class="percent">85%</span>
</span>
<span class="progress progress-success">
<span style="width: 85%;" class="bar"></span>
</span>
</a>
</li>
<li class="external">
<a href="#">See all tasks <i class="m-icon-swapright"></i></a>
</li>
</ul>
</li>
<!-- END TODO DROPDOWN -->
<!-- BEGIN USER LOGIN DROPDOWN -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img alt="" src="/media/image/avatar1_small.jpg" />
<span class="username">Bob Nilson</span>
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="extra_profile.html"><i class="icon-user"></i> My Profile</a></li>
<li><a href="page_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li>
<li><a href="inbox.html"><i class="icon-envelope"></i> My Inbox(3)</a></li>
<li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>
<li class="divider"></li>
<li><a href="extra_lock.html"><i class="icon-lock"></i> Lock Screen</a></li>
<li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
<!-- END TOP NAVIGATION MENU -->
</div>
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
<!-- BEGIN EMPTY PAGE SIDEBAR -->
<div class="page-sidebar nav-collapse collapse visible-phone visible-tablet">
<ul class="page-sidebar-menu">
<li class="visible-phone visible-tablet">
<!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
<form class="sidebar-search">
<div class="input-box">
<a href="javascript:;" class="remove"></a>
<input type="text" placeholder="Search..." />
<input type="button" class="submit" value=" " />
</div>
</form>
<!-- END RESPONSIVE QUICK SEARCH FORM -->
</li>
<li>
<a class="active" href="index.html">
Dashboard
</a>
</li>
<li class="active">
<a href="javascript:;">
Layouts
<span class="arrow open"></span>
<span class="selected"></span>
</a>
<ul class="sub-menu">
<li>
</li>
<li >
</li>
<li >
</li>
<li >
<a href="layout_promo.html">
Promo Page
</a>
</li>
<li >
<a href="layout_email.html">
Email Templates </a>
</li>
<li >
<a href="layout_ajax.html">
Content Loading via Ajax</a>
</li>
<li >
<a href="layout_sidebar_closed.html">
Sidebar Closed Page </a>
</li>
<li >
<a href="layout_blank_page.html">
Blank Page </a>
</li>
<li >
<a href="layout_boxed_page.html">Boxed Page</a>
</li>
<li >
<a href="layout_boxed_not_responsive.html">
Non-Responsive Boxed Layout </a>
</li>
<li >
<a href="layout_blank_page.html">
Blank Page </a>
</li>
<li>
<a href="javascript:;">
More options
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li><a href="#">Second level link</a></li>
<li>
<a href="javascript:;">More options<span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="index.html">Third level link</a></li>
<li><a href="index.html">Third level link</a></li>
<li><a href="index.html">Third level link</a></li>
<li><a href="index.html">Third level link</a></li>
<li><a href="index.html">Third level link</a></li>
</ul>
</li>
<li><a href="index.html">Second level link</a></li>
<li><a href="index.html">Second level link</a></li>
<li><a href="index.html">Second level link</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Tables</a>
</li>
<li>
<a href="">Extra
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Pricing</a></li>
<li><a href="index.html">FAQs</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">Registration</a></li>
<li><a href="index.html">2 Columns (Left)</a></li>
<li><a href="index.html">2 Columns (Right)</a></li>
</ul>
</li>
</ul>
</div>
<!-- END EMPTY PAGE SIDEBAR -->
<!-- BEGIN PAGE -->
<div class="page-content no-min-height">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<div id="portlet-config" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"></button>
<h3>portlet Settings</h3>
</div>
<div class="modal-body">
<p>Here will be a configuration form</p>
</div>
</div>
<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid promo-page">
<div class="row-fluid">
<div class="span12" style=" margin-top: 30px;margin-bottom: 20px;margin-left: 20px;">
<div class="form-inline" style="min-height: 40px;" >
<div class="form-group">
<input id="sampleDir" name="sampleDir" type="text" placeholder="sample目录名称" class="span2"/>
<button id="sampleLoad" type="button" class="btn blue" onclick="sampleLoad()">sampleLoad</button>
</div>
</div>
</div>
</div>
<div class="row-fluid" >
<div class="span12" >
<table id = "sampleTable" class="table table-striped table-bordered table-hover" >
</table>
</div>
</div>
<#-- <div class="row-fluid">
<div class="span12" >
<button onclick='chooseAll()'type="button" class="btn blue" style="float:right;width: 500px">标识当前页</button>
</div>
</div>-->
<!-- BEGIN PAGE CONTENT-->
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
</div>
<script src="/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="/media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="/media/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.uniform.min.js" type="text/javascript" ></script>
<script src="/media/js/app.js"></script>
<script src="/media/js/jquery.dataTables.js"></script>
<script>
jQuery(document).ready(function() {
App.init();
jQuery('#promo_carousel').carousel({
interval: 10000,
pause: 'hover'
});
initSampleTable();//初始化表格，默认值
});
var sampleDir = "";
var sampleTable;
function sampleLoad(){
sampleDir = $("#sampleDir").val();
initSampleTable();
}
function initSampleTable () {
sampleTable = $("#sampleTable").dataTable({
iDisplayLength: 1,
bProcessing: true,
bServerSide: true,
bSort: false,
bFilter: false,
bAutoWidth: false,
bDestroy: true,
sPaginationType: "full_numbers",
oLanguage: {
sUrl: "/media/js/cn.txt"
},
sDom: "tr<'row-fluid'<'span6'i><'span6'p>>",
sAjaxSource: encodeURI("/show/loadImagesFromFile?sampleDir="+sampleDir),
sServerMethod: "POST",
aoColumnDefs: [
{ sWidth: "100%", aTargets: [0] ,},
/* { sWidth: "30%", aTargets: [1] },
{ sWidth: "30%", aTargets: [2] },
{ sWidth: "10%", aTargets: [3] }*/
],
aoColumns: [
{sTitle: "原文件", mData: function(mData){
var sourceUrl = encodeURI("/show/readAli?file="+mData.sourceImage);
var sourceLine = " <div class='row'><img src='" +sourceUrl + "' ></div>";
var similars = mData.similarImages;
var similarLine = "";
for(var i = 0; i< similars.length; i++){
if(i > 0 && i %10 == 0){
similarLine += "</br>";//换行
}
var similarUrl = encodeURI("/show/readAli?file="+similars[i]);
similarLine +=" <span style='width: 10%'><img src='"+similarUrl+"' ></span>";
}
var result_div = "<div style='text-align: center'>" + sourceLine + "</br><hr>" + similarLine;
return result_div;
}}
],
/* fnServerParams: function (aoData) {
console.log();
aoData.iDisplayStart
// aoData = $.merge(aoData, that.getQueryParams());
},*/
/* fnDrawCallback: function(table) {
// /!* $(".dataTables_paginate paging_full_numbers").append("跳转");
//首次加载的时候才需要加入如下代码：
var jump_element =document.getElementById("jumpPageIndex");
if (typeof(jump_element)== "undefined" || jump_element == null){
var pageFoot = $("div[class='dataTables_paginate paging_full_numbers']");
var appendHtml = "跳转至："+'<input id="jumpPageIndex" style="width:40px">'+"页";
pageFoot.append(appendHtml);
$("#jumpPageIndex").keydown(function(event) {
if (event.which == "13") {
var jumpPageIndex = $("#jumpPageIndex").val();
//跳转 table
var i = parseInt(jumpPageIndex);
sampleTable.fnPageChange(i - 1, true);
}
});
}else{
console.log("不加载");
}
}*/
});
}
</script>
</body>
<!-- END BODY -->
</html>
\ No newline at end of file
... ...
... ... @@ -129,6 +129,13 @@
</a>
<ul class="dropdown-menu">
<li>
<a href="toSamples">
展示 </a>
</li>
<li >
... ...