lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善功能

Browse Source
This commit is contained in:
zjc
2025-01-20 04:09:56 +08:00
parent 46c737fb93
commit 65244492b4
40 changed files with 2303 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/home.js
View File

@@ -17,6 +17,15 @@ export function getVideoListApi(data) {
}) })
} }
// 刷新播放地址
export function getPreviewUrlApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/getPreviewUrl',
method: 'post',
data
})
}
// 刷新播放地址 // 刷新播放地址
export function postRefreshApi(data) { export function postRefreshApi(data) {
return request({ return request({
@@ -34,6 +43,15 @@ export function getSpotListApi() {
}) })
} }
// 百度地图详情
export function getBaiduMapApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/spot/baiduMap',
method: 'get',
params: data
})
}
// 百度地图拥堵 // 百度地图拥堵
export function getBaiduMapCrowdedApi(data) { export function getBaiduMapCrowdedApi(data) {
return request({ return request({

28
src/api/monitor.js Normal file
View File

@@ -0,0 +1,28 @@
import request from './request'
// 安全页面视频类型
export function getVideoTypeApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/type',
method: 'post',
data
})
}
// 获取区域树
export function getVideoRegionsApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/regions',
method: 'post',
data
})
}
// 更新视频资源
export function postVideoRemainApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/remain',
method: 'post',
data
})
}

24
src/api/traffic.js
View File

@@ -1,5 +1,21 @@
import request from './request' import request from './request'
// 路段统计
export function getRouterStateApi() {
return request({
url: '/fjtcc-api/api/largeScreen/router/state ',
method: 'get'
})
}
// 统计图表
export function getRouterChartsApi() {
return request({
url: '/fjtcc-api/api/largeScreen/router/charts ',
method: 'get'
})
}
// 交通路段 // 交通路段
export function getRouterListApi() { export function getRouterListApi() {
return request({ return request({
@@ -7,3 +23,11 @@ export function getRouterListApi() {
method: 'get' method: 'get'
}) })
} }
// 交通拥堵
export function getRoutersApi() {
return request({
url: '/fjtcc-api/api/largeScreen/router/routes',
method: 'get'
})
}

BIN
src/assets/images/cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 373 KiB

BIN
src/assets/images/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/assets/images/monotir-bg-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 116 KiB

BIN
src/assets/images/node.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 B

BIN
src/assets/images/queue.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 43 KiB

12
src/components/CoreVideo/index.vue
View File

@@ -11,7 +11,7 @@
> >
<div> <div>
<p class="item-title--primary"> <p class="item-title--primary">
{{ item.cameraName }} {{ item.cameraName || item.cameraIndexCode }}
</p> </p>
<video <video
class="item-img" class="item-img"
@@ -27,7 +27,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<VideoDialog v-model="videoShow" :src="src" /> <video-dialog v-model="videoShow" :src="src" />
</template> </template>
<script setup> <script setup>
@@ -47,7 +47,7 @@
const getVideoList = async () => { const getVideoList = async () => {
let res = await getVideoListApi({ let res = await getVideoListApi({
businessVideoDisplayPosition: 'core_scenic_area_video' businessVideoDisplayPosition: '核心景区视频'
}) })
list.value = res.data list.value = res.data
nextTick(() => { nextTick(() => {
@@ -59,7 +59,11 @@
cameraIndexCode: item.cameraIndexCode cameraIndexCode: item.cameraIndexCode
}) })
item.hlsUrl = res1.data.hlsUrl item.hlsUrl = res1.data.hlsUrl
const hls = new Hls() const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(res1.data.hlsUrl) hls.loadSource(res1.data.hlsUrl)
hls.attachMedia(video) hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => { hls.on(Hls.Events.MANIFEST_PARSED, () => {

1
src/components/Correspondence/index.vue
View File

@@ -20,7 +20,6 @@
<div class="header"> <div class="header">
<div>人员姓名</div> <div>人员姓名</div>
<div>部门</div> <div>部门</div>
<div>时间</div> <div>时间</div>
</div> </div>
<div class="list"> <div class="list">

28
src/components/Header/index.vue
View File

@@ -65,8 +65,10 @@
<script setup> <script setup>
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import title2 from '@/assets/images/title-2.png' import title2 from '@/assets/images/title-2.png'
import title2Select from '@/assets/images/title-2-select.png' import title2Select from '@/assets/images/title-2-select.png'
import { getWeatherApi } from '@/api/home' import { getWeatherApi } from '@/api/home'
import { getSpotListApi } from '@/api/sentiment' import { getSpotListApi } from '@/api/sentiment'
@@ -115,9 +117,9 @@
minute minute
)}:${fillZero(second)}` )}:${fillZero(second)}`
} }
// 返回上一页 // 返回首页
const handleBack = () => { const handleBack = () => {
router.go(-1) router.push('/home')
} }
const handleCommand = () => {} const handleCommand = () => {}
// 点击导航 // 点击导航
@@ -129,7 +131,14 @@
otherScenic.value = '' otherScenic.value = ''
current.value = index current.value = index
title.value = item.name title.value = item.name
switch (router.currentRoute.value.path) {
case '/scenic':
pubSub.publish('scenicChange', item) pubSub.publish('scenicChange', item)
break
case '/monitor':
pubSub.publish('monitorChange', item)
break
}
} }
} }
@@ -153,7 +162,7 @@
isSkip.value = true isSkip.value = true
isBack.value = false isBack.value = false
navLeft.value = [ navLeft.value = [
{ name: '安全', path: '/monitor' }, { name: '监控', path: '/monitor' },
{ name: '景区', path: '/scenic' }, { name: '景区', path: '/scenic' },
{ name: '交通', path: '/traffic' } { name: '交通', path: '/traffic' }
] ]
@@ -167,13 +176,12 @@
isBack.value = true isBack.value = true
let res = await getSpotListApi() let res = await getSpotListApi()
navLeft.value = res.data navLeft.value = res.data
current.value = 0
title.value = navLeft.value[current.value].name title.value = navLeft.value[current.value].name
pubSub.publish('scenicChange', navLeft.value[current.value]) pubSub.publish('scenicChange', navLeft.value[current.value])
break break
case '/sentiment': case '/sentiment':
title.value = '舆情检测' title.value = '舆情检测'
isBack.value = true isBack.value = true
break break
case '/workOrder': case '/workOrder':
@@ -186,8 +194,16 @@
break break
case '/monitor': case '/monitor':
title.value = '监控大屏' title.value = '监控大屏'
isSkip.value = false
let res1 = await getSpotListApi() let res1 = await getSpotListApi()
navLeft.value = res1.data navLeft.value = [
{
name: '奉节县',
scenicSpotId: ''
},
...res1.data
]
current.vlaue = ''
isBack.value = true isBack.value = true
break break
case '/sceneTesting': case '/sceneTesting':

3
src/components/Nav/index.vue
View File

@@ -13,7 +13,6 @@
<div class="title"> <div class="title">
<span>检索</span> <span>检索</span>
</div> </div>
<div class="search-box flex"> <div class="search-box flex">
<el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input> <el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" /> <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
@@ -56,6 +55,8 @@
default: () => true default: () => true
} }
}) })
onMounted(() => {})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
//背景色设置为透明 //背景色设置为透明

4
src/components/PieRow/index.vue
View File

@@ -84,7 +84,7 @@
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
name: { name: {
color: '#7894A8', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
} }
@@ -108,7 +108,7 @@
} }
defaultCofig.series[0].data = props.dataList defaultCofig.series[0].data = props.dataList
defaultCofig.series[0].label.formatter = () => { defaultCofig.series[0].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|舆情总数 }` return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
} }
setOption({ setOption({
...defaultCofig, ...defaultCofig,

40
src/components/VideoDialog/index.vue
View File

@@ -1,9 +1,18 @@
<template> <template>
<div class="dialog"> <div class="dialog">
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false"> <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
<video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover"> <video
v-if="src"
class="video"
ref="videoRef"
muted
autoplay
controls
style="object-fit: cover"
>
<source src="" type="application/x-mpegURL" /> <source src="" type="application/x-mpegURL" />
</video> </video>
<p v-else class="none">暂无信号</p>
<img class="close" src="@/assets/images/close.png" @click="modelValue = false" /> <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
</el-dialog> </el-dialog>
</div> </div>
@@ -37,7 +46,11 @@
) )
const init = () => { const init = () => {
const hls = new Hls() const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 15 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(props.src) hls.loadSource(props.src)
hls.attachMedia(videoRef.value) hls.attachMedia(videoRef.value)
hls.on(Hls.Events.MANIFEST_PARSED, () => { hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -49,10 +62,23 @@
<style scoped lang="scss"> <style scoped lang="scss">
.dialog { .dialog {
z-index: 9999; z-index: 9999;
.none {
position: absolute;
left: 50%;
top: 50%;
color: #fff;
font-weight: bold;
font-size: vw(30);
transform: translate(-50%, -50%);
z-index: 999;
}
:deep(.el-dialog) { :deep(.el-dialog) {
width: vw(1600); position: relative;
height: vw(900); width: vw(1660);
padding: 0; height: vw(980);
padding: vw(40) vw(30) vw(30) vw(30);
background-image: url('@/assets/images/one-video-bg.png');
background-size: 100% 100%;
} }
:deep(.el-dialog__header) { :deep(.el-dialog__header) {
padding-bottom: 0 !important; padding-bottom: 0 !important;
@@ -64,8 +90,8 @@
.close { .close {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: vw(20); right: vw(40);
top: vw(20); top: vw(50);
width: vw(60); width: vw(60);
z-index: 9999; z-index: 9999;
} }

254
src/components/monitor/index.vue
View File

@@ -1,4 +1,54 @@
<template> <template>
<div class="left-nav">
<div v-if="showNav" class="top-box">
<div class="ul">
<div
class="li"
:class="{ active: current == index }"
v-for="(item, index) in navList"
:key="index"
>
{{ item.dictLabel }}
</div>
</div>
</div>
<div class="bom-box">
<div class="title">
<span>检索</span>
</div>
<div class="search-box flex">
<el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
</div>
<div class="tree-box">
<div class="tree-a">
<span class="name-1">核心点位</span>
<div class="tree-b">
<span class="name-2">摄像头1</span>
<span class="name-2 activee">摄像头1</span>
<span class="name-2">摄像头1</span>
</div>
</div>
<div class="tree-a">
<span class="name-1">核心点位</span>
<div class="tree-b">
<span class="name-2">摄像头1</span>
<span class="name-2 activee">摄像头1</span>
<span class="name-2">摄像头1</span>
</div>
</div>
<div class="tree-a">
<span class="name-1">其他</span>
<div class="tree-b" v-if="true">
<span class="name-2">摄像头1</span>
<span class="name-2 activee">摄像头1</span>
<span class="name-2">摄像头1</span>
</div>
</div>
</div>
</div>
</div>
<div v-if="videoLog == 1" class="video-wrapper"> <div v-if="videoLog == 1" class="video-wrapper">
<div class="video-list"> <div class="video-list">
<div <div
@@ -76,16 +126,24 @@
<script setup> <script setup>
import { postRefreshApi } from '@/api/home' import { postRefreshApi } from '@/api/home'
import { getVideoTypeApi } from '@/api/monitor'
import Hls from 'hls.js' import Hls from 'hls.js'
let props = defineProps({ let props = defineProps({
list: { list: {
type: Array, type: Array,
default: () => [] default: () => []
},
showNav: {
type: Boolean,
default: () => true
} }
}) })
const videoList = ref([]) let videoList = ref([])
let navList = ref([])
let current = ref(0)
watch( watch(
() => props.list, () => props.list,
@@ -151,9 +209,203 @@
if (type == 100) initVideo() if (type == 100) initVideo()
}) })
} }
const getVideoType = async () => {
let res = await getVideoTypeApi({
businessScenicArea: '',
businessVideoDisplayPosition: ''
})
navList.value = res.data
}
onMounted(() => {
getVideoType()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
//背景色设置为透明
:deep(.el-input__wrapper) {
background-color: rgba(0, 0, 0, 0);
border: none;
box-shadow: none;
}
//输入框颜色
:deep(.el-input__inner) {
background-color: rgba(0, 0, 0, 0) !important;
color: #fff;
}
.left-nav {
margin-left: vw(10);
// margin-top:vh(35);
width: vw(250);
.bom-box {
margin-top: vh(20);
.search-box {
background: rgba(217, 217, 217, 0);
border-radius: 2px 2px 2px 2px;
border: 1px solid #0096ff;
margin: vw(20) auto;
display: flex;
justify-content: space-between;
align-items: center;
.search-icon {
width: vw(16);
height: vh(16);
margin: 0 vw(20);
}
}
.tree-box::before {
position: absolute;
top: vw(-8);
left: vw(-8);
content: '';
width: vw(12);
height: vw(12);
background-image: url('/src/assets/images/icon-a-1.png');
background-size: 100% 100%;
}
.tree-box::after {
position: absolute;
content: '';
width: vw(12);
height: vw(12);
background-image: url('/src/assets/images/icon-a-1.png');
background-size: 100% 100%;
bottom: vw(-4);
left: vw(-8);
}
.tree-box {
margin-left: vw(10);
margin-top: vh(20);
position: relative;
border-left: vw(3) solid;
border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
.tree-a {
.name-1 {
padding: 0 vw(20);
display: block;
font-weight: 400;
font-size: vw(15);
color: #ffffff;
height: vh(30);
line-height: vh(30);
text-align: left;
font-style: normal;
text-transform: none;
}
}
.tree-b::before {
position: absolute;
top: vw(-8);
left: vw(-8);
content: '';
width: vw(12);
height: vw(12);
background-image: url('/src/assets/images/icon-a-1.png');
background-size: 100% 100%;
}
// .tree-b::after{
// position:absolute;
// content: '';
// width:vw(12);
// height:vw(12);
// background-image: url('/src/assets/images/icon-a-1.png');
// background-size:100% 100%;
// bottom:vw(-4);
// left:vw(-8);
// }
.tree-b {
// margin-top:vh(20);
position: relative;
border-left: vw(3) solid;
border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
margin-left: vw(30);
margin-top: vh(10);
.name-2 {
padding: 0 vw(20);
display: block;
font-weight: 400;
font-size: vw(15);
color: #ffffff;
height: vh(30);
line-height: vh(30);
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
.tree-box .tree-a:first-child {
position: relative;
top: vh(-15);
}
.tree-box .tree-a:last-child {
position: relative;
bottom: vh(-12);
}
.title {
background-image: url('/src/assets/images/nav-l-t-bg.png');
background-size: 100% 100%;
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
}
.top-box {
text-align: left;
font-weight: 400;
font-size: vw(18);
color: rgba(255, 255, 255, 0.7);
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
.title {
font-weight: 600;
font-size: vw(15);
text-align: left;
font-style: normal;
text-transform: none;
height: vh(35);
line-height: vh(34);
padding-left: vw(20);
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
}
.ul {
.li {
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
width: vw(250);
height: vh(58);
line-height: vh(58);
text-align: center;
margin-bottom: vh(15);
}
.active {
background: url('/src/assets/images/m-nav-bg-2.png');
background-size: 100% 100%;
// width:vw(178);
}
}
}
}
.video { .video {
&-wrapper { &-wrapper {
width: 100%; width: 100%;

3
src/hooks/map.js
View File

@@ -7,9 +7,6 @@ export function useMap() {
map.value = new BMapGL.Map(id) map.value = new BMapGL.Map(id)
map.value.centerAndZoom(new BMapGL.Point(lat, lng), scale) map.value.centerAndZoom(new BMapGL.Point(lat, lng), scale)
map.value.enableScrollWheelZoom(true) map.value.enableScrollWheelZoom(true)
map.value.setMapStyleV2({
styleId: '23c9fb8e1c604995f97f0f1cebd7036f'
})
if (satellite) map.value.setMapType(BMAP_SATELLITE_MAP) if (satellite) map.value.setMapType(BMAP_SATELLITE_MAP)
} }

4
src/utils/config.js
View File

@@ -1,7 +1,7 @@
export const baseUrl = 'http://36.138.38.16:8001' export const baseUrl = 'http://36.138.38.16:8001' // 'http://36.138.38.16:8001'
export const proBaseUrl = 'http://192.168.77.200' export const proBaseUrl = 'http://192.168.77.200'
export const socketBaseUrl = 'ws://36.138.38.16:81' export const socketBaseUrl = 'ws://36.138.38.16:81' // ws://36.138.38.16:81
export const proSocketBaseUrl = 'ws://192.168.77.200:8060' export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
export const mode = 'pro' // 测试 dev 正式 pro export const mode = 'pro' // 测试 dev 正式 pro

2
src/views/home/components/age.vue
View File

@@ -41,7 +41,7 @@
itemGap: fitChartSize(10), itemGap: fitChartSize(10),
formatter: function (name) { formatter: function (name) {
let obj = props.list.find((item) => item.name == name) let obj = props.list.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj.value + '}{value|%}' return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
}, },
textStyle: { textStyle: {
rich: { rich: {

26
src/views/home/components/box-1.vue
View File

@@ -1,10 +1,6 @@
<template> <template>
<div class="box-2"> <div class="box-2">
<Title1 title="景区信息"> <Title1 title="景区信息" />
<template #right>
<img class="more" src="@/assets/images/more.png" />
</template>
</Title1>
<div class="list flex pt-20"> <div class="list flex pt-20">
<div class="item" v-for="(item, index) in homeStore.scenicData.scenicSpot" :key="index"> <div class="item" v-for="(item, index) in homeStore.scenicData.scenicSpot" :key="index">
<img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" /> <img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
@@ -18,7 +14,7 @@
</div> </div>
<div class="flex pt-20"> <div class="flex pt-20">
<div class="box"> <div class="box">
<Title2 title="景区排队人数" /> <Title2 title="景区排队" />
<div class="statistic"> <div class="statistic">
<div <div
class="statistic-item" class="statistic-item"
@@ -48,7 +44,7 @@
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<Title2 title="景区承载量" /> <Title2 title="景区承载" />
<div class="statistic"> <div class="statistic">
<div <div
class="statistic-item" class="statistic-item"
@@ -73,7 +69,7 @@
</div> </div>
<div class="ticket-box"> <div class="ticket-box">
<Title2 title="景区购票数" /> <Title2 title="景区购票" />
<div class="ticket-wrap"> <div class="ticket-wrap">
<img src="@/assets/images/ticket.png" /> <img src="@/assets/images/ticket.png" />
<div v-for="(item, index) in homeStore.scenicData.data" :key="index"> <div v-for="(item, index) in homeStore.scenicData.data" :key="index">
@@ -86,7 +82,7 @@
<Title1 title="游客画像" /> <Title1 title="游客画像" />
<div class="flex"> <div class="flex">
<div class="age-box"> <div class="age-box">
<Title3 title="年龄/性别占比" /> <Title3 title="年龄/性别" />
<div class="mt-8"> <div class="mt-8">
<age :list="homeStore.userPortraitData?.ageRate" /> <age :list="homeStore.userPortraitData?.ageRate" />
</div> </div>
@@ -115,12 +111,12 @@
</div> </div>
<div class="box-1"> <div class="box-1">
<Title3 title="客源地分析TOP5" /> <Title3 title="客源地TOP5" />
<top /> <top />
</div> </div>
<div class="box-1"> <div class="box-1">
<Title3 title="购票来源" /> <Title3 title="购票渠道" />
<div v-if="channelTotal > 0" class="count"> <div v-if="channelTotal > 0" class="count">
游客总数：<countup :end-val="channelTotal" /> 游客总数：<countup :end-val="channelTotal" />
</div> </div>
@@ -184,14 +180,6 @@
box-sizing: border-box; box-sizing: border-box;
background-image: url('@/assets/images/bg-2.png'); background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%; background-size: 100% 100%;
.more {
position: absolute;
top: vh(0);
right: vw(20);
cursor: pointer;
width: vw(60);
height: auto;
}
.dropdown { .dropdown {
position: absolute; position: absolute;
right: vw(8); right: vw(8);

118
src/views/home/components/box-2.vue
View File

@@ -125,7 +125,7 @@
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll' import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import ScrollNumber from '@/components/ScrollNumber/index.vue' import ScrollNumber from '@/components/ScrollNumber/index.vue'
import { getSpotListApi, getBaiduMapCrowdedApi } from '@/api/home' import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
import icon8 from '@/assets/images/icon-8.png' import icon8 from '@/assets/images/icon-8.png'
import icon9 from '@/assets/images/icon-9.png' import icon9 from '@/assets/images/icon-9.png'
@@ -139,7 +139,7 @@
let emit = defineEmits(['switch-spot']) let emit = defineEmits(['switch-spot'])
const { map, initMap, addMarker } = useMap() const { map, initMap } = useMap()
let spotList = ref([]) let spotList = ref([])
@@ -161,6 +161,7 @@
icon: icon11 icon: icon11
} }
]) ])
let current = ref(0)
const handleMap = (e) => { const handleMap = (e) => {
emit('switch-spot', e) emit('switch-spot', e)
// map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16) // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)
@@ -168,26 +169,17 @@
const getSpotList = async () => { const getSpotList = async () => {
let res = await getSpotListApi() let res = await getSpotListApi()
spotList.value = res.data spotList.value = res.data
let res1 = await getBaiduMapCrowdedApi({ getBaiduMap()
nodeId: res.data[0].nodeid }
const getBaiduMap = async () => {
let res = await getBaiduMapApi({
nodeid: 7162
}) })
console.log(res1, 'res1') initMap('map', res.data.index.lng, res.data.index.lat, 15, false)
} map.value.setMapStyleV2({
styleId: 'd1e61f575b3ef4e2df71ab6a5690ddab' // 23c9fb8e1c604995f97f0f1cebd7036fF
watch( })
() => homeStore?.baiduMapData, res.data.list.map((item) => {
(val) => {
if (val) {
setTimeout(() => {
init(val)
}, 1000)
}
},
{ immediate: true }
)
const init = (val) => {
initMap('map', val.index.lng, val.index.lat, 15, false)
val.list.map((item) => {
item.map((i) => { item.map((i) => {
// 创建折线 // 创建折线
let arr = [] let arr = []
@@ -195,14 +187,94 @@
arr.push(new BMapGL.Point(j[0], j[1])) arr.push(new BMapGL.Point(j[0], j[1]))
}) })
var polyline = new BMapGL.Polyline(arr, { var polyline = new BMapGL.Polyline(arr, {
strokeColor: '#38DBFF', strokeColor: '#9AFF02',
strokeWeight: 4, strokeWeight: 8,
strokeOpacity: 0.8 strokeOpacity: 0.8
}) })
map.value.addOverlay(polyline) map.value.addOverlay(polyline)
}) })
}) })
getBaiduMapCrowded()
} }
const getBaiduMapCrowded = async () => {
let res = await getBaiduMapCrowdedApi({
nodeid: spotList.value[current.value].nodeid
})
let data = res.data
if (data) {
data.forEach((bmci) => {
let linkStates = JSON.parse(bmci.link_states)
for (let key in linkStates) {
let bmciArr = []
if (linkStates.hasOwnProperty(key)) {
let bm = []
if (key == 1) {
bm = linkStates[key].split(';')
bm.forEach((bmItem) => {
bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
var bmciPolyline = new BMapGL.Polyline(bmciArr, {
strokeColor: 'red',
strokeWeight: 8,
strokeOpacity: 0.8
})
map.value.addOverlay(bmciPolyline)
})
} else if (key == 2) {
bm = linkStates[key].split(';')
bm.forEach((bmItem) => {
bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
var bmciPolyline = new BMapGL.Polyline(bmciArr, {
strokeColor: 'red',
strokeWeight: 8,
strokeOpacity: 0.8
})
map.value.addOverlay(bmciPolyline)
})
} else if (key == 3) {
bm = linkStates[key].split(';')
bm.forEach((bmItem) => {
bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
var bmciPolyline = new BMapGL.Polyline(bmciArr, {
strokeColor: 'red',
strokeWeight: 8,
strokeOpacity: 0.8
})
map.value.addOverlay(bmciPolyline)
})
} else if (key == 4) {
bm = linkStates[key].split(';')
bm.forEach((bmItem) => {
bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
var bmciPolyline = new BMapGL.Polyline(bmciArr, {
strokeColor: 'red',
strokeWeight: 8,
strokeOpacity: 0.8
})
map.value.addOverlay(bmciPolyline)
})
} else {
bm = linkStates[key].split(';')
bm.forEach((bmItem) => {
bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
var bmciPolyline = new BMapGL.Polyline(bmciArr, {
strokeColor: 'red',
strokeWeight: 8,
strokeOpacity: 0.8
})
map.value.addOverlay(bmciPolyline)
})
}
}
}
})
}
}
onMounted(() => { onMounted(() => {
getSpotList() getSpotList()
}) })

22
src/views/home/components/box-3.vue
View File

@@ -62,11 +62,11 @@
<div> <div>
<img class="icon" src="@/assets/images/icon-5.png" alt="" /> <img class="icon" src="@/assets/images/icon-5.png" alt="" />
<div> <div>
<div class="label">车库总数</div> <div class="label">停车场总数</div>
<countup class="value" :end-val="homeStore.carStopInfoData.countInfo.ckzs" /> <countup class="value" :end-val="homeStore.carStopInfoData.countInfo.ckzs" />
</div> </div>
<div> <div>
<div class="label">总车位数</div> <div class="label">车位总数</div>
<countup class="value" :end-val="homeStore.carStopInfoData.countInfo.zcws" /> <countup class="value" :end-val="homeStore.carStopInfoData.countInfo.zcws" />
</div> </div>
<div> <div>
@@ -101,13 +101,13 @@
</div> </div>
<div class="box-1"> <div class="box-1">
<div class="pt-10"> <div class="pt-10">
<Title3 title="车源地" /> <Title3 title="车源地TOP5" />
<vehicle-source :list="homeStore.carStopInfoData.dataList1" /> <vehicle-source :list="homeStore.carStopInfoData.dataList1" />
</div> </div>
</div> </div>
<div class="box-1"> <div class="box-1">
<div class="pt-10"> <div class="pt-10">
<Title3 title="景区停车场空位" /> <Title3 title="停车场空余" />
<vacancy :list="homeStore.carStopInfoData.dataList2" /> <vacancy :list="homeStore.carStopInfoData.dataList2" />
</div> </div>
</div> </div>
@@ -212,14 +212,14 @@
<countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" /> <countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" />
</div> </div>
<div class="item"> <div class="item">
<div class="label">总入住</div> <div class="label">当前入住总数</div>
<countup <countup
class="value success" class="value success"
:end-val="homeStore.hotelData?.info?.total_guest_count || 0" :end-val="homeStore.hotelData?.info?.total_guest_count || 0"
/> />
</div> </div>
<div class="item"> <div class="item">
<div class="label">总入住率</div> <div class="label">当前入住率</div>
<div class="flex align-center"> <div class="flex align-center">
<countup <countup
class="value success" class="value success"
@@ -241,11 +241,11 @@
</template> </template>
<script setup> <script setup>
import jamDuration from './jam-duration.vue' import jamDuration from './jam-duration'
import jamCount from './jam-count.vue' import jamCount from './jam-count'
import vacancy from './vacancy.vue' import vacancy from './vacancy'
import occupancy from './occupancy.vue' import occupancy from './occupancy'
import vehicleSource from './vehicle-source.vue' import vehicleSource from './vehicle-source'
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll' import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { useHomeStore } from '@/stores/home' import { useHomeStore } from '@/stores/home'

12
src/views/home/components/ticket.vue
View File

@@ -47,13 +47,13 @@
{ {
value: parseFloat(item.value), value: parseFloat(item.value),
name: item.name name: item.name
},
{
value: 100,
itemStyle: {
color: '#07439C'
}
} }
// {
// value: 100,
// itemStyle: {
// color: '#07439C'
// }
// }
] ]
} }
}) })

4
src/views/home/components/vacancy.vue
View File

@@ -122,10 +122,8 @@
axisLine: 'none', axisLine: 'none',
show: true, show: true,
axisLabel: { axisLabel: {
textStyle: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(12),
},
verticalAlign: 'bottom', verticalAlign: 'bottom',
padding: [0, 0, 6, 0], padding: [0, 0, 6, 0],
inside: true, inside: true,

2
src/views/home/components/vehicle-source.vue
View File

@@ -86,10 +86,8 @@
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
textStyle: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(10) fontSize: fitChartSize(10)
}
}, },
itemStyle: { itemStyle: {
borderRadius: [0, 0, 0, 0], borderRadius: [0, 0, 0, 0],

6
src/views/home/index.vue
View File

@@ -9,14 +9,14 @@
import box2 from './components/box-2.vue' import box2 from './components/box-2.vue'
import box3 from './components/box-3.vue' import box3 from './components/box-3.vue'
import { useWebSocket } from '@/hooks/socket'
import { useHomeStore } from '@/stores/home' import { useHomeStore } from '@/stores/home'
import { useWebSocket } from '@/hooks/socket'
import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config' import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
const homeStore = useHomeStore()
const { isConnected, dataRes, sendMessage } = useWebSocket( const { isConnected, dataRes, sendMessage } = useWebSocket(
`${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/third-party` `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/third-party`
) )
const homeStore = useHomeStore()
watch( watch(
() => isConnected.value, () => isConnected.value,
@@ -26,7 +26,7 @@
JSON.stringify({ JSON.stringify({
action: 'start', action: 'start',
type: 'index', type: 'index',
scenicSpot: '4' scenicSpot: ''
}) })
) )
} }

76
src/views/monitor/components/alarmRate.vue
View File

@@ -29,25 +29,45 @@
const { id, setOption } = useEchart() const { id, setOption } = useEchart()
var defaultCofig = { let params = null
let getTotal = () => {
return props.dataList.reduce((per, cur) => {
return per + cur.count
}, 0)
}
let defaultCofig = {
color: [], color: [],
legend: { legend: {
orient: 'vertical', orient: 'vertical',
bottom: 'center', y: 'center',
left: '50%', left: '50%',
itemWidth: fitChartSize(12), itemWidth: fitChartSize(12),
itemHeight: fitChartSize(12), itemHeight: fitChartSize(12),
itemGap: fitChartSize(10), itemGap: fitChartSize(6),
formatter: (name) => {
let obj = props.dataList.find((item) => item.name == name)
return `{name|${name}} {value|${obj?.value}}{value|%}`
},
textStyle: { textStyle: {
color: '#ffffff', rich: {
fontSize: fitChartSize(16) name: {
color: '#fff',
fontSize: fitChartSize(12)
},
value: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
} }
}, },
series: [ series: [
{ {
type: 'pie', type: 'pie',
center: ['30%', '50%'], center: ['24%', '50%'],
radius: ['30%', '40%'], radius: ['35%', '50%'],
itemStyle: { itemStyle: {
borderWidth: fitChartSize(4), borderWidth: fitChartSize(4),
borderColor: '#093672' borderColor: '#093672'
@@ -64,7 +84,7 @@
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
name: { name: {
color: '#7894A8', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
} }
@@ -79,28 +99,40 @@
watch( watch(
() => props.dataList, () => props.dataList,
(newVal) => { (val) => {
if (newVal.length > 0) { if (val.length > 0) {
nextTick(() => { setTimeout(() => {
defaultCofig.color = props.colors init()
defaultCofig.series[0].data = props.dataList }, 1000)
defaultCofig.series[0].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|工单总数}`
}
setOption({
...defaultCofig,
...props.config
})
})
} }
}, },
{ immediate: true } { immediate: true }
) )
const init = () => {
if (!params) {
defaultCofig.color = props.colors
defaultCofig.series[0].data = props.dataList
defaultCofig.series[0].label.formatter = () => {
return `{value|${getTotal()}}` + '\n' + `{name|告警总数}`
}
params = {
...defaultCofig,
...props.config
}
} else {
params.series[0].data = props.dataList
params.series[0].label.formatter = () => {
return `{value|${getTotal()}}` + '\n' + `{name|告警总数}`
}
}
setOption(params)
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.alarmRate { .alarmRate {
width: vw(240); width: vw(380);
height: vh(200); height: vh(200);
} }
</style> </style>

111
src/views/monitor/components/alarmToday.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<div class="alarm-today" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
const { id, setOption } = useEchart()
let props = defineProps({
list: {
type: Array,
default: () => []
}
})
watch(
() => props.list,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{ immediate: true }
)
let params = null
const getSeriesData = () => {
return props.list.map((item) => {
return {
...item,
itemStyle: {
color: '#0D53FF'
}
}
})
}
const getXAxisData = () => {
return props.list.map((item) => item.name)
}
const init = () => {
if (!params) {
params = {
grid: {
left: '4%',
right: '4%',
top: '10%',
bottom: '4%',
containLabel: true
},
xAxis: {
boundaryGap: true,
type: 'category',
data: getXAxisData(),
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(5, 72, 134, 1)'
}
},
axisLabel: {
fontSize: fitChartSize(12),
color: '#fff'
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: fitChartSize(12),
color: 'rgba(255,255,255,0.9)'
},
splitLine: {
show: false
}
},
series: [
{
type: 'bar',
data: getSeriesData(),
barWidth: fitChartSize(20),
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: fitChartSize(10)
}
}
}
]
}
} else {
params.xAxis.data = getXAxisData()
params.series[0].data = getSeriesData()
}
setOption(params)
}
</script>
<style scoped lang="scss">
.alarm-today {
width: vw(400);
height: vh(200);
}
</style>

435
src/views/monitor/components/box-1.vue
View File

@@ -1,174 +1,357 @@
<template> <template>
<div class="box-1"> <div class="box-1">
<template v-if="!scenicSpotId">
<Title1 title="交通信息" /> <Title1 title="交通信息" />
<div class="traffic"> <div class="traffic">
<div class="traffic-item"> <div class="traffic-item" v-for="(item, index) in trafficData" :key="index">
<span class="traffic-item__title">总核心监控点位</span> <span class="traffic-item__title">{{ item.name }}</span>
<countup class="traffic-item__value--primary" end-val="895" /> <countup
</div> :class="{
<div class="traffic-item"> 'traffic-item__value--primary': item.type == 0,
<span class="traffic-item__title">总核心监控点位</span> 'traffic-item__value--success': item.type == 1,
<countup class="traffic-item__value--success" end-val="895" /> 'traffic-item__value--error': item.type == 2
</div> }"
<div class="traffic-item"> :end-val="item.value"
<span class="traffic-item__title">总核心监控点位</span> />
<countup class="traffic-item__value--error" end-val="895" />
</div> </div>
</div> </div>
<Title1 title="景区信息" /> <Title1 title="景区信息" />
<div class="scenic"> <div class="scenic">
<div class="scenic-item"> <div class="scenic-item" v-for="(item, index) in scenicSpotData.headList" :key="index">
<span class="scenic-item__label">核心路段监控点位</span> <span class="scenic-item__label">{{ item.name }}</span>
<countup class="scenic-item__value" end-val="895" /> <countup class="scenic-item__value" :end-val="item.value" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">核心景区分析点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">异常点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">异常告警</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">已处理</span>
<countup class="scenic-item__value" end-val="895" />
</div> </div>
</div> </div>
<div class="flex pt-20"> <div class="flex pt-20">
<div class="box"> <div class="box">
<Title3 title="异常告警" /> <Title3 title="异常告警" />
<Line <Line :width="370" :height="180" :data="abnormalData" :xAxisData="abnormalXAxisData" />
:width="370"
:height="180"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div> </div>
<div class="box"> <div class="box">
<Title3 title="异常告警占比" /> <Title3 title="异常告警占比" />
<div class="flex"> <div class="flex">
<alarmRate :dataList="dataList" /> <alarmRate :dataList="scenicSpotData.dataLists" />
<alarmList /> <!-- <alarmList /> -->
</div> </div>
</div> </div>
</div> </div>
<Title1 title="交通信息" /> <Title1 title="交通信息" />
<div class="scenic"> <div class="scenic">
<div class="scenic-item"> <div
<span class="scenic-item__label">核心路段监控点位</span> class="scenic-item"
<countup class="scenic-item__value" end-val="895" /> v-for="(item, index) in trafficAbnormalityData.headList"
</div> :key="index"
<div class="scenic-item"> >
<span class="scenic-item__label">核心景区分析点位</span> <span class="scenic-item__label">{{ item.name }}</span>
<countup class="scenic-item__value" end-val="895" /> <countup class="scenic-item__value" :end-val="item.value" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">拥堵路段</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">拥堵告警</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">已处理</span>
<countup class="scenic-item__value" end-val="895" />
</div> </div>
</div> </div>
<div class="flex pt-20"> <div class="flex pt-20">
<div class="box"> <div class="box">
<Title3 title="异常告警" /> <Title3 title="拥堵告警" />
<Line <Line :width="370" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
:width="370"
:height="180"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div> </div>
<div class="box"> <div class="box">
<Title3 title="拥堵告警占比" />
<div class="flex">
<alarmRate :dataList="trafficAbnormalityData.dataLists" />
<!-- <alarmList /> -->
</div>
</div>
</div>
</template>
<template v-if="scenicSpotId">
<div class="detection-top">
<img class="map-img" src="@/assets/images/map-img-1.jpg" />
</div>
<div class="flex">
<div class="monitor">
<div class="t-title">
<span>监控点位统计</span>
</div>
<div class="monitor-statistics">
<img class="monitor-statistics-icon" src="@/assets/images/t-ico-0.png" />
<div
class="monitor-statistics-item"
v-for="(item, index) in monitoringPointData.headList"
:key="index"
>
<span class="monitor-statistics-item__label">{{ item.name }}</span>
<countup class="monitor-statistics-item__value" :end-val="item.value" />
</div>
</div>
<div class="bg">
<Title3 title="今日安全告警" />
<alarm-today :list="monitoringPointData.dataList" />
</div>
</div>
<div class="traffic-alarm">
<div class="t-title">
<span>异常告警统计</span>
</div>
<div class="traffic-alarm-statistics">
<img class="traffic-alarm-statistics-icon" src="@/assets/images/t-ico-2.png" />
<div
class="traffic-alarm-statistics-item"
v-for="(item, index) in abnormalAlarmData.headList"
:key="index"
>
<span class="traffic-alarm-statistics-item__label">{{ item.name }}</span>
<countup class="traffic-alarm-statistics-item__value" :end-val="item.value" />
</div>
</div>
<div class="bg">
<Title3 title="异常告警占比" /> <Title3 title="异常告警占比" />
<div class="flex"> <div class="flex">
<alarmRate :dataList="dataList" /> <!-- <alarmRate :dataList="[]" /> -->
<alarmList /> <div class="none">无异常</div>
<!-- <alarmList /> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</div>
</template>
<script setup> <script setup>
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import alarmRate from './alarmRate' import alarmRate from './alarmRate'
import alarmList from './alarmList' import alarmList from './alarmList'
import alarmToday from './alarmToday'
const dataList = ref([ import { useWebSocket } from '@/hooks/socket'
{ import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
name: '云阳',
value: 20 const { isConnected, dataRes, sendMessage } = useWebSocket(
}, `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/monitor`
{ )
name: '奉节',
value: 10 // 景区id
}, let scenicSpotId = ref('')
{ // 交通信息
name: '巫山', let trafficData = ref([
value: 70 { name: '总核心监控点位', type: 0, value: 0 },
} { name: '总核心分析点位', type: 1, value: 0 },
{ name: '总异常点位', type: 2, value: 0 }
]) ])
// 景区信息
let scenicSpotData = ref({
dataList: [],
dataLists: []
})
// 交通告警信息
let trafficAbnormalityData = ref({
dataList: [],
dataLists: [],
headList: []
})
// 监控点位统计
let monitoringPointData = ref({
dataList: [],
headList: [
{ name: '监控点位', type: 0, value: 0 },
{ name: '核心点位', type: 0, value: 0 },
{ name: '异常点位', type: 1, value: 0 }
]
})
// 监控点位统计
let abnormalAlarmData = ref({
dataList: [],
headList: [
{ name: '当前告警总数', type: 0, value: 0 },
{ name: '安全告警总数', type: 0, value: 0 },
{ name: '已解除告警数', type: 1, value: 0 }
]
})
// 异常告警
let abnormalData = computed(() => {
return [{ data: scenicSpotData.value.dataList.map((item) => item.value) }]
})
let abnormalXAxisData = computed(() => {
return scenicSpotData.value.dataList.map((item) => item.name)
})
// 拥堵告警
let jamlData = computed(() => {
return [{ data: trafficAbnormalityData.value.dataList.map((item) => item.value) }]
})
let jamXAxisData = computed(() => {
return trafficAbnormalityData.value.dataList.map((item) => item.name)
})
watch(
() => isConnected.value,
(val) => {
if (val) {
sendMessage(
JSON.stringify({
action: 'start',
type: 'index',
scenicSpotId: ''
})
)
}
}
)
watch(
() => dataRes.value,
(val) => {
if (val) {
console.log(val, '安全接受消息')
switch (val.type) {
case 'trafficData':
trafficData.value = val.headList
break
case 'scenicSpotData':
scenicSpotData.value = val
break
case 'trafficAbnormalityData':
trafficAbnormalityData.value = val
break
case 'monitoringPointLocation':
monitoringPointData.value = val
break
case 'abnormalAlarmData':
abnormalAlarmData.value = val
break
}
}
}
)
let monitorChange = null
onMounted(() => {
monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
scenicSpotId.value = data.scenicSpotId
sendMessage(
JSON.stringify({
action: 'start',
type: 'index',
scenicSpotId: data.scenicSpotId
})
)
})
})
onUnmounted(() => {
PubSub.unsubscribe(monitorChange)
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.none {
width: vw(380);
height: vh(200);
font-size: vw(28);
color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}
.detection-top {
width: 100%;
height: vh(580);
background-color: #fff;
.map-img {
width: 100%;
height: 100%;
}
}
.monitor {
width: vw(405);
margin-right: vw(8);
&-statistics {
height: vh(70);
display: flex;
align-items: center;
justify-content: space-evenly;
background-image: url('@/assets/images/i-data-bg-1.png');
background-size: 100% 100%;
}
&-statistics-icon {
width: vw(45);
height: vw(48);
}
&-statistics-item {
&__label {
font-weight: 400;
font-size: vw(14);
color: #fff;
}
&__value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #ffffff;
}
&:nth-child(4) {
.monitor-statistics-item__value {
color: #e21b1b;
}
}
}
}
.traffic-alarm {
width: vw(405);
&-statistics {
height: vh(70);
display: flex;
align-items: center;
justify-content: space-evenly;
background-image: url('@/assets/images/i-data-bg-1.png');
background-size: 100% 100%;
}
&-statistics-icon {
width: vw(45);
height: vw(48);
}
&-statistics-item {
&__label {
font-weight: 400;
font-size: vw(14);
color: #fff;
}
&__value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #e21b1b;
text-align: center;
}
&:nth-child(4) {
.traffic-statistics-item__value {
color: rgba(167, 0, 0, 0.6);
}
}
}
}
.bg {
padding: vw(5);
margin-top: vh(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
}
.t-title {
margin: vh(10) auto;
width: 100%;
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
}
:deep(.el-select__wrapper) { :deep(.el-select__wrapper) {
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%); background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
border: none; border: none;

698
src/views/monitor/components/box-2.vue
View File

@@ -1,34 +1,708 @@
<template> <template>
<!-- 视频 -->
<div class="box-2"> <div class="box-2">
<Nav /> <div class="left-nav">
<!-- 视频 --> <div v-if="showNav" class="ul">
<Monitor :list="videoList" /> <div
class="li"
:class="{ active: current == index }"
v-for="(item, index) in navList"
:key="index"
@click="handleNav(index)"
>
{{ item.dictLabel }}
</div> </div>
</div>
<div class="bom-box">
<Title2 title="检索" />
<!-- <div class="search-box flex">
<el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
</div> -->
<div class="tree-box">
<div class="tree-a" v-for="(item, i) in regionList" :key="i">
<div class="flex align-center">
<img class="node" src="@/assets/images/node.png" alt="" />
<span class="name-1">{{ item.regions }}</span>
</div>
<div
class="tree-b"
v-for="(resource, x) in item.videoResources"
:key="x"
@click="handleCamera(resource.cameraIndexCode)"
>
<span class="name-2 activee">
{{ resource.cameraName || resource.cameraIndexCode }}
</span>
</div>
</div>
</div>
</div>
</div>
<div v-if="videoLog == 1" class="video-wrapper">
<div class="video-list">
<div
class="video-item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 100)"
>
<div class="video-item__inner">
<video
class="video-item__video"
:id="'monitorVideo' + index"
muted
autoplay
:controls="false"
style="object-fit: cover"
>
<source src="" type="application/x-mpegURL" />
</video>
<p class="video-item__title--primary">
{{ item.cameraName || item.cameraIndexCode }}
</p>
</div>
</div>
</div>
</div>
<div v-if="videoLog == 2" class="video-detail">
<div class="video-detail__wrapper">
<video
class="video-detail__video"
ref="videoRef"
muted
autoplay
controls
style="object-fit: cover"
>
<source src="" type="application/x-mpegURL" />
</video>
</div>
<div class="video-right">
<div class="flex justify-between">
<Title2 title="异常告警" />
<div class="back-box" @click="handleBack">
<img class="icon" src="@/assets/images/back.png" />
<span>返回</span>
</div>
</div>
<ul class="list">
<li
class="item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 101)"
>
<div>
<p class="item-title--primary">
{{ item.cameraName }}
</p>
<video
class="item-img"
:id="'monitorVideo' + index"
muted
autoplay
:controls="false"
style="object-fit: cover"
>
<source src="" type="application/x-mpegURL" />
</video>
</div>
</li>
</ul>
</div>
</div>
</div>
<VideoDialog v-model="show" :src="videoSrc" />
</template> </template>
<script setup> <script setup>
import Nav from '@/components/Nav/index.vue' import { getVideoListApi, postRefreshApi, getPreviewUrlApi } from '@/api/home'
import Monitor from '@/components/Monitor/index.vue' import { getVideoTypeApi, getVideoRegionsApi, postVideoRemainApi } from '@/api/monitor'
import { getVideoListApi } from '@/api/home'
import PubSub from 'pubsub-js'
import Hls from 'hls.js'
let videoList = ref([]) let videoList = ref([])
let navList = ref([])
let current = ref(0)
let showNav = ref(true)
let videoLog = ref(1)
let videoRef = ref()
let scenicSpotId = ref('')
let regionList = ref()
let monitorChange = null
let videoSrc = ref('')
let show = ref(false)
// const postVideoRemain = async () => {
// setInterval(() => {
// postVideoRemainApi({
// cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
// })
// }, 3000)
// }
const initVideo = () => {
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`monitorVideo${index}`)
let res = await postRefreshApi({
type: 'hls',
businessVideoDisplayPosition: item.businessVideoDisplayPosition,
cameraIndexCode: item.cameraIndexCode
})
item.hlsUrl = res.data.hlsUrl
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(res.data.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
})
})
}
const handleNav = (e) => {
if (current.value == e) return
videoLog.value = 1
videoList.value = []
current.value = e
getVideoList()
}
const handleBack = () => {
videoLog.value = 1
initVideo()
}
const handleItemVideo = (url, type) => {
videoLog.value = 2
nextTick(() => {
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(url)
hls.attachMedia(videoRef.value)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
if (type == 100) initVideo()
})
}
const handleCamera = async (cameraIndexCode) => {
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode
})
videoSrc.value = res.data.url
}
const getVideoList = async () => { const getVideoList = async () => {
let res = await getVideoListApi({ let res = await getVideoListApi({
businessVideoDisplayPosition: '' businessScenicArea: scenicSpotId.value,
businessVideoDisplayPosition: navList.value[current.value].dictValue
}) })
videoList.value = res.data videoList.value = res.data
// postVideoRemain()
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`monitorVideo${index}`)
let res = await postRefreshApi({
type: 'hls',
businessVideoDisplayPosition: item.businessVideoDisplayPosition,
cameraIndexCode: item.cameraIndexCode
})
item.hlsUrl = res.data.hlsUrl
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(res.data.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
})
})
}
const getVideoType = async (id) => {
let res = await getVideoTypeApi({
businessScenicArea: scenicSpotId.value
})
if (res.data.length > 0) {
navList.value = res.data
getVideoList(id)
} else {
videoList.value = []
initVideo()
}
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
businessScenicArea: scenicSpotId.value
})
regionList.value = res.data
console.log(regionList.value, 'regionList')
}
const onMonitorChange = () => {
monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
scenicSpotId.value = data.scenicSpotId
regionList.value = []
getVideoType()
getVideoRegions()
})
} }
onMounted(() => { onMounted(() => {
getVideoList() getVideoType()
getVideoRegions()
onMonitorChange()
})
onUnmounted(() => {
PubSub.unsubscribe(monitorChange)
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
//背景色设置为透明
:deep(.el-input__wrapper) {
background-color: rgba(0, 0, 0, 0);
border: none;
box-shadow: none;
}
//输入框颜色
:deep(.el-input__inner) {
background-color: rgba(0, 0, 0, 0) !important;
color: #fff;
}
.box-2 { .box-2 {
margin-top: vh(120);
height: vh(950);
display: flex; display: flex;
flex: 1; flex: 1;
margin-top: vh(120); }
height: vh(965); .left-nav {
margin: 0 vw(8);
width: vw(250);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
.bom-box {
margin-top: vh(20);
.search-box {
border-radius: vw(2);
border: 1px solid #0096ff;
margin: vh(10) auto;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(217, 217, 217, 0);
.search-icon {
width: vw(20);
height: vw(20);
margin-right: vw(10);
}
}
.tree-box {
position: relative;
height: vh(550);
padding: 0 vw(8);
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
.tree-a {
position: relative;
border-left: vw(2) #37d8fc solid;
.node {
position: absolute;
left: vw(-8);
width: vw(16);
height: vw(16);
}
.name-1 {
padding: 0 vw(20);
display: block;
font-weight: 400;
font-size: vw(15);
color: #ffffff;
height: vh(30);
line-height: vh(30);
text-align: left;
font-style: normal;
text-transform: none;
}
}
.tree-b::before {
position: absolute;
top: vw(-8);
left: vw(-8);
content: '';
width: vw(12);
height: vw(12);
background-image: url('/src/assets/images/icon-a-1.png');
background-size: 100% 100%;
}
.tree-b {
position: relative;
border-left: vw(3) solid;
border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
margin-left: vw(30);
margin-top: vh(10);
.name-2 {
cursor: pointer;
padding: 0 vw(20);
display: block;
font-weight: 400;
font-size: vw(15);
color: #ffffff;
height: vh(30);
line-height: vh(30);
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
}
}
}
.ul {
font-weight: 400;
font-size: vw(18);
color: #fff;
height: vh(340);
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
.li {
cursor: pointer;
width: vw(250);
height: vh(58);
line-height: vh(58);
text-align: center;
margin-bottom: vh(15);
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
}
.active {
background: url('/src/assets/images/m-nav-bg-2.png');
background-size: 100% 100%;
}
}
}
.video {
&-wrapper {
width: 100%;
height: vh(960);
padding: vh(30) vw(20);
background-image: url('/src/assets/images/log-v-bg.png');
background-size: 100% 100%;
}
&-list {
overflow-y: auto;
width: 100%;
height: 100%;
gap: vw(8);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
}
&-item {
width: vw(406);
height: vh(300);
padding: vw(10);
background-image: url('/src/assets/images/item-primary.png');
background-size: 100% 100%;
&:nth-child(5n) {
margin-right: 0;
}
}
&-item__inner {
position: relative;
}
&-item__title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: vh(10) vw(10);
color: #fff;
font-size: vw(14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 999;
}
&-item__title--error {
@extend .video-item__title;
background-color: rgba(226, 27, 27, 0.72);
}
&-item__title--primary {
@extend .video-item__title;
background-color: rgba(4, 30, 69, 0.72);
}
&-item__video {
width: 100%;
height: vh(286);
}
&-detail {
margin-left: vw(10);
display: flex;
justify-content: space-between;
}
&-detail__wrapper {
position: relative;
padding: vh(40) vw(50);
width: vw(1660);
height: vh(960);
background-image: url('/src/assets/images/one-video-bg.png');
background-size: 100% 100%;
}
&-detail__title {
position: absolute;
left: vw(50);
right: vw(50);
top: 40 (vh);
z-index: 9;
font-weight: 400;
font-size: vw(14);
color: #ffffff;
padding: vw(20);
display: flex;
justify-content: space-between;
background: rgba(4, 30, 69, 0.5);
}
&-detail__video {
width: 100%;
height: vh(880);
}
&-right {
margin-left: vw(8);
width: vw(440);
height: vh(956);
background: #082f5a;
.back-box {
cursor: pointer;
padding-right: vw(20);
display: flex;
align-items: center;
.icon {
width: vw(30);
height: auto;
margin-right: vw(10);
}
& > span {
font-weight: bold;
font-size: vw(20);
color: #ffffff;
}
}
.list {
overflow-y: auto;
overflow-x: hidden;
height: vh(920);
padding: vw(8);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
}
.item {
margin-bottom: vh(10);
padding: vw(10);
background-image: url('@/assets/images/item-primary.png');
background-size: 100% 100%;
& > div {
position: relative;
}
&-title {
position: absolute;
bottom: 0;
width: 100%;
padding: vw(10);
color: #fff;
font-size: vw(14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 999;
}
&-title--error {
@extend .item-title;
background-color: rgba(226, 27, 27, 0.72);
}
&-title--primary {
@extend .item-title;
background-color: rgba(4, 30, 69, 0.72);
}
&-img {
width: 100%;
height: vh(164);
display: block;
object-fit: cover;
}
}
}
.video-live {
.video-rt {
width: vw(400);
height: vh(950);
background: radial-gradient(
to bottom 70% at 99% 50%,
#0a4190 0%,
rgba(0, 77, 136, 0.6) 100%
);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
opacity: 0.4;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
margin-left: vw(10);
padding: vw(20);
.rt-v-box {
overflow-y: auto;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
height: 100%;
}
.title {
background-image: url('/src/assets/images/nav-l-t-bg.png');
background-size: 100% 100%;
margin-bottom: vh(10);
position: relative;
left: vw(-20);
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.rt-video {
width: 100%;
height: vh(300);
background-image: url('/src/assets/images/v-item-bg.png');
background-size: 100% 100%;
padding: vw(20);
box-sizing: border-box;
margin-bottom: vh(2);
position: relative;
.desc {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
z-index: 9;
background: rgba(4, 30, 69, 0.5);
border-radius: 0px 0px 0px 0px;
text-align: center;
font-weight: 400;
font-size: vw(14);
color: #ffffff;
padding: vw(20);
text-align: left;
font-style: normal;
text-transform: none;
}
}
.v-error-bg {
background-image: url('/src/assets/images/v-item-bg-1.png');
background-size: 100% 100%;
.desc {
background: rgba(226, 27, 27, 0.5);
}
}
}
}
} }
</style> </style>
<style lang="scss" scoped></style>

2
src/views/monitor/index.vue
View File

@@ -6,6 +6,4 @@
<script setup> <script setup>
import box1 from './components/box-1.vue' import box1 from './components/box-1.vue'
import box2 from './components/box-2.vue' import box2 from './components/box-2.vue'
onMounted(() => {})
</script> </script>

15
src/views/scenic/components/box-2.vue
View File

@@ -81,8 +81,8 @@
:key="index" :key="index"
:width="140" :width="140"
:height="70" :height="70"
:value="item.ratio" :value="item.rate"
:title="item.over" :title="item.occupied"
:subTitle="`${item.name}剩余`" :subTitle="`${item.name}剩余`"
/> />
</div> </div>
@@ -98,7 +98,7 @@
<div class="flex"> <div class="flex">
<div class="border mr-8 flex-1"> <div class="border mr-8 flex-1">
<div class="pt-10"> <div class="pt-10">
<Title3 title="今日景区承载量" /> <Title3 title="今日景区车流量" />
</div> </div>
<Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" /> <Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
</div> </div>
@@ -133,7 +133,7 @@
<Title3 title="异常告警占比" /> <Title3 title="异常告警占比" />
</div> </div>
<PieRow <PieRow
label="安全告警占比" label="告警总数"
:dataList="scenicStore.secureData.dataList" :dataList="scenicStore.secureData.dataList"
:total="alarmTotal" :total="alarmTotal"
:width="440" :width="440"
@@ -317,12 +317,7 @@
const { initMap, addMarker } = useMap() const { initMap, addMarker } = useMap()
const garageList = computed(() => { const garageList = computed(() => {
return scenicStore.stopCarData.headList.map((item) => { return scenicStore.stopCarData.headList
return {
...item,
ratio: ((item.count - item.over) / item.count) * 100
}
})
}) })
const channelTotal = computed(() => { const channelTotal = computed(() => {

3
src/views/scenic/index.vue
View File

@@ -34,7 +34,7 @@
() => dataRes.value, () => dataRes.value,
(val) => { (val) => {
if (val) { if (val) {
console.log(val, '接受消息') console.log(val, '景区接受消息')
switch (val.type) { switch (val.type) {
case 'wordkOrderlist': case 'wordkOrderlist':
scenicStore.setWordkOrderList(val.data) scenicStore.setWordkOrderList(val.data)
@@ -74,6 +74,7 @@
onMounted(() => { onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => { scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
id.value = data.scenicSpotId id.value = data.scenicSpotId
console.log(id.value, 'id.value')
}) })
}) })
onUnmounted(() => { onUnmounted(() => {

123
src/views/traffic/components/box-1.vue
View File

@@ -1,41 +1,89 @@
<template> <template>
<div class="box-1"> <div class="box-1">
<div class="statistics"> <div class="statistics">
<div class="item-box"> <!-- <div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div> <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵总数 </div>
<div class="item-num"> <div class="item-num">
<span><countup endVal="334600" /> </span> <span><countup :end-val="countData.jamTotal" /> </span>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总拥堵路段 </div> <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />道路总数 </div>
<div class="item-num"> <div class="item-num">
<span><countup endVal="35600" /> </span> <span><countup :end-val="countData.totalNum" /> </span>
</div>
</div> -->
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="" />核心道路总数
</div>
<div class="item-num"
><span><countup :end-val="countData.coreNum" /></span>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />核心路段 </div> <div class="item-t flex">
<div class="item-num" <img src="@/assets/images/t-icon-1.png" alt="" />核心拥堵总数
><span><countup endVal="15000" /></span>
</div> </div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵路口 </div>
<div class="item-num" <div class="item-num"
><span><countup endVal="2345" /></span> ><span><countup :end-val="countData.jamCore" /></span>
</div> </div>
</div> </div>
</div> </div>
<div class="chart"> <div class="chart">
<div class="chart-item" v-for="item in 4" :key="item"> <div class="chart-item">
<Title3 v-if="item == 1" title="拥堵频次占比" /> <Title3 title="拥堵频次占比" />
<Title3 v-if="item == 2" title="拥堵时长占比" />
<Title3 v-if="item == 3" title="拥堵类型频次占比" />
<Title3 v-if="item == 4" title="拥堵类型时长占比" />
<div class="chart__inner"> <div class="chart__inner">
<spotRate :dataList="spotRateData" :total="8888" /> <spotRate
:dataList="chartData.roadNum"
:total="chartData.totalNum"
label="拥堵频次总数"
/>
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index"> <li class="chart__legend-item" v-for="(item, index) in chartData.roadNum" :key="index">
<p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p>
</li>
</ul>
</div>
</div>
<div class="chart-item">
<Title3 title="拥堵时长占比" />
<div class="chart__inner">
<spotRate
:dataList="chartData.roadTime"
:total="chartData.totalTime"
label="拥堵总时长"
/>
<ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in chartData.roadTime" :key="index">
<p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p>
</li>
</ul>
</div>
</div>
<div class="chart-item">
<Title3 title="拥堵类型频次占比" />
<div class="chart__inner">
<spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
<ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in chartData.typeNum" :key="index">
<p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p>
</li>
</ul>
</div>
</div>
<div class="chart-item">
<Title3 title="拥堵类型时长占比" />
<div class="chart__inner">
<spotRate :dataList="chartData.typeTime" :total="chartData.totalTime" label="拥堵总数" />
<ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in chartData.typeTime" :key="index">
<p class="dot" :style="{ background: colors[index] }" /> <p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p> <p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p> <p class="value">{{ item.value }}%</p>
@@ -50,16 +98,42 @@
<script setup> <script setup>
import spotRate from './spotRate.vue' import spotRate from './spotRate.vue'
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import { getSpotRateApi } from '@/api/workOrder.js' import { getSpotRateApi } from '@/api/workOrder'
import { getRouterStateApi, getRouterChartsApi } from '@/api/traffic'
const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA'] const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
let spotRateData = ref([]) let spotRateData = ref([])
let countData = ref({
coreNum: 0,
jamCore: 0,
jamTotal: 0,
totalNum: 0
})
let chartData = ref({
roadNum: [],
roadTime: [],
typeNum: [],
typeTime: [],
totalNum: 0,
totalTime: ''
})
const getRouterCharts = async () => {
let res = await getRouterChartsApi()
chartData.value = res.data
}
const getRouterState = async () => {
let res = await getRouterStateApi()
countData.value = res.data
}
const getSpotRate = async () => { const getSpotRate = async () => {
let res = await getSpotRateApi() let res = await getSpotRateApi()
spotRateData.value = res.data.data spotRateData.value = res.data.data
} }
onMounted(() => { onMounted(() => {
getSpotRate() getSpotRate()
getRouterState()
getRouterCharts()
}) })
</script> </script>
@@ -109,19 +183,20 @@
} }
.dot { .dot {
width: vw(4); width: vw(10);
height: vw(4); height: vw(10);
margin: 0 vw(16); margin: 0 vw(16);
} }
.name { .name {
font-weight: 400; font-weight: 400;
font-size: vw(12); font-size: vw(14);
color: #ffffff; color: #ffffff;
width: vw(130); width: vw(110);
} }
.value { .value {
// padding-right: vw(20);
font-weight: bold; font-weight: bold;
font-size: vw(15); font-size: vw(15);
color: #ffffff; color: #ffffff;

314
src/views/traffic/components/box-2.vue
View File

@@ -11,7 +11,7 @@
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
<div id="traffic-map" class="traffic-map" /> <div id="traffic-map" :class="[routers.length == 0 ? 'traffic-map-big' : 'traffic-map']" />
<div class="map-box"> <div class="map-box">
<!-- <div class="video-list"> <!-- <div class="video-list">
<div class="li"> <div class="li">
@@ -23,17 +23,111 @@
<div class="menu">查看更多</div> <div class="menu">查看更多</div>
</div> --> </div> -->
</div> </div>
<div v-if="routers.length > 0" class="list">
<div class="item" v-for="(item, index) in routers" :key="index">
<div class="header">
<div class="header-left">
<img src="@/assets/images/work-icon-xl-1.png" />
<div class="header-left__title">{{ item.name }}</div>
<div class="header-left__camera" @click="videoShow = true">道路监控</div>
<!-- <div class="header-left__point" @click="videoShow = true">3号点位</div> -->
</div> </div>
<div class="header-status">{{ item.congestLevelText }} </div>
</div>
<div class="statistics">
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />平均车速
</div>
<div class="statistics-item__value flex">
<countup :end-val="item.speed" />
<span>km/h</span>
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离
</div>
<div class="statistics-item__value flex">
<countup :end-val="item.congestLength" />
<span>km</span>
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数
</div>
<div class="statistics-item__value">
<countup :end-val="item.congestCount" />
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵开始时间
</div>
<div class="statistics-item__value">
{{ item.startTime }}
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵持续时长
</div>
<div class="statistics-item__value">
{{ item.congestDuration }}
</div>
</div>
</div>
<div class="chart-item">
<Title3 title="拥堵类型分析" />
<div class="chart-box">
<traffic-jam :series="item.series" :data="item.xdata" />
</div>
</div>
</div>
</div>
</div>
<video-dialog v-model="videoShow" src="" />
</template> </template>
<script setup> <script setup>
import { getRouterListApi } from '@/api/traffic' import countup from 'vue-countup-v3'
import trafficJam from './traffic-jam'
import { useMap } from '@/hooks/map' import { useMap } from '@/hooks/map'
import { getRouterListApi, getRoutersApi } from '@/api/traffic'
const { map, initMap } = useMap() const { map, initMap } = useMap()
let props = defineProps({
list: {
type: Array,
default: () => []
}
})
let current = ref(0) let current = ref(0)
let routerList = ref([]) let routerList = ref([])
let routers = ref([])
let videoShow = ref(false)
watch(
() => [routerList.value, routers.value],
(val) => {
if (val[0].length > 0) {
nextTick(() => {
let { longitude, latitude, level } = val[0][0]
initMap('traffic-map', longitude, latitude, level)
map.value.setTrafficOn()
})
}
},
{
immediate: true
}
)
const handleNav = (e, index) => { const handleNav = (e, index) => {
current.value = index current.value = index
map.value.centerAndZoom(new BMapGL.Point(e.longitude, e.latitude), e.level) map.value.centerAndZoom(new BMapGL.Point(e.longitude, e.latitude), e.level)
@@ -42,15 +136,17 @@
const getRouterList = async () => { const getRouterList = async () => {
let res = await getRouterListApi() let res = await getRouterListApi()
routerList.value = res.data routerList.value = res.data
let { longitude, latitude, level } = routerList.value[0] }
nextTick(() => {
initMap('traffic-map', longitude, latitude, level) const getRouters = async () => {
map.value.setTrafficOn() let res = await getRoutersApi()
}) routers.value = res.data
console.log(routers.value, 'routers')
} }
onMounted(() => { onMounted(() => {
getRouterList() getRouterList()
getRouters()
}) })
</script> </script>
@@ -58,13 +154,14 @@
.box-2 { .box-2 {
margin-top: vh(120); margin-top: vh(120);
display: flex; display: flex;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
} }
.nav { .nav {
width: vw(232); width: vw(230);
margin-left: vw(10);
overflow: auto;
height: vh(950); height: vh(950);
margin-left: vw(8);
padding-left: vw(5);
overflow: auto;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */ width: vw(0); /* 滚动条的宽度 */
@@ -89,17 +186,26 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.traffic-map { .traffic-map {
position: relative; position: relative;
z-index: 9; z-index: 9;
width: vw(1290); width: vw(1300);
height: vh(955); height: vh(955);
margin: 0 vw(8); margin-left: vw(8);
padding: vw(20);
box-sizing: border-box; box-sizing: border-box;
background-image: url('/src/assets/images/map-bg-2.png'); background-image: url('/src/assets/images/map-bg-2.png');
background-size: 100% 100%; background-size: 100% 100%;
}
.traffic-map-big {
position: relative;
z-index: 9;
width: vw(2116);
height: vh(955);
margin-left: vw(8);
box-sizing: border-box;
background-image: url('/src/assets/images/map-bg-2.png');
background-size: 100% 100%;
}
.video-list { .video-list {
width: vw(320); width: vw(320);
height: vh(120); height: vh(120);
@@ -132,5 +238,183 @@
text-transform: none; text-transform: none;
} }
} }
.list {
width: vw(806);
height: vh(952);
margin-left: vw(8);
overflow: auto;
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
}
.item {
margin-bottom: vh(10);
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.header {
height: vh(72);
display: flex;
align-items: center;
&-left {
flex: 1;
display: flex;
align-items: center;
> img {
width: vw(30);
height: auto;
margin-right: vw(15);
}
}
&-left__title {
margin-right: vw(20);
font-size: vw(28);
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
&-left__camera {
cursor: pointer;
width: vw(120);
height: vw(72);
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
display: flex;
align-items: center;
margin: 0 vw(20);
background-image: url('/src/assets/images/t-a-1.png');
background-size: 100% 100%;
}
&-left__point {
cursor: pointer;
margin: 0 vw(20);
width: vw(120);
height: vw(72);
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
display: flex;
align-items: center;
background-image: url('/src/assets/images/t-a-2.png');
background-size: 100% 100%;
}
&-status {
min-width: vw(150);
height: vw(54);
font-weight: 600;
font-size: vw(14);
color: #fff;
display: flex;
align-items: center;
padding-left: vw(50);
padding-right: vw(20);
background-image: url('/src/assets/images/t-b-1.png');
background-size: 100% 100%;
}
}
.chart-item {
padding: vw(1);
margin-top: vh(10);
height: vh(293);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.chart-box {
width: 100%;
height: vh(250);
}
.title-3 {
margin-left: vw(10);
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 兼容WebKit内核浏览器 */
color: transparent;
/* 兼容其他浏览器 */
}
}
}
.statistics {
height: vh(90);
display: flex;
align-items: center;
justify-content: space-evenly;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&-item__label {
font-weight: 400;
font-size: vw(14);
color: #fff;
margin-bottom: vh(10);
}
&-item__value {
padding-left: vw(15);
height: vh(30);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
}
.item-box {
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.8);
margin-bottom: vh(20);
img {
margin-right: vw(5);
width: vw(8);
height: vh(8);
}
}
.item-num {
width: vw(134);
height: vh(30);
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: vw(15);
position: relative;
left: vw(-8);
span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
} }
</style> </style>

414
src/views/traffic/components/box-3.vue
View File

@@ -1,414 +0,0 @@
<template>
<div class="box-3">
<div class="item" v-for="(item, index) in 2" :key="index">
<div class="header">
<div class="header-left">
<img src="@/assets/images/work-icon-xl-1.png" />
<div class="header-left__title">施家梁子大桥</div>
<div class="header-left__camera">3号摄像机</div>
<div class="header-left__point">3号点位</div>
</div>
<div class="header-status">严重拥堵</div>
</div>
<div class="statistics">
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />路段长度
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />平均车速
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵开始时间
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵持续时长
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
</div>
<div class="chart-item">
<div class="title-3"><span>拥堵频次占比</span></div>
<div class="chart-box">
<v-chart class="chart" :option="option1" autoresize />
</div>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import { fitChartSize } from '@/utils/dataUtil'
import VChart, { THEME_KEY } from 'vue-echarts'
provide(THEME_KEY, 'dark')
const option1 = ref({
backgroundColor: 'transparent',
width: '92%',
grid: {
top: fitChartSize(90),
bottom: '0',
left: '4%',
containLabel: true
},
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0096FF' // 0% 处的颜色
},
{
offset: 1,
color: '#004D88' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FFCB39' // 0% 处的颜色
},
{
offset: 1,
color: '#0A4190' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9846FE' // 0% 处的颜色
},
{
offset: 1,
color: '#0A4190' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF5619' // 0% 处的颜色
},
{
offset: 1,
color: '#0A4190' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
],
legend: {
type: 'plain',
orient: 'horizontal',
right: fitChartSize(10),
top: fitChartSize(10),
bottom: fitChartSize(20),
itemWidth: 6,
itemHeight: 6
},
tooltip: {},
dataset: {
source: [
['product', '路段类型1', '路段类型2', '路段类型3', '路段类型4'],
['10:00', 399.3, 185.8, 293.7, 123],
['10:30', 83.1, 273.4, 455.1, 123],
['11:00', 86.4, 465.2, 382.5, 123],
['11:30', 72.4, 153.9, 439.1, 123],
['12:00', 72.4, 453.9, 239.1, 123],
['12:30', 72.4, 453.9, 239.1, 123],
['13:00', 86.4, 465.2, 282.5, 123],
['13:30', 72.4, 453.9, 239.1, 123],
['14:00', 72.4, 453.9, 239.1, 123],
['14:30', 72.4, 453.9, 239.1]
]
},
xAxis: {
type: 'category',
axisTisk: {
show: true,
// 设置刻度长度
length: 1,
lineStyle: {
type: 'dashed', // 设置为虚线
width: 0
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 500,
interval: 100,
axisLabel: {
fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
color: '#eee'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#00D0FF'
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar'
},
{
type: 'bar'
},
{
type: 'bar'
},
{
type: 'bar'
}
]
})
</script>
<style lang="scss" scoped>
.box-3 {
width: vw(813);
padding: 0 vw(8);
margin-top: vh(120);
.item {
margin-bottom: vh(10);
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.header {
height: vh(72);
display: flex;
align-items: center;
&-left {
flex: 1;
display: flex;
align-items: center;
> img {
width: vw(30);
height: auto;
margin-right: vw(15);
}
}
&-left__title {
margin-right: vw(20);
font-size: vw(28);
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
&-left__camera {
width: vw(120);
height: vw(72);
background-image: url('/src/assets/images/t-a-1.png');
background-size: 100% 100%;
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
text-align: left;
font-style: normal;
text-transform: none;
display: flex;
align-items: center;
margin: 0 vw(20);
}
&-left__point {
margin: 0 vw(20);
width: vw(120);
height: vw(72);
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
display: flex;
align-items: center;
background-image: url('/src/assets/images/t-a-2.png');
background-size: 100% 100%;
}
&-status {
width: vw(120);
height: vw(40);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
display: flex;
align-items: center;
padding-left: vw(40);
background-image: url('/src/assets/images/t-b-1.png');
background-size: 100% 100%;
}
}
.chart-item {
margin-top: vh(10);
height: vh(293);
background: radial-gradient(70% at 99% 50%, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.chart-box {
width: 100%;
height: vh(250);
}
.title-3 {
margin-left: vw(10);
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 兼容WebKit内核浏览器 */
color: transparent;
/* 兼容其他浏览器 */
}
}
}
.statistics {
height: vh(90);
display: flex;
align-items: center;
justify-content: space-evenly;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&-item__label {
font-weight: 400;
font-size: vw(14);
color: #fff;
margin-bottom: vh(10);
}
&-item__value {
padding-left: vw(15);
height: vh(30);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
}
.item-box {
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.8);
margin-bottom: vh(20);
img {
margin-right: vw(5);
width: vw(8);
height: vh(8);
}
}
.item-num {
width: vw(134);
height: vh(30);
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: vw(15);
position: relative;
left: vw(-8);
span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
}
}
</style>

24
src/views/traffic/components/spotRate.vue
View File

@@ -18,9 +18,13 @@
default: () => [] default: () => []
}, },
total: { total: {
type: Number, type: [Number, String],
default: () => 0 default: () => 0
}, },
label: {
type: String,
default: () => ''
},
colors: { colors: {
type: Array, type: Array,
default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA'] default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
@@ -29,6 +33,8 @@
const { id, setOption } = useEchart() const { id, setOption } = useEchart()
let params = null
var defaultCofig = { var defaultCofig = {
color: [], color: [],
series: [ series: [
@@ -47,12 +53,12 @@
rich: { rich: {
value: { value: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(24), fontSize: fitChartSize(20),
fontWeight: 'bold', fontWeight: 'bold',
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
name: { name: {
color: '#7894A8', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
} }
@@ -70,20 +76,26 @@
(newVal) => { (newVal) => {
if (newVal.length > 0) { if (newVal.length > 0) {
nextTick(() => { nextTick(() => {
if (!params) {
defaultCofig.color = props.colors defaultCofig.color = props.colors
defaultCofig.series[0].data = props.dataList defaultCofig.series[0].data = props.dataList
defaultCofig.series[0].label.formatter = () => { defaultCofig.series[0].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|工单总数}` return `{value|${props.total}}` + '\n' + `{name|${props.label}}`
} }
setOption({ params = {
...defaultCofig, ...defaultCofig,
...props.config ...props.config
}) }
} else {
}
setOption(params)
}) })
} }
}, },
{ immediate: true } { immediate: true }
) )
const init = () => {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

136
src/views/traffic/components/traffic-jam.vue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<div class="traffic-jam" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
const { id, setOption } = useEchart()
let props = defineProps({
series: {
type: Array,
default: () => []
},
data: {
type: Array,
default: () => []
}
})
watch(
() => props.series,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{ immediate: true }
)
let params = null
const getSeriesData = () => {
let colorMap = {
1: '#00C000',
2: '#FFA700',
3: '#FFO000',
4: '#B50000'
}
return props.series.map((item) => {
return {
value: item,
itemStyle: {
color: colorMap[item]
}
}
})
}
const getXAxisData = () => {
return props.data
}
const init = () => {
if (!params) {
params = {
grid: {
left: '8%',
right: '8%',
top: '10%',
bottom: '4%',
containLabel: true
},
xAxis: {
boundaryGap: false,
type: 'category',
data: getXAxisData(),
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(5, 72, 134, 1)'
}
},
axisLabel: {
fontSize: fitChartSize(12),
color: 'rgba(255,255,255,0.9)'
}
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
fontSize: fitChartSize(12),
color: 'rgba(255,255,255,0.9)'
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(0, 150, 255,0.4)',
type: 'dashed'
}
}
},
series: [
{
type: 'bar',
emphasis: {
opacity: 1
},
data: getSeriesData(),
barWidth: fitChartSize(40),
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: fitChartSize(12),
formatter: (res) => {
let valueMap = {
1: '畅通',
2: '高疑似事件拥堵',
3: '异常拥堵',
4: '常规拥堵'
}
return valueMap[res.value]
}
}
}
]
}
} else {
params.xAxis.data = getXAxisData()
params.series[0].data = getSeriesData()
}
setOption(params)
}
</script>
<style scoped lang="scss">
.traffic-jam {
width: vw(800);
height: vh(250);
}
</style>

2
src/views/traffic/index.vue
View File

@@ -1,11 +1,9 @@
<template> <template>
<box1 /> <box1 />
<box2 /> <box2 />
<box3 />
</template> </template>
<script setup> <script setup>
import box1 from './components/box-1.vue' import box1 from './components/box-1.vue'
import box2 from './components/box-2.vue' import box2 from './components/box-2.vue'
import box3 from './components/box-3.vue'
</script> </script>

12
src/views/workOrder/components/box-2.vue
View File

@@ -25,10 +25,6 @@
<div class="chart"> <div class="chart">
<div class="chart__wrapper mr-8"> <div class="chart__wrapper mr-8">
<Title3 title="工单总数" /> <Title3 title="工单总数" />
<!-- <div class="check-label">
<span class="active">全部</span>
<span>已完成总数</span>
</div> -->
<Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" /> <Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" />
</div> </div>
<div class="chart__wrapper"> <div class="chart__wrapper">
@@ -77,7 +73,7 @@
<div class="chart__wrapper"> <div class="chart__wrapper">
<Title3 title="景区工单占比" /> <Title3 title="景区工单占比" />
<div class="chart__inner"> <div class="chart__inner">
<spotRate :dataList="spotRateData" :total="spotRateTotal" /> <spotRate :dataList="spotRateData" :total="spotRateTotal" label="工单总数" />
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index"> <li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
<p class="dot" :style="{ background: colors[index] }" /> <p class="dot" :style="{ background: colors[index] }" />
@@ -90,7 +86,7 @@
<div class="chart__wrapper"> <div class="chart__wrapper">
<Title3 title="景区工单类型占比" /> <Title3 title="景区工单类型占比" />
<div class="chart__inner"> <div class="chart__inner">
<spotRate :dataList="typeRateData" :total="typeRateTotal" /> <spotRate :dataList="typeRateData" :total="typeRateTotal" label="工单总数" />
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in typeRateData" :key="index"> <li class="chart__legend-item" v-for="(item, index) in typeRateData" :key="index">
<p class="dot" :style="{ background: colors[index] }" /> <p class="dot" :style="{ background: colors[index] }" />
@@ -373,8 +369,8 @@
} }
.dot { .dot {
width: vw(4); width: vw(10);
height: vw(4); height: vw(10);
margin: 0 vw(16); margin: 0 vw(16);
} }

8
src/views/workOrder/components/spotRate.vue
View File

@@ -21,6 +21,10 @@
type: Number, type: Number,
default: () => 0 default: () => 0
}, },
label: {
type: String,
default: () => ''
},
colors: { colors: {
type: Array, type: Array,
default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA'] default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
@@ -52,7 +56,7 @@
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
name: { name: {
color: '#7894A8', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
} }
@@ -73,7 +77,7 @@
defaultCofig.color = props.colors defaultCofig.color = props.colors
defaultCofig.series[0].data = props.dataList defaultCofig.series[0].data = props.dataList
defaultCofig.series[0].label.formatter = () => { defaultCofig.series[0].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|工单总数}` return `{value|${props.total}}` + '\n' + `{name|${props.label}}`
} }
setOption({ setOption({
...defaultCofig, ...defaultCofig,