From 6c91f6f5f28c01f59b9679f16a7e3d7694c5f12a Mon Sep 17 00:00:00 2001 From: vapao Date: Wed, 29 Jul 2020 20:58:28 +0800 Subject: [PATCH] =?UTF-8?q?A=20=E5=8F=91=E5=B8=83=E7=94=B3=E8=AF=B7TOP5?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=94=AF=E6=8C=81=E9=80=89=E6=8B=A9=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E8=8C=83=E5=9B=B4=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- spug_api/apps/home/views.py | 20 ++++-- spug_web/src/pages/home/RequestTop.js | 89 ++++++++++++++++-------- spug_web/src/pages/home/index.module.css | 19 +++++ 3 files changed, 94 insertions(+), 34 deletions(-) create mode 100644 spug_web/src/pages/home/index.module.css diff --git a/spug_api/apps/home/views.py b/spug_api/apps/home/views.py index 5c8a9f2..cb117d9 100644 --- a/spug_api/apps/home/views.py +++ b/spug_api/apps/home/views.py @@ -8,7 +8,8 @@ from apps.schedule.models import Task from apps.monitor.models import Detection from apps.alarm.models import Alarm from apps.deploy.models import Deploy, DeployRequest -from libs.utils import json_response, human_date +from libs.utils import json_response, human_date, parse_time +from libs.parser import JsonParser, Argument from datetime import datetime, timedelta import json @@ -35,11 +36,18 @@ def get_alarm(request): def get_request(request): - data = {x.id: {'name': x.name, 'count': 0} for x in App.objects.all()} - for req in DeployRequest.objects.filter(created_at__gt=human_date()): - data[req.deploy.app_id]['count'] += 1 - data = sorted(data.values(), key=lambda x: x['count'], reverse=True)[:5] - return json_response(data) + form, error = JsonParser( + Argument('duration', type=list, help='参数错误') + ).parse(request.body) + if error is None: + s_date = form.duration[0] + e_date = (parse_time(form.duration[1]) + timedelta(days=1)).strftime('%Y-%m-%d') + data = {x.id: {'name': x.name, 'count': 0} for x in App.objects.all()} + for req in DeployRequest.objects.filter(created_at__gt=s_date, created_at__lt=e_date): + data[req.deploy.app_id]['count'] += 1 + data = sorted(data.values(), key=lambda x: x['count'], reverse=True)[:5] + return json_response(data) + return json_response(error=error) def get_deploy(request): diff --git a/spug_web/src/pages/home/RequestTop.js b/spug_web/src/pages/home/RequestTop.js index e592a28..171b883 100644 --- a/spug_web/src/pages/home/RequestTop.js +++ b/spug_web/src/pages/home/RequestTop.js @@ -3,37 +3,70 @@ * Copyright (c) * Released under the AGPL-3.0 License. */ -import React from 'react'; -import { Card } from 'antd'; +import React, { useState, useEffect } from 'react'; +import { Card, DatePicker } from 'antd'; import { Chart, Geom, Axis, Tooltip } from 'bizcharts'; +import styles from './index.module.css'; +import moment from 'moment'; import { http } from 'libs'; -export default class RequestTop extends React.Component { - constructor(props) { - super(props); - this.state = { - loading: true, - res: [] - }; + +export default function () { + const [loading, setLoading] = useState(false); + const [duration, setDuration] = useState([moment(), moment()]); + const [range, setRange] = useState('day'); + const [res, setRes] = useState([]) + + useEffect(() => { + setLoading(true); + const strDuration = duration.map(x => x.format('YYYY-MM-DD')) + http.post('/api/home/request/', {duration: strDuration}) + .then(res => setRes(res)) + .finally(() => setLoading(false)) + }, [duration]) + + function handleClick(val) { + let duration = []; + switch (val) { + case 'day': + setRange('day'); + duration = [moment(), moment()]; + break; + case 'week': + setRange('week'); + duration = [moment().weekday(0), moment().weekday(6)]; + break; + case 'month': + setRange('month'); + const s_date = moment().startOf('month') + const e_date = moment().endOf('month') + duration = [s_date, e_date]; + break; + default: + setRange('custom') + duration = val + } + setDuration(duration) } - componentDidMount() { - http.get('/api/home/request/') - .then(res => this.setState({res})) - .finally(() => this.setState({loading: false})) - } - - render() { - const {res, loading} = this.state; - return ( - - - - - - - - - ) - } + return ( + + handleClick('day')}>今日 + handleClick('week')}>本周 + handleClick('month')}>本月 + + + )}> + + + + + + + + ) } diff --git a/spug_web/src/pages/home/index.module.css b/spug_web/src/pages/home/index.module.css new file mode 100644 index 0000000..57be898 --- /dev/null +++ b/spug_web/src/pages/home/index.module.css @@ -0,0 +1,19 @@ +:global(.ant-card-extra) { + padding: 12px 0; +} + +.spanButton { + cursor: pointer; + margin-right: 24px; + color: rgba(0, 0, 0, .65); +} + +.spanButtonActive { + cursor: pointer; + margin-right: 24px; + color: #1890ff; +} + +.spanButton:hover { + color: #1890ff; +} \ No newline at end of file