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

考核评分添加loading

dev
巴林闲侠 1 year ago
parent
888e940f2a
commit
d2cc317c51
5 changed files with 347 additions and 193 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. 1
      .gitignore
  2. 3
      api/app/lib/controllers/report/index.js
  3. 4
      web/client/src/sections/fillion/components/assessModal.js
  4. 268
      web/client/src/sections/quanju/containers/public/olMap.js

1
.gitignore
View File

@ -144,3 +144,4 @@ package-lock.json*
development.text*
web/package-lock.json*
web/log/development.txt*
web/log/development.txt

3
api/app/lib/controllers/report/index.js
View File

@ -45,7 +45,8 @@ async function reportList(ctx) {
},
attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'performerId', 'roadSectionEnd', 'reportType', 'address',
'content', 'longitude', 'latitude', 'projectName', 'handleState', 'codeRoad', 'handleContent', 'handlePic', 'videoUrl'],
'content', 'longitude', 'latitude', 'projectName', 'handleState', 'codeRoad', 'handleContent', 'handlePic', 'videoUrl',
'scenePic'],
include: [{
model: models.User,
attributes: ['name']

4
web/client/src/sections/fillion/components/assessModal.js
View File

@ -9,6 +9,7 @@ const { Option } = Select;
const AssessModal = ({ editData, check, visible, onCancel, dispatch }) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
return (
<Modal
@ -22,6 +23,7 @@ const AssessModal = ({ editData, check, visible, onCancel, dispatch }) => {
if (check) {
return onCancel()
}
setLoading(true)
form.validateFields().then(values => {
dispatch(editAssess({
...values,
@ -31,12 +33,14 @@ const AssessModal = ({ editData, check, visible, onCancel, dispatch }) => {
if (res.success) {
onCancel()
}
setLoading(false)
})
})
}}
onCancel={() => {
onCancel()
}}
confirmLoading={loading}
>
<Form
form={form}

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

@ -5,6 +5,10 @@ import Hua from '../footer/leadership/centerleft/hudong'
import moment from 'moment';
import { OlMapRequest } from '$utils'
import { useRef } from 'react';
import { getReportList } from '../../../fillion/actions/patrol'
import AutoRollComponent from '../footer/build/AutoRollComponent'
import { Carousel } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
export const busWillRun = [
{ text: '非运营', value: '0' },
@ -32,6 +36,7 @@ const OlMap = (props) => {
const [pointItem, setPointItem] = useState({})
//
const [busRunData, setBusRunData] = useState([])
const [reportRoadData, setReportRoadData] = useState([])
//
const curTab = useRef(tab)
@ -39,6 +44,7 @@ const OlMap = (props) => {
curTab.current = tab
setOlMapOpenData([])
setPointItem({})
setReportRoadData([])
if (olMap) {
olMap.closeOverlay('clickOpen')
olMap.closeOverlay('pointClickOpen')
@ -51,6 +57,7 @@ const OlMap = (props) => {
if (tab != 'build') {
roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_road_' + index)
olMap.removeGeometryLayer('geometry_road_' + d.id)
})
}
if (tab != 'operation') {
@ -100,6 +107,7 @@ const OlMap = (props) => {
olMapTool.map.on('singleclick', function (p) {
setOlMapOpenData([])
setPointItem({})
setReportRoadData([])
olMapTool.closeOverlay('clickOpen')
olMapTool.closeOverlay('pointClickOpen')
olMapTool.removeGeometryLayer('geometry0')
@ -201,9 +209,6 @@ const OlMap = (props) => {
useEffect(() => {
if (patrolList.length && olMap && tab == 'conserve') {
roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_road_' + index)
})
busRunData.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_bus_' + index)
})
@ -302,58 +307,51 @@ const OlMap = (props) => {
useEffect(() => {
if (roadProjectList.length && olMap && tab == 'build') {
patrolList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_patrol_' + index)
})
busRunData.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_bus_' + index)
})
roadProjectList.forEach((d, index) => {
olMap.addGeometryLayer({
features: [
{
name: 'roadPoint',
attributes: {
callbackParams: {
type: 'roadPoint',
id: d.id,
},
callback: (p) => {
setPointItem(d)
olMap.addOverlay('pointClickOpen', {
id: 'pointClickOpen',
offset: [0, 4], // 偏移
position: [d.longitude, d.latitude], // 坐标
// position: [115.944220000000, 28.545380000000],
autoPan: true,
autoPanMargin: 100,
positioning: 'top-right'
})
// 查路线
// roadProjectList.forEach((d, index) => {
// olMap.addGeometryLayer({
// features: [
// {
// name: 'roadPoint',
// attributes: {
// callbackParams: {
// type: 'roadPoint',
// id: d.id,
// },
// callback: (p) => {
// setPointItem(d)
// olMap.addOverlay('pointClickOpen', {
// id: 'pointClickOpen',
// offset: [0, 4], // 偏移
// position: [d.longitude, d.latitude], // 坐标
// // position: [115.944220000000, 28.545380000000],
// autoPan: true,
// autoPanMargin: 100,
// positioning: 'top-right'
// })
// // 查路线
}
},
geometry: [d.longitude, d.latitude],
// geometry: [115.944220000000, 28.545380000000],
geometryType: 'Point',
},
],
style: {
icon: {
src: '/assets/images/gis/pointer.png',
scale: 1, // 图标引用
},
},
selectStyle: {
icon: {
src: '/assets/images/gis/pointer.png',
scale: 1, // 图标引用
},
},
layerName: 'geometry_road_' + index
});
});
// }
// },
// geometry: [d.longitude, d.latitude],
// // geometry: [115.944220000000, 28.545380000000],
// geometryType: 'Point',
// },
// ],
// style: {
// icon: {
// src: '/assets/images/gis/pointer.png',
// scale: 1, // 图标引用
// },
// },
// selectStyle: {
// icon: {
// src: '/assets/images/gis/pointer.png',
// scale: 1, // 图标引用
// },
// },
// layerName: 'geometry_road_' + index
// });
// });
}
}, [roadProjectList, olMap, tab])
@ -367,9 +365,6 @@ const OlMap = (props) => {
patrolList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_patrol_' + index)
})
roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_road_' + index)
})
busRunData.forEach((d, index) => {
olMap.addGeometryLayer({
@ -501,6 +496,7 @@ const OlMap = (props) => {
let renderIndex = 0
for (let res of roadRes) {
const corData = projectList[renderIndex]
if (res) {
if (res.status == 200 && res.body && res.body.code == 1) {
const data = res.body.data
@ -508,7 +504,7 @@ const OlMap = (props) => {
if (datalist?.list?.length) {
let dataIndex = 0
for (let d of datalist.list) {
const corData = projectList[renderIndex]
olMap.addGeometryJMLayer({
features: [
{
@ -528,6 +524,8 @@ const OlMap = (props) => {
coordinate = [extent[coordinateIndex], extent[coordinate + 1]]
}
if (coordinate.length) {
setReportRoadData([])
setPointItem(corData)
setOlMapOpenData([{
n: '项目名称',
v: corData.entryName
@ -569,6 +567,56 @@ const OlMap = (props) => {
}
}
}
if (corData.roadCodeStart) {
// 画对应的巡查上报的点
const corProjectRoadReport = roadProjectList.find(d => d.project_name == corData.entryName)
if (corProjectRoadReport) {
const d = corProjectRoadReport
olMap.addGeometryLayer({
features: [
{
name: 'roadPoint',
attributes: {
callbackParams: {
type: 'roadPoint',
id: d.id,
},
callback: (p) => {
setPointItem(d)
setReportRoadData([])
olMap.addOverlay('pointClickOpen', {
id: 'pointClickOpen',
offset: [0, 4], // 偏移
position: [d.longitude, d.latitude], // 坐标
// position: [115.944220000000, 28.545380000000],
autoPan: true,
autoPanMargin: 100,
positioning: 'top-right'
})
}
},
geometry: [d.longitude, d.latitude],
// geometry: [115.944220000000, 28.545380000000],
geometryType: 'Point',
},
],
style: {
icon: {
src: '/assets/images/gis/pointer.png',
scale: 1, // 图标引用
},
},
selectStyle: {
icon: {
src: '/assets/images/gis/pointer.png',
scale: 1, // 图标引用
},
},
layerName: 'geometry_road_' + d.id
});
}
}
renderIndex++
}
} else {
@ -587,13 +635,14 @@ const OlMap = (props) => {
<div id="clickOpen"
style={{
backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`,
width: 340,
minWidth: 340,
backgroundPosition: 'center',
backgroundSize: '100% 100%',
minHeight: 180,
padding: '24px',
backgroundRepeat: 'no-repeat',
color: '#fff'
color: '#fff',
overflow: 'auto',
}}>
{
olMapOpenData.map(s => {
@ -613,6 +662,25 @@ const OlMap = (props) => {
)
})
}
{
pointItem.roadCodeStart ?
<a style={{ float: 'right' }} onClick={() => {
dispatch(getReportList({
reportType: 'road',
keyword: pointItem.entryName
})).then(res => {
if (res.success) {
let data = res.payload.data || []
if (!data.length) {
message.warning('暂无上报记录')
} else {
setReportRoadData(data)
}
}
})
}}>上报记录</a>
: ''
}
</div>
</div>
<div slot="overlays" style={{ display: 'none', }}>
@ -737,6 +805,86 @@ const OlMap = (props) => {
}
</div>
</div>
{/* 展示在建项目的上报记录 */}
{
tab == 'build' && reportRoadData.length ?
<div style={{
backgroundColor: 'rgba(0, 33, 98, 0.8)',
height: 'calc(100vh - 103px)',
top: 0,
width: 320,
position: 'absolute',
right: 485,
zIndex: 9999
}}>
<div>
<CloseOutlined style={{
fontSize: 'large',
color: "#fff",
margin: 12
}} onClick={() => {
setReportRoadData([])
}} />
</div>
<AutoRollComponent
content={reportRoadData.map(r => {
return (
<div style={{
display: 'flex', backgroundImage: 'url(/assets/images/leadership/beijinglan.png)',
backgroundSize: '100% 100%',
margin: 8
}}>
<div style={{
width: 80, margin: "4px 0px 0px 4px",
}}>
{
r.scenePic?.length > 0 ?
<Carousel autoplay >
{
r.scenePic?.map(v => <img className='picfileimg'
style={{ width: 80, display: 'inline-block', }}
src={
v.startsWith("http") ? v :
`${localStorage.getItem("qndmn")}/${v}`
}
width={`200px`}
/>)
}
</Carousel>
: ''
}
</div>
<div style={{ flex: 1, marginLeft: 4, marginTop: 4, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
上报时间:
<span style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
}}>
{r.time ? moment(r.time).format("YYYY-MM-DD") : "--"}
</span>
</p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
上报内容:
<span title={r.content} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 120
}}>
{r.content}
</span>
</p>
</div>
</div>
)
})}
containerStyle={{ position: "relative", height: "90%", }}
divHeight={'calc(100vh - 154px)'} divId={"chart-overview-report-list"}
/>
</div>
: ''
}
</div >
)
}

Write Preview
Loading…
Cancel
Save