mirror of
https://github.com/Hello-hao/Tbed.git
synced 2024-04-21 12:32:10 +00:00
540 lines
23 KiB
HTML
540 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
<title>本站概况</title>
|
||
<link rel="shortcut icon" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico" type="image/x-icon"/>
|
||
<link rel="icon" type="image/ico" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico"/>
|
||
<link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
|
||
<link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
|
||
<link th:href="@{/static/css/style.css}" rel="stylesheet" type="text/css"/>
|
||
<link th:href="@{/static/css/toastr.min.css}" media="all" rel="stylesheet" type="text/css"/>
|
||
<link th:href="@{/static/css/login-register.css}" media="all" rel="stylesheet" type="text/css"/>
|
||
<link th:href="@{/static/css/bootstrap-table.css}" media="all" rel="stylesheet" type="text/css"/>
|
||
<link th:href="@{/static/css/sweetalert.min.css}" media="all" rel="stylesheet" type="text/css"/>
|
||
<link rel="stylesheet" type="text/css" media="all" th:href="@{/static/css/daterangepicker-bs3.css}" />
|
||
<link rel="stylesheet" th:href="@{/layui/layui/css/layui.css}">
|
||
<script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
|
||
<script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
|
||
<script th:src="@{/static/js/toastr.min.js}" type="text/javascript"></script>
|
||
<script th:src="@{/static/js/login-register.js}"></script>
|
||
<script th:src="@{/static/bootstrap-3.3.4-dist/js/bootstrap-table-hellohao1.13.1.js}"></script>
|
||
<script th:src="@{/static/js/clipboard.min.js}"></script>
|
||
<script th:src="@{/static/js/jqBootstrapValidation.min.js}"></script>
|
||
<script th:src="@{/static/js/bootbox.min.js}"></script>
|
||
<script th:src="@{/static/js/sweetalert.min.js}"></script>
|
||
<script th:src="@{/layui/layui/layui.js}"></script>
|
||
<script type="text/javascript" th:src="@{/static/js/mustache.min.js}"></script>
|
||
|
||
<script th:src="@{/static/js/moment.js}"></script>
|
||
<script th:src="@{/static/js/daterangepicker.js}"></script>
|
||
|
||
<!-- 样式 -->
|
||
<style type="text/css">
|
||
.kv-main {
|
||
padding: 13px;
|
||
}
|
||
pre {
|
||
color: #000;
|
||
line-height: 16px;
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container kv-main">
|
||
<!--
|
||
<p id="" style="font-weight: bold;">本站概况</p>
|
||
<hr/>
|
||
<section class="content">
|
||
|
||
<div class="row" style="margin-bottom:5px;">
|
||
<div class="col-md-3">
|
||
<div class="sm-st clearfix">
|
||
<span class="sm-st-icon st-blue"><i class="fa fa-image"></i></span>
|
||
<div style="font-weight:500;font-family:黑体；" class="sm-st-info">
|
||
<span id="counts" ></span>
|
||
本站图片总数
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="sm-st clearfix">
|
||
<span class="sm-st-icon st-violet"><i class="fa fa-user"></i></span>
|
||
<div style="font-weight:500;font-family:黑体；" class="sm-st-info">
|
||
<span id="getusertotal" >0</span>
|
||
本站用户总数
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="sm-st clearfix">
|
||
<span class="sm-st-icon st-red"><i class="glyphicon glyphicon-ban-circle"></i></span>
|
||
<div style="font-weight:500;font-family:黑体；" class="sm-st-info">
|
||
<span id="imgreviewcount" >0</span>
|
||
本站拦截非法图片
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="sm-st clearfix">
|
||
<span class="sm-st-icon st-green"><i class="fa fa-paperclip"></i></span>
|
||
<div style="font-weight:500;font-family:黑体；" class="sm-st-info">
|
||
<span id="source"></span>
|
||
系统储源源
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
-->
|
||
<div id="isimgs">
|
||
<!--分页 -->
|
||
<!-- <div id="mytext" style="font-weight: bold;">我的图片：-->
|
||
<!-- <span id="usercount" class="label label-info" style="font-weight: bold;font-size: 18px;">0</span>-->
|
||
<!-- </div>-->
|
||
|
||
<table class="table table-bordered ft-table table-hover" id="table_server">
|
||
<hr/>
|
||
<div class="btn-group">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false">
|
||
批量操作 <span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" onclick="deleall();">删除选中</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="btn-group" th:if=" ${level} gt '1'">
|
||
<span style="margin-left: 70px;line-height: 36px;">列表显示：</span>
|
||
</div>
|
||
<div class="btn-group" th:if=" ${level} gt '1'">
|
||
<select id="myselect" class="form-control">
|
||
<option value="1" checked="checked">所有人</option>
|
||
<option value="2">仅自己</option>
|
||
</select>
|
||
</div>
|
||
<div class="btn-group">
|
||
<span style="margin-left: 20px;line-height: 36px;">存储源：</span>
|
||
</div>
|
||
<div class="btn-group">
|
||
<select id="StorageType" class="form-control">
|
||
<option value="0">所有</option>
|
||
<option value="1">网易NOS</option>
|
||
<option value="2">阿里OSS</option>
|
||
<option value="3">又拍USS</option>
|
||
<option value="4">七牛云KODO</option>
|
||
</select>
|
||
</div>
|
||
<div class="btn-group">
|
||
<span style="margin-left: 20px;line-height: 36px;">时间：</span>
|
||
</div>
|
||
<div class="input-prepend input-group">
|
||
<span class="add-on input-group-addon" onclick="thisclear()">
|
||
<i class="glyphicon glyphicon-repeat" ></i>
|
||
</span>
|
||
<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" />
|
||
<div class="btn-group">
|
||
<a style="margin-left: 50px;" type="button" class="btn btn-info" onclick="screening();">筛选</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
<hr/>
|
||
<!--<footer class="footer " th:include="footer::foot"></footer>-->
|
||
<img id="linshi" style="display:none;" src="#"/>
|
||
</body>
|
||
|
||
<script type="application/javascript">
|
||
var layer;
|
||
layui.use('layer', function () {
|
||
layer = layui.layer;
|
||
});
|
||
|
||
var t;
|
||
$(function () {
|
||
var loginid = [[${loginid}]];
|
||
//var source = [[${source}]];
|
||
// $("#source").text(str);
|
||
toastr.options.positionClass = 'toast-bottom-right';
|
||
toastr.options = {
|
||
closeButton: true,//是否显示关闭按钮
|
||
debug: false,
|
||
progressBar: true,
|
||
positionClass: "toast-bottom-right",
|
||
onclick: null,
|
||
showDuration: "300",
|
||
hideDuration: "1000",
|
||
timeOut: "2000",
|
||
extendedTimeOut: "1000",
|
||
showEasing: "swing",
|
||
hideEasing: "linear",
|
||
showMethod: "fadeIn",
|
||
hideMethod: "fadeOut"
|
||
};
|
||
//日历表单
|
||
$(document).ready(function() {
|
||
$('#reservation').daterangepicker(null, function(start, end, label) {
|
||
//console.log(start.toISOString(), end.toISOString(), label);
|
||
});
|
||
});
|
||
|
||
// 分页
|
||
fenye('/admin/selecttable', 1);//1代表查询所有人
|
||
|
||
// $("#myselect").change(function () {
|
||
// var opt = $("#myselect").val();
|
||
// // 先销毁table中的数据
|
||
// $("#table_server").bootstrapTable('destroy');
|
||
// fenye('/admin/selecttable', opt);
|
||
// });
|
||
|
||
//获取本站概况
|
||
// $.ajax({
|
||
// type: "POST",
|
||
// url: "/admin/getwebconfig",
|
||
// dataType: "json",
|
||
// success: function (data) {
|
||
// $("#counts").text(data.counts);
|
||
// $("#getusertotal").text(data.getusertotal);
|
||
// $("#imgreviewcount").text(data.imgreviewcount);
|
||
// $("#usercount").text(data.usercount);
|
||
// var str = "";
|
||
// if (data.source == 1) {
|
||
// str = "网易NOS";
|
||
// } else if (data.source == 2) {
|
||
// str = "阿里OSS";
|
||
// } else if (data.source == 3) {
|
||
// str = "又拍USS";
|
||
// } else if (data.source == 4) {
|
||
// str = '七牛KODO';
|
||
// } else {
|
||
// str = '未知';
|
||
// }
|
||
// $("#source").text(str);
|
||
// }
|
||
// });
|
||
|
||
|
||
});
|
||
function screening(){
|
||
$("#table_server").bootstrapTable('destroy');
|
||
var myselect = $('#myselect').val();
|
||
var StorageType = $('#StorageType').val();
|
||
var reservation = $('#reservation').val();
|
||
var arr=new Array();
|
||
if(reservation!=''){
|
||
arr=reservation.split(' - ');
|
||
fenye('/admin/selecttable', myselect,StorageType,arr[0],arr[1]);
|
||
}else{
|
||
fenye('/admin/selecttable', myselect,StorageType,null,null);
|
||
}
|
||
|
||
}
|
||
function deleall() {
|
||
swal({
|
||
title: "确认删除选中图片？",
|
||
text: "删除后将无法恢复，请谨慎操作。",
|
||
type: "warning",
|
||
showCancelButton: true,//true显示两个按钮
|
||
confirmButtonColor: "#A5DC86",
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
//closeOnConfirm: true,
|
||
//closeOnCancel: false
|
||
},
|
||
function (isConfirm) {
|
||
if (isConfirm) {
|
||
var rows = $("#table_server").bootstrapTable('getSelections');
|
||
if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
|
||
swal("请先勾选图片再删除", "目前未选中任何图片", "error");
|
||
return;
|
||
} else {
|
||
var ids = new Array();// 声明一个数组
|
||
$(rows).each(function () {// 通过获得别选中的来进行遍历
|
||
ids.push(this.id);// cid为获得到的整条数据中的一列
|
||
});
|
||
deleallimg(ids);
|
||
}
|
||
|
||
} else {//swal("取消！", "你的虚拟文件是安全的:)","error");
|
||
//return;
|
||
}
|
||
});
|
||
}
|
||
|
||
function deleallimg(ids) {
|
||
layer.load(1);
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/admin/deleallimg",
|
||
data: {ids: ids},
|
||
dataType: "json",
|
||
success: function (data) {
|
||
if (data.val > 0) {
|
||
layer.closeAll('loading');
|
||
$("#table_server").bootstrapTable('refresh', t);
|
||
swal({
|
||
title: "删除成功",
|
||
text: "已成功删除所选图片。",
|
||
type: "success",
|
||
showCancelButton: false,//true显示两个按钮
|
||
confirmButtonColor: "#A5DC86",
|
||
confirmButtonText: "确定",
|
||
//cancelButtonText: "取消删除！",
|
||
closeOnConfirm: true,
|
||
closeOnCancel: false
|
||
},
|
||
function (isConfirm) {
|
||
if (isConfirm) {
|
||
//swal("我知道了！", "你已经点确认了。","success");
|
||
} else {//swal("取消！", "你的虚拟文件是安全的:)","error");
|
||
}
|
||
});
|
||
|
||
} else {
|
||
layer.closeAll('loading');
|
||
//swal("删除失败", "您所选的图片没有完全删除","error");
|
||
$("#table_server").bootstrapTable('refresh', t);
|
||
}
|
||
$("#imgcount").text(data.count);
|
||
$("#usercount").text(data.usercount);
|
||
$("#imgreviewcount").text(data.imgreviewcount);
|
||
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
function exit() {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/user/exit.do",
|
||
dataType: "json",
|
||
success: function (data) {
|
||
toastr.success("账号已退出。");
|
||
window.location.reload();
|
||
}
|
||
});
|
||
}
|
||
|
||
//删除
|
||
function deleimg(id, sourcekey) {
|
||
swal({
|
||
title: "确认是否删除该图片?",
|
||
text: "删除后将无法恢复，请谨慎操作。",
|
||
type: "warning",
|
||
showCancelButton: true,//true显示两个按钮
|
||
confirmButtonColor: "#A5DC86",
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
},
|
||
function (isConfirm) {
|
||
if (isConfirm) {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/admin/deleimg",
|
||
data: {id: id, sourcekey: sourcekey},
|
||
dataType: "json",
|
||
success: function (data) {
|
||
if (data.val > 0) {
|
||
$("#table_server").bootstrapTable('refresh', t);
|
||
toastr.success("删除成功");
|
||
$("#imgcount").text(data.count);
|
||
$("#usercount").text(data.usercount);
|
||
} else {
|
||
toastr.error("删除失败");
|
||
$("#table_server").bootstrapTable('refresh', t);
|
||
}
|
||
}
|
||
});
|
||
} else {//swal("取消！", "你的虚拟文件是安全的:)","error");
|
||
return;
|
||
}
|
||
});
|
||
}
|
||
|
||
function copy(data) {
|
||
var copy = new ClipboardJS('.btn', {
|
||
text: function (trigger) {
|
||
return data;
|
||
}
|
||
});
|
||
copy.on('success', function (e) {
|
||
toastr.success("复制成功");
|
||
copy.off("success");
|
||
});
|
||
copy.on('error', function (e) {
|
||
toastr.error("复制失败");
|
||
copy.off("error");
|
||
});
|
||
}
|
||
|
||
function lookimgs(urls) {
|
||
layer.load(1);
|
||
var w = 0;
|
||
var h = 0;
|
||
var dw = document.body.clientWidth;
|
||
var dh = document.body.clientHeight;
|
||
$("#linshi").attr('src', urls);
|
||
$("#linshi").off("load");
|
||
$("#linshi").on("load", function () {
|
||
w = $(this).width();
|
||
h = $(this).height();
|
||
layer.closeAll('loading');
|
||
layer.open({
|
||
type: 1,
|
||
title: false,
|
||
closeBtn: 0,
|
||
area: 'auto',
|
||
skin: 'layui-layer-nobg', //没有背景色
|
||
shadeClose: true,
|
||
content: '<div style="width:'+ dw * 0.7 + 'px;height:auto;text-align:center;float:none;margin-left:auto;margin-right:auto;"></div><img style="height: 100%;width: 100%;max-width:' + dw * 0.7 + 'px;max-height: ' + dh * 0.7 + 'px" src="' + urls + '">'
|
||
});
|
||
});
|
||
|
||
}
|
||
|
||
function fenye(url, selecttype,StorageType,starttime,stoptime) {
|
||
t = $("#table_server").bootstrapTable({
|
||
url: url,
|
||
method: 'get',
|
||
cache: false,//关闭本地磁盘缓存，
|
||
dataType: "json",
|
||
striped: true,//设置为 true 会有隔行变色效果
|
||
undefinedText: "空",//当数据为 undefined 时显示的字符
|
||
pagination: true, //分页
|
||
showRefresh: true,
|
||
paginationLoop: true,//设置为 true 启用分页条无限循环的功能。
|
||
showToggle: "true",//是否显示 切换试图（table/card）按钮
|
||
showColumns: "true",//是否显示 内容列下拉框
|
||
pageNumber: 1,//如果设置了分页，首页页码
|
||
// showPaginationSwitch:true,//是否显示 数据条数选择框
|
||
pageSize: 10,//如果设置了分页，页面数据条数
|
||
pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
|
||
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
|
||
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
|
||
// singleSelect: false,//设置True 将禁止多选
|
||
search: false, //显示搜索框
|
||
data_local: "zh-CN",//表格汉化
|
||
sidePagination: "server", //服务端处理分页
|
||
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
|
||
return {//这里的params是table提供的
|
||
pageNum: (params.offset / params.limit) + 1,//从数据库第几条记录开始
|
||
pageSize: params.limit//找多少条
|
||
, selecttype: selecttype
|
||
,storageType:StorageType
|
||
,starttime:starttime
|
||
,stoptime:stoptime
|
||
};
|
||
},
|
||
idField: "链接",//指定主键列
|
||
columns: [{
|
||
checkbox: true
|
||
},
|
||
// {
|
||
// title: '#',//表的列名<input id="isall" type="checkbox" onclick="checkboxOnclick(this)">
|
||
// formatter: function (value, rows, index) {
|
||
// //return index+1; //序号正序排序从1开始
|
||
// var pageSize = $('#table_server').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
|
||
// var pageNumber = $('#table_server').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
|
||
// return pageSize * (pageNumber - 1) + index + 1; //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
|
||
// },
|
||
// align: 'center'//水平居中
|
||
// },
|
||
{
|
||
title: '链接',
|
||
formatter: function (value, rows, index) {
|
||
var view = {
|
||
imgurl: rows.imgurl
|
||
};
|
||
var output = Mustache.render('<a style="cursor:pointer;" onclick="lookimgs(\'{{&imgurl}}\')">{{imgurl}}</a>', view);
|
||
return output;
|
||
//return "<a style=\"cursor:pointer;\" onclick='lookimgs(\"" + rows.imgurl + "\");'>" + rows.imgurl + "</a>";
|
||
},
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '日期',
|
||
field: 'updatetime',
|
||
align: 'center'
|
||
},
|
||
{
|
||
//EMAIL
|
||
title: '大小',
|
||
formatter: function (value, rows, index) {
|
||
return rows.sizes + "k";
|
||
},
|
||
align: 'center'
|
||
},
|
||
{
|
||
//EMAIL
|
||
title: '存储源',
|
||
formatter: function (value, rows, index) {
|
||
var source = '';
|
||
if (rows.source == 1) {
|
||
source = '网易NOS';
|
||
} else if (rows.source == 2) {
|
||
source = '阿里OSS';
|
||
} else if (rows.source == 3) {
|
||
source = '又拍USS';
|
||
} else if (rows.source == 4) {
|
||
source = '七牛KODO';
|
||
} else {
|
||
source = '未知';
|
||
}
|
||
return source;
|
||
},
|
||
align: 'center'
|
||
},
|
||
{
|
||
//EMAIL
|
||
title: '用户',
|
||
formatter: function (value, rows, index) {
|
||
var names = "";
|
||
if (rows.username == null) {
|
||
names = "游客";
|
||
} else {
|
||
names = rows.username;
|
||
}
|
||
return names;
|
||
},
|
||
align: 'center'
|
||
},
|
||
{
|
||
//部门名字
|
||
title: '操作',
|
||
formatter: function (value, rows, index) {
|
||
var htm = "<a onclick='deleimg(" + rows.id + "," + rows.source + ")' class='btn btn-danger btn-xs'>删除</a>" + " ";
|
||
htm += '<a onclick="copy(\'' + rows.imgurl +
|
||
'\')" class="btn btn-info btn-xs">复制</a>';
|
||
return htm;
|
||
},
|
||
align: 'center'
|
||
}
|
||
]
|
||
});
|
||
t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
|
||
console.log("load success");
|
||
$(".pull-right").css("display", "block");
|
||
});
|
||
}
|
||
|
||
function thisclear() {
|
||
$('#reservation').val('');
|
||
}
|
||
|
||
</script>
|
||
</html> |