Compare commits

...

2 Commits

Author SHA1 Message Date
wangyue f3575cb8cd aaa 2 years ago
wangyue 7b83013067 前台提交 2 years ago
  1. 30
      api/log/development.log
  2. 4
      api/package.json
  3. 76
      t --hard
  4. 291
      web/client/src/sections/fillion/components/highways/guanli.js
  5. 107
      web/client/src/sections/fillion/components/highways/highwaysdata.js
  6. 388
      web/client/src/sections/fillion/components/highwaysTable.js
  7. 10
      web/client/src/sections/quanju/containers/footer/conserve/action/index.js
  8. 34
      web/client/src/sections/quanju/containers/footer/conserve/index.js
  9. 4
      web/client/src/sections/quanju/containers/footer/conserve/left.js
  10. 10
      web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
  11. 248
      web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
  12. 377
      web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
  13. 7
      web/client/src/sections/quanju/containers/footer/conserve/left/lun.less
  14. 193
      web/client/src/sections/quanju/containers/footer/conserve/left/lunbo.js
  15. 309
      web/client/src/sections/quanju/containers/footer/conserve/left/lunbozujian.js
  16. 98
      web/client/src/sections/quanju/containers/footer/conserve/left/shituzujian.js
  17. 272
      web/client/src/sections/quanju/containers/footer/conserve/left/zhexin.js
  18. 139
      web/client/src/sections/quanju/containers/footer/conserve/left/zidong.js
  19. 2
      web/client/src/sections/quanju/containers/footer/index.js
  20. 1
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js
  21. 184
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/huadong.js
  22. 98
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/left.less
  23. 2
      web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
  24. 2
      web/client/src/utils/webapi.js
  25. 65625
      web/log/development.txt
  26. 15319
      web/package-lock.json
  27. 2
      web/package.json

30
api/log/development.log

@ -1,3 +1,4 @@
<<<<<<< Updated upstream
2021-06-11 09:24:57.968 - debug: [FS-LOGGER] Init.
2021-06-11 09:24:58.371 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2021-06-11 09:24:58.371 - info: [FS-AUTH] Inject auth and api mv into router.
@ -11077,3 +11078,32 @@ headers: {}
2022-08-12 15:35:49.622 - debug: [FS-LOGGER] Init.
2022-08-12 15:35:49.700 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-12 15:35:49.700 - info: [FS-AUTH] Inject auth and api mv into router.
=======
2022-08-25 16:36:38.540 - debug: [FS-LOGGER] Init.
2022-08-25 16:36:38.625 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-25 16:36:38.626 - info: [FS-AUTH] Inject auth and api mv into router.
2022-08-25 16:59:51.659 - debug: [FS-LOGGER] Init.
2022-08-25 16:59:51.742 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-25 16:59:51.742 - info: [FS-AUTH] Inject auth and api mv into router.
2022-08-26 11:12:28.406 - debug: [FS-LOGGER] Init.
2022-08-26 11:12:28.488 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-26 11:12:28.489 - info: [FS-AUTH] Inject auth and api mv into router.
2022-08-29 16:04:37.717 - debug: [FS-LOGGER] Init.
2022-08-29 16:04:38.471 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-29 16:04:38.471 - info: [FS-AUTH] Inject auth and api mv into router.
2022-08-29 16:12:00.460 - debug: [FS-LOGGER] Init.
2022-08-29 16:12:00.541 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-29 16:12:00.541 - info: [FS-AUTH] Inject auth and api mv into router.
2022-08-30 09:43:41.776 - debug: [FS-LOGGER] Init.
2022-08-30 09:43:42.448 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-30 09:43:42.448 - info: [FS-AUTH] Inject auth and api mv into router.
>>>>>>> Stashed changes
<<<<<<< Updated upstream
2022-08-30 16:36:05.846 - debug: [FS-LOGGER] Init.
2022-08-30 16:36:05.939 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-30 16:36:05.939 - info: [FS-AUTH] Inject auth and api mv into router.
2022-08-30 16:36:13.025 - debug: [FS-LOGGER] Init.
2022-08-30 16:36:13.105 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-30 16:36:13.105 - info: [FS-AUTH] Inject auth and api mv into router.
=======
>>>>>>> Stashed changes

4
api/package.json

@ -5,8 +5,8 @@
"main": "server.js",
"scripts": {
"test": "set DEBUG=true&&\"node_modules/.bin/mocha\" --harmony --reporter spec app/test/*.test.js",
"start": "set NODE_ENV=development&&node server -p 4000 -g postgres://postgres://postgres:123@10.8.30.32:5432/highways4good -f http://localhost:14000 --qnak XuDgkao6cL0HidoMAPnA5OB10Mc_Ew08mpIfRJK5 --qnsk yewcieZLzKZuDfig0wLZ9if9jKp2P_1jd3CMJPSa --qnbkt dev-highways4good --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
"start:linux": "export NODE_ENV=development&&node server -p 4000 -g postgres://FashionAdmin:123456@10.8.30.39:5432/pm1",
"start": "set NODE_ENV=development&&node server -p 4001 -g postgres://postgres://postgres:123@10.8.30.32:5432/highways4good -f http://localhost:14000 --qnak XuDgkao6cL0HidoMAPnA5OB10Mc_Ew08mpIfRJK5 --qnsk yewcieZLzKZuDfig0wLZ9if9jKp2P_1jd3CMJPSa --qnbkt dev-highways4good --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
"start:linux": "export NODE_ENV=development&&node server -p 4001 -g postgres://FashionAdmin:123456@10.8.30.39:5432/pm1",
"automate": "sequelize-automate -c sequelize-automate.config.js"
},
"author": "",

76
t --hard

@ -0,0 +1,76 @@
2adac9cb (HEAD -> dev) HEAD@{0}: reset: moving to HEAD^^^
e5135673 (origin/dev_backup) HEAD@{1}: reset: moving to HEAD^^
020d4eda (origin/dev) HEAD@{2}: reset: moving to HEAD
020d4eda (origin/dev) HEAD@{3}: reset: moving to HEAD
020d4eda (origin/dev) HEAD@{4}: commit: 12151
d13b52a9 HEAD@{5}: reset: moving to HEAD
d13b52a9 HEAD@{6}: pull --tags origin dev: Fast-forward
2d649d8e HEAD@{9}: pull --tags origin dev: Merge made by the 'ort' strategy.
1a9dd433 HEAD@{10}: commit: 清除log
a9d12cd8 HEAD@{11}: pull --tags origin dev: Merge made by the 'ort' strategy.
8573588e HEAD@{12}: commit: 五分钟刷新
39b8e12b HEAD@{13}: pull --tags origin dev: Fast-forward
6aba4d7a HEAD@{14}: pull --tags origin dev: Merge made by the 'ort' strategy.
2e6dc29a HEAD@{15}: commit: 提交
283a16ae HEAD@{16}: pull --tags origin dev: Merge made by the 'ort' strategy.
590ec5dd HEAD@{17}: commit: 提交
8eb418ae HEAD@{19}: commit: 日期去掉了日,加上了百分号
bf01c153 HEAD@{20}: commit: 提交
76ad089b HEAD@{21}: pull --tags origin dev: Merge made by the 'ort' strategy.
45f58fda HEAD@{22}: commit: 代码提交
d9079d38 HEAD@{23}: commit: 提交日期处理
8e0048ac HEAD@{24}: pull --tags origin dev: Fast-forward
c1607d94 HEAD@{25}: pull --tags origin dev: Fast-forward
670dcf18 HEAD@{26}: pull --tags origin dev: Merge made by the 'ort' strategy.
ec02aeb9 HEAD@{27}: commit: nan优化
974e3c67 HEAD@{28}: commit: 换成定位了
a61dc4e9 HEAD@{29}: pull --tags origin dev: Fast-forward
d77627f9 HEAD@{30}: pull --tags origin dev: Merge made by the 'ort' strategy.
01ef6b5a HEAD@{31}: commit: 柱体问题解决
e9424d3e HEAD@{32}: pull --tags origin dev: Merge made by the 'ort' strategy.
c276432d HEAD@{33}: commit: 样式和颜色提交
45c415e6 (origin/release_0.0.4) HEAD@{34}: pull --tags origin dev: Fast-forward
79723f61 HEAD@{35}: commit: 线条
9c81764c HEAD@{36}: pull --tags origin dev: Merge made by the 'ort' strategy.
3f398ea2 HEAD@{37}: commit: 提交bug
502b068d HEAD@{38}: pull --tags origin dev: Merge made by the 'ort' strategy.
7a5b8b64 HEAD@{39}: commit: 提交
aeff1fe5 HEAD@{40}: commit: 路由修改
11da9451 HEAD@{41}: pull --tags origin dev: Merge made by the 'ort' strategy.
ed7ab5a8 HEAD@{42}: commit: 完成
06063067 HEAD@{43}: pull --tags origin dev: Merge made by the 'ort' strategy.
755a333f HEAD@{44}: commit: 接口调用
2b153823 HEAD@{45}: pull --tags origin dev: Merge made by the 'ort' strategy.
f0558530 HEAD@{46}: commit: 路政统计
50eb042e HEAD@{47}: pull --tags origin dev: Merge made by the 'ort' strategy.
a1dfeddb HEAD@{48}: commit: 提交鼠标移出事件
5469d9df HEAD@{49}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
49a0b5d7 HEAD@{50}: commit: 提交
11279671 HEAD@{51}: commit: 提交领导驾驶舱
3919e2c3 HEAD@{52}: pull --tags origin dev: Merge made by the 'ort' strategy.
b9302fdf HEAD@{53}: commit: 提交代码
79328f49 HEAD@{54}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
c6a3b352 HEAD@{55}: commit: 提交样式
14ed5747 HEAD@{56}: pull --tags origin dev: Fast-forward
80e11974 HEAD@{57}: pull --tags origin dev: Merge made by the 'ort' strategy.
a561e62b HEAD@{58}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
163ce6c1 HEAD@{59}: commit: 提交left.less的更改
4de26fc7 HEAD@{60}: pull: Fast-forward
4a1ae175 HEAD@{61}: pull --tags origin dev: Fast-forward
e7a01d52 HEAD@{62}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
c7e7cd4c HEAD@{63}: commit: 提交领导驾驶舱
fc3f2a92 HEAD@{64}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
f166aa29 HEAD@{65}: commit: 领导驾驶舱提交代码
e6030bcf HEAD@{66}: commit: 上传
b299cd97 HEAD@{67}: pull --tags origin dev: Merge made by the 'ort' strategy.
69e7f3b6 HEAD@{68}: commit: 删除冗余,提交
a74afb8f HEAD@{69}: commit: 文件
68c13e99 HEAD@{70}: commit: 文件上传
dacf49b4 HEAD@{71}: commit: 文件上传
1190cc0d HEAD@{72}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
0c57a227 HEAD@{73}: commit: 头部样式完成
8ab4f5f2 HEAD@{74}: pull --tags origin dev: Merge made by the 'ort' strategy.
50714cbf HEAD@{75}: commit: 公共组件图标样式修改
34413ac0 HEAD@{76}: commit: test
eee5aedf HEAD@{77}: commit: test
cbdfefa3 (master) HEAD@{79}: clone: from https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good.git

291
web/client/src/sections/fillion/components/highways/guanli.js

@ -0,0 +1,291 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Form, Spin, Table } from 'antd';
import { ModalForm, ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import { putOperaTional, putHighways } from "../../actions/infor"
import _ from 'lodash'
const Guanli = (props) => {
const { visible, onVisibleChange, typecard, rewkeys, recortd, dispatch, setRecortd, setDelet } = props
const [success, setSuccess] = useState()
useEffect(() => {
return () => {
setRecortd()
}
}, [setRecortd])
// console.log(recortd)
return (
<Spin spinning={false}>
{/* {
newlysay ? */}
<ModalForm
width={'90rem'}
visible={visible}
onVisibleChange={onVisibleChange}
onFinish={(values) => {
if (rewkeys === 'passenger') {
setDelet(values)
const query = { ...values, id: recortd?.id }
dispatch(putOperaTional(query)).then((res) => {
setSuccess(res.success)
})
return true
}
if (rewkeys === 'highways') {
setDelet(values)
const query = { ...values, id: recortd?.id }
dispatch(putHighways(query)).then((res) => {
setSuccess(res.success)
})
return true
}
}}
initialValues={recortd}
>
{typecard == 'compile' ?
<ProForm.Group
>
<ProFormText
name='name'
width="md"
label='类型'
placeholder="请输入名称"
// value={recortd?.[0]?.value}
// disabled
/>
<ProFormText
name='count'
width="md"
label='数量'
placeholder="请输入数量"
rules={[
{
required: true,
message: '请输入整数',
pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/>
<ProFormText
name='count'
width="md"
label='数量'
placeholder="请输入数量"
rules={[
{
required: true,
message: '请输入整数',
pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/>
</ProForm.Group>
: <ProForm.Group>
<ProFormText
name='count'
width="md"
label='管养责任单位'
placeholder="请输入管养责任单位"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='养护单位'
placeholder="请输入养护单位"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='管理人员'
placeholder="请输入管理人员"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='工人'
placeholder="请输入工人"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='公益岗位'
placeholder="请输入公益岗位"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='县道'
placeholder="请输入县道"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='乡道'
placeholder="请输入乡道"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='村道'
placeholder="请输入村道"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/><ProFormText
name='count'
width="md"
label='桥梁'
placeholder="请输入桥梁"
rules={[
{
required: true,
// message: '请输入整数',
// pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/>
</ProForm.Group>}
</ModalForm>
{/* : ''
} */}
</Spin>
)
}
function mapStateToProps(state) {
const { depMessage } = state;
const pakData = (dep) => {
return dep.map((d) => {
return {
title: d.name,
value: d.id,
children: pakData(d.subordinate)
}
})
}
let depData = pakData(depMessage.data || [])
return {
loading: depMessage.isRequesting,
depData,
};
}
export default connect(mapStateToProps)(Guanli);

107
web/client/src/sections/fillion/components/highways/highwaysdata.js

@ -1,14 +1,14 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Form, Spin, Table } from 'antd';
import { ModalForm, ProForm, ProFormText,ProFormSelect } from '@ant-design/pro-form';
import { putOperaTional,putHighways,putShippingList } from "../../actions/infor"
import _ from 'lodash'
import { ModalForm, ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import { putOperaTional, putHighways } from "../../actions/infor"
import _ from 'lodash'
const HightModal = (props) => {
const { visible, onVisibleChange, typecard, rewkeys, recortd, dispatch, setRecortd,setDelet } = props
const [success,setSuccess]=useState()
const { visible, onVisibleChange, typecard, rewkeys, recortd, dispatch, setRecortd, setDelet } = props
const [success, setSuccess] = useState()
useEffect(() => {
return () => {
setRecortd()
@ -26,69 +26,62 @@ const HightModal = (props) => {
onFinish={(values) => {
if (rewkeys === 'passenger') {
setDelet(values)
const query = { ...values, id:recortd?.id }
dispatch(putOperaTional(query)).then((res) => {
setSuccess(res.success)
})
return true
} if (rewkeys === 'freight') {
setDelet(values)
const query = { ...values, id:recortd?.id }
dispatch(putShippingList(query)).then((res) => {
setSuccess(res.success)
})
return true
const query = { ...values, id: recortd?.id }
dispatch(putOperaTional(query)).then((res) => {
setSuccess(res.success)
})
return true
}
if (rewkeys === 'highways') {
setDelet(values)
const query = { ...values, id:recortd?.id }
const query = { ...values, id: recortd?.id }
dispatch(putHighways(query)).then((res) => {
setSuccess(res.success)
})
return true
}
}
}}
initialValues={recortd}
>
{/* {typecard == 'compile' ? */}
<ProForm.Group
>
<ProFormText
name='name'
width="md"
label='类型'
placeholder="请输入名称"
// value={recortd?.[0]?.value}
disabled
/>
<ProFormText
name='count'
width="md"
label='数量'
placeholder="请输入数量"
rules={[
{required: true,
message:'请输入整数',
pattern:RegExp(/^[0-9]\d*$/,'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/>
<ProForm.Group
>
<ProFormText
name='name'
width="md"
label='类型'
placeholder="请输入名称"
// value={recortd?.[0]?.value}
disabled
/>
<ProFormText
name='count'
width="md"
label='数量'
placeholder="请输入数量"
rules={[
{
required: true,
message: '请输入整数',
pattern: RegExp(/^[0-9]\d*$/, 'g'),
},
// getValueFromEvent=(event)=>{
// return event.target.value.replace(/\D/g,'')
// }
]}
/>
</ProForm.Group>
{/* : <ProForm.Group>
</ProForm.Group>
{/* : <ProForm.Group>
vfdscfd
</ProForm.Group>} */}

388
web/client/src/sections/fillion/components/highwaysTable.js

@ -1,37 +1,69 @@
import React, { useEffect, useState,useRef } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Popconfirm, Badge } from 'antd';
import ProTable from '@ant-design/pro-table';
import './protable.less'
import { getHighways } from "../actions/infor"
import HightModal from './highways/highwaysdata';
import Guanli from './highways/guanli';
const HigwaysTable = (props) => {
const { dispatch, user, } = props
const [rowSelected, setRowSelected] = useState([])
const [modalVisible, setModalVisible] = useState(false);
const [counts, setCounts] = useState()//shuju
const [modalVisibleyilan, setModalVisibleyilan] = useState(false);
const [modalVisibleyilans, setModalVisibleyilans] = useState(false);
const [modalRecord, setModalRecord] = useState();
const [typecard, setTypecard] = useState();
const [recortd, setRecortd] = useState()
const [sitename, setSitename] = useState()//桥梁名称
const [delet, setDelet] = useState()
const [activeKey, setActiveKey] = useState('tab1');
const [whichofits, setWhichofits] = useState('qiaoliang')
const [differentiate, setDifferentiate] = useState('bridge')
const ref = useRef()
useEffect(() => { ref.current.reload() }, [ delet])
//打开弹窗
const hightModal = (type, record) => {
setModalVisibleyilan(true);
// setModalType(type);
if (type == 'edit') {
setModalRecord(record);
} else {
setModalRecord(null);
useEffect(() => { ref.current.reload() }, [delet])
//打开弹窗
const hightModal = (type, record) => {
setModalVisibleyilan(true);
// setModalType(type);
if (type == 'edit') {
setModalRecord(record);
} else {
setModalRecord(null);
}
}
}
const columns =
[
const deldatas = (id) => { // 工程
const query = {
projectId: id
}
// dispatch(delProject(query)).then((res) => {
// setDelet(res)
// })
}
const openModal = (type, record) => {
setModalVisible(true);
// setModalType(type);
if (type == 'edit') {
setModalRecord(record);
} else {
setModalRecord(null);
}
}
const yilanModal = (type, record) => {
setModalVisibleyilans(true);
// setModalType(type);
if (type == 'edit') {
setModalRecord(record);
} else {
setModalRecord(null);
}
}
const columns = {
tab1: [
{
title: '类型',
dataIndex: 'placeName',
@ -45,7 +77,7 @@ const hightModal = (type, record) => {
setSitename(value.currentTarget.value)
},
placeholder: '请输入类型进行搜索',
getPopupContainer: (triggerNode) => triggerNode.parentNode,
},
render: (dom, record) => {
return record.name
@ -74,32 +106,219 @@ const hightModal = (type, record) => {
fixed: 'right',
render: (dom, record) => {
return <div><Button type="link"
onClick={() => {
hightModal('edit', record)
setTypecard('compile')
setRecortd(record)
}}
onClick={() => {
hightModal('edit', record)
setTypecard('compile')
setRecortd(record)
}}
>编辑</Button></div>
}
},
], tab2: [
{
title: '管养责单位',
dataIndex: 'placeName',
fixed: 'left',
width: 120,
options: 1,
backgroundColor: "#ffffff",
fieldProps: {
onChange: (value, cs) => {
setSitename(value.currentTarget.value)
},
placeholder: '请输入项目名称进行搜索',
},
render: (dom, record) => {
return record.entryName
},
},
{
title: '养护单位',
search: false,
dataIndex: 'time1',
valueType: 'dateRange',
// fixed: 'left',
width: 120,
render: (dom, record) => {
return record.projectMileage
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
},
{
title: '管理人员(人)',
search: false,
dataIndex: 'time2',
valueType: 'dateRange',
// align: 'right',
width: 120,
render: (dom, record) => {
return record.investment
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
},
{
title: '工人(人)',
search: false,
dataIndex: 'time3',
valueType: 'dateRange',
width: 120,
render: (dom, record) => {
return record.buildUnit
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
}, {
title: '公益岗位(人)',
search: false,
dataIndex: 'time4',
valueType: 'dateRange',
width: 120,
render: (dom, record) => {
return record.constructionControlUnit
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
}, {
title: '县道(km)',
search: false,
dataIndex: 'time5',
valueType: 'dateRange',
width: 120,
render: (dom, record) => {
return record.designUnit
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
}, {
title: '乡道(km)',
search: false,
dataIndex: 'time6',
valueType: 'dateRange',
width: 120,
render: (dom, record) => {
return record.constructionUnit
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
}, {
title: '村道(km)',
search: false,
dataIndex: 'time7',
valueType: 'dateRange',
width: 120,
render: (dom, record) => {
return record.supervisorAndSupervisor
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
}, {
title: '桥梁(座)',
search: false,
dataIndex: 'time8',
valueType: 'dateRange',
width: 120,
render: (dom, record) => {
return record.projectProgress
},
fieldProps: {
getPopupContainer: (triggerNode) => triggerNode.parentNode,
}
},
{
title: '操作',
dataIndex: 'creatTime',
valueType: 'dateTimeRange',
hideInSearch: true,
width: 160,
fixed: 'right',
render: (dom, record) => {
return <div><Button type="link"
onClick={() => {
yilanModal('edit', record)
setTypecard('compile')
setRecortd(record)
}}
>编辑</Button><Popconfirm title='' onConfirm={() => { deldatas(record.id) }}>
<Button type="link">删除</Button>
</Popconfirm></div>
}
},
{
key: "direction",
hideInTable: true,
dataIndex: "direction",
order: 6,
renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => {
return (
<div> <Button
type="primary"
style={{ width: "100px" }}
onClick={() => {
yilanModal('edit', record)
setTypecard('')
}}
>
新增
</Button>
{/* <Button
type="primary"
style={{ width: "100px", marginLeft: 20 }}
>
导入
</Button> */}
</div>
);
},
},
]
}
return (
<Spin spinning={false}>
<div className='protable-transpor'>
{/* <div className='protable-transpor'>
<ProTable
actionRef={ref}
scroll={{ x: 800 }}
options={false}
form={{
submitter:false
submitter: false
}}
// ref={c => { finishedProductTable = c; }}
style={{ width: "100% ", overflow: "auto", height: '760px' }}
rowKey='id'
onReset={(v) => {
setSitename('')
setSitename('')
}}
// rowSelection={{
// selectedRowKeys: rowSelected,
@ -109,10 +328,10 @@ const hightModal = (type, record) => {
// }}
columns={columns}
dataSource={counts || []}
dataSource={counts || []}
request={async (params) => {
const query = {
name:sitename
name: sitename
}
setRowSelected([]);
const res = await dispatch(getHighways(query));
@ -123,8 +342,99 @@ const hightModal = (type, record) => {
}
}}
>
</ProTable></div>
{modalVisibleyilan ? <HightModal
</ProTable></div> */}
<div className='protable-transpor'>
<ProTable
actionRef={ref}
toolbar={{
multipleLine: true,
menu: {
activeKey,
onChange: (key) => setActiveKey(key),
items: [
{
key: 'tab1',
label: <span onClick={() => {
setWhichofits('qiaoliang')
setDifferentiate('bridge')
}}>设施统计{activeKey === 'tab1'}</span>,
},
{
key: 'tab2',
label: <span onClick={() => {
setWhichofits('gongcheng')
setDifferentiate('project')
}}>管理养护{activeKey === 'tab2'}</span>,
},
],
},
}}
form={{
submitter: whichofits == "qiaoliang" ? false : true
}}
scroll={{ x: 800 }}
options={false}
ref={c => { finishedProductTable = c; }}
style={{ width: "100% ", overflow: "auto", height: '760px' }}
rowKey='id'
onReset={(v) => {
setSitename('')
}}
// rowSelection={{
// selectedRowKeys: rowSelected,
// onChange: (selectedRowKeys) => {
// setRowSelected(selectedRowKeys);
// },
// }}
columns={columns[activeKey]}
dataSource={counts || []}
request={async (params) => {
if (whichofits == 'qiaoliang') {
const query = {
name: sitename
}
setRowSelected([]);
const res = await dispatch(getHighways(query));
setCounts(res.payload.data)
return {
...res,
total: res.payload.data ? res.payload.data.count : 0
}
} if (whichofits == 'gongcheng') {
const query = {
type: 'bridge',
entryName: sitename
}
setRowSelected([]);
const res = await dispatch(getProject(query));
setCounts("")
return {
...res,
// total: res.payload.data ? res.payload.data.count : 0
}
}
}}
search={{
defaultCollapsed: false,
optionRender: (searchConfig, formProps, dom) => [
...dom.reverse(),
// whichofits == "qiaoliang" ? "" : <Popconfirm title="确认导出?" onConfirm={() => { props.exports(rowSelected, differentiate) }}>
// <Button
// >
// 导出
// </Button>
// </Popconfirm>
],
}}
>
</ProTable>
</div>
{modalVisibleyilan ? <HightModal
visible={modalVisibleyilan}
onVisibleChange={setModalVisibleyilan}
modalRecord={modalRecord}
@ -134,9 +444,33 @@ const hightModal = (type, record) => {
setRecortd={setRecortd}
setDelet={setDelet}
/> : ''}
{modalVisibleyilans ? <Guanli
visible={modalVisibleyilans}
onVisibleChange={setModalVisibleyilans}
modalRecord={modalRecord}
typecard={typecard}
rewkeys={'guanli'}
recortd={recortd}
setRecortd={setRecortd}
setDelet={setDelet}
/> : ''}
</Spin >
)
}
const date = {
"bridgeCode": "桥梁代码",
"bridgeName": "桥梁名称",
"centralStation": "中心桩号",
"crossingFigureType": "跨越地物类型",
"crossingFigureName": "跨越地物名称",
"natureOfCharges": "收费性质",
"rampCode": "匝道编码",
"sectionType": "路段类型",
"crossingFigureType1": "跨越地物类型1",
"crossingFigureName1": "跨越地物名称1",
"originalBridgeCode": "原桥梁代码",
"whetherWideRoadAndNarrowBridge": "是否宽路窄桥",
}
function mapStateToProps(state) {
const { auth, depMessage } = state;
const pakData = (dep) => {

10
web/client/src/sections/quanju/containers/footer/conserve/action/index.js

@ -25,3 +25,13 @@ export function getRoadMaintenances() {
reducer: { name: 'RoadMaintenances' }
});
}
export function getxiuyang() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_XIUYANG',
url: ApiTable.getXiuyang,
msg: { error: '获取信息失败' },
reducer: { name: 'xiuyang' }
});
}

34
web/client/src/sections/quanju/containers/footer/conserve/index.js

@ -2,15 +2,17 @@ import React, { useEffect, useState } from 'react'
import Left from './left'
import Right from './right'
import { connect } from 'react-redux'
import moment from 'moment';
import { getdaolutongji } from '../../../actions/example'
import { getHighways, getRoadMaintenances } from './action'
import { getHighways, getRoadMaintenances, getxiuyang } from './action'
const Conserve = (props) => {
const [roadData, setRoadData] = useState()
const [highwaysData, setHighwaysData] = useState()
const [roadMaintenances, setRoadMaintenances] = useState()
const [data, setData] = useState()
const [shuju, setShuju] = useState()
const [loading, setLoading] = useState(true)
const { dispatch } = props
@ -19,19 +21,33 @@ const Conserve = (props) => {
setLoading(false)
setRoadData(res.payload.data || {})
})
dispatch(getHighways()).then(res =>{
dispatch(getHighways()).then(res => {
setHighwaysData(res.payload.data || [])
})
dispatch(getRoadMaintenances()).then(res =>{
dispatch(getRoadMaintenances()).then(res => {
setRoadMaintenances(res.payload.data || [])
})
dispatch(getxiuyang()).then(res => {
console.log(res);
// let obj = {};
setData(res.payload.data.filter(item => {
if (moment(item.maintenanceDate).format("MM") == (new Date().getMonth() < 10 ? "0" + new Date().getMonth() : new Date().getMonth())) {
return item
}
}))
setShuju(res.payload.data.filter(item => {
if ((new Date().getMonth() < 10 ? "0" + new Date().getMonth() : new Date().getMonth()) - 6 < moment(item.maintenanceDate).format("MM") && moment(item.maintenanceDate).format("MM") <= (new Date().getMonth() < 10 ? "0" + new Date().getMonth() : new Date().getMonth())) {
return item
}
}))
})
}, [])
console.log(shuju);
return (
<div style={{ width: '100%', height: '100%', }}>
<Left roadData={roadData} loading={loading} />
<Right highwaysData={highwaysData} roadMaintenances={roadMaintenances}/>
</div>
<div style={{ width: '100%', height: '100%', }}>
<Left roadData={roadData} loading={loading} data={data} shuju={shuju} />
<Right highwaysData={highwaysData} roadMaintenances={roadMaintenances} />
</div>
)
}
function mapStateToProps(state) {

4
web/client/src/sections/quanju/containers/footer/conserve/left.js

@ -4,11 +4,11 @@ import LeftCenter from './left/left-center'
import LeftTop from './left/left-top'
const Left = (props) => {
const { roadData, loading } = props
const { roadData, loading, data, shuju } = props
return (
<div style={{ position: 'absolute', left: 0, width: "23%", height: "100%", marginLeft: "1%" }}>
<LeftTop roadData={roadData} loading={loading} />
<LeftCenter roadData={roadData} loading={loading} />
<LeftCenter roadData={roadData} loading={loading} data={data} shuju={shuju} />
<LeftBottom roadData={roadData} loading={loading} />
</div>
)

10
web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js

@ -1,6 +1,7 @@
import React from 'react'
import Module from '../../../public/module'
import PieChart from '../chart/pie-chart';
import Lefttbottoms from "./Lb"
let color = [
"rgba(7,185,254,1)",
@ -28,13 +29,13 @@ const LeftBottom = (props) => {
}
})
let colorList = value?.map(c =>c.colorList)
let underColorList = value?.map(c =>c.underColorList)
let colorList = value?.map(c => c.colorList)
let underColorList = value?.map(c => c.underColorList)
return (
<>
<Module style={style} title={"已绿化里程统计"}>
<PieChart
{/* <PieChart
data={value}
width='100%'
height='100%'
@ -44,7 +45,8 @@ const LeftBottom = (props) => {
textLeft={'20%'}
numLeft={'14.5%'}
underColorList={underColorList}
/>
/> */}
<Lefttbottoms />
</Module>
</>
)

248
web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js

@ -1,239 +1,45 @@
import { Col, Row } from 'antd'
import React from 'react'
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import Module from '../../../public/module'
import * as echarts from 'echarts';
import ZheXian from "./zhexin"
import PieChart from "./shituzujian"
import Lunbo from './lunbo';
const LeftCenter = (props) => {
const { data, shuju } = props
const style = { height: "31%", marginTop: "3%" }
const chartRef = useRef(null);
const { roadData } = props
const data = roadData?.greenMileage || {}
const grad = Object.keys(data).map(g => g + '级可绿化里程') || []
const value = Object.values(data)?.map(s => s.canBeGreen.toFixed(3))
let totalData = value?.reduce((pre, cur) => Number(pre) + Number(cur), 0) || 0
let max = Math.max.apply(Math, value) + 10 || 0
useEffect(() => {
let chartInstance = echarts.init(chartRef.current);
let colorArray = [
{
top: "#07B9FE",
bottom: "#10274B",
},
{
top: "#1978E5",
bottom: " #10274B",
},
{
top: "#1978E5",
bottom: "#10274B",
},
];
const option = {
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: "{b}:{c}",
},
grid: {
left: "5%",
top: "12%",
right: "1%",
bottom: "8%",
width: '100%',
containLabel: true,
},
xAxis: {
type: "value",
show: true,
position: "bottom",
axisTick: {
show: true,
interval: 2,
lineStyle: {
color: "rgba(176,215,255,0.25)",
// type: "dashed",
},
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(216,240,255,0.8000)",
},
},
axisLabel: {
interval: 2
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(176,215,255,0.25)",
type: "dashed",
},
},
},
yAxis: [
{
type: "category",
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
splitLine: {
//网格线
show: false,
},
inverse: true, //排序
axisLine: {
show: false,
lineStyle: {
color: "rgba(176,215,255,0.8)",
},
},
zlevel: 100,
data: grad,
},
{
type: "category",
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
splitLine: {
//网格线
show: false,
},
axisLabel: {
show: true,
backgroundColor: {
image: '/assets/images/quanju/kelvhua_bdbg.png',
},
width: 70,
height: 22,
color: '#D8F0FF',
margin: 40,
verticalAlign: 'middle',
align: 'center',
textShadowColor: '#1AD0FF',
textShadowBlur: 6,
fontSize: 14
// formatter:(f) =>{console.log('f:',f);}
},
inverse: true, //排序
axisLine: {
show: false,
lineStyle: {
color: "rgba(176,215,255,0.8)",
},
},
data: value,
},
],
series: [
{
name: '背景',
type: "bar",
barWidth: 3,
barGap: "100%",
barCategoryGap: "50%",
color: "#15356E",
data: [max, max, max],
tooltip: {
show: false,
},
},
{
name: "",
type: "bar",
zlevel: 1,
barWidth: 3,
barGap: "-100%",
barCategoryGap: "50%",
data: value,
label: {
show: true,
position: 'right', // 位置
fontSize: 12,
lineHeight: 13,
distance: -2,
verticalAlign: "middle",
formatter: [
'{a| }',
].join(''), // 这里是数据展示的时候显示的数据
rich: {
a: {
backgroundColor: {
image: '/assets/images/quanju/circle2.png'
},
width: 15,
height: 15,
align: 'left',
verticalAlign: "center",
}
}
},
itemStyle: {
normal: {
show: true,
color: function (params) {
return {
type: "linear",
colorStops: [
{
offset: 0,
color: colorArray[params.dataIndex].bottom,
},
{
offset: 1,
color: colorArray[params.dataIndex].top,
},
],
// globalCoord: false,
};
},
barBorderRadius: 70,
borderWidth: 0,
borderColor: "#333",
},
},
emphasis: {
disabled: true //禁止移入柱子改变颜色
}
},
],
};
chartInstance.setOption(option);
window.addEventListener('resize', () => {
if (chartInstance) {
chartInstance.resize()
}
})
}, [roadData]);
// const chartRef = useState();
// const { roadData } = props
const [flag, setFlag] = useState(true)
return (
<>
<Module style={style} title={"可绿化里程统计"}>
<Row align='middle' style={{ padding: '10px 3% 0px 15px' }}>
<div onClick={() => {
setFlag(false)
console.log(flag);
}} style={{ position: "absolute", top: "38%", left: "80%", width: "50px", height: "20px", background: "linear-gradient(270deg, rgba(15,74,159,0) 0%, rgba(17,75,160,0.95) 100%)", float: "right", textAlign: "center", zIndex: 100, marginRight: "4%", borderLeft: "solid 2px #6E7A83" }} >
{/* <img /> */}
<p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px",/* position: "absolute", top: "0px" */ }}>累计</p></div>
<div onClick={() => {
setFlag(true)
console.log(flag);
}} style={{ position: "absolute", width: "50px", left: "60%", top: "38%", height: "20px", background: "linear-gradient(270deg, rgba(15,74,159,0) 0%, rgba(17,75,160,0.95) 100%)", float: "right", textAlign: "center", zIndex: 100, marginRight: "2%", borderLeft: "solid 2px #6E7A83", }}>
{/* <img /> */}
<p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px",/* position: "absolute", top: "0px" */ }} >本月</p></div >
{/* <Row align='middle' style={{ padding: '10px 3% 0px 15px' }}>
<Col span={15}>
<img src='/assets/images/quanju/kelvhua_icon.png' alt='icon' style={{ width: '26%' }} />
<span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span>
</Col>
<Col span={9} style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#fff', textShadow: '0px 0px 4px #07B9FE' }}>{totalData.toFixed(3) || 0}</Col>
</Row>
<div ref={chartRef} style={{ height: "14.5vh", width: "100%" }}></div>
</Row> */}
{/* <div ref={chartRef} style={{ height: "23vh", width: "100%" }}></div> */}
{/* <PieChart /> */}
{
flag ? <Lunbo data={data} /> : <ZheXian data={data} shuju={shuju} />
}
</Module>
</>
)

377
web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

@ -2,201 +2,202 @@ import React, { useEffect, useRef } from 'react';
import Module from '../../../public/module'
import * as echarts from 'echarts';
import { Badge, Spin } from 'antd';
import Leftbottom from "./lunbozujian"
const LeftTop = (props) => {
const seasonChartRef = useRef(null);
// const seasonChartRef = useRef(null);
const frequentlyChartRef = useRef(null);
const { roadData,loading } = props
let total = roadData?.curingPeriod?.frequent + roadData?.curingPeriod?.season
useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current);
const seasonOption = {
tooltip: {
show: true
},
title: [
{
text: "季节性",
x: "center",
top: "55%",
textStyle: {
color: "#E9F7FF",
fontSize: 14,
},
},
{
text: roadData?.curingPeriod?.season || 0,
x: "center",
y: "35%",
textStyle: {
fontSize: "30",
color: "#FFFFFF",
fontFamily: "YouSheBiaoTiHei",
},
},
],
polar: {
radius: ["60%", "68%"],
center: ["50%", "50%"],
},
grid: {
left: "5%",
top: "12%",
right: "1%",
bottom: "8%",
containLabel: true,
},
angleAxis: {
max: total || 0,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 30,
showBackground: true,
data: [{ value: roadData?.curingPeriod?.season || 0, name: '季节性' }],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#AAC8FF",
},
{
offset: 1,
color: "#0041BB",
},
]),
},
},
},
],
};
chartInstance.setOption(seasonOption);
window.addEventListener('resize', () => {
if (chartInstance) {
chartInstance.resize()
}
})
// const frequentlyChartRef = useRef(null);
// const { roadData, loading } = props
// let total = roadData?.curingPeriod?.frequent + roadData?.curingPeriod?.season
// useEffect(() => {
// let chartInstance = echarts.init(seasonChartRef.current);
// const seasonOption = {
// tooltip: {
// show: true
// },
// title: [
// {
// text: "季节性",
// x: "center",
// top: "55%",
// textStyle: {
// color: "#E9F7FF",
// fontSize: 14,
// },
// },
// {
// text: roadData?.curingPeriod?.season || 0,
// x: "center",
// y: "35%",
// textStyle: {
// fontSize: "30",
// color: "#FFFFFF",
// fontFamily: "YouSheBiaoTiHei",
// },
// },
// ],
// polar: {
// radius: ["60%", "68%"],
// center: ["50%", "50%"],
// },
// grid: {
// left: "5%",
// top: "12%",
// right: "1%",
// bottom: "8%",
// containLabel: true,
// },
// angleAxis: {
// max: total || 0,
// show: false,
// },
// radiusAxis: {
// type: "category",
// show: true,
// axisLabel: {
// show: false,
// },
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// },
// series: [
// {
// name: "",
// type: "bar",
// roundCap: true,
// barWidth: 30,
// showBackground: true,
// data: [{ value: roadData?.curingPeriod?.season || 0, name: '季节性' }],
// coordinateSystem: "polar",
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: "#AAC8FF",
// },
// {
// offset: 1,
// color: "#0041BB",
// },
// ]),
// },
// },
// },
// ],
// };
// chartInstance.setOption(seasonOption);
// window.addEventListener('resize', () => {
// if (chartInstance) {
// chartInstance.resize()
// }
// })
}, [roadData])
useEffect(() => {
let chartInstance = echarts.init(frequentlyChartRef.current);
// }, [roadData])
// useEffect(() => {
// let chartInstance = echarts.init(frequentlyChartRef.current);
const frequentlyOption = {
tooltip: {
show: true,
trigger: "item",
},
title: [
{
text: "经常性",
x: "center",
top: "55%",
textStyle: {
color: "#E9F7FF",
fontSize: 14,
},
},
{
text: roadData?.curingPeriod?.frequent || 0,
x: "center",
y: "35%",
textStyle: {
fontSize: "30",
color: "#FFFFFF",
fontFamily: "YouSheBiaoTiHei",
},
},
],
polar: {
radius: ["60%", "68%"],
center: ["50%", "50%"],
},
grid: {
left: "10%",
top: "12%",
right: "1%",
bottom: "8%",
width: '70%',
containLabel: true,
},
angleAxis: {
max: total || 0,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 30,
showBackground: true,
data: [{ value: roadData?.curingPeriod?.frequent || 0, name: '经常性' }],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#C5EFFF",
},
{
offset: 1,
color: "#07B9FE",
},
]),
},
},
},
// const frequentlyOption = {
// tooltip: {
// show: true,
// trigger: "item",
// },
// title: [
// {
// text: "经常性",
// x: "center",
// top: "55%",
// textStyle: {
// color: "#E9F7FF",
// fontSize: 14,
// },
// },
// {
// text: roadData?.curingPeriod?.frequent || 0,
// x: "center",
// y: "35%",
// textStyle: {
// fontSize: "30",
// color: "#FFFFFF",
// fontFamily: "YouSheBiaoTiHei",
// },
// },
// ],
// polar: {
// radius: ["60%", "68%"],
// center: ["50%", "50%"],
// },
// grid: {
// left: "10%",
// top: "12%",
// right: "1%",
// bottom: "8%",
// width: '70%',
// containLabel: true,
// },
// angleAxis: {
// max: total || 0,
// show: false,
// },
// radiusAxis: {
// type: "category",
// show: true,
// axisLabel: {
// show: false,
// },
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// },
// series: [
// {
// name: "",
// type: "bar",
// roundCap: true,
// barWidth: 30,
// showBackground: true,
// data: [{ value: roadData?.curingPeriod?.frequent || 0, name: '经常性' }],
// coordinateSystem: "polar",
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: "#C5EFFF",
// },
// {
// offset: 1,
// color: "#07B9FE",
// },
// ]),
// },
// },
// },
],
};
chartInstance.setOption(frequentlyOption);
window.addEventListener('resize', () => {
if (chartInstance) {
chartInstance.resize()
}
})
}, [roadData])
// ],
// };
// chartInstance.setOption(frequentlyOption);
// window.addEventListener('resize', () => {
// if (chartInstance) {
// chartInstance.resize()
// }
// })
// }, [roadData])
const style = { height: "31%", marginTop: "3%" }
return (
<Module style={style} title={"路段养护周期统计"}>
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<Module style={style} title={"路段养护周期统计"}>
{/* <div style={{ position: 'relative', width: '100%', height: '100%' }}>
<div style={{ width: '100%', height: '100%', display: 'flex', padding: '3%' }}>
<div ref={seasonChartRef} style={{ width: "50%" }}>
@ -216,8 +217,12 @@ const LeftTop = (props) => {
top: '66%',
zIndex: 999
}} />
</div>
</Module>
</div> */}
{/* <div style={{ height: "100%" }}> */}
<Leftbottom />
{/* </div> */}
</Module>
)
}
export default LeftTop

7
web/client/src/sections/quanju/containers/footer/conserve/left/lun.less

@ -0,0 +1,7 @@
.dian{
// width: 9.09%;
height: 100%;
// background-color: pink;
float: left;
}

193
web/client/src/sections/quanju/containers/footer/conserve/left/lunbo.js

@ -0,0 +1,193 @@
import React, { useEffect, useRef, useState } from 'react';
import Module from '../../../public/module'
import * as echarts from 'echarts';
import { Badge, Spin } from 'antd';
import Leftbottom from "./lunbozujian"
import PieChart from "./shituzujian"
import Lun from "./zidong"
import { back } from 'koa-convert';
import "./lun.less"
import { getxiugai } from "../action/index"
const Lunbo = (props) => {
const { data } = props
const style = { height: "31%", marginTop: "3%" }
const [list, setList] = useState([])
const [num, setNum] = useState({ value: 0 })
const [falg, setFalg] = useState(2)
const [state, setState] = useState([
{ value: data ? data[0].roadLengthCounty || 0 : 0, name: "县道" },
{ value: data ? data[0].roadLengthTownship || 0 : 0, name: "乡道" },
{ value: data ? data[0].roadLengthVillage || 0 : 0, name: "村道" }
])
const [mon, setMon] = useState([
{ value: data ? data[0].roadCostCounty || 0 : 0, name: "县费用" },
{ value: data ? data[0].roadCostTownship || 0 : 0, name: "乡费用" },
{ value: data ? data[0].roadCostVillage || 0 : 0, name: "村费用" }
])
const [lenght, setLenght] = useState(data ? data.length : "")
// useEffect(() => {
// dispatch(getxiugai()).then((res) => {
// console.log(res);
// })
// }, [])
console.log(data ? data : "");
const ref = useRef()
const renderBody = (num) => {
// data.map((item, index) => {
// switch (num) {
// case 1:
// setState([
// { value: 335, name: "直达" },
// { value: 679, name: "营销广告" },
// { value: 1548, name: "搜索引擎" },
// ])
// break
// case 2:
// setState([
// { value: 100, name: "直达" },
// { value: 1000, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 3:
// setState([
// { value: 200, name: "直达" },
// { value: 100, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 4:
// setState([
// { value: 3, name: "直达" },
// { value: 50, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 5:
// setState([
// { value: 888, name: "直达" },
// { value: 6, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 6:
// setState([
// { value: 123, name: "直达" },
// { value: 596, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 7:
// setState([
// { value: 100, name: "直达" },
// { value: 36, name: "营销广告" },
// { value: 0, name: "搜索引擎" },
// ])
// break
// case 8:
// setState([
// { value: 100, name: "直达" },
// { value: 5693, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 9:
// setState([
// { value: 3, name: "直达" },
// { value: 753, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 10:
// setState([
// { value: 121212, name: "直达" },
// { value: 23, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// case 11:
// setState([
// { value: 2563, name: "直达" },
// { value: 2, name: "营销广告" },
// { value: 20, name: "搜索引擎" },
// ])
// break
// default:
// break
// }
setState([{ value: data ? data[num].roadLengthCounty || 0 : 0, name: "县道" }, { value: data ? data[num].roadLengthTownship || 0 : 0, name: "乡道" }, { value: data ? data[num].roadLengthVillage || 0 : 0, name: "村道" }])
setMon([
{ value: data ? data[num].roadCostCounty || 0 : 0, name: "县费用" },
{ value: data ? data[num].roadCostTownship || 0 : 0, name: "乡费用" },
{ value: data ? data[num].roadCostVillage || 0 : 0, name: "村费用" }
])
}
// console.log("shuju", data, data?.length);
const timerStart = () => {
clearTimer()
ref.current = setTimeout(() => {
let n_num = { value: num.value + 1 }
if (num.value >= (data?.length - 1)) {
setNum({ value: 1 })
renderBody(1)
} else {
if (num.value == 1) {
renderBody(2)
} else {
renderBody(num.value + 1)
}
setNum(n_num)
console.log(num);
}
console.log(n_num);
console.log(num);
// renderBody(num.value)
}, 5000)
}
const dianji = (num) => {
renderBody(num)
}
useEffect(() => {
renderBody(0)
timerStart()
return () => {
clearTimer()
}
}, [num])
// renderBody(num.value)
const clearTimer = () => {
if (ref.current) {
clearTimeout(ref.current)
ref.current = null
}
}
console.log(num.value);
return (
<div onMouseOver={clearTimer}
onMouseOut={timerStart} >
<div></div>
<PieChart state={state} num={num.value} mon={mon} />
<div style={{ width: "90%", height: "1.5vh", backgroundColor: "rgba(176,215,255,0.12)", marginLeft: "5%", position: "absolute", bottom: "36%" }}>
{
data ? data.map((item, index) => {
return <div className='dian' style={{
width: (1 / data?.length) * 100 + "%",
// marginLeft: (100 / data ? data.lenght : 10) * index - (100 / data ? data.lenght : 10) + "%",
backgroundColor: num.value == index ? "rgba(25,138,229,0.4)" : "rgba(176,215,255,0.12)",
borderLeft: num.value == index ? "5px #0992FF solid" : "rgba(176,215,255,0.12)",
borderRight: num.value == index ? "5px #0992FF solid" : "rgba(176,215,255,0.12)"
}} onClick={() => {
setNum({ value: index })
dianji(index)
}}></div>
}) : ""
}
</div>
</div>
)
}
export default Lunbo

309
web/client/src/sections/quanju/containers/footer/conserve/left/lunbozujian.js

@ -0,0 +1,309 @@
import React, { useState, useEffect } from 'react'
import Module from '../../../public/module'
import { Spin } from 'antd'
import Lun from "../../leadership/right/lunbo"
import "../../leadership/right/left.less"
import { getZhichaolist } from "../../../../actions/example"
const Lefttbottom = (props) => {
// const { dispatch } = props
const style = { height: "28%", marginTop: "4%" }
const [beijing, setBeijing] = useState()
const [list, setList] = useState([{
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
}, {
deductPoints: "12",
fine: "2000",
id: 50364,
licensePlate: "苏L12345",
nameOfInspectionPoint: "才华无限",
overrunRate: 100,
processingTime: "2022.7.30",
testTime: "2022-07-29T00:00:00.000Z",
cun: "207.829",
xiang: "207.829",
xian: "207.829",
qiao: "12",
danwei: "蟹堡王章鱼哥海绵宝宝派大星"
},])
const [rightDatas, setrightDatas] = useState([])
const [nums, setNums] = useState([])
const [num, setNum] = useState()
// const requestRightDatas = async () => {
// const res = await dispatch(getZhichaolist())
// var pattern = /[\u4e00-\u9fa5]*/;
// let d = res.payload.data?.overSpeedList?.filter((item, index) => {
// return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false
// })
// console.log(res);
// d.map((item, index) => {
// if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) {
// return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}`
// }
// })
// d.sort((a, b) => b.processingTime.localeCompare(a.processingTime))
// // setrightDatas(res.payload.data)
// setList(d)
// }
// useEffect(() => {
// const zhichaolist = dispatch(getZhichaolist()).then((res) => {
// setNums(res.payload?.data?.processed)
// })
// requestRightDatas()
// }, [])
console.log(list);
const renderBody = () => {
return (
<div style={{ width: "100%", height: "50%" }}>
{list?.map((item, index) => {
return <li style={{ width: "100%", height: "3vh", marginTop: "5px", position: "relative", }} onMouseEnter={() => {
setBeijing(index)
setNum(index)
}} onMouseLeave={() => {
setBeijing()
setNum()
}}>
{beijing == index ? <img src='/assets/images/leadership/bei.png' style={{ width: "100%", height: "100%", position: "absolute" }} /> : ""}
<div style={{ width: "20%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "3%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{item.danwei}</div>
<div style={{ width: "15%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "23%" }}>{item.xian}</div>
<div style={{ width: "15%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "40%" }}>{item.xiang}</div>
<div style={{ width: "15%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "58%" }}>{item.cun}</div>
<div style={{ width: "15%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "76%" }}>{item.qiao}</div>
{/* {
num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "55%", marginTop: "0", top: "78%" }}>
<img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} />
<div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}>
<img src='/assets/images/leadership/yuanxing.png' style={{ width: "100%", height: "100%" }} />
<p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{item.overrunRate ? item.overrunRate + "%" : "--"}</p>
<p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p>
</div>
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
<p style={{ color: "rgba(216,240,255,0.8)", marginTop: "10px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.danwei}</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.xian}</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.xiang}</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.cun}</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.qiao}</span></p>
</div>
</div> : ""
} */}
</li>
})
}
</div>
)
}
return (
<>
<div style={{ width: "90%", height: "3vh", backgroundColor: "rgba(21,77,160,0.2)", position: "relative", left: "5%", top: "5%" }}>
<p style={{ width: "30%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "-3%" }}>管养责任单位</p>
<p style={{ width: "20%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "25%" }}>县道km</p>
<p style={{ width: "20%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "44%" }}>乡道km</p>
<p style={{ width: "20%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "63%" }}>村道km</p>
<p style={{ width: "20%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "82%" }}>桥梁</p>
</div>
<Lun
content={renderBody()}
containerStyle={{ position: "relative", height: "80%", width: "100%", left: "5%", top: "8%" }}
divHeight={"100%"}
divId={"screen-slope-midde-top"}
/>
</>
)
}
export default Lefttbottom

98
web/client/src/sections/quanju/containers/footer/conserve/left/shituzujian.js

@ -0,0 +1,98 @@
import React from 'react'
import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
const PieChart = (props) => {
const { width, height, data, colorList, underColorList, total, text, textLeft, numLeft, state, num, mon } = props
const chartRef = useRef(null);
let name = [], emptyName = []
useEffect(() => {
let chartInstance = echarts.init(chartRef.current);
const option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: "vertical",
right: "1%",
bottom: "15%",
// width: "260px",
formatter: [
'{a|{name}}'
].join('\n'),
textStyle: {
rich: {
a: {
width: 55,
fontSize: 12,
lineHeight: 12
}
},
},
}
,
series: [
{
name: "访问来源",
type: "pie",
// selectedMode: "single",
radius: [0, "40%"],
center: ['30%', '50%'],
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: state || 0,
},
{
name: "访问来源",
type: "pie",
radius: ["50%", "75%"],
center: ['30%', '50%'],
avoidLabelOverlap: false,
data: mon || 0,
label: {
normal: {
formatter: "{b}:{c}" + "\n\r" + "({d}%)",
show: false,
position: "left",
},
emphasis: {
show: false,
textStyle: {
fontSize: "30",
fontWeight: "bold",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
],
};
chartInstance.setOption(option);
window.addEventListener('resize', () => {
if (chartInstance) {
chartInstance.resize()
}
})
}, [num])
return (
<div style={{ width: width || '100%', height: height || '100%' }}>
<div ref={chartRef} style={{ width: '100%', height: '23vh' }}></div>
</div>
)
}
export default PieChart

272
web/client/src/sections/quanju/containers/footer/conserve/left/zhexin.js

@ -0,0 +1,272 @@
import React from 'react'
import { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import { Col, Row } from 'antd'
import moment from 'moment';
const ZheXian = (props) => {
const style = { height: "31%", marginTop: "3%" }
const chartRef = useState();
const { roadData, shuju } = props
const [flag, setFlag] = useState(true)
const [fles, setFles] = useState(true)
const [one, setOne] = useState()
const [two, setTwo] = useState()
const [san, setSan] = useState()
const [si, setSi] = useState()
const [five, setFive] = useState()
const [six, setSix] = useState()
useEffect(() => {
setOne(shuju?.filter(item => {
if (new Date().getMonth() - 5 == moment(item.maintenanceDate).format("MM")) {
return item
}
}))
setTwo(shuju?.filter(item => {
if (new Date().getMonth() - 4 == moment(item.maintenanceDate).format("MM")) {
return item
}
}))
setSan(shuju?.filter(item => {
if (new Date().getMonth() - 3 == moment(item.maintenanceDate).format("MM")) {
return item
}
}))
setSi(shuju?.filter(item => {
if (new Date().getMonth() - 2 == moment(item.maintenanceDate).format("MM")) {
return item
}
}))
setFive(shuju?.filter(item => {
if (new Date().getMonth() - 1 == moment(item.maintenanceDate).format("MM")) {
return item
}
}))
setSix(shuju?.filter(item => {
if (new Date().getMonth() == moment(item.maintenanceDate).format("MM")) {
return item
}
}))
}, [shuju])
useEffect(() => {
let chartInstance = echarts.init(chartRef.current);
// let colorArray = [
// {
// top: "#07B9FE",
// bottom: "#10274B",
// },
// {
// top: "#1978E5",
// bottom: " #10274B",
// },
// {
// top: "#1978E5",
// bottom: "#10274B",
// },
// ];
// let xData = (function () {
// var data = [];
// for (var i = 1; i < 13; i++) {
// data.push(i + "月份");
// }
// return data;
// })();
const option = {
// backgroundColor: "#344b58",
title: {
x: "4%",
textStyle: {
color: "#fff",
fontSize: "22",
},
subtextStyle: {
color: "#90979c",
fontSize: "16",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
formatter: function (params) { //在此处直接用 formatter 属性
// console.log(params) // 打印数据
var showdata = params[0];
// 根据自己的需求返回数据
return `
<div>时间12452</div>
<div>数据<a style="color: #00E8D7">12121</a>/</div>
`
}
},
grid: {
borderWidth: 0,
top: 50,
bottom: 20,
right: 20,
left: 60,
textStyle: {
color: "#fff",
},
},
legend: {
x: "60%",
top: "5%",
textStyle: {
color: "#90979c",
},
show: false,
// data: ["女", "男", "平均"],
},
calculable: true,
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "rgba(216,240,255,0.8)",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
},
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(176,215,255,0.2500)",
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "rgba(216,240,255,0.800)",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
splitArea: {
show: false,
},
},
],
series: [
{
name: "男",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0,213,255)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,213,255,0.2)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
barBorderRadius: 0,
},
},
data: [
1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298,
],
},
{
name: "总数",
type: "line",
symbolSize: 10,
symbol: "circle",
itemStyle: {
normal: {
color: "#1978E5",
barBorderRadius: 0,
label: {
show: true,
position: "top",
textStyle: {
color: "#D8F0FF",
},
formatter: function (p) {
return p.value > 0 ? p.value : "";
},
},
},
},
lineStyle: {
normal: {
width: 2,
color: "#1978E5",
},
},
data: flag ? [
1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298,
] : "",
},
],
};
chartInstance.setOption(option);
window.addEventListener('resize', () => {
if (chartInstance) {
chartInstance.resize()
}
})
}, [flag]);
console.log(one, "fdskafdlafl");
console.log(two, "fdskafdlafl");
console.log(san, "fdskafdlafl");
console.log(si, "fdskafdlafl");
console.log(five, "fdskafdlafl");
console.log(six, "fdskafdlafl");
return (
<div style={{ width: '100%' }}>
<div /* onClick={() => {
setFlag(!flag)
console.log(flag);
}} */ style={{ position: "absolute", top: "41%", left: "80%", width: "72px", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", zIndex: 100, marginRight: "4%", borderLeft: "solid 2px #6E7A83" }} >
<img />
<p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px", position: "absolute", top: "0px" }}>修建</p></div>
<div /* onClick={() => {
setFlag(false)
}} */style={{ position: "absolute", width: "72px", left: "55%", top: "41%", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", marginRight: "4%", borderLeft: "solid 2px #6E7A83" }}>
<img />
<p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px", position: "absolute", top: "0px" }} >改建</p></div >
<div ref={chartRef} style={{ width: '100%', height: '23vh' }}></div>
</div>
)
}
export default ZheXian

139
web/client/src/sections/quanju/containers/footer/conserve/left/zidong.js

@ -0,0 +1,139 @@
'use strict'
import React, { Component } from 'react';
import { Row, Col } from 'antd';
export default class AutoRollComponent extends Component {
constructor(props) {
super(props);
this.scrollElem = null;
this.stopscroll = false;
this.preTop = 0;
this.cloneEle = null;
this.currentTop = 0;
this.marqueesHeight = 0;
this.interval = null;
this.state = {
enabledScroll: false
}
}
get enabledScroll() {
let scrollElem = document.getElementById(this.props.divId);
let fatherElem = scrollElem?.parentNode || null;
if (scrollElem && fatherElem) {
return scrollElem.scrollHeight > fatherElem.scrollHeight
}
return false;
}
marque = (height) => {
try {
this.scrollElem = document.getElementById(this.props.divId);
this.marqueesHeight = height;
if (this.scrollElem) {
this.scrollElem.style.height = this.marqueesHeight;
this.scrollElem.style.overflow = 'hidden';
}
this.repeat();
} catch (e) { console.log(e) }
}
repeat = () => {
this.scrollElem.scrollTop = 0;
let offset = 1.5
this.interval = setInterval(() => {
if (this.stopscroll) return;
this.currentTop = this.currentTop + offset;
this.preTop = this.scrollElem.scrollTop;
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset;
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
if (this.preTop === this.scrollElem.scrollTop) {
this.scrollElem.scrollTop = this.marqueesHeight;
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset;
}
}, 40);
}
componentWillUnmount() {
clearInterval(this.interval);
}
componentWillReceiveProps(nextProps) {
requestAnimationFrame(() => {
if (this.enabledScroll) {
if (!this.state.enabledScroll) {
this.setState({ enabledScroll: true }, () => {
this.marque(10)
})
}
}
})
}
componentDidMount() {
if (this.enabledScroll) {
this.setState({ enabledScroll: true }, () => {
this.marque(10)
})
}
}
onMouseOver = () => {
this.stopscroll = true;
}
onMouseOut = () => {
this.stopscroll = false;
}
render() {
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props;
return (
<div style={{ ...containerStyle, textAlign: 'left' }}>
{
heads ?
<Row style={{ lineHeight: '40px', height: 40 }}>
{heads.map((c, index) => {
return <Col span={spans[index]} key={index}>{c}</Col>
})
}
</Row> : ''
}
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<div>
{content ? content : ''}
{this.state.enabledScroll && content ? content : ''}
{
data ?
data.map((q, idx) => {
return (
<div key={idx}>
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}>
{heads.map((c, index) => {
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}>
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col>
})
}
</Row>
</div>
)
}) : ''
}
<div style={{ margin: 16 }}></div>
</div>
</div>
</div >
)
}
}

2
web/client/src/sections/quanju/containers/footer/index.js

@ -13,7 +13,7 @@ const Footer = ({ tabKey, dispatch }) => {
case 'build':
return <Build />
case 'conserve':
return <Conserve />
return <Conserve dispatch={dispatch} />
case "leadership":
return <Leadership dispatch={dispatch} />
case "guanli":

1
web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js

@ -4,6 +4,7 @@ import { getRoadmaintain, getdaolutongji } from "../../../../actions/example"
import moment from 'moment'
import Hua from "./hudong"
import { Spin } from 'antd'
import Lunbo from "../right"
const Right = (props) => {
const { dispatch } = props

184
web/client/src/sections/quanju/containers/footer/leadership/centerleft/huadong.js

@ -0,0 +1,184 @@
import React, { Component } from 'react';
import './left.less';
class ReactCarousel extends Component {
chunk(arr, size) {
var arr1 = new Array();
for (var i = 0; i < Math.ceil(arr.length / size); i++) {
arr1[i] = new Array();
}
var j = 0;
var x = 0;
for (var i = 0; i < arr.length; i++) {
if (!((i % size == 0) && (i != 0))) {
arr1[j][x] = arr[i];
x++;
// console.log("j=" + j + " " + "x=" + x);
} else {
j++;
x = 0;
// console.log("else:" + "j=" + j + " " + "x=" + x);
arr1[j][x] = arr[i];
// console.log(arr1);
x++;
}
}
return arr1;
}
constructor() {
super();
this.state = {
shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }],
imgs: [],
showIndex: 0, //显示第几个图片
timer: null, // 定时器
show: false, // 前后按钮显示
// arr1: ""
}
// console.log(this.state.imgs);
this.state.imgs = this.chunk((this.state.shuzu), 4)
}
render() {
return (
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
<div className="contain"
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
>
<ul className="ul">
{
this.state.imgs.map((value, index) => {
return (
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''}
key={index}
>
<div style={{ width: "45%", height: "40%", backgroundColor: "red", position: "absolute", left: "-3%", top: "5%" }}>
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value[0]?.name}
</div>
</div>
</div>
{value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "#fff", position: "absolute", left: "45%", top: "5%" }}>
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value[1]?.name}
</div>
</div>
</div> : ""}
{value[2]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "bule", position: "absolute", left: "-3%", top: "49%" }}>
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value[2]?.name}
</div>
</div>
</div> : ""}
{value[3]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "pink", position: "absolute", left: "45%", top: "49%" }}>
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value[3]?.name}
</div>
</div>
</div> : ""}
{/* <div>{value[1].name}</div>
<div>{value[2].name}</div>
<div>{value[3].name}</div> */}
</li>
)
})
}
</ul>
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}>
{
this.state.imgs.map((value, index) => {
return (
<li key={index}
className={index === this.state.showIndex ? 'active' : ''}
onClick={() => { this.change(index) }}>
</li>)
})
}
</ul> */}
<div className="control" style={{ width: "100%", height: "10%" }}>
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}>
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} />
</span>
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}>
<img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} />
</span>
</div>
</div>
</div>
)
}
componentDidMount() { //一开始自动播放
this.start();
}
componentWillUnmount() { //销毁前清除定时器
this.stop();
}
stop = () => { //暂停
let { timer } = this.state;
clearInterval(timer);
}
start = () => { //开始
let { timer } = this.state;
timer = setInterval(() => {
this.next();
}, 300000);
this.setState({
timer
})
}
change = (index) => { //点击下面的按钮切换当前显示的图片
let { showIndex } = this.state;
showIndex = index;
this.setState({
showIndex
})
}
previous = (e) => { //上一张
let ev = e || window.event;
let { showIndex, imgs } = this.state;
if (showIndex <= 0) {
showIndex = imgs.length - 1;
} else {
showIndex--;
}
this.setState({
showIndex
})
}
next = (e) => { //下一张
let ev = e || window.event;
let { showIndex, imgs } = this.state;
if (showIndex >= imgs.length - 1) {
showIndex = 0;
} else {
showIndex++;
}
this.setState({
showIndex
})
}
}
export default ReactCarousel;

98
web/client/src/sections/quanju/containers/footer/leadership/centerleft/left.less

@ -0,0 +1,98 @@
li{
list-style-type:none
}
.wy-rightTop{
.ant-select-selector, .ant-select-selection-placeholder{
background-color:#011f59 !important;
border:#1E7BD6 1px solid !important;
font-family: PingFangSC-Regular, PingFang SC !important;
height: 25px !important;
// line-height: 25px !important;
}.ant-select-selection-item{
line-height: 25px !important;
}
.anticon{
color: #fff !important;
}
}
.contain {
position: relative;
top: 5%;
left: 45%;
width: 100%;
height: 100%;
transition: all 30s;
transform: translateX(-50%);
color: #fff;
overflow: hidden;
cursor: pointer;
}
.contain .ul {
height: 100%;
list-style: none;
}
.contain .ul .items {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.ul li.show{
display: block;
}
.ul li {
display: none;
}
.ul li img {
width: 100%;
height: 100%;
}
.contain .dots {
position: absolute;
left: 50%;
bottom: 30px;
height: 10px;
transform: translateX(-50%);
}
.dots li {
float: left;
width: 10px;
height: 10px;
margin: 0px 5px;
border-radius: 50%;
transition: all .3s;
// background-color: antiquewhite;
list-style: none;
}
// .dots li.active {
// background-color: blue;
// }
.control .left {
position: absolute;
top: 80%;
left: 85%;
// padding: 5px;
// transform: translateY(-50%);
width: 20px;
height: 50px;
font-size: 20px;
cursor: pointer;
}
// .control .left:hover {
// background-color: #000000,
// }
.control .right {
position: absolute;
top: 80%;
right: 3%;
// padding: 5px;
// transform: translateY(-50%);
font-size: 20px;
cursor: pointer;
}
// .control .right:hover {
// background-color: rgba(0, 0, 0, .3);
// }

2
web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js

@ -36,7 +36,7 @@ const Rightbottom = (props) => {
})
requestRightDatas()
}, [])
// console.log(list);
console.log(list);
const renderBody = () => {
return (
<div style={{ width: "100%", height: "50%" }}>

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

@ -101,6 +101,8 @@ export const ApiTable = {
//公交信息
getCircuit: 'bus/line', putCircuit: 'bus/line', delCircuit: 'bus/line/{lineId}',
getVehicle: 'bus/car', putVehicle: 'bus/car', delVehicle: 'bus/car/{carId}',
// 获取本月修养护公里数
getXiuyang: "road/maintenance/cost/query",

65625
web/log/development.txt

File diff suppressed because it is too large

15319
web/package-lock.json

File diff suppressed because it is too large

2
web/package.json

@ -6,7 +6,7 @@
"scripts": {
"test": "mocha",
"start": "cross-env NODE_ENV=development npm run start-params",
"start-params": "node server -p 5000 -u http://localhost:14000 --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
"start-params": "node server -p 5000 -u http://localhost:14000 --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
"deploy": "export NODE_ENV=production&&npm run color && npm run build && node server",
"build-dev": "export NODE_ENV=development&&webpack --config webpack.config.js",
"build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js",

Loading…
Cancel
Save