680 lines
20 KiB
HTML
680 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>设备</title>
|
||
<link rel="stylesheet" type="text/css" href="../../js/layui-v2.9.18/css/layui.css"/>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<form class="layui-form">
|
||
<!-- 类型选择 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">类型选择：</label>
|
||
<div class="layui-input-inline">
|
||
<select name="type" lay-verify="required"lay-filter="typeFilter">
|
||
<option value="">请选择类型</option>
|
||
<option value="3">图片</option>
|
||
<option value="2">音频</option>
|
||
<option value="1">广告屏</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每天时间段 -->
|
||
<div class="layui-form-item" id="dailyTimeRange">
|
||
<label class="layui-form-label" style="color: white">每天时间段：</label>
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="startTime" class="layui-input" id="startTime" placeholder="开始时间">
|
||
</div>
|
||
<div class="layui-form-mid" style="color:white;">-</div>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="endTime" class="layui-input" id="endTime" placeholder="结束时间">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 文件上传 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">文件上传：</label>
|
||
<div class="layui-input-block">
|
||
<div class="upload-btns">
|
||
<button type="button" class="layui-btn" id="uploadBtn">
|
||
<i class="layui-icon"></i>选择文件
|
||
</button>
|
||
<div class="upload-tips">支持图片、视频、音频文件，单个文件不超过50MB</div>
|
||
</div>
|
||
<div class="upload-area">
|
||
<div class="file-list" id="fileList"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fixed-bottom">
|
||
<button type="button" class="submit-btn" lay-submit lay-filter="formSubmit">
|
||
<span class="btn-text">确认提交</span>
|
||
<i class="layui-icon loading-icon" style="display: none;"></i>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<script type="text/javascript" src="../../js/core/jquery-3.6.0.js"></script>
|
||
<script type="text/javascript" src="../../js/layui-v2.9.18/layui.js"></script>
|
||
<script src="../../js/core/public.js" type="text/javascript"></script>
|
||
<script>
|
||
let form, layer, laydate;
|
||
layui.use(['form', 'laydate','layer', 'upload'], function(){
|
||
var UPLOAD_FILES;
|
||
form = layui.form,
|
||
layer = layui.layer,
|
||
upload = layui.upload;
|
||
laydate = layui.laydate;
|
||
|
||
//上传文件代码
|
||
var uploadFiles = []; // 用于存储上传的文件对象
|
||
var pushFiles = {}
|
||
var upInit =upload.render({
|
||
elem: '#uploadBtn',
|
||
accept: 'file', // 允许所有类型文件
|
||
acceptMime: 'video/*,audio/*,image/*', // 只显示视频、音频、图片文件
|
||
url: '', // 上传接口
|
||
auto: false,
|
||
multiple: false, // 只允许选择一个文件
|
||
choose: function(obj){
|
||
// 清空文件输入框，以允许重新选择相同的文件
|
||
upInit.config.elem.next()[0].value = ''; // 清空文件输入框
|
||
var files = pushFiles = obj.pushFile(); // 获取文件对象数组
|
||
if (uploadFiles.length >= 1) {
|
||
layer.msg('只能上传一个文件');
|
||
return;
|
||
}
|
||
obj.preview(function(index, file, result){
|
||
// 添加新文件
|
||
uploadFiles.push(file);
|
||
// 隐藏已有文件项
|
||
$('.file-item.existing-file').hide(); // 隐藏具有 existing-file 类的文件项
|
||
/* if(file === files[index]) {
|
||
debugger
|
||
} */
|
||
// 添加文件到预览列表
|
||
var fileList = $('#fileList');
|
||
fileList.append(`
|
||
<div class="file-item" data-index="${uploadFiles.length - 1}">
|
||
<div class="file-preview">
|
||
${file.type.indexOf('image') !== -1
|
||
? `<img src="${result}" alt="${file.name}">`
|
||
: '<i class="layui-icon file-icon"></i>'}
|
||
</div>
|
||
<div class="file-name">${file.name}</div>
|
||
<div class="delete-file" data-file-index="${index}">
|
||
<i class="layui-icon">ဆ</i>
|
||
</div>
|
||
</div>
|
||
`);
|
||
});
|
||
}
|
||
});
|
||
|
||
// 删除文件
|
||
$(document).on('click', '.delete-file', function(){
|
||
debugger
|
||
var fileItem = $(this).closest('.file-item');
|
||
var index = fileItem.data('index'); // 获取文件项的索引
|
||
// 从 uploadFiles 数组中移除文件
|
||
var file = uploadFiles.splice(index, 1); // 使用正确的索引删除文件
|
||
var fileIndex = $(this).data('fileIndex')
|
||
delete pushFiles[fileIndex]
|
||
upInit.config.elem.next()[0].value = '';
|
||
fileItem.remove(); // 从页面中移除文件项
|
||
// 清空文件输入框，以允许重新选择相同的文件
|
||
});
|
||
|
||
|
||
|
||
laydate.render({
|
||
elem: '#startTime',
|
||
type: 'time',
|
||
format: 'HH:mm', // 只显示时和分
|
||
btns: ['clear', 'confirm'],
|
||
theme: '#00e0ff',
|
||
trigger: 'click', // 增加触发方式
|
||
ready: function(date) {
|
||
// 移除其他的时间选择器，只保留当前的
|
||
var currentPicker = $('.layui-laydate').last();
|
||
$('.layui-laydate').not(currentPicker).remove();
|
||
},
|
||
done: function (value, date) {
|
||
// 选择后的回调
|
||
// 每次打开时清空输入框
|
||
console.log('开始时间:', value);
|
||
}
|
||
});
|
||
|
||
// 渲染结束时间选择器
|
||
laydate.render({
|
||
elem: '#endTime',
|
||
type: 'time',
|
||
format: 'HH:mm', // 只显示时和分
|
||
btns: ['clear', 'confirm'],
|
||
theme: '#00e0ff',
|
||
trigger: 'click', // 增加触发方式
|
||
ready: function(date) {
|
||
// 移除其他的时间选择器，只保留当前的
|
||
var currentPicker = $('.layui-laydate').last();
|
||
$('.layui-laydate').not(currentPicker).remove();
|
||
},
|
||
done: function (value, date) {
|
||
console.log('结束时间:', value);
|
||
}
|
||
});
|
||
// 存储上传文件的数组
|
||
var uploadFiles = [];
|
||
|
||
// 监听表单提交
|
||
form.on('submit(formSubmit)', function(data){
|
||
// 获取各个字段的值
|
||
var formType = data.field.type;
|
||
var startTime = data.field.startTime;
|
||
var endTime = data.field.endTime;
|
||
// 表单验证
|
||
if (!formType) {
|
||
layer.msg('请选择类型');
|
||
return false;
|
||
}
|
||
if (!startTime || !endTime) {
|
||
layer.msg('请选择时间范围');
|
||
return false;
|
||
}
|
||
if (uploadFiles.length === 0) {
|
||
layer.msg('请至少上传一个文件');
|
||
return false;
|
||
}
|
||
// 文件大小限制（50MB）
|
||
const maxFileSize = 50 * 1024 * 1024; // 50MB
|
||
for (let file of uploadFiles) {
|
||
if (file.size > maxFileSize) {
|
||
layer.msg('文件大小不能超过50MB');
|
||
return false;
|
||
}
|
||
}
|
||
// 用户点击确认后，构建FormData并提交
|
||
var formData = new FormData();
|
||
// 添加表单数据
|
||
formData.append('type', formType);
|
||
formData.append('startTime', startTime);
|
||
formData.append('endTime', endTime);
|
||
|
||
// 添加文件
|
||
uploadFiles.forEach((file, index) => {
|
||
formData.append(`files`, file);
|
||
});
|
||
// 文件格式验证
|
||
for(let file of uploadFiles) {
|
||
if(!validateFileFormat(formType, file)) {
|
||
return false;
|
||
}
|
||
}
|
||
// 发送请求
|
||
$.ajax({
|
||
url: dataUrl + 'lamp/videocommonent',
|
||
type: 'POST',
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false,
|
||
success: function(res) {
|
||
if (res.code === 200) {
|
||
layer.msg("下发成功", {icon: 1, time: 2000}, function () {
|
||
//关闭当前layui弹窗
|
||
let index = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(index); //再执行关闭
|
||
//刷新父页面
|
||
window.parent.location.reload();
|
||
|
||
});
|
||
} else {
|
||
layer.msg(res.msg || '下发失败，请重试');
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
layer.msg('提交失败：' + error);
|
||
}
|
||
});
|
||
|
||
|
||
return false; // 阻止表单默认提交
|
||
});
|
||
function validateFileFormat(type, file) {
|
||
const fileName = file.name.toLowerCase();
|
||
switch(type) {
|
||
case '3': // 图片
|
||
if(!fileName.endsWith('.png')) {
|
||
layer.msg('只能上传PNG格式的图片文件');
|
||
return false;
|
||
}
|
||
break;
|
||
|
||
case '2': // 音频
|
||
if(!fileName.endsWith('.mp3')) {
|
||
layer.msg('只能上传MP3格式的音频文件');
|
||
return false;
|
||
}
|
||
break;
|
||
|
||
case '1': // 视频
|
||
if(!fileName.endsWith('.mp4')) {
|
||
layer.msg('只能上传MP4格式的视频文件');
|
||
return false;
|
||
}
|
||
break;
|
||
|
||
default:
|
||
layer.msg('未知的文件类型');
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
// 监听选择框
|
||
form.on('select(typeFilter)', function(data){
|
||
var type = data.value; // 获取选中的值
|
||
$.ajax({
|
||
url: dataUrl + 'lamp/getVideoCommandInfo',
|
||
type: 'POST',
|
||
data: {
|
||
type: type
|
||
},
|
||
success: function(res) {
|
||
if(res.data == null){
|
||
$("#startTime").val("");
|
||
$("#endTime").val("");
|
||
// 清空文件列表
|
||
uploadFiles = [];
|
||
$('#fileList').empty();
|
||
return;
|
||
}
|
||
|
||
// 设置时间
|
||
$("#startTime").val(res.data[0].startTime);
|
||
$("#endTime").val(res.data[0].endTime);
|
||
|
||
// 如果有文件URL，进行文件回显
|
||
if(res.data[0].pathUrl) {
|
||
// 清空现有文件列表
|
||
uploadFiles = [];
|
||
$('#fileList').empty();
|
||
|
||
// 获取文件名
|
||
const fileName = res.data[0].pathUrl.split('/').pop();
|
||
// 判断文件类型
|
||
const fileType = getFileType(fileName);
|
||
|
||
// 创建预览HTML
|
||
let previewHtml = '';
|
||
if(fileType === 'image') {
|
||
// 图片预览
|
||
previewHtml = `
|
||
<div class="file-item" data-url="${res.data[0].pathUrl}">
|
||
<div class="file-preview">
|
||
<img src="${res.data[0].pathUrl}" alt="${fileName}">
|
||
</div>
|
||
<div class="file-name">${fileName}</div>
|
||
<div class="delete-file">
|
||
<i class="layui-icon">ဆ</i>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else if(fileType === 'video') {
|
||
// 视频预览
|
||
previewHtml = `
|
||
<div class="file-item" data-url="${res.data[0].pathUrl}">
|
||
<div class="file-preview">
|
||
<video width="100%" height="100%" controls>
|
||
<source src="${res.data[0].pathUrl}" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
<div class="file-name">${fileName}</div>
|
||
<div class="delete-file">
|
||
<i class="layui-icon">ဆ</i>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else if(fileType === 'audio') {
|
||
// 音频预览
|
||
previewHtml = `
|
||
<div class="file-item" data-url="${res.data[0].pathUrl}">
|
||
<div class="file-preview">
|
||
<i class="layui-icon file-icon"></i>
|
||
<audio controls style="width: 100%">
|
||
<source src="${res.data[0].pathUrl}" type="audio/mp3">
|
||
</audio>
|
||
</div>
|
||
<div class="file-name">${fileName}</div>
|
||
<div class="delete-file">
|
||
<i class="layui-icon">ဆ</i>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
// 添加到文件列表
|
||
$('#fileList').html(previewHtml);
|
||
// 标记为已有文件（用于区分新上传的文件）
|
||
$('#fileList .file-item').addClass('existing-file');
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.log('请求失败:', err);
|
||
}
|
||
});
|
||
});
|
||
// 判断文件类型的辅助函数
|
||
function getFileType(fileName) {
|
||
fileName = fileName.toLowerCase();
|
||
if(fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg')) {
|
||
return 'image';
|
||
} else if(fileName.endsWith('.mp4')) {
|
||
return 'video';
|
||
} else if(fileName.endsWith('.mp3')) {
|
||
return 'audio';
|
||
}
|
||
return 'unknown';
|
||
}
|
||
|
||
|
||
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
<style>
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
color: white;
|
||
}
|
||
|
||
.container {
|
||
padding: 20px;
|
||
}
|
||
.layui-layer-content {
|
||
color: #000; /* 设置文本颜色为黑色 */
|
||
}
|
||
.layui-form-item {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.layui-form-label {
|
||
color: white;
|
||
width: 120px;
|
||
text-align: right;
|
||
padding: 9px 15px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 下拉框样式 */
|
||
.layui-select-title .layui-input {
|
||
background-color: transparent !important;
|
||
border: 1px solid rgba(255,255,255,0.2) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.layui-form-select dl {
|
||
background-color: #001a2e;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.layui-form-select dl dd {
|
||
color: white;
|
||
}
|
||
|
||
.layui-form-select dl dd.layui-this {
|
||
background-color: #00e0ff;
|
||
}
|
||
|
||
/* 输入框样式 */
|
||
.layui-input {
|
||
background-color: transparent !important;
|
||
border: 1px solid rgba(255,255,255,0.2) !important;
|
||
color: white !important;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
width: 200px;
|
||
}
|
||
|
||
/* 时间范围样式 */
|
||
.time-range {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.time-range .layui-form-mid {
|
||
color: white;
|
||
padding: 0 10px !important;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.layui-btn {
|
||
background-color: #00e0ff;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
padding: 0 20px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
/* 文件上传区域样式 */
|
||
.upload-area {
|
||
margin-left: 120px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.file-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.file-item {
|
||
position: relative;
|
||
width: 120px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 4px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.file-preview {
|
||
width: 100%;
|
||
height: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.file-preview img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.file-preview .file-icon {
|
||
font-size: 40px;
|
||
color: #00e0ff;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 12px;
|
||
color: #fff;
|
||
word-break: break-all;
|
||
line-height: 1.2;
|
||
max-height: 2.4em;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.delete-file {
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
background: #ff5722;
|
||
color: white;
|
||
border-radius: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.upload-tips {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* 添加固定按钮样式 */
|
||
.fixed-bottom {
|
||
position: fixed;
|
||
bottom: 20%;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 15px 0;
|
||
text-align: center;
|
||
z-index: 1000;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.submit-btn {
|
||
background: #00e0ff;
|
||
border: none;
|
||
color: #fff;
|
||
padding: 8px 30px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.submit-btn:hover {
|
||
background: #00b8d4;
|
||
}
|
||
|
||
/* 添加loading样式 */
|
||
.loading-icon {
|
||
display: inline-block;
|
||
animation: loading-rotate 1s linear infinite;
|
||
}
|
||
|
||
@keyframes loading-rotate {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.layui-laydate .layui-this {
|
||
background-color: #2F5D6B !important;
|
||
color: #fff !important;
|
||
}
|
||
.layui-laydate, .layui-laydate-hint {
|
||
border: 1px solid #d2d2d2;
|
||
box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
|
||
background-color: #fff;
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-content > table > thead > tr > th {
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-content td {
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-content .laydate-day-next, .layui-laydate-content .laydate-day-prev {
|
||
color: #666;
|
||
}
|
||
|
||
.layui-laydate-footer span:first-child.layui-laydate-preview {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.layui-laydate-content td:hover {
|
||
color: #fff;
|
||
background-color: #2F5D6B !important;
|
||
}
|
||
|
||
.layui-laydate-list > li:hover {
|
||
background-color: #2F5D6B !important;
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-header i:hover, .layui-laydate-header span:hover {
|
||
color: #2F5D6B !important;
|
||
}
|
||
|
||
.laydate-footer-btns span:hover {
|
||
color: #2F5D6B !important;
|
||
}
|
||
.layui-table-init {
|
||
background-color: transparent !important;
|
||
}
|
||
.layui-table-patch{
|
||
background-color: transparent !important;
|
||
}
|
||
.layui-laydate .layui-this {
|
||
background-color: #2F5D6B !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.layui-laydate, .layui-laydate-hint {
|
||
border: 1px solid #d2d2d2;
|
||
box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
|
||
background-color: #fff;
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-content > table > thead > tr > th {
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-content td {
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-content .laydate-day-next, .layui-laydate-content .laydate-day-prev {
|
||
color: #666;
|
||
}
|
||
|
||
.layui-laydate-footer span:first-child.layui-laydate-preview {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.layui-laydate-content td:hover {
|
||
color: #fff;
|
||
background-color: #2F5D6B !important;
|
||
}
|
||
|
||
.layui-laydate-list > li:hover {
|
||
background-color: #2F5D6B !important;
|
||
color: #fff;
|
||
}
|
||
|
||
.layui-laydate-header i:hover, .layui-laydate-header span:hover {
|
||
color: #2F5D6B !important;
|
||
}
|
||
|
||
.laydate-footer-btns span:hover {
|
||
color: #2F5D6B !important;
|
||
}
|
||
.layui-table-init {
|
||
background-color: transparent !important;
|
||
}
|
||
.layui-table-patch{
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
</style>
|
||
</html> |