Browse Source

be 前后端交互范例完成

master
Chunxian Zhang 2 years ago
parent
commit
be83b8b9bf
6 changed files with 112 additions and 58 deletions
  1. +0
    -0
      appTime/AppTime-Realease/data.db-journal
  2. +20
    -44
      lazy-timer-be/app.py
  3. +10
    -10
      lazy-timer-fe/src/data/dummy.js
  4. +58
    -4
      lazy-timer-fe/src/pages/Ecommerce.jsx
  5. +7
    -0
      lazy-timer-fe/src/service/getDayScreenUseTime/index.js
  6. +17
    -0
      lazy-timer-fe/src/service/index.js

+ 0
- 0
appTime/AppTime-Realease/data.db-journal View File


+ 20
- 44
lazy-timer-be/app.py View File

@ -1,8 +1,9 @@
# python对多文件编程及其不友好, 白写了这么多文件到处报错, 最后还是要写在一个文件里解决了
import os
import sys
import json
from datetime import datetime # 处理时间
from flask import Flask
from flask import Flask, request
from flask_cors import CORS, cross_origin
from flask_sqlalchemy import SQLAlchemy
@ -46,57 +47,32 @@ class Win(db.Model):
# 后端API
# 获取每日屏幕使用总时间
@app.route('/getDayScreenUseTime', methods=['GET'])
@app.route('/getDayScreenUseTime', methods=['POST'])
@cross_origin()
def getDayScreenUseTime():
datetimeStr = '2022-09-05'
# datetimeStr = data.datetimeStr
datetimeStr1 = json.loads(request.data)
datetimeStr = datetimeStr1['datetimeStr']
struct_time = datetime.strptime(datetimeStr, "%Y-%m-%d").date() # 获取请求日期, struct_time数据类型为dateTime
activityTimeList = Period.query.all()
selectedTimeList = [] # 选中的对应今天日期的时间李彪
selectedTimeList = [] # 选中的对应今天日期的时间
for time in activityTimeList:
if time.timeStart.date() == struct_time:
if time.timeStart.date() == struct_time and time.timeEnd.date() == struct_time:
selectedTimeList.append(time)
timeAmount = 0
for time in selectedTimeList:
time_diff = time.timeEnd - time.timeStart
timeAmount = timeAmount + time_diff.total_seconds()
if time.timeEnd.date() == time.timeStart.date():
time_diff = time.timeEnd - time.timeStart
timeAmount = timeAmount + time_diff.total_seconds()
timeAmount = int(timeAmount)
m, s = divmod(timeAmount, 60)
h, m = divmod(m, 60)
return '{:d}小时{:02d}分{:02d}秒'.format(h, m, s)
# 获取每日第一次屏幕使用时刻
@app.route('/getFirstScreenTime', methods=['GET'])
@cross_origin()
def getFirstScreenTime():
datetimeStr = '2022-09-05'
struct_time = datetime.strptime(datetimeStr, "%Y-%m-%d").date() # 获取请求日期, struct_time数据类型为dateTime
activityTimeList = Period.query.all()
selectedTimeList = [] # 选中的对应今天日期的时间李彪
for time in activityTimeList:
if time.timeStart.date() == struct_time:
selectedTimeList.append(time)
break;
firstScreenTime = selectedTimeList[0].timeStart.strftime('%H点%M分%S秒')
return firstScreenTime
# 获取每日最后一次屏幕使用时刻
@app.route('/getLastScreenTime', methods=['GET'])
@cross_origin()
def getLastScreenTime():
datetimeStr = '2022-09-05'
struct_time = datetime.strptime(datetimeStr, "%Y-%m-%d").date() # 获取请求日期, struct_time数据类型为dateTime
activityTimeList = Period.query.all()
selectedTimeList = [] # 选中的对应今天日期的时间李彪
for time in activityTimeList:
if time.timeStart.date() == struct_time:
selectedTimeList.append(time)
lastScreenTime = selectedTimeList[-1].timeEnd.strftime('%H点%M分%S秒')
return lastScreenTime
# 持续时间
getDayScreenUseTimeM, getDayScreenUseTimeS = divmod(timeAmount, 60) # 每日屏幕使用时长, 分时秒
getDayScreenUseTimeH, getDayScreenUseTimeM = divmod(getDayScreenUseTimeM, 60)
firstScreenTime = selectedTimeList[0].timeStart.strftime('%H时%M分%S秒') # 第一次屏幕使用时刻,
lastScreenTime = selectedTimeList[-1].timeEnd.strftime('%H时%M分%S秒') # 最后一次屏幕使用时刻
screenTimeSpan = int((selectedTimeList[-1].timeEnd - selectedTimeList[0].timeStart).total_seconds()) # 持续时间
getScreenTimeSpanM, getScreenTimeSpanS = divmod(screenTimeSpan, 60) # 每日屏幕使用时长, 分时秒
getScreenTimeSpanH, getScreenTimeSpanM = divmod(getScreenTimeSpanM, 60)
sendJson = {'getDayScreenUseTimeH': getDayScreenUseTimeH, 'getDayScreenUseTimeM': getDayScreenUseTimeM, 'getDayScreenUseTimeS': getDayScreenUseTimeS, 'firstScreenTime': firstScreenTime, 'lastScreenTime': lastScreenTime, 'getScreenTimeSpanH': getScreenTimeSpanH, 'getScreenTimeSpanM': getScreenTimeSpanM, 'getScreenTimeSpanS': getScreenTimeSpanS }
return json.dumps(sendJson, indent=4)

+ 10
- 10
lazy-timer-fe/src/data/dummy.js View File

@ -631,6 +631,16 @@ export const chatData = [
export const earningData = [
{
icon: <BsFillLaptopFill />,
amount: '这里填写时间',
percentage: '+38%',
title: '今日屏幕使用时间',
iconColor: 'rgb(228, 106, 118)',
iconBg: 'rgb(255, 244, 229)',
pcColor: 'green-600',
},
{
icon: <MdWbSunny />,
amount: '这里填写时间',
percentage: '-4%',
@ -649,16 +659,6 @@ export const earningData = [
pcColor: 'black-600',
},
{
icon: <BsFillLaptopFill />,
amount: '这里填写时间',
percentage: '+38%',
title: '今日屏幕使用时间',
iconColor: 'rgb(228, 106, 118)',
iconBg: 'rgb(255, 244, 229)',
pcColor: 'green-600',
},
{
icon: <FaSortAmountDown />,
amount: '这里填写时间',
percentage: '-12%',

+ 58
- 4
lazy-timer-fe/src/pages/Ecommerce.jsx View File

@ -1,14 +1,17 @@
import React from 'react';
import React, { useRef, useState, useEffect } from 'react';
import { BsFillLaptopFill } from 'react-icons/bs';
import { AiFillCalendar } from 'react-icons/ai';
import { GoPrimitiveDot } from 'react-icons/go';
import { MdWbSunny, MdBedtime } from 'react-icons/md';
import { IoIosMore } from 'react-icons/io';
import { FaSortAmountDown } from 'react-icons/fa';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { Stacked, Pie, Button, LineChart, SparkLine } from '../components';
import { earningData, medicalproBranding, recentTransactions, weeklyStats, dropdownData, SparklineAreaData, ecomPieChartData } from '../data/dummy';
import { useStateContext } from '../contexts/ContextProvider';
import product9 from '../data/product9.jpg';
import { getDayScreenUseTime } from '../service/getDayScreenUseTime/index'
const DropDown = ({ currentMode }) => (
<div className="w-28 border-1 border-color px-2 py-1 rounded-md">
@ -17,13 +20,64 @@ const DropDown = ({ currentMode }) => (
);
const Ecommerce = () => {
const { currentColor, currentMode } = useStateContext();
const { currentColor, currentMode } = useStateContext()
let [earningData2, setEarningData2] = useState(earningData)
useEffect(async () => {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
const receivedJson = await getDayScreenUseTime(yyyy + '-' + mm + '-' + dd);
console.log(receivedJson);
setEarningData2([
{
icon: <BsFillLaptopFill />,
amount: receivedJson.data.getDayScreenUseTimeH + '小时' + receivedJson.data.getDayScreenUseTimeM + '分' + receivedJson.data.getDayScreenUseTimeS + '秒',
percentage: '+38%',
title: '今日屏幕使用时间',
iconColor: 'rgb(228, 106, 118)',
iconBg: 'rgb(255, 244, 229)',
pcColor: 'green-600',
},
{
icon: <MdWbSunny />,
amount: receivedJson.data.firstScreenTime,
percentage: '-4%',
title: '第一次屏幕使用',
iconColor: '#03C9D7',
iconBg: '#E5FAFB',
pcColor: 'red-600',
},
{
icon: <MdBedtime />,
amount: receivedJson.data.lastScreenTime,
percentage: '+23%',
title: '最后一次屏幕使用',
iconColor: 'rgb(255, 244, 229)',
iconBg: 'rgb(0,0,0)',
pcColor: 'black-600',
},
{
icon: <FaSortAmountDown />,
amount: receivedJson.data.getScreenTimeSpanH + '小时' + receivedJson.data.getScreenTimeSpanM + '分' + receivedJson.data.getScreenTimeSpanS + '秒',
percentage: '-12%',
title: '时间跨度',
iconColor: 'rgb(0, 194, 146)',
iconBg: 'rgb(235, 250, 242)',
pcColor: 'red-600',
},
])
}, [])
console.log(earningData2);
return (
<div className="mt-24">
{/* 第一行四个盒子 */}
<div className="flex flex-wrap lg:flex-nowrap justify-center ">
<div className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg h-44 rounded-xl w-full lg:w-80 p-8 pt-9 m-3 bg-hero-pattern bg-no-repeat bg-cover bg-center">
<div className="bg-white dark:text-gray-200 darbaok:bg-secondary-dark-bg h-44 rounded-xl w-full lg:w-80 p-8 pt-9 m-3 bg-hero-pattern bg-no-repeat bg-cover bg-center">
<div className="flex justify-between items-center">
<div>
<p className="font-bold text-gray-400">日期</p>
@ -52,7 +106,7 @@ const Ecommerce = () => {
</div>
</div>
<div className="flex m-3 flex-wrap justify-center gap-1 items-center">
{earningData.map((item) => (
{earningData2.map((item) => (
<div key={item.title} className="bg-white h-44 dark:text-gray-200 dark:bg-secondary-dark-bg md:w-56 p-4 pt-9 rounded-2xl ">
<button
type="button"

+ 7
- 0
lazy-timer-fe/src/service/getDayScreenUseTime/index.js View File

@ -0,0 +1,7 @@
import { post } from '../index'
export const getDayScreenUseTime = (datetimeStr) => {
return post('/getDayScreenUseTime', {
datetimeStr
})
}

+ 17
- 0
lazy-timer-fe/src/service/index.js View File

@ -0,0 +1,17 @@
import axios from 'axios'
const domain = 'http://127.0.0.1:5000'
const getURL = (path) => {
return `${domain}${path}`
}
export const post = (url, data) => {
return axios.post(getURL(url), data);
};
export const get = (url, data = {}) => {
return axios.get(getURL(url), {
params: data
})
}

Loading…
Cancel
Save