赋能案例-详情页路由
This commit is contained in:
851673013@qq.com
parent
4a0516fe11
commit
ec2dfaa755
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -11,7 +11,7 @@
|
|||
<!--详情页头部-->
|
||||
<div class="assign-case-detail-page-header">
|
||||
<div class="assign-case-detail-page-header-son">
|
||||
<div class="assign-case-detail-page-header-son-left"></div>
|
||||
<div class="assign-case-detail-page-header-son-left" :style="`background:url(${pictureFormat(dataFrom.name)})`"></div>
|
||||
<div class="assign-case-detail-page-header-son-right">
|
||||
<div class="assign-case-detail-page-header-son-right-title">
|
||||
{{ dataFrom.name }}
|
||||
|
|
@ -58,7 +58,16 @@
|
|||
class="assign-case-detail-page-content-center-card-description"
|
||||
>
|
||||
{{ item.description }}
|
||||
<p v-if="item.descriptions">{{ item.descriptions }}</p>
|
||||
<div v-if="item.descriptions">
|
||||
<p
|
||||
v-for="(
|
||||
itemDescriptions, indexDescriptions
|
||||
) in item.descriptions"
|
||||
:key="indexDescriptions"
|
||||
>
|
||||
{{ itemDescriptions }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,7 +93,34 @@
|
|||
import { ref } from 'vue'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
let dataFrom = ref({
|
||||
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: [
|
||||
{
|
||||
|
|
@ -101,22 +137,69 @@
|
|||
title: '解决方案',
|
||||
description:
|
||||
'当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
|
||||
descriptions:
|
||||
descriptions: [
|
||||
'系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '案例成效',
|
||||
description:
|
||||
'实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
|
||||
descriptions:
|
||||
descriptions: [
|
||||
'根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
|
||||
],
|
||||
},
|
||||
],
|
||||
else: {
|
||||
name: '文明创城案例',
|
||||
time: '2022-01-01 12:00',
|
||||
},
|
||||
})
|
||||
}
|
||||
} 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',
|
||||
},
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue