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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 21
      api/app/lib/controllers/report/index.js
  3. 4
      web/client/src/sections/fillion/components/assessModal.js
  4. 2
      web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
  5. 268
      web/client/src/sections/quanju/containers/public/olMap.js

1
.gitignore
View File

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

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

@ -2,7 +2,7 @@
const { QueryTypes } = require('sequelize'); const { QueryTypes } = require('sequelize');
const moment = require('moment'); const moment = require('moment');
async function reportList(ctx) { async function reportList (ctx) {
try { try {
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
const { limit, page, startTime, endTime, keyword, userId, reportType, isTop, asc, projectType, handleState = '', performerId = '', codeRoad } = ctx.query const { limit, page, startTime, endTime, keyword, userId, reportType, isTop, asc, projectType, handleState = '', performerId = '', codeRoad } = ctx.query
@ -45,7 +45,8 @@ async function reportList(ctx) {
}, },
attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'performerId', 'roadSectionEnd', 'reportType', 'address', 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: [{ include: [{
model: models.User, model: models.User,
attributes: ['name'] attributes: ['name']
@ -147,7 +148,7 @@ async function reportList(ctx) {
} }
} }
async function reportPosition(ctx) { async function reportPosition (ctx) {
try { try {
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
const { startTime, endTime, userId, reportType } = ctx.query const { startTime, endTime, userId, reportType } = ctx.query
@ -197,7 +198,7 @@ async function reportPosition(ctx) {
} }
} }
async function reportDetail(ctx) { async function reportDetail (ctx) {
try { try {
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
const { reportId } = ctx.params const { reportId } = ctx.params
@ -219,7 +220,7 @@ async function reportDetail(ctx) {
} }
} }
async function reportHandle(ctx) { async function reportHandle (ctx) {
try { try {
const { models } = ctx.fs.dc; const { models } = ctx.fs.dc;
@ -249,7 +250,7 @@ async function reportHandle(ctx) {
} }
} }
async function createReport(ctx) { async function createReport (ctx) {
try { try {
const { userId } = ctx.fs.api const { userId } = ctx.fs.api
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
@ -271,7 +272,7 @@ async function createReport(ctx) {
} }
} }
async function deleteReport(ctx) { async function deleteReport (ctx) {
try { try {
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
const { reportId } = ctx.params; const { reportId } = ctx.params;
@ -294,7 +295,7 @@ async function deleteReport(ctx) {
// TODO 小程序填写道路名称的时候的道路筛选 是一起都返回 还是不断传关键字搜索返回 // TODO 小程序填写道路名称的时候的道路筛选 是一起都返回 还是不断传关键字搜索返回
async function spotPrepare(ctx) { async function spotPrepare (ctx) {
try { try {
const { models } = ctx.fs.dc; const { models } = ctx.fs.dc;
const sequelize = ctx.fs.dc.orm; const sequelize = ctx.fs.dc.orm;
@ -366,7 +367,7 @@ async function spotPrepare(ctx) {
} }
} }
async function spotCheck(ctx) { async function spotCheck (ctx) {
const transaction = await ctx.fs.dc.orm.transaction(); const transaction = await ctx.fs.dc.orm.transaction();
try { try {
const { models } = ctx.fs.dc; const { models } = ctx.fs.dc;
@ -448,7 +449,7 @@ async function spotCheck(ctx) {
} }
} }
} }
async function spotCheckDetail(ctx) { async function spotCheckDetail (ctx) {
const { models } = ctx.fs.dc const { models } = ctx.fs.dc
console.log('txc1', ctx.query) console.log('txc1', ctx.query)
const { startTime, endTime } = ctx.query const { startTime, endTime } = ctx.query

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

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

@ -110,7 +110,7 @@ const Rightbottom = (props) => {
overlayClassName='popover' overlayClassName='popover'
> >
<div style={{ width: '90%', height: '100%', margin:'auto',display: 'flex', color: "rgba(216, 240, 255, 0.8)" }}> <div style={{ width: '90%', height: '100%', margin: 'auto', display: 'flex', color: "rgba(216, 240, 255, 0.8)" }}>
<div style={{ width: '50%', textAlign: "center", }}>{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}</div> <div style={{ width: '50%', textAlign: "center", }}>{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}</div>
<div title={enforcementreslt} style={{ width: '50%', textAlign: "center", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{enforcementreslt}</div> <div title={enforcementreslt} style={{ width: '50%', textAlign: "center", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{enforcementreslt}</div>
</div> </div>

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 moment from 'moment';
import { OlMapRequest } from '$utils' import { OlMapRequest } from '$utils'
import { useRef } from 'react'; 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 = [ export const busWillRun = [
{ text: '非运营', value: '0' }, { text: '非运营', value: '0' },
@ -32,6 +36,7 @@ const OlMap = (props) => {
const [pointItem, setPointItem] = useState({}) const [pointItem, setPointItem] = useState({})
// //
const [busRunData, setBusRunData] = useState([]) const [busRunData, setBusRunData] = useState([])
const [reportRoadData, setReportRoadData] = useState([])
// //
const curTab = useRef(tab) const curTab = useRef(tab)
@ -39,6 +44,7 @@ const OlMap = (props) => {
curTab.current = tab curTab.current = tab
setOlMapOpenData([]) setOlMapOpenData([])
setPointItem({}) setPointItem({})
setReportRoadData([])
if (olMap) { if (olMap) {
olMap.closeOverlay('clickOpen') olMap.closeOverlay('clickOpen')
olMap.closeOverlay('pointClickOpen') olMap.closeOverlay('pointClickOpen')
@ -51,6 +57,7 @@ const OlMap = (props) => {
if (tab != 'build') { if (tab != 'build') {
roadProjectList.forEach((d, index) => { roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_road_' + index) olMap.removeGeometryLayer('geometry_road_' + index)
olMap.removeGeometryLayer('geometry_road_' + d.id)
}) })
} }
if (tab != 'operation') { if (tab != 'operation') {
@ -100,6 +107,7 @@ const OlMap = (props) => {
olMapTool.map.on('singleclick', function (p) { olMapTool.map.on('singleclick', function (p) {
setOlMapOpenData([]) setOlMapOpenData([])
setPointItem({}) setPointItem({})
setReportRoadData([])
olMapTool.closeOverlay('clickOpen') olMapTool.closeOverlay('clickOpen')
olMapTool.closeOverlay('pointClickOpen') olMapTool.closeOverlay('pointClickOpen')
olMapTool.removeGeometryLayer('geometry0') olMapTool.removeGeometryLayer('geometry0')
@ -201,9 +209,6 @@ const OlMap = (props) => {
useEffect(() => { useEffect(() => {
if (patrolList.length && olMap && tab == 'conserve') { if (patrolList.length && olMap && tab == 'conserve') {
roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_road_' + index)
})
busRunData.forEach((d, index) => { busRunData.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_bus_' + index) olMap.removeGeometryLayer('geometry_bus_' + index)
}) })
@ -302,58 +307,51 @@ const OlMap = (props) => {
useEffect(() => { useEffect(() => {
if (roadProjectList.length && olMap && tab == 'build') { if (roadProjectList.length && olMap && tab == 'build') {
patrolList.forEach((d, index) => { // roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_patrol_' + index) // olMap.addGeometryLayer({
}) // features: [
busRunData.forEach((d, index) => { // {
olMap.removeGeometryLayer('geometry_bus_' + index) // name: 'roadPoint',
}) // attributes: {
// callbackParams: {
roadProjectList.forEach((d, index) => { // type: 'roadPoint',
olMap.addGeometryLayer({ // id: d.id,
features: [ // },
{ // callback: (p) => {
name: 'roadPoint', // setPointItem(d)
attributes: { // olMap.addOverlay('pointClickOpen', {
callbackParams: { // id: 'pointClickOpen',
type: 'roadPoint', // offset: [0, 4], // 偏移
id: d.id, // position: [d.longitude, d.latitude], // 坐标
}, // // position: [115.944220000000, 28.545380000000],
callback: (p) => { // autoPan: true,
setPointItem(d) // autoPanMargin: 100,
olMap.addOverlay('pointClickOpen', { // positioning: 'top-right'
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: [d.longitude, d.latitude],
// geometry: [115.944220000000, 28.545380000000], // // geometry: [115.944220000000, 28.545380000000],
geometryType: 'Point', // geometryType: 'Point',
}, // },
], // ],
style: { // style: {
icon: { // icon: {
src: '/assets/images/gis/pointer.png', // src: '/assets/images/gis/pointer.png',
scale: 1, // 图标引用 // scale: 1, // 图标引用
}, // },
}, // },
selectStyle: { // selectStyle: {
icon: { // icon: {
src: '/assets/images/gis/pointer.png', // src: '/assets/images/gis/pointer.png',
scale: 1, // 图标引用 // scale: 1, // 图标引用
}, // },
}, // },
layerName: 'geometry_road_' + index // layerName: 'geometry_road_' + index
}); // });
}); // });
} }
}, [roadProjectList, olMap, tab]) }, [roadProjectList, olMap, tab])
@ -367,9 +365,6 @@ const OlMap = (props) => {
patrolList.forEach((d, index) => { patrolList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_patrol_' + index) olMap.removeGeometryLayer('geometry_patrol_' + index)
}) })
roadProjectList.forEach((d, index) => {
olMap.removeGeometryLayer('geometry_road_' + index)
})
busRunData.forEach((d, index) => { busRunData.forEach((d, index) => {
olMap.addGeometryLayer({ olMap.addGeometryLayer({
@ -501,6 +496,7 @@ const OlMap = (props) => {
let renderIndex = 0 let renderIndex = 0
for (let res of roadRes) { for (let res of roadRes) {
const corData = projectList[renderIndex]
if (res) { if (res) {
if (res.status == 200 && res.body && res.body.code == 1) { if (res.status == 200 && res.body && res.body.code == 1) {
const data = res.body.data const data = res.body.data
@ -508,7 +504,7 @@ const OlMap = (props) => {
if (datalist?.list?.length) { if (datalist?.list?.length) {
let dataIndex = 0 let dataIndex = 0
for (let d of datalist.list) { for (let d of datalist.list) {
const corData = projectList[renderIndex]
olMap.addGeometryJMLayer({ olMap.addGeometryJMLayer({
features: [ features: [
{ {
@ -528,6 +524,8 @@ const OlMap = (props) => {
coordinate = [extent[coordinateIndex], extent[coordinate + 1]] coordinate = [extent[coordinateIndex], extent[coordinate + 1]]
} }
if (coordinate.length) { if (coordinate.length) {
setReportRoadData([])
setPointItem(corData)
setOlMapOpenData([{ setOlMapOpenData([{
n: '项目名称', n: '项目名称',
v: corData.entryName 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++ renderIndex++
} }
} else { } else {
@ -587,13 +635,14 @@ const OlMap = (props) => {
<div id="clickOpen" <div id="clickOpen"
style={{ style={{
backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`,
width: 340, minWidth: 340,
backgroundPosition: 'center', backgroundPosition: 'center',
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
minHeight: 180, minHeight: 180,
padding: '24px', padding: '24px',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
color: '#fff' color: '#fff',
overflow: 'auto',
}}> }}>
{ {
olMapOpenData.map(s => { 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> </div>
<div slot="overlays" style={{ display: 'none', }}> <div slot="overlays" style={{ display: 'none', }}>
@ -737,7 +805,87 @@ const OlMap = (props) => {
} }
</div> </div>
</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>
: ''
}
</div >
) )
} }

Write Preview
Loading…
Cancel
Save