199 lines
7.3 KiB
199 lines
7.3 KiB
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) +
|
|
'秒' +
|
|
'<br/>' +
|
|
'持续时间: ' +
|
|
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 <ReactECharts option={option} style={{ height: '800px', width: '1200px' }}></ReactECharts>
|
|
}
|
|
|
|
export default Gannt
|