|
|
|
@ -1,14 +1,239 @@ |
|
|
|
import React from 'react'; |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
import ReactECharts from 'echarts-for-react' |
|
|
|
|
|
|
|
import { ChartsHeader, LineChart } from '../../components'; |
|
|
|
import { ChartsHeader } from '../../components' |
|
|
|
import { useStateContext } from '../../contexts/ContextProvider' |
|
|
|
import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index' |
|
|
|
|
|
|
|
const Line = () => ( |
|
|
|
<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl"> |
|
|
|
<ChartsHeader category="Line" title="Inflation Rate" /> |
|
|
|
<div className="w-full"> |
|
|
|
<LineChart /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
const Line = () => { |
|
|
|
const { currentColor, currentMode } = useStateContext() |
|
|
|
let [option, setOption] = useState({}) |
|
|
|
|
|
|
|
export default Line; |
|
|
|
/* 生成本周日期, 格式为 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.firstScreenTime.substring(0, 2)) |
|
|
|
let firstScreenTimeM = parseInt(receivedJson.data.firstScreenTime.substring(3, 5)) |
|
|
|
let firstScreenTimeS = parseInt(receivedJson.data.firstScreenTime.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 Line |
Chunxian Zhang
vor 2 Jahren
