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>
|