zhangzhang
1 year ago
10 changed files with 1580 additions and 1463 deletions
@ -1,262 +1,270 @@ |
|||||
import * as echarts from "echarts"; |
import * as echarts from "echarts"; |
||||
|
|
||||
var xData = ['梁山东', '安城', '梁山', '孝里', '平阴北', '长青','东平','平阴南','嘉祥西'] |
var xData = [ |
||||
let eventWarning = [55, 50, 46, 46, 55, 45,33,62,30] |
"梁山东", |
||||
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200,1200,1900] |
"安城", |
||||
let legend = ['通行量', '收费金额'] |
"梁山", |
||||
|
"孝里", |
||||
|
"平阴北", |
||||
|
"长青", |
||||
|
"东平", |
||||
|
"平阴南", |
||||
|
"嘉祥西", |
||||
|
]; |
||||
|
let eventWarning = [55, 50, 46, 46, 55, 45, 33, 62, 30]; |
||||
|
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200, 1200, 1900]; |
||||
|
let legend = ["通行量", "收费金额"]; |
||||
let options = { |
let options = { |
||||
color: ['#2CF1FF', '#3456FF'], |
color: ["#2CF1FF", "#3456FF"], |
||||
timeline: { |
timeline: { |
||||
|
show: false, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
// axisPointer: {
|
||||
|
// type: "shadow",
|
||||
|
// },
|
||||
|
// backgroundColor: "rgba(255,255,255,0.75)",
|
||||
|
// extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
|
||||
|
// textStyle: {
|
||||
|
// fontSize: 14,
|
||||
|
// color: "#000",
|
||||
|
// },
|
||||
|
// formatter: "{a}<br/>{b} :\n\n{c} ",
|
||||
|
}, |
||||
|
legend: { |
||||
|
top: 10, |
||||
|
right: "center", |
||||
|
itemWidth: 10, |
||||
|
itemHeight: 6, |
||||
|
itemGap: 20, |
||||
|
icon: "roundRect", |
||||
|
orient: "horizontal", |
||||
|
itemStyle: { |
||||
|
borderRadius: 18, |
||||
|
}, |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
fontSize: 13, |
||||
|
}, |
||||
|
data: legend, |
||||
|
}, |
||||
|
grid: [ |
||||
|
// 左边
|
||||
|
{ |
||||
show: false, |
show: false, |
||||
}, |
left: "5%", |
||||
tooltip: { |
top: "15%", |
||||
trigger: "axis", |
bottom: "10%", |
||||
axisPointer: { |
containLabel: true, |
||||
type: "shadow", |
width: "40%", |
||||
|
}, |
||||
|
// 中间
|
||||
|
{ |
||||
|
show: false, |
||||
|
left: "51%", |
||||
|
top: "15%", |
||||
|
bottom: "15%", |
||||
|
width: "0%", |
||||
|
}, |
||||
|
// 右边
|
||||
|
{ |
||||
|
show: false, |
||||
|
right: "5%", |
||||
|
top: "15%", |
||||
|
bottom: "10%", |
||||
|
containLabel: true, |
||||
|
width: "40%", |
||||
|
}, |
||||
|
], |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: "value", |
||||
|
inverse: true, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
}, |
}, |
||||
backgroundColor: "rgba(255,255,255,0.75)", |
axisLabel: { |
||||
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);", |
show: false, |
||||
textStyle: { |
|
||||
fontSize: 14, |
|
||||
color: "#000", |
|
||||
}, |
}, |
||||
formatter: "{a}<br/>{b} :\n\n{c} ", |
axisLabel: { |
||||
}, |
show: true, |
||||
legend: { |
verticalAlign: "middle", |
||||
top: 10, |
textStyle: { |
||||
right: "center", |
color: "rgba(255, 255, 255, 0.7)", |
||||
itemWidth: 10, |
fontSize: 12, |
||||
itemHeight: 6, |
}, |
||||
itemGap: 20, |
|
||||
icon:"roundRect", |
|
||||
orient: "horizontal", |
|
||||
itemStyle:{ |
|
||||
borderRadius:18, |
|
||||
}, |
}, |
||||
textStyle: { |
splitLine: { |
||||
color: "#ffffff", |
show: false, |
||||
fontSize: 16, |
}, |
||||
|
}, |
||||
|
{ |
||||
|
gridIndex: 1, |
||||
|
show: false, |
||||
|
}, |
||||
|
{ |
||||
|
gridIndex: 2, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
}, |
}, |
||||
data: legend, |
axisTick: { |
||||
}, |
show: false, |
||||
grid: [ |
|
||||
// 左边
|
|
||||
{ |
|
||||
show: false, |
|
||||
left: "5%", |
|
||||
top: "15%", |
|
||||
bottom: "10%", |
|
||||
containLabel: true, |
|
||||
width: "40%", |
|
||||
}, |
}, |
||||
// 中间
|
axisLabel: { |
||||
{ |
show: true, |
||||
show: false, |
verticalAlign: "middle", |
||||
left: "51%", |
textStyle: { |
||||
top: "15%", |
color: "rgba(255, 255, 255, 0.7)", |
||||
bottom: "15%", |
fontSize: 12, |
||||
width: "0%", |
}, |
||||
}, |
}, |
||||
// 右边
|
splitLine: { |
||||
{ |
show: false, |
||||
show: false, |
|
||||
right: "5%", |
|
||||
top: "15%", |
|
||||
bottom: "10%", |
|
||||
containLabel: true, |
|
||||
width: "40%", |
|
||||
}, |
}, |
||||
], |
}, |
||||
xAxis: [ |
], |
||||
{ |
yAxis: [ |
||||
type: "value", |
{ |
||||
inverse: true, |
type: "category", |
||||
axisTick: { |
inverse: true, |
||||
show: false, |
position: "right", |
||||
}, |
axisLine: { |
||||
axisLabel: { |
show: false, |
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: true, |
|
||||
verticalAlign: 'middle', |
|
||||
textStyle: { |
|
||||
color: 'rgba(255, 255, 255, 0.7)', |
|
||||
fontSize: 12, |
|
||||
}, |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
}, |
||||
{ |
axisTick: { |
||||
gridIndex: 1, |
show: false, |
||||
show: false, |
|
||||
}, |
}, |
||||
{ |
axisLabel: { |
||||
gridIndex: 2, |
show: false, |
||||
axisLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: true, |
|
||||
verticalAlign: 'middle', |
|
||||
textStyle: { |
|
||||
color: 'rgba(255, 255, 255, 0.7)', |
|
||||
fontSize: 12, |
|
||||
}, |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
}, |
||||
], |
data: xData, |
||||
yAxis: [ |
}, |
||||
{ |
{ |
||||
type: "category", |
gridIndex: 1, |
||||
inverse: true, |
type: "category", |
||||
position: "right", |
inverse: true, |
||||
axisLine: { |
position: "left", |
||||
show: false |
axisLine: { |
||||
}, |
show: false, |
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: false, |
|
||||
}, |
|
||||
data: xData, |
|
||||
}, |
}, |
||||
{ |
axisTick: { |
||||
gridIndex: 1, |
show: false, |
||||
type: "category", |
}, |
||||
inverse: true, |
axisLabel: { |
||||
position: "left", |
show: true, |
||||
axisLine: { |
color: "rgba(255, 255, 255, 1)", |
||||
show: false, |
fontSize: 12, |
||||
}, |
align: "center", |
||||
axisTick: { |
}, |
||||
show: false, |
data: xData.map(function (value) { |
||||
}, |
return { |
||||
axisLabel: { |
value: value, |
||||
show: true, |
textStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
|
||||
fontSize: 12, |
|
||||
align: "center", |
align: "center", |
||||
}, |
}, |
||||
data: xData.map(function (value) { |
}; |
||||
return { |
}), |
||||
value: value, |
}, |
||||
textStyle: { |
{ |
||||
align: "center", |
gridIndex: 2, |
||||
}, |
type: "category", |
||||
}; |
inverse: true, |
||||
}), |
position: "left", |
||||
|
axisLine: { |
||||
|
show: false, |
||||
}, |
}, |
||||
{ |
axisTick: { |
||||
gridIndex: 2, |
show: false, |
||||
type: "category", |
|
||||
inverse: true, |
|
||||
position: "left", |
|
||||
axisLine: { |
|
||||
show: false |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: false, |
|
||||
}, |
|
||||
data: xData, |
|
||||
}, |
}, |
||||
], |
axisLabel: { |
||||
series: [ |
show: false, |
||||
{ |
|
||||
name: legend[0], |
|
||||
type: "bar", |
|
||||
barWidth: 10, |
|
||||
stack: "1", |
|
||||
label: { |
|
||||
normal: { |
|
||||
show: true, |
|
||||
position: "left", |
|
||||
z:"100", |
|
||||
valueAnimation: true, |
|
||||
textStyle: { |
|
||||
color: "#F5F5F5", |
|
||||
fontSize: 10, |
|
||||
}, |
|
||||
formatter: '{c}' |
|
||||
}, |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
borderRadius:9, |
|
||||
//Y轴数字显示部分
|
|
||||
|
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: "#167145", |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: "#01EAC1", |
|
||||
}, |
|
||||
]), |
|
||||
}, |
|
||||
data: eventWarning, |
|
||||
animationEasing: "elasticOut", |
|
||||
showBackground: true, |
|
||||
backgroundStyle: { |
|
||||
color: 'rgba(180, 180, 180, 0.2)' |
|
||||
} |
|
||||
}, |
}, |
||||
{ |
data: xData, |
||||
name: legend[1], |
}, |
||||
type: "bar", |
], |
||||
stack: "2", |
series: [ |
||||
barWidth: 10, |
{ |
||||
xAxisIndex: 2, |
name: legend[0], |
||||
yAxisIndex: 2, |
type: "bar", |
||||
label: { |
barWidth: 10, |
||||
normal: { |
stack: "1", |
||||
show: true, |
label: { |
||||
position: "right", |
normal: { |
||||
z:"100", |
show: true, |
||||
valueAnimation: true, |
position: "left", |
||||
textStyle: { |
z: "100", |
||||
color: "#F5F5F5", |
valueAnimation: true, |
||||
fontSize: 10, |
textStyle: { |
||||
}, |
color: "#F5F5F5", |
||||
formatter: '{c}' |
fontSize: 10, |
||||
}, |
}, |
||||
}, |
formatter: "{c}", |
||||
itemStyle: { |
}, |
||||
borderRadius:9, |
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: "#F89336", |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: "#D2BCA7", |
|
||||
}, |
|
||||
]), |
|
||||
}, |
|
||||
data: eventHandling, |
|
||||
animationEasing: "elasticOut", |
|
||||
showBackground: true, |
|
||||
backgroundStyle: { |
|
||||
color: 'rgba(180, 180, 180, 0.2)' |
|
||||
} |
|
||||
}, |
}, |
||||
], |
itemStyle: { |
||||
}; |
borderRadius: 9, |
||||
|
//Y轴数字显示部分
|
||||
|
|
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#167145", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#01EAC1", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
data: eventWarning, |
||||
|
animationEasing: "elasticOut", |
||||
|
showBackground: true, |
||||
|
backgroundStyle: { |
||||
|
color: "rgba(180, 180, 180, 0.2)", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: legend[1], |
||||
|
type: "bar", |
||||
|
stack: "2", |
||||
|
barWidth: 10, |
||||
|
xAxisIndex: 2, |
||||
|
yAxisIndex: 2, |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
position: "right", |
||||
|
z: "100", |
||||
|
valueAnimation: true, |
||||
|
textStyle: { |
||||
|
color: "#F5F5F5", |
||||
|
fontSize: 10, |
||||
|
}, |
||||
|
formatter: "{c}", |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
borderRadius: 9, |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#F89336", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#D2BCA7", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
data: eventHandling, |
||||
|
animationEasing: "elasticOut", |
||||
|
showBackground: true, |
||||
|
backgroundStyle: { |
||||
|
color: "rgba(180, 180, 180, 0.2)", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
export default options |
export default options; |
||||
|
|||||
@ -1,394 +1,393 @@ |
|||||
<template> |
<template> |
||||
<div class='congestion'> |
<div class='congestion'> |
||||
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<div class="weaterMain" > |
<div class="weaterMain"> |
||||
<div class="weaterTitle" > |
<div class="weaterTitle"> |
||||
<span class="text">当前气象预警信息数：</span> |
<span class="text">当前气象预警信息数：</span> |
||||
<span class="num" >113</span> |
<span class="num">113</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> |
||||
|
<el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div > |
<div class="warningList"> |
||||
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> |
<div class="itemWarning" v-for="(item, i) in warnings"> |
||||
<el-option |
<div class="left-w"> |
||||
v-for="item in colors" |
<div class="left-row"> |
||||
:key="item.value" |
<div class="label"> |
||||
:label="item.label" |
预警类型： |
||||
:value="item.value"> |
</div> |
||||
</el-option> |
<div class="value"> |
||||
</el-select> |
{{ item.class }} |
||||
</div> |
</div> |
||||
</div> |
|
||||
<div class="warningList" > |
|
||||
<div class="itemWarning" v-for="(item,i) in warnings"> |
|
||||
<div class="left-w" > |
|
||||
<div class="left-row" > |
|
||||
<div class="label" > |
|
||||
预警类型： |
|
||||
</div> |
</div> |
||||
<div class="value" > |
<div class="left-row"> |
||||
{{ item.class }} |
<div class="label"> |
||||
|
预警等级： |
||||
|
</div> |
||||
|
<div :class="'value ' + item.type"> |
||||
|
{{ item.lay }} |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
<div class="left-row"> |
||||
<div class="left-row" > |
<div class="label"> |
||||
<div class="label" > |
预警范围： |
||||
预警等级： |
</div> |
||||
|
<div class="value"> |
||||
|
{{ item.scope }} |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div :class="'value '+item.type" > |
<div class="left-row"> |
||||
{{ item.lay }} |
<div class="label"> |
||||
|
预警发布时间： |
||||
|
</div> |
||||
|
<div class="value"> |
||||
|
{{ item.dateTime }} |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="left-row" > |
<div class="right-w"> |
||||
<div class="label" > |
<div class="right-row"> |
||||
预警范围： |
预警内容: |
||||
</div> |
</div> |
||||
<div class="value" > |
<div class="right-text"> |
||||
{{ item.scope }} |
{{ item.text }} |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="left-row" > |
|
||||
<div class="label" > |
|
||||
预警发布时间： |
|
||||
</div> |
|
||||
<div class="value" > |
|
||||
{{ item.dateTime }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right-w" > |
|
||||
<div class="right-row" > |
|
||||
预警内容: |
|
||||
</div> |
|
||||
<div class="right-text" > |
|
||||
{{ item.text }} |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { color } from 'echarts'; |
import { color } from 'echarts'; |
||||
import WgtTitle from '../../../../../widgets/title' |
import WgtTitle from '../../../../../widgets/title' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'infoWarning', |
name: 'infoWarning', |
||||
components: { |
components: { |
||||
WgtTitle |
WgtTitle |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
colorSelect:"org", |
colorSelect: "org", |
||||
colors:[ |
colors: [ |
||||
{label:'全部',value:"all"}, |
{ label: '全部', value: "all" }, |
||||
{label:'橙色',value:"org"}, |
{ label: '橙色', value: "org" }, |
||||
{label:'红色',value:"red"}, |
{ label: '红色', value: "red" }, |
||||
{label:'蓝色',value:"bule"}, |
{ label: '蓝色', value: "bule" }, |
||||
], |
], |
||||
warnings:[ |
warnings: [ |
||||
{ |
{ |
||||
type:"org", |
type: "org", |
||||
class:"道路结冰", |
class: "道路结冰", |
||||
lay:"橙色", |
lay: "橙色", |
||||
scope:"K100+000", |
scope: "K100+000", |
||||
dateTime:"2023-12-31 13:00:00", |
dateTime: "2023-12-31 13:00:00", |
||||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
||||
}, |
}, |
||||
{ |
{ |
||||
type:"org", |
type: "org", |
||||
class:"道路结冰", |
class: "道路结冰", |
||||
lay:"橙色", |
lay: "橙色", |
||||
scope:"K100+000", |
scope: "K100+000", |
||||
dateTime:"2023-12-31 13:00:00", |
dateTime: "2023-12-31 13:00:00", |
||||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
||||
}, |
}, |
||||
{ |
{ |
||||
type:"org", |
type: "org", |
||||
class:"道路结冰", |
class: "道路结冰", |
||||
lay:"橙色", |
lay: "橙色", |
||||
scope:"K100+000", |
scope: "K100+000", |
||||
dateTime:"2023-12-31 13:00:00", |
dateTime: "2023-12-31 13:00:00", |
||||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
||||
}, |
}, |
||||
{ |
{ |
||||
type:"org", |
type: "org", |
||||
class:"道路结冰", |
class: "道路结冰", |
||||
lay:"橙色", |
lay: "橙色", |
||||
scope:"K100+000", |
scope: "K100+000", |
||||
dateTime:"2023-12-31 13:00:00", |
dateTime: "2023-12-31 13:00:00", |
||||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
||||
} |
} |
||||
] |
] |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
created() { |
created() { |
||||
|
|
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
selectItem(index){ |
selectItem(index) { |
||||
this.selectIndex = index; |
this.selectIndex = index; |
||||
}, |
}, |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
|
|
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.$nextTick(() => { |
this.$nextTick(() => { |
||||
|
|
||||
|
}); |
||||
}); |
}); |
||||
}); |
|
||||
}, |
}, |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
|
.selectRoad { |
||||
.selectRoad{ |
width: 89px; |
||||
width:89px; |
margin-top: 5px; |
||||
margin-top:5px; |
margin-left: 20px; |
||||
margin-left:20px; |
border: 1px solid #00B3CC; |
||||
border:1px solid #00B3CC; |
|
||||
::v-deep{ |
::v-deep { |
||||
.el-input__inner{ |
.el-input__inner { |
||||
background-color: #064258 !important; |
background-color: #064258 !important; |
||||
border-width: 0px !important; |
border-width: 0px !important; |
||||
} |
} |
||||
} |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.congestion { |
.congestion { |
||||
display: inline-flex; |
display: inline-flex; |
||||
width: 100%; |
width: 100%; |
||||
height: 600px; |
height: 600px; |
||||
flex-direction: column; |
flex-direction: column; |
||||
width: 100%; |
width: 100%; |
||||
height:100%; |
height: 100%; |
||||
|
|
||||
.board{ |
|
||||
height: 690px; |
|
||||
width: 100%; |
|
||||
padding: 0px 0px; |
|
||||
border-radius: 5px 5px 5px 5px; |
|
||||
opacity: 1; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
margin-top:20px; |
|
||||
|
|
||||
.warningList { |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
width:100%; |
|
||||
height:calc(100% - 40px); |
|
||||
|
|
||||
>div::after { |
|
||||
content: ""; |
|
||||
top:0; |
|
||||
left:-3px; |
|
||||
position: absolute; |
|
||||
width:0; |
|
||||
height:0; |
|
||||
border-right:6px solid transparent; |
|
||||
border-left: 6px solid transparent; |
|
||||
border-bottom:6px solid rgba(55, 231, 255, 1); |
|
||||
transform: rotate(-45deg); |
|
||||
} |
|
||||
|
|
||||
>div::before { |
.board { |
||||
content: ""; |
height: 690px; |
||||
bottom:0; |
width: 100%; |
||||
right:-3px; |
padding: 0px 0px; |
||||
position: absolute; |
border-radius: 5px 5px 5px 5px; |
||||
width:0; |
opacity: 1; |
||||
height:0; |
display: flex; |
||||
border-right:6px solid transparent; |
justify-content: space-between; |
||||
border-left:6px solid transparent; |
align-items: center; |
||||
border-bottom:6px solid rgba(55, 231, 255, 1); |
flex-direction: column; |
||||
transform: rotate(135deg); |
margin-top: 20px; |
||||
} |
|
||||
|
|
||||
>div { |
.warningList { |
||||
position: relative; |
|
||||
display: inline-flex; |
display: inline-flex; |
||||
width:100%; |
flex-direction: column; |
||||
height:138px; |
width: 100%; |
||||
background: #133242; |
height: calc(100% - 40px); |
||||
border-radius: 2px 2px 2px 2px; |
|
||||
opacity: 1; |
>div::after { |
||||
border: 1px solid; |
content: ""; |
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1; |
top: 0; |
||||
margin-top:20px; |
left: -3px; |
||||
padding:23px 29px; |
position: absolute; |
||||
font-size: 14px; |
width: 0; |
||||
font-family: PingFang SC, PingFang SC; |
height: 0; |
||||
font-weight: 400; |
border-right: 6px solid transparent; |
||||
color: #37E7FF; |
border-left: 6px solid transparent; |
||||
|
border-bottom: 6px solid rgba(55, 231, 255, 1); |
||||
>.left-w { |
transform: rotate(-45deg); |
||||
|
} |
||||
|
|
||||
|
>div::before { |
||||
|
content: ""; |
||||
|
bottom: 0; |
||||
|
right: -3px; |
||||
|
position: absolute; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-right: 6px solid transparent; |
||||
|
border-left: 6px solid transparent; |
||||
|
border-bottom: 6px solid rgba(55, 231, 255, 1); |
||||
|
transform: rotate(135deg); |
||||
|
} |
||||
|
|
||||
|
>div { |
||||
|
position: relative; |
||||
display: inline-flex; |
display: inline-flex; |
||||
width:40%; |
width: 100%; |
||||
height:100%; |
height: 138px; |
||||
flex-direction: column; |
background: #133242; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1; |
||||
|
margin-top: 20px; |
||||
|
padding: 23px 29px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #37E7FF; |
||||
|
|
||||
.left-row { |
>.left-w { |
||||
margin:2px; |
|
||||
display: inline-flex; |
display: inline-flex; |
||||
width:100%; |
width: 40%; |
||||
height:30px; |
height: 100%; |
||||
flex-direction: row; |
flex-direction: column; |
||||
|
|
||||
>.value { |
.left-row { |
||||
color:#fff; |
margin: 2px; |
||||
} |
display: inline-flex; |
||||
|
width: 100%; |
||||
|
height: 30px; |
||||
|
flex-direction: row; |
||||
|
|
||||
|
>.value { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
.org { |
.org { |
||||
font-size: 12px !important; |
font-size: 14px !important; |
||||
|
margin-top: 2px; |
||||
font-family: PangMenZhengDao; |
font-family: PangMenZhengDao; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #F4A125 |
color: #F4A125 |
||||
} |
} |
||||
|
|
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
>.right-w { |
>.right-w { |
||||
margin-left:30px; |
margin-left: 30px; |
||||
display: inline-flex; |
display: inline-flex; |
||||
width:100%; |
width: 100%; |
||||
height:100%; |
height: 100%; |
||||
flex-direction: column; |
flex-direction: column; |
||||
|
|
||||
.right-row { |
.right-row { |
||||
margin-bottom: 10px; |
margin-bottom: 10px; |
||||
} |
} |
||||
|
|
||||
.right-text { |
.right-text { |
||||
color:#fff; |
color: #fff; |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.weaterMain { |
.weaterMain { |
||||
display: inline-flex; |
display: inline-flex; |
||||
flex-direction: row; |
flex-direction: row; |
||||
width:100%; |
width: 100%; |
||||
height: 40px; |
height: 40px; |
||||
|
|
||||
|
|
||||
.buttons { |
|
||||
width:100%; |
|
||||
height:38px; |
|
||||
margin-left:20px; |
|
||||
|
|
||||
>div { |
.buttons { |
||||
display: inline-flex; |
width: 100%; |
||||
width:10%; |
height: 38px; |
||||
height:35px; |
margin-left: 20px; |
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
font-size: 12px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 800; |
|
||||
color: #FFFFFF; |
|
||||
z-index: 9; |
|
||||
} |
|
||||
|
|
||||
>div::after { |
>div { |
||||
content: ""; |
display: inline-flex; |
||||
position: absolute; |
width: 10%; |
||||
display: inline-flex; |
height: 35px; |
||||
width: 55px; |
justify-content: center; |
||||
height: 36px; |
align-items: center; |
||||
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); |
font-size: 12px; |
||||
border-radius: 50%; |
font-family: PangMenZhengDao; |
||||
opacity: 1; |
font-weight: 800; |
||||
z-index:-1; |
color: #FFFFFF; |
||||
cursor: pointer; |
z-index: 9; |
||||
} |
} |
||||
|
|
||||
.redSel::after { |
>div::after { |
||||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
content: ""; |
||||
} |
position: absolute; |
||||
|
display: inline-flex; |
||||
|
width: 55px; |
||||
|
height: 36px; |
||||
|
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); |
||||
|
border-radius: 50%; |
||||
|
opacity: 1; |
||||
|
z-index: -1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
.yelSel::after { |
.redSel::after { |
||||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%); |
||||
} |
} |
||||
|
|
||||
.bluSel::after { |
.yelSel::after { |
||||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); |
||||
} |
} |
||||
|
|
||||
|
.bluSel::after { |
||||
|
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
||||
|
} |
||||
|
|
||||
.orgSel::after{ |
.orgSel::after { |
||||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.weaterTitle::after { |
.weaterTitle::after { |
||||
content: ""; |
content: ""; |
||||
position: absolute; |
position: absolute; |
||||
top:0px; |
top: 0px; |
||||
left:0px; |
left: 0px; |
||||
width:100%; |
width: 100%; |
||||
height:2px; |
height: 2px; |
||||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
||||
border-radius: 0px 0px 0px 0px; |
border-radius: 0px 0px 0px 0px; |
||||
opacity: 1; |
opacity: 1; |
||||
} |
} |
||||
.weaterTitle::before { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
top:38px; |
|
||||
left:0px; |
|
||||
width:100%; |
|
||||
height:2px; |
|
||||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|
||||
border-radius: 0px 0px 0px 0px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
.weaterTitle { |
.weaterTitle::before { |
||||
position: relative; |
content: ""; |
||||
display: inline-flex; |
position: absolute; |
||||
width: 287px; |
top: 38px; |
||||
height: 38px; |
left: 0px; |
||||
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); |
width: 100%; |
||||
border-radius: 0px 0px 0px 0px; |
height: 2px; |
||||
opacity: 1; |
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
||||
justify-content: center; |
border-radius: 0px 0px 0px 0px; |
||||
align-items: center; |
opacity: 1; |
||||
margin-left:30px; |
|
||||
; |
|
||||
>span.text { |
|
||||
display: inline-flex; |
|
||||
font-size: 16px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
} |
} |
||||
|
|
||||
|
.weaterTitle { |
||||
.num { |
position: relative; |
||||
display: inline-flex; |
display: inline-flex; |
||||
|
width: 287px; |
||||
|
height: 38px; |
||||
|
background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
opacity: 1; |
||||
justify-content: center; |
justify-content: center; |
||||
align-items: center; |
align-items: center; |
||||
font-size: 20px; |
margin-left: 30px; |
||||
font-family: PangMenZhengDao; |
; |
||||
font-weight: 400; |
|
||||
color: #D9001B; |
>span.text { |
||||
|
display: inline-flex; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.num { |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-family: PangMenZhengDao; |
||||
|
font-weight: 400; |
||||
|
color: #D9001B; |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
} |
} |
||||
} |
} |
||||
.charts { |
|
||||
height:180px; |
.charts { |
||||
width: 100%; |
height: 180px; |
||||
} |
width: 100%; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|
||||
@ -1,382 +1,366 @@ |
|||||
<template> |
<template> |
||||
<div class='congestion'> |
<div class='congestion'> |
||||
<WgtTitle :title="'能见度异常信息'"></WgtTitle> |
<WgtTitle :title="'能见度异常信息'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<div class="weaterMain" > |
<div class="weaterMain"> |
||||
<el-table |
<el-table :border="false" :data="tableData" height="670" style="width: 100%"> |
||||
:border="false" |
<el-table-column prop="nem" label="" width="30"> |
||||
:data="tableData" |
</el-table-column> |
||||
height="670" |
<el-table-column prop="address" label="桩号范围" width="230"> |
||||
style="width: 100%"> |
</el-table-column> |
||||
<el-table-column |
<el-table-column prop="name" label="能见度" class-name="showClass" width="250"> |
||||
prop="nem" |
<template slot-scope="scope"> |
||||
label="" |
<span class="showClass">{{ scope.row.name }}</span> |
||||
width="30"> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column |
<el-table-column prop="date" label="发生时间" width="230"> |
||||
prop="address" |
</el-table-column> |
||||
label="桩号范围" |
</el-table> |
||||
width="230"> |
</div> |
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="name" |
|
||||
label="能见度" |
|
||||
class-name="showClass" |
|
||||
width="250"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span class="showClass">{{scope.row.name}}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="date" |
|
||||
label="发生时间" |
|
||||
width="230" |
|
||||
> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "@screen/components/Card1/index.vue" |
import Card from "@screen/components/Card1/index.vue" |
||||
import WgtTitle from '../../../../../widgets/title' |
import WgtTitle from '../../../../../widgets/title' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'infoWarning', |
name: 'infoWarning', |
||||
components: { |
components: { |
||||
WgtTitle |
WgtTitle |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
tableData: [{ |
tableData: [{ |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
},{ |
}, { |
||||
date: '2023-12-31 13:00:00', |
date: '2023-12-31 13:00:00', |
||||
name: '2640.78m', |
name: '2640.78m', |
||||
address: 'K100+000-K110+000' |
address: 'K100+000-K110+000' |
||||
}, |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
created() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
selectItem(index){ |
|
||||
this.selectIndex = index; |
|
||||
}, |
}, |
||||
}, |
] |
||||
mounted() { |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
this.$nextTick(() => { |
|
||||
|
|
||||
}); |
|
||||
}); |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
|
|
||||
.showClass { |
|
||||
color:#00EBC1; |
|
||||
} |
} |
||||
|
}, |
||||
|
|
||||
::v-deep .el-table .cell { |
created() { |
||||
padding-left:0px !important; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table .el-table__header-wrapper th { |
|
||||
background-color: #064258 !important; |
|
||||
color:#00D1FF; |
|
||||
border-color: #064258 !important; |
|
||||
border:0px !important; |
|
||||
font-size:12px !important; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table { |
|
||||
border:0px !important; |
|
||||
background-color: transparent; |
|
||||
font-size:12px !important; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table__body-wrapper { |
|
||||
background-color: #064258; |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table tr:hover td { |
|
||||
background: #1b2528 !important; |
|
||||
color:#00D1FF; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table tr:nth-child(odd) td{ |
}, |
||||
background-color: #13272F ; |
methods: { |
||||
border:0px !important; |
selectItem(index) { |
||||
} |
this.selectIndex = index; |
||||
::v-deep .el-table tr:nth-child(even) td{ |
}, |
||||
border:0px !important; |
}, |
||||
} |
mounted() { |
||||
|
|
||||
::v-deep .el-table tr { |
setTimeout(() => { |
||||
background-color: #133242 !important; |
this.$nextTick(() => { |
||||
border-collapse:0; |
|
||||
border:0px !important; |
|
||||
background-color: transparent !important; |
|
||||
} |
|
||||
|
|
||||
.congestion { |
}); |
||||
display: inline-flex; |
}); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.showClass { |
||||
|
color: #00EBC1; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table .cell { |
||||
|
padding-left: 0px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table .el-table__header-wrapper th { |
||||
|
background-color: #064258 !important; |
||||
|
color: #00D1FF; |
||||
|
border-color: #064258 !important; |
||||
|
border: 0px !important; |
||||
|
font-size: 12px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table { |
||||
|
border: 0px !important; |
||||
|
background-color: transparent; |
||||
|
font-size: 14px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table__body-wrapper { |
||||
|
background-color: #064258; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table tr:hover td { |
||||
|
background: #1b2528 !important; |
||||
|
color: #00D1FF; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table tr:nth-child(odd) td { |
||||
|
background-color: #13272F; |
||||
|
border: 0px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table tr:nth-child(even) td { |
||||
|
border: 0px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-table tr { |
||||
|
background-color: #133242 !important; |
||||
|
border-collapse: 0; |
||||
|
border: 0px !important; |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
.congestion { |
||||
|
display: inline-flex; |
||||
|
width: 100%; |
||||
|
height: 600px; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.board { |
||||
|
height: 670px; |
||||
width: 100%; |
width: 100%; |
||||
height: 600px; |
padding: 0px 0px; |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
flex-direction: column; |
flex-direction: column; |
||||
|
margin-top: 20px; |
||||
|
|
||||
.board{ |
|
||||
height: 670px; |
|
||||
width: 100%; |
|
||||
padding: 0px 0px; |
|
||||
border-radius: 5px 5px 5px 5px; |
|
||||
opacity: 1; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
margin-top:20px; |
|
||||
|
|
||||
|
|
||||
|
|
||||
.warningList { |
.warningList { |
||||
display: inline-flex; |
display: inline-flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
width:100%; |
width: 100%; |
||||
height:calc(100% - 40px); |
height: calc(100% - 40px); |
||||
|
|
||||
>div { |
>div { |
||||
|
display: inline-flex; |
||||
|
width: 100%; |
||||
|
height: 138px; |
||||
|
background: #133242; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; |
||||
|
overflow: hidden; |
||||
|
margin-top: 20px; |
||||
|
padding: 23px 29px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #37E7FF; |
||||
|
|
||||
|
>.left-w { |
||||
|
display: inline-flex; |
||||
|
width: 40%; |
||||
|
height: 100%; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.left-row { |
||||
|
margin: 2px; |
||||
display: inline-flex; |
display: inline-flex; |
||||
width:100%; |
width: 100%; |
||||
height:138px; |
height: 30px; |
||||
background: #133242; |
flex-direction: row; |
||||
border-radius: 2px 2px 2px 2px; |
|
||||
opacity: 1; |
>.value { |
||||
border: 1px solid; |
color: #fff; |
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; |
|
||||
overflow: hidden; |
|
||||
margin-top:20px; |
|
||||
padding:23px 29px; |
|
||||
font-size: 14px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #37E7FF; |
|
||||
|
|
||||
>.left-w { |
|
||||
display: inline-flex; |
|
||||
width:40%; |
|
||||
height:100%; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
.left-row { |
|
||||
margin:2px; |
|
||||
display: inline-flex; |
|
||||
width:100%; |
|
||||
height:30px; |
|
||||
flex-direction: row; |
|
||||
|
|
||||
>.value { |
|
||||
color:#fff; |
|
||||
} |
|
||||
|
|
||||
.org { |
|
||||
font-size: 14px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #F4A125 |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
>.right-w { |
.org { |
||||
margin-left:30px; |
font-size: 14px; |
||||
display: inline-flex; |
font-family: PangMenZhengDao; |
||||
width:100%; |
font-weight: 400; |
||||
height:100%; |
color: #F4A125 |
||||
flex-direction: column; |
|
||||
|
|
||||
.right-row { |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.right-text { |
|
||||
color:#fff; |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.weaterMain { |
>.right-w { |
||||
display: inline-flex; |
margin-left: 30px; |
||||
flex-direction: row; |
display: inline-flex; |
||||
width:100%; |
width: 100%; |
||||
height: 40px; |
height: 100%; |
||||
|
flex-direction: column; |
||||
|
|
||||
.buttons { |
|
||||
width:100%; |
|
||||
height:38px; |
|
||||
>div { |
|
||||
display: inline-flex; |
|
||||
width:10%; |
|
||||
height:35px; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
font-size: 12px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 800; |
|
||||
color: #FFFFFF; |
|
||||
z-index: 9; |
|
||||
} |
|
||||
|
|
||||
>div::after { |
.right-row { |
||||
content: ""; |
margin-bottom: 10px; |
||||
position: absolute; |
} |
||||
display: inline-flex; |
|
||||
width: 55px; |
|
||||
height: 36px; |
|
||||
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); |
|
||||
border-radius: 50%; |
|
||||
opacity: 1; |
|
||||
z-index:-1; |
|
||||
} |
|
||||
|
|
||||
.redSel::after { |
.right-text { |
||||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
color: #fff; |
||||
} |
} |
||||
|
} |
||||
|
|
||||
.yelSel::after { |
} |
||||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
} |
||||
} |
|
||||
|
|
||||
.bluSel::after { |
.weaterMain { |
||||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
display: inline-flex; |
||||
} |
flex-direction: row; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
|
||||
.orgSel::after{ |
|
||||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
.buttons { |
||||
} |
width: 100%; |
||||
|
height: 38px; |
||||
|
|
||||
|
>div { |
||||
|
display: inline-flex; |
||||
|
width: 10%; |
||||
|
height: 35px; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 12px; |
||||
|
font-family: PangMenZhengDao; |
||||
|
font-weight: 800; |
||||
|
color: #FFFFFF; |
||||
|
z-index: 9; |
||||
} |
} |
||||
|
|
||||
.weaterTitle::after { |
>div::after { |
||||
content: ""; |
content: ""; |
||||
position: absolute; |
position: absolute; |
||||
top:0px; |
display: inline-flex; |
||||
left:0px; |
width: 55px; |
||||
width:100%; |
height: 36px; |
||||
height:2px; |
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); |
||||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
border-radius: 50%; |
||||
border-radius: 0px 0px 0px 0px; |
opacity: 1; |
||||
opacity: 1; |
z-index: -1; |
||||
} |
} |
||||
.weaterTitle::before { |
|
||||
content: ""; |
.redSel::after { |
||||
position: absolute; |
background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%); |
||||
top:38px; |
|
||||
left:0px; |
|
||||
width:100%; |
|
||||
height:2px; |
|
||||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|
||||
border-radius: 0px 0px 0px 0px; |
|
||||
opacity: 1; |
|
||||
} |
} |
||||
|
|
||||
.weaterTitle { |
.yelSel::after { |
||||
position: relative; |
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); |
||||
display: inline-flex; |
} |
||||
width: 277px; |
|
||||
height: 38px; |
|
||||
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); |
|
||||
border-radius: 0px 0px 0px 0px; |
|
||||
opacity: 1; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
>span.text { |
|
||||
display: inline-flex; |
|
||||
font-size: 16px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
|
.bluSel::after { |
||||
.num { |
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
||||
display: inline-flex; |
} |
||||
justify-content: center; |
|
||||
align-items: center; |
.orgSel::after { |
||||
font-size: 22px; |
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); |
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #D9001B; |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
|
|
||||
} |
.weaterTitle::after { |
||||
} |
content: ""; |
||||
.charts { |
position: absolute; |
||||
height:180px; |
top: 0px; |
||||
|
left: 0px; |
||||
width: 100%; |
width: 100%; |
||||
|
height: 2px; |
||||
|
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
opacity: 1; |
||||
} |
} |
||||
|
|
||||
</style> |
.weaterTitle::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 38px; |
||||
|
left: 0px; |
||||
|
width: 100%; |
||||
|
height: 2px; |
||||
|
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.weaterTitle { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
width: 277px; |
||||
|
height: 38px; |
||||
|
background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
opacity: 1; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
>span.text { |
||||
|
display: inline-flex; |
||||
|
font-size: 16px; |
||||
|
font-family: PangMenZhengDao; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.num { |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 22px; |
||||
|
font-family: PangMenZhengDao; |
||||
|
font-weight: 400; |
||||
|
color: #D9001B; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.charts { |
||||
|
height: 180px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue