Skip to content

H
holo-web
Commit 0ad6981d authored by ninglx's avatar ninglx
Browse files
Options

大屏首页根据ui调整样式

parent c22b9893
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1268 additions and 1479 deletions
wj-data-vision/public/index.html
View file @ 0ad6981d
......@@ -43,6 +43,16 @@
width: 100%;
overflow: hidden;
}
.full-h{
height: 100%;
}
.full-w{
width: 100%;
}
.full-w-h{
width: 100%;
height: 100%;
}
.mapboxgl-popup-content {
background: transparent !important;
box-shadow: none !important;
......
wj-data-vision/src/components/Standard/localCamera.vue
View file @ 0ad6981d
......@@ -57,11 +57,8 @@ export default {
.videoControl {
position: absolute;
//width: 100%;
width: 100%;
height: 100%;
//width: calc(100% - 5px);
//height: calc(100% - 5px);
aspect-ratio: 4/3;
padding: 1px;
}
}
......
wj-data-vision/src/components/Standard/msg-card.vue
View file @ 0ad6981d
......@@ -87,7 +87,7 @@ export default {
}
.content {
overflow-y: hidden;
padding: 6px;
padding: 40px 10px;
//background-image: url('../../assets/images/holo/border.png');
background-size: 100% 100%;
//margin: 10px 0 15px 0;
......
wj-data-vision/src/views/intersectionGroups/index.vue
View file @ 0ad6981d
......@@ -6,6 +6,7 @@
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<div class="shadow-mask"></div>
<local-camera
:border="true"
ref="groupViewPointCamera"
......@@ -88,12 +89,12 @@ export default {
boxesShow(val) {
if (val) {
document
.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.classList.remove("mapboxgl-ctrl-top-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
} else {
document
.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.classList.add("mapboxgl-ctrl-top-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
}
},
},
......@@ -232,12 +233,12 @@ export default {
}
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"top-right"
"bottom-right"
);
this.refreshBounds();
document
.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.classList.add("mapboxgl-ctrl-top-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
map.addLayer({
id: "vehicle3D",
type: "custom",
......@@ -668,7 +669,7 @@ export default {
}
.generalSwitch {
left: 735px;
left: 545px;
transition: 0.5s all ease;
}
......@@ -688,6 +689,17 @@ export default {
height: 100%;
position: relative;
}
.shadow-mask{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.3) 100%), radial-gradient(50% 48.61%, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.timeCenter {
left: 50%;
......@@ -699,7 +711,7 @@ export default {
position: absolute;
width: 400px;
height: 300px;
left: 740px;
left: 550px;
bottom: 30px;
z-index: 11;
transition: 0.5s all ease;
......@@ -715,14 +727,14 @@ export default {
.groupCrossCamera .mapboxgl-popup-close-button {
right: 4px;
}
.mapboxgl-ctrl-top-right {
top: 20px !important;
right: 721px !important;
.mapboxgl-ctrl-bottom-right {
bottom: 20px !important;
right: 545px !important;
z-index: 11 !important;
transition: 0.5s all ease;
}
.mapboxgl-ctrl-top-right-hide-box {
.mapboxgl-ctrl-bottom-right-hide-box {
right: 20px !important;
transition: 0.5s all ease;
}
......
wj-data-vision/src/views/intersectionGroups/layersSwitch.vue
View file @ 0ad6981d
......@@ -69,21 +69,6 @@ export default {
z-index: 13;
top: 50%;
transform: translateY(-50%);
// top: 16px;
// .fold{
// width: 40px;
// height: 40px;
// background-color: white;
// display: flex;
// justify-content: center;
// align-items: center;
// border-radius: 50%;
// /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
// box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.4);
// }
// .fold.check {
// background: green;
// }
.el-icon-document-copy {
font-size: 20px;
cursor: pointer;
......@@ -111,17 +96,12 @@ export default {
.layerIcons {
width: 42px;
margin-top: 8px;
// box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
// border-radius: 4px;
// background-color: ;
//height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.item {
width: 42px;
//height: 25%;
display: flex;
align-items: flex-start;
justify-content: center;
......
wj-data-vision/src/views/intersectionGroups/msgLeft/targetTrack.vue 0 → 100644
View file @ 0ad6981d
<template>
<msg-card class="item item-targetTrack" title="目标轨迹">
<div class="targetTrack">
<div class="targetTrackInner">
<div
class="trackItem"
v-for="(item, index) of targetTracks"
:key="index"
>
<div class="leftType">
<span class="circle4"></span>{{ item.aliasName }}
</div>
<div class="rightValue">
{{ item.eventNumber }}{{ nameUnitMap[item.aliasName] }}
</div>
</div>
</div>
</div>
</msg-card>
</template>
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import {
getTargetTracks,
trafficSignals,
getOverDatas,
getConflict,
} from "../../../dao/api";
export default {
components: { msgCard },
data() {
return {
targetTracks: [],
nameUnitMap: {
行人横穿马路: "人",
连续变道: "辆",
非机动车占用机动车道: "辆",
非机动车横穿马路: "辆",
路段掉头: "辆",
},
};
},
mounted() {
// 目标轨迹
getTargetTracks().then((res) => {
console.log("目标轨迹", res.content);
this.targetTracks = res.content;
});
},
methods: {},
};
</script>
<style lang="less" scoped>
.item-targetTrack {
font-size: 14px;
background-color: #030913;
padding: 8px;
color: rgba(155, 177, 212, 1);
.targetTrack {
height: 100%;
overflow: hidden;
border: 1px solid #0f2745;
padding: 18px;
background-color: #010613;
display: flex;
flex-direction: column;
.targetTrackInner {
height: 100%;
overflow-y: auto;
.trackItem {
margin-bottom: 12px;
height: 60px;
width: 100%;
background-color: #000e27;
display: flex;
align-items: center;
padding: 0 12px;
justify-content: space-between;
.leftType {
display: flex;
align-items: center;
.circle4 {
display: inline-block;
width: 10px;
height: 10px;
text-align: center;
margin: 0 18px 0 8px;
background-image: url("../../../assets/images/holo/textMarker.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
.rightValue {
color: rgba(0, 159, 238, 1);
}
}
}
}
}
</style>
wj-data-vision/src/views/intersectionGroups/msgLeft/trafficFlow.vue 0 → 100644
View file @ 0ad6981d
<template>
<msg-card class="item item-trafficFlow" title="交通流量">
<el-tabs v-model="tabsActiveName" @tab-click="tabsHandleClick">
<el-tab-pane name="cross" label="路口">
<div id="trafficFlow" class="full-h"></div>
</el-tab-pane>
<el-tab-pane name="road" label="路段">
<div id="trafficFlow1" class="full-h"></div>
</el-tab-pane>
</el-tabs>
</msg-card>
</template>
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import {
getTargetTracks,
trafficSignals,
getOverDatas,
getConflict,
} from "../../../dao/api";
import {
crossFlow,
ridFlow,
eventAnalysis,
eventAlarm,
} from "../../../dao/situation";
import {getFontSize} from "../../../config/holo/fontSize.js";
export default {
components: { msgCard },
data() {
return {
// 交通流量
tabsActiveName: "cross",
trafficFlowData: {},
charts: {},
};
},
mounted() {
//路口
crossFlow().then((res) => {
console.log("lukou", res);
this.trafficFlowData.cross = res.content;
this.$nextTick(() => {
this.trafficFlow(this.trafficFlowData.cross, true);
});
});
//路段
ridFlow().then((res) => {
console.log("luduan", res);
this.trafficFlowData.road = res.content;
});
},
methods: {
trafficFlow(content, isCross) {
let option = {
color: ["#53c188", "#318af5", "#6a38e1"],
tooltip: {
trigger: "axis",
axisPointer: {
// Use axis to trigger tooltip
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
},
textStyle: {
fontSize: getFontSize(12),
},
confine: true,
},
legend: {
top: getFontSize(20),
itemGap: getFontSize(16),
itemWidth: getFontSize(12),
itemHeight: getFontSize(12),
textStyle: {
color: "rgba(126, 139, 166, 1)",
fontSize: getFontSize(12),
lineHeight: 15,
},
pageTextStyle: {
color: "rgba(126, 139, 166, 1)",
fontSize: getFontSize(12),
},
pageIconColor: "white",
pageIconSize: getFontSize(12),
pageIconInactiveColor: "rgba(153, 153, 153, 1)",
type: "scroll",
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: "22%",
containLabel: true,
},
xAxis: {
type: "category",
data: content.timeList,
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
},
},
yAxis: {
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, 0.2)",
},
},
type: "value",
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
},
},
series: (() => {
let series = [];
content.flowList.forEach((flow) => {
series.push({
name: flow.name,
type: "bar",
barWidth: getFontSize(22),
stack: "total",
label: {
show: false,
},
emphasis: {
focus: "series",
},
data: flow.list,
});
});
return series;
})(),
};
if (isCross) {
this.charts.trafficFlowC = echarts.init(
document.getElementById("trafficFlow")
);
this.charts.trafficFlowC && this.charts.trafficFlowC.setOption(option);
} else {
this.charts.trafficFlowC1 = echarts.init(
document.getElementById("trafficFlow1")
);
this.charts.trafficFlowC1 &&
this.charts.trafficFlowC1.setOption(option);
}
},
tabsHandleClick(tab) {
this.$nextTick(() => {
this.trafficFlow(
this.trafficFlowData[tab.name],
tab.name === "cross"
);
});
},
},
};
</script>
<style lang="less" scoped>
.item-trafficFlow {
position: relative;
::v-deep .el-tabs__content {
padding: 6px;
height: calc(100% - 42px);
}
::v-deep .el-tabs__active-bar {
background: transparent;
}
::v-deep .el-tabs__item.is-active {
color: white;
background-color: rgba(1, 23, 50, 1);
}
::v-deep .el-tab-pane {
height: 100%;
}
::v-deep .el-tabs__nav-wrap::after {
height: 0;
}
::v-deep .el-tabs__item {
padding: 0;
height: 42px;
line-height: 42px;
width: 50%;
font-size: 14px;
color: rgba(126, 139, 166, 1);
text-align: center;
border-bottom: unset;
}
::v-deep .el-tabs__nav {
float: unset;
border: 1px solid #04396f;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid rgba(2, 43, 83, 1);
}
::v-deep .el-tabs__header {
margin: 0;
background-color: transparent;
}
::v-deep .el-tabs {
height: 100%;
}
}
</style>
wj-data-vision/src/views/intersectionGroups/msgLeft/trafficSignal.vue 0 → 100644
View file @ 0ad6981d
<template>
<msg-card class="item item-signal" title="交通信号">
<div class="targetTrack">
<div class="targetTrackInner">
<div
class="trackItem"
v-for="(item, index) of signalArray"
:key="index"
>
<div class="leftType" :title="item.label">
<span class="circle4"></span
><span class="typeText">{{ item.label }}</span>
</div>
<div class="rightValue">{{ item.value }}{{ item.unit }}</div>
</div>
</div>
</div>
</msg-card>
</template>
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import {
getTargetTracks,
trafficSignals,
getOverDatas,
getConflict,
} from "../../../dao/api";
import {
crossFlow,
ridFlow,
eventAnalysis,
eventAlarm,
} from "../../../dao/situation";
import { getFontSize } from "../../../config/holo/fontSize.js";
export default {
components: { msgCard },
data() {
return {
signalArray: [],
signalUnitMap: {
avgDelay: "s",
oncePassRate: "%",
redNoClearRate: "%",
noStopRate: "%",
pedestrianAvgPassTime: "s",
greenEmptyRate: "%",
greenUseRate: "%",
capacity: "pcu/h",
},
signalLabelMap: {
avgDelay: "路口平均延误",
oncePassRate: "路口一次通过率",
redNoClearRate: "红灯间隔未清空率",
noStopRate: "路口不停车通过率",
pedestrianAvgPassTime: "行人平均通过时长",
greenEmptyRate: "绿灯空放率",
greenUseRate: "绿灯利用率",
capacity: "路口通行能力",
},
signalArr: [
"avgDelay",
"oncePassRate",
"redNoClearRate",
"noStopRate",
"pedestrianAvgPassTime",
"greenEmptyRate",
"greenUseRate",
"capacity",
],
};
},
mounted() {
// 交通信号
trafficSignals().then((res) => {
console.log(res.content);
for (let key in res.content) {
if (this.signalArr.includes(key)) {
let unit = this.signalUnitMap[key];
let value = res.content[key];
// let value = 0
if (unit === "%") {
value = res.content[key] * 100;
}
this.signalArray.push({
label: this.signalLabelMap[key],
value: value,
unit: unit,
});
}
}
});
},
methods: {},
};
</script>
<style lang="less" scoped>
.item-signal {
height: 100%;
padding: 8px;
font-size: 14px;
color: rgba(155, 177, 212, 1);
.targetTrack {
height: 100%;
overflow: hidden;
border: 1px solid #0f2745;
padding: 18px;
background-color: #010613;
display: flex;
flex-direction: column;
.targetTrackInner {
height: 100%;
overflow-y: auto;
.trackItem {
margin-bottom: 12px;
height: 34px;
width: 100%;
background-color: #000e27;
display: flex;
align-items: center;
padding: 0 12px;
justify-content: space-between;
.leftType {
display: flex;
align-items: center;
.circle4 {
display: inline-block;
width: 10px;
height: 10px;
text-align: center;
margin: 0 18px 0 8px;
background-image: url("../../../assets/images/holo/textMarker.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
.rightValue {
color: rgba(0, 159, 238, 1);
}
}
}
}
}
</style>
wj-data-vision/src/views/intersectionGroups/msgRight/conflictMonitor.vue 0 → 100644
View file @ 0ad6981d
<template>
<msg-card class="item" title="冲突点监测">
<div id="PedAndNoVehicles" class="full-h"></div>
</msg-card>
</template>
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import {
getTargetTracks,
trafficSignals,
getOverDatas,
getConflict,
} from "../../../dao/api";
import {
crossFlow,
ridFlow,
eventAnalysis,
eventAlarm,
} from "../../../dao/situation";
import { getFontSize } from "../../../config/holo/fontSize.js";
export default {
components: { msgCard },
data() {
return {
charts:{}
};
},
mounted() {
// 冲突点监测
getConflict().then(res => {
console.log('冲突点监测', res.content)
this.PedAndNoVehicles(res.content)
}) },
methods: {
// 冲突点监测
PedAndNoVehicles(content) {
let times = content.timeList,
VehicleNoVehicleLabel = content.list[0].name,
VehicleNoVehicleVal = content.list[0].list,
VehicleVehicleLabel = content.list[1].name,
VehicleVehicleVal = content.list[1].list,
PasserbyVehicleLabel = content.list[2].name,
PasserbyVehicleVal = content.list[2].list;
this.charts.eventStudyC = echarts.init(
document.getElementById("PedAndNoVehicles")
);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
textStyle: {
fontSize: getFontSize(12),
},
confine: true,
formatter: (params) => {
let back = ``;
for (let item of params) {
if (
[VehicleNoVehicleLabel, VehicleVehicleLabel, PasserbyVehicleLabel].includes(
item.seriesName
)
) {
back += `${item.seriesName}:${item.data}</br>`;
}
}
return back;
},
},
grid: {
right: 0,
bottom: getFontSize(25),
left: getFontSize(40),
top: getFontSize(58),
},
legend: {
selectedMode: false,
data: [
{name: VehicleNoVehicleLabel},
{name: VehicleVehicleLabel},
{name: PasserbyVehicleLabel},
],
height: getFontSize(20),
itemGap: getFontSize(16),
type: "scroll",
itemWidth: getFontSize(12),
itemHeight: getFontSize(12),
textStyle: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
},
// data: ['Evaporation', 'Precipitation', 'Temperature'],
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
// prettier-ignore
data: times,
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
},
},
],
yAxis:
{
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle:{
color:'rgba(255, 255, 255, 0.2)',
}
},
nameTextStyle: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
},
axisLabel: {
show: true,
formatter:(a)=>{
console.log(a);
return a
},
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
},
type: "value",
// name: vehicleNumLabel,
// position: "left",
alignTicks: true,
axisLine: {
show: false,
},
},
series: [
// ---------
{
// name: pedNumLabel,
name: VehicleNoVehicleLabel,
type: "bar",
barWidth: getFontSize(7),
data: VehicleNoVehicleVal,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#346ba4", // 0% 处的颜色
},
{
offset: 1,
color: "#64b1ea", // 100% 处的颜色
},
],
false
),
},
},
},
{
type: "bar",
barWidth: getFontSize(4),
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#123660", // 0% 处的颜色
},
{
offset: 1,
color: "#4a83aa", // 100% 处的颜色
},
],
false
),
},
},
barGap: 0,
data: VehicleNoVehicleVal,
},
{
name: "b",
tooltip: {
show: false,
},
type: "pictorialBar",
itemStyle: {
borderWidth: 0,
borderColor: "#47A6FF",
color: "#7fd4ff",
},
symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
symbolSize: [getFontSize(11), getFontSize(3)],
symbolOffset: [getFontSize(-6), getFontSize(-2)], // 左右 ，上下
symbolRotate: 0,
symbolPosition: "end",
data: VehicleNoVehicleVal,
z: 3,
},
// ---------
{
// name: notVehicleNumLabel,
name: VehicleVehicleLabel,
type: "bar",
barWidth: getFontSize(7),
data: VehicleVehicleVal,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#422513", // 0% 处的颜色
},
{
offset: 1,
color: "#ec7b2a", // 100% 处的颜色
},
],
false
),
},
},
},
{
type: "bar",
barWidth: getFontSize(4),
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#311b10", // 0% 处的颜色
},
{
offset: 1,
color: "#ac591c", // 100% 处的颜色
},
],
false
),
},
},
barGap: 0,
data: VehicleVehicleVal,
},
{
name: "bb",
tooltip: {
show: false,
},
type: "pictorialBar",
itemStyle: {
borderWidth: 0,
borderColor: "#dd7428",
color: "#ff852c",
},
symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
symbolSize: [getFontSize(11), getFontSize(3)],
symbolOffset: [getFontSize(5), getFontSize(-2)], // 左右 ，上下
symbolRotate: 0,
symbolPosition: "end",
data: VehicleVehicleVal,
z: 3,
},
// ---------
{
// name: vehicleNumLabel,
name: PasserbyVehicleLabel,
symbol: "circle",
type: "line",
// symbolSize: 4,
smooth: true,
// yAxisIndex: 1,
itemStyle: {
color: "rgba(219, 207, 3, 1)",
},
data: PasserbyVehicleVal,
},
],
};
option && this.charts.eventStudyC.setOption(option);
},
},
};
</script>
<style lang="less" scoped>
</style>
wj-data-vision/src/views/intersectionGroups/msgRight/trafficEvent.vue 0 → 100644
View file @ 0ad6981d
<template>
<msg-card class="item item-trafficEvent" title="交通事件">
<div class="full-h trafficEvent">
<el-tabs style="height:100%">
<el-tab-pane v-for="item of trafficEvents" :key="item">
<span slot="label"
>{{ item.eventCategoryName }} {{ item.number }}</span
>
<div class="traffics">
<div
class="trafficItem"
v-for="i of item.eventTypeList"
:key="i"
>
<span class="left">
<span class="circle4"></span>{{ i.eventName }}</span
><span class="right">{{ i.number }}</span>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</msg-card>
</template>
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import {
getTargetTracks,
trafficSignals,
getOverDatas,
getConflict,
} from "../../../dao/api";
import {
crossFlow,
ridFlow,
eventAnalysis,
eventAlarm,
} from "../../../dao/situation";
import { getFontSize } from "../../../config/holo/fontSize.js";
export default {
components: { msgCard },
data() {
return {
// 交通事件
trafficEvents: [],
};
},
mounted() {
eventAnalysis().then((res) => {
console.log("事件分析", res.content);
this.trafficEvents = res.content;
});
},
methods: {},
};
</script>
<style lang="less" scoped>
.item-trafficEvent {
::v-deep .el-tab-pane {
height: 100%;
}
::-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;
}
::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: 45px;
}
::v-deep .el-tabs__content {
background-color: transparent;
padding: 10px 12px 8px 12px;
height: calc(100% - 45px);
border: 1px solid #102945;
background-color: #010613;
border-radius: 4px;
}
::v-deep .el-tabs__nav {
transform: translateX(-50%) !important;
left: 50%;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: transparent;
}
.head {
display: flex;
width: 100%;
height: 100%;
.name {
height: 100%;
width: 90%;
line-height: normal;
}
.number {
line-height: normal;
}
}
.trafficEvent {
overflow: auto;
}
.traffics {
color: rgba(155, 177, 212, 1);
display: flex;
justify-content: space-between;
flex-flow: row wrap;
.trafficItem {
font-size: 14px;
flex: 0 0 49.2%;
height: 34px;
margin-bottom: 7px;
display: flex;
align-items: center;
background-color: rgba(0, 14, 39, 1);
.left {
overflow: hidden;
text-overflow: ellipsis;
max-width: 85%;
white-space: nowrap;
.circle4 {
display: inline-block;
width: 10px;
height: 10px;
text-align: center;
line-height: 10px;
margin: 0 8px;
background-image: url('../../../assets/images/holo/textMarker.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
display: inline-block;
width: 85%;
}
.right {
color: rgba(0, 159, 238, 1);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
white-space: nowrap;
}
}
}
}
</style>
wj-data-vision/src/views/intersectionGroups/msgRight/warningData.vue 0 → 100644
View file @ 0ad6981d
<template>
<msg-card class="item item-warningData" title="疑似事故">
<vue-seamless-scroll
class="warningMsg"
:data="warningData"
:class-option="optionSetting"
>
<li v-for="(item, index) in warningData" :key="index">
<div class="warningItem">
<div class="left-type" :class="typeClassMap[item.eventType]">
<span>{{ item.eventType }}</span>
</div>
<div class="message" :class="`border-${typeClassMap[item.eventType]}`">
<div class="message-title">
<i class="icon-location"></i>
<div class="right-title">
{{ item.placeDesc }}
</div>
</div>
<div class="message-detail">
<span :title="`发生时间:` + item.happenTime"
>发生时间： {{ item.happenTime }}</span
>
<span :title="`时长:` + item.duration"
>时长： {{ item.duration }}min</span
>
<span :title="`事件来源:` + item.source"
>事件来源： {{ item.source }}</span
>
</div>
</div>
</div>
</li>
</vue-seamless-scroll>
</msg-card>
</template>
<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import "vue-seamless-scroll";
import {
getTargetTracks,
trafficSignals,
getOverDatas,
getConflict,
} from "../../../dao/api";
import {
crossFlow,
ridFlow,
eventAnalysis,
eventAlarm,
} from "../../../dao/situation";
import { getFontSize } from "../../../config/holo/fontSize.js";
export default {
components: { msgCard },
data() {
return {
// 告警信息
warningData: [],
typeClassMap: {
疑似事故: "acci",
轻微拥堵: "crod",
中度拥堵: "crodz",
},
};
},
computed: {
optionSetting() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 默认值0是无缝不停止的滚动
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
mounted() {
eventAlarm().then((res) => {
console.log("事件告警", res.content);
this.warningData = res.content;
});
},
methods: {},
};
</script>
<style lang="less" scoped>
.item-warningData {
color: white;
.warningMsg {
overflow: hidden;
height: 100%;
}
.warningItem {
align-items: center;
margin-bottom: 6px;
display: flex;
width: 100%;
.left-type {
height: 46px;
width: 46px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
span {
display: inline-block;
width: 46px;
padding: 5px;
text-align: center;
}
}
.acci {
background-color: #3c1b25;
border: 1px solid #3c1b25;
color: #ff666b;
}
.crod {
background-color: #061b47;
border: 1px solid #061b47;
color: #2a82e4;
}
.crodz {
background-color: #522e1c;
border: 1px solid #522e1c;
color: #f69d1d;
}
.border-acci {
border: 1px solid #3c1b25;
}
.border-crod {
border: 1px solid #061b47;
}
.border-crodz {
border: 1px solid #522e1c;
}
.icon-location {
display: inline-block;
width: 15px;
height: 15px;
background: url("../../../assets/images/holo/location-icon.png");
background-size: 100% 100%;
text-align: center;
margin-right: 8px;
}
.right-title {
display: flex;
}
.message {
padding: 0 0 0 10px;
border: 1px solid rgba(60, 27, 37, 1);
display: flex;
flex-direction: column;
justify-content: center;
width: calc(100% - 30px);
font-size: 14px !important;
.message-title {
display: flex;
align-items: center;
height: 22px;
}
.message-detail {
height: 22px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
display: flex;
align-items: center;
color: rgba(155, 177, 212, 1);
span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
width: 33.3%;
}
}
}
}
}
</style>
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