Browse Source

接入大屏管理的数据,还有建设大屏部分数据

release_0.0.1
dengyinhuan 3 years ago
parent
commit
e0f91077a5
  1. 38
      web/client/src/sections/quanju/actions/example.js
  2. 43
      web/client/src/sections/quanju/containers/footer/build/index.js
  3. 82
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  4. 15
      web/client/src/utils/webapi.js

38
web/client/src/sections/quanju/actions/example.js

@ -13,3 +13,41 @@ export function getMembers(orgId) {
reducer: { name: 'members' }
});
}
//获取大屏道路统计信息
export function getdaolutongji() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_DAOLUTONGJI',
url: ApiTable.getBgroadstatistics,
msg: { error: '获取道路统计信息失败' },
// reducer: { name: 'members' }
});
}
//获取治超监测点处理数据信息
export function getjiandmanage() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_JIANDMANAGE',
url: ApiTable.getzhichaomanager,
msg: { error: '获取治超监测点处理数据信息' },
// reducer: { name: 'members' }
});
}
//获取治超详情列
export function getjiandetail() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_JIANDETAIL',
url: ApiTable.getzhichaodetail,
msg: { error: '获取治超监测点处理数据信息' },
// reducer: { name: 'members' }
});
}

43
web/client/src/sections/quanju/containers/footer/build/index.js

@ -1,4 +1,5 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
// import LeftTop from './Lefttop'
// import LeftCenter from './Leftcenter'
import LeftBottom from './Leftbottom'
@ -10,7 +11,19 @@ import Module from '../../public/module'
import RightBottom from './Rightbottom'
import AutoRollComponent from './AutoRollComponent'
import './style.less'
const Build = () => {
import {getdaolutongji} from '../../../actions/example'
const Build = (props) => {
const { dispatch } = props
const [buildingnumber,setbuildingnumber] = useState(0)
const requestbuildingnumber = async ()=>{
const res = await dispatch(getdaolutongji());
setbuildingnumber(res.payload.data)
// console.log(res.payload.data,'哈哈哈')
}
useEffect(()=>{
requestbuildingnumber()
},[])
const datas = new Array(15)
datas.fill({
name:"东乡镇",
@ -39,7 +52,7 @@ const Build = () => {
<span/>
<span>在建公路数量</span>
</div>
<div>6200</div>
<div>{buildingnumber.buildingRoad || 0}</div>
</div>
<img src='/assets/images/quanju/zhuangtaigonglui.png' className='build-left-top-center'/>
<div className='build-left-top-item'>
@ -48,7 +61,7 @@ const Build = () => {
<span/>
<span>已建公路数量</span>
</div>
<div>6200</div>
<div>{buildingnumber.buildedRoad || 0}</div>
</div>
</div>
</Module>
@ -111,4 +124,24 @@ const Build = () => {
</div>
)
}
export default Build
function mapStateToProps(state) {
const { auth, depMessage } = state;
const pakData = (dep) => {
return dep.map((d) => {
return {
title: d.name,
value: d.id,
// children: d.type >= 2 ? [] : pakData(d.subordinate)
children: pakData(d.subordinate)
}
})
}
let depData = pakData(depMessage.data || [])
return {
user: auth.user,
depMessage: depMessage.data || [],
depLoading: depMessage.isRequesting,
depData,
};
}
export default connect(mapStateToProps)(Build);

82
web/client/src/sections/quanju/containers/footer/guanli/index.js

@ -1,39 +1,57 @@
import React from 'react'
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module'
import LeftItem from './LeftItem'
import {getjiandmanage,getjiandetail} from '../../../actions/example'
import './style.less'
const Guanli = () => {
const datas = new Array(35)
const itemlist = [1,2,3]
const Guanli = (props) => {
const {dispatch} = props
const [leftDatas,setleftDatas] = useState([])
const [rightDatas,setrightDatas] = useState([])
const requestleftDatas = async()=>{
const res = await dispatch(getjiandmanage())
setleftDatas(res.payload.data)
// console.log(res,'哈哈哈')
}
const requestRightDatas = async()=>{
const res = await dispatch(getjiandetail())
setrightDatas(res.payload.data)
console.log(res,'嘿嘿嘿')
}
useEffect(()=>{
requestleftDatas();
requestRightDatas()
},[])
const renderContent = () => {
datas.fill({
chepaihao:'苏LD1112121',
caoxian:'30%',
chufa:'200元',
riqi:'2022年5月4日'
},1,35)
console.log(datas,'数组')
return <div style={{height:"100%"}}>
{datas?.map(({ chepaihao, caoxian, chufa,riqi }, index) => {
{rightDatas && rightDatas.length!==0?rightDatas.overSpeedList.map(({ id, licensePlate, overrunRate,fine,processingTime }, index) => {
return <div key={index} className='guanli-right-item'>
<span>{chepaihao}</span>
<span>{caoxian}</span>
<span>{chufa}</span>
<span>{riqi}</span>
<span>{licensePlate}</span>
<span>{overrunRate}%</span>
<span>{fine}</span>
<span>{processingTime}</span>
</div>
})}
}):""}
</div>
}
const renderLeftContent = ()=>{
return leftDatas && leftDatas.length!==0?leftDatas.map((item,index)=>
<LeftItem key={index} datas={item}></LeftItem>
):""
}
// renderContent()
return (
<div className='guanli'>
<div className='guanli-left'>
<Module style={{height:"100%"}} title="检测点治超处理占比" customize={true}>
{itemlist.map((item,index)=>
<LeftItem key={index}></LeftItem>
)}
<AutoRollComponent content={renderLeftContent()}
containerStyle={{ position: "relative", height: "90%", }}
divHeight={"100%"} divId={"chart-overview-left"} />
</Module>
</div>
<div className='guanli-right'>
@ -41,7 +59,7 @@ const Guanli = () => {
<div className = "guanli-right-top">
<img src="/assets/images/quanju/zhicaolog.png"></img>
<span>已处理</span>
<span>187</span>
<span>{rightDatas.processed||0}</span>
<span></span>
</div>
<div className='guanli-right-title'>
@ -58,4 +76,24 @@ const Guanli = () => {
</div>
)
}
export default Guanli
function mapStateToProps(state) {
const { auth, depMessage } = state;
const pakData = (dep) => {
return dep.map((d) => {
return {
title: d.name,
value: d.id,
// children: d.type >= 2 ? [] : pakData(d.subordinate)
children: pakData(d.subordinate)
}
})
}
let depData = pakData(depMessage.data || [])
return {
user: auth.user,
depMessage: depMessage.data || [],
depLoading: depMessage.isRequesting,
depData,
};
}
export default connect(mapStateToProps)(Guanli);

15
web/client/src/utils/webapi.js

@ -47,9 +47,22 @@ export const ApiTable = {
//桥梁管理
getBridge:'bridge',
//工程数据
getProject:'project'
getProject:'project',
//道路统计
getBgroadstatistics:"build/road_state",
//治超监测点处理数据
getzhichaomanager:'manage/overspeed/processed',
//获取治超详情数据
getzhichaodetail:'/manage/overspeed'
};
export const RouteTable = {
apiRoot: '/api/root',
fileUpload: '/_upload/new',

Loading…
Cancel
Save