diff --git a/front/src/assets/assignCase/assignCase_else.png b/front/src/assets/assignCase/assignCase_else.png new file mode 100644 index 00000000..42f26ecf Binary files /dev/null and b/front/src/assets/assignCase/assignCase_else.png differ diff --git a/front/src/views/assignCase/components/AssignCaseDetailPage.vue b/front/src/views/assignCase/components/AssignCaseDetailPage.vue index b509d72f..3dc0b06f 100644 --- a/front/src/views/assignCase/components/AssignCaseDetailPage.vue +++ b/front/src/views/assignCase/components/AssignCaseDetailPage.vue @@ -11,7 +11,7 @@
-
+
{{ dataFrom.name }} @@ -58,7 +58,16 @@ class="assign-case-detail-page-content-center-card-description" > {{ item.description }} -

{{ item.descriptions }}

+
+

+ {{ itemDescriptions }} +

+
@@ -84,39 +93,113 @@ import { ref } from 'vue' import HomeHeader from '@/views/home/components/header' import HomeFooter from '@/views/newHome/components/Footer' - let dataFrom = ref({ - name: '道路保洁监管场景', - content: [ - { - title: '案例背景', - description: - '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导', + import { useRouter } from 'vue-router' + const router = useRouter() + const val = router.currentRoute.value.query.val + console.log('val', val) + // const contenBox = ref([ + // { + // photo: require('@/assets/assignCase/road.png'), + // name: '道路保洁监管场景', + // time: '2022-01-01 12:00', + // }, + // { + // photo: require('@/assets/assignCase/city.png'), + // name: '文明创城场景', + // time: '2022-01-01 12:00', + // }, + // ]) + //图片样式切换 + function pictureFormat(name){ + if(name=='道路保洁监管场景'){ + return require('@/assets/assignCase/road.png') + } + else{ + return require('@/assets/assignCase/city.png') + } + } + let dataFrom = ref({}) + if (val == '道路保洁监管场景') { + dataFrom.value = { + name: '道路保洁监管场景', + content: [ + { + title: '案例背景', + description: + '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导', + }, + { + title: '业务挑战', + description: + '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段', + }, + { + title: '解决方案', + description: + '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。', + descriptions: [ + '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。', + ], + }, + { + title: '案例成效', + description: + '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。', + descriptions: [ + '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。', + ], + }, + ], + else: { + name: '文明创城案例', + time: '2022-01-01 12:00', }, - { - title: '业务挑战', - description: - '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段', + } + } else { + dataFrom.value = { + name: '文明创城场景', + content: [ + { + title: '案例背景', + description: + '通过融合视频共享平台、标准地址库、运营商手机信令等数据，结合道路不洁、占道经营、沿街晾晒、违章停放、违规广告等视频AI算法，打造文明创城专题场景。', + }, + { + title: '业务挑战', + description: + '1)城管工作人员日常通过视频监控巡检创城工作时，需要一个一个查找视频，无法快速调取重点区域视频监控，工作效率较低。', + descriptions: [ + '2)事件发生时，想要查看事件附近的视频监控进行核查时，要通过放大和拖拉拽地图查找事发地，无法快速定位。', + '3)由于破坏市容市貌事件类型多样，且需监测点位较多，工作人员有限，人工巡检不能做到及时发现。', + '4)城管重点关注人流密集的区域，但目前缺乏高效的监控手段。', + ], + }, + { + title: '解决方案', + description: + '1)通过对接自规局标准地址库，实现按地址搜索的功能，通过快速定位，可以让用户很快找到定位位置周边的视频监控。', + descriptions: [ + '2)实现视频标签功能，给视频监控打标签后，用户通过在页面选择兴趣标签，地图显示相关视频。', + '3)结合运营商手机信令数据，实现人流热力图，辅助用户监控人流量密集的区域。', + '4)依托视频监控平台，结合视频AI算法，智能发现环境卫生、沿街晾晒、违章停放、占道经营、违规广告等破坏市容市貌的事件，推送到城管案件系统中，辅助城管局创城工作开展。', + ], + }, + { + title: '案例成效', + description: + '1)智能发现不文明事件，并快速定位附近的视频监控，辅助城管、环保等各单位开展创城工作；', + descriptions: [ + '2)显示实时人流热力图，城市管理部门可快速定位人群密集区域，并通过查看周边摄像头进行实时监控；', + '3)通过视频定时截图功能，可截取便民摊点营业时间外的视频画面并智能分析，辅助城管执法单位及时发现问题进行处置，同时该功能也可以在工地及景区监管中发挥作用。', + ], + }, + ], + else: { + name: '道路保洁监管场景', + time: '2022-01-01 12:00', }, - { - title: '解决方案', - description: - '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。', - descriptions: - '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。', - }, - { - title: '案例成效', - description: - '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。', - descriptions: - '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。', - }, - ], - else: { - name: '文明创城案例', - time: '2022-01-01 12:00', - }, - }) + } + } let tabName = ref('案例背景') const tabSwitch = (item, index) => { tabName.value = item.title @@ -173,8 +256,7 @@ .assign-case-detail-page-header-son-left { height: 200px; width: 290px; - background: url('~@/assets/assignCase/assignCase_roadebg.png') - no-repeat; + background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 30px; @@ -265,7 +347,53 @@ } .assign-case-detail-page-content-right { width: 270px; - border: 1px red solid; + height: 260px; + display: inline-block; + .assign-case-detail-page-content-right-card { + width: 270px; + height: 260px; + border: 1px #e5e5e5 solid; + .assign-case-detail-page-content-right-card-title { + padding-left: 15px; + background: linear-gradient( + to right, + rgba(113, 132, 252, 0.8), + rgba(148, 163, 252, 0.8) + ); + height: 64px; + color: #fff; + font-size: 24px; + line-height: 64px; + margin-bottom: 30px; + border-radius: 10px 10px 0 0; + span:first-child { + display: inline-block; + width: 15px; + height: 15px; + background: url('~@/assets/assignCase/assignCase_else.png') + no-repeat; + background-position: center; + background-size: cover; + margin-right: 15px; + } + } + .assign-case-detail-page-content-right-card-content { + padding-left: 20px; + border-radius: 0px 0px 10px 10px; + p:first-child { + font-size: 20px; + line-height: 20px; + margin-bottom: 20px; + color: #333; + } + p:last-child { + font-size: 18px; + line-height: 18px; + margin-bottom: 30px; + color: #999; + } + } + } } } }