basePage()->css($this->css())->body([
Grid::make()->columns([
$this->frameworkInfo()->md(8),
Flex::make()->items([
$this->clock(),
$this->hitokoto(),
])->direction('column'),
]),
Grid::make()->columns([
$this->lineChart()->md(6),
$this->pieChart()->md(6),
]),
]);
return $this->response()->success($page);
}
/**
* 一言
*/
public function hitokoto()
{
return Card::make()
->className('h-full clear-card-mb')
->body(
Custom::make()->html(<<
『
』
——
「
」
HTML
)->onMount(<< response.json())
.then(data => {
const hitokoto = document.querySelector('#hitokoto_text')
hitokoto.href = `https://hitokoto.cn/?uuid=\${data.uuid}`
hitokoto.innerText = data.hitokoto
document.querySelector('#hitokoto_from_who').innerText = data.from_who
document.querySelector('#hitokoto_from').innerText = data.from
})
.catch(console.error)
JS
)
);
}
public function clock(): Card
{
return Card::make()->className('h-full bg-blingbling')->header([
'title' => '时钟',
])->body([
Custom::make()
->name('clock')
->html('')
->onMount(<< {
clock.innerHTML = (new Date()).toLocaleTimeString();
requestAnimationFrame(tick);
};
tick();
const clockDate = document.getElementById('clock-date');
clockDate.innerHTML = (new Date()).toLocaleDateString();
JS
),
]);
}
public function frameworkInfo(): Card
{
return Card::make()->className('h-96')->body(
Wrapper::make()->className('h-full')->body([
Flex::make()->className('h-full')->direction('column')->justify('center')->items([
Image::make()->src(url(config('admin.logo'))),
Wrapper::make()->className('text-3xl mt-9')->body(config('admin.name')),
Flex::make()->className('w-64 mt-5')->justify('space-around')->items([
Action::make()
->level('link')
->label('客人入住')
->actionType('url')
->link('live-in-do'),
Action::make()
->level('link')
->label('客人续住')
->actionType('url')
->link('live-continue-do'),
Action::make()
->level('link')
->label('退住结算')
->actionType('url')
->link('live-exit-do'),
]),
]),
])
);
}
public function pieChart(): Card
{
$lvList = Keyword::getByParentKey('nurse_lv')->pluck('name', 'value');
$listData = Oldmen::select(DB::raw('`nurse_lv`, count(`id`) as num'))->where('live_in', Oldmen::STATUS_LIVE)->groupBy('nurse_lv')->get()->keyBy('nurse_lv')->toArray();
$data = [];
foreach($lvList as $lv=>$name){
$data[] = [
"name"=>$name, "value"=>$listData[$lv]['num'] ?? 0
];
}
return Card::make()->className('h-96')->body(
Chart::make()->height(350)->config(Components::make()->chartPieConfig('当前护理占比', $data))
);
}
public function lineChart(): Card
{
$endDay = now()->format('Y-m-d');
$startDay = now()->subDays(7)->format('Y-m-d');
$data = [];
list($day, $diffDays, $xKeys) = $this->makeChartXkeys($startDay, $endDay);
$listData = ConstFlow::select(DB::raw('DATE_FORMAT(`start_at`, "%Y-%m-%d") as ymd, count(`oldman_id`) as num'))
->where('const_type', ConstFlow::TYPE_IN)->whereBetween('start_at', [$startDay.' 00:00:00', $endDay.' 23:59:59'])->groupBy('ymd')->get()->keyBy('ymd')->toArray();
foreach($xKeys as $key){
$data[] = $listData[$key]['num'] ?? 0;
}
$chart = amisMake()->Chart()->config(Components::make()->chartLineBarConfig('入住情况', $xKeys, [
[
'name'=> '入住情况',
'type'=>'line',
'data' => $data,
'color' => '#3491fa',
'unit' => '人'
]
]));
return Card::make()->height(380)->className('h-96')->body($chart);
}
public function cube(): Card
{
return Card::make()->className('h-96 ml-4 w-8/12')->body(
Html::make()->html(<<
.cube-box{ height: 300px; display: flex; align-items: center; justify-content: center; }
.cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; animation: rotate 10s linear infinite; }
.cube:after {
content: '';
width: 100%;
height: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
position: absolute;
transform-origin: bottom;
transform-style: preserve-3d;
transform: rotateX(90deg) translateY(50px) translateZ(-50px);
background-color: rgba(0, 0, 0, 0.1);
}
.cube div {
background-color: rgba(64, 158, 255, 0.7);
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgb(27, 99, 170);
box-shadow: 0 0 60px rgba(64, 158, 255, 0.7);
}
.cube div:nth-child(1) { transform: translateZ(-50px); animation: shade 10s -5s linear infinite; }
.cube div:nth-child(2) { transform: translateZ(50px) rotateY(180deg); animation: shade 10s linear infinite; }
.cube div:nth-child(3) { transform-origin: right; transform: translateZ(50px) rotateY(270deg); animation: shade 10s -2.5s linear infinite; }
.cube div:nth-child(4) { transform-origin: left; transform: translateZ(50px) rotateY(90deg); animation: shade 10s -7.5s linear infinite; }
.cube div:nth-child(5) { transform-origin: bottom; transform: translateZ(50px) rotateX(90deg); background-color: rgba(0, 0, 0, 0.7); }
.cube div:nth-child(6) { transform-origin: top; transform: translateZ(50px) rotateX(270deg); }
@keyframes rotate {
0% { transform: rotateX(-15deg) rotateY(0deg); }
100% { transform: rotateX(-15deg) rotateY(360deg); }
}
@keyframes shade { 50% { background-color: rgba(0, 0, 0, 0.7); } }
HTML
)
);
}
private function css(): array
{
return [
'.clear-card-mb' => [
'margin-bottom' => '0 !important',
],
'.cxd-Image' => [
'border' => '0',
],
'.bg-blingbling' => [
'color' => '#fff',
'background' => 'linear-gradient(to bottom right, #2C3E50, #FD746C, #FF8235, #ffff1c, #92FE9D, #00C9FF, #a044ff, #e73827)',
'background-repeat' => 'no-repeat',
'background-size' => '1000% 1000%',
'animation' => 'gradient 60s ease infinite',
],
'@keyframes gradient' => [
'0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}',
],
'.bg-blingbling .cxd-Card-title' => [
'color' => '#fff',
],
];
}
/**
* 根据时间，处理X轴横坐标
*/
private function makeChartXkeys($startTime = null, $endTime = null){
$diffDays = 0;
$day = date('Y-m-d');
$xKeys = [];
if($startTime && $endTime){
if($startTime == $endTime){//查询某一天
$day = $startTime;
}else{
$startDay = Carbon::parse($startTime);
$endDay = Carbon::parse($endTime);
$diffDays = $startDay->diffInDays($endDay, false);
}
}
$xKeys = [];
if($diffDays){
for ($i = 0; $i<=$diffDays; $i++) {
$xKeys[] =(clone $startDay)->addDays($i)->startOfDay()->format('Y-m-d');
}
}else{
//调整截至到当前小时
$h = 23;
if($day == date('Y-m-d')){
$h = date('H');
}
for ($i = 0; $i < ($h+1); $i++) {
$xKeys[] = str_pad($i, 2, '0', STR_PAD_LEFT).':00';
}
}
return array($day, $diffDays, $xKeys);
}
}