赋能案例详情
This commit is contained in:
851673013@qq.com
parent
dace70ec6b
commit
5f69279437
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
|
|
@ -0,0 +1,268 @@
|
|||
<!--
|
||||
* @Author: hisense.zhangfeihu
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.zhangfeihu
|
||||
* @LastEditTime: 2022-06-13 14:31:19
|
||||
* @Description: 赋能案例-详情页
|
||||
-->
|
||||
<template>
|
||||
<div class="assign-case-detail-page">
|
||||
<!--详情页头部-->
|
||||
<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-right">
|
||||
<div class="assign-case-detail-page-header-son-right-title">
|
||||
{{ dataFrom.name }}
|
||||
</div>
|
||||
<div class="assign-case-detail-page-header-son-right-click">
|
||||
<span>点击查看</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="assign-case-detail-page-content">
|
||||
<div class="assign-case-detail-page-content-son">
|
||||
<div class="assign-case-detail-page-content-left">
|
||||
<div
|
||||
class="assign-case-detail-page-content-left-border"
|
||||
id="assign-case-detail-page-content-left-border-id"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in dataFrom.content"
|
||||
:key="index"
|
||||
@click="tabSwitch(item, index)"
|
||||
:class="
|
||||
tabName == item.title
|
||||
? 'assign-case-detail-page-content-left-border-click'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="assign-case-detail-page-content-center">
|
||||
<div
|
||||
class="assign-case-detail-page-content-center-card"
|
||||
v-for="(item, index) in dataFrom.content"
|
||||
:key="index"
|
||||
:id="'assign-case-detail-page-content-center-card' + index"
|
||||
>
|
||||
<div class="assign-case-detail-page-content-center-card-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div
|
||||
class="assign-case-detail-page-content-center-card-description"
|
||||
>
|
||||
{{ item.description }}
|
||||
<p v-if="item.descriptions">{{ item.descriptions }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="assign-case-detail-page-content-right">
|
||||
<div class="assign-case-detail-page-content-right-card">
|
||||
<div class="assign-case-detail-page-content-right-card-title">
|
||||
<span></span>
|
||||
<span>其他案例</span>
|
||||
</div>
|
||||
<div class="assign-case-detail-page-content-right-card-content">
|
||||
<p>{{ dataFrom.else.name }}</p>
|
||||
<p>{{ dataFrom.else.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
let dataFrom = ref({
|
||||
name: '道路保洁监管场景',
|
||||
content: [
|
||||
{
|
||||
title: '案例背景',
|
||||
description:
|
||||
'融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
|
||||
},
|
||||
{
|
||||
title: '业务挑战',
|
||||
description:
|
||||
'目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
|
||||
},
|
||||
{
|
||||
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
|
||||
if (index != 0) {
|
||||
let top =
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + index
|
||||
).offsetTop -
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + (index - 1)
|
||||
).offsetHeight
|
||||
let view = document.getElementById(
|
||||
'assign-case-detail-page-content-left-border-id'
|
||||
)
|
||||
view.style.top =
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + (index - 1)
|
||||
).offsetHeight + 'px'
|
||||
console.log('view.style.top', view.style.top)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
} else {
|
||||
let top = 0
|
||||
let view = document.getElementById(
|
||||
'assign-case-detail-page-content-left-border-id'
|
||||
)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
view.style.top = '490px'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.assign-case-detail-page {
|
||||
position: relative;
|
||||
top: 64px;
|
||||
.assign-case-detail-page-header {
|
||||
height: 370px;
|
||||
background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
padding-top: 120px;
|
||||
.assign-case-detail-page-header-son {
|
||||
width: 900px;
|
||||
height: 250px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
box-shadow: 5px 5px 20px #f2f3fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
.assign-case-detail-page-header-son-left {
|
||||
height: 200px;
|
||||
width: 290px;
|
||||
background: url('~@/assets/assignCase/assignCase_roadebg.png')
|
||||
no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.assign-case-detail-page-header-son-right {
|
||||
.assign-case-detail-page-header-son-right-title {
|
||||
color: #000000;
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.assign-case-detail-page-header-son-right-click {
|
||||
color: #526aff;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
span:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
span:last-child {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: url('~@/assets/assignCase/assignCase_click.png')
|
||||
no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.assign-case-detail-page-content {
|
||||
padding-top: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.assign-case-detail-page-content-son {
|
||||
width: 1300px;
|
||||
display: flex;
|
||||
}
|
||||
.assign-case-detail-page-content-left {
|
||||
width: 167px;
|
||||
.assign-case-detail-page-content-left-border {
|
||||
border-right: 1px #e5e5e5 solid;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
position: fixed;
|
||||
top: 490px;
|
||||
div {
|
||||
height: 30px;
|
||||
padding-right: 70px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 24px;
|
||||
color: #666666;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.assign-case-detail-page-content-left-border-click {
|
||||
padding-right: 66px;
|
||||
border-right: 4px #526aff solid;
|
||||
color: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.assign-case-detail-page-content-center {
|
||||
width: 845px;
|
||||
padding: 0 40px 100px 35px;
|
||||
.assign-case-detail-page-content-center-card {
|
||||
margin-bottom: 60px;
|
||||
.assign-case-detail-page-content-center-card-title {
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
line-height: 28px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.assign-case-detail-page-content-center-card-description {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.assign-case-detail-page-content-right {
|
||||
width: 270px;
|
||||
border: 1px red solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue