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