Browse Source

feat:展示数据大屏的各个图的释义

dev
zhaobing’ 1 year ago
parent
commit
82af56b3a3
  1. 6
      web/client/src/sections/projectGroup/components/card.jsx
  2. 10
      web/client/src/sections/projectGroup/containers/bigscreen.jsx

6
web/client/src/sections/projectGroup/components/card.jsx

@ -1,8 +1,8 @@
import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { Tooltip } from '@douyinfe/semi-ui';
const Card = (props) => {
const { title, style = {} } = props
const { title, style = {},tooltipContent } = props
return (
<div style={{
@ -21,12 +21,14 @@ const Card = (props) => {
display: 'flex', alignItems: 'center', justifyContent: 'space-between'
}}>
<span style={{ fontSize: 'x-large', letterSpacing: 1, textShadow: '0 0 8px #2a62fc05' }}>{title}</span>
<Tooltip content={tooltipContent}>
<img src='/assets/images/projectGroup/cardTitlePoint.png' style={{
width: 4,
height: 3,
background: '#2C66F3',
boxShadow: '0 0 4px 1px #2C66F3'
}} />
</Tooltip>
</div>
<div style={{ height:'calc(100% - 34px)', padding: '12px 18px' }}>
{props?.children}

10
web/client/src/sections/projectGroup/containers/bigscreen.jsx

@ -189,7 +189,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div style={{ width: "100%", height: '100%' }}>
<div style={{ width: '100%', height: "45%", display: 'flex' }}>
<div style={{ width: "calc(50% - 8px)", height: "100%", marginRight: 16, display: 'flex' }}>
<Card title='项目工单占比' style={{ width: "calc(50% - 8px)", height: "100%", marginRight: 16 }}>
<Card title='项目工单占比' tooltipContent='项目工单占比:一个月内项目发起工单修复的次数占比。' style={{ width: "calc(50% - 8px)", height: "100%", marginRight: 16 }}>
<div style={{ height: '100%', position: 'relative' }}>
<div style={{ height: clientHeight * 0.55 - 300, display: 'flex', justifyContent: "center", position: 'relative' }}>
<ReactECharts
@ -268,7 +268,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
</div>
</Card>
<Card title='修复排名' style={{ width: "calc(50% - 8px)", height: "100%" }}>
<Card title='修复排名' tooltipContent='修复时间排名:一个月内,计算每个工单的修复时间' style={{ width: "calc(50% - 8px)", height: "100%" }}>
<div style={{ height: '100%', fontFamily: 'SourceHanSansCN-Regular', fontWeight: 400, fontSize: 14, }}>
<div style={{ display: "flex", background: '#F6F9FF', height: 40, alignItems: 'center' }}>
<div style={{ textAlign: 'center', width: '25%' }}>序号</div>
@ -290,7 +290,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
</div>
</Card>
</div>
<Card title='数据在线率' style={{ width: "calc(50% - 8px)", height: "100%", }}>
<Card title='数据在线率' tooltipContent='在线率计算:设备存活/总设备(存活判断:普通设备2h以内有实时数据,GNSS设备8h以内有实时数据)' style={{ width: "calc(50% - 8px)", height: "100%", }}>
<div style={{ height: '100%', position: 'relative' }}>
{/* <div > */}
<Select
@ -364,7 +364,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
</div>
<div style={{ width: '100%', height: "calc(55% - 24px)", display: 'flex', marginTop: 24 }}>
<Card title='告警排名TOP20' style={{
<Card title='告警排名TOP20' tooltipContent='(1)超阈值个数:一周内结构物超阈值告警的个数。(2)手动恢复个数:一个月内超阈值告警手动恢复的个数' style={{
width: "calc(50% - 8px)", height: "100%", marginRight: 16
}} >
{mockData && mockData.length > 0 ? (<div style={{ height: '100%' }}>
@ -452,7 +452,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
</div>
</div>) : ''}
</Card>
<Card title='中断排名' style={{ width: "calc(50% - 8px)", height: "100%", }}>
<Card title='中断排名' tooltipContent='中断时长:当前时间-最后一条数据时间。中断个数:结构物下中断测点个数/结构物总测点个数。' style={{ width: "calc(50% - 8px)", height: "100%", }}>
<div style={{ height: '100%', fontFamily: 'SourceHanSansCN-Regular', fontWeight: 400, fontSize: 14, }}>
<div style={{ display: "flex", background: '#F6F9FF', height: 40, alignItems: 'center' }}>
<div style={{ textAlign: 'center', width: '33%' }}>结构物</div>

Loading…
Cancel
Save