4 changed files with 261 additions and 6 deletions
@ -0,0 +1,146 @@
@@ -0,0 +1,146 @@
|
||||
<?php |
||||
|
||||
namespace App\Admin\Metrics\Examples\Follow\Ajax; |
||||
|
||||
use App\Admin\Metrics\Examples\Follow\AllCollegesFollowCharts; |
||||
use App\Models\AdmissionNewStudents; |
||||
use App\Models\SecondaryCollege; |
||||
use App\Models\Speciality; |
||||
use App\Models\UserFollowRecord; |
||||
use App\Models\UsersMember; |
||||
use Dcat\Admin\Support\JavaScript; |
||||
use Illuminate\Http\Request; |
||||
use Illuminate\Support\Facades\DB; |
||||
|
||||
class AllCollegesFollowChartsAjax extends AllCollegesFollowCharts |
||||
{ |
||||
public function __construct() |
||||
{ |
||||
parent::__construct(); |
||||
} |
||||
|
||||
/** |
||||
* 处理请求 |
||||
* 如果你的图表类中包含此方法,则可以通过此方法处理前端通过ajax提交的获取图表数据的请求 |
||||
* @param Request $request |
||||
* @return mixed|void |
||||
*/ |
||||
public function handle(Request $request) |
||||
{ |
||||
$option = $request->input('option'); |
||||
$table1 = UsersMember::query()->getModel()->getTable(); |
||||
$table2 = UserFollowRecord::query()->getModel()->getTable(); |
||||
|
||||
$data = [[ |
||||
'name' => '总人数', |
||||
'data' => [], |
||||
'tooltip' => [ |
||||
[ |
||||
"name" => "男生", |
||||
"data" => [], |
||||
"color" => '#ff6b6b' |
||||
], |
||||
[ |
||||
"name" => "女生", |
||||
"data" => [], |
||||
"color" => "#a21919" |
||||
] |
||||
] |
||||
]]; |
||||
|
||||
$collegeAll = SecondaryCollege::query()->where(["status" => SecondaryCollege::STATUS_YES])->get(["name", "id"])->toArray(); |
||||
$categories = array_column($collegeAll, 'name'); |
||||
|
||||
// 新生数据 |
||||
$studentsIds = AdmissionNewStudents::query()->where(["is_new_student" => "1"])->pluck('idCard')->toArray(); |
||||
foreach ($collegeAll as $key=>$value){ |
||||
$all = DB::table("{$table1} as aa") |
||||
->leftJoin("{$table2} as bb", function ($join) { |
||||
$join->on("aa.unique_number", "=", "bb.unique_number")->where(["bb.is_abandon" => "1"]); |
||||
}) |
||||
->whereIn("aa.idcard", $studentsIds) |
||||
->where("aa.enroll_status", 1) |
||||
->where(function ($query) use ($value) { |
||||
$specialityIds = Speciality::query()->where("secondary_college_id", $value['id'])->pluck('id')->toArray(); |
||||
$query->whereIn('speciality_id', $specialityIds); |
||||
}) |
||||
->where(function ($query) use ($option) { |
||||
if (empty($option)) { |
||||
$query->whereNull("bb.id"); |
||||
} else { |
||||
$query->where(["bb.follow_id" => $option]); |
||||
} |
||||
}) |
||||
->select('aa.sex', DB::raw('count(*) as total')) |
||||
->groupBy('aa.sex') |
||||
->pluck('total', 'sex') |
||||
->toArray(); |
||||
|
||||
// 总人数 |
||||
$total = array_sum($all); |
||||
// 男生 |
||||
$man = $all[1] ?? 0; |
||||
// 女生 |
||||
$girl = $all[2] ?? 0; |
||||
|
||||
$data[0]['data'][] = $total; |
||||
$data[0]['tooltip'][0]['data'][] = $man; |
||||
$data[0]['tooltip'][1]['data'][] = $girl; |
||||
} |
||||
$this->withData($data); |
||||
$this->option("labels", $categories); |
||||
$tooltipCustomFunction = <<<JS |
||||
function({ series, seriesIndex, dataPointIndex, w }) { |
||||
|
||||
let newStr = ""; |
||||
w.config.series[0].tooltip.forEach(item=>{ |
||||
newStr += `<div style="display: flex;padding: 0 10px;align-items: center;margin-top: 8px;"> |
||||
<div style="width:12px;height:12px;border-radius:50%;background-color: \${item.color};margin-right: 10px;"> |
||||
|
||||
</div> |
||||
<div style="font-size: 12px;"> |
||||
\${item.name}: \${item.data[dataPointIndex]} |
||||
</div> |
||||
</div>` |
||||
}) |
||||
|
||||
return ` |
||||
<div style=' border: 1px solid #e3e3e3; background: rgba(255, 255, 255, 0.96); border-radius: 5px; box-shadow: 2px 2px 6px -4px #999; font-size: 14px;'> |
||||
<div style='padding:6px;background: #ECEFF1;border-bottom: 1px solid #ddd;font-size:12px;'>\${w.config.labels[dataPointIndex]}</div> |
||||
<div style="display: flex;padding: 0 10px;align-items: center; margin-top: 8px;"> |
||||
<div style="width:12px;height:12px;border-radius:50%;background-color: rgb(0, 143, 251);margin-right: 10px;"> |
||||
|
||||
</div> |
||||
<div style="font-size: 12px;"> |
||||
\${w.config.series[0].name}: \${w.config.series[0].data[dataPointIndex]} |
||||
</div> |
||||
</div> |
||||
\${newStr} |
||||
</div> |
||||
`; |
||||
} |
||||
JS; |
||||
|
||||
$this->option('tooltip.custom', JavaScript::make($tooltipCustomFunction)); |
||||
} |
||||
|
||||
/** |
||||
* 这里返回需要异步传递到 handler 方法的参数 |
||||
* |
||||
* @return array |
||||
*/ |
||||
public function parameters(): array |
||||
{ |
||||
return [ |
||||
'id' => $this->id, |
||||
'username' => $this->username, |
||||
]; |
||||
} |
||||
|
||||
/** |
||||
* 这里覆写父类的方法,不再查询数据 |
||||
*/ |
||||
protected function buildData() |
||||
{ |
||||
} |
||||
} |
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
<?php |
||||
|
||||
namespace App\Admin\Metrics\Examples\Follow; |
||||
|
||||
use Dcat\Admin\Admin; |
||||
use Dcat\Admin\Widgets\ApexCharts\Chart; |
||||
|
||||
class AllCollegesFollowCharts extends Chart |
||||
{ |
||||
public function __construct($containerSelector = null, $options = []) |
||||
{ |
||||
parent::__construct($containerSelector, $options); |
||||
|
||||
$this->setUpOptions(); |
||||
} |
||||
|
||||
/** |
||||
* 初始化图表配置 |
||||
*/ |
||||
protected function setUpOptions() |
||||
{ |
||||
$color = Admin::color(); |
||||
|
||||
$colors = [$color->primary(), $color->primaryDarker()]; |
||||
|
||||
$this->options([ |
||||
'colors' => ['#008ffbd9', '#feb019', '#00e396'], |
||||
'chart' => [ |
||||
'type' => 'bar', |
||||
"height"=>'315px', //高度 |
||||
], |
||||
'plotOptions' => [ |
||||
'bar' => [ |
||||
'horizontal' => false, |
||||
'columnWidth' => '80%', |
||||
'borderRadius' => 5, |
||||
'borderRadiusApplication' => 'end' |
||||
] |
||||
], |
||||
'stroke' => [ |
||||
'show' => false, |
||||
'width' => 3 |
||||
], |
||||
'xaxis' => [ |
||||
'type' => 'category', |
||||
], |
||||
'tooltip' => [ |
||||
'x' => [ |
||||
'formatter' => function ($val) { |
||||
return $val; |
||||
} |
||||
] |
||||
], |
||||
]); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* 设置图表数据 |
||||
* @param array $data |
||||
* @return $this |
||||
*/ |
||||
public function withData(array $data) |
||||
{ |
||||
return $this->option('series', $data); |
||||
} |
||||
|
||||
/** |
||||
* 设置图表类别. |
||||
* @param array $data |
||||
* @return $this |
||||
*/ |
||||
public function withCategories(array $data) |
||||
{ |
||||
return $this->option('xaxis.categories', $data); |
||||
} |
||||
|
||||
/** |
||||
* 渲染图表 |
||||
* @return string |
||||
*/ |
||||
public function render() |
||||
{ |
||||
return parent::render(); |
||||
} |
||||
} |
Loading…
Reference in new issue