Commit c2ffbddf authored by ninglx's avatar ninglx

wj-smartcity 综合调整各模块样式 地图事件点位 首页态势监测图表按照要求修改展示内容 信号评价内容修改 数据查询除快照模块 联调及数据组装展示基本完成

parent fe0050de
......@@ -101,12 +101,12 @@
::v-deep .row-deep.hover-row {
td {
background-color: #171f34;
background-color: #171f34 !important;
}
}
::v-deep .row-not.hover-row {
td {
background-color: #171f34;
background-color: #171f34 !important;
}
}
\ No newline at end of file
......@@ -46,8 +46,9 @@ export default {
}
.msg-card-content {
overflow: hidden;
padding: 10px 0 0 0;
padding: 5px;
background-size: 100% 100%;
//background-image: url("../../assets/images/holo/border.png");
height: calc(100% - 45px);
}
.msg-card-content-noHeader {
......
......@@ -4,7 +4,7 @@ export default {
crossNormal: require('../../assets/images/holo/location-yellow.png'),
crossFalse: require('../../assets/images/holo/location-gray.png'),
crossSelect: require('../../assets/images/holo/location-red.png'),
event: require('../../assets/images/holo/event.png'),
event: require('../../assets/images/holo/eventPoint.png'),
milli: require('../../assets/images/holo/hmbld.png'),
radar: require('../../assets/images/holo/jgld.png'),
weather: require('../../assets/images/holo/qxjcy.png'),
......
......@@ -70,4 +70,11 @@ export const getLaneSnapshotIndex = (data) => request({
url:`${baseUrl}/trend/laneSnapshotIndex`,
method:'post',
data: data
})
// 根据路口id获取车道号
export const initLaneSort = (data) => request({
url:`${baseUrl}/trend/laneSnapshotIndex`,
method:'post',
data: data
})
\ No newline at end of file
......@@ -125,6 +125,12 @@ export const eventAnalysis = () =>request({
method: 'get',
})
export const eventAnalysisV2 = (params) =>request({
url: '/holo/event-analysis/queryByType',
method: 'get',
params: params
})
export const areaRecent = () =>request({
url: '/holo/area-index-analysis/recently',
method: 'get',
......
export const noDataTitle = {
show: true,
text: '暂无数据...',
text: '暂无数据',
textStyle:{
color:'rgba(255,255,255,0.8)',
},
......
// 判空占位
export function occupancyValue(value) {
export function occupancyValue(value, prop) {
if (value || value === 0) {
return value
}
......
......@@ -84,12 +84,14 @@ export default {
height: 45px;
display: flex;
width: 100%;
justify-content: space-between;
background: linear-gradient( 90deg, #043A70 0%, rgba(4,59,113,0.2) 100%);
.c-tab-item {
width: 45%;
width: 140px;
cursor: pointer;
background-color: #1a68af;
margin-right: 6px;
background-color: #0b549a;
display: flex;
justify-content: center;
align-items: center;
......@@ -100,7 +102,7 @@ export default {
}
.active {
background-color: #207dd2;
background-color: #1f93ff;
}
}
......
......@@ -590,9 +590,12 @@ export default {
this.waveTitle = data.name
},
showCrossStatus(data) {
console.log('showCrossStatus')
this.timer = setInterval(()=>{
if(map?.hasImage('crossStatus0') && map?.hasImage('crossStatus1') && map?.hasImage('crossStatus2')&& map?.hasImage('crossStatus3')){
clearInterval(this.timer)
console.log('sAddOrUpdateCrossStatus')
let features = []
for (let item of data) {
features.push(turf.point(item.location, item))
......
......@@ -29,8 +29,8 @@ export default {
return [
{ label: "时间:", value: this.model.startTime },
{ label: "事件编号:", value: occupancyValue(this.model.eventId) },
{ label: "停车状态:", value: '--' },
{ label: "车辆类型:", value: occupancyValue(this.model.objectType) },
{ label: "停车状态:", value: '触发' },
{ label: "车辆类型:", value: '机动车' },
{ label: "车辆号码:", value: occupancyValue(this.model.plateNo) },
];
},
......
......@@ -9,12 +9,13 @@
<cross-detail :clickCrossData="clickCrossData" class="full-w-h" :key="detailKey" v-if="isCrossDetail"/>
<div class="full-w-h" v-else>
<key-cross style="height: 33%"/>
<traffic-event style="height: 33%"/>
<traffic-event-v2 style="height: 33%"/>
<warning-msg style="height: 33%"/>
</div>
</div>
<div class="button_flow" :class="[{ hide_bottom: !show }]">
<traffic-flow @showEventPoint="showEventPoint" :crossData="clickCrossData" :key="bottomChartKey" :isCrossDetail="isCrossDetail" style="height: 100%;"/>
<traffic-flow @showEventPoint="showEventPoint" :crossData="clickCrossData" :key="bottomChartKey"
:isCrossDetail="isCrossDetail" style="height: 100%;"/>
</div>
</div>
</template>
......@@ -27,10 +28,12 @@ import WarningMsg from "@/views/signal/msgs/right/warningMsg.vue";
import TrafficFlow from "@/views/signal/msgs/trafficFlow.vue";
import KeyCross from "@/views/signal/msgs/right/keyCross.vue";
import CrossDetail from "@/views/signal/msgs/right/crossDetail.vue";
import TrafficEventV2 from "@/views/signal/msgs/right/trafficEventV2.vue";
export default {
props: ["show", 'isCrossDetail', 'clickCrossData'],
components: {
TrafficEventV2,
CrossDetail,
KeyCross,
TrafficFlow,
......@@ -43,7 +46,7 @@ export default {
return {};
},
computed: {
bottomChartKey(){
bottomChartKey() {
return `bottomChart${this.isCrossDetail}${this.clickCrossData.id}`
},
detailKey() {
......@@ -55,8 +58,8 @@ export default {
mounted() {
},
methods: {
showEventPoint(events){
this.$emit('showEventPoint',events)
showEventPoint(events) {
this.$emit('showEventPoint', events)
},
showCrossStatus(data) {
this.$emit('showCrossStatus', data)
......@@ -150,7 +153,7 @@ export default {
box-shadow: 0 -30px 30px 0px #030b19;
z-index: 12;
position: absolute;
background: linear-gradient( 180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.8) 100%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.8) 100%);
left: 50%;
bottom: 0;
transform: translateX(-50%);
......
......@@ -5,7 +5,7 @@
element-loading-background="rgba(3, 11, 25, 0.8)">
<div class="questionArea">
<div class="kip-box">
<!-- @click="kipClick(item)"-->
<!-- @click="kipClick(item)"-->
<div
class="kip-item"
v-for="(item, index) in kipData"
......@@ -20,17 +20,17 @@
</div>
</div>
<!-- <div class="alarm-title-box">-->
<!-- <div class="alarm-title">-->
<!-- <img src="../../../../assets/images/homepage/second-title-icon.svg" alt=""/>-->
<!-- 路口列表{{ kipActive.name ? " - " : "" }}{{ kipActive.name }}-->
<!-- </div>-->
<!-- &lt;!&ndash;-->
<!-- <el-radio-group v-model="radio" @change="initData">-->
<!-- <el-radio :label="1">常发性</el-radio>-->
<!-- <el-radio :label="2">偶发性</el-radio>-->
<!-- </el-radio-group> &ndash;&gt;-->
<!-- </div>-->
<!-- <div class="alarm-title-box">-->
<!-- <div class="alarm-title">-->
<!-- <img src="../../../../assets/images/homepage/second-title-icon.svg" alt=""/>-->
<!-- 路口列表{{ kipActive.name ? " - " : "" }}{{ kipActive.name }}-->
<!-- </div>-->
<!-- &lt;!&ndash;-->
<!-- <el-radio-group v-model="radio" @change="initData">-->
<!-- <el-radio :label="1">常发性</el-radio>-->
<!-- <el-radio :label="2">偶发性</el-radio>-->
<!-- </el-radio-group> &ndash;&gt;-->
<!-- </div>-->
<div class="list_control">
<el-input
class="homepage-search"
......@@ -188,11 +188,11 @@ export default {
listData: [],
listDataCopy: [],
kipData: [
{name: "溢出", type: 3, value: 0, color: '#9a0807'},
{name: "拥堵", type: 2, value: 0, color: '#c56504'},
{name: "失衡", type: 1, value: 0, color: '#e1b102'},
{name: "空放", type: 5, value: 0, color: '#87898c'},
{name: "畅通", type: 0, value: 0, color: '#007b33'},
{name: "溢出", type: 3, value: 0, color: '#9a0807', bg: 'rgba(154, 8, 7,0.3)'},
{name: "拥堵", type: 2, value: 0, color: '#c56504', bg: 'rgba(197, 101, 4,0.3)'},
{name: "失衡", type: 1, value: 0, color: '#e1b102', bg: 'rgba(225, 177, 2,0.3)'},
{name: "空放", type: 5, value: 0, color: '#87898c', bg: 'rgba(135, 137, 140,0.3)'},
{name: "畅通", type: 0, value: 0, color: '#007b33', bg: 'rgba(0, 123, 51,0.3)'},
],
infoStatusObj: {
"0": "未开启",
......@@ -205,11 +205,11 @@ export default {
};
},
methods: {
getRowClassName(e){
getRowClassName(e) {
if (e.rowIndex % 2 !== 0) {
return "row-even";
return "row-even";
} else {
return "row-odd";
return "row-odd";
}
},
......@@ -256,11 +256,41 @@ export default {
// {name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance},
// {name: "溢出", type: 3, value: data.abnormalCrossStats.spillover},
// {name: "正常", type: 0, value: data.abnormalCrossStats.normal},
{name: "溢出", type: 3, value: data.abnormalCrossStats.spillover, color: '#9a0807',bg:'rgba(154, 8, 7,0.3)'},
{name: "拥堵", type: 2, value: data.abnormalCrossStats.congestion, color: '#c56504',bg:'rgba(197, 101, 4,0.3)',},
{name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance, color: '#e1b102',bg:'rgba(225, 177, 2,0.3)'},
{name: "空放", type: 5, value: data.abnormalCrossStats.phaseEmpty, color: '#87898c',bg:'rgba(135, 137, 140,0.3)'},
{name: "畅通", type: 0, value: data.abnormalCrossStats.normal, color: '#007b33',bg:'rgba(0, 123, 51,0.3)'},
{
name: "溢出",
type: 3,
value: data.abnormalCrossStats.spillover,
color: '#9a0807',
bg: 'rgba(154, 8, 7,0.3)'
},
{
name: "拥堵",
type: 2,
value: data.abnormalCrossStats.congestion,
color: '#c56504',
bg: 'rgba(197, 101, 4,0.3)',
},
{
name: "失衡",
type: 1,
value: data.abnormalCrossStats.unbalance,
color: '#e1b102',
bg: 'rgba(225, 177, 2,0.3)'
},
{
name: "空放",
type: 5,
value: data.abnormalCrossStats.phaseEmpty,
color: '#87898c',
bg: 'rgba(135, 137, 140,0.3)'
},
{
name: "畅通",
type: 0,
value: data.abnormalCrossStats.normal,
color: '#007b33',
bg: 'rgba(0, 123, 51,0.3)'
},
];
this.listData = data.abnormalCrossList.sort((a, b) => {
return Number(b.congestionIndex) - Number(a.congestionIndex)
......@@ -279,7 +309,7 @@ export default {
this.listDataCopy = (JSON.parse(JSON.stringify(this.listData)))
} else {
this.kipActive = {name: item.name, type: item.type};
this.listDataCopy = this.listData.filter(row=>{
this.listDataCopy = this.listData.filter(row => {
return row.realtimeStatus == item.type
})
}
......@@ -302,11 +332,41 @@ export default {
// {name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance},
// {name: "溢出", type: 3, value: data.abnormalCrossStats.spillover},
// {name: "正常", type: 0, value: data.abnormalCrossStats.normal},
{name: "溢出", type: 3, value: data.abnormalCrossStats.spillover, color: '#9a0807',bg:'rgba(154, 8, 7,0.3)'},
{name: "拥堵", type: 2, value: data.abnormalCrossStats.congestion, color: '#c56504',bg:'rgba(197, 101, 4,0.3)',},
{name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance, color: '#e1b102',bg:'rgba(225, 177, 2,0.3)'},
{name: "空放", type: 5, value: data.abnormalCrossStats.phaseEmpty, color: '#87898c',bg:'rgba(135, 137, 140,0.3)'},
{name: "畅通", type: 0, value: data.abnormalCrossStats.normal, color: '#007b33',bg:'rgba(0, 123, 51,0.3)'},
{
name: "溢出",
type: 3,
value: data.abnormalCrossStats.spillover,
color: '#9a0807',
bg: 'rgba(154, 8, 7,0.3)'
},
{
name: "拥堵",
type: 2,
value: data.abnormalCrossStats.congestion,
color: '#c56504',
bg: 'rgba(197, 101, 4,0.3)',
},
{
name: "失衡",
type: 1,
value: data.abnormalCrossStats.unbalance,
color: '#e1b102',
bg: 'rgba(225, 177, 2,0.3)'
},
{
name: "空放",
type: 5,
value: data.abnormalCrossStats.phaseEmpty,
color: '#87898c',
bg: 'rgba(135, 137, 140,0.3)'
},
{
name: "畅通",
type: 0,
value: data.abnormalCrossStats.normal,
color: '#007b33',
bg: 'rgba(0, 123, 51,0.3)'
},
];
this.listData = data.abnormalCrossList.sort((a, b) => {
return Number(b.congestionIndex) - Number(a.congestionIndex)
......@@ -376,6 +436,7 @@ export default {
::v-deep .el-table__empty-text {
color: #ccc;
}
::v-deep .row-even {
td {
background-color: #030d1e;
......@@ -387,9 +448,11 @@ export default {
background-color: #0b1933;
}
}
::v-deep .el-input__inner {
color: white;
}
.item-cross {
......@@ -405,7 +468,8 @@ export default {
.sort_btn {
width: 25%;
::v-deep .el-input__inner{
::v-deep .el-input__inner {
background-color: #233b6b;
}
}
......@@ -421,6 +485,7 @@ export default {
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 5px;
.kip-item {
cursor: pointer;
border: 1px solid transparent;
......
......@@ -36,6 +36,12 @@ export default {
if(!this.xData.length){
title = noDataTitle
}
let colors = [
"rgba(24, 144, 255, 1)",
"rgba(0, 189, 208, 1)",
"rgba(79, 210, 125, 1)",
"rgba(255, 209, 69, 1)",
]
return {
title,
dataZoom: {
......@@ -43,12 +49,6 @@ export default {
startValue: Object.keys(this.chartResult).length - 6,
endValue: Object.keys(this.chartResult).length - 1,
},
color: [
"rgba(24, 144, 255, 1)",
"rgba(0, 189, 208, 1)",
"rgba(79, 210, 125, 1)",
"rgba(255, 209, 69, 1)",
],
tooltip: {
enterable: true,
trigger: "axis",
......@@ -122,13 +122,34 @@ export default {
let nameReal = this.$store.state.dicts.Direction.find((item) => {
return item.code == key;
}).name
let index = Object.keys(this.chartResult).indexOf(key)
series.push({
name: nameReal,
type: "bar",
barWidth: getFontSize(6),
barWidth: getFontSize(8),
label: {
show: false,
},
itemStyle:{
borderRadius: 4,
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: colors[index].replace('1)','0.2)'), // 100% 处的颜色
},
{
offset: 1,
color: colors[index] , // 0% 处的颜色
},
],
false
),
},
emphasis: {
focus: "series",
},
......
<template>
<msg-card class="item-trafficEvent" title="交通事件">
<div class="full-h trafficEvent" v-loading="eventLoading"
element-loading-spinner="el-icon-loading"
element-loading-text="数据加载中..."
element-loading-background="rgba(3, 11, 25, 0.8)">
<div class="event-list-container full-w-h">
<div
class="trafficItem"
:class="`event${i.eventType}`"
v-for="(i,index) of eventList"
:key="index"
>
<div class="leftImg" :class="`event${i.eventType}`"></div>
<div class="right">
<div>{{ i.eventNumber }}</div>
<div :title="i.eventLabel">{{ i.eventLabel }}</div>
</div>
</div>
</div>
</div>
</msg-card>
</template>
<script>
import {eventAnalysis, eventAnalysisV2} from "../../../../dao/situation";
import msgCard from "../../../../components/Standard/msg-card.vue";
export default {
name: "trafficEventV2",
components: {
msgCard,
},
data() {
return {
eventLoading: true,
chart: null,
// 交通事件
trafficEvents: [],
eventList: [],
};
},
methods: {
getEventAnalysis() {
eventAnalysisV2({eventType:'1,401,701,702,703,704,502,503,504'}).then((res) => {
console.log('events...',res)
this.eventLoading = false
this.eventList = res.content.reduce((a, b) => {
if(['502','503','504'].includes(b.eventType)){
let containFlag = false
for(let aItem of a){
if(aItem.eventType === 'yd'){
containFlag = true
aItem.eventNumber += Number(b.eventNumber)
}
}
if(!containFlag){
a.push({
eventType:'yd',
eventNumber: b.eventNumber,
eventLabel:'拥堵事件'
})
}
}else if(['1','401'].includes(b.eventType)){
let containFlag = false
for(let aItem of a){
if(aItem.eventType === 'tcsj'){
containFlag = true
aItem.eventNumber += Number(b.eventNumber)
}
}
if(!containFlag){
a.push({
eventType:'tcsj',
eventNumber: b.eventNumber,
eventLabel:'停车事件'
})
}
}
else{
a.push(b)
}
return a
}, [])
});
},
},
mounted() {
this.getEventAnalysis();
},
};
</script>
<style lang="less" scoped>
.item-trafficEvent {
//::-webkit-scrollbar {
// width: 0;
// height: 0;
// background-color: #f5f7fa;
//}
::v-deep .el-tabs__item {
color: white;
height: 28px;
line-height: 24px;
font-size: 16px;
font-weight: 500;
padding: 0 12px;
}
::v-deep .el-tabs__active-bar {
background: linear-gradient(90deg,
transparent 0%,
rgba(41, 110, 194, 1) 50%,
transparent 100%);
}
::v-deep .el-tabs__header {
margin: 0;
height: 30px;
}
::v-deep .el-tabs__nav {
transform: translateX(-50%) !important;
left: 50%;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: transparent;
}
::v-deep .el-tabs__content {
background-color: #010613;
padding: 12px;
overflow: auto;
height: calc(100% - 30px);
}
.head {
display: flex;
width: 100%;
height: 100%;
.name {
height: 100%;
width: 90%;
line-height: normal;
}
.number {
line-height: normal;
}
}
.trafficEvent {
overflow: hidden;
}
.event-list-container {
color: rgba(155, 177, 212, 1);
display: flex;
height: 100%;
justify-content: space-between;
flex-flow: row wrap;
align-items: center;
.trafficItem {
width: 49%;
font-size: 14px;
height:29%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #012546;
padding: 6px 10px 6px 0;
.leftImg{
width: 36%;
height: 100%;
background-position-x: right;
background-size: auto 100%;
background-repeat: no-repeat;
}
.eventtcsj{
background-image: url("../../../../assets/images/smartCityMain/event1.png");
}
.eventyd{
background-image: url("../../../../assets/images/smartCityMain/event222.png");
}
.event701{
background-image: url("../../../../assets/images/smartCityMain/event701.png");
}
.event702{
background-image: url("../../../../assets/images/smartCityMain/event702.png");
}
.event703{
background-image: url("../../../../assets/images/smartCityMain/event703.png");
}
.event704{
background-image: url("../../../../assets/images/smartCityMain/event704.png");
}
.right {
width: 55%;
max-width: 60%;
color: rgba(255,255,255,0.9);
font-size: 16px;
display: inline-block;
text-align: left;
// max-width: 80%;
white-space: nowrap;
div{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
div:first-child{
font-size: 18px;
color:#0cd2ff;
font-weight: bold;
}
}
}
.trafficItem:nth-child(5){
margin-bottom: 0;
}
.trafficItem:nth-child(6){
margin-bottom: 0;
}
}
}
</style>
......@@ -8,44 +8,45 @@
</div>
</div>
<div class="full-h child" >
<div class="indexTitle" style="background-color: #69431d">拥堵</div>
<div class="indexContent" style="background-color: #2e2b2a">
<div class="indexTitle" style="background-color: #49141f">溢出</div>
<div class="indexContent" style="background-color: #21182b">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.congestionTimes || 0 }}</div>
<div>{{ indexes.spilloverTimes || 0 }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.congestionSum || 0 }}min</div>
<div>{{ indexes.spilloverSum || 0 }}min</div>
</div>
</div>
</div>
<div class="full-h child" >
<div class="indexTitle" style="background-color: #695f1e">失衡</div>
<div class="indexContent" style="background-color: #2e362a">
<div class="indexTitle" style="background-color: #69431d">拥堵</div>
<div class="indexContent" style="background-color: #2e2b2a">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.unbalanceTimes || 0 }}</div>
<div>{{ indexes.congestionTimes || 0 }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.unbalanceSum || 0 }}min</div>
<div>{{ indexes.congestionSum || 0 }}min</div>
</div>
</div>
</div>
<div class="full-h child" >
<div class="indexTitle" style="background-color: #49141f">溢出</div>
<div class="indexContent" style="background-color: #21182b">
<div class="indexTitle" style="background-color: #695f1e">失衡</div>
<div class="indexContent" style="background-color: #2e362a">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.spilloverTimes || 0 }}</div>
<div>{{ indexes.unbalanceTimes || 0 }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.spilloverSum || 0 }}min</div>
<div>{{ indexes.unbalanceSum || 0 }}min</div>
</div>
</div>
</div>
<div class="full-h child" >
<div class="indexTitle" style="background-color: #495563">空放</div>
<div class="indexContent" style="background-color: #213246">
......
......@@ -92,7 +92,7 @@
</el-select>
</div>
</div>
<div class="line-chart noDataMsg" v-if="!indexModel">暂无数据...</div>
<div class="line-chart noDataMsg" v-if="!indexModel">暂无数据</div>
<div class="line-chart" ref="chartLine" v-else></div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment