创建版本
This commit is contained in:
@@ -0,0 +1,352 @@
|
||||
<style type="text/css">
|
||||
.dashboard-edit { background-color: #f0f3f4; }
|
||||
.panel-shadow {
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.03);
|
||||
border: solid 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.edit-droppable div {
|
||||
border: 1px dashed #23b7e5;
|
||||
background: #dcf2f8;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.widget-edit { display: flex; flex-direction: row; align-items:stretch; }
|
||||
.widget-edit .col-xs-12 {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.widget-edit-item .panel-heading {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
cursor:move;
|
||||
}
|
||||
.widget-edit-item > div {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.todo-edit .panel { display: flex; padding-bottom: 10px; text-align: center; }
|
||||
.todo-edit-l-t { cursor:move; color: #fff; margin-top:12px; margin-left: 10px; border-radius: 50%; width: 50px; height:50px; line-height:58px; vertical-align: middle; }
|
||||
|
||||
.todo-edit-c-t { flex:1; margin-left: 12px; text-align: left; }
|
||||
.todo-edit-c-t .todo-name { margin-top:13px; color: #666; }
|
||||
.todo-edit-c-t .todo-item { font-size: 24px; color: #666; }
|
||||
.todo-edit-r-t { text-align: left; margin-right: 10px; margin-top:5px; }
|
||||
|
||||
.widget-option {
|
||||
padding-top:10px;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.widget-option .fa {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.widget-option:hover .fa {
|
||||
color: #0e90d2;
|
||||
}
|
||||
|
||||
.quick-edit {
|
||||
margin-bottom: 10px;
|
||||
padding: 3px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.quick-edit-text {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.quick-edit-text .title {
|
||||
width: 48px;
|
||||
text-overflow: hidden;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
color: #333;
|
||||
}
|
||||
.quick-edit-item {
|
||||
position: relative;
|
||||
cursor:move;
|
||||
}
|
||||
.quick-edit-item .quick-remove {
|
||||
line-height: 0;
|
||||
display: none;
|
||||
}
|
||||
.quick-edit-item:hover .quick-remove {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background-color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
.quick-edit-item:hover .quick-remove .fa {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.quick-edit-item:hover .quick-remove:hover .fa {
|
||||
color: #f00;
|
||||
}
|
||||
.quick-edit-add {
|
||||
background-color:#fff;
|
||||
line-height: 52px;
|
||||
}
|
||||
.quick-edit-add .fa {
|
||||
color:#999;
|
||||
}
|
||||
.quick-edit-add:hover .fa {
|
||||
color:#2490f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@verbatim
|
||||
<div id="dashboard-config">
|
||||
<div class="dashboard-edit">
|
||||
<form method="post" id="widget-edit" name="widget_edit">
|
||||
<div class="quick-edit">
|
||||
<div class="row row-sm">
|
||||
<draggable
|
||||
v-model="menus"
|
||||
item-key="id"
|
||||
group="menus"
|
||||
@start="drag=true"
|
||||
@end="drag=false">
|
||||
<template #item="{element, index}">
|
||||
<div class="quick-edit-text">
|
||||
<div class="quick-icon quick-edit-item" :style="'background-color:' + element.color">
|
||||
<a class="quick-remove" @click="quickRemove(index);">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
<i :class="'fa fa-3x ' + element.icon"></i>
|
||||
</div>
|
||||
<div class="title">{{element.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<div class="quick-edit-text">
|
||||
<a href="javascript:;" @click="quickAdd">
|
||||
<div class="quick-icon quick-edit-add">
|
||||
<i class="fa fa-3x fa-plus"></i>
|
||||
</div>
|
||||
<div class="title">添加快捷</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<draggable
|
||||
class="row row-sm todo-edit"
|
||||
v-model="infos"
|
||||
handle=".todo-edit-l-t"
|
||||
item-key="id"
|
||||
group="infos"
|
||||
@start="dragging=true"
|
||||
@end="dragging=false">
|
||||
<template #item="{element, index}">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
|
||||
<div class="panel panel-shadow">
|
||||
<div class="todo-edit-l-t" :style="'background-color:' + element.color">
|
||||
<i :class="'fa fa-2x ' + element.icon"></i>
|
||||
</div>
|
||||
<div class="todo-edit-c-t">
|
||||
<div class="todo-name">{{element.name}}</div>
|
||||
<span class="todo-node">
|
||||
<div class="text-info todo-item">0</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="todo-edit-r-t">
|
||||
<label title="显示/隐藏" class="i-switch bg-success m-t-xs">
|
||||
<input type="checkbox" v-model="element.status" :true-value="1" :false-value="0"><i></i>
|
||||
</label>
|
||||
<div class="widget-option">
|
||||
<a @click="infoOption(index, element)" title="配置">
|
||||
<i class="fa fa-gear"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div class="row row-sm widget-edit">
|
||||
<draggable
|
||||
class="col-xs-12 col-sm-8"
|
||||
v-model="leftWidgets"
|
||||
handle=".panel-heading"
|
||||
item-key="id"
|
||||
group='widgets'
|
||||
@start="dragging=true"
|
||||
@end="dragging=false">
|
||||
<template #item="{element, index}">
|
||||
<div class="widget-edit-item" :id="'widget_item_' + element.id">
|
||||
<div class="panel panel-shadow">
|
||||
<div class="panel-heading text-base">
|
||||
<div class="pull-right">
|
||||
<label title="显示/隐藏" class="i-switch bg-primary m-t-xs">
|
||||
<input type="checkbox" v-model="element.status" :true-value="1" :false-value="0"><i></i>
|
||||
</label>
|
||||
<div class="widget-option">
|
||||
<a @click="widgetOption(index, element)" title="配置">
|
||||
<i class="fa fa-gear"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{element.name}}
|
||||
</div>
|
||||
<div class="panel-body wrapper-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<draggable
|
||||
class="col-xs-12 col-sm-4"
|
||||
v-model="rightWidgets"
|
||||
handle=".panel-heading"
|
||||
item-key="id"
|
||||
group='widgets'
|
||||
@start="dragging=true"
|
||||
@end="dragging=false">
|
||||
<template #item="{element, index}">
|
||||
<div class="widget-edit-item" :id="'widget_item_' + element.id">
|
||||
<div class="panel panel-shadow">
|
||||
<div class="panel-heading text-base">
|
||||
<div class="pull-right">
|
||||
<label title="显示/隐藏" class="i-switch bg-primary m-t-xs">
|
||||
<input type="checkbox" v-model="element.status" :true-value="1" :false-value="0"><i></i>
|
||||
</label>
|
||||
<div class="widget-option">
|
||||
<a @click="widgetOption(index, element)" title="配置">
|
||||
<i class="fa fa-gear"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{element.name}}
|
||||
</div>
|
||||
<div class="panel-body wrapper-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endverbatim
|
||||
|
||||
<script>
|
||||
var configData = {{$json}};
|
||||
var settingWidget = Vue.createApp({
|
||||
components: {
|
||||
draggable: GdooVueComponents.draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
infos: configData.infos,
|
||||
widgets: configData.widgets,
|
||||
menus: configData.menus,
|
||||
leftWidgets: [],
|
||||
rightWidgets: [],
|
||||
dragging: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
quickRemove(index) {
|
||||
this.menus.splice(index, 1);
|
||||
},
|
||||
quickAdd() {
|
||||
var me = this;
|
||||
formDialog({
|
||||
title: '添加菜单',
|
||||
url: app.url('index/dashboard/quickMenu'),
|
||||
id: 'quick-menu',
|
||||
dialogClass:'modal-sm',
|
||||
onSubmit: function() {
|
||||
var items = $('#quick-menu').serializeArray();
|
||||
var row = {};
|
||||
$.each(items, function(index, item) {
|
||||
row[item.name] = item.value;
|
||||
});
|
||||
me.menus.push(row);
|
||||
$(this).dialog("close");
|
||||
}
|
||||
});
|
||||
},
|
||||
infoOption(index, item) {
|
||||
var me = this;
|
||||
formDialog({
|
||||
title: '配置',
|
||||
url: app.url('index/dashboard/settingInfo', {info_id:item.info_id}),
|
||||
id: 'setting-info',
|
||||
dialogClass:'modal-sm',
|
||||
onSubmit: function() {
|
||||
var info = $('#setting-info').serializeArray();
|
||||
$.each(info, function(k, v) {
|
||||
item[v.name] = v.value;
|
||||
});
|
||||
me.infos[index] = item;
|
||||
$(this).dialog("close");
|
||||
}
|
||||
});
|
||||
},
|
||||
widgetOption(index, item) {
|
||||
var me = this;
|
||||
formDialog({
|
||||
title: '配置',
|
||||
url: app.url('index/dashboard/settingWidget', {widget_id:item.widget_id}),
|
||||
id: 'setting-widget',
|
||||
dialogClass:'modal-sm',
|
||||
onSubmit: function() {
|
||||
var widget = $('#setting-widget').serializeArray();
|
||||
$.each(widget, function(k, v) {
|
||||
item[v.name] = v.value;
|
||||
});
|
||||
if (item.grid == 8) {
|
||||
me.leftWidgets[index] = item;
|
||||
} else {
|
||||
me.rightWidgets[index] = item;
|
||||
}
|
||||
$(this).dialog("close");
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
var me = this;
|
||||
var res = {
|
||||
menu: me.menus,
|
||||
info: me.infos,
|
||||
widget: [],
|
||||
};
|
||||
me.leftWidgets.forEach(function(item) {
|
||||
item.grid = 8;
|
||||
res.widget.push(item);
|
||||
});
|
||||
me.rightWidgets.forEach(function(item) {
|
||||
item.grid = 4;
|
||||
res.widget.push(item);
|
||||
});
|
||||
return res;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.leftWidgets = this.widgets.filter(function(item) {
|
||||
return item.grid == 8;
|
||||
});
|
||||
this.rightWidgets = this.widgets.filter(function(item) {
|
||||
return item.grid == 4;
|
||||
});
|
||||
}
|
||||
}).mount('#dashboard-config');
|
||||
|
||||
</script>
|
||||
<script src="{{$asset_url}}/vendor/fontawesome-iconpicker/js/fontawesome-iconpicker.min.js"></script>
|
||||
<link href="{{$asset_url}}/vendor/fontawesome-iconpicker/css/fontawesome-iconpicker.min.css" rel="stylesheet">
|
||||
@@ -0,0 +1,425 @@
|
||||
<style type="text/css">
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
a { outline: none; }
|
||||
|
||||
.dashboard-widget {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 32px);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.dashboard-config {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
right: 22px;
|
||||
top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
height: 26px;
|
||||
line-height: 25px;
|
||||
width: 26px;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 4px 4px;
|
||||
border: solid 1px rgba(255, 255, 255, 0.2);
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
.dashboard-config .fa {
|
||||
color: #999;
|
||||
}
|
||||
.dashboard-config:hover {
|
||||
border: solid 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.dashboard-config:hover .fa {
|
||||
color: #2490f8;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.content-body { margin: 0; }
|
||||
.content-body .panel:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.frame-green .dashboard-title {
|
||||
color: #fff;
|
||||
}
|
||||
.frame-primary .dashboard-title {
|
||||
color: #58666e;
|
||||
}
|
||||
.frame-blue .dashboard-title {
|
||||
color: #fff;
|
||||
}
|
||||
.frame-blue2 .dashboard-title {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.frame-blue .quick-text .title,
|
||||
.frame-purple .quick-text .title,
|
||||
.frame-green .quick-text .title,
|
||||
.frame-lilac .quick-text .title,
|
||||
.frame-wood .quick-text .title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel-shadow {
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.03);
|
||||
border: solid 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.frame-blue .panel-shadow,
|
||||
.frame-purple .panel-shadow,
|
||||
.frame-green .panel-shadow,
|
||||
.frame-lilac .panel-shadow,
|
||||
.frame-wood .panel-shadow {
|
||||
border: solid 0;
|
||||
}
|
||||
|
||||
.row-sm { margin-left: 5px; margin-right: 5px; }
|
||||
.row-sm > div { padding-left: 5px; padding-right: 5px; }
|
||||
.row-sm > div > .panel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row-info .panel { display: flex; padding-bottom: 10px; position: relative; text-align: center; border-radius: 4px !important; }
|
||||
.info-skin1 .info-l { color: #fff; margin-top:16px; margin-left: 15px; border-radius: 50%; width: 50px; height:50px; line-height:58px; vertical-align: middle; }
|
||||
|
||||
.info-skin1 .info-c { flex:1; margin-left: 15px; text-align: left; }
|
||||
.info-skin1 .info-c .info-name { margin-top:18px; font-size: 14px; color: #666; }
|
||||
.info-skin1 .info-c .info-item { font-size: 24px; color: #333; }
|
||||
|
||||
.info-skin1 .info-r { margin-left: auto; margin-top:18px; width: 70px; line-height:22px; }
|
||||
.info-skin1 .info-r .rate { color: #2bbf24; }
|
||||
.info-skin1 .info-r .red { color:#f00; }
|
||||
.info-skin1 .info-r::before { position:absolute;top:22px;content:"";width:1px;height:40px;background-color:#e6e6e6;display:block; }
|
||||
.info-items { height: 94px; }
|
||||
|
||||
.app-title {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.app-title a {
|
||||
color: #999;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.app-title a:hover {
|
||||
color: #0e90d2;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.widget-item {
|
||||
min-height: 200px;
|
||||
}
|
||||
.todo-text { margin-left: 60px; }
|
||||
}
|
||||
|
||||
.row-widget .panel-heading {
|
||||
padding: 10px;
|
||||
color: #2490f8;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.row-widget .widget-item {
|
||||
text-align: left;
|
||||
}
|
||||
.row-widget .widget-item .red {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.row-widget .widget-droppable div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ag-theme-balham .ag-header {
|
||||
border-bottom: 1px solid #dee5e7;
|
||||
}
|
||||
.ag-theme-balham .ag-header-cell::after, .ag-theme-balham .ag-header-group-cell::after {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.dashboard-footer {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
box-shadow: 20px 0px 8px 0 rgba(29,35,41,.05);
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.dashboard-footer .box {
|
||||
padding: 6px;
|
||||
padding-bottom: 8px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
.dashboard-footer .box a {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
|
||||
background: -webkit-linear-gradient(-70deg, #db469f, #2188ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.dashboard-footer .box a:hover {
|
||||
color: #0e90d2;
|
||||
}
|
||||
|
||||
.row-quick {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.quick-text {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.quick-text .title {
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.quick-icon .quick-num {
|
||||
font-family: Arial;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
background: #f00;
|
||||
border-radius: 100%;
|
||||
border: solid 1px #f05050;
|
||||
display: none;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px rgba(255,255,255,0.1);
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
}
|
||||
.quick-icon .fa {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
border: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="dashboard-widget">
|
||||
|
||||
<div class="pull-right hidden-xs">
|
||||
<a class="dashboard-config" data-toggle="dashboard-config" title="仪表盘设置">
|
||||
<i class="fa fa-gear"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row-quick">
|
||||
<div class="row row-sm">
|
||||
@forelse($quicks as $quick)
|
||||
<div class="quick-text">
|
||||
<a href="javascript:;" data-toggle="addtab" data-url="{{$quick['url']}}" data-id="{{$quick['key']}}" data-name="{{$quick['name']}}">
|
||||
<div class="quick-icon quick-item" style="background-color:{{$quick['color']}}" data-url="{{$quick['url']}}" data-key="{{$quick['key']}}">
|
||||
<i class="fa fa-3x {{$quick['icon']}}"></i>
|
||||
<span class="quick-num">0</span>
|
||||
</div>
|
||||
<div class="title">{{$quick['name']}}</div>
|
||||
</a>
|
||||
</div>
|
||||
@empty
|
||||
<div class="quick-text">
|
||||
<a href="javascript:;" data-toggle="dashboard-config">
|
||||
<div class="quick-icon" style="background-color:#13D06C;">
|
||||
<i class="fa fa-3x fa-plus"></i>
|
||||
</div>
|
||||
<div class="title">添加快捷</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-sm row-info">
|
||||
@foreach($infos as $info)
|
||||
@if($info['status'])
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
|
||||
<div class="info-items" data-id="{{$info['id']}}" data-url="{{$info['url']}}" data-more_url="{{$info['more_url']}}"></div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="row row-sm row-widget">
|
||||
@foreach($grids as $grid)
|
||||
<div class="col-xs-12 col-sm-{{$grid}}">
|
||||
@foreach($widgets as $widget)
|
||||
@if($widget['status'])
|
||||
@if($widget['grid'] == $grid)
|
||||
<div class="panel panel-shadow">
|
||||
<div class="panel-heading text-base b-b">
|
||||
<div class="pull-right"></div>
|
||||
<a data-toggle='widget-refresh' data-url="{{$widget['url']}}" data-key="{{str_replace(['/', '?', '='], ['_', '_', '_'], $widget['url'])}}" data-id="{{$widget['id']}}">{{$widget['name']}}</a>
|
||||
</div>
|
||||
<div class="widget-item" id="widget_item_{{$widget['id']}}" data-id="{{$widget['id']}}" data-url="{{$widget['url']}}">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-footer">
|
||||
<div class="box">
|
||||
{{$version}} {{$openSource ? '开源版' : '企业版'}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ag-theme-balham .ag-root {
|
||||
border: 0;
|
||||
}
|
||||
.ag-theme-balham .ag-status-bar {
|
||||
border: 0;
|
||||
}
|
||||
.ag-theme-balham .ag-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell {
|
||||
border-right: transparent;
|
||||
}
|
||||
.ag-theme-balham .ag-ltr .ag-cell {
|
||||
border-width: 0 0 0 0;
|
||||
border-right-color: #d9dcde;
|
||||
}
|
||||
.ag-theme-balham .ag-header-cell::after, .ag-theme-balham .ag-header-group-cell::after {
|
||||
border-right: 1px solid rgba(189, 195, 199, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function($) {
|
||||
var $document = $(document);
|
||||
|
||||
var myProcess = null;
|
||||
|
||||
function widgetRefresh() {
|
||||
if (myProcess) {
|
||||
var items = $('.widget-item');
|
||||
items.each(function(index, item) {
|
||||
var data = $(item).data();
|
||||
if (data.key) {
|
||||
gdoo.widgets[data.key].remoteData({page: 1});
|
||||
console.log('refresh item:' + data.key);
|
||||
}
|
||||
});
|
||||
}
|
||||
myProcess = setTimeout(function() {
|
||||
widgetRefresh();
|
||||
}, 1000 * 60 * 5);
|
||||
}
|
||||
|
||||
widgetRefresh();
|
||||
|
||||
$document.on('click', '[data-toggle="addtab"]', function(event) {
|
||||
event.preventDefault();
|
||||
// 触屏设备不触发事件
|
||||
var mq = top.checkMQ();
|
||||
if ($(this).parent().find('ul').length) {
|
||||
if(mq == 'mobile' || mq == 'tablet') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 无ID不触发事件
|
||||
var data = $(this).data();
|
||||
if(data.id == undefined) {
|
||||
return false;
|
||||
}
|
||||
top.addTab(data.url, data.id, data.name);
|
||||
});
|
||||
|
||||
$('[data-toggle="dashboard-config"]').on('click', function() {
|
||||
formDialog({
|
||||
title: '仪表盘设置',
|
||||
url: app.url('index/dashboard/config'),
|
||||
id: 'widget-edit',
|
||||
dialogClass:'modal-lg',
|
||||
onSubmit: function() {
|
||||
var me = this;
|
||||
var data = settingWidget.save();
|
||||
$.post(app.url('index/dashboard/config'), data, function(res) {
|
||||
if (res.status) {
|
||||
location.reload();
|
||||
toastrSuccess(res.data);
|
||||
$(me).dialog("close");
|
||||
} else {
|
||||
toastrError(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('[data-toggle="widget-refresh"]').on('click', function() {
|
||||
var data = $(this).data();
|
||||
if (data.key) {
|
||||
gdoo.widgets[data.key].remoteData({page: 1});
|
||||
}
|
||||
});
|
||||
|
||||
function widgetInit() {
|
||||
var items = $('.widget-item');
|
||||
items.each(function(index, item) {
|
||||
var data = $(item).data();
|
||||
if (data == undefined) {
|
||||
return false;
|
||||
}
|
||||
if (data.url) {
|
||||
$(item).load(app.url(data.url, {id: data.id}));
|
||||
}
|
||||
});
|
||||
|
||||
var items = $('.info-items');
|
||||
items.each(function(index, item) {
|
||||
var me = $(item);
|
||||
var data = me.data();
|
||||
if (data.url) {
|
||||
$(item).load(app.url(data.url, {id: data.id}));
|
||||
}
|
||||
});
|
||||
|
||||
var items = $('.quick-item');
|
||||
items.each(function(index, item) {
|
||||
var me = $(item);
|
||||
var data = me.data();
|
||||
$.get(app.url('index/index/badge', {key: data.key}), function(res) {
|
||||
if(res.total > 0) {
|
||||
me.find('.quick-num').show().text(res.total);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
widgetInit();
|
||||
|
||||
})(jQuery);
|
||||
</script>
|
||||
@@ -0,0 +1,501 @@
|
||||
<style type="text/css">
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
a { outline: none; }
|
||||
|
||||
.dashboard-widget-header {
|
||||
margin-top: 49px;
|
||||
height: calc(100vh - 80px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.dashboard-title .btn {
|
||||
border: solid 1px rgba(0, 0, 0, 0.15);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-config {
|
||||
text-align: center;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
width: 26px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
border: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.dashboard-config .fa {
|
||||
color: #999;
|
||||
}
|
||||
.dashboard-config:hover {
|
||||
border: solid 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.dashboard-config:hover .fa {
|
||||
color: #2490f8;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.content-body { margin: 0; }
|
||||
.content-body .panel:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.frame-green .dashboard-title {
|
||||
color: #fff;
|
||||
}
|
||||
.frame-primary .dashboard-title {
|
||||
color: #58666e;
|
||||
}
|
||||
.frame-blue .dashboard-title {
|
||||
color: #fff;
|
||||
}
|
||||
.frame-blue2 .dashboard-title {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.frame-blue .quick-text .title,
|
||||
.frame-purple .quick-text .title,
|
||||
.frame-green .quick-text .title,
|
||||
.frame-lilac .quick-text .title,
|
||||
.frame-wood .quick-text .title {
|
||||
color: #fff;
|
||||
}
|
||||
.frame-blue .dashboard-title .btn,
|
||||
.frame-purple .dashboard-title .btn,
|
||||
.frame-green .dashboard-title .btn,
|
||||
.frame-lilac .dashboard-title .btn,
|
||||
.frame-wood .dashboard-title .btn {
|
||||
border: solid 1px rgba(0, 0, 0, 0.15);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel-shadow {
|
||||
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.03);
|
||||
border: solid 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.frame-blue .panel-shadow,
|
||||
.frame-purple .panel-shadow,
|
||||
.frame-green .panel-shadow,
|
||||
.frame-lilac .panel-shadow,
|
||||
.frame-wood .panel-shadow {
|
||||
border: solid 0;
|
||||
}
|
||||
|
||||
.row-sm { margin-left: 5px; margin-right: 5px; }
|
||||
.row-sm > div { padding-left: 5px; padding-right: 5px; }
|
||||
.row-sm > div > .panel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row-info .panel { display: flex; padding-bottom: 10px; position: relative; text-align: center; border-radius: 4px !important; }
|
||||
.row-info .widget-droppable div { border-radius: 4px; }
|
||||
.info-l { color: #fff; margin-top:16px; margin-left: 15px; border-radius: 50%; width: 50px; height:50px; line-height:58px; vertical-align: middle; }
|
||||
|
||||
.info-c { flex:1; margin-left: 15px; text-align: left; }
|
||||
.info-c .info-name { margin-top:18px; font-size: 14px; color: #666; }
|
||||
.info-c .info-item { font-size: 24px; color: #333; }
|
||||
|
||||
.info-r { margin-left: auto; margin-top:18px; width: 70px; line-height:22px; }
|
||||
.info-r .rate { color: #2bbf24; }
|
||||
.info-r::before { position:absolute;top:22px;content:"";width:1px;height:40px;background-color:#e6e6e6;display:block; }
|
||||
|
||||
.app-title {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.app-title a {
|
||||
color: #999;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.app-title a:hover {
|
||||
color: #0e90d2;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.widget-item {
|
||||
min-height: 200px;
|
||||
}
|
||||
.todo-text { margin-left: 60px; }
|
||||
}
|
||||
|
||||
.widget-droppable div {
|
||||
border: 1px dashed #23b7e5;
|
||||
background: #dcf2f8;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.row-widget .panel-heading {
|
||||
padding: 10px;
|
||||
color: #2490f8;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.row-widget .widget-item {
|
||||
text-align: left;
|
||||
}
|
||||
.row-widget .widget-item .red {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.row-widget .widget-droppable div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ag-theme-balham .ag-header {
|
||||
border-bottom: 1px solid #dee5e7;
|
||||
}
|
||||
.ag-theme-balham .ag-header-cell::after, .ag-theme-balham .ag-header-group-cell::after {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.dashboard-footer {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
box-shadow: 20px 0px 8px 0 rgba(29,35,41,.05);
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.dashboard-footer .box {
|
||||
padding: 6px;
|
||||
padding-bottom: 8px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
.dashboard-footer .box a {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
background: -webkit-linear-gradient(-70deg, #db469f, #2188ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.dashboard-footer .box a:hover {
|
||||
color: #0e90d2;
|
||||
}
|
||||
|
||||
.row-quick {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.quick-text {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.quick-text .title {
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.quick-icon .quick-num {
|
||||
font-family: Arial;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
background: #f00;
|
||||
border-radius: 100%;
|
||||
border: solid 1px #f05050;
|
||||
display: none;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px rgba(255,255,255,0.1);
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
}
|
||||
.quick-icon .fa {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="dashboard-widget">
|
||||
|
||||
<div class="dashboard-title">
|
||||
<div class="pull-right">
|
||||
<a class="dashboard-config" data-toggle="dashboard-config" title="仪表盘设置">
|
||||
<i class="fa fa-gear"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="font-thin">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fa fa-filter"></span> 本部门下属部门
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">本人</a></li>
|
||||
<li><a href="#">本人和下属</a></li>
|
||||
<li><a href="#">本部门</a></li>
|
||||
<li class="active"><a href="#">本部门下属部门</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class=""><a href="#">自定义</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group m-l-xs" role="group">
|
||||
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fa fa-filter"></span> 本月
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">今天</a></li>
|
||||
<li><a href="#">昨天</a></li>
|
||||
<li><a href="#">本周</a></li>
|
||||
<li><a href="#">上周</a></li>
|
||||
<li class="active"><a href="#">本月</a></li>
|
||||
<li><a href="#">上月</a></li>
|
||||
<li><a href="#">本季度</a></li>
|
||||
<li><a href="#">上季度</a></li>
|
||||
<li><a href="#">本年</a></li>
|
||||
<li><a href="#">去年</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class=""><a href="#">自定义</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-widget-header">
|
||||
<div class="row-quick m-t-sm">
|
||||
<div class="row row-sm">
|
||||
@forelse($quicks as $quick)
|
||||
<div class="quick-text">
|
||||
<a href="javascript:;" data-toggle="addtab" data-url="{{$quick['url']}}" data-id="{{$quick['key']}}" data-name="{{$quick['name']}}">
|
||||
<div class="quick-icon quick-item" style="background-color:{{$quick['color']}}" data-url="{{$quick['url']}}" data-key="{{$quick['key']}}">
|
||||
<i class="fa fa-3x {{$quick['icon']}}"></i>
|
||||
<span class="quick-num">0</span>
|
||||
</div>
|
||||
<div class="title">{{$quick['name']}}</div>
|
||||
</a>
|
||||
</div>
|
||||
@empty
|
||||
<div class="quick-text">
|
||||
<a href="javascript:;" data-toggle="dashboard-config">
|
||||
<div class="quick-icon" style="background-color:#13D06C;">
|
||||
<i class="fa fa-3x fa-plus"></i>
|
||||
</div>
|
||||
<div class="title">添加快捷</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-sm row-info">
|
||||
@foreach($infos as $info)
|
||||
@if($info['status'])
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
|
||||
|
||||
<div class="panel panel-shadow">
|
||||
<div class="info-l hidden-xs bg-{{$info['color']}}">
|
||||
<i class="fa fa-2x {{$info['icon']}}"></i>
|
||||
</div>
|
||||
<div class="info-c">
|
||||
<div class="info-name">{{$info['name']}}</div>
|
||||
<a href="javascript:;" data-toggle="addtab" data-url="{{$info['more_url']}}" data-id="{{str_replace(['/', '?', '='], ['_', '_', '_'], $info['more_url'])}}" data-name="{{$info['name']}}">
|
||||
<div class="text-info info-item" data-url="{{$info['url']}}" data-more_url="{{$info['more_url']}}"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-r">
|
||||
<div>较上月</div>
|
||||
<div class="rate">50%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="row row-sm row-widget">
|
||||
@foreach($grids as $grid)
|
||||
<div class="col-xs-12 col-sm-{{$grid}}">
|
||||
@foreach($widgets as $widget)
|
||||
@if($widget['status'])
|
||||
@if($widget['grid'] == $grid)
|
||||
<div class="panel panel-shadow">
|
||||
<div class="panel-heading text-base b-b">
|
||||
<div class="pull-right"></div>
|
||||
<a data-toggle='widget-refresh' data-url="{{$widget['url']}}" data-key="{{str_replace(['/', '?', '='], ['_', '_', '_'], $widget['url'])}}" data-id="{{$widget['id']}}">{{$widget['name']}}</a>
|
||||
</div>
|
||||
<div class="widget-item" id="widget_item_{{$widget['id']}}" data-url="{{$widget['url']}}">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-footer">
|
||||
<div class="box">
|
||||
{{$version}} {{$openSource ? '开源版' : '企业版'}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ag-theme-balham .ag-root {
|
||||
border: 0;
|
||||
}
|
||||
.ag-theme-balham .ag-status-bar {
|
||||
border: 0;
|
||||
}
|
||||
.ag-theme-balham .ag-header {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell {
|
||||
border-right: transparent;
|
||||
}
|
||||
.ag-theme-balham .ag-ltr .ag-cell {
|
||||
border-width: 0 0 0 0;
|
||||
border-right-color: #d9dcde;
|
||||
}
|
||||
.ag-theme-balham .ag-header-cell::after, .ag-theme-balham .ag-header-group-cell::after {
|
||||
border-right: 1px solid rgba(189, 195, 199, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function($) {
|
||||
var $document = $(document);
|
||||
|
||||
var myProcess = null;
|
||||
|
||||
function widgetRefresh() {
|
||||
if (myProcess) {
|
||||
var items = $('.widget-item');
|
||||
items.each(function(index, item) {
|
||||
var data = $(item).data();
|
||||
if (data.key) {
|
||||
gdoo.widgets[data.key].remoteData({page: 1});
|
||||
console.log('refresh item:' + data.key);
|
||||
}
|
||||
});
|
||||
}
|
||||
myProcess = setTimeout(function() {
|
||||
widgetRefresh();
|
||||
}, 1000 * 60 * 5);
|
||||
}
|
||||
|
||||
widgetRefresh();
|
||||
|
||||
$document.on('click', '[data-toggle="addtab"]', function(event) {
|
||||
event.preventDefault();
|
||||
// 触屏设备不触发事件
|
||||
var mq = top.checkMQ();
|
||||
if ($(this).parent().find('ul').length) {
|
||||
if(mq == 'mobile' || mq == 'tablet') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 无ID不触发事件
|
||||
var data = $(this).data();
|
||||
if(data.id == undefined) {
|
||||
return false;
|
||||
}
|
||||
top.addTab(data.url, data.id, data.name);
|
||||
});
|
||||
|
||||
$('[data-toggle="dashboard-config"]').on('click', function() {
|
||||
formDialog({
|
||||
title: '仪表盘设置',
|
||||
url: app.url('index/dashboard/config'),
|
||||
id: 'widget-edit',
|
||||
dialogClass:'modal-lg',
|
||||
success: function(res) {
|
||||
location.reload();
|
||||
toastrSuccess(res.data);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
error: function(res) {
|
||||
toastrError(res.data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('[data-toggle="widget-refresh"]').on('click', function() {
|
||||
var data = $(this).data();
|
||||
if (data.key) {
|
||||
gdoo.widgets[data.key].remoteData({page: 1});
|
||||
}
|
||||
});
|
||||
|
||||
function widgetInit() {
|
||||
var items = $('.widget-item');
|
||||
items.each(function(index, item) {
|
||||
var data = $(item).data();
|
||||
if (data == undefined) {
|
||||
return false;
|
||||
}
|
||||
if (data.url) {
|
||||
$(item).load(app.url(data.url, {id: data.id}));
|
||||
}
|
||||
});
|
||||
|
||||
var items = $('.info-item');
|
||||
items.each(function(index, item) {
|
||||
var me = $(item);
|
||||
var data = me.data();
|
||||
$.get(app.url('index/index/info', {type: data.url}), function(res) {
|
||||
if(res > 0) {
|
||||
me.removeClass('text-info').addClass('text-danger');
|
||||
} else {
|
||||
me.removeClass('text-danger').addClass('text-info');
|
||||
}
|
||||
me.text(res);
|
||||
});
|
||||
});
|
||||
|
||||
var items = $('.quick-item');
|
||||
items.each(function(index, item) {
|
||||
var me = $(item);
|
||||
var data = me.data();
|
||||
$.get(app.url('index/index/badge', {key: data.key}), function(res) {
|
||||
if(res.total > 0) {
|
||||
me.find('.quick-num').show().text(res.total);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
widgetInit();
|
||||
|
||||
})(jQuery);
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<form method="post" id="quick-menu" name="quick_menu">
|
||||
<table class="table table-form m-b-none">
|
||||
<tr>
|
||||
<td align="right">菜单</td>
|
||||
<td>
|
||||
<select class="form-control input-sm" name="node_id" id="node_id">
|
||||
<option value=""> - </option>
|
||||
@foreach($menus as $menu)
|
||||
<option value="{{$menu['id']}}" data-menu_id="{{$menu['id']}}" data-name="{{$menu['name']}}" data-color="{{$menu['color']}}" data-icon="{{$menu['icon']}}" data-url="{{$menu['url']}}">{{$menu['layer_space']}}{{$menu['name']}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">显示名称</td>
|
||||
<td align="left">
|
||||
<input type="text" autocomplete="off" class="form-control input-sm" id="name" name="name">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">图标</td>
|
||||
<td align="left">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="icon-picker"></span>
|
||||
<input data-placement="bottomLeft" type="text" autocomplete="off" class="form-control icp icp-auto input-sm" id="icon" name="icon">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">颜色</td>
|
||||
<td align="left">
|
||||
<div class="colorpicker-controller" title="选择颜色">
|
||||
<div id="color-picker" class="colorpicker"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color" name="color">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">URL</td>
|
||||
<td align="left">
|
||||
<input type="text" readonly="readonly" class="form-control input-sm" id="url" name="url">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#node_id').on('change', function() {
|
||||
var data = $(this).find("option:selected").data();
|
||||
$('#color-picker').css({'background-color': data.color});
|
||||
$('#color').val(data.color);
|
||||
$('#icon-picker').html('<i class="fa ' + data.icon + '"></i>');
|
||||
$('#icon').val(data.icon);
|
||||
$('#url').val(data.url);
|
||||
$('#name').val(data.name);
|
||||
});
|
||||
|
||||
$('#icon').iconpicker();
|
||||
$("#color-picker").colorpicker({
|
||||
fillcolor: true,
|
||||
target: "#color",
|
||||
change: function(obj, color) {
|
||||
$(obj).css({'background-color': color});
|
||||
$('#color').val(color);
|
||||
},
|
||||
reset: function(obj, color) {
|
||||
$(obj).css({'background-color': color});
|
||||
$('#color').val(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<form method="post" id="setting-info" name="setting_info">
|
||||
<table class="table table-form m-b-none">
|
||||
<tr>
|
||||
<td align="right">名称</td>
|
||||
<td align="left">
|
||||
<input type="text" autocomplete="off" class="form-control input-sm" readonly="readonly" value="{{$row['widget_name']}}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">显示名称</td>
|
||||
<td align="left">
|
||||
<input type="text" autocomplete="off" class="form-control input-sm" id="name" name="name" value="{{$row['name']}}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">权限</td>
|
||||
<td>
|
||||
<select class="form-control input-sm" name="permission" id="permission">
|
||||
@foreach($permissions as $key => $permission)
|
||||
<option value="{{$key}}" @if($row['permission'] == $key) selected="selected" @endif>{{$permission}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">日期</td>
|
||||
<td>
|
||||
<select class="form-control input-sm" name="date" id="date">
|
||||
@foreach($dates as $key => $date)
|
||||
<option value="{{$key}}" @if($row['date'] == $key) selected="selected" @endif>{{$date}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">图标</td>
|
||||
<td align="left">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="icon-picker"></span>
|
||||
<input data-placement="bottomLeft" type="text" autocomplete="off" value="{{$row['icon']}}" class="form-control icp icp-auto input-sm" id="icon" name="icon">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">图标颜色</td>
|
||||
<td align="left">
|
||||
<div class="colorpicker-controller" title="选择颜色">
|
||||
<div id="color-picker" class="colorpicker" style="background-color:{{$row['color']}}"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color" name="color" value="{{$row['color']}}">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#icon').iconpicker();
|
||||
$("#color-picker").colorpicker({
|
||||
fillcolor: true,
|
||||
target: "#color",
|
||||
change: function(obj, color) {
|
||||
$(obj).css({'background-color': color});
|
||||
$('#color').val(color);
|
||||
},
|
||||
reset: function(obj, color) {
|
||||
$(obj).css({'background-color': color});
|
||||
$('#color').val(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<form method="post" id="setting-widget" name="setting_widget">
|
||||
<table class="table table-form m-b-none">
|
||||
<tr>
|
||||
<td align="right">名称</td>
|
||||
<td align="left">
|
||||
<input type="text" autocomplete="off" class="form-control input-sm" readonly="readonly" value="{{$row['widget_name']}}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">显示名称</td>
|
||||
<td align="left">
|
||||
<input type="text" autocomplete="off" class="form-control input-sm" id="name" name="name" value="{{$row['name']}}">
|
||||
</td>
|
||||
</tr>
|
||||
<!--
|
||||
<tr>
|
||||
<td align="right">图标</td>
|
||||
<td align="left">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="icon-picker"></span>
|
||||
<input data-placement="bottomLeft" type="text" autocomplete="off" class="form-control icp icp-auto input-sm" id="icon" name="icon">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
-->
|
||||
<tr>
|
||||
<td align="right">背景颜色</td>
|
||||
<td align="left">
|
||||
<div class="colorpicker-controller" title="选择颜色">
|
||||
<div id="color-picker" class="colorpicker"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color" name="color">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#icon').iconpicker();
|
||||
$("#color-picker").colorpicker({
|
||||
fillcolor: true,
|
||||
target: "#color",
|
||||
change: function(obj, color) {
|
||||
$(obj).css({'background-color': color});
|
||||
$('#color').val(color);
|
||||
},
|
||||
reset: function(obj, color) {
|
||||
$(obj).css({'background-color': color});
|
||||
$('#color').val(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user