赋能案例详情

This commit is contained in:
851673013@qq.com 2022-06-15 15:22:26 +08:00
parent dace70ec6b
commit 5f69279437
3 changed files with 268 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 323 KiB

View File

@ -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>