be 前后端交互范例完成

lazy-timer-be/app.py

@@ -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)

lazy-timer-fe/src/data/dummy.js

@@ -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%',

lazy-timer-fe/src/pages/Ecommerce.jsx

@@ -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"

lazy-timer-fe/src/service/getDayScreenUseTime/index.js

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

lazy-timer-fe/src/service/index.js

@@ -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
+    })
+}