28
This commit is contained in:
duanliang
@@ -348,7 +348,7 @@
|
||||
isBack.value = true
|
||||
break
|
||||
case '/hotel':
|
||||
title.value = '酒店场馆'
|
||||
title.value = '场馆'
|
||||
otherLeftLabel.value = '其他酒店'
|
||||
otherRightLabel.value = '其他场馆'
|
||||
isSkip.value = false
|
||||
|
||||
@@ -109,11 +109,14 @@
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="停车场使用" />
|
||||
<el-carousel trigger="click" indicator-position="none" autoplay arrow="never" interval="5000">
|
||||
<el-carousel-item v-for="(item,index) in splitList" :key="index">
|
||||
<vacancy :list="item" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<blcok v-if="splitList.length">
|
||||
<el-carousel trigger="click" indicator-position="none" autoplay arrow="never" interval="5000">
|
||||
<el-carousel-item v-for="(item,index) in splitList" :key="index">
|
||||
<vacancy :list="item" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</blcok>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
watch(
|
||||
() => props.list,
|
||||
(val) => {
|
||||
console.log(val,'jjjjjjjjjjjj')
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<title2 title="简介" />
|
||||
<div class="desc-content" v-html="info?.introduction"></div>
|
||||
<div class="desc-container">
|
||||
<div>
|
||||
<div v-if="info?.banner.length">
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in info?.banner" :key="item">
|
||||
<el-image class="cover-item" :src="`http://192.168.77.200/fjtcc-api${item}`" />
|
||||
|
||||
@@ -427,7 +427,12 @@
|
||||
cameraName: cameraName.value,
|
||||
businessScenicArea: params.businessScenicArea
|
||||
})
|
||||
console.log(res,11111111111111)
|
||||
regionList.value = res.data
|
||||
regionList.value.forEach((item,index)=>{
|
||||
// item.show = true
|
||||
item.videoResources=item.resourcesList[0].videoResources
|
||||
})
|
||||
regionList.value[0].show = true
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="box-1">
|
||||
<div class="statistics">
|
||||
<Title1 title="总路段拥堵情况" />
|
||||
<!-- <div class="item-box">
|
||||
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵总数 </div>
|
||||
<div class="item-num">
|
||||
@@ -13,7 +14,7 @@
|
||||
<span><countup :end-val="countData.totalNum" /> </span>
|
||||
</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>
|
||||
@@ -28,7 +29,7 @@
|
||||
<div class="item-num"
|
||||
><span><countup :end-val="countData.jamCore" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-item">
|
||||
@@ -54,10 +55,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-item">
|
||||
<Title3 title="拥堵类型频次占比" />
|
||||
<div class="chart__inner">
|
||||
<div class="new-vehicle">
|
||||
<vehicle-source :list="chartData.typeNum" />
|
||||
<!-- <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" /> -->
|
||||
<div class="new-ul">
|
||||
<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>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<Title3 title="拥堵时长占比" />
|
||||
<div class="chart__inner">
|
||||
<div>
|
||||
<div >
|
||||
<spotRate
|
||||
:dataList="chartData.roadTime"
|
||||
:total="chartData.totalTime"
|
||||
@@ -77,45 +102,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<Title3 title="拥堵类型频次占比" />
|
||||
<div class="chart__inner">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<div class="chart-item">
|
||||
<Title3 title="拥堵类型时长占比" />
|
||||
<div class="chart__inner">
|
||||
<div>
|
||||
<spotRate
|
||||
<div class="new-vehicle">
|
||||
<!-- <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="name">{{ item.name }}</p>
|
||||
<p class="value">{{ item.value }}%</p>
|
||||
</li>
|
||||
</ul>
|
||||
/> -->
|
||||
<vehicle-source :list="chartData.typeTime" />
|
||||
<div class="new-ul">
|
||||
<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="name">{{ item.name }}</p>
|
||||
<p class="value">{{ item.value }}%</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,7 +139,7 @@
|
||||
import countup from 'vue-countup-v3'
|
||||
import { getSpotRateApi } from '@/api/workOrder'
|
||||
import { getRouterStateApi, getRouterChartsApi } from '@/api/traffic'
|
||||
|
||||
import vehicleSource from './vehicle-source'
|
||||
const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
let spotRateData = ref([])
|
||||
let countData = ref({
|
||||
@@ -166,6 +177,13 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.new-vehicle{
|
||||
padding-top:vh(20);
|
||||
}
|
||||
.new-ul{
|
||||
padding:0 vw(30);
|
||||
margin-top:vh(20);
|
||||
}
|
||||
.box-1 {
|
||||
margin-top: vh(120);
|
||||
width: vw(626);
|
||||
@@ -188,6 +206,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: vh(380);
|
||||
|
||||
}
|
||||
|
||||
&__legend {
|
||||
@@ -232,11 +251,11 @@
|
||||
}
|
||||
}
|
||||
.statistics {
|
||||
padding: 0 vw(40);
|
||||
height: vh(110);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// padding: 0 vw(40);
|
||||
// height: vh(110);
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// width:100%;
|
||||
.item-box {
|
||||
flex: 1;
|
||||
.item-t {
|
||||
|
||||
@@ -11,8 +11,14 @@
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="traffic-map" class="traffic-map-big" :class="{ 'traffic-map': routers.length > 0 }" />
|
||||
<div>
|
||||
<div class="title-1">
|
||||
<div class="title">
|
||||
<span> 核心路段展 </span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="traffic-map" class="traffic-map-big" :class="{ 'traffic-map': routers.length > 0 }" />
|
||||
</div>
|
||||
|
||||
<div v-if="routers.length > 0" class="list">
|
||||
<div class="item" v-for="(item, index) in routers" :key="index" @click="handleRouter(item)">
|
||||
@@ -225,6 +231,30 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-1 {
|
||||
position: relative;
|
||||
margin-bottom:vh(20);
|
||||
.title {
|
||||
margin: vh(10) auto;
|
||||
margin-top:0;
|
||||
width: vw(1500);
|
||||
height: vh(32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
& > span {
|
||||
font-weight: 800;
|
||||
font-size: vw(24);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
display: flex;
|
||||
@@ -265,7 +295,7 @@
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: vw(2116);
|
||||
height: vh(955);
|
||||
height: vh(890);
|
||||
margin-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
|
||||
130
src/views/traffic/components/vehicle-source.vue
Normal file
130
src/views/traffic/components/vehicle-source.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<!-- 车源地 -->
|
||||
<template>
|
||||
<div class="vehicle-source" :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) => {
|
||||
console.log(val,'llllllllllllllll')
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
let params = null
|
||||
|
||||
const getSeriesData = () => {
|
||||
return props.list.map((item) => item.value)
|
||||
}
|
||||
const getXAxisData = () => {
|
||||
return props.list.map((item) => item.name)
|
||||
}
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
params = {
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '10%',
|
||||
bottom: '10%',
|
||||
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: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 150, 255,0.4)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: getSeriesData(),
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
barWidth: fitChartSize(8),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 208, 255, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 208, 255, 1)'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(0, 150, 255, 0.15)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
params.xAxis.data = getXAxisData()
|
||||
params.series[0].data = getSeriesData()
|
||||
}
|
||||
setOption(params)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vehicle-source {
|
||||
width:vw(310);
|
||||
height: vh(160);
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,17 @@
|
||||
<!-- <img class="close" src="@/assets/images/close.png" @click="handleClose" /> -->
|
||||
<div class="flex">
|
||||
<div class="list-box">
|
||||
<title2 title="车船" />
|
||||
<div class="tabs-box">
|
||||
<title2 title="车船" />
|
||||
<div class="tabs-list">
|
||||
<div class="t-item"
|
||||
v-for="(item,index) in tabsList"
|
||||
:class="tabsListIndex==index?'tabs-active':''"
|
||||
@click="handleTabsList(item)"
|
||||
:key="item.id">{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
clearable
|
||||
@@ -31,8 +41,11 @@
|
||||
:key="index"
|
||||
@click="handleItem(item, index)"
|
||||
>
|
||||
<div class="child-box">
|
||||
<div class="child-box new-item">
|
||||
<p class="item__label">{{ item.licenseNumber }}</p>
|
||||
|
||||
</div>
|
||||
<div class="new-item">
|
||||
<span v-if="item.type == 0" class="label_img">
|
||||
车
|
||||
</span>
|
||||
@@ -44,7 +57,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="item__value"
|
||||
<div class="item__value new-item"
|
||||
>{{ item.speed }}km/h
|
||||
<img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
|
||||
<img v-else src="@/assets/images/unengine.png" alt="" />
|
||||
@@ -94,7 +107,17 @@ import PubSub from 'pubsub-js'
|
||||
import { useScenicStore } from '@/stores/scenic'
|
||||
const scenicStore = useScenicStore()
|
||||
const { map, marker, initMap, addMarker } = useMap()
|
||||
|
||||
let tabsList = ref([
|
||||
{id:0,text:'所有',scenicSpotId:''},
|
||||
{id:1,text:'白帝城·瞿塘峡',scenicSpotId:'root000000'},
|
||||
{id:2,text:'三峡之巅',scenicSpotId:'三峡之巅'},
|
||||
{id:3,text:'直通车',scenicSpotId:'奉节县'}
|
||||
])
|
||||
let tabsListIndex = ref(0)
|
||||
const handleTabsList = (item)=>{
|
||||
tabsListIndex.value = item.id
|
||||
PubSub.publish('tabsListChange', item)
|
||||
}
|
||||
let props = defineProps({
|
||||
scenicSpotId: {
|
||||
type: String,
|
||||
@@ -410,6 +433,26 @@ import PubSub from 'pubsub-js'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tabs-box{
|
||||
display:flex;
|
||||
.tabs-list{
|
||||
flex:1;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.t-item{
|
||||
margin:0 vw(10);
|
||||
font-size:vw(18);
|
||||
color:#fff;
|
||||
padding:vh(5) 0;
|
||||
}
|
||||
.tabs-active{
|
||||
color:#409eff;
|
||||
border-bottom:1px solid #409eff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.child-box{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
@@ -589,11 +632,18 @@ import PubSub from 'pubsub-js'
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.list {
|
||||
width: vw(400);
|
||||
// width: vw(400);
|
||||
height: vh(790);
|
||||
padding-top: vh(10);
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
.new-item{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
dispalay:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(10); /* 滚动条的宽度 */
|
||||
|
||||
@@ -60,6 +60,11 @@
|
||||
keyword.value = data
|
||||
sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
|
||||
})
|
||||
PubSub.subscribe('tabsListChange', (msg, data) => {
|
||||
console.log(data.scenicSpotId,22222222)
|
||||
sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: data.scenicSpotId }))
|
||||
})
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user