free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

展示所有的车的点位的弹框信息 增加搜索

dev
巴林闲侠 1 year ago
parent
4d93d90500
commit
25cacae4d9
6 changed files with 243 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/client/src/sections/fillion/actions/infor.js
  2. 2
      web/client/src/sections/quanju/containers/footer/build/Rightcenter.js
  3. 123
      web/client/src/sections/quanju/containers/footer/build/index.js
  4. 8
      web/client/src/sections/quanju/containers/footer/build/style.less
  5. 214
      web/client/src/sections/quanju/containers/footer/operation/right.js
  6. 28
      web/client/src/sections/quanju/containers/public/olMap.js

2
web/client/src/sections/fillion/actions/infor.js
View File

@ -142,7 +142,7 @@ export function getProject(query) {
actionType: 'GET_PROJECT',
url: ApiTable.getProject,
msg: { error: '获取工程信息失败' },
reducer: { name: 'projectList' }
});
}
export function putProject(query) {

2
web/client/src/sections/quanju/containers/footer/build/Rightcenter.js
View File

@ -27,7 +27,6 @@ const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 14
const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)"
let TOTALS = data?.map(({ name, total }, index) => {
let max = Math.max(...data.map(item=>item.total))
// console.log(data.map(item=>item.total),'好朋友吗')
return {
name,
value: total,
@ -38,7 +37,6 @@ let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS
function Cell(props) {
const { name, rank, value, percent, style = {},cebg } = props
let bg = RNAKS[rank] || OTHER
// console.log(percent,'百分比')
return <div style={{
width: "100%", height: 34, display: "flex", justifyContent: 'center',
alignItems: "center", marginTop: 7, marginBottom: 7,

123
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -13,9 +13,11 @@ import AutoRollComponent from './AutoRollComponent'
import './style.less'
import { getdaolutongji, getxuanchuan } from '../../../actions/example'
import { Carousel } from 'antd';
import { getProject } from '../../../../fillion/actions/infor'
// import { number } from 'echarts';
const Build = (props) => {
const { dispatch } = props
const { dispatch, projectList } = props
let data1 = [
{ name: "县", value: 207 },
{ name: "乡", value: 729 },
@ -26,8 +28,6 @@ const Build = (props) => {
// {name: '二级公路', value: 17},
// {name: '三级公路', value: 17},
// {name: '四级公路', value: 30},
// ]
const [buildingnumber, setbuildingnumber] = useState(0)
const [data, setdata] = useState([])
@ -43,22 +43,17 @@ const Build = (props) => {
const requestbuildingnumber = async () => {
const res = await dispatch(getdaolutongji());
let alltype = Object.keys(res.payload.data?.roadType || {}).map((item) => ({ name: item, value: Number(keepThreeNum(res.payload.data.roadType[item])) }))
// console.log(alltype,'打他啊')
setdata(alltype.filter(item => item.name === '县' || item.name === "乡" || item.name === '村'))
setbuildingnumber(res.payload.data)
console.log(res.payload.data, '哈哈哈')
}
//获取宣传栏数据
const requestxuanchuanlan = async () => {
const res = await dispatch(getxuanchuan());
// setdata(alltype.filter(item=>item.name!=='null'))
setxuandata(res.payload.data || [])
console.log(res.payload.data, '宣传栏数据')
}
let t1 = Object.values(buildingnumber?.townRoad || {})
let totalgongli = t1.length !== 0 ? t1.reduce((x, y) => x + y.mileage, 0) : 0 //乡镇道路占比总公里数
@ -86,7 +81,6 @@ const Build = (props) => {
return b.number - a.number
})
list = list.filter(item => item.name !== "其他")
// console.log(list,'红红火')
//道路等级数据
let alldengji = Object.keys(buildingnumber?.roadLevel || {}).map((item) => ({ name: item, value: Number(keepThreeNum(buildingnumber.roadLevel[item])) }))
@ -95,10 +89,8 @@ const Build = (props) => {
onlineproject = onlineproject.sort((a, b) => {
return b.total - a.total
})
//console.log('onlineproject', onlineproject)
let sunonlineproject = onlineproject?.reduce((x, y) => x + y.total, 0)
let buildingCount = buildingnumber?.buildingCount
//console.log('projectAll', projectAll)
//let projectAll=
let safetyData = alldengji?.filter(item => item.name === '一级公路' || item.name === '二级公路' || item.name === '三级公路' || item.name === '四级公路' || item.name === '等外公路')
let sundata = data?.reduce((x, y) => x + y.value, 0)
@ -107,10 +99,13 @@ const Build = (props) => {
useEffect(() => {
requestbuildingnumber();
requestxuanchuanlan()
dispatch(getProject())
}, [])
useEffect(() => {
lunbo.current.goTo(lunboindex)
}, [lunboindex])
const rendercontent = () => {
return (<div className='build-left-center-content'>
{list.map(({ name, number, gongli }, index) => <div className='build-left-center-item' key={index}>
@ -128,8 +123,6 @@ const Build = (props) => {
// "enable": true
// }
// ]
// console.log(localStorage.getItem("qndmn"), '七牛')
// console.log(xuandata, "宣传")
let videos = []
if (xuandata && xuandata.length) {
@ -143,7 +136,7 @@ const Build = (props) => {
}
}
}
console.log(lunboindex)
return (
<>
<div className='bgbuild-left'>
@ -174,35 +167,75 @@ const Build = (props) => {
</div> : <NoData />}
</div>
</Module>
<Module title={"各乡镇现有道路统计"} style={{
{/* <Module title={"各乡镇现有道路统计"} style={{
width: "100%",
height: " 33%", marginTop: '3%'
}} customize={true}>
{totalcount && totalcount !== 0 ? <div className='build-left-center'>
<div className='build-left-center-top'>
<div>
<img src='/assets/images/quanju/gonglugongli.png'></img>
<div>
<span>公路公里数/公里</span>
<span>{keepThreeNum(totalgongli)}</span>
{
totalcount && totalcount !== 0 ?
<div className='build-left-center'>
<div className='build-left-center-top'>
<div>
<img src='/assets/images/quanju/gonglugongli.png'></img>
<div>
<span>公路公里数/公里</span>
<span>{keepThreeNum(totalgongli)}</span>
</div>
</div>
<div>
<img src='/assets/images/quanju/gongluzong.png'></img>
<div>
<span>公路总数/条</span>
<span>{totalcount || 0}</span>
</div>
</div>
</div>
<div className='build-left-center-titile'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<AutoRollComponent content={rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
divHeight={"100%"} divId={"chart"} />
</div>
<div>
<img src='/assets/images/quanju/gongluzong.png'></img>
<div>
<span>公路总数/条</span>
<span>{totalcount || 0}</span>
: <NoData />
}
</Module> */}
<Module title={"在建项目列表"} style={{
width: "100%",
height: " 33%", marginTop: '3%'
}} customize={true}>
{
totalcount && totalcount !== 0 ?
<div className='build-left-center' style={{ padding: 12 }}>
<div className='build-left-center'>
<div className='build-left-center-titile'>
<span>项目名称</span>
<span>项目规模(公里)</span>
<span>项目投资(万元)</span>
</div>
<AutoRollComponent content={
<div className='build-left-center-content'>
{
projectList.map((p, index) => {
return (
<div className='build-left-center-item' key={index}>
<span className='ellipsis' title={p.entryName}>{p.entryName}</span>
<span>{p.projectMileage}</span>
<span>{p.investment}</span>
</div>
)
})
}
</div>
}
containerStyle={{ position: "relative", height: "85%", }}
divHeight={"100%"} divId={"chart"}
/>
</div>
</div>
</div>
<div className='build-left-center-titile'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<AutoRollComponent content={rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
divHeight={"100%"} divId={"chart"} />
</div> : <NoData />}
: <NoData />
}
</Module>
<Module title={"道路统计"} style={{
width: "100%",
@ -231,17 +264,13 @@ const Build = (props) => {
<Carousel dots={false} ref={lunbo} key={lunboindex}>
{/* {
videos.map((v, i) => {
console.log('first')
return i == lunboMsg.current.index ?
<video src={`${localStorage.getItem("qndmn")}/${v}`} key={Math.random()} autoPlay={i == lunboMsg.current.index} onEnded={() => {
console.log('end', i + 1, videos.length)
if (i == videos.length - 1) {
setlunboindex(0)
lunboMsg.current.index = 0
lunbo.current.goTo(1)
} else {
console.log('first222', i + 1)
setlunboindex(i + 1)
lunboMsg.current.index = i + 1
lunbo.current.next()
@ -256,23 +285,16 @@ const Build = (props) => {
if (item.video && item.video !== null && item.video.length !== 0) {
return item.video.map((i, index) => {
// console.log(i,'视频')
console.log(index1, 'index1')
if (index1 === lunboindex) {
// lunbo.current.goTo(lunboindex)
console.log("自动播放", index1)
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={true} ref={lunbovideo} onEnded={() => {
if (index1 < xuandata.filter(i => i.enable).length - 1) {
// console.log(index1,xuandata,'触发了')
setlunboindex(lunboindex + 1)
} else {
// console.log(index1,xuandata,'触发了')
setlunboindex(0)
}
}}></video>
} else {
// console.log("不自动播放",index1)
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={false} ></video>
}
})
@ -307,8 +329,8 @@ const Build = (props) => {
</>
)
}
function mapStateToProps(state) {
const { auth, depMessage } = state;
function mapStateToProps (state) {
const { auth, depMessage, projectList } = state;
const pakData = (dep) => {
return dep.map((d) => {
return {
@ -325,6 +347,7 @@ function mapStateToProps(state) {
depMessage: depMessage.data || [],
depLoading: depMessage.isRequesting,
depData,
projectList: projectList.data || []
};
}
export default connect(mapStateToProps)(Build);

8
web/client/src/sections/quanju/containers/footer/build/style.less
View File

@ -158,6 +158,14 @@
height: 28px;
align-items: center;
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 144px;
display: inline-block;
}
&:hover {
background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
}

214
web/client/src/sections/quanju/containers/footer/operation/right.js
View File

@ -1,71 +1,151 @@
import React, { useState } from 'react'
import { Carousel } from 'antd';
import { Carousel, Input } from 'antd';
import Module from '../../public/module'
import AutoRollComponent from '../build/AutoRollComponent'
import { useEffect } from 'react';
import { connect } from 'react-redux';
import { busWillRun } from '../../public/olMap'
const Right = () => {
const [dataLists, setDataList] = useState([
{
route: '147',
plate: '赣APJ090'
}, {
route: '166',
plate: '赣APJ087'
}, {
route: '171',
plate: '赣APJ184'
}, {
route: '186',
plate: '赣APJ241'
}, {
route: '199',
plate: '赣APJ337'
}
])
const style = { height: "97%", marginTop: "3%" }
return (
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}>
<Module style={style} customize={true} title={"车辆视频监控"}>
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}>
<Carousel
autoplay
infinite
autoplaySpeed={300000}
vertical={true}
slidesToShow={4}
>
{
dataLists.map((data, index) => (
<div key={index} style={{ width: '100%', height: '40%' }}>
<div className='busInformation'>
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} />
<span>
<h3>所属线路</h3>
<h4>{data.route}</h4>
<h3>车辆牌照号</h3>
<h5>{data.plate}</h5>
</span>
</div>
<div className='busVideo'>
<div style={{
width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
border: '1px solid #1C60FE'
}}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div>
<div style={{
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
border: '1px solid #1C60FE'
}}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div>
<div style={{
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
border: '1px solid #1C60FE'
}}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div>
</div>
</div>
))
}
</Carousel>
</div>
</Module>
</div>
)
let queryTimeout = null
const Right = ({ busRunTime }) => {
const [dataLists, setDataList] = useState([
{
route: '147',
plate: '赣APJ090'
}, {
route: '166',
plate: '赣APJ087'
}, {
route: '171',
plate: '赣APJ184'
}, {
route: '186',
plate: '赣APJ241'
}, {
route: '199',
plate: '赣APJ337'
}
])
const [busRunTimeList, setBusRunTimeList] = useState(busRunTime)
const [queryStr, setQueryStr] = useState('')
useEffect(() => {
setBusRunTimeList(
queryStr ?
busRunTime.filter(b => {
return b?.busNoChar?.indexOf(queryStr) > -1
})
: busRunTime
)
}, [queryStr, busRunTime])
const style = { height: "97%", marginTop: "3%" }
return (
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}>
<Module style={style} customize={true}
// title={"车辆视频监控"}
title={"公交运营信息"}
>
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}>
<div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }}>
<img src='/assets/images/quanju/search.png' style={{ width: '5%', margin: '0 1.5% 1% 3.5%' }} />
<Input
style={{
width: '90%',
background: 'none',
backgroundColor: 'none',
color: 'rgba(216, 240, 255, 0.8)',
border: 'none',
boxShadow: 'none',
}}
placeholder="请输入车牌号"
onChange={(e) => {
if (queryTimeout) {
clearTimeout(queryTimeout)
}
queryTimeout = setTimeout(() => {
setQueryStr(e.target.value)
}, 600)
}}
/>
</div>
<Carousel
autoplay
infinite
// autoplaySpeed={300000}
autoplaySpeed={1000 * 3}
vertical={true}
slidesToShow={4}
>
{
busRunTimeList.map((b, i) => {
return (
<div key={index} style={{ width: '100%', height: '40%' }}>
<div className='busInformation'>
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} />
<span>
<h3>车辆牌照</h3>
<h5>{d.busNoChar}</h5>
<h3>调度状态</h3>
<h4>{busWillRun.find(w => w.value == d.willRun)?.text || '--'}</h4>
</span>
<span>
<h3>发车时间</h3>
<h4>{d.lastDepTime}</h4>
</span>
<span>
<h3>司机</h3>
<h5>{d.employeeName}</h5>
<h3>工号</h3>
<h4>{d.opNo}</h4>
</span>
</div>
</div>
)
})
}
{/* {
dataLists.map((data, index) => (
<div key={index} style={{ width: '100%', height: '40%' }}>
<div className='busInformation'>
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} />
<span>
<h3>所属线路</h3>
<h4>{data.route}</h4>
<h3>车辆牌照号</h3>
<h5>{data.plate}</h5>
</span>
</div>
<div className='busVideo'>
<div style={{
width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
border: '1px solid #1C60FE'
}}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div>
<div style={{
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
border: '1px solid #1C60FE'
}}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div>
<div style={{
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
border: '1px solid #1C60FE'
}}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div>
</div>
</div>
))
} */}
</Carousel>
</div>
</Module>
</div>
)
}
export default Right
function mapStateToProps (state) {
const { busRunTime, } = state;
return {
busRunTime: busRunTime.data || [],
};
}
export default connect(mapStateToProps)(Right);

28
web/client/src/sections/quanju/containers/public/olMap.js
View File

@ -5,9 +5,21 @@ import Hua from '../footer/leadership/centerleft/hudong'
import moment from 'moment';
import { OlMapRequest } from '$utils'
export const busWillRun = [
{ text: '非运营', value: '0' },
{ text: '运营', value: '1' },
{ text: '维修', value: '2' },
{ text: '保养', value: '3' },
{ text: '专车', value: '4' },
{ text: '机动车', value: '5' },
{ text: '包车', value: '6' },
{ text: '班车', value: '7' },
{ text: '检车', value: '8' },
]
const OlMap = (props) => {
const { dispatch, actions, user, olMapArcgisHost, olMapGeoDataHost, patrolList, roadProjectList, tab, busRunTime, busLine } = props
console.log(patrolList)
const [olMapOpenData, setOlMapOpenData] = useState([])
const [olMap, setOlMap] = useState()
const [pointItem, setPointItem] = useState({})
@ -188,7 +200,6 @@ const OlMap = (props) => {
positioning: 'top-right'
})
// 请求路线坐标
console.log(d.code_road);
if (d.code_road) {
let codeMap = {
x: 'gpsxd',
@ -205,7 +216,6 @@ const OlMap = (props) => {
})
.then(res => {
if (res.status == 200 && res.body && res.body.code == 1) {
console.log(res);
const data = res.body.data
const { datalist } = data
if (datalist?.list?.length) {
@ -365,17 +375,7 @@ const OlMap = (props) => {
}, {
n: '调度状态',
v: d.willRun,
map: [
{ text: '非运营', value: '0' },
{ text: '运营', value: '1' },
{ text: '维修', value: '2' },
{ text: '保养', value: '3' },
{ text: '专车', value: '4' },
{ text: '机动车', value: '5' },
{ text: '包车', value: '6' },
{ text: '班车', value: '7' },
{ text: '检车', value: '8' },
],
map: busWillRun,
}, {
n: '实际发车时间',
v: d.lastDepTime

Write Preview
Loading…
Cancel
Save