From d2cc317c51429cfdd7e5e8c63857268dfb9da87f Mon Sep 17 00:00:00 2001 From: "gao.zhiyuan" Date: Tue, 8 Aug 2023 16:53:53 +0800 Subject: [PATCH] =?UTF-8?q?=E8=80=83=E6=A0=B8=E8=AF=84=E5=88=86=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + api/app/lib/controllers/report/index.js | 21 +- .../fillion/components/assessModal.js | 4 + .../footer/leadership/right/right-bottom.js | 244 ++++++++-------- .../quanju/containers/public/olMap.js | 270 ++++++++++++++---- 5 files changed, 347 insertions(+), 193 deletions(-) diff --git a/.gitignore b/.gitignore index 2cff9c17..e899fca9 100644 --- a/.gitignore +++ b/.gitignore @@ -144,3 +144,4 @@ package-lock.json* development.text* web/package-lock.json* web/log/development.txt* +web/log/development.txt diff --git a/api/app/lib/controllers/report/index.js b/api/app/lib/controllers/report/index.js index 1c2f4732..492a414d 100644 --- a/api/app/lib/controllers/report/index.js +++ b/api/app/lib/controllers/report/index.js @@ -2,7 +2,7 @@ const { QueryTypes } = require('sequelize'); const moment = require('moment'); -async function reportList(ctx) { +async function reportList (ctx) { try { const models = ctx.fs.dc.models; 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', - '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'] @@ -147,7 +148,7 @@ async function reportList(ctx) { } } -async function reportPosition(ctx) { +async function reportPosition (ctx) { try { const models = ctx.fs.dc.models; const { startTime, endTime, userId, reportType } = ctx.query @@ -197,7 +198,7 @@ async function reportPosition(ctx) { } } -async function reportDetail(ctx) { +async function reportDetail (ctx) { try { const models = ctx.fs.dc.models; const { reportId } = ctx.params @@ -219,7 +220,7 @@ async function reportDetail(ctx) { } } -async function reportHandle(ctx) { +async function reportHandle (ctx) { try { const { models } = ctx.fs.dc; @@ -249,7 +250,7 @@ async function reportHandle(ctx) { } } -async function createReport(ctx) { +async function createReport (ctx) { try { const { userId } = ctx.fs.api const models = ctx.fs.dc.models; @@ -271,7 +272,7 @@ async function createReport(ctx) { } } -async function deleteReport(ctx) { +async function deleteReport (ctx) { try { const models = ctx.fs.dc.models; const { reportId } = ctx.params; @@ -294,7 +295,7 @@ async function deleteReport(ctx) { // TODO 小程序填写道路名称的时候的道路筛选 是一起都返回 还是不断传关键字搜索返回 -async function spotPrepare(ctx) { +async function spotPrepare (ctx) { try { const { models } = ctx.fs.dc; 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(); try { 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 console.log('txc1', ctx.query) const { startTime, endTime } = ctx.query diff --git a/web/client/src/sections/fillion/components/assessModal.js b/web/client/src/sections/fillion/components/assessModal.js index 5f8eb5b4..0325a70d 100644 --- a/web/client/src/sections/fillion/components/assessModal.js +++ b/web/client/src/sections/fillion/components/assessModal.js @@ -9,6 +9,7 @@ const { Option } = Select; const AssessModal = ({ editData, check, visible, onCancel, dispatch }) => { const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); return ( { 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} >
{ - const { dispatch } = props - const style = { height: "28%", marginTop: "4%" } - const [beijing, setBeijing] = useState() - const [list, setList] = useState([]) - const [rightDatas, setrightDatas] = useState([]) - const [nums, setNums] = useState([]) - const [num, setNum] = useState() - const [rightitemlist, setrightitemlist] = 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() - roadManagement() - }, []) - - const roadManagement = async () => { - await dispatch(getRoadadministration({})).then(res => { - if (res.success) { - setrightitemlist(res.payload.data?.rows || []) - } - }) - - - - } - - const renderContent = () => { - - return
- {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => { - if (index < 120) { - return
- -
- - {picfile?.length > 0 ? - {picfile?.map(v => )} - - :
- } - - -
-

- 执法日期: - {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"} -

-

- 执法道路: - {roadname} -

-

- 执法成果: - {enforcementreslt}

-
-
- -
} - placement="leftTop" - overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} - overlayClassName='popover' - - > -
-
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
-
{enforcementreslt}
-
- -
+ const { dispatch } = props + const style = { height: "28%", marginTop: "4%" } + const [beijing, setBeijing] = useState() + const [list, setList] = useState([]) + const [rightDatas, setrightDatas] = useState([]) + const [nums, setNums] = useState([]) + const [num, setNum] = useState() + const [rightitemlist, setrightitemlist] = 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])}` } - }) : ""} -
- } - return ( - <> - - -
-
执法日期
-
执法成果
-
- {rightitemlist && rightitemlist.length !== 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() + roadManagement() + }, []) + + const roadManagement = async () => { + await dispatch(getRoadadministration({})).then(res => { + if (res.success) { + setrightitemlist(res.payload.data?.rows || []) + } + }) + + + + } + + const renderContent = () => { + + return
+ {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => { + if (index < 120) { + return
+ +
+ + {picfile?.length > 0 ? + {picfile?.map(v => )} + + :
+ } + + +
+

+ 执法日期: + {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"} +

+

+ 执法道路: + {roadname} +

+

+ 执法成果: + {enforcementreslt}

+
+
+ +
} + placement="leftTop" + overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} + overlayClassName='popover' + + > +
+
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
+
{enforcementreslt}
+
+ +
+ } + }) : ""} +
+ } + return ( + <> + + +
+
执法日期
+
执法成果
+
+ {rightitemlist && rightitemlist.length !== 0 ? : } + + + + ) } export default Rightbottom \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/public/olMap.js b/web/client/src/sections/quanju/containers/public/olMap.js index 696b1ff2..98243455 100644 --- a/web/client/src/sections/quanju/containers/public/olMap.js +++ b/web/client/src/sections/quanju/containers/public/olMap.js @@ -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) => {
@@ -737,7 +805,87 @@ const OlMap = (props) => { }
- + + {/* 展示在建项目的上报记录 */} + { + tab == 'build' && reportRoadData.length ? +
+
+ { + setReportRoadData([]) + }} /> +
+ { + return ( +
+
+ { + r.scenePic?.length > 0 ? + + { + r.scenePic?.map(v => ) + } + + : '' + } +
+ +
+

+ 上报时间: + + {r.time ? moment(r.time).format("YYYY-MM-DD") : "--"} + +

+

+ 上报内容: + + {r.content} + +

+
+
+ ) + })} + containerStyle={{ position: "relative", height: "90%", }} + divHeight={'calc(100vh - 154px)'} divId={"chart-overview-report-list"} + /> +
+ : '' + } + ) }