-
User Profile
+用户信息
} color="rgb(153, 171, 180)" @@ -28,9 +28,9 @@ const UserProfile = () => { alt="user-profile" />
-
Michael Roberts
-Administrator
-info@shop.com
+在隐身
+管理员
+1836891291@qq.com
diff --git a/lazy-timer-fe/src/data/dummy.js b/lazy-timer-fe/src/data/dummy.js
index 67cb64b..56f1487 100644
--- a/lazy-timer-fe/src/data/dummy.js
+++ b/lazy-timer-fe/src/data/dummy.js
@@ -1,12 +1,13 @@
import React from 'react'
import { AiOutlineCalendar, AiOutlineShoppingCart, AiOutlineAreaChart, AiOutlineBarChart, AiOutlineStock } from 'react-icons/ai'
import { FiShoppingBag, FiEdit, FiPieChart, FiBarChart, FiCreditCard, FiStar, FiShoppingCart } from 'react-icons/fi'
-import { BsKanban, BsBarChart, BsCurrencyDollar, BsShield, BsChatLeft, BsFillLaptopFill } from 'react-icons/bs'
+import { BsKanban, BsBarChart, BsCurrencyDollar, BsShield, BsChatLeft, BsFillLaptopFill, BsFileSpreadsheet, BsFillMoonFill, BsPhone } from 'react-icons/bs'
import { FaSortAmountDown } from 'react-icons/fa'
import { BiColorFill } from 'react-icons/bi'
import { IoMdContacts } from 'react-icons/io'
import { RiContactsLine, RiStockLine } from 'react-icons/ri'
import { MdWbSunny, MdBedtime } from 'react-icons/md'
+import { GrOverview } from 'react-icons/gr'
import { HiOutlineRefresh } from 'react-icons/hi'
import { TiTick } from 'react-icons/ti'
import { GiLouvrePyramid } from 'react-icons/gi'
@@ -23,6 +24,7 @@ import product5 from './product5.jpg'
import product6 from './product6.jpg'
import product7 from './product7.jpg'
import product8 from './product8.jpg'
+import { getDayScreenUse } from '../service/getDayScreenUse'
export const gridOrderImage = props => (
@@ -87,7 +89,7 @@ const customerGridImage = props => (
const customerAppImage = props => {
return (
- 
+ {/* */}
@@ -400,98 +402,27 @@ export const links = [
{
name: '总览',
englishName: 'overview',
- icon:
{props.AppName}
+
+ ${v.seriesName}
+ ${Math.floor(v.value / 3600) + '时' + Math.floor((v.value % 3600) / 60) + '分钟' + Math.floor(v.value % 60) + '秒'}
+ `
+ } else {
+ html = `
+
+ ${v.seriesName}
+ 该天还尚未开始
+ `
+ }
+ })
+ return html
+ },
+ extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
+ axisPointer: {
+ type: 'shadow',
+ shadowStyle: {
+ color: '#ffffff',
+ shadowColor: 'rgba(225,225,225,1)',
+ shadowBlur: 5
+ }
+ }
+ },
+ grid: {
+ top: 100,
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#333'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#D9D9D9'
+ }
+ },
+ data: xAxisData.map(function (str) {
+ return str.replace(' ', '\n')
+ })
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ // name: '单位：万千瓦时',
+ axisLabel: {
+ textStyle: {
+ color: '#666'
+ },
+ formatter: (value, index, format) => {
+ return Math.floor(value / 3600) + '时'
+ }
+ },
+ max: 86400,
+ nameTextStyle: {
+ color: '#666',
+ fontSize: 12,
+ lineHeight: 40
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#E9E9E9'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '最后一次屏幕使用时刻',
+ type: 'line',
+ smooth: true,
+ // showSymbol: false,/
+ symbolSize: 8,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ color: color[0],
+ shadowBlur: 3,
+ shadowColor: hexToRgba(color[0], 0.5),
+ shadowOffsetY: 8
+ }
+ },
+ areaStyle: {
+ // normal: {
+ // color: new echarts.graphic.LinearGradient(
+ // 0,
+ // 0,
+ // 0,
+ // 1,
+ // [
+ // {
+ // offset: 0,
+ // color: hexToRgba(color[0], 0.3)
+ // },
+ // {
+ // offset: 1,
+ // color: hexToRgba(color[0], 0.1)
+ // }
+ // ],
+ // false
+ // ),
+ shadowColor: hexToRgba(color[0], 0.1),
+ shadowBlur: 10
+ },
+ data: currentWeekFirstScreenTime
+ }
+ ]
+ })
+ }, [])
+
+ return (
+
(
+
+ )
+}
+
+export default Line2
diff --git a/lazy-timer-fe/src/pages/Customers.jsx b/lazy-timer-fe/src/pages/Customers.jsx
index 67a9a40..cadff1f 100644
--- a/lazy-timer-fe/src/pages/Customers.jsx
+++ b/lazy-timer-fe/src/pages/Customers.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Selection, Inject, Edit, Toolbar, Sort, Filter } from '@syncfusion/ej2-react-grids';
import { customersData, customersGrid } from '../data/dummy';
@@ -9,11 +9,22 @@ const Customers = () => {
const toolbarOptions = ['Delete'];
const editing = { allowDeleting: true, allowEditing: true };
+
+ let [temp, setTemp] = useState([])
+ customersData.then(
+ (result) => {
+ setTemp(result);
+ }
+ )
+
+
+
+
return (
+
+
@@ -29,6 +30,7 @@ const Ecommerce = () => {
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
const receivedJson = await getDayScreenUseTime(yyyy + '-' + mm + '-' + dd);
+
setEarningData2([
{
icon:
{/* 第一行四个盒子 */}
@@ -78,7 +82,7 @@ const Ecommerce = () => {
@@ -128,10 +132,11 @@ const Ecommerce = () => {
);
};
diff --git a/lazy-timer-fe/src/pages/Gannt.jsx b/lazy-timer-fe/src/pages/Gannt.jsx
new file mode 100644
index 0000000..455a905
--- /dev/null
+++ b/lazy-timer-fe/src/pages/Gannt.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react'
+import ReactECharts from 'echarts-for-react'
+import ColorMaker from '../service/colorGenerator'
+import { getSeconds } from '../service/getSeconds'
+import { getAppId } from '../service/getAppId'
+import { getDayScreenUse } from '../service/getDayScreenUse'
+
+const Gannt = () => {
+ let [option, setOption] = useState({})
+
+ useEffect(async () => {
+ let categories = ['使用记录']
+ var startTime = +new Date()
+
+ function renderItem(params, api) {
+ var categoryIndex = api.value(0)
+ var start = api.coord([api.value(1), categoryIndex])
+ var end = api.coord([api.value(2), categoryIndex])
+ var height = api.size([0, 1])[1] * 0.6
+
+ var rectShape = echarts.graphic.clipRectByRect(
+ {
+ x: start[0],
+ y: start[1] - height / 2,
+ width: end[0] - start[0],
+ height: height
+ },
+ {
+ x: params.coordSys.x,
+ y: params.coordSys.y,
+ width: params.coordSys.width,
+ height: params.coordSys.height
+ }
+ )
+
+ return (
+ rectShape && {
+ type: 'rect',
+ shape: rectShape,
+ style: api.style()
+ }
+ )
+ }
+
+ let appIdArray = await getAppId('1')
+ let types = new Array(appIdArray.data.length)
+ for (let i = 0; i < appIdArray.data.length; i++) {
+ types[i] = {
+ appId: i + 1,
+ name: appIdArray.data[i].text,
+ color: '#' + ColorMaker.GetColor(i).Color
+ }
+ }
+
+ for (let i = 0; i < appIdArray.length; i++) {
+ types.push({
+ appId: i + 1,
+ name: appIdArray[i].text,
+ color: '#' + ColorMaker.GetColor(i).Color
+ })
+ }
+ let dateStr = '2022-09-07'
+ let useRecord = await getDayScreenUse(dateStr)
+ const date = new Date(dateStr)
+ const timestampInMs = date.getTime()
+
+ // 👇️ timestamp in seconds (Unix timestamp)
+ const timestampInSeconds = Math.floor(date.getTime())
+
+ let data = new Array(useRecord.data.length)
+ for (let i = 0; i < useRecord.data.length; i++) {
+ data[i] = {
+ name: useRecord.data[i]['activity'],
+ value: new Array(getSeconds(useRecord.data[i]['timeStart']) * 1000, timestampInSeconds + getSeconds(useRecord.data[i]['timeStart']) * 1000, getSeconds(useRecord.data[i]['timeEnd']) * 1000 + timestampInSeconds, getSeconds(useRecord.data[i]['timeEnd']) * 1000),
+ itemStyle: {
+ normal: {
+ color: types[useRecord.data[i]['appId'] - 1]['color']
+ }
+ }
+ }
+ }
+
+ setOption({
+ tooltip: {
+ formatter: function (params) {
+ let seconds = params.value[3] / 1000
+ let duration = (params.value[3] - params.value[0]) / 1000
+ return (
+ params.marker +
+ params.name +
+ ': ' +
+ Math.floor(seconds / 3600) +
+ '时' +
+ Math.floor((seconds % 3600) / 60) +
+ '分' +
+ Math.floor(seconds % 60) +
+ '秒' +
+ '
' + + '持续时间: ' + + Math.floor(duration / 3600) + + '时' + + Math.floor((duration % 3600) / 60) + + '分' + + Math.floor(duration % 60) + + '秒' + ) + } + }, + dataZoom: [ + { + type: 'slider', + filterMode: 'weakFilter', + showDataShadow: false, + top: 550, + height: 10, + borderColor: 'transparent', + backgroundColor: '#e2e2e2', + handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line + handleSize: 20, + handleStyle: { + shadowBlur: 6, + shadowOffsetX: 1, + shadowOffsetY: 2, + shadowColor: '#aaa' + }, + labelFormatter: '' + }, + { + type: 'inside', + filterMode: 'weakFilter' + } + ], + grid: { + height: 450 + }, + xAxis: { + min: startTime, + scale: true, + axisLabel: { + formatter: function (val) { + let seconds = (val - startTime) / 1000 + 10620 + return Math.floor(seconds / 3600) + '时' + Math.floor(seconds % 3600 / 60) + '分' + Math.floor(seconds % 60) + '秒' + } + } + }, + yAxis: { + data: categories + }, + series: [ + { + type: 'custom', + renderItem: function (params, api) { + var categoryIndex = api.value(0) + var start = api.coord([api.value(1), categoryIndex]) + var end = api.coord([api.value(2), categoryIndex]) + var height = api.size([0, 1])[1] * 0.6 + + var rectShape = echarts.graphic.clipRectByRect( + { + x: start[0], + y: start[1] - height / 2, + width: end[0] - start[0], + height: height + }, + { + x: params.coordSys.x, + y: params.coordSys.y, + width: params.coordSys.width, + height: params.coordSys.height + } + ) + + return ( + rectShape && { + type: 'rect', + shape: rectShape, + style: api.style() + } + ) + }, + itemStyle: { + normal: { + opacity: 0.8 + } + }, + encode: { + x: [1, 2], + y: 0 + }, + data: data + } + ] + }) + }, []) + + return
日期
-2022年9月5日
+2022年9月7日
{/* 实际的盒子 */}
*/}
+
{/*
-
-
Revenue Updates
+屏幕使用记录甘特图
-
+ {/*
-
+ {/*
-
+
*/}
- $93,438 @@ -155,17 +160,19 @@ const Ecommerce = () => {
Budget
-
+
*/}
+ {/* $48,487
Expense
-
-
*/}
+ {/*
-
+
-
+{/*
@@ -212,7 +219,7 @@ const Ecommerce = () => {
*/}
+ {/*
*/}
- Recent Transactions
@@ -263,9 +270,9 @@ const Ecommerce = () => {
+ {/*
-
+ Weekly Stats
@@ -386,7 +393,7 @@ const Ecommerce = () => {' + + '持续时间: ' + + Math.floor(duration / 3600) + + '时' + + Math.floor((duration % 3600) / 60) + + '分' + + Math.floor(duration % 60) + + '秒' + ) + } + }, + dataZoom: [ + { + type: 'slider', + filterMode: 'weakFilter', + showDataShadow: false, + top: 550, + height: 10, + borderColor: 'transparent', + backgroundColor: '#e2e2e2', + handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line + handleSize: 20, + handleStyle: { + shadowBlur: 6, + shadowOffsetX: 1, + shadowOffsetY: 2, + shadowColor: '#aaa' + }, + labelFormatter: '' + }, + { + type: 'inside', + filterMode: 'weakFilter' + } + ], + grid: { + height: 450 + }, + xAxis: { + min: startTime, + scale: true, + axisLabel: { + formatter: function (val) { + let seconds = (val - startTime) / 1000 + 10620 + return Math.floor(seconds / 3600) + '时' + Math.floor(seconds % 3600 / 60) + '分' + Math.floor(seconds % 60) + '秒' + } + } + }, + yAxis: { + data: categories + }, + series: [ + { + type: 'custom', + renderItem: function (params, api) { + var categoryIndex = api.value(0) + var start = api.coord([api.value(1), categoryIndex]) + var end = api.coord([api.value(2), categoryIndex]) + var height = api.size([0, 1])[1] * 0.6 + + var rectShape = echarts.graphic.clipRectByRect( + { + x: start[0], + y: start[1] - height / 2, + width: end[0] - start[0], + height: height + }, + { + x: params.coordSys.x, + y: params.coordSys.y, + width: params.coordSys.width, + height: params.coordSys.height + } + ) + + return ( + rectShape && { + type: 'rect', + shape: rectShape, + style: api.style() + } + ) + }, + itemStyle: { + normal: { + opacity: 0.8 + } + }, + encode: { + x: [1, 2], + y: 0 + }, + data: data + } + ] + }) + }, []) + + return