239 lines
8.7 KiB
239 lines
8.7 KiB
import React, { useEffect, useState } from 'react'
|
|
import ReactECharts from 'echarts-for-react'
|
|
|
|
import { ChartsHeader } from '../../components'
|
|
import { useStateContext } from '../../contexts/ContextProvider'
|
|
import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index'
|
|
|
|
const Line2 = () => {
|
|
const { currentColor, currentMode } = useStateContext()
|
|
let [option, setOption] = useState({})
|
|
|
|
/* 生成本周日期, 格式为 MM-DD */
|
|
function convertDate(date) {
|
|
// 格式化日期
|
|
var yyyy = date.getFullYear().toString()
|
|
var mm = (date.getMonth() + 1).toString()
|
|
var dd = (date.getDate() + 1).toString()
|
|
|
|
var mmChars = mm.split('')
|
|
var ddChars = dd.split('')
|
|
|
|
return (mmChars[1] ? mm : '0' + mmChars[0]) + '-' + (ddChars[1] ? dd : '0' + ddChars[0])
|
|
}
|
|
|
|
let currentWeekDates = new Array(7)
|
|
for (let i = 0; i < 7; i++) {
|
|
const curr = new Date()
|
|
currentWeekDates[i] = convertDate(new Date(curr.setDate(curr.getDate() - curr.getDay() + i)))
|
|
}
|
|
|
|
let currentWeekFirstScreenTime = new Array(7)
|
|
let bgColor = '#fff'
|
|
let color = ['#0090FF', '#36CE9E', '#FFC005', '#FF515A', '#8B5CFF', '#00CA69']
|
|
let echartData = [
|
|
{
|
|
name: '周一',
|
|
value1: 100
|
|
},
|
|
{
|
|
name: '周二',
|
|
value1: 138
|
|
},
|
|
{
|
|
name: '周三',
|
|
value1: 350
|
|
},
|
|
{
|
|
name: '周四',
|
|
value1: 173
|
|
},
|
|
{
|
|
name: '周五',
|
|
value1: 180
|
|
},
|
|
{
|
|
name: '周六',
|
|
value1: 150
|
|
},
|
|
{
|
|
name: '周日',
|
|
value1: 180
|
|
}
|
|
]
|
|
let xAxisData = echartData.map(v => v.name)
|
|
for (let i = 0; i < 7; i++) {
|
|
xAxisData[i] = xAxisData[i] + ' ' + currentWeekDates[i]
|
|
}
|
|
|
|
const hexToRgba = (hex, opacity) => {
|
|
let rgbaColor = ''
|
|
let reg = /^#[\da-f]{6}$/i
|
|
if (reg.test(hex)) {
|
|
rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
|
|
}
|
|
return rgbaColor
|
|
}
|
|
|
|
useEffect(async () => {
|
|
for (let i = 0; i < 7; i++) {
|
|
let receivedJson = await getDayScreenUseTime('2022-' + currentWeekDates[i])
|
|
let firstScreenTimeH = parseInt(receivedJson.data.lastScreenTime.substring(0, 2))
|
|
let firstScreenTimeM = parseInt(receivedJson.data.lastScreenTime.substring(3, 5))
|
|
let firstScreenTimeS = parseInt(receivedJson.data.lastScreenTime.substring(6, 8))
|
|
if (firstScreenTimeH !== NaN && firstScreenTimeM !== NaN && firstScreenTimeS !== NaN) {
|
|
currentWeekFirstScreenTime[i] = 3600 * firstScreenTimeH + 60 * firstScreenTimeM + firstScreenTimeS
|
|
} else {
|
|
currentWeekFirstScreenTime[i] = NaN
|
|
}
|
|
}
|
|
|
|
setOption({
|
|
backgroundColor: bgColor,
|
|
color: color,
|
|
legend: {
|
|
right: 10,
|
|
top: 10
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
let html = ''
|
|
params.forEach(v => {
|
|
if (!isNaN(v.value)) {
|
|
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
|
${v.seriesName}
|
|
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${Math.floor(v.value / 3600) + '时' + Math.floor((v.value % 3600) / 60) + '分钟' + Math.floor(v.value % 60) + '秒'}</span>
|
|
`
|
|
} else {
|
|
html = `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
|
${v.seriesName}
|
|
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">该天还尚未开始</span>
|
|
`
|
|
}
|
|
})
|
|
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 (
|
|
<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
|
|
<ChartsHeader category="Line" title="最后屏幕使用时刻" />
|
|
<div className="w-full">
|
|
<ReactECharts option={option} style={{ height: '600px' }}></ReactECharts>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Line2
|