17 changed files with 16887 additions and 353 deletions
@ -0,0 +1,76 @@ |
|||||
|
[33m2adac9cb[m[33m ([m[1;36mHEAD -> [m[1;32mdev[m[33m)[m HEAD@{0}: reset: moving to HEAD^^^ |
||||
|
[33me5135673[m[33m ([m[1;31morigin/dev_backup[m[33m)[m HEAD@{1}: reset: moving to HEAD^^ |
||||
|
[33m020d4eda[m[33m ([m[1;31morigin/dev[m[33m)[m HEAD@{2}: reset: moving to HEAD |
||||
|
[33m020d4eda[m[33m ([m[1;31morigin/dev[m[33m)[m HEAD@{3}: reset: moving to HEAD |
||||
|
[33m020d4eda[m[33m ([m[1;31morigin/dev[m[33m)[m HEAD@{4}: commit: 12151 |
||||
|
[33md13b52a9[m HEAD@{5}: reset: moving to HEAD |
||||
|
[33md13b52a9[m HEAD@{6}: pull --tags origin dev: Fast-forward |
||||
|
[33m2d649d8e[m HEAD@{9}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m1a9dd433[m HEAD@{10}: commit: 清除log |
||||
|
[33ma9d12cd8[m HEAD@{11}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m8573588e[m HEAD@{12}: commit: 五分钟刷新 |
||||
|
[33m39b8e12b[m HEAD@{13}: pull --tags origin dev: Fast-forward |
||||
|
[33m6aba4d7a[m HEAD@{14}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m2e6dc29a[m HEAD@{15}: commit: 提交 |
||||
|
[33m283a16ae[m HEAD@{16}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m590ec5dd[m HEAD@{17}: commit: 提交 |
||||
|
[33m8eb418ae[m HEAD@{19}: commit: 日期去掉了日，加上了百分号 |
||||
|
[33mbf01c153[m HEAD@{20}: commit: 提交 |
||||
|
[33m76ad089b[m HEAD@{21}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m45f58fda[m HEAD@{22}: commit: 代码提交 |
||||
|
[33md9079d38[m HEAD@{23}: commit: 提交日期处理 |
||||
|
[33m8e0048ac[m HEAD@{24}: pull --tags origin dev: Fast-forward |
||||
|
[33mc1607d94[m HEAD@{25}: pull --tags origin dev: Fast-forward |
||||
|
[33m670dcf18[m HEAD@{26}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33mec02aeb9[m HEAD@{27}: commit: nan优化 |
||||
|
[33m974e3c67[m HEAD@{28}: commit: 换成定位了 |
||||
|
[33ma61dc4e9[m HEAD@{29}: pull --tags origin dev: Fast-forward |
||||
|
[33md77627f9[m HEAD@{30}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m01ef6b5a[m HEAD@{31}: commit: 柱体问题解决 |
||||
|
[33me9424d3e[m HEAD@{32}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33mc276432d[m HEAD@{33}: commit: 样式和颜色提交 |
||||
|
[33m45c415e6[m[33m ([m[1;31morigin/release_0.0.4[m[33m)[m HEAD@{34}: pull --tags origin dev: Fast-forward |
||||
|
[33m79723f61[m HEAD@{35}: commit: 线条 |
||||
|
[33m9c81764c[m HEAD@{36}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m3f398ea2[m HEAD@{37}: commit: 提交bug |
||||
|
[33m502b068d[m HEAD@{38}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m7a5b8b64[m HEAD@{39}: commit: 提交 |
||||
|
[33maeff1fe5[m HEAD@{40}: commit: 路由修改 |
||||
|
[33m11da9451[m HEAD@{41}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33med7ab5a8[m HEAD@{42}: commit: 完成 |
||||
|
[33m06063067[m HEAD@{43}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m755a333f[m HEAD@{44}: commit: 接口调用 |
||||
|
[33m2b153823[m HEAD@{45}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33mf0558530[m HEAD@{46}: commit: 路政统计 |
||||
|
[33m50eb042e[m HEAD@{47}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33ma1dfeddb[m HEAD@{48}: commit: 提交鼠标移出事件 |
||||
|
[33m5469d9df[m HEAD@{49}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
||||
|
[33m49a0b5d7[m HEAD@{50}: commit: 提交 |
||||
|
[33m11279671[m HEAD@{51}: commit: 提交领导驾驶舱 |
||||
|
[33m3919e2c3[m HEAD@{52}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33mb9302fdf[m HEAD@{53}: commit: 提交代码 |
||||
|
[33m79328f49[m HEAD@{54}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
||||
|
[33mc6a3b352[m HEAD@{55}: commit: 提交样式 |
||||
|
[33m14ed5747[m HEAD@{56}: pull --tags origin dev: Fast-forward |
||||
|
[33m80e11974[m HEAD@{57}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33ma561e62b[m HEAD@{58}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
||||
|
[33m163ce6c1[m HEAD@{59}: commit: 提交left.less的更改 |
||||
|
[33m4de26fc7[m HEAD@{60}: pull: Fast-forward |
||||
|
[33m4a1ae175[m HEAD@{61}: pull --tags origin dev: Fast-forward |
||||
|
[33me7a01d52[m HEAD@{62}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
||||
|
[33mc7e7cd4c[m HEAD@{63}: commit: 提交领导驾驶舱 |
||||
|
[33mfc3f2a92[m HEAD@{64}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
||||
|
[33mf166aa29[m HEAD@{65}: commit: 领导驾驶舱提交代码 |
||||
|
[33me6030bcf[m HEAD@{66}: commit: 上传 |
||||
|
[33mb299cd97[m HEAD@{67}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m69e7f3b6[m HEAD@{68}: commit: 删除冗余，提交 |
||||
|
[33ma74afb8f[m HEAD@{69}: commit: 文件 |
||||
|
[33m68c13e99[m HEAD@{70}: commit: 文件上传 |
||||
|
[33mdacf49b4[m HEAD@{71}: commit: 文件上传 |
||||
|
[33m1190cc0d[m HEAD@{72}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
||||
|
[33m0c57a227[m HEAD@{73}: commit: 头部样式完成 |
||||
|
[33m8ab4f5f2[m HEAD@{74}: pull --tags origin dev: Merge made by the 'ort' strategy. |
||||
|
[33m50714cbf[m HEAD@{75}: commit: 公共组件图标样式修改 |
||||
|
[33m34413ac0[m HEAD@{76}: commit: test |
||||
|
[33meee5aedf[m HEAD@{77}: commit: test |
||||
|
[33mcbdfefa3[m[33m ([m[1;32mmaster[m[33m)[m HEAD@{79}: clone: from https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good.git |
||||
@ -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); |
||||
@ -0,0 +1,7 @@ |
|||||
|
.dian{ |
||||
|
// width: 9.09%; |
||||
|
height: 100%; |
||||
|
|
||||
|
// background-color: pink; |
||||
|
float: left; |
||||
|
} |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 > |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -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; |
||||
@ -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); |
||||
|
// } |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue