yyl
1 year ago
20 changed files with 1453 additions and 54 deletions
@ -0,0 +1,148 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
itemStyle:{ |
|||
color:"#FFD15C", |
|||
}, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#fff', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"00:00", |
|||
"01:00", |
|||
"02:00", |
|||
"03:00", |
|||
"04:00", |
|||
"05:00", |
|||
"06:00", |
|||
"07:00", |
|||
"08:00", |
|||
"09:00", |
|||
"10:00", |
|||
"11:00", |
|||
"12:00", |
|||
"13:00", |
|||
"14:00", |
|||
"15:00", |
|||
"16:00", |
|||
"17:00", |
|||
"18:00", |
|||
"19:00", |
|||
"20:00", |
|||
"21:00", |
|||
"22:00", |
|||
"23:00", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:40, |
|||
minInterval: 1, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#FFD15C" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#FFD15C99' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#FFD15C01' // 100% 处的颜色
|
|||
} |
|||
] |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="require('../../../../../widgets/title/assets/title_w2.png')"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="temperatureTrend"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'temperatureTrend', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('temperatureTrend')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board{ |
|||
height:260px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 0.8; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:200px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,154 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,.6)", |
|||
borderColor: "rgba(147, 235, 248, .8)", |
|||
textStyle: { |
|||
color: "#FFF", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#C9D2FA', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"00:00", |
|||
"01:00", |
|||
"02:00", |
|||
"03:00", |
|||
"04:00", |
|||
"05:00", |
|||
"06:00", |
|||
"07:00", |
|||
"08:00", |
|||
"09:00", |
|||
"10:00", |
|||
"11:00", |
|||
"12:00", |
|||
"13:00", |
|||
"14:00", |
|||
"15:00", |
|||
"16:00", |
|||
"17:00", |
|||
"18:00", |
|||
"19:00", |
|||
"20:00", |
|||
"21:00", |
|||
"22:00", |
|||
"23:00", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:40, |
|||
minInterval: 5, |
|||
splitNumber:5, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#0783FA" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#0783FA99' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#0783FA01' // 100% 处的颜色
|
|||
} |
|||
] |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="require('../../../../../widgets/title/assets/title_w1.png')"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="VisibilityTrends"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'VisibilityTrends', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
|
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('VisibilityTrends')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board{ |
|||
height:260px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 0.8; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:200px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,370 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="require('../../../../../widgets/title/assets/title_w02.png')"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain" > |
|||
<div class="weaterTitle" > |
|||
<span class="text">当前气象预警信息数：</span> |
|||
<span class="num" >113</span> |
|||
</div> |
|||
<div class="buttons" > |
|||
<div class="allSel" >全部</div> |
|||
<div class="redSel" >红色</div> |
|||
<div class="yelSel" >黄色</div> |
|||
<div class="bluSel" >蓝色</div> |
|||
<div class="orgSel" >橙色</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 class="value" > |
|||
{{ item.class }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row" > |
|||
<div class="label" > |
|||
预警等级： |
|||
</div> |
|||
<div :class="'value '+item.type" > |
|||
{{ item.lay }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row" > |
|||
<div class="label" > |
|||
预警范围： |
|||
</div> |
|||
<div class="value" > |
|||
{{ item.scope }} |
|||
</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> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card1/index.vue" |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'infoWarning', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
warnings:[ |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 600px; |
|||
flex-direction: column; |
|||
width: 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 { |
|||
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; |
|||
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, 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-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: 12px !important; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
>.right-w { |
|||
margin-left:30px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width:100%; |
|||
height: 40px; |
|||
|
|||
|
|||
.buttons { |
|||
width:100%; |
|||
height:38px; |
|||
margin-left:20px; |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
width:10%; |
|||
height:35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
|
|||
>div::after { |
|||
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; |
|||
} |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|||
} |
|||
|
|||
.yelSel::after { |
|||
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{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|||
} |
|||
} |
|||
|
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top:0px; |
|||
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::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: 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; |
|||
align-items: center; |
|||
margin-left:30px; |
|||
; |
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,382 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="require('../../../../../widgets/title/assets/title_w02.png')"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain" > |
|||
<el-table |
|||
:border="false" |
|||
:data="tableData" |
|||
height="670" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="nem" |
|||
label="" |
|||
width="30"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
label="桩号范围" |
|||
width="230"> |
|||
</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> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card1/index.vue" |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'infoWarning', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
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 { |
|||
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 ; |
|||
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%; |
|||
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 { |
|||
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; |
|||
width:100%; |
|||
height:30px; |
|||
flex-direction: row; |
|||
|
|||
>.value { |
|||
color:#fff; |
|||
} |
|||
|
|||
.org { |
|||
font-size: 14px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
>.right-w { |
|||
margin-left:30px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width:100%; |
|||
height: 40px; |
|||
|
|||
|
|||
.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, PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
|
|||
>div::after { |
|||
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; |
|||
} |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|||
} |
|||
|
|||
.yelSel::after { |
|||
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{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|||
} |
|||
} |
|||
|
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top:0px; |
|||
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::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, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<div class="board"> |
|||
<InfoWarning class="contion-l" /> |
|||
<InfoWarningList class="contion-r" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import InfoWarning from './components/infoWarning/index.vue'; |
|||
import InfoWarningList from './components/infowWarningList'; |
|||
|
|||
export default { |
|||
name: 'WeatherWarning', |
|||
components: { |
|||
InfoWarning, |
|||
InfoWarningList |
|||
}, |
|||
data() { |
|||
return { |
|||
selectIndex:0, |
|||
data: Array.from({ length: 10 }).map(() => ({ |
|||
source: "济菏运管中心", |
|||
location: "长清大学城收费站", |
|||
direction: "117.123456", |
|||
direction2: "37.12234", |
|||
})), |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
height:100%; |
|||
|
|||
.board{ |
|||
height: calc(100% - 235px); |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
flex-direction: row; |
|||
|
|||
.contion-l { |
|||
display: inline-flex; |
|||
width:60%; |
|||
|
|||
} |
|||
|
|||
.contion-r { |
|||
display: inline-flex; |
|||
width:40%; |
|||
margin-left:20px; |
|||
} |
|||
|
|||
.queryCharts { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height: 316px; |
|||
|
|||
.charts-l { |
|||
width:30%; |
|||
} |
|||
|
|||
.charts-ms { |
|||
width:40%; |
|||
margin-left:20px; |
|||
} |
|||
} |
|||
|
|||
.queryList { |
|||
position: relative; |
|||
top:-10px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:440px; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
|
|||
> div { |
|||
width:calc(100%/5 - 22px); |
|||
height:203px; |
|||
margin-top:10px; |
|||
margin-left:20px; |
|||
} |
|||
|
|||
> div:nth-child(5n + 1) { |
|||
margin-left:0px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 86 KiB |
Loading…
Reference in new issue