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-22 17:08:44 +08:00
parent faade9c621
commit 0b0b9af1f1
2 changed files with 124 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
<div class="assign-case-detail-page-header-son">
<div
class="assign-case-detail-page-header-son-left"
:style="`background:url(${pictureFormat(dataFrom.name)})`"
:style="`background:url(${dataFrom.note1})`"
></div>
<div class="assign-case-detail-page-header-son-right">
<div class="assign-case-detail-page-header-son-right-title">
@ -21,7 +21,7 @@
</div>
<div
class="assign-case-detail-page-header-son-right-click"
@click="clickToView(dataFrom.name)"
@click="clickToView(dataFrom.apiUrl)"
>
<span>点击查看</span>
<span></span>
@ -37,33 +37,33 @@
id="assign-case-detail-page-content-left-border-id"
>
<div
v-for="(item, index) in dataFrom.content"
v-for="(item, index) in dataFrom.infoList"
:key="index"
@click="tabSwitch(item, index)"
:class="
tabName == item.title
tabName == item.attrType
? 'assign-case-detail-page-content-left-border-click'
: ''
"
>
{{ item.title }}
{{ item.attrType }}
</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"
v-for="(item, index) in dataFrom.infoList"
:key="index"
:id="'assign-case-detail-page-content-center-card' + index"
>
<div class="assign-case-detail-page-content-center-card-title">
{{ item.title }}
{{ item.attrType }}
</div>
<div
class="assign-case-detail-page-content-center-card-description"
>
{{ item.description }}
{{ item.attrValue }}
<div v-if="item.descriptions">
<p
v-for="(
@ -86,10 +86,12 @@
<div class="assign-case-detail-page-content-right-card-content">
<div
class="assign-case-detail-page-content-right-card-content-card"
@click="routerClick(dataFrom.else.name)"
v-for="(item, index) in dataList"
:key="index"
@click="routerClick(item.id)"
>
<p>{{ dataFrom.else.name }}</p>
<p>{{ dataFrom.else.time }}</p>
<p>{{ item.name }}</p>
<p>{{ item.createDate }}</p>
</div>
</div>
<div class="no-data">暂无更多</div>
@ -106,116 +108,66 @@
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { useRouter } from 'vue-router'
import { selectOne, pageWithAttrs } from '@/api/home'
const router = useRouter()
let val = router.currentRoute.value.query.val
let val = router.currentRoute.value.query.id
const scrollTop = ref(0)
let dataFrom = ref({})
const domArr = ref([])
const selectNow = ref('')
const dataList = ref([])
let tabName = ref('案例背景')
console.log('val', val)
//图片样式切换
function pictureFormat(name) {
if (name == '道路保洁监管场景') {
return require('@/assets/assignCase/road.png')
} else {
return require('@/assets/assignCase/city.png')
}
}
//路由跳转事件
const routerClick = (name) => {
val = name
router.push({ path: 'AssignCaseDetailPage', query: { val } })
const routerClick = (id) => {
router.push({ path: 'AssignCaseDetailPage', query: { id: id } })
}
//初始化数据
const init = () => {
val = router.currentRoute.value.query.val
pageWithAttrsFunction(router.currentRoute.value.query.id)
val = router.currentRoute.value.query.id
tabName.value = '案例背景'
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',
},
selectOne(val).then((res) => {
res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '图片') {
res.data.data.infoList.splice(index, 1)
}
} 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',
},
})
res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '应用领域') {
res.data.data.infoList.splice(index, 1)
}
})
dataFrom.value = res.data.data
console.log('dataFrom.value', dataFrom.value)
})
}
//其他案例
const pageWithAttrsFunction = (id) => {
let params = {
deptIds: [],
districtId: '',
infoList: [],
orderField: 'create_date',
orderType: 'DESC',
pageNum: 1,
pageSize: 99,
type: '赋能案例',
}
pageWithAttrs(params).then((res) => {
res.data.data.records.map((item, index) => {
if (item.id == id) {
res.data.data.records.splice(index, 1)
}
})
dataList.value = res.data.data.records
console.log('dataList.value', dataList.value)
})
}
init()
//监听路由发生变化
watch(
() => router.currentRoute.value.query.val,
() => router.currentRoute.value.query.id,
() => {
init()
},
@ -263,6 +215,7 @@
}
}
onMounted(() => {
init()
// console.clear()
window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll(
@ -291,12 +244,8 @@
})
})
//点击查看事件
const clickToView = (name) => {
if (name == '道路保洁监管场景') {
window.open('http://15.72.183.90:7001/#/road')
} else {
window.open('http://15.72.183.90:7001/#/city')
}
const clickToView = (link) => {
window.open(link)
}
</script>
@ -325,7 +274,7 @@
width: 2.9rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-size: 100%;
margin-right: 0.3rem;
}
.assign-case-detail-page-header-son-right {
@ -414,13 +363,12 @@
}
.assign-case-detail-page-content-right {
width: 2.7rem;
height: 2.6rem;
display: inline-block;
.assign-case-detail-page-content-right-card {
width: 2.7rem;
height: 2.6rem;
border: 1px #e5e5e5 solid;
position: relative;
padding-bottom: 0.6rem;
.assign-case-detail-page-content-right-card-title {
padding-left: 15px;
background: linear-gradient(

92
front/src/views/assignCase/components/queryPage.vue
View File

@ -27,7 +27,12 @@
:ref="txttype"
:class="hidetext == true ? 'hidetext' : ''"
>
<span v-for="(item, index) in tabClickData" :key="index">
<span
v-for="(item, index) in tabClickData"
:key="index"
:class="listBg == item.name ? 'down' : ''"
@click="switchList(item.name)"
>
{{ item.name }}
</span>
</div>
@ -42,23 +47,19 @@
</div>
</div>
<main>
<div class="content">
<div class="content" v-if="resourceTotal != '0'">
<div
class="contenBox"
v-for="(item, index) in contenBox"
:key="index"
>
<img :src="item.photo || ''" alt="" />
<img :src="item.note1 || ''" alt="" />
<h3>{{ item.name }}</h3>
<p>
发布时间
<span>{{ item.time }}</span>
<span>{{ item.createDate }}</span>
</p>
<div class="look" @click="lookContent(item.name)">查看详情</div>
</div>
<div class="contenBox contenBoxImg" v-if="contenBox.length < 3">
<img :src="hopeing" alt="" class="hopeingImg" />
<p>正在研发中...</p>
<div class="look" @click="lookContent(item.id)">查看详情</div>
</div>
</div>
<div class="pagination">
@ -80,38 +81,24 @@
<script setup>
import { ref, onMounted } from 'vue'
// import { useStore } from 'vuex'
import { pageWithAttrs } from '@/api/home.js'
import { useRouter } from 'vue-router'
// import { pinyin } from 'pinyin-pro'
// import { Empty } from 'ant-design-vue'
const router = useRouter()
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',
},
{
photo: require('@/assets/assignCase/important.png'),
name: '重点区域监控平台',
time: '2022-01-01 12:00',
},
])
const hopeing = require('@/assets/assignCase/hopeing.png')
const listBg = ref('')
const contenBox = ref([])
// const hopeing = require('@/assets/assignCase/hopeing.png')
// 分页
const resourceTotal = contenBox.value.length
// const resourceTotal = ref(15)
const resourceTotal = ref('')
const currentPage = ref(1)
const currentPageSize = ref(3)
const pageChange = (val) => {
console.log(val)
currentPage.value = val
//每次改变页码调用接口
init()
}
// 选项卡
const titleName = ref([
@ -180,6 +167,8 @@
if (val == 1) {
tabClickShow.value = true
} else {
let list = []
init(list)
tabClickShow.value = false
}
}
@ -195,11 +184,40 @@
moretext.value = '收起'
}
}
onMounted(() => {})
//点击筛选
const switchList = (name) => {
listBg.value = name
//每次点击应用领域调用接口
let params = []
params[0] = { attrType: '应用领域', attrValue: name }
init(params)
}
//查询分页接口
const init = (list) => {
let params = {
deptIds: [],
districtId: '',
infoList: list || [],
orderField: 'create_date',
orderType: 'DESC',
pageNum: currentPage.value,
pageSize: 3,
type: '赋能案例',
}
pageWithAttrs(params).then((res) => {
console.log('res', res.data.data)
resourceTotal.value = res.data.data.total
contenBox.value = res.data.data.records
})
}
onMounted(() => {
init()
})
// 跳转
const lookContent = (val) => {
router.push({ path: 'AssignCaseDetailPage', query: { val } })
const lookContent = (id) => {
router.push({ path: 'AssignCaseDetailPage', query: { id } })
}
</script>
<style scoped lang="less">
@ -292,6 +310,14 @@
center;
transform: rotate(90deg);
}
.down {
display: inline-block;
line-height: 30px;
padding: 5px 10px;
background-color: #0087ff;
color: #ffffff;
border-radius: 0.16rem;
}
}
.tabClick {
height: 80px;