dengyinhuan
2 years ago
81 changed files with 2057 additions and 406 deletions
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function getMembers(orgId) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_MEMBERS', |
|||
url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, |
|||
msg: { error: '获取用户列表失败' }, |
|||
reducer: { name: 'members' } |
|||
}); |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
|
|||
export default { |
|||
...example |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card } from 'antd'; |
|||
import '../style.less'; |
|||
import ProTable, { TableDropdown } from '@ant-design/pro-table'; |
|||
|
|||
const Example = (props) => { |
|||
const { dispatch, actions, user, loading } = props |
|||
|
|||
useEffect(() => { |
|||
dispatch(actions.example.getMembers(user.orgId)) |
|||
}, []) |
|||
|
|||
return ( |
|||
<Spin tip="biubiubiu~" spinning={loading}> |
|||
<div id='example'> |
|||
<p>STYLE EXAMPLE</p> |
|||
</div> |
|||
<ProTable |
|||
columns={[{ |
|||
dataIndex: 'index', |
|||
valueType: 'indexBorder', |
|||
width: 48, |
|||
}]} |
|||
defaultData={[{ index: 1, key: 1 }]} |
|||
> |
|||
|
|||
</ProTable> |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global, members } = state; |
|||
return { |
|||
loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
members: members.data |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Example); |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
import Example from './example'; |
|||
|
|||
export { Example }; |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'example', |
|||
name: '书写示例', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { SettingOutlined } from '@ant-design/icons'; |
|||
|
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
return ( |
|||
<SubMenu key="example" icon={<SettingOutlined />} title={'举个栗子'}> |
|||
<Menu.Item key="e1"> |
|||
<Link to="/example/e1">举个棒子</Link> |
|||
</Menu.Item> |
|||
</SubMenu> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
'use strict'; |
|||
import { Example, } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/example', |
|||
key: 'example', |
|||
breadcrumb: '栗子', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/e1', |
|||
key: 'e1', |
|||
component: Example, |
|||
breadcrumb: '棒子', |
|||
}] |
|||
} |
|||
}]; |
|||
@ -0,0 +1,3 @@ |
|||
#example:hover { |
|||
font-size: larger; |
|||
} |
|||
@ -1,12 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
import Infor from './infor'; |
|||
import transportation from './transportation'; |
|||
import BridgeTable from './bridge'; |
|||
import HigHways from './highways'; |
|||
import OperaTional from './operational'; |
|||
import Enforce from './enforce'; |
|||
import Public from './public'; |
|||
import infor from './infor'; |
|||
|
|||
|
|||
export { Infor,transportation,BridgeTable,HigHways,OperaTional,Enforce,Public }; |
|||
export { infor }; |
|||
@ -1,64 +1,19 @@ |
|||
'use strict'; |
|||
import { Infor } from './containers'; |
|||
import { transportation } from './containers'; |
|||
import { BridgeTable } from './containers'; |
|||
import { HigHways } from './containers'; |
|||
import { OperaTional } from './containers'; |
|||
import { Enforce } from './containers'; |
|||
import { Public } from './containers'; |
|||
import { infor } from './containers'; |
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/fillion', |
|||
key: 'fillion', |
|||
breadcrumb: '数据管理', |
|||
breadcrumb: '填报管理', |
|||
menuSelectKeys: ['fillion'], |
|||
menuOpenKeys: ['fillion'], |
|||
childRoutes: [{ |
|||
childRoutes: [ { |
|||
path: '/infor', |
|||
key: 'fillioninfor', |
|||
menuSelectKeys: ['fillioninfor'], |
|||
component: Infor, |
|||
breadcrumb: '治超管理', |
|||
}, { |
|||
path: '/transportation', |
|||
key: 'filliontransportation', |
|||
menuSelectKeys: ['filliontransportation'], |
|||
component: transportation, |
|||
breadcrumb: '道路管理', |
|||
} |
|||
, { |
|||
path: '/bridge', |
|||
key: 'fillionbridge', |
|||
menuSelectKeys: ['fillionbridge'], |
|||
component: BridgeTable, |
|||
breadcrumb: '桥梁管理', |
|||
} |
|||
, { |
|||
path: '/highways', |
|||
key: 'fillionhighways', |
|||
menuSelectKeys: ['fillionhighways'], |
|||
component: HigHways, |
|||
breadcrumb: '路政管理', |
|||
}, { |
|||
path: '/operational', |
|||
key: 'fillionoperational', |
|||
menuSelectKeys: ['fillionoperational'], |
|||
component: OperaTional, |
|||
breadcrumb: '运政管理', |
|||
}, { |
|||
path: '/enforce', |
|||
key: 'fillionenforce', |
|||
menuSelectKeys: ['fillionenforce'], |
|||
component: Enforce, |
|||
breadcrumb: '执法管理', |
|||
}, { |
|||
path: '/public', |
|||
key: 'fillionpublic', |
|||
menuSelectKeys: ['fillionpublic'], |
|||
component: Public, |
|||
breadcrumb: '公交管理', |
|||
} |
|||
] |
|||
menuSelectKeys:['fillioninfor'], |
|||
component: infor, |
|||
breadcrumb: '填报信息', |
|||
}] |
|||
} |
|||
}]; |
|||
@ -0,0 +1,30 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
export function getFundamental() { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_DATA', |
|||
url: ApiTable.getFundamental, |
|||
msg: { error: '获取数据失败' }, |
|||
reducer: { name: 'datas' } |
|||
}); |
|||
} |
|||
|
|||
|
|||
export function getsortord(zuo, day) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_PATIENTIA', |
|||
url: ApiTable.getsortord.replace('{zuo}', zuo).replace('{day}', day), |
|||
msg: { error: '日期更新失败' }, |
|||
reducer: { name: 'Patientia' } |
|||
}); |
|||
} |
|||
export default { |
|||
getFundamental, |
|||
getsortord |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as date from "./data" |
|||
|
|||
export default { |
|||
...date |
|||
} |
|||
@ -0,0 +1,118 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import { connect } from 'react-redux'; |
|||
import { getFundamental } from '../actions/data'; |
|||
import * as echarts from "echarts" |
|||
import "../style.less" |
|||
|
|||
const DateModal = (props) => { |
|||
const { dispatch } = props |
|||
const [lists, setLists] = useState([]) |
|||
const [keys, setKeys] = useState([]) |
|||
const [days, setDays] = useState() |
|||
const [unkeys, setUnkeys] = useState([]) |
|||
const [num, setNum] = useState(1) |
|||
useEffect(() => { |
|||
// 获取数据
|
|||
dispatch(getFundamental()).then(res => { |
|||
setDays(res.payload.data.date) |
|||
|
|||
}) |
|||
}, [true]) |
|||
|
|||
const op = () => { |
|||
// 把获取的数据进行加工
|
|||
if (days && num == 1) { |
|||
|
|||
var daysValues = Object.values(days) |
|||
var daysKeys = Object.keys(days) |
|||
var list = [] |
|||
var arr = [] |
|||
var months = [] |
|||
for (let index = 6; index >= 0; index--) { |
|||
list.push(daysValues[index]) |
|||
} |
|||
setLists(list) |
|||
for (let index = 6; index >= 0; index--) { |
|||
arr.push(daysKeys[index].substring(8)) |
|||
} |
|||
for (let index = 6; index >= 0; index--) { |
|||
months.push(daysKeys[index].charAt(5) + "" + daysKeys[index].charAt(6)) |
|||
} |
|||
setUnkeys(months) |
|||
setKeys(arr) |
|||
setNum(2) |
|||
} |
|||
} |
|||
op() |
|||
useEffect(() => { |
|||
let a = ([...keys]) |
|||
let list = [] |
|||
for (let index = 0; index < 7; index++) { |
|||
list.push(a[index]) |
|||
} |
|||
for (let index = 0; index < 7; index++) { |
|||
list[index] = list[index] + "日" |
|||
} |
|||
var myChart = echarts.init(document.getElementById('echarts')); |
|||
// window.onresize在重复使用过程中会被覆盖
|
|||
// window.onresize = myChart.resize;
|
|||
// addEventListener来添加监听resize的事件，将能避免onresize的覆盖问题，并能实现对窗口的监听操作
|
|||
window.addEventListener("resize", function () { |
|||
myChart.resize() |
|||
}) |
|||
var option = { |
|||
title: { |
|||
text: '近七日填报数量', |
|||
left: "7%" |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: function (params) { |
|||
var htmlStr = `填报数量:${params.value}条<br/>${unkeys[params.dataIndex] + "月" + params.name}<br/>` |
|||
return htmlStr; |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: list, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '填报数量', |
|||
type: 'bar', |
|||
data: lists, |
|||
barWidth: 40 |
|||
} |
|||
] |
|||
}; |
|||
|
|||
// 使用刚指定的配置项和数据显示图表。
|
|||
myChart.setOption(option); |
|||
}, [lists]) |
|||
return ( |
|||
<div id='echarts'></div> |
|||
) |
|||
} |
|||
function mapStateToProps(state) { |
|||
const { auth, depMessage, depUser, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
loading: depMessage.isRequesting, |
|||
depMessage: depMessage.data || [], |
|||
depUser: depUser.data || [] |
|||
}; |
|||
} |
|||
export default connect(mapStateToProps)(DateModal) |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
import DateModal from './dateModal'; |
|||
|
|||
export { DateModal }; |
|||
@ -0,0 +1,157 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { Space, Row, Col, DatePicker, Spin } from "antd"; |
|||
import { getFundamental, getsortord } from "../actions/data"; |
|||
import { DateModal } from "../components"; |
|||
import moment from "moment"; |
|||
import "../style.less"; |
|||
const { RangePicker } = DatePicker; |
|||
const UserManage = (props) => { |
|||
const { dispatch, loading, datas, Patientias } = props; |
|||
const dateFormat = "YYYY/MM/DD"; |
|||
const [data, setData] = useState(); |
|||
const [Patientia, setPatientia] = useState(); |
|||
useEffect(() => { |
|||
// 获取数据
|
|||
dispatch(getFundamental()).then((res) => { |
|||
setData(res); |
|||
}); |
|||
}, [true]); |
|||
useEffect(() => { |
|||
// 根据接口获取规定时间内获取到的数据
|
|||
var customField = [ |
|||
moment().add(-6, "day").format("YYYY-MM-DD"), |
|||
moment(new Date(), dateFormat).format("YYYY-MM-DD"), |
|||
]; |
|||
dispatch(getsortord(customField[0], customField[1])).then((res) => { |
|||
setPatientia(res.payload.data); |
|||
}); |
|||
}, [true]); |
|||
// useEffect(() => {
|
|||
/* Patientia ? setPatientia(Patientia */ /* .sort(sortByKey("count")) */ /* ) : null */ |
|||
// }, [Patientia])
|
|||
// 根据数组里面对象的key值进行排序
|
|||
// const sortByKey = (key) => {
|
|||
// return function (a, b) {
|
|||
// var value1 = a[key];
|
|||
// var value2 = b[key];
|
|||
// return value2 - value1;
|
|||
// }
|
|||
// }
|
|||
const disabledDate = (current) => { |
|||
return ( |
|||
(current && current < moment("2022/03/01").subtract("day")) || |
|||
current > moment(new Date()).subtract("days") |
|||
); |
|||
}; |
|||
const getTime = (date) => { |
|||
// 根据时间框时间获取数据进行展示
|
|||
if (date) { |
|||
var ao = []; |
|||
ao.push(date[0].format("YYYY/MM/DD")); |
|||
ao.push(date[1].format("YYYY/MM/DD")); |
|||
} |
|||
dispatch(getsortord(ao[0], ao[1])).then((res) => { |
|||
setPatientia(res.payload.data /* .sort(sortByKey("count")) */); |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<div style={{ overflow: "hiddle" }}> |
|||
{/* 此处进行了loding的效果 */} |
|||
<Spin spinning={loading} tip="稍等片刻~"> |
|||
{/* 页面上部分代码 */} |
|||
<div className="shuju-top"> |
|||
<Row className="wrap" type="flex" justify="center" align="middle"> |
|||
<Col span={6} align="center"> |
|||
<span>今日新增填报</span> |
|||
<p> {datas.data ? datas.data.added : null}</p> |
|||
</Col> |
|||
<Col span={6} align="center"> |
|||
<span>今日已审填报</span> |
|||
<p> |
|||
{datas.data ? datas.data.checked : null} |
|||
<span>/{datas.data ? datas.data.unChecked : null}</span> |
|||
</p> |
|||
</Col> |
|||
<Col span={6} align="center"> |
|||
<span>隐患场所总数</span> |
|||
<p>{datas.data ? datas.data.danger_place : null}</p> |
|||
</Col> |
|||
<Col span={6} align="center"> |
|||
<span>历史填报</span> |
|||
<p>{datas.data ? datas.data.history : null}</p> |
|||
</Col> |
|||
</Row> |
|||
</div> |
|||
{/* 页面下部分代码 */} |
|||
<div className="shuju-floer"> |
|||
{/* echarts柱状图 */} |
|||
<div className="shuju-floer-left">{datas ? <DateModal /> : null}</div> |
|||
{/* 根据时间进行的排序 */} |
|||
<div className="shuju-floer-reght"> |
|||
<p>各区县合用场所填报数量</p> |
|||
<Space direction="vertical" size={12}> |
|||
<RangePicker |
|||
disabledDate={disabledDate} |
|||
onChange={getTime} |
|||
defaultValue={[ |
|||
moment().add(-6, "day"), |
|||
moment(new Date(), dateFormat) |
|||
]} |
|||
width={"100%"} |
|||
allowClear={false} |
|||
/> |
|||
</Space> |
|||
<div className="dataDisplay"> |
|||
{Patientias |
|||
? Patientias.map((item, index) => { |
|||
return ( |
|||
<li |
|||
key={index} |
|||
className="traverse" |
|||
style={{ marginTop: index == 0 ? "30px" : "0" }} |
|||
> |
|||
{index >= 3 ? ( |
|||
<div className="topThree">{index + 1}</div> |
|||
) : ( |
|||
<div className="untopThree">{index + 1}</div> |
|||
)} |
|||
<span className="siteName">{item.name}</span> |
|||
<span className="sitePeople">{item.count}</span> |
|||
</li> |
|||
); |
|||
}) |
|||
: null} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Spin> |
|||
</div> |
|||
); |
|||
}; |
|||
function mapStateToProps(state) { |
|||
// console.log(state);
|
|||
const { auth, depMessage, depUser, global, datas, Patientia } = state; |
|||
// 在reducer中进行数据处理
|
|||
const sortByKey = (key) => { |
|||
return function (a, b) { |
|||
var value1 = a[key]; |
|||
var value2 = b[key]; |
|||
return value2 - value1; |
|||
}; |
|||
}; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
loading: datas.isRequesting && Patientia.isRequesting, |
|||
depMessage: depMessage.data || [], |
|||
depUser: depUser.data || [], |
|||
datas: datas || [], |
|||
Patientias: Patientia.data |
|||
? Patientia.data.sort(sortByKey("count")) |
|||
: null || [], |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(UserManage); |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
import UserManage from './data'; |
|||
|
|||
export { UserManage }; |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'middleground', |
|||
name: '', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { BarChartOutlined } from '@ant-design/icons'; |
|||
import { push } from 'react-router-redux'; |
|||
|
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
if (user.type != 1) { |
|||
dispatch(push('/fillion/infor')); |
|||
return null |
|||
} |
|||
return ( |
|||
<Menu.Item key="middleground" icon={<BarChartOutlined />}> |
|||
<Link to="/middleground">数据中心</Link> |
|||
</Menu.Item> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
}; |
|||
@ -0,0 +1,14 @@ |
|||
'use strict'; |
|||
import { UserManage } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/middleground', |
|||
key: 'middleground', |
|||
breadcrumb: '数据中心', |
|||
menuSelectKeys: ['userManage'], |
|||
component: UserManage, |
|||
menuOpenKeys: ['middleground'], |
|||
} |
|||
}]; |
|||
@ -0,0 +1,86 @@ |
|||
.shuju-top{ |
|||
width: 100%; |
|||
min-Width: 1110px; |
|||
height: 20vh; |
|||
border: 1px solid #F2F2F2; |
|||
border-Right: 0; |
|||
margin-top: 5vh; |
|||
overflow: auto; |
|||
.wrap{ |
|||
min-Height: 100%; |
|||
span{ |
|||
color: #959595; |
|||
font-Size: 18px; |
|||
} |
|||
p{ |
|||
font-Size: 34px; |
|||
} |
|||
} |
|||
} |
|||
.shuju-floer{ |
|||
width: 100%; |
|||
height: 500px; |
|||
float: left; |
|||
margin-Top: 50px; |
|||
min-Width: 1110px; |
|||
.shuju-floer-left{ |
|||
height: 500px; |
|||
float: left; |
|||
#echarts{ |
|||
width: calc(75vw - 200px ); |
|||
min-Width: 810px; |
|||
height: 500px; |
|||
} |
|||
} |
|||
.shuju-floer-reght{ |
|||
width: calc(32vw - 200px ); |
|||
min-Width: 290px; |
|||
height: 100%; |
|||
float: left; |
|||
p{ |
|||
color: #464646; |
|||
font-Size: 18px; |
|||
font-Weight: 600; |
|||
} |
|||
.dataDisplay{ |
|||
width: 340px; |
|||
height: 75%; |
|||
overflow-y: auto; |
|||
.traverse{ |
|||
width: 300px; |
|||
height: 30px; |
|||
list-style: none; |
|||
.topThree{ |
|||
width: 20px; |
|||
height: 20px; |
|||
background-Color: #f0f2f5; |
|||
float: left; |
|||
color: rgba(0, 0, 0, 0.6470588235294118); |
|||
border-Radius: 50%; |
|||
text-align: center; |
|||
line-Height: 20px; |
|||
font-Size: 12px; |
|||
} |
|||
.untopThree{ |
|||
width: 20px; |
|||
height: 20px; |
|||
background-Color: #314559; |
|||
float: left; |
|||
color: #FFFFFF; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 20px; |
|||
font-size: 12px; |
|||
} |
|||
.siteName{ |
|||
margin-left: 20px; |
|||
} |
|||
.sitePeople{ |
|||
float: right; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
@ -1,7 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
|
|||
import Authority from './authority'; |
|||
import UserManage from './user'; |
|||
|
|||
|
|||
export { UserManage}; |
|||
export { Authority, UserManage }; |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function getMembers(orgId) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_MEMBERS', |
|||
url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, |
|||
msg: { error: '获取用户列表失败' }, |
|||
reducer: { name: 'members' } |
|||
}); |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
|
|||
export default { |
|||
...example |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card } from 'antd'; |
|||
import Build from './footer/build' |
|||
import '../style.less'; |
|||
import Header from './heand'; |
|||
import Footer from './footer'; |
|||
import ProTable, { TableDropdown } from '@ant-design/pro-table'; |
|||
|
|||
const Example = (props) => { |
|||
const { dispatch, actions, user, loading } = props |
|||
const [tabKey, setTabKey] = useState('leadership') |
|||
|
|||
useEffect(() => { |
|||
dispatch(actions.example.getMembers(user.orgId)) |
|||
}, []) |
|||
const tabChange = (tab) => { |
|||
//leader 领导驾驶舱 site 工地 toilet 公厕 light 照明 water水质 encomic经济 environment 生态环境 security 智慧安监
|
|||
// setCurrentTab(tab);
|
|||
setTabKey(tab) |
|||
// dispatch({ type: 'TAB-CHANGE', data: tab })
|
|||
} |
|||
|
|||
return ( |
|||
<Spin tip="biubiubiu~" spinning={loading}> |
|||
<div id='example2' style={{ |
|||
backgroundColor: "#031839", width: "100vw", height: "100vh", /* transform: `scale(${Math.min( |
|||
document.body.clientWidth / 1920, |
|||
document.body.clientHeight / 1080 |
|||
)})`, */
|
|||
}}> |
|||
<div style={{ width: "100%", height: "10%" }}> |
|||
<Header tabChange={tabChange} tabKey={tabKey} dispatch={dispatch} /> |
|||
</div> |
|||
<div style={{ width: "100%", height: "90%" }}> |
|||
<Footer tabKey={tabKey} /> |
|||
</div> |
|||
</div> |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global, members } = state; |
|||
return { |
|||
loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
members: members.data |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Example); |
|||
@ -0,0 +1,8 @@ |
|||
import React from 'react' |
|||
|
|||
const Build = () => { |
|||
return ( |
|||
<>Build</> |
|||
) |
|||
} |
|||
export default Build |
|||
@ -0,0 +1,8 @@ |
|||
import React from 'react' |
|||
|
|||
const Conserve = () => { |
|||
return ( |
|||
<>1212121</> |
|||
) |
|||
} |
|||
export default Conserve |
|||
@ -0,0 +1,8 @@ |
|||
import React from 'react' |
|||
|
|||
const Guanli = () => { |
|||
return ( |
|||
<>管理</> |
|||
) |
|||
} |
|||
export default Guanli |
|||
@ -0,0 +1,29 @@ |
|||
import React from 'react' |
|||
import Build from './build' |
|||
import Conserve from './conserve' |
|||
import Guanli from './guanli' |
|||
import Leadership from './leadership' |
|||
import Operation from './operation' |
|||
const Footer = ({ tabKey }) => { |
|||
return ( |
|||
<> |
|||
{ |
|||
(() => { |
|||
switch (tabKey) { |
|||
case 'build': |
|||
return <Build /> |
|||
case 'conserve': |
|||
return <Conserve /> |
|||
case "leadership": |
|||
return <Leadership /> |
|||
case "guanli": |
|||
return <Guanli /> |
|||
case "operation": |
|||
return <Operation /> |
|||
} |
|||
})() |
|||
} |
|||
</> |
|||
) |
|||
} |
|||
export default Footer |
|||
@ -0,0 +1,19 @@ |
|||
import React from 'react' |
|||
import Centerrighttop from "./centerRight/center-right-top" |
|||
import Centerrightcenter from "./centerRight/center-right-center" |
|||
import CenterRightcentertop from "./centerRight/center-right-centertop" |
|||
import Centerrightbottom from "./centerRight/center-right-bottom" |
|||
|
|||
const CenterLeft = () => { |
|||
return ( |
|||
<> |
|||
<div style={{ width: "23%", height: "100%", float: "right", marginRight: "1%" }}> |
|||
<Centerrighttop /> |
|||
<CenterRightcentertop /> |
|||
<Centerrightcenter /> |
|||
<Centerrightbottom /> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default CenterLeft |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Rightbottom = () => { |
|||
const style = { height: "33%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Rightbottom |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Rightcenter = () => { |
|||
const style = { height: "17%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Rightcenter |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Rightcentertop = () => { |
|||
const style = { height: "23%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Rightcentertop |
|||
@ -0,0 +1,15 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Righttop = (props) => { |
|||
const { } = props |
|||
const style = { height: "17%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Righttop |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Leftbottom = () => { |
|||
const style = { height: "23%", marginTop: "5%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Leftbottom |
|||
@ -0,0 +1,16 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Leftcenter = () => { |
|||
const style = { |
|||
height: "23%" |
|||
} |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Leftcenter |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Leftcentertop = () => { |
|||
const style = { height: "23%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Leftcentertop |
|||
@ -0,0 +1,15 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Lefttop = (props) => { |
|||
const { } = props |
|||
const style = { height: "23%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Lefttop |
|||
@ -0,0 +1,18 @@ |
|||
import React from 'react' |
|||
import Left from './left' |
|||
import Right from './right' |
|||
import CenterLeft from "./centerLeft" |
|||
import Centerright from "./centerRight" |
|||
|
|||
const Leadership = () => { |
|||
return ( |
|||
<> |
|||
<Left /> |
|||
<CenterLeft /> |
|||
<Right /> |
|||
{/* <Centerright /> */} |
|||
|
|||
</> |
|||
) |
|||
} |
|||
export default Leadership |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Lefttop = () => { |
|||
const style = { height: "25%" } |
|||
return ( |
|||
<> |
|||
<Module style={style} title={"道路拥堵指数"} > |
|||
{/* <div style={{ width: "40%", height: "40%", background: "red" }}></div> */} |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Lefttop |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Rightbottom = () => { |
|||
const style = { height: "45%", marginTop: "5%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Rightbottom |
|||
@ -0,0 +1,9 @@ |
|||
import React from 'react' |
|||
|
|||
const Rightcenter = () => { |
|||
return ( |
|||
<><div style={{ width: /* width || */ "100%", height: /* height || */ "30%" }}> |
|||
</div></> |
|||
) |
|||
} |
|||
export default Rightcenter |
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Righttop = () => { |
|||
const style = { height: "45%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Righttop |
|||
@ -0,0 +1,8 @@ |
|||
import React from 'react' |
|||
|
|||
const Operation = () => { |
|||
return ( |
|||
<>运营</> |
|||
) |
|||
} |
|||
export default Operation |
|||
@ -0,0 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
import Example from './example'; |
|||
import Build from './footer/build' |
|||
|
|||
export { Example, Build }; |
|||
@ -0,0 +1,4 @@ |
|||
@font-face { |
|||
font-family: "YouSheBiaoTiHei"; |
|||
src: url("/assets/fontziti/YouSheBiaoTiHei-2.ttf") format("truetype"); |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'example2', |
|||
name: '书写示例', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { SettingOutlined } from '@ant-design/icons'; |
|||
|
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
return ( |
|||
<SubMenu key="example2" icon={<SettingOutlined />} title={'举个栗子'}> |
|||
<Menu.Item key="e1"> |
|||
<Link to="/example2/e1">举个棒子2</Link> |
|||
</Menu.Item> |
|||
</SubMenu> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
'use strict'; |
|||
import { Example, Build } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'outer', |
|||
route: { |
|||
path: '/quanju', |
|||
key: 'quanju', |
|||
breadcrumb: '栗子222', |
|||
exact: false, |
|||
component: Example, |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
// childRoutes: [{
|
|||
// path: '/e2',
|
|||
// key: 'e2',
|
|||
// exact: false,
|
|||
// component: Build,
|
|||
// breadcrumb: '棒子',
|
|||
// }]
|
|||
} |
|||
}]; |
|||
@ -0,0 +1,3 @@ |
|||
#example:hover { |
|||
font-size: larger; |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function reportRectify (timeRange) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_REPORT_RECTIFY', |
|||
url: `${ApiTable.getReportRectify}?startTime=${timeRange ? timeRange[0] : ''}&endTime=${timeRange ? timeRange[1] : ''}`, |
|||
msg: {}, |
|||
reducer: { name: 'reportRectify' } |
|||
}); |
|||
} |
|||
|
|||
export function reportRectifyDetail (day, depId) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_REPORT_RECTIFY_DETAIL', |
|||
url: `${ApiTable.getReportRectifyDetail}?day=${day}&depId=${depId}`, |
|||
msg: {}, |
|||
reducer: { name: 'reportRectifyDetail' } |
|||
}); |
|||
} |
|||
|
|||
export function compileReportRectifyDetail (data) { |
|||
return dispatch => basicAction({ |
|||
type: 'post', |
|||
dispatch: dispatch, |
|||
data, |
|||
actionType: 'COMPILE_REPORT_RECTIFY_DETAIL', |
|||
url: `${ApiTable.compileReportRectifyDetail}`, |
|||
msg: { option: '保存信息' }, |
|||
}); |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function allAreas (orgId) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_ALL_AREAS', |
|||
url: `${ApiTable.allAreas}`, |
|||
msg: {}, |
|||
reducer: { name: 'allAreas' } |
|||
}); |
|||
} |
|||
|
|||
export function addReportConfig (data) { |
|||
return dispatch => basicAction({ |
|||
type: 'post', |
|||
dispatch: dispatch, |
|||
data: data, |
|||
actionType: 'POST_REPORT_CONFIGS', |
|||
url: `${ApiTable.addReportConfig}`, |
|||
msg: { option: '添加报表配置' }, |
|||
}); |
|||
} |
|||
|
|||
export function getReportConfig () { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
actionType: 'GET_REPORT_CONFIGS', |
|||
url: `${ApiTable.getReportConfig}`, |
|||
msg: { error: '获取报表配置失败' }, |
|||
reducer: { name: 'reportConfig' } |
|||
}); |
|||
} |
|||
|
|||
export function editReportConfig (data, configId) { |
|||
return dispatch => basicAction({ |
|||
type: 'put', |
|||
dispatch: dispatch, |
|||
data: data, |
|||
actionType: 'EDIT_REPORT_CONFIGS', |
|||
url: `${ApiTable.editReportConfig.replace('{reportId}', configId)}`, |
|||
msg: { option: '编辑报表配置' }, |
|||
}); |
|||
} |
|||
|
|||
export function delReportConfig (configId) { |
|||
return dispatch => basicAction({ |
|||
type: 'del', |
|||
dispatch: dispatch, |
|||
actionType: 'DEL_REPORT_CONFIGS', |
|||
url: `${ApiTable.delReportConfig.replace('{reportId}', configId)}`, |
|||
msg: { option: '删除报表配置' }, |
|||
}); |
|||
} |
|||
|
|||
@ -0,0 +1,26 @@ |
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function getReportList(query) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
query: query, |
|||
actionType: 'GET_REPORT_LIST', |
|||
url: ApiTable.getReportList, |
|||
msg: { error: '获取报表数据失败' }, |
|||
reducer: { name: 'reportList' } |
|||
}); |
|||
} |
|||
|
|||
export function getRegionList(query) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
query: query, |
|||
actionType: 'GET_REGION_LIST', |
|||
url: ApiTable.allAreas, |
|||
msg: { error: '获取区域数据失败' }, |
|||
reducer: { name: 'regionList' } |
|||
}); |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
'use strict'; |
|||
|
|||
import * as config from './config' |
|||
import * as download from './download' |
|||
import * as compile from './compile' |
|||
|
|||
export default { |
|||
...config, |
|||
...download, |
|||
...compile, |
|||
} |
|||
@ -0,0 +1,118 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Drawer, Button } from 'antd'; |
|||
import '../style.less'; |
|||
import { EditableProTable } from '@ant-design/pro-table'; |
|||
|
|||
const CompileDrawer = (props) => { |
|||
const { dispatch, actions, user, loading, visible, checkRow, close, reportRectifyDetail, checkAction } = props |
|||
const [requesting, setRequesting] = useState(false) |
|||
const [dataSource, setDataSource] = useState([]) |
|||
const { report } = actions |
|||
const isCheck = checkAction == 'check' |
|||
|
|||
useEffect(() => { |
|||
if (checkRow.day) { |
|||
dispatch(report.reportRectifyDetail(checkRow.day, checkRow.depId)) |
|||
} |
|||
}, [checkRow]) |
|||
|
|||
useEffect(() => { |
|||
let data = reportRectifyDetail |
|||
let i = 1 |
|||
for (let d of data) { |
|||
d.index_ = i++ |
|||
} |
|||
setDataSource(data) |
|||
}, [reportRectifyDetail]) |
|||
|
|||
return ( |
|||
<Drawer |
|||
title={"合用场所安全隐患排查整治汇总表"} |
|||
placement="right" |
|||
onClose={() => { |
|||
close() |
|||
}} |
|||
visible={visible} |
|||
width={'82%'} |
|||
> |
|||
<Spin spinning={loading || requesting}> |
|||
<EditableProTable |
|||
columns={[ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'index_', |
|||
readonly: true, |
|||
}, |
|||
{ |
|||
title: '名称', |
|||
dataIndex: 'name', |
|||
readonly: true, |
|||
}, { |
|||
title: '地址', |
|||
dataIndex: 'address', |
|||
readonly: true, |
|||
}, { |
|||
title: '排查发现隐患', |
|||
dataIndex: 'hiddenDanger', |
|||
readonly: true, |
|||
}, { |
|||
title: '采取整改措施', |
|||
dataIndex: 'correctiveAction', |
|||
}, { |
|||
title: '实施处罚、强制措施情况', |
|||
dataIndex: 'punishment', |
|||
}, |
|||
]} |
|||
controlled={true} |
|||
value={dataSource} |
|||
onChange={setDataSource} |
|||
rowKey="id" |
|||
headerTitle={`填报单位：${checkRow.region}；时间：${checkRow.day}`} |
|||
maxLength={5} |
|||
recordCreatorProps={false} |
|||
editable={{ |
|||
type: 'multiple', |
|||
editableKeys: isCheck ? [] : dataSource.map(r => r.id) |
|||
}} |
|||
toolBarRender={() => [ |
|||
isCheck ? '' : |
|||
<Button |
|||
type="primary" |
|||
key="save" |
|||
onClick={() => { |
|||
// dataSource 就是当前数据，可以调用 api 将其保存
|
|||
setRequesting(true) |
|||
const data = dataSource |
|||
for (let d of data) { |
|||
d.userId = user.id |
|||
delete d.index_ |
|||
} |
|||
dispatch(report.compileReportRectifyDetail(dataSource)).then(res => { |
|||
setRequesting(false) |
|||
}) |
|||
}} |
|||
> |
|||
保存数据 |
|||
</Button> |
|||
]} |
|||
> |
|||
|
|||
</EditableProTable> |
|||
</Spin> |
|||
</Drawer > |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, reportRectifyDetail } = state; |
|||
return { |
|||
loading: reportRectifyDetail.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
members: members.data, |
|||
reportRectifyDetail: reportRectifyDetail.data || [] |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(CompileDrawer); |
|||
@ -0,0 +1,124 @@ |
|||
import React, { useEffect, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Button, Modal, Form, Switch } from 'antd'; |
|||
import ProForm, { ProFormText, ProFormSelect } from '@ant-design/pro-form'; |
|||
import { useState } from 'react'; |
|||
|
|||
const ConfigModal = (props) => { |
|||
const { dispatch, actions, user, loading, visible, close, editData, allAreas, reportType } = props |
|||
const [excuteTimeOptions, setExcuteTimeOptions] = useState([]) |
|||
const formRef = useRef() |
|||
const { report } = actions |
|||
|
|||
useEffect(() => { |
|||
let excuteTimeOptions = [] |
|||
for (let i = 0; i < 24; i++) { |
|||
let curT = i |
|||
if (curT < 10) { |
|||
curT = '0' + curT |
|||
} |
|||
excuteTimeOptions.push({ |
|||
value: curT + ':00', |
|||
label: curT + ':00', |
|||
}) |
|||
excuteTimeOptions.push({ |
|||
value: curT + ':30', |
|||
label: curT + ':30', |
|||
}) |
|||
} |
|||
setExcuteTimeOptions(excuteTimeOptions); |
|||
}, []) |
|||
|
|||
return ( |
|||
<Modal |
|||
title={`${editData ? '编辑' : '新增'}报表配置`} |
|||
visible={visible} |
|||
onOk={() => { |
|||
formRef.current.validateFields().then(v => { |
|||
v.excuteTime = String(v.excuteTime) |
|||
console.log(v); |
|||
dispatch(editData ? report.editReportConfig(v, editData.id) : report.addReportConfig(v)).then(res => { |
|||
if (res.success) { |
|||
dispatch(report.getReportConfig()) |
|||
close() |
|||
} |
|||
}) |
|||
}) |
|||
}} |
|||
onCancel={() => { |
|||
close() |
|||
}} |
|||
> |
|||
<ProForm |
|||
formRef={formRef} |
|||
autoFocusFirstInput |
|||
layout={'horizontal'} |
|||
labelCol={{ span: 4 }} |
|||
wrapperCol={{ span: 18 }} |
|||
initialValues={ |
|||
editData ? |
|||
editData : |
|||
{ |
|||
excuteTime: '00:00', |
|||
isEnable: true |
|||
} |
|||
} |
|||
submitter={false} |
|||
formKey='config-form' |
|||
> |
|||
<ProFormText |
|||
name={'reportName'} |
|||
label="报表名称" |
|||
placeholder="请输入名称" |
|||
required |
|||
rules={[{ required: true, message: '请输入名称' }]} |
|||
/> |
|||
<ProFormSelect |
|||
options={reportType} |
|||
cacheForSwr |
|||
name="reportTypeId" |
|||
label="报表类型" |
|||
required |
|||
rules={[{ required: true, message: '请选择报表类型' }]} |
|||
/> |
|||
<ProFormSelect |
|||
options={ |
|||
allAreas.map(a => { |
|||
return { |
|||
value: a.id, |
|||
label: a.name, |
|||
} |
|||
})} |
|||
cacheForSwr |
|||
name="regionId" |
|||
label="区域" |
|||
required |
|||
rules={[{ required: true, message: '请选择区域' }]} |
|||
/> |
|||
<Form.Item name="isEnable" label="状态" valuePropName="checked"> |
|||
<Switch checkedChildren="启用" unCheckedChildren="禁用" /> |
|||
</Form.Item> |
|||
<ProFormSelect |
|||
options={excuteTimeOptions} |
|||
addonBefore={'每天'} |
|||
addonAfter={'时'} |
|||
cacheForSwr |
|||
name="excuteTime" |
|||
label="生成时间" |
|||
/> |
|||
</ProForm> |
|||
</Modal> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, allAreas } = state; |
|||
console.log(allAreas); |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
allAreas: allAreas.data || [] |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(ConfigModal); |
|||
@ -0,0 +1,111 @@ |
|||
// 报表编辑
|
|||
|
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import moment from 'moment' |
|||
import CompileDrawer from '../components/compileDrawer' |
|||
import { Spin, Button, DatePicker, Space, Switch } from 'antd'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
import { Func } from '$utils'; |
|||
|
|||
const { RangePicker } = DatePicker; |
|||
|
|||
const Compile = (props) => { |
|||
const { dispatch, actions, user, loading, reportRectify } = props |
|||
const [searchTime, setSearchTime] = useState([moment(), moment()]) |
|||
const [compileDrawerVis, setCompileDrawerVis] = useState(false) |
|||
const [checkRow, setCheckRow] = useState({}) |
|||
const [checkAction, setCheckAction] = useState('') |
|||
const { report } = actions |
|||
|
|||
const getReportRectify = (searchTime) => { |
|||
dispatch(report.reportRectify([moment(searchTime[0]).format('YYYY-MM-DD'), moment(searchTime[1]).format('YYYY-MM-DD')])) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
getReportRectify(searchTime) |
|||
}, []) |
|||
|
|||
const showCompileDrawerVis = (row, action) => { |
|||
setCompileDrawerVis(true) |
|||
setCheckRow(row) |
|||
setCheckAction(action) |
|||
} |
|||
|
|||
return ( |
|||
<Spin spinning={loading}> |
|||
<ProTable |
|||
columns={[{ |
|||
title: '日期', |
|||
dataIndex: 'day', |
|||
}, { |
|||
title: '名称', |
|||
dataIndex: 'name', |
|||
}, { |
|||
title: '是否提交', |
|||
dataIndex: 'reportBool', |
|||
render: (_, r) => { |
|||
return <Switch disabled={true} checked={r.reportBool} /> |
|||
} |
|||
}, { |
|||
title: '操作', |
|||
dataIndex: 'option', |
|||
render: (_, r) => { |
|||
return [ |
|||
<Space> |
|||
{/* {Func.isAuthorized("REPORT_EDIT") && |
|||
<Button type="primary" onClick={() => { |
|||
showCompileDrawerVis(r, 'edit') |
|||
}}>编辑</Button> |
|||
} */} |
|||
<Button type="primary" onClick={() => { |
|||
showCompileDrawerVis(r, 'check') |
|||
}}>查看</Button> |
|||
</Space> |
|||
] |
|||
} |
|||
},]} |
|||
dataSource={reportRectify} |
|||
rowKey="index" |
|||
search={false} |
|||
options={false} |
|||
headerTitle="合用场所安全隐患排查整治汇总表" |
|||
toolBarRender={() => [ |
|||
<RangePicker allowClear={false} value={searchTime} |
|||
onChange={(date, dateString) => { |
|||
setSearchTime(date) |
|||
getReportRectify(dateString) |
|||
}} |
|||
/>, |
|||
]} |
|||
> |
|||
|
|||
</ProTable> |
|||
<CompileDrawer |
|||
visible={compileDrawerVis} |
|||
close={() => { |
|||
setCompileDrawerVis(false) |
|||
setCheckRow({}) |
|||
setCheckAction('') |
|||
|
|||
getReportRectify(searchTime) |
|||
}} |
|||
checkRow={checkRow} |
|||
checkAction={checkAction} |
|||
/> |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global, reportRectify } = state; |
|||
console.log(reportRectify); |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
loading: reportRectify.isRequesting, |
|||
reportRectify: reportRectify.data || [] |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Compile); |
|||
@ -0,0 +1,157 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import ConfigModal from '../components/configModal' |
|||
import { Spin, Button, Space, Popconfirm, Switch } from 'antd'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
import '../style.less'; |
|||
import Pinyin from '../../../utils/pinyin' |
|||
const reportType = [{ |
|||
value: 1, |
|||
label: '县区排查整治汇总表', |
|||
}, { |
|||
value: 2, |
|||
label: '各县区每日汇总表', |
|||
}, { |
|||
value: 3, |
|||
label: '隐患场所汇总表', |
|||
},] |
|||
var pinyin = null |
|||
var as = null |
|||
var bs = null |
|||
const Config = (props) => { |
|||
const { dispatch, actions, loading, reportConfig, allAreas } = props |
|||
const [configModalVis, setConfigModalVis] = useState(false) |
|||
const [editData, setEditData] = useState(null) |
|||
const { report } = actions |
|||
useEffect(() => { |
|||
dispatch(report.getReportConfig()) |
|||
dispatch(report.allAreas()) |
|||
|
|||
}, []) |
|||
useEffect(()=>{ |
|||
pinyin=new Pinyin() |
|||
}) |
|||
return ( |
|||
<Spin spinning={loading}> |
|||
<ProTable |
|||
columns={[{ |
|||
title: '报表名称', |
|||
dataIndex: 'reportName', |
|||
}, { |
|||
title: '区域名称', |
|||
dataIndex: 'region', |
|||
sorter: (a, b) => { |
|||
let regionOne = allAreas.find(item => item.id == a.regionId) |
|||
let regionTwo = allAreas.find(item => item.id == b.regionId) |
|||
|
|||
if (regionOne) { |
|||
as = pinyin.getCamelChars(regionOne.name).toLowerCase() |
|||
|
|||
} if (regionTwo) { |
|||
bs = pinyin.getCamelChars(regionTwo.name).toLowerCase() |
|||
|
|||
} else { |
|||
return '' |
|||
} |
|||
let codeOne=as.substr(0,1).charCodeAt() |
|||
let codeTwo=bs.substr(0,1).charCodeAt() |
|||
return codeOne-codeTwo |
|||
}, |
|||
render: (_, row, index, action) => { |
|||
let curRegion = allAreas.find(a => a.id == row.regionId) |
|||
return curRegion ? curRegion.name : '' |
|||
}, |
|||
}, { |
|||
title: '类型', |
|||
dataIndex: 'reportType', |
|||
|
|||
render: (_, r) => { |
|||
let curType = reportType.find(t => t.value == r.reportTypeId) |
|||
return curType ? curType.label : '' |
|||
}, |
|||
|
|||
}, { |
|||
title: '生成时间', |
|||
dataIndex: 'index', |
|||
render: (_, row) => { |
|||
return `每日 ${row.excuteTime.indexOf(':') > -1 ? row.excuteTime : row.excuteTime + ':00'}` |
|||
} |
|||
}, { |
|||
title: '启用状态', |
|||
dataIndex: 'isEnable', |
|||
render: (_, row) => { |
|||
return <Switch checkedChildren="启用" unCheckedChildren="禁用" disabled defaultChecked={row.isEnable} /> |
|||
|
|||
} |
|||
}, { |
|||
title: '操作', |
|||
dataIndex: 'option', |
|||
render: (_, row) => { |
|||
return [ |
|||
<Space> |
|||
<Button type="primary" |
|||
onClick={() => { |
|||
setConfigModalVis(true) |
|||
setEditData({ |
|||
...row, |
|||
excuteTime: row.excuteTime.indexOf(':') > -1 ? row.excuteTime : row.excuteTime + ':00' |
|||
}) |
|||
}} |
|||
>编辑</Button> |
|||
<Popconfirm |
|||
placement="topRight" |
|||
title={'确认删除此报备表配置？'} |
|||
onConfirm={() => { |
|||
dispatch(report.delReportConfig(row.id)).then(res => { |
|||
if (res.success) { |
|||
dispatch(report.getReportConfig()) |
|||
} |
|||
}) |
|||
}} |
|||
> |
|||
<Button type="primary" danger>删除</Button> |
|||
</Popconfirm> |
|||
</Space> |
|||
] |
|||
} |
|||
},]} |
|||
dataSource={reportConfig} |
|||
rowKey="id" |
|||
search={false} |
|||
options={false} |
|||
toolBarRender={() => [ |
|||
<Button type="primary" key="primary" onClick={() => { setConfigModalVis(true) }}> |
|||
添加报表配置 |
|||
</Button>, |
|||
]} |
|||
> |
|||
|
|||
</ProTable> |
|||
{ |
|||
configModalVis ? |
|||
<ConfigModal |
|||
visible={true} |
|||
close={() => { |
|||
setConfigModalVis(false) |
|||
setEditData(null) |
|||
}} |
|||
reportType={reportType} |
|||
editData={editData} |
|||
/> : '' |
|||
} |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global, reportConfig, allAreas } = state; |
|||
return { |
|||
loading: reportConfig.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
reportConfig: reportConfig.data || [], |
|||
allAreas: allAreas.data || [] |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Config); |
|||
@ -0,0 +1,129 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Button } from 'antd'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
import '../style.less'; |
|||
import moment from 'moment'; |
|||
import { Func } from '$utils'; |
|||
|
|||
const Download = (props) => { |
|||
const { dispatch, actions, reportList, regionList, user } = props |
|||
|
|||
useEffect(() => { |
|||
dispatch(actions.report.getRegionList()); |
|||
}, []); |
|||
|
|||
const columns = [{ |
|||
title: '报表名称', |
|||
dataIndex: 'reportName', |
|||
formItemProps: { |
|||
label: null, |
|||
}, |
|||
fieldProps: { |
|||
placeholder: '输入报表名称' |
|||
} |
|||
}, { |
|||
title: '区域名称', |
|||
dataIndex: 'regionName', |
|||
valueType: 'select', |
|||
initialValue: -1, |
|||
fieldProps: { |
|||
label: null, |
|||
options: [{ |
|||
label: '全部', |
|||
value: -1 |
|||
}].concat(regionList) |
|||
}, |
|||
order: 5, |
|||
render: (dom, record) => { |
|||
return record.department ? record.department.name : null |
|||
} |
|||
}, { |
|||
title: '类型', |
|||
dataIndex: 'reportType', |
|||
hideInSearch: true, |
|||
render: (dom, record) => { |
|||
return record.reportType ? record.reportType.name : null |
|||
} |
|||
}, { |
|||
title: '生成时间', |
|||
dataIndex: 'creatTime', |
|||
valueType: 'dateTimeRange', |
|||
order: 4, |
|||
render: (dom, record) => { |
|||
return moment(record.creatTime).format('YYYY-MM-DD HH:mm') |
|||
} |
|||
}] |
|||
if (Func.isAuthorized("REPORT_DOWN")) { |
|||
columns.push({ |
|||
title: '操作', |
|||
key: 'option', |
|||
hideInSearch: true, |
|||
render: (dom, record) => { |
|||
// const ApiRoot = localStorage.getItem('tyApiRoot');
|
|||
const filePathArr = record.filePath.split('/') |
|||
|
|||
const fileName = filePathArr.pop() |
|||
// console.log(fileName);
|
|||
return [ |
|||
// <a key="download" href={ApiRoot + '' + record.filePath}>下载</a>
|
|||
<a href={ |
|||
'/_api/' + |
|||
// 'http://10.8.30.157:8439/'+
|
|||
`attachments?src=files/${fileName}&filename=${encodeURIComponent(fileName)}&token=${user.token}`} > |
|||
下载 |
|||
</a> |
|||
] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<Spin spinning={false}> |
|||
<ProTable |
|||
columns={columns} |
|||
toolbar={{ |
|||
settings: [] |
|||
}} |
|||
dataSource={reportList} |
|||
request={async (params) => { |
|||
const query = { |
|||
limit: params.pageSize, |
|||
offset: params.pageSize * (params.current - 1), |
|||
creatTime: params.creatTime, |
|||
reportName: params.reportName, |
|||
regionName: params.regionName |
|||
} |
|||
const res = await dispatch(actions.report.getReportList(query)); |
|||
return { |
|||
...res, |
|||
total: res.payload.data ? res.payload.data.count : 0 |
|||
} |
|||
}} |
|||
> |
|||
</ProTable> |
|||
</Spin > |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, reportList, regionList } = state; |
|||
const { count, rows } = reportList.data || {}; |
|||
let regions = []; |
|||
if (regionList.data && regionList.data.length > 0) { |
|||
regions = regionList.data.map(v => { |
|||
return { |
|||
label: v.name, |
|||
value: v.id, |
|||
} |
|||
}); |
|||
} |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
reportList: rows || [], |
|||
regionList: regions |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Download); |
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import Config from './config'; |
|||
import Download from './download'; |
|||
import Compile from './compile' |
|||
|
|||
export { Config, Download, Compile }; |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'report', |
|||
name: '报表管理', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,35 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { FileTextOutlined } from '@ant-design/icons'; |
|||
import { Func } from '$utils'; |
|||
import { push } from 'react-router-redux'; |
|||
|
|||
|
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
if (user.type != 1 && user.type != 2) { |
|||
dispatch(push('/fillion/infor')); |
|||
return null |
|||
} |
|||
if (!Func.isAuthorized("REPORT_MANAGE")) { |
|||
return null |
|||
} |
|||
return ( |
|||
<SubMenu key="report" icon={<FileTextOutlined />} title={'报表管理'}> |
|||
{Func.isAuthorized("REPROT_CONFIG") && <Menu.Item key="reportConfig"> |
|||
<Link to="/report/config">报表配置</Link> |
|||
</Menu.Item>} |
|||
{Func.isAuthorized("REPORT_DOWN") && <Menu.Item key="reportDownload"> |
|||
<Link to="/report/download">报表下载</Link> |
|||
</Menu.Item>} |
|||
{Func.isAuthorized("REPORT_LIST") && |
|||
<Menu.Item key="reportCompile"> |
|||
<Link to="/report/compile">整治汇总表</Link> |
|||
</Menu.Item> |
|||
} |
|||
</SubMenu> |
|||
|
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
'use strict'; |
|||
import { Config, Download, Compile } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/report', |
|||
key: 'report', |
|||
breadcrumb: '报表管理', |
|||
menuSelectKeys: ['config'], |
|||
menuOpenKeys: ['report'], |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/config', |
|||
key: 'reportConfig', |
|||
component: Config, |
|||
menuSelectKeys:['reportConfig'], |
|||
breadcrumb: '报表配置', |
|||
}, { |
|||
path: '/download', |
|||
key: 'reportDownload', |
|||
menuSelectKeys:['reportDownload'], |
|||
component: Download, |
|||
breadcrumb: '报表下载', |
|||
}, { |
|||
path: '/compile', |
|||
key: 'reportCompile', |
|||
menuSelectKeys:['reportCompile'], |
|||
component: Compile, |
|||
breadcrumb: '整治汇总表', |
|||
}] |
|||
} |
|||
}]; |
|||
@ -0,0 +1,3 @@ |
|||
#example:hover { |
|||
font-size: larger; |
|||
} |
|||
Loading…
Reference in new issue