433 lines
18 KiB
HTML
433 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Document</title>
|
||
<link
|
||
href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/css/layui.min.css"
|
||
rel="stylesheet"
|
||
/>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<style>
|
||
@font-face {
|
||
font-family: layui-icon;
|
||
src: url(/assets/fonts/iconfont.eot?v=282);
|
||
src: url(/assets/fonts/iconfont.eot?v=282#iefix) format("embedded-opentype"),
|
||
url(/assets/fonts/iconfont.woff2?v=282) format("woff2"),
|
||
url(/assets/fonts/iconfont.woff?v=282) format("woff"),
|
||
url(/assets/fonts/iconfont.ttf?v=282) format("truetype"),
|
||
url(/assets/fonts/iconfont.svg?v=282#layui-icon) format("svg");
|
||
}
|
||
.layui-btn-container {
|
||
display: flex;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="tabelPage" style="padding: 30px 30px 0 30px">
|
||
<table id="table1"></table>
|
||
</div>
|
||
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/layui.js"></script>
|
||
<script type="text/html" id="game">
|
||
<a href="{{ d.url }}" target="_blank" style="color: #499AFB;">{{ d.title }}</a>
|
||
</script>
|
||
<script type="text/html" id="view">
|
||
<a
|
||
href="https://fpvone.cn/index/live/live.html?id={{ d.id }}"
|
||
target="_blank"
|
||
style="color: #499AFB;"
|
||
>查看大屏</a
|
||
>
|
||
</script>
|
||
<script type="text/html" id="setting">
|
||
<div class="layui-clear-space">
|
||
<a class="layui-btn layui-btn-primary layui-border layui-btn-sm" lay-event="setting">设置</a>
|
||
</div>
|
||
</script>
|
||
<script type="text/html" id="operate">
|
||
<div class="layui-clear-space">
|
||
<a class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="sd">手动输入</a>
|
||
<a class="layui-btn layui-btn-primary layui-border-green layui-btn-sm" lay-event="bg">成绩导入</a>
|
||
<a class="layui-btn layui-btn-primary layui-border-orange layui-btn-sm" lay-event="api">API接口</a>
|
||
</div>
|
||
</script>
|
||
<script>
|
||
// const getTable1 = (page=0, pageSize=10) => {
|
||
// $.ajax({
|
||
// url: 'https://www.fpvone.cn/inback.php/cms/archives/content/model_id/2?sort=id&order=desc&offset=0&limit=10&filter=%7B%7D',
|
||
// type: 'POST',
|
||
// dataType: 'json',
|
||
// success: function(data){
|
||
// console.log(1,data)
|
||
// }
|
||
// });
|
||
// }
|
||
// 背景图片上传获取的url
|
||
var upload_bg_img = "";
|
||
var setting_windows = 0;
|
||
const overDate = (d) => {
|
||
const now = new Date().getTime();
|
||
const date = new Date(d).getTime();
|
||
if (date > now) {
|
||
return "进行中";
|
||
} else {
|
||
return "已结束";
|
||
}
|
||
};
|
||
const uploadimg = () => {
|
||
layui.use(function () {
|
||
var upload = layui.upload;
|
||
var layer = layui.layer;
|
||
var element = layui.element;
|
||
var $ = layui.$;
|
||
var uploadInst = upload.render({
|
||
elem: "#upload-bg",
|
||
url: "https://www.fpvone.cn/inback.php/ajax/upload",
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
// obj.preview(function (index, file, result) {
|
||
// $("#ID-upload-img").attr("src", result); // 图片链接（base64）
|
||
// });
|
||
// layer.msg("上传中", { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (res.code != 1) {
|
||
return layer.msg("上传失败");
|
||
}
|
||
// 上传成功的一些操作
|
||
// …
|
||
$("#ID-upload-img").attr(
|
||
"src",
|
||
"https://www.fpvone.cn" + res.data.url
|
||
);
|
||
upload_bg_img = res.data.url;
|
||
return layer.msg("上传成功");
|
||
// $("#ID-upload-text").html(""); // 置空上传失败的状态
|
||
},
|
||
error: function () {
|
||
return layer.msg("上传出错");
|
||
},
|
||
});
|
||
});
|
||
};
|
||
const settingform = (data) => {
|
||
if (data.nopass == "true" && data.password.trim() == '') {
|
||
return layer.msg("请输入大屏查看密码");
|
||
}
|
||
$.ajax({
|
||
url: "https://www.fpvone.cn/inback.php/screen/addscreen",
|
||
type: "POST",
|
||
dataType: "json",
|
||
data: data,
|
||
success: function (res) {
|
||
if (res.code != 1) {
|
||
return layer.msg(res.msg);
|
||
}
|
||
layer.close(setting_windows);
|
||
return layer.msg(res.msg);
|
||
},
|
||
});
|
||
};
|
||
// 设置弹框---------------------------------------------------------------------------------------
|
||
const settting = (match_id) => {
|
||
$.ajax({
|
||
url: `https://www.fpvone.cn/inback.php/screen/getScreen?match_id=${match_id}&type=ranking`,
|
||
type: "GET",
|
||
dataType: "json",
|
||
success: function (res) {
|
||
// console.log(res)
|
||
setting_windows = layer.open({
|
||
type: 1,
|
||
shade: false,
|
||
title: "设置",
|
||
area: ["600px", "540px"], // 宽高
|
||
content: `
|
||
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px 30px 0 20px;">
|
||
<form class="layui-form">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" style="width: 120px">是否设置密码</label>
|
||
<div class="layui-input-block" style="margin-left: 130px">
|
||
<input type="radio" name="nopass" value="true" title="是" checked lay-filter="radio-filter-pass">
|
||
<input type="radio" name="nopass" value="false" title="否" lay-filter="radio-filter-pass">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" id="form_pass">
|
||
<label class="layui-form-label" style="width: 120px">大屏查看密码</label>
|
||
<div class="layui-input-block" style="margin-left: 130px">
|
||
<input type="password" name="password" placeholder="请输入大屏查看密码" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" style="width: 120px">赛事成绩标题</label>
|
||
<div class="layui-input-block" style="margin-left: 130px">
|
||
<input type="text" id="screen_title" name="title" placeholder="请输入赛事大屏标题" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" style="width: 120px">赛事成绩背景</label>
|
||
<div class="layui-input-block" style="margin-left: 130px">
|
||
<div>
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="ID-upload-img" style="width: 120px; height: 68px;">
|
||
<div id="ID-upload-text" style="margin-top: 10px; color: #B1B1B1;">推荐尺寸为1920x1080</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="layui-btn" id="upload-bg">
|
||
<i class="layui-icon layui-icon-upload"></i> 图片上传
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" style="width: 120px">大屏主色调</label>
|
||
<div class="layui-input-block" style="margin-left: 130px; width: 100px">
|
||
<input type="text" name="font_rgb" placeholder="请选择颜色" class="layui-input" id="ID-colorpicker-color" autocomplete="off">
|
||
<div class="layui-inline" style="left: 100px;top: 0;position: absolute">
|
||
<div id="ID-colorpicker-form"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block" style="margin-left: 220px; margin-top: 30px;">
|
||
<button style="width: 120px;" type="submit" class="layui-btn" lay-submit lay-filter="submit1">提交</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
`,
|
||
success: function () {
|
||
uploadimg();
|
||
$("#ID-upload-img").attr("src", res.data.backound_img);
|
||
$('#screen_title').val(res.data.title)
|
||
layui.use(function () {
|
||
var form = layui.form
|
||
var layer = layui.layer
|
||
var colorpicker = layui.colorpicker
|
||
colorpicker.render({
|
||
elem: '#ID-colorpicker-form',
|
||
color: res.data.font_rgb ? res.data.font_rgb : '#FE5900',
|
||
done: function(color){
|
||
$('#ID-colorpicker-color').val(color)
|
||
}
|
||
})
|
||
$('#ID-colorpicker-color').val(res.data.font_rgb ? res.data.font_rgb : '#FE5900')
|
||
form.on('radio(radio-filter-pass)', function(data){
|
||
var elem = data.elem
|
||
var value = elem.value
|
||
if(value == 'true') {
|
||
$('#form_pass').show()
|
||
} else {
|
||
$('#form_pass').hide()
|
||
}
|
||
})
|
||
form.on("submit(submit1)", function (data) {
|
||
var field = data.field
|
||
field.backound_img = $('#ID-upload-img').attr('src')
|
||
field.match_id = match_id
|
||
field.type = 'ranking'
|
||
settingform(field)
|
||
return false
|
||
})
|
||
form.render()
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
// 表格弹框---------------------------------------------------------------------------------------
|
||
const biaoge = (match_id) => {
|
||
layer.open({
|
||
type: 1,
|
||
shade: false,
|
||
title: "表格导入",
|
||
area: ["600px", "380px"],
|
||
zIndex: 100,
|
||
content: `
|
||
<a style="margin-left: 30px; margin-top: 10px;" class="layui-btn layui-btn-primary layui-border" href="https://www.fpvone.cn/assets/file/2023年中国无人机竞速公开赛（XX站）资格赛成绩记录表（导入模板）.xlsx" download>模版下载</a>
|
||
<div class="upload layui-btn-container" style="display: flex;justify-content: center; margin-top: 10px;">
|
||
<button type="button" lay-options="{
|
||
accept: 'file',
|
||
exts: 'xlsx|xls'
|
||
}" class="layui-btn layui-btn-normal" style="width: 95px" id="ID-upload-demo-choose1">决出前32</button>
|
||
<button type="button" class="layui-btn" style="width: 95px" id="ID-upload-demo-action1">开始上传</button>
|
||
</div>
|
||
<div class="upload layui-btn-container" style="display: flex;justify-content: center;">
|
||
<button type="button" lay-options="{
|
||
accept: 'file',
|
||
exts: 'xlsx|xls'
|
||
}" class="layui-btn layui-btn-normal" style="width: 95px" id="ID-upload-demo-choose2">32进16</button>
|
||
<button type="button" class="layui-btn" style="width: 95px" id="ID-upload-demo-action2">开始上传</button>
|
||
</div>
|
||
<div class="upload layui-btn-container" style="display: flex;justify-content: center;">
|
||
<button type="button" lay-options="{
|
||
accept: 'file',
|
||
exts: 'xlsx|xls'
|
||
}" class="layui-btn layui-btn-normal" style="width: 95px" id="ID-upload-demo-choose3">16进8</button>
|
||
<button type="button" class="layui-btn" style="width: 95px" id="ID-upload-demo-action3">开始上传</button>
|
||
</div>
|
||
<div class="upload layui-btn-container" style="display: flex;justify-content: center;">
|
||
<button type="button" lay-options="{
|
||
accept: 'file',
|
||
exts: 'xlsx|xls'
|
||
}" class="layui-btn layui-btn-normal" style="width: 95px" id="ID-upload-demo-choose4">8进4</button>
|
||
<button type="button" class="layui-btn" style="width: 95px" id="ID-upload-demo-action4">开始上传</button>
|
||
</div>
|
||
`,
|
||
success: function () {
|
||
layui.use(function () {
|
||
var upload = layui.upload;
|
||
// 渲染
|
||
upload.render({
|
||
elem: "#ID-upload-demo-choose1",
|
||
url: '{:url("cms/ranking/addRanking")}', // 此处配置你自己的上传接口即可
|
||
auto: false,
|
||
accept: "file",
|
||
data: { course: 32, match_id: match_id },
|
||
bindAction: "#ID-upload-demo-action1",
|
||
done: function (res) {
|
||
layer.msg("上传成功");
|
||
console.log(res);
|
||
},
|
||
});
|
||
upload.render({
|
||
elem: "#ID-upload-demo-choose2",
|
||
url: '{:url("cms/ranking/addRanking")}',
|
||
auto: false,
|
||
accept: "file",
|
||
data: { course: 16, match_id: match_id },
|
||
bindAction: "#ID-upload-demo-action2",
|
||
done: function (res) {
|
||
layer.msg("上传成功");
|
||
console.log(res);
|
||
},
|
||
});
|
||
upload.render({
|
||
elem: "#ID-upload-demo-choose3",
|
||
url: '{:url("cms/ranking/addRanking")}',
|
||
auto: false,
|
||
accept: "file",
|
||
data: { course: 8, match_id: match_id },
|
||
bindAction: "#ID-upload-demo-action3",
|
||
done: function (res) {
|
||
layer.msg("上传成功");
|
||
console.log(res);
|
||
},
|
||
});
|
||
upload.render({
|
||
elem: "#ID-upload-demo-choose4",
|
||
url: '{:url("cms/ranking/addRanking")}',
|
||
auto: false,
|
||
data: { course: 4, match_id: match_id },
|
||
accept: "file",
|
||
bindAction: "#ID-upload-demo-action4",
|
||
done: function (res) {
|
||
layer.msg("上传成功");
|
||
console.log(res);
|
||
},
|
||
});
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
layui.use(function () {
|
||
var table = layui.table;
|
||
var $ = layui.$;
|
||
var layer = layui.layer;
|
||
var util = layui.util;
|
||
// 渲染，并获得实例对象
|
||
table.render({
|
||
elem: "#table1", // 绑定元素选择器
|
||
cols: [
|
||
[
|
||
{ field: "id", title: "排序", type: "numbers" },
|
||
{ field: "state", title: "状态", width: 80 },
|
||
{ field: "title", title: "赛事名称", templet: "#game" },
|
||
{
|
||
field: "setting",
|
||
title: "设置",
|
||
toolbar: "#setting",
|
||
width: 100,
|
||
},
|
||
{
|
||
field: "operate",
|
||
title: "操作",
|
||
toolbar: "#operate",
|
||
width: 320,
|
||
},
|
||
{ field: "view", title: "查看", templet: "#view", width: 100 },
|
||
],
|
||
],
|
||
data: [
|
||
// {
|
||
// state: "进行中",
|
||
// name: "2023年中国无人机竞速公开赛 (象山影视城站)",
|
||
// },
|
||
],
|
||
page: true,
|
||
lineStyle: "height: 50px;",
|
||
url: "https://www.fpvone.cn/inback.php/cms/archives/content/model_id/6",
|
||
method: "get",
|
||
where: { sort: "id", order: "desc", filter: {} },
|
||
request: {
|
||
pageName: "offset",
|
||
limitName: "nums",
|
||
},
|
||
parseData: function (res) {
|
||
const list = res.rows;
|
||
list.map((item) => {
|
||
item.state = overDate(`${item.etime} ${item.match_end_time}`);
|
||
});
|
||
return {
|
||
code: 0,
|
||
count: res.total,
|
||
data: list,
|
||
};
|
||
console.log(res);
|
||
},
|
||
});
|
||
// 表格事件------------------------------------------------------------------------------------------
|
||
table.on("tool(table1)", function (obj) {
|
||
var id = obj.config.id;
|
||
var checkStatus = table.checkStatus(id);
|
||
var othis = lay(this);
|
||
console.log('obj', obj)
|
||
switch (obj.event) {
|
||
// 设置-------------------------------------------------------------------------------------------
|
||
case "setting":
|
||
// var getData = table.getData(id);
|
||
settting(obj.data.aid);
|
||
break;
|
||
// 手动输入----------------------------------------------------------------------------------------
|
||
case "sd":
|
||
|
||
layer.open({
|
||
type: 2,
|
||
title: '手动调整',
|
||
shadeClose: true,
|
||
maxmin: true, //开启最大化最小化按钮
|
||
area: ['1000px', '800px'],
|
||
content: '{:url("cms/archives/league_course")}'+ "?id=" + obj.data.aid
|
||
});
|
||
// window.open('https://www.fpvone.cn/inback.php/cms.archives/course.html?ref=addtabs&id='+obj.data.aid)
|
||
break;
|
||
// 表格输入----------------------------------------------------------------------------------------
|
||
case "bg":
|
||
biaoge(obj.data.aid);
|
||
break;
|
||
case "api":
|
||
layer.msg('正在开发中...', {icon: 0}, function(){});
|
||
break;
|
||
}
|
||
});
|
||
|
||
//
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|