mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

天气对接

wangqin
zhangzhang 12 months ago
parent
72e9a9118c
commit
8b8fae0784
7 changed files with 2384 additions and 1938 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      ruoyi-ui/src/api/perception/meteorologyCheck.js
  2. 325
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
  3. 1310
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue
  4. 533
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
  5. 751
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
  6. 287
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue
  7. 1100
      ruoyi-ui/src/views/event/event/dispatch.vue

32
ruoyi-ui/src/api/perception/meteorologyCheck.js
View File

@ -0,0 +1,32 @@
import request from "@/utils/request";
// 查询天气状况
export function getWeatherFacts() {
return request({
url: "/weatherForecast/weatherFacts",
method: "post",
});
}
// 按小时查询天气状况
export function getHourlyWeather() {
return request({
url: "/weatherForecast/hourlyWeather",
method: "post",
});
}
// 查询气象预警
export function getMeteorologicalEarlyWarning() {
return request({
url: "/weatherForecast/meteorologicalEarlyWarning",
method: "post",
});
}
// 查询气象预警数量
export function getQueryTheNumberOfMeteorologicalWarning() {
return request({
url: "/weatherForecast/queryTheNumberOfMeteorologicalWarning",
method: "post",
});
}

325
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
View File

@ -1,177 +1,186 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'路网交通状况'"></WgtTitle> <WgtTitle :title="'路网交通状况'"></WgtTitle>
<div class="board"> <div class="board">
<div class="showRoad" > <div class="showRoad">
<div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" > <div
<div class="text" >{{ it.text }}</div> :class="it.type ? it.type + ' item' : 'item'"
<div v-if="it.type == null || it.type == 'red'" class="num" > v-for="(it, index) in dataList"
<span>{{ it.value }}</span> >
<span class="typeClass" >{{ it.class }}</span> <div class="text">{{ it.text }}</div>
</div> <div v-if="it.type == null || it.type == 'red'" class="num">
<div v-if="it.type == 'array' || it.type == 'arrayRed'" class="num" > <span>{{ it.value }}</span>
<span>{{ it.value[0] }}</span> <span class="typeClass">{{ it.class }}</span>
<span class="typeClass" >{{ it.class[0] }}</span> </div>
<span class="midd" style="color:#fff;font-weight: 800; margin-right:2px;">/</span> <div v-if="it.type == 'array' || it.type == 'arrayRed'" class="num">
<span>{{ it.value[1] }}</span> <span>{{ it.value[0] }}</span>
<span class="typeClass" >{{ it.class[1] }}</span> <span class="typeClass">{{ it.class[0] }}</span>
</div> <span
</div> class="midd"
style="color: #fff; font-weight: 800; margin-right: 2px"
>/</span
>
<span>{{ it.value[1] }}</span>
<span class="typeClass">{{ it.class[1] }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</template>
<script>
<script>
import WgtTitle from '../../../widgets/title' import WgtTitle from "../../../widgets/title";
import { getQueryTheNumberOfMeteorologicalWarning } from "@/api/perception/meteorologyCheck";
export default {
name: 'MonthStatistics', export default {
components: { name: "MonthStatistics",
WgtTitle components: {
}, WgtTitle,
data() { },
return { data() {
dataList:[ return {
{ dataList: [
text:"气象正常路段里程", {
value:"189", text: "气象正常路段里程",
class:"km" value: "189",
}, class: "km",
{ },
text:"降水路段里程", {
value:"0", text: "降水路段里程",
class:"km" value: "0",
}, class: "km",
{ },
text:"团雾路段里程", {
type:"array", text: "团雾路段里程",
value:["0",'0'], type: "array",
class:['处',"km"] value: ["0", "0"],
}, class: ["处", "km"],
{ },
text:"气象预警信息", {
type:"red", text: "气象预警信息",
value:"0", type: "red",
class:"" value: "0",
}, class: "",
{ },
text:"能见度检测器", {
type:"arrayRed", text: "能见度检测器",
value:["0",'5'], type: "arrayRed",
class:['',""] value: ["0", "5"],
} class: ["", ""],
] },
} ],
}, };
},
created() {
created() {},
}, methods: {
methods: { getWeatherNum() {
getQueryTheNumberOfMeteorologicalWarning().then((res) => {
}, this.dataList[3].value = res.data;
mounted() { console.log("res", res);
setTimeout(() => {
this.$nextTick(() => {
});
}); });
}, },
} },
</script> mounted() {
this.getWeatherNum();
<style lang='scss' scoped> //
.congestion { },
};
</script>
<style lang="scss" scoped>
.congestion {
width: 100%;
.board {
height: 150px;
width: 100%; width: 100%;
.board{ padding: 0px 20px;
height:150px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
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;
flex-direction: row;
.showRoad {
display: inline-flex;
width: 100%; width: 100%;
padding: 0px 20px; height: 100%;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); padding-top: 40px;
border-radius: 5px 5px 5px 5px;
opacity: 1; .item.red {
border: 1px solid; .num {
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; font-size: 20px;
display: flex; font-family: PangMenZhengDao;
justify-content: space-between; font-weight: 400;
align-items: center; color: #d9001b;
flex-direction: row; position: relative;
left: 30px;
.showRoad {
display: inline-flex;
width:100%;
height:100%;
padding-top:40px;
.item.red {
.num {
font-size: 20px;
font-family: PangMenZhengDao;
font-weight: 400;
color: #D9001B;
position: relative;
left:30px;
}
} }
}
.item.arrayRed { .item.arrayRed {
.num span:first-child { .num span:first-child {
color: #D9001B; color: #d9001b;
margin:0px; margin: 0px;
margin-left:20px; margin-left: 20px;
} }
.midd {
color:#00D1FF !important;
}
.typeClass { .midd {
margin:0px; color: #00d1ff !important;
}
} }
.item { .typeClass {
display: inline-flex; margin: 0px;
width:20%; }
height:90px; }
flex-direction: column;
.text { .item {
margin-bottom: 15px; display: inline-flex;
font-size: 14px; width: 20%;
font-family: PingFang SC, PingFang SC; height: 90px;
font-weight: 500; flex-direction: column;
color: #FFFFFF;
} .text {
margin-bottom: 15px;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
}
.num { .num {
margin-left:8px; margin-left: 8px;
font-size: 20px; font-size: 20px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #00D1FF; color: #00d1ff;
position: relative; position: relative;
} }
.typeClass { .typeClass {
margin-left:8px; margin-left: 8px;
margin-right:8px; margin-right: 8px;
font-size: 12px; font-size: 12px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #aaa; color: #aaa;
}
} }
} }
} }
} }
.charts { }
height:180px; .charts {
width: 100%; height: 180px;
} width: 100%;
}
</style> </style>

1310
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue
View File

File diff suppressed because it is too large

533
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
View File

@ -1,296 +1,297 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'天气预报'"></WgtTitle> <WgtTitle :title="'天气预报'"></WgtTitle>
<div class="board"> <div class="board">
<div class="showRoad" > <div class="showRoad">
<div class="weaterIcon" > <div class="weaterIcon">
<img src="./assets/weather.png" /> <img src="./assets/weather.png" />
<div > <div>
{{ weaterType }} {{ weaterType }}
</div> </div>
</div> </div>
<div class="weaterNum" > <div class="weaterNum">
<div class="num">{{ weaterNum }}° </div> <div class="num">{{ weaterNum }}°</div>
<div class="maxMin" > <div class="maxMin">
{{ weaterMaxMin }} {{ weaterMaxMin }}
</div> </div>
</div> </div>
<div class="windType" > <div class="windType">
<div class="Warnings" >{{ windWarnings }} </div> <div class="Warnings">{{ windWarnings }}</div>
<div class="windTypeStr" > <div class="windTypeStr">
{{ windType }} {{ windType }}
</div> </div>
</div> </div>
<div class="line" ></div> <div class="line"></div>
<div class="cityType" > <div class="cityType">
<img src="./assets/cityPosition.png" /> <img src="./assets/cityPosition.png" />
<div class="cityText" > <div class="cityText">
{{ city }} {{ city }}
</div>
</div>
<div class="temperature">
<div class="temperItem" v-for="(it, index) in temperatures">
<div class="text">
<img src="./assets/polygon.png" /><span>{{ it.text }}</span>
</div> </div>
</div> <div class="val">
<div class="temperature" > {{ it.value }}
<div class="temperItem" v-for="(it,index) in temperatures" > </div>
<div class="text" > </div>
<img src="./assets/polygon.png" /><span>{{ it.text }}</span>
</div>
<div class="val">
{{ it.value }}
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</template>
<script>
<script>
import WgtTitle from '../../../widgets/title' import WgtTitle from "../../../widgets/title";
export default { export default {
name: 'MonthStatistics', name: "MonthStatistics",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
weaterNum:"21", weaterNum: "21",
weaterMaxMin:"12 / 23°", weaterMaxMin: "12 / 23°",
weaterType:"睛转小雨", weaterType: "睛转小雨",
windWarnings:"大风预警", windWarnings: "大风预警",
windType:"东北风三级", windType: "东北风三级",
city:"济南", city: "济南",
temperatures:[ temperatures: [
{ {
text:"体感", text: "体感",
value:"-14℃", value: "-14℃",
}, },
{ {
text:"PM2.5", text: "PM2.5",
value:"90", value: "90",
}, },
{ {
text:"湿度", text: "湿度",
value:"94%", value: "94%",
}, },
{ {
text:"紫外线", text: "紫外线",
value:"3", value: "3",
} },
] ],
} };
}, },
created() { created() {},
methods: {},
}, mounted() {
methods: { setTimeout(() => {
this.$nextTick(() => {});
}, });
mounted() { },
setTimeout(() => { };
this.$nextTick(() => { </script>
}); <style lang="scss" scoped>
}); .congestion {
}, width: 100%;
} .board {
</script> height: 150px;
<style lang='scss' scoped>
.congestion {
width: 100%; width: 100%;
.board{ padding: 0px 20px;
height:150px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
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;
flex-direction: row;
.showRoad {
display: inline-flex;
width: 100%; width: 100%;
padding: 0px 20px; height: 100%;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); padding-top: 40px;
border-radius: 5px 5px 5px 5px; padding-left: 58px;
opacity:1;
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;
flex-direction: row;
.showRoad { > div {
display: inline-flex; display: inline-flex;
width:100%; flex-direction: column;
height:100%; }
padding-top:40px;
padding-left:58px;
> div {
display: inline-flex;
flex-direction: column;
.weaterIcon {
display: inline-flex;
width: 60px;
height: 80px;
justify-content: center;
align-items: center;
margin-right: 27px;
> img {
display: inline-flex;
width: 43px;
height: 43px;
} }
.weaterIcon { > div {
display: inline-flex; font-size: 12px;
width:60px; font-family: PingFang SC, PingFang SC;
height:80px; font-weight: 500;
justify-content: center; color: #ffffff;
align-items: center; margin-top: 10px;
margin-right:27px;
>img {
display: inline-flex;
width:43px;
height:43px;
}
>div {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top:10px;
}
} }
}
.weaterNum {
.weaterNum { display: inline-flex;
display: inline-flex; width: 60px;
width:60px; height: 80px;
height:80px; justify-content: center;
justify-content: center; align-items: center;
align-items: center; margin-right: 27px;
margin-right:27px;
.num {
.num { font-size: 34px;
font-size: 34px; font-family: PingFang SC, PingFang SC;
font-family: PingFang SC, PingFang SC; font-weight: 500;
font-weight: 500; color: #ffffff;
color: #FFFFFF;
}
.maxMin {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top:6px;
}
} }
.windType{ .maxMin {
display: inline-flex; font-size: 12px;
width:60px; font-family: PingFang SC, PingFang SC;
height:80px; font-weight: 500;
justify-content: center; color: #ffffff;
align-items: center; margin-top: 6px;
margin-right:27px;
.Warnings {
display: inline-flex;
justify-content: center;
align-items: center;
margin-top:23px;
width: 67px;
height: 18px;
background: rgba(245,80,80,0.4);
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid #F55050;
font-size: 12px;
font-family: Source Han Sans SC, Source Han Sans SC;
font-weight: 400;
color: #F55050;
}
.windTypeStr {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top:13px;
}
} }
}
.line { .windType {
margin-left:37px; display: inline-flex;
margin-right:45px; width: 60px;
width: 1px; height: 80px;
height: 86px; justify-content: center;
opacity: 1; align-items: center;
border: 1px solid; margin-right: 27px;
border-image: linear-gradient(320deg, rgba(6, 92, 120, 1), rgba(6, 92, 120, 0)) 1 1;
.Warnings {
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: 23px;
width: 67px;
height: 18px;
background: rgba(245, 80, 80, 0.4);
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid #f55050;
font-size: 12px;
font-family: Source Han Sans SC, Source Han Sans SC;
font-weight: 400;
color: #f55050;
} }
.cityType { .windTypeStr {
display: inline-flex; font-size: 12px;
width:60px; font-family: PingFang SC, PingFang SC;
height:80px; font-weight: 500;
justify-content: center; color: #ffffff;
align-items: center; margin-top: 13px;
margin-right:27px; }
}
img {
width:38px;
height:40px;
} .line {
margin-left: 37px;
margin-right: 45px;
width: 1px;
height: 86px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(
320deg,
rgba(6, 92, 120, 1),
rgba(6, 92, 120, 0)
)
1 1;
}
.cityText { .cityType {
font-size: 12px; display: inline-flex;
font-family: PingFang SC, PingFang SC; width: 60px;
font-weight: 500; height: 80px;
color: #FFFFFF; justify-content: center;
margin-top: 10px;; align-items: center;
} margin-right: 27px;
img {
width: 38px;
height: 40px;
} }
.temperature { .cityText {
display: inline-flex; font-size: 12px;
flex-direction: row; font-family: PingFang SC, PingFang SC;
width: 349px; font-weight: 500;
height: 66px; color: #ffffff;
background: transparent; margin-top: 10px;
opacity: 1; }
border: 1px solid; }
border-image: linear-gradient(180deg, rgba(1, 37, 48, 0), rgba(1, 149, 196, 1)) 1 1;
border-radius: 8px;
>div {
display: inline-flex;
flex-direction: column;
width:25%;
height:100%;
justify-content: center;
align-items: center;
> .text { .temperature {
font-size: 14px; display: inline-flex;
font-family: PingFang SC, PingFang SC; flex-direction: row;
font-weight: 500; width: 349px;
> span { height: 66px;
opacity: 0.5; background: transparent;
margin-left:10px; opacity: 1;
} border: 1px solid;
} border-image: linear-gradient(
180deg,
rgba(1, 37, 48, 0),
rgba(1, 149, 196, 1)
)
1 1;
border-radius: 8px;
.val { > div {
margin-top:10px; display: inline-flex;
font-size: 14px; flex-direction: column;
font-family: PingFang SC, PingFang SC; width: 25%;
font-weight: 500; height: 100%;
color: #FFFFFF; justify-content: center;
position: relative; align-items: center;
left:10px;
} > .text {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
> span {
opacity: 0.5;
margin-left: 10px;
} }
}
.val {
margin-top: 10px;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
position: relative;
left: 10px;
}
} }
} }
} }
} }
.charts { }
height:180px; .charts {
width: 100%; height: 180px;
} width: 100%;
}
</style> </style>

751
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
View File

@ -1,393 +1,464 @@
<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">{{ warningData.length }}</span>
</div> </div>
<div> <div>
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> <el-select
<el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> v-model="colorSelect"
</el-option> size="mini"
</el-select> class="selectRoad"
</div> placeholder="请选择"
>
<el-option
v-for="item in colors"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="warningList" v-if="warningList.length > 0">
<div class="itemWarning" v-for="item in warningList">
<div class="left-w">
<div class="left-row">
<div class="label">预警类型：</div>
<div class="value">
{{ item.typeName }}
</div>
</div>
<div class="left-row">
<div class="label">预警等级：</div>
<div :class="item.severityColor">
{{ item.severityColor }}
{{
item.severity == "Cancel"
? "取消"
: item.severity == "None"
? "无"
: item.severity == "Unknown"
? "未知"
: item.severity == "Standard"
? "标准"
: item.severity == "Minor"
? "次要"
: item.severity == "Moderate"
? "温和"
: item.severity == "Major"
? "主要"
: item.severity == "Severe"
? "严峻"
: item.severity == "Extreme"
? "极端"
: ""
}}
</div>
</div> </div>
<div class="warningList"> <!-- <div class="left-row">
<div class="itemWarning" v-for="(item, i) in warnings"> <div class="label">预警范围：</div>
<div class="left-w"> <div class="value">
<div class="left-row"> {{ item.scope }}
<div class="label"> </div>
预警类型： </div> -->
</div> <div class="left-row">
<div class="value"> <div class="label">预警发布时间：</div>
{{ item.class }} <div class="value">
</div> {{ item.pubTime }}
</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>
<div class="right-w">
<div class="right-row">预警内容:</div>
<div class="right-text">
{{ item.text }}
</div>
</div>
</div> </div>
</div>
<Empty v-else text="暂无数据..."></Empty>
</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";
import { getMeteorologicalEarlyWarning } from "@/api/perception/meteorologyCheck";
export default { export default {
name: 'infoWarning', name: "infoWarning",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
colorSelect: "org", warningList: [],
colors: [ warningData: [
{ label: '全部', value: "all" }, // { typeName: "warning", severityColor: "Red", severity: "Severe" },
{ label: '橙色', value: "org" }, // { typeName: "warning", severityColor: "White", severity: "白色" },
{ label: '红色', value: "red" }, // { typeName: "warning", severityColor: "Blue", severity: "蓝色" },
{ label: '蓝色', value: "bule" }, ],
], colorSelect: "all",
warnings: [ colors: [
{ { label: "全部", value: "all" },
type: "org", { label: "白色", value: "White" },
class: "道路结冰", { label: "蓝色", value: "Blue" },
lay: "橙色", { label: "绿色", value: "Green" },
scope: "K100+000", { label: "黄色", value: "Yellow" },
dateTime: "2023-12-31 13:00:00", { label: "橙色", value: "Orange" },
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" { label: "红色", value: "Red" },
}, { label: "黑色", value: "Black" },
{ ],
type: "org", };
class: "道路结冰", },
lay: "橙色", watch: {
scope: "K100+000", colorSelect(val) {
dateTime: "2023-12-31 13:00:00", if (val !== "all") {
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" const data = this.warningData.filter(
}, (item) => item.severityColor === val
{ );
type: "org", this.warningList = data;
class: "道路结冰", this.warningList = data;
lay: "橙色", } else {
scope: "K100+000", this.warningList = this.warningData;
dateTime: "2023-12-31 13:00:00", }
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
}, // this.changeValue(val);
{
type: "org",
class: "道路结冰",
lay: "橙色",
scope: "K100+000",
dateTime: "2023-12-31 13:00:00",
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
}
]
}
},
created() {
}, },
methods: { },
selectItem(index) { created() {},
this.selectIndex = index; methods: {
}, getWarningData() {
}, getMeteorologicalEarlyWarning().then((res) => {
mounted() { console.log("气象预警", res.data);
let data = [];
setTimeout(() => { for (let key in res.data) {
this.$nextTick(() => { if (res.data[key].length > 0) {
res.data[key].forEach((value) => {
data.push(value);
}); });
}); }
}
this.warningData = data;
this.warningList = this.warningData;
});
}, },
} },
mounted() {
this.getWarningData();
},
};
</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%;
height: 600px;
flex-direction: column;
width: 100%;
height: 100%;
.board {
height: 690px;
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;
width: 100%; margin-top: 20px;
height: 100%;
.warningList {
.board { display: inline-flex;
height: 690px; 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%; width: 100%;
padding: 0px 0px; height: 138px;
border-radius: 5px 5px 5px 5px; background: #133242;
border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
display: flex; border: 1px solid;
justify-content: space-between; border-image: linear-gradient(
align-items: center; 360deg,
flex-direction: column; rgba(55, 231, 255, 0.2),
rgba(55, 231, 255, 0)
)
1 1;
margin-top: 20px; margin-top: 20px;
padding: 23px 29px;
.warningList { 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;
flex-direction: column;
width: 100%; width: 100%;
height: calc(100% - 40px); height: 30px;
flex-direction: row;
>div::after { > .value {
content: ""; color: #fff;
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 { .org {
content: ""; font-size: 14px !important;
bottom: 0; margin-top: 2px;
right: -3px; font-family: PangMenZhengDao;
position: absolute; font-weight: 400;
width: 0; color: #f4a125;
height: 0;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-bottom: 6px solid rgba(55, 231, 255, 1);
transform: rotate(135deg);
} }
.White {
>div { color: #fff;
position: relative; }
display: inline-flex; .Blue {
width: 100%; color: blue;
height: 138px; }
background: #133242; .Green {
border-radius: 2px 2px 2px 2px; color: green;
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: 14px !important;
margin-top: 2px;
font-family: 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;
}
}
} }
.Yellow {
color: yellow;
}
.Orange {
color: orange;
}
.Red {
color: red;
}
.Black {
color: #000;
}
}
} }
.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 { .right-row {
width: 100%; margin-bottom: 10px;
height: 38px; }
margin-left: 20px;
>div { .right-text {
display: inline-flex; color: #fff;
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 {
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 { .weaterMain {
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); display: inline-flex;
} flex-direction: row;
width: 100%;
height: 40px;
.bluSel::after { .buttons {
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); 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;
font-weight: 800;
color: #ffffff;
z-index: 9;
}
.orgSel::after { > div::after {
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 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;
}
.weaterTitle::after { .redSel::after {
content: ""; background: linear-gradient(
position: absolute; 180deg,
top: 0px; #e73a14 0%,
left: 0px; rgba(240, 92, 9, 0) 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;
}
.weaterTitle::before { .yelSel::after {
content: ""; background: linear-gradient(
position: absolute; 180deg,
top: 38px; #fffa79 0%,
left: 0px; rgba(255, 208, 137, 0) 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;
}
.weaterTitle { .bluSel::after {
position: relative; background: linear-gradient(
display: inline-flex; 180deg,
width: 287px; #121ade 0%,
height: 38px; rgba(40, 18, 228, 0) 100%
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 { .orgSel::after {
display: inline-flex; background: linear-gradient(
font-size: 16px; 180deg,
font-family: PingFang SC, PingFang SC; #ffa623 0%,
font-weight: 400; rgba(255, 173, 53, 0) 100%
color: #FFFFFF; );
} }
}
.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;
}
.num { .weaterTitle::before {
display: inline-flex; content: "";
justify-content: center; position: absolute;
align-items: center; top: 38px;
font-size: 20px; left: 0px;
font-family: PangMenZhengDao; width: 100%;
font-weight: 400; height: 2px;
color: #D9001B; 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: 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 { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </style>

287
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue
View File

@ -1,160 +1,153 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="content"> <section class="content">
<RoadNetwork class="content-l" /> <RoadNetwork class="content-l" />
<WeatherForecast class="content-l" /> <WeatherForecast class="content-l" style="margin-right: 0" />
</section> </section>
<section class="foot"> <section class="foot">
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="短临预报" name="first"> <el-tab-pane label="短临预报" name="first">
<div class="foot-shot" > <div class="foot-shot">
<SortFaceForecast /> <SortFaceForecast />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="站点气象信息查询" name="second"> <el-tab-pane label="站点气象信息查询" name="second">
<WeatherInfoQuery ref="infoQuery" /> <WeatherInfoQuery ref="infoQuery" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="气象预警" name="third"> <el-tab-pane label="气象预警" name="third">
<WeatherWarning /> <WeatherWarning />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import RoadNetwork from './components/roadNetwork'; import RoadNetwork from "./components/roadNetwork";
import WeatherForecast from './components/weatherForecast'; import WeatherForecast from "./components/weatherForecast";
import SortFaceForecast from './components/sortFaceForecast'; import SortFaceForecast from "./components/sortFaceForecast";
import WeatherInfoQuery from './components/weatherInfoQuery'; import WeatherInfoQuery from "./components/weatherInfoQuery";
import WeatherWarning from './components/weatherWarning'; import WeatherWarning from "./components/weatherWarning";
export default { export default {
name: 'MeteorologyCheck', name: "MeteorologyCheck",
components: { components: {
RoadNetwork, RoadNetwork,
WeatherForecast, WeatherForecast,
SortFaceForecast, SortFaceForecast,
WeatherInfoQuery, WeatherInfoQuery,
WeatherWarning WeatherWarning,
}, },
data(){ data() {
return { return {
activeName:"first" activeName: "first",
} };
},
methods: {
changeTabs() {
this.$refs.infoQuery.resizeChart();
}, },
methods:{ },
changeTabs(){ };
this.$refs.infoQuery.resizeChart(); </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;
.head {
width: 98%;
margin: auto;
margin-top: 15px;
} }
</script> .content {
width: 98%;
<style lang='scss' scoped> margin: auto;
display: flex;
::v-deep .el-tabs__item{ flex: 1;
display: inline-flex; pointer-events: none;
justify-content: center; margin-top: 19px;
font-size: 16px; > div {
font-family: PingFang SC, PingFang SC; pointer-events: auto;
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:99%;
}
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
.head{
width: 98%;
margin: auto;
margin-top: 15px;
} }
.content {
width: 98%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
>div {
pointer-events: auto;
}
.content-l {
width: calc(50%);
min-width:460px;
margin-right:20px;
}
.content-l {
width: calc(50%);
min-width: 460px;
margin-right: 20px;
}
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: calc(100% / 4 ); width: calc(100% / 4);
margin-right:20px; margin-right: 20px;
.content-m-t { .content-m-t {
width:100%; width: 100%;
height:240px; height: 240px;
margin-bottom: 20px; margin-bottom: 20px;
}
}
.content-r {
width: 49.4%;
} }
} }
.foot{ .content-r {
width: 98%; width: 49.4%;
margin: auto; }
display: flex; }
justify-content: space-between; .foot {
flex: 1; width: 98%;
pointer-events: none; margin: auto;
margin-top: 8px; display: flex;
>div { justify-content: space-between;
pointer-events: auto; flex: 1;
} pointer-events: none;
margin-top: 8px;
.foot-w { > div {
width:100%; pointer-events: auto;
}
} .foot-w {
width: 100%;
}
.foot-l { .foot-l {
width: 726px; width: 726px;
} }
.foot-m { .foot-m {
width: 613px; width: 613px;
} }
.foot-r { .foot-r {
width: 493px; width: 493px;
}
} }
} }
</style> }
</style>

1100
ruoyi-ui/src/views/event/event/dispatch.vue
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save