zhangzhang
12 months ago
@ -0,0 +1,308 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import moment from "moment"; |
||||
|
export default { |
||||
|
name: "WarningNotify", |
||||
|
props: { |
||||
|
|
||||
|
}, |
||||
|
provide() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
notifications: [], |
||||
|
notifyIndex: 0, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
//点击事件回调 |
||||
|
closeNotify(para) { |
||||
|
// let type = para.type; |
||||
|
this.notifications[para.index].close(); |
||||
|
}, |
||||
|
showNotify(para){ |
||||
|
let _this = this; |
||||
|
let eventType = ["trafficAccident", "vehicleBroken", "trafficControl", "trafficJam", "illegalVehicle", "barrierClear", "construction", "serviceAreaAbnormal", "equipmentTrouble", "abnormalWeather", "otherEvent"]; |
||||
|
let obj = { |
||||
|
content: para.content.content, |
||||
|
time: para.subEvent == "0" ? para.content.event.occurrenceTime : para.content.event.warning_time, |
||||
|
// moment().format("yyyy-MM-DD hh:mm"), |
||||
|
type: para.subEvent == '1' ? "signal" : eventType[para.content.event.eventType*1-1], |
||||
|
level: ["danger", "info"][para.subEvent*1], |
||||
|
duration: para.subEvent == "0" ? 0 : 4000 |
||||
|
} |
||||
|
|
||||
|
_this.notifications[_this.notifyIndex] = _this.$notify({ |
||||
|
title: '', |
||||
|
dangerouslyUseHTMLString: true, |
||||
|
duration: obj.duration, |
||||
|
customClass: 'notify_whole', |
||||
|
offset: 50, |
||||
|
showClose: false, |
||||
|
message: _this.$createElement( |
||||
|
"div", |
||||
|
{ class: "notify_box " + obj.level }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"div", |
||||
|
{ class: 'nofify_head' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"p", |
||||
|
{ class: "title" }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"i", |
||||
|
{ class: 'icon el-icon-warning' } |
||||
|
), _this.$createElement( |
||||
|
"span", |
||||
|
{ class: 'text' }, |
||||
|
"告警" |
||||
|
) |
||||
|
] |
||||
|
) |
||||
|
, _this.$createElement( |
||||
|
"button", |
||||
|
{ |
||||
|
class: 'btn_close el-icon-close', |
||||
|
on: { |
||||
|
click: _this.closeNotify.bind(_this, { type: obj.type, index: _this.notifyIndex }), |
||||
|
}, |
||||
|
} |
||||
|
) |
||||
|
] |
||||
|
), |
||||
|
_this.$createElement( |
||||
|
"div", |
||||
|
{ class: 'nofify_content' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"span", |
||||
|
{ class: 'type_icon' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"i", |
||||
|
{ class: 'iconfont icon-' + obj.type } |
||||
|
) |
||||
|
] |
||||
|
), |
||||
|
|
||||
|
_this.$createElement( |
||||
|
"div", |
||||
|
{ class: 'info' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"p", |
||||
|
{ class: 'content' }, |
||||
|
obj.content |
||||
|
) |
||||
|
, |
||||
|
_this.$createElement( |
||||
|
"p", |
||||
|
{ class: 'time' }, |
||||
|
obj.time |
||||
|
) |
||||
|
] |
||||
|
), |
||||
|
|
||||
|
] |
||||
|
), |
||||
|
|
||||
|
] |
||||
|
), |
||||
|
}); |
||||
|
_this.notifyIndex++; |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.notify_whole { |
||||
|
padding: 0; |
||||
|
width: 420px !important; |
||||
|
// height: 120px !important; |
||||
|
margin-top: 40px !important; |
||||
|
background: none; |
||||
|
border: none; |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
|
||||
|
.el-notification__group { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.el-notification__content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.notify_box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 1px solid; |
||||
|
|
||||
|
.nofify_head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 44px; |
||||
|
align-items: center; |
||||
|
margin: 0 12px; |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 17px; |
||||
|
margin-left: 4px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_close { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
font-size: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nofify_content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20px 20px 16px 0; |
||||
|
|
||||
|
.type_icon { |
||||
|
width: 80px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.iconfont { |
||||
|
font-size: 48px; |
||||
|
&.icon-illegalVehicle{ font-size: 30px;} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
flex: 1; |
||||
|
|
||||
|
.content { |
||||
|
color: #FFF; |
||||
|
font-size: 16px; |
||||
|
word-wrap: break-word; |
||||
|
white-space: wrap; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
color: #FFF; |
||||
|
font-size: 14px; |
||||
|
opacity: 0.5; |
||||
|
text-align: right; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$infoColor: #3DE8FF; |
||||
|
$dangerColor: #FF5F5F; |
||||
|
|
||||
|
.notify_box.info { |
||||
|
background-image: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%); |
||||
|
border-image: linear-gradient(180deg, rgba(78, 174, 204, 1), rgba(78, 174, 204, 0)) 2 2; |
||||
|
|
||||
|
.nofify_head { |
||||
|
border-bottom: 1px solid #FFFFFF33; |
||||
|
|
||||
|
.title { |
||||
|
.icon { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_close { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nofify_content { |
||||
|
.type_icon { |
||||
|
.iconfont { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
.content {} |
||||
|
|
||||
|
.time {} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.notify_box.danger { |
||||
|
background-image: linear-gradient(180deg, rgba(30, 0, 0, 0.9) 0%, rgba(111, 0, 0, 0.9) 100%); |
||||
|
border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2; |
||||
|
|
||||
|
.nofify_head { |
||||
|
border-bottom: 1px solid #FFFFFF33; |
||||
|
|
||||
|
.title { |
||||
|
.icon { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_close { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nofify_content { |
||||
|
.type_icon { |
||||
|
.iconfont { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
.content {} |
||||
|
|
||||
|
.time {} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 974 B After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 974 B |
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<div class='developing'> |
||||
|
<p>功能开发中...</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'InDevelopment', |
||||
|
components: { |
||||
|
}, |
||||
|
mounted() { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.developing { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
p { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 574 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 855 B After Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 574 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 855 B After Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,185 @@ |
|||||
|
<template> |
||||
|
<div class="TrafficFlow"> |
||||
|
<section class="foot"> |
||||
|
<div class="content"> |
||||
|
<div class="content-l"> |
||||
|
<RoadNetwork /> |
||||
|
<LaneTolls /> |
||||
|
</div> |
||||
|
<div class="content-l"> |
||||
|
<VehicleTolls /> |
||||
|
<TruckLaneTolls /> |
||||
|
</div> |
||||
|
<RoadSectionTolls class="content-r" /> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section class="foot"> |
||||
|
<div class="content" style="position: relative; top: -10px"> |
||||
|
<AccessAnalysis class="content-m" /> |
||||
|
<AuxiliaryFlowcharts class="content-rm" /> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section class="foot"> |
||||
|
<div class="content"> |
||||
|
<MonthlyAnalysis class="content-mi" /> |
||||
|
<DaylyAnalysis class="content-mi" /> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import RoadNetwork from "./components/roadNetworkTraffic"; |
||||
|
import LaneTolls from "./components/laneTolls"; |
||||
|
import VehicleTolls from "./components/vehicleTolls"; |
||||
|
import TruckLaneTolls from "./components/truckLaneTolls"; |
||||
|
import RoadSectionTolls from "./components/RoadSectionTolls"; |
||||
|
import AccessAnalysis from "./components/accessAnalysis"; |
||||
|
import AuxiliaryFlowcharts from "./components/auxiliaryFlowcharts"; |
||||
|
import MonthlyAnalysis from "./components/monthlyAnalysis"; |
||||
|
import DaylyAnalysis from "./components/daylyAnalysis"; |
||||
|
|
||||
|
export default { |
||||
|
name: "publicService", |
||||
|
components: { |
||||
|
RoadNetwork, |
||||
|
LaneTolls, |
||||
|
VehicleTolls, |
||||
|
TruckLaneTolls, |
||||
|
RoadSectionTolls, |
||||
|
AccessAnalysis, |
||||
|
AuxiliaryFlowcharts, |
||||
|
MonthlyAnalysis, |
||||
|
DaylyAnalysis, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
changeTabs() {}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-tabs__item { |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
min-width: 128px; |
||||
|
position: relative; |
||||
|
left: 10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width: 128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
padding-top: 15px; |
||||
|
|
||||
|
.header-shot { |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
margin-top: 15px; |
||||
|
height: 160px; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 0px; |
||||
|
|
||||
|
> div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.content-l { |
||||
|
width: calc(32.2%); |
||||
|
margin-right: 20px; |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
> div { |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content-r { |
||||
|
width: calc(33%); |
||||
|
display: inline-flex; |
||||
|
} |
||||
|
|
||||
|
.content-rm { |
||||
|
width: calc(33%); |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.content-mi { |
||||
|
width: calc(50%); |
||||
|
|
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.content-mi:last-child { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.content-m { |
||||
|
display: inline-flex; |
||||
|
width: 66%; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.foot { |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 8px; |
||||
|
> div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-w { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.foot-l { |
||||
|
width: 726px; |
||||
|
} |
||||
|
.foot-m { |
||||
|
width: 613px; |
||||
|
} |
||||
|
.foot-r { |
||||
|
width: 493px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,185 +1,67 @@ |
|||||
<template> |
<!-- <template> |
||||
<div class="TrafficFlow"> |
<div> |
||||
<section class="foot"> |
<img class="img" src="@screen/images/digital/gisAndBim.jpg" /> |
||||
<div class="content"> |
|
||||
<div class="content-l"> |
|
||||
<RoadNetwork /> |
|
||||
<LaneTolls /> |
|
||||
</div> |
|
||||
<div class="content-l"> |
|
||||
<VehicleTolls /> |
|
||||
<TruckLaneTolls /> |
|
||||
</div> |
|
||||
<RoadSectionTolls class="content-r" /> |
|
||||
</div> |
|
||||
</section> |
|
||||
<section class="foot"> |
|
||||
<div class="content" style="position: relative; top: -10px"> |
|
||||
<AccessAnalysis class="content-m" /> |
|
||||
<AuxiliaryFlowcharts class="content-rm" /> |
|
||||
</div> |
</div> |
||||
</section> |
</template> |
||||
<section class="foot"> |
<script> |
||||
<div class="content"> |
|
||||
<MonthlyAnalysis class="content-mi" /> |
</script> |
||||
<DaylyAnalysis class="content-mi" /> |
<style lang='scss' scoped> |
||||
</div> |
.img { |
||||
</section> |
height: 1030px; |
||||
|
width: 1920px; |
||||
|
} |
||||
|
</style> --> |
||||
|
<template> |
||||
|
<div class='comp_box'> |
||||
|
<iframe class="iframe" :src="alarmUrl" frameborder="0"></iframe> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import RoadNetwork from "./components/roadNetworkTraffic"; |
|
||||
import LaneTolls from "./components/laneTolls"; |
import { getConfigKey } from "@/api/system/config.js"; |
||||
import VehicleTolls from "./components/vehicleTolls"; |
|
||||
import TruckLaneTolls from "./components/truckLaneTolls"; |
|
||||
import RoadSectionTolls from "./components/RoadSectionTolls"; |
|
||||
import AccessAnalysis from "./components/accessAnalysis"; |
|
||||
import AuxiliaryFlowcharts from "./components/auxiliaryFlowcharts"; |
|
||||
import MonthlyAnalysis from "./components/monthlyAnalysis"; |
|
||||
import DaylyAnalysis from "./components/daylyAnalysis"; |
|
||||
|
|
||||
export default { |
export default { |
||||
name: "publicService", |
name: 'InDevelopment', |
||||
components: { |
components: { |
||||
RoadNetwork, |
|
||||
LaneTolls, |
|
||||
VehicleTolls, |
|
||||
TruckLaneTolls, |
|
||||
RoadSectionTolls, |
|
||||
AccessAnalysis, |
|
||||
AuxiliaryFlowcharts, |
|
||||
MonthlyAnalysis, |
|
||||
DaylyAnalysis, |
|
||||
}, |
}, |
||||
data() { |
props: { |
||||
return { |
text: { |
||||
activeName: "first", |
type: String, |
||||
}; |
default: "暂无数据" |
||||
}, |
}, |
||||
methods: { |
alarmUrl: { |
||||
changeTabs() {}, |
type: String, |
||||
}, |
default: "", |
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
::v-deep .el-tabs__item { |
|
||||
display: inline-flex; |
|
||||
justify-content: center; |
|
||||
font-size: 16px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #ffffff; |
|
||||
min-width: 128px; |
|
||||
position: relative; |
|
||||
left: 10px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-tabs__active-bar { |
|
||||
min-width: 128px; |
|
||||
} |
} |
||||
|
}, |
||||
::v-deep .el-tabs__nav-wrap::after { |
mounted() { |
||||
background-color: #133242; |
// this.alarmUrl = "http://10.0.86.37:81/?HoveringMouse=true&LightMode=false"; |
||||
opacity: 0.1; |
getConfigKey("dc.gisAndBim").then((res) => { |
||||
|
this.alarmUrl = res.msg |
||||
|
}); |
||||
} |
} |
||||
|
|
||||
.footTabs { |
|
||||
display: inline; |
|
||||
width: 100%; |
|
||||
} |
} |
||||
|
</script> |
||||
|
|
||||
.TrafficFlow { |
<style lang='scss' scoped> |
||||
|
.comp_box { |
||||
|
// padding-top:160px; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
position: relative; |
color: #8A9EAA; |
||||
z-index: 6; |
|
||||
color: white; |
|
||||
padding-top: 15px; |
|
||||
|
|
||||
.header-shot { |
|
||||
width: 98%; |
|
||||
margin: auto; |
|
||||
margin-top: 15px; |
|
||||
height: 160px; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
width: 100%; |
|
||||
margin: auto; |
|
||||
display: flex; |
display: flex; |
||||
flex: 1; |
justify-content: center; |
||||
pointer-events: none; |
align-items: center; |
||||
margin-top: 0px; |
position: relative; |
||||
|
|
||||
> div { |
|
||||
pointer-events: auto; |
|
||||
} |
|
||||
|
|
||||
.content-l { |
|
||||
width: calc(32.2%); |
|
||||
margin-right: 20px; |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
> div { |
|
||||
margin-bottom: 15px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content-r { |
|
||||
width: calc(33%); |
|
||||
display: inline-flex; |
|
||||
} |
|
||||
|
|
||||
.content-rm { |
|
||||
width: calc(33%); |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
|
|
||||
.content-mi { |
|
||||
width: calc(50%); |
|
||||
|
|
||||
margin-right: 20px; |
|
||||
} |
|
||||
|
|
||||
.content-mi:last-child { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
|
|
||||
.content-m { |
|
||||
display: inline-flex; |
|
||||
width: 66%; |
|
||||
margin-right: 20px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.foot { |
|
||||
width: 98%; |
|
||||
margin: auto; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
flex: 1; |
|
||||
pointer-events: none; |
|
||||
margin-top: 8px; |
|
||||
> div { |
|
||||
pointer-events: auto; |
|
||||
} |
|
||||
|
|
||||
.foot-w { |
.iframe { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
width: 100%; |
width: 100%; |
||||
} |
height: 100%; |
||||
|
|
||||
.foot-l { |
|
||||
width: 726px; |
|
||||
} |
|
||||
.foot-m { |
|
||||
width: 613px; |
|
||||
} |
|
||||
.foot-r { |
|
||||
width: 493px; |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||