赋能案例详情
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