wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

应用资源详情样式修改

This commit is contained in:
851673013@qq.com 2022-06-15 18:11:20 +08:00
parent 7fc167b7df
commit fb6107d461
3 changed files with 274 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

386
front/src/views/assignCase/components/AssignCaseDetailPage.vue
View File

@ -11,12 +11,18 @@
<!--详情页头部-->
<div class="assign-case-detail-page-header">
<div class="assign-case-detail-page-header-son">
<div class="assign-case-detail-page-header-son-left" :style="`background:url(${pictureFormat(dataFrom.name)})`"></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 }}
</div>
<div class="assign-case-detail-page-header-son-right-click">
<div
class="assign-case-detail-page-header-son-right-click"
@click="clickToView(dataFrom.name)"
>
<span>点击查看</span>
<span></span>
</div>
@ -78,9 +84,15 @@
<span>其他案例</span>
</div>
<div class="assign-case-detail-page-content-right-card-content">
<p>{{ dataFrom.else.name }}</p>
<p>{{ dataFrom.else.time }}</p>
<div
class="assign-case-detail-page-content-right-card-content-card"
@click="routerClick(dataFrom.else.name)"
>
<p>{{ dataFrom.else.name }}</p>
<p>{{ dataFrom.else.time }}</p>
</div>
</div>
<div class="no-data">暂无更多</div>
</div>
</div>
</div>
@ -90,120 +102,125 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, watch, onMounted } from 'vue'
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { useRouter } from 'vue-router'
const router = useRouter()
const val = router.currentRoute.value.query.val
let 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=='道路保洁监管场景'){
function pictureFormat(name) {
if (name == '道路保洁监管场景') {
return require('@/assets/assignCase/road.png')
}
else{
} else {
return require('@/assets/assignCase/city.png')
}
}
//路由跳转事件
const routerClick = (name) => {
val = name
router.push({ path: 'AssignCaseDetailPage', query: { val } })
}
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',
},
}
} 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: {
const init = () => {
val = router.currentRoute.value.query.val
if (val == '道路保洁监管场景') {
dataFrom.value = {
name: '道路保洁监管场景',
time: '2022-01-01 12:00',
},
content: [
{
title: '案例背景',
description:
'融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
},
{
title: '业务挑战',
description:
'目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
},
{
title: '解决方案',
description:
'当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
descriptions: [
'系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
],
},
{
title: '案例成效',
description:
'实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
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',
},
}
}
}
init()
//监听路由发生变化
watch(
() => router.currentRoute.value.query.val,
() => {
init()
},
{ immediate: true }
)
let tabName = ref('案例背景')
//tab点击事件
const tabSwitch = (item, index) => {
tabName.value = item.title
if (index != 0) {
if (index != 0 && index != 3) {
let top =
document.querySelector(
'#assign-case-detail-page-content-center-card' + index
@ -221,7 +238,7 @@
console.log('view.style.top', view.style.top)
document.documentElement.scrollTop = top
document.body.scrollTop = top
} else {
} else if (index == 0) {
let top = 0
let view = document.getElementById(
'assign-case-detail-page-content-left-border-id'
@ -229,6 +246,56 @@
document.documentElement.scrollTop = top
document.body.scrollTop = top
view.style.top = '490px'
} else if (index == 3) {
let top = document.querySelector(
'#assign-case-detail-page-content-center-card' + index
).offsetTop
let view = document.getElementById(
'assign-case-detail-page-content-left-border-id'
)
document.documentElement.scrollTop = top
document.body.scrollTop = top
view.style.top = '220px'
}
}
const scrollTop = ref(0)
const domArr = ref([])
const selectNow = ref('')
onMounted(() => {
// console.clear()
window.addEventListener('scroll', () => {
debugger
domArr.value = document.querySelectorAll(
'.assign-case-detail-page-content-center-card'
)
scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id
}
} else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id
}
} else {
if (
scrollTop.value > domArr.value[i].offsetTop - 50 &&
scrollTop.value < domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
}
}
}
})
})
//点击查看事件
const clickToView = (name) => {
if (name == '道路保洁监管场景') {
window.open('http://15.72.183.90:7001/#/road')
} else {
window.open('http://15.72.183.90:7001/#/city')
}
}
</script>
@ -236,42 +303,42 @@
<style lang="less" scoped>
.assign-case-detail-page {
position: relative;
top: 64px;
top: 0.64rem;
.assign-case-detail-page-header {
height: 370px;
height: 3.7rem;
background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
background-position: center;
background-size: cover;
padding-top: 120px;
padding-top: 1.2rem;
.assign-case-detail-page-header-son {
width: 900px;
height: 250px;
border-radius: 10px;
width: 9rem;
height: 2.5rem;
border-radius: 0.01rem;
background: #fff;
margin: auto;
box-shadow: 5px 5px 20px #f2f3fb;
display: flex;
align-items: center;
padding: 20px;
padding: 0.2rem;
.assign-case-detail-page-header-son-left {
height: 200px;
width: 290px;
height: 2rem;
width: 2.9rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-right: 30px;
margin-right: 0.3rem;
}
.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;
font-size: 0.36rem;
line-height: 0.36rem;
margin-bottom: 0.4rem;
}
.assign-case-detail-page-header-son-right-click {
color: #526aff;
font-size: 20px;
line-height: 20px;
font-size: 0.2rem;
line-height: 0.2rem;
cursor: pointer;
span {
display: inline-block;
@ -280,7 +347,7 @@
margin-right: 10px;
}
span:last-child {
width: 20px;
width: 0.2rem;
height: 10px;
background: url('~@/assets/assignCase/assignCase_click.png')
no-repeat;
@ -292,67 +359,68 @@
}
}
.assign-case-detail-page-content {
padding-top: 60px;
padding-top: 0.6rem;
display: flex;
justify-content: center;
.assign-case-detail-page-content-son {
width: 1300px;
width: 13rem;
display: flex;
}
.assign-case-detail-page-content-left {
width: 167px;
width: 1.67rem;
.assign-case-detail-page-content-left-border {
border-right: 1px #e5e5e5 solid;
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
top: 490px;
top: 4.9rem;
div {
height: 30px;
padding-right: 70px;
margin-bottom: 30px;
height: 0.3rem;
padding-right: 0.7rem;
margin-bottom: 0.3rem;
font-size: 24px;
color: #666666;
line-height: 30px;
line-height: 0.3rem;
cursor: pointer;
}
div:last-child {
margin-bottom: 0px;
}
.assign-case-detail-page-content-left-border-click {
padding-right: 66px;
padding-right: 0.66rem;
border-right: 4px #526aff solid;
color: #526aff;
}
}
}
.assign-case-detail-page-content-center {
width: 845px;
padding: 0 40px 100px 35px;
width: 8.45rem;
padding: 0 0.4rem 1rem 0.35rem;
.assign-case-detail-page-content-center-card {
margin-bottom: 60px;
margin-bottom: 0.6rem;
.assign-case-detail-page-content-center-card-title {
font-size: 28px;
font-size: 0.28rem;
color: #000000;
font-weight: bold;
line-height: 28px;
margin-bottom: 35px;
line-height: 0.28rem;
margin-bottom: 0.35rem;
}
.assign-case-detail-page-content-center-card-description {
color: #333333;
font-size: 20px;
line-height: 34px;
font-size: 0.2rem;
line-height: 0.34rem;
}
}
}
.assign-case-detail-page-content-right {
width: 270px;
height: 260px;
width: 2.7rem;
height: 2.6rem;
display: inline-block;
.assign-case-detail-page-content-right-card {
width: 270px;
height: 260px;
width: 2.7rem;
height: 2.6rem;
border: 1px #e5e5e5 solid;
position: relative;
.assign-case-detail-page-content-right-card-title {
padding-left: 15px;
background: linear-gradient(
@ -360,10 +428,10 @@
rgba(113, 132, 252, 0.8),
rgba(148, 163, 252, 0.8)
);
height: 64px;
height: 0.64rem;
color: #fff;
font-size: 24px;
line-height: 64px;
line-height: 0.64rem;
margin-bottom: 30px;
border-radius: 10px 10px 0 0;
span:first-child {
@ -378,21 +446,33 @@
}
}
.assign-case-detail-page-content-right-card-content {
padding-left: 20px;
padding: 0 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;
.assign-case-detail-page-content-right-card-content-card {
cursor: pointer;
border-bottom: 1px solid #ebebeb;
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;
}
}
}
.no-data {
position: absolute;
bottom: 0.2rem;
font-size: 0.18rem;
color: #cccccc;
width: 2.3rem;
text-align: center;
}
}
}
}

12
front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
View File

@ -49,7 +49,7 @@
})
const router = useRouter()
const applicationArea = ref('')
// 加入申购车
//加入申购车
const addShoppingCart = () => {
console.log('加入申购车==================>', props.dataList)
sgcInsert({
@ -62,7 +62,7 @@
mybus.emit('getSgcNum')
})
}
// 立即申请
//立即申请
function toView() {
// window.open(newpage.href, '_blank')
router.push({
@ -115,10 +115,10 @@
font-size: 14px;
}
.name {
max-width: 330px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// max-width: 330px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
font-size: 40px;
margin-right: 20px;
}

70
front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
View File

@ -22,14 +22,14 @@
</div>
</div>
<div class="bottom" v-if="props.dataList.id">
<a-button type="primary" @click="toView()">
<!-- <a-button type="primary" @click="toView()">
<template #icon><form-outlined /></template>
申请使用
</a-button>
<a-button type="primary" @click="addShoppingCart()">
<template #icon><shopping-cart-outlined /></template>
加入购物车
</a-button>
</a-button> -->
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
</div>
</div>
@ -37,42 +37,42 @@
</div>
</template>
<script setup>
import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter'
import { sgcInsert } from '@/api/home'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus'
// import { sgcInsert } from '@/api/home'
// import { useRouter } from 'vue-router'
// import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue'
const props = defineProps({
dataList: { type: Object, default: null },
})
const router = useRouter()
// const router = useRouter()
const applicationArea = ref('')
// 加入申购车
const addShoppingCart = () => {
console.log('加入申购车==================>', props.dataList)
sgcInsert({
delFlag: '0',
resourceId: props.dataList.id,
// userId: userId.value,
}).then((res) => {
console.log(res)
message.success('添加申购车成功！')
mybus.emit('getSgcNum')
})
}
// 立即申请
function toView() {
// window.open(newpage.href, '_blank')
router.push({
path: '/apply',
query: {
name: props.dataList.name,
resourceId: [props.dataList.id],
},
})
}
// // 加入申购车
// const addShoppingCart = () => {
// console.log('加入申购车==================>', props.dataList)
// sgcInsert({
// delFlag: '0',
// resourceId: props.dataList.id,
// // userId: userId.value,
// }).then((res) => {
// console.log(res)
// message.success('添加申购车成功！')
// mybus.emit('getSgcNum')
// })
// }
// // 立即申请
// function toView() {
// // window.open(newpage.href, '_blank')
// router.push({
// path: '/apply',
// query: {
// name: props.dataList.name,
// resourceId: [props.dataList.id],
// },
// })
// }
// 收藏
const goTOCollection = () => {
console.log('收藏===================》', props.dataList)
@ -115,10 +115,10 @@
font-size: 0.14rem;
}
.name {
max-width: 3.3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// max-width: 3.3rem;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
font-size: 0.4rem;
margin-right: 0.2rem;
}