Browse Source

字体引入

master
wenlele 9 months ago
parent
commit
a57065ffb2
  1. BIN
      web-screen/client/assets/font_sc/PangMenZhengDaoBiaoTiTi.ttf
  2. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-Bold.otf
  3. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-ExtraLight.otf
  4. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-Heavy.otf
  5. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-Light.otf
  6. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-Medium.otf
  7. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-Normal.otf
  8. BIN
      web-screen/client/assets/font_sc/SourceHanSansCN-Regular.otf
  9. 33
      web-screen/client/index.html
  10. 10
      web-screen/client/src/sections/bigScreen/components/homePages.js
  11. 74
      web-screen/client/src/sections/bigScreen/components/inspection/index.js
  12. 484
      web-screen/client/src/sections/bigScreen/components/inspection/left.js
  13. 316
      web-screen/client/src/sections/bigScreen/components/inspection/right.js

BIN
web-screen/client/assets/font_sc/PangMenZhengDaoBiaoTiTi.ttf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-Bold.otf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-ExtraLight.otf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-Heavy.otf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-Light.otf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-Medium.otf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-Normal.otf

Binary file not shown.

BIN
web-screen/client/assets/font_sc/SourceHanSansCN-Regular.otf

Binary file not shown.

33
web-screen/client/index.html

@ -32,6 +32,39 @@
font-family: D-DINExp-Italic; font-family: D-DINExp-Italic;
src: url("/assets/font_sc/D-DINExp-Italic.otf"); src: url("/assets/font_sc/D-DINExp-Italic.otf");
} }
@font-face {
font-family: PangMenZhengDaoBiaoTiTi;
src: url("/assets/font_sc/PangMenZhengDaoBiaoTiTi.otf");
}
@font-face {
font-family: SourceHanSansCN-Bold;
src: url("/assets/font_sc/SourceHanSansCN-Bold.otf");
}
@font-face {
font-family: SourceHanSansCN-ExtraLight;
src: url("/assets/font_sc/SourceHanSansCN-ExtraLight.otf");
}
@font-face {
font-family: SourceHanSansCN-Heavy;
src: url("/assets/font_sc/SourceHanSansCN-Heavy.otf");
}
@font-face {
font-family: SourceHanSansCN-Light;
src: url("/assets/font_sc/SourceHanSansCN-Light.otf");
}
@font-face {
font-family: SourceHanSansCN-Medium;
src: url("/assets/font_sc/SourceHanSansCN-Medium.otf");
}
@font-face {
font-family: SourceHanSansCN-Normal;
src: url("/assets/font_sc/SourceHanSansCN-Normal.otf");
}
@font-face {
font-family: SourceHanSansCN-Regular;
src: url("/assets/font_sc/SourceHanSansCN-Regular.otf");
}
</style> </style>
<body> <body>

10
web-screen/client/src/sections/bigScreen/components/homePages.js

@ -4,6 +4,7 @@ import { push } from 'react-router-redux';
import Leader from './leader'; import Leader from './leader';
import Run from './run' import Run from './run'
import Error from './error'; import Error from './error';
// import Error from './error';
import { Modal, Form } from 'antd'; import { Modal, Form } from 'antd';
// const { RouteTable, RouteRequest, ApiTable, Request } = WebAPI; // const { RouteTable, RouteRequest, ApiTable, Request } = WebAPI;
@ -12,7 +13,7 @@ import { Modal, Form } from 'antd';
// 'leader': Leader, // 'leader': Leader,
// 'run':Run, // 'run':Run,
// 'error':Error, // 'error':Error,
// 'inspection':Inspection,//巡检 // 'inspection':Inspection,//巡检
// 'item':Item,//巡检项 // 'item':Item,//巡检项
// 'Calendar':Calendar,//日历 // 'Calendar':Calendar,//日历
// 'report':Report,//报告 // 'report':Report,//报告
@ -34,9 +35,10 @@ const HomePage=(props)=>{
{globalTab === 'leader' && <Leader />} {globalTab === 'leader' && <Leader />}
{globalTab === 'run' && <Run />} {globalTab === 'run' && <Run />}
{globalTab === 'error' && <Error />} {globalTab === 'error' && <Error />}
{/* {globalTab === 'run' && <Run />} {/* {globalTab === 'inspection' && <Inspection />} */}
{globalTab === 'error' && <Error />}
{globalTab === 'inspection' && <Inspection />} */} {/* {globalTab === 'run' && <Run />} */}
{/* {globalTab === 'error' && <Error />} */}

74
web-screen/client/src/sections/bigScreen/components/inspection/index.js

@ -0,0 +1,74 @@
//领导驾驶舱
'use strict';
import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, message, Button, Input } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import '../style.less'
import Left from './left';
import Right from './right';
const Leader = ({ actions, dispatch, globalTab, }) => {
const { bigScreen } = actions
const [centerData, setCenterData] = useState({})
const centerFontStyle = {
fontSize: '1.2rem',
fontStyle: 'italic',
color: '#E5F1FF',
fontFamily: '思源黑体',
}
const centerNumFontStyle = {
fontSize: '2rem',
// color:'#6eece9',
fontStyle: 'italic',
paddingLeft: '0.5rem'
}
useEffect(() => {
const structArr = JSON.parse(sessionStorage.getItem('user')).monitorObject
dispatch(bigScreen.getCenterData({ projectId: structArr.toString() })).then(res => {
if (res.success) {
setCenterData(res.payload.data)
}
})
}, [])
return <>
<div style={{ display: 'flex', justifyContent: 'space-between', position: 'relative' }}>
<Left></Left>
<Right></Right>
</div>
<div style={{ position: 'absolute', top: '-10rem', left: '27rem', }}>
<img src='/assets/bigScreen/center.webp' style={{ display: 'inline-block', width: '64.47rem', height: '62.3125rem' }}></img>
</div>
<div style={{ position: 'absolute', top: '14.6rem', left: '37rem', }}><span style={{ ...centerFontStyle }}>设备总数</span><span style={{ ...centerNumFontStyle, color: '#6eece9', }}>{centerData.deviceCount}</span></div>
<div style={{ position: 'absolute', top: '10.5rem', left: '45rem', }}><span style={{ ...centerFontStyle }}>发现问题</span><span style={{ ...centerNumFontStyle, color: 'rgb(204 193 84)', }}>{centerData.questions}</span></div>
<div style={{ position: 'absolute', top: '12.5rem', left: '56.5rem', }}><div style={{ ...centerNumFontStyle, height: '2.5rem', color: '#6eece9', textAlign: 'center' }}>{centerData.records}</div> <span style={{ ...centerFontStyle }}></span></div>
<div style={{ position: 'absolute', top: '10.5rem', left: '67.5rem', }}><span style={{ ...centerFontStyle }}>出具报告数</span><span style={{ ...centerNumFontStyle, color: '#6eece9', }}>{centerData.reportCount}</span></div>
<div style={{ position: 'absolute', top: '14.6rem', left: '75rem', }}><span style={{ ...centerFontStyle }}>处理故障数</span><span style={{ ...centerNumFontStyle, color: 'rgb(47 229 9)', }}>{centerData.handleCount}</span></div>
</>
}
function mapStateToProps (state) {
const { auth, global, device } = state;
return {
clientHeight: global.clientHeight,
actions: global.actions,
};
}
export default connect(mapStateToProps)(Leader)

484
web-screen/client/src/sections/bigScreen/components/inspection/left.js

@ -0,0 +1,484 @@
import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, message, Button, Input } from 'antd'
import { connect } from 'react-redux'
import ProTable from '@ant-design/pro-table'
import moment from 'moment'
import ReactEcharts from 'echarts-for-react'
import PerfectScrollbar from 'perfect-scrollbar'
import '../style.less'
import AutoRollComponent from '../AutoRollComponent'
let scrollbarLeft
let problems
const Left = props => {
const { dispatch, clientHeight, clientWidth, actions } = props
const [startTime, setStartTime] = useState(moment().startOf('week').format('YYYY-MM-DD HH:mm:ss'))
const [endTime, setEndTime] = useState(moment().endOf('week').format('YYYY-MM-DD HH:mm:ss'))
const [plan, setPlan] = useState(0)
const [done, setDone] = useState(0)
const [cRate, setCRate] = useState([]) //完成率
const [rRate, setRRate] = useState([]) //修复率
const [months, setMonths] = useState([])
const [period, setPeriod] = useState('week')
const [rank,setRank]=useState([])
const [state, setState] = useState(0)
const [rankCopy,setRankCopy]=useState([])//用于排序(巡检次数)
const { bigScreen } = actions
// const questFontColor = { color: '#8f7a49' } //有问题的颜色
const normalFontColor = { color: 'yellow' } //正常的颜色
useEffect(() => {
scrollbarLeft = new PerfectScrollbar('#left1', { suppressScrollX: true })
const dom = document.getElementById('left1')
if (dom) {
scrollbarLeft.update()
// dom.scrollTop = 0
}
// getData()
queryData()
const months = generateMonthNames()
setMonths(months)
}, [])
useEffect(() => {
getData()
}, [startTime])
const queryData = async () => {
let repair = []
const structArr = JSON.parse(sessionStorage.getItem('user')).monitorObject
const sTime = moment().subtract(6, 'months').format('YYYY-MM-DD HH:mm:ss')
const eTime = moment().format('YYYY-MM-DD HH:mm:ss')
// let count={}
let cRate = []
for (let i = 5; i >= 0; i--) {
const currentTime = moment()
const startOfMonth = currentTime.subtract(i, 'months').startOf('month')
const startTime = startOfMonth.format('YYYY-MM-DD HH:mm:ss')
const endTime = startOfMonth.endOf('month').format('YYYY-MM-DD HH:mm:ss')
await dispatch(bigScreen.findPatrolRecords({ projectId: structArr.toString(), startTime, endTime })).then(res => {
if (res.success) {
const data = res.payload.data
// count[i] = { plan: data.planCount, done: data.done, rate:((data.done/data.planCount+data.done)*100).toFixed(2) }
cRate.push(
Number(data.planCount + data.done > 0 ? ((data.done / (data.planCount + data.done)) * 100).toFixed(2) : 0)
)
}
})
}
setCRate(cRate)
dispatch(bigScreen.findPatrolRate({ projectId: structArr.toString(), startTime: sTime, endTime: eTime })).then(
res => {
if (res.success) {
const data = res.payload.data
if (data && data.length) {
const repairObject = {}
for (let i = 5; i >=0; i--) {
const currentDate = moment().subtract(i, 'months')
const month = currentDate.month() + 1
const year = currentDate.year()
repairObject[`${year}-${month}`] = { done: 0, quests: 0, ratio: 0 }
}
data.forEach(item => {
const createTime = moment(item.patrolRecordIssueHandles[0].createTime)
const month = createTime.month()+1
const year = createTime.year()
const state = item.patrolRecordIssueHandles[0].state
if (state === 6) {
repairObject[`${year}-${month}`].done++
}
repairObject[`${year}-${month}`].quests++
})
//计算比例
Object.values(repairObject).forEach(item => {
console.log('item',item)
repair.push(item.quests === 0 ? 0 : Number((item.done / item.quests * 100).toFixed(2)));
});
console.log('x1111',repair,cRate)
setRRate(repair)
}
}
}
)
dispatch(bigScreen.countByProject({ projectId: structArr.toString()})).then(res=>{
if(res.success){
//[{},{},{},{},{},{},{},{}]||
// [{id:1,issueHandleCount:1,patrolRecordCount:2},
// {id:1,issueHandleCount:2,patrolRecordCount:3},
// {id:1,issueHandleCount:3,patrolRecordCount:2},
// {id:1,issueHandleCount:6,patrolRecordCount:4},
// {id:1,issueHandleCount:7,patrolRecordCount:5},
// {id:1,issueHandleCount:10,patrolRecordCount:6},
// {id:1,issueHandleCount:11,patrolRecordCount:7},
// {id:1,issueHandleCount:19,patrolRecordCount:9}]
const data=res.payload.data
if(data.length>4){
let problemstop = 0
let problemsId = document.getElementById('left1');
if (problems) clearInterval(problems)
if (problemsId) {
let problems;
let problemstop = 0;
function problemstart() {
problems = setInterval(() => {
problemstop += 5;
problemsId.scrollTop = problemstop;
if (problemsId.scrollTop >= (problemsId.scrollHeight - 90) / 2) {
problemstop = 0;
problemsId.scrollTop = problemstop;
}
}, 500);
problemsId.onmouseover = () => clearInterval(problems);
}
problemsId.onmouseout = () => problemstart();
setTimeout(problemstart, 1000);
}
}
if(data.length>10){
setRank(data.slice(0,10))
}else{
setRank(data)
}
setRankCopy(data)
}
})
}
function generateMonthNames() {
const currentTime = moment()
const monthNames = []
for (let i = 0; i < 6; i++) {
const currentMonth = currentTime.clone().subtract(i, 'months').format('MMMM')
monthNames.unshift(currentMonth)
}
return monthNames
}
const getData = () => {
const structArr = JSON.parse(sessionStorage.getItem('user')).monitorObject
dispatch(bigScreen.findPatrolRecords({ projectId: structArr.toString(), startTime, endTime })).then(res => {
if (res.success) {
const data = res.payload.data
setPlan(data.planCount)
setDone(data.done)
}
})
}
const selectTime = time => {
if (time === 'week') {
setPeriod('week')
setStartTime(moment().startOf('week').format('YYYY-MM-DD HH:mm:ss'))
setEndTime(moment().endOf('week').format('YYYY-MM-DD HH:mm:ss'))
} else {
setPeriod('month')
setStartTime(moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'))
setEndTime(moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'))
}
}
const topClick=(e)=>{
switch (e) {
case 'perBottom':
const rs=rankCopy.sort((a,b)=>b.patrolRecordCount-a.patrolRecordCount)
if(rs.length>10){
setRank(rs.slice(0,10))
}else{
setRank(rs)
}
setState(1)
break;
case 'perTop':
const rs1=rankCopy.sort((a,b)=>a.patrolRecordCount-b.patrolRecordCount)
if(rs1.length>10){
setRank(rs1.slice(0,10))
}else{
setRank(rs1)
}
setState(0)
break;
case 'timeBottom':
const rs2=rankCopy.sort((a,b)=>b.issueHandleCount-a.issueHandleCount)
if(rs2.length>10){
setRank(rs2.slice(0,10))
}else{
setRank(rs2)
}
setState(3)
break;
case 'timeTop':
const rs3=rankCopy.sort((a,b)=>a.issueHandleCount-b.issueHandleCount)
if(rs3.length>10){
setRank(rs3.slice(0,10))
}else{
setRank(rs3)
}
setState(2)
break;
default:
return
}
}
return (
<>
{/* 左一 */}
{/**backgroundImage: 'linear-gradient(269deg, #000080ff 0%, #1a0080ff 58%, #3d0080ff 100%)' */}
<div>
<div style={{ position: 'relative' }} className='contanier1'>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
height: '2.6875rem',
background: 'url(/assets/bigScreen/cardHeader.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
}}>
<div className='title'>巡检数据统计</div>
<div className='monthOrWeek'>
<span
style={{ color: period === 'week' ? '#6EECE9' : '#8FCFFF' }}
onClick={() => {
selectTime('week')
}}>
</span>
&nbsp; | &nbsp;
<span
style={{ color: period === 'month' ? '#6EECE9' : '#8FCFFF' }}
onClick={() => {
selectTime('month')
}}>
</span>
</div>
</div>
<div
style={{
width: '26.3125rem',
height: '9.5625rem',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
<img src='/assets/bigScreen/doneRate.png'></img>
</div>
<div className='rate' style={{ bottom: '6.5125rem', left: '11.875rem' }}>
{`${plan > 0 ? ((done / done + plan) * 100).toFixed(2) : 0}%`}
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '.5rem' }}>当前巡检完成率</div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div
style={{
background: 'url(/assets/bigScreen/plan.png)',
width: '10.375rem',
height: '3.625rem',
position: 'relative',
marginLeft: '.7rem',
backgroundSize: '100% 100%',
}}>
<div
style={{
position: 'absolute',
bottom: '1.7rem',
right: '2.35rem',
width: '3.75rem',
height: '.75rem',
textAlign: 'center',
}}
className='plan'>
计划巡检数
</div>
<div
style={{
position: 'absolute',
bottom: '.1044rem',
right: '2.35rem',
width: '3.75rem',
height: '1.375rem',
textAlign: 'center',
}}
className='number'>
{plan}
</div>
</div>
<div
style={{
background: 'url(/assets/bigScreen/plan.png)',
width: '10.375rem',
height: '3.625rem',
position: 'relative',
marginLeft: '.7rem',
backgroundSize: '100% 100%',
marginRight: '.625rem',
}}>
<div
style={{
position: 'absolute',
bottom: '1.7rem',
right: '1.75rem',
width: '4.75rem',
height: '.75rem',
textAlign: 'center',
}}
className='plan'>
已完成巡检数
</div>
<div
style={{
position: 'absolute',
bottom: '.1044rem',
right: '1.75rem',
width: '4.75rem',
height: '1.375rem',
textAlign: 'center',
}}
className='number'>
{done}
</div>
</div>
</div>
</div>
{/* 左二 */}
<div className='contanier' style={{ height: '17.8125rem' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
height: '2.5rem',
background: 'url(/assets/bigScreen/cardHeader.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
}}>
<div className='title'>巡检成效评估</div>
{/* <div className='monthOrWeek'>{'更多' + '>>'}</div> */}
</div>
<ReactEcharts
style={{ height: '13.4375rem', width: '25.2662rem' }}
option={{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 0,
textStyle: { color: '#CCE6FF' },
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: months,
},
],
yAxis: [
{
type: 'value',
name: '单位%',
},
],
series: [
{
name: '巡检完成率',
nameTextStyle: {
color: ' #CCE6FF',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Medium',
},
type: 'bar',
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: cRate,
},
{
name: '故障修复率',
type: 'bar',
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: rRate,
},
],
}}></ReactEcharts>
</div>
{/* 左三 */}
<div className='contanier'>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
height: '2.5rem',
background: 'url(/assets/bigScreen/cardHeader.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
}}>
<div className='title'>巡检次数排名</div>
</div>
<div className='header' style={{ width: '24.3125rem' }}>
<div className='threeHeaderFontStyle'>序号</div>
<div className='threeHeaderFontStyle'>结构物</div>
<div className='threeHeaderFontStyle' style={{position:'relative'}}>巡检次数
<i class="angle_top" id={state==0?'angleSelected':null} onClick={()=>topClick('perTop')}></i>
<i id={state==1?'angleSelected':null} class="angle_bottom" onClick={()=>topClick('perBottom')}></i>
</div>
<div className='threeHeaderFontStyle'style={{position:'relative'}}>问题个数
<i class="angle_top" id={state==2?'angleSelected':null} onClick={()=>topClick('timeTop')}></i>
<i id={state==3?'angleSelected':null} class="angle_bottom" onClick={()=>topClick('timeBottom')}></i>
</div>
</div>
<div id='left1' style={{ width: '25.8125rem', height: '12rem', position: 'relative' }}>
{rank.map((item,index)=>(
<div className='thridCardItem' style={{ width: '24.3125rem' }}>
<div className='index1'>
<div>{index+1}</div>
</div>
<div className='name1' title={item.name}>{item.name}</div>
<div className='num1'>{item.patrolRecordCount}</div>
<div className='quests1' style={{ ...normalFontColor }}>
{item.issueHandleCount}
</div>
</div>
))}
</div>
</div>
</div>
</>
)
}
function mapStateToProps(state) {
const { auth, global } = state
return {
clientHeight: global.clientHeight,
clientWidth: global.clientWidth,
actions: global.actions,
}
}
export default connect(mapStateToProps)(Left)

316
web-screen/client/src/sections/bigScreen/components/inspection/right.js

@ -0,0 +1,316 @@
import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, message, Button, Input, Progress } from 'antd'
import { connect } from 'react-redux'
import ProTable from '@ant-design/pro-table'
import moment from 'moment'
import ReactEcharts from 'echarts-for-react'
import '../style.less'
import AutoRollComponent from '../AutoRollComponent'
import PerfectScrollbar from 'perfect-scrollbar'
let scrollbar
let diviceScrollbar
let rank
let device
const Right = props => {
const { dispatch, clientHeight, clientWidth, actions } = props
const { bigScreen } = actions
const questFontColor = { color: '#8f7a49' } //有问题的颜色
const normalFontColor = { color: 'rgba(33, 106, 167)' } //正常的颜色
const [deviceLists, setDeviceLists] = useState([])
const [underGuarantee, setUnderGuarantee] = useState(0)
const [devicescount, setDevicesCount] = useState(0)
const [period, setPeriod] = useState('threeMonths')
const [startTime, setStartTime] = useState(moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss'))
const [endTime, setEndTime] = useState(moment().format('YYYY-MM-DD HH:mm:ss'))
const [projectName, setProjectName] = useState([])
const [historyFaults, setHistoryFaults] = useState([])
const [historyFaultsDone, setHistoryFaultsDone] = useState([])
const [rankData, setRankData] = useState([])
//历史故障切换时间变化
useEffect(() => {
const structArr = JSON.parse(sessionStorage.getItem('user')).monitorObject
dispatch(bigScreen.getHistoricalFaults({ projectId: structArr.toString(), startTime, endTime })).then(res => {
if (res.success) {
const data = res.payload.data
let nameArr = []
let historyFaults = []
let historyFaultsDone = []
data.map(item => {
nameArr.push(item.name)
historyFaults.push(Number(item.count))
historyFaultsDone.push(Number(item.bcount))
})
setProjectName(nameArr)
setHistoryFaults(historyFaults)
setHistoryFaultsDone(historyFaultsDone)
}
})
}, [period])
useEffect(() => {
scrollbar = new PerfectScrollbar('#right3', { suppressScrollX: true })
const dom = document.getElementById('right3')
if (dom) {
scrollbar.update()
// dom.scrollTop = 0
}
diviceScrollbar = new PerfectScrollbar('#right1', { suppressScrollX: true })
const doms = document.getElementById('right1')
if (doms) {
diviceScrollbar.update()
// dom.scrollTop = 0
}
getData()
}, [])
const getData = () => {
const structArr = JSON.parse(sessionStorage.getItem('user')).monitorObject
dispatch(bigScreen.getDevices({ projectId: structArr.toString() })).then(res => {
if (res.success) {
const data = res.payload.data
setDeviceLists(data.rs)
setUnderGuarantee(data.underGuarantee)
setDevicesCount(data.count)
if(data.length>2){
let problemstops = 0
let problemsId = document.getElementById('right1');
if (device) clearInterval(device)
if (problemsId) {
function problemstart () {
device = setInterval(() => {
problemstops += 5
problemsId.scrollTop = problemstops
if (problemsId.scrollTop >= problemsId.scrollHeight / 2) problemstops = 0, problemsId.scrollTop = problemstops
}, 500);
problemsId.onmouseover = () => clearInterval(device)
}
problemsId.onmouseout = () => problemstart()
setTimeout(problemstart(), 1000);
}
}
}
})
dispatch(bigScreen.getFaultsRank({ projectId: structArr.toString() })).then(res => {
if (res.success) {
//[{},{},{},{},{},{},{},{},{}] ||
const data = res.payload.data
setRankData(data)
if(data.length>4){
let problemstop = 0
let problemsId = document.getElementById('right3');
if (rank) clearInterval(rank)
if (problemsId) {
function problemstart () {
rank = setInterval(() => {
problemstop += 5
problemsId.scrollTop = problemstop
if (problemsId.scrollTop >= (problemsId.scrollHeight-90) / 2) problemstop = 0, problemsId.scrollTop = problemstop
}, 500);
problemsId.onmouseover = () => clearInterval(rank)
}
problemsId.onmouseout = () => problemstart()
setTimeout(problemstart(), 1000);
}
}
}
})
}
const selectTime = time => {
if (time === 'threeMonths') {
setPeriod('threeMonths')
setStartTime(moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss'))
} else if (time === 'halfYear') {
setPeriod('halfYear')
setStartTime(moment().subtract(6, 'months').format('YYYY-MM-DD HH:mm:ss'))
} else {
setPeriod('oneYear')
setStartTime(moment().subtract(12, 'months').format('YYYY-MM-DD HH:mm:ss'))
}
}
return (
<>
<div>
{/* 右一 */}
<div className='contanier1'>
<div className='cardHeader'>
<div className='title'>设备数据总览</div>
<div className='monthOrWeek'>{'更多' + '>>'}</div>
</div>
<div className='right1bg'>
<img src='/assets/bigScreen/qc.png'></img>
</div>
<div className='content'>
<div>
<div className='qcNum numFontStyle'>
{underGuarantee}&nbsp;<span className='ge'></span>
</div>
<div className='qcDescribe describeFontStyle'>质保数</div>
</div>
<div>
<div className='centerNum'>
{(((devicescount - underGuarantee) / devicescount) * 100).toFixed(0) || 0}%
</div>
<div className='pDescribe pLocation'>质保期比例</div>
</div>
<div>
<div className='deviceNum numFontStyle'>
{devicescount}&nbsp;<span className='ge'></span>
</div>
<div className='deviceDescribe describeFontStyle'>设备总数</div>
</div>
</div>
<div id='right1' style={{width:'25.25rem',height:'9.2875rem',position:'relative'}}>
{deviceLists?.map(item => (
<div className='percent'>
{/* <img src='/assets/bigScreen/arrow.png'></img> */}
<div className='describe'> {item.type}</div>
<Progress
format={percent => (percent === 100 ? '100%' : `${percent}`)}
strokeColor={'#6EECE9'}
trailColor={'#0B4A7A'}
percent={(item.count / devicescount).toFixed(2) * 100}
/>
</div>
))}
</div>
</div>
{/* 右2 */}
<div className='contanier' style={{ height: '17.8125rem' }}>
<div className='cardHeader'>
<div className='title'>历史故障统计</div>
<div className='monthOrWeek'>
<span
style={{ color: period === 'threeMonths' ? '#6EECE9' : '#8FCFFF' }}
onClick={() => {
selectTime('threeMonths')
}}>
三个月
</span>
&nbsp; | &nbsp;
<span
style={{ color: period === 'halfYear' ? '#6EECE9' : '#8FCFFF' }}
onClick={() => {
selectTime('halfYear')
}}>
{' '}
半年
</span>
&nbsp; | &nbsp;
<span
style={{ color: period === 'oneYear' ? '#6EECE9' : '#8FCFFF' }}
onClick={() => {
selectTime('oneYear')
}}>
{' '}
一年
</span>
</div>
</div>
{projectName.length ? (
<ReactEcharts
style={{ height: '13.4375rem', width: '25.2662rem' }}
option={{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 0,
textStyle: { color: '#CCE6FF' },
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: projectName,
},
],
yAxis: [
{
type: 'value',
name: '单位次',
},
],
series: [
{
name: '故障数',
nameTextStyle: {
color: ' #CCE6FF',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Medium',
},
type: 'line',
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: historyFaults,
},
{
name: '已闭环',
type: 'line',
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: historyFaultsDone,
},
],
}}></ReactEcharts>
) : (
'暂无数据'
)}
</div>
{/*右三 */}
<div className='contanier'>
<div className='cardHeader'>
<div className='title'>设备故障排名</div>
</div>
<div className='header1'>
<div className='threeHeaderFontStyle'>序号</div>
<div className='threeHeaderFontStyle'>设备名称</div>
<div className='threeHeaderFontStyle'>故障发生次数</div>
</div>
<div id='right3' style={{ width: '25.8125rem', height: '12rem', position: 'relative' }}>
{rankData.map((item, index) => (
<div className='thridCardItem' style={{ width: '24.3125rem' }}>
<div className='index'>
<div>{index + 1}</div>
</div>
<div className='name' title={item.name}>{item.name}</div>
<div className='quests' style={{ ...normalFontColor }}>
{item.count}
</div>
</div>
))}
</div>
</div>
</div>
</>
)
}
function mapStateToProps(state) {
const { auth, global, device } = state
return {
clientHeight: global.clientHeight,
clientWidth: global.clientWidth,
actions: global.actions,
}
}
export default connect(mapStateToProps)(Right)
Loading…
Cancel
Save