Browse Source

气象数据

wangqin
zhangzhang 11 months ago
parent
commit
718cbdcf67
  1. 56
      ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue
  2. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
  4. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
  5. 5
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
  6. 157
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
  7. 5
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
  8. 152
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
  9. 297
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
  10. 64
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue

56
ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue

@ -1,32 +1,34 @@
<template>
<BorderRadiusImage
class="Card"
borderRadius="2px"
borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))"
borderWidth="2px"
>
<div class="info" :style="{ gap }">
<p v-for="(item, index) in keyMap" :key="index">
<span>{{ item.label }}: </span>
<span>
<slot :name="`form-${item.key}`" :data="cardData">
{{ getValue(item.key) }}{{ item.suffix }}
</slot>
</span>
</p>
</div>
<div @click="onClick">
<BorderRadiusImage
class="Card"
borderRadius="2px"
borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))"
borderWidth="2px"
>
<div class="info" :style="{ gap }">
<p v-for="(item, index) in keyMap" :key="index">
<span>{{ item.label }}: </span>
<span>
<slot :name="`form-${item.key}`" :data="cardData">
{{ getValue(item.key) }}{{ item.suffix }}
</slot>
</span>
</p>
</div>
<div class="bottom" v-if="hasBtn">
<slot name="button">
<Button>
{{ buttonText }}
</Button>
</slot>
</div>
<!-- <div class="status" :style="{ background: 'linear-gradient(123deg, #00B3CC 0%, rgba(0, 179, 204, 0) 100%)' }">
<div class="bottom" v-if="hasBtn">
<slot name="button">
<Button>
{{ buttonText }}
</Button>
</slot>
</div>
<!-- <div class="status" :style="{ background: 'linear-gradient(123deg, #00B3CC 0%, rgba(0, 179, 204, 0) 100%)' }">
<span class="text">正常</span>
</div> -->
</BorderRadiusImage>
</BorderRadiusImage>
</div>
</template>
<script>
@ -107,6 +109,10 @@ export default {
getValue(key) {
return pathGet(this.cardData, key) ?? "-";
},
onClick() {
this.$emit("click", this.data);
},
},
};
</script>

11
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue

@ -32,7 +32,7 @@
<p
v-for="(item, index) in dayShift"
:key="`${item.id}_${index}`"
@click="removeDutyPerson(item,'dayShift')"
@click="removeDutyPerson(item, 'dayShift')"
>
{{ item.name }}
</p>
@ -46,7 +46,7 @@
<p
v-for="(item, index) in graveyardShift"
:key="`${index}_${item.id}`"
@click="removeDutyPerson(item,'graveyardShift')"
@click="removeDutyPerson(item, 'graveyardShift')"
>
{{ item.name }}
</p>
@ -139,7 +139,7 @@ export default {
},
set(bool) {
//,
if(!bool) {
if (!bool) {
this.dayShift = [];
this.graveyardShift = [];
this.peopleList = [];
@ -184,7 +184,7 @@ export default {
this[this.active].push(item);
},
removeDutyPerson(item, activeCheck) {
if(activeCheck != this.active) return;
if (activeCheck != this.active) return;
const index = this[this.active].findIndex(
(_item) => _item.id === item.id
@ -393,7 +393,8 @@ export default {
<style lang="scss" scoped>
.ModifyDutyInformationTable {
width: 947px;
height: 658px;
// height: 658px;
height: 570px;
color: #fff;
display: flex;
flex-direction: column;

2
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@ -1,5 +1,5 @@
<template>
<Dialog v-model="modelVisible" title="事件详情" width="880px" top="15%">
<Dialog v-model="modelVisible" title="事件详情" width="890px" top="15%">
<div
class="EventDetail"
:style="{

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js

@ -58,7 +58,7 @@ var options = {
grid: {
top: "15%", //上边距
right: "0", //右边距
left: "15px", //左边距
left: "30px", //左边距
bottom: "0%", //下边距
containLabel: true,
},

5
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js

@ -108,10 +108,7 @@ var options = {
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,
], // 纵坐标数据
data: [], // 纵坐标数据
lineStyle: {
color: "#FFD15C",
},

157
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue

@ -1,75 +1,98 @@
<template>
<div class='congestion'>
<WgtTitle :title="'气温变化趋势'"></WgtTitle>
<div class="board">
<div class="charts" id="temperatureTrend"></div>
</div>
<div class="congestion">
<WgtTitle :title="'气温变化趋势'"></WgtTitle>
<div class="board">
<div class="charts" id="temperatureTrend"></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
</div>
</template>
<script>
import WgtTitle from "../../../../../widgets/title";
import * as echarts from "echarts";
import temperatureCharts from "./assets/charts";
import {
getListLatest,
getDeviceNameListLatest,
getIdDevices,
} from "@/api/perception/meteorologyCheck";
export default {
name: "temperatureTrend",
components: {
WgtTitle,
},
props: {
data: {
type: Array,
},
data() {
return {
myChart:null,
}
},
created() {
},
methods: {
reiszeChart(){
this.$nextTick(() => {
if ( this.myChart ) {
this.myChart.resize();
}
},
watch: {
data: {
handler(data) {
let newData = [];
data.forEach((item) => {
newData.push(item.avgVisibility);
});
}
},
update(){
temperatureCharts.series[0].data = newData;
this.myChart.setOption(temperatureCharts);
},
deep: true,
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById('temperatureTrend'));
this.myChart.setOption(chartsStatistics);
});
},
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(temperatureCharts);
});
});
},
};
</script>
<style lang="scss" scoped>
.congestion {
display: flex;
flex-direction: column;
.board {
flex: 1;
padding: 0px 20px;
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;
}
</script>
<style lang='scss' scoped>
.congestion {
display: flex; flex-direction: column;
.board{
flex: 1;
padding: 0px 20px;
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;
}
}
.charts {
height:200px;
width: 100%;
}
</style>
}
.charts {
height: 200px;
width: 100%;
}
</style>

5
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js

@ -107,10 +107,7 @@ var options = {
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,
], // 纵坐标数据
data: [], // 纵坐标数据
lineStyle: {
color: "#0783FA",
},

152
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue

@ -1,74 +1,94 @@
<template>
<div class='congestion'>
<WgtTitle :title="'能见度变化趋势'"></WgtTitle>
<div class="board">
<div class="charts" id="VisibilityTrends"></div>
</div>
<div class="congestion">
<WgtTitle :title="'能见度变化趋势'"></WgtTitle>
<div class="board">
<div class="charts" id="VisibilityTrends"></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
</div>
</template>
<script>
import WgtTitle from "../../../../../widgets/title";
import * as echarts from "echarts";
import visibilityCharts from "./assets/charts";
export default {
name: "VisibilityTrends",
components: {
WgtTitle,
},
props: {
data: {
type: Array,
},
data() {
return {
myChart:null,
}
},
created() {
},
methods: {
reiszeChart(){
this.$nextTick(() => {
if ( this.myChart ) {
this.myChart.resize();
}
},
watch: {
data: {
handler(data) {
let newData = [];
data.forEach((item) => {
newData.push(item.avgTemperature);
});
}
},
update(){
visibilityCharts.series[0].data = newData;
this.myChart.setOption(visibilityCharts);
},
deep: true,
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById('VisibilityTrends'));
this.myChart.setOption(chartsStatistics);
});
},
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(visibilityCharts);
});
});
},
};
</script>
<style lang="scss" scoped>
.congestion {
display: flex;
flex-direction: column;
align-items: stretch;
.board {
flex: 1;
padding: 0px 20px;
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;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
</script>
<style lang='scss' scoped>
.congestion {
display: flex; flex-direction: column; align-items: stretch;
.board{
flex: 1;
padding: 0px 20px;
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; flex-direction: column;
justify-content: center;
align-items: stretch;
}
}
.charts {
height:200px;
}
</style>
}
.charts {
height: 200px;
}
</style>

297
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue

@ -1,156 +1,167 @@
<template>
<div class='congestion'>
<WgtTitle :title="'气象监测数据'"></WgtTitle>
<div class="board">
<div class="showRoad">
<div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
<span class="label" >{{ it.text }}</span>
<span class="text" >{{ it.value }}</span>
</div>
<div class="congestion">
<WgtTitle :title="'气象监测数据'"></WgtTitle>
<div class="board">
<div class="showRoad">
<div class="item">
<span class="label">温度</span>
<span class="text">{{
data.temperature ? data.temperature + "℃" : "-"
}}</span>
</div>
</div>
<div class="item">
<span class="label">湿度</span>
<span class="text">{{
data.humidity ? data.humidity + "mm" : "-"
}}</span>
</div>
<div class="item">
<span class="label">风向</span>
<span class="text">{{
data.windDirection ? data.windDirection + "°" : "-"
}}</span>
</div>
<div class="item">
<span class="label">风速</span>
<span class="text">{{
data.windSpeed ? data.windSpeed + "级" : "-"
}}</span>
</div>
<div class="item">
<span class="label">能见度</span>
<span class="text">{{
data.visibilityType ? data.visibilityType + "级" : "-"
}}</span>
</div>
<!-- <div class="item">
<span class="label">能见度类型</span>
<span class="text">{{ data.visibilityType }}</span>
</div> -->
<!-- <div class="item">
<span class="label">降雨类型</span>
<span class="text">{{
data.recipitationType ? data.recipitationType : "-"
}}</span>
</div> -->
<div class="item">
<span class="label">降雨量</span>
<span class="text">{{
data.rainfall ? data.rainfall + "mm" : "-"
}}</span>
</div>
<div class="item">
<span class="label">路面温度</span>
<span class="text">{{
data.remoteRoadSurfaceTemperature
? data.remoteRoadSurfaceTemperature + "℃"
: "-"
}}</span>
</div>
<div class="item">
<span class="label"> 气压</span>
<span class="text">{{
data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-"
}}</span>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from '../../../../../widgets/title'
export default {
name: 'MonthStatistics',
components: {
WgtTitle
},
data() {
return {
myChart:null,
dataList:[
{
text:"天气状态:",
value:"无降水",
class:"km"
},
{
text:"风速:",
value:"55m/s",
class:"km"
},
{
text:"天气温度:",
value:"23°C",
class:"km"
},
{
text:"风向:",
value:"东南风",
class:"km"
},
{
text:"路面温度:",
value:"23°C",
class:"km"
}, {
text:"风级:",
value:"2级",
class:"km"
}, {
text:"空气湿度:",
value:"79.40%",
class:"km"
}, {
text:"道路危险等级:",
value:"0级",
class:"km"
}, {
text:"能见度:",
value:"2610.00m",
class:"km"
}, {
text:"能见度:",
value:"0.00m",
class:"km"
}, {
text:"能见度:",
value:"0.00m",
class:"km"
}, {
text:"能见度:",
value:"0.00m",
class:"km"
}
]
}
},
created() {
},
methods: {
</div>
</template>
<script>
import WgtTitle from "../../../../../widgets/title";
export default {
name: "MonthStatistics",
components: {
WgtTitle,
},
props: {
data: {
type: Object,
default: () => {},
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
watch: {
data: {
handler(newVal) {
console.log(newVal);
},
deep: true,
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%; display: flex;
.board{
flex: 1;
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: 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;
overflow: auto;
},
data() {
return {
myChart: null,
dataList: [],
};
},
created() {},
methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {});
});
},
};
</script>
.showRoad {
display: flex;
flex-wrap: wrap;
<style lang="scss" scoped>
.congestion {
width: 100%;
display: flex;
.board {
flex: 1;
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: 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;
overflow: auto;
> .item {
display: inline-flex;
width:50%;
height:23px;
margin-top:12px;
flex-direction: row;
.showRoad {
display: flex;
flex-wrap: wrap;
> span.label {
width:50%;
height:25px;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #00B3CC;
}
> .item {
display: inline-flex;
width: 50%;
height: 23px;
margin-top: 12px;
flex-direction: row;
>span.text {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
> span.label {
width: 50%;
height: 25px;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #00b3cc;
}
}
> span.text {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #ffffff;
}
}
}
}
.charts {
height:180px;
width: 100%;
}
</style>
}
.charts {
height: 180px;
width: 100%;
}
</style>

64
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue

@ -2,24 +2,40 @@
<div class="congestion">
<div class="queryList">
<Card
v-for="(item, index) in data"
v-for="(item, index) in dataList"
:cardData="item"
:keyMap="keyMap"
:hasBtn="false"
:gap="'10px'"
:key="index"
@click="handleClick(item)"
>
<!-- <template #form-start="{ data }">
<template #form-direction="{ data }">
<div class="endSpecial">
{{ data.start }} <img src="./assets/weater.png" />
{{
data.direction == 1
? "菏泽方向"
: data.direction == 2
? "双向"
: "济南方向"
}}
</div>
</template> -->
</template>
<template #form-deviceState="{ data }">
<div class="endSpecial">
{{ data.deviceState == 1 ? "在线" : "离线" }}
</div>
</template>
</Card>
</div>
<div class="queryCharts">
<WeateData class="charts-l" />
<TemperatureTrend ref="temper" class="charts-ms" />
<VisibilityTrends ref="visibility" class="charts-ms" />
<WeateData class="charts-l" :data="dataItem" />
<TemperatureTrend ref="temper" class="charts-ms" :data="weatherData" />
<VisibilityTrends
ref="visibility"
class="charts-ms"
:data="weatherData"
/>
</div>
</div>
</template>
@ -48,27 +64,30 @@ export default {
keyMap: [
{
label: "设备名称",
key: "name",
key: "deviceName",
},
{
label: "设备位置",
key: "name",
key: "stakeMark",
},
{
label: "所属方向",
key: "rote",
key: "direction",
},
{
label: "采集时间",
key: "time",
key: "createTime",
},
{
label: "气象状态",
key: "start",
label: "设备状态",
key: "deviceState",
},
],
deviceName: "",
selectIndex: 0,
dataList: [],
dataItem: {},
weatherData: [],
data: Array.from({ length: 10 }).map(() => ({
name: "气象监测器1",
rote: "济南方向",
@ -85,15 +104,27 @@ export default {
this.selectIndex = index;
},
resizeChart() {
// console.log(this.$refs.temper);
this.$refs.temper.reiszeChart();
this.$refs.visibility.reiszeChart();
},
getList() {
getListLatest().then((res) => {
console.log("_____________", res);
this.dataList = res.rows;
this.dataItem = res.rows[0];
this.deviceName = res.rows[0].deviceName;
this.getWeather();
});
},
getWeather() {
getDeviceNameListLatest(this.deviceName).then((res) => {
this.weatherData = res.rows;
});
},
handleClick(item) {
this.dataItem = item;
this.deviceName = item.deviceName;
this.getWeather();
},
},
mounted() {
this.getList();
@ -104,7 +135,7 @@ export default {
<style lang="scss" scoped>
.endSpecial {
position: relative;
top: -10px;
// top: -10px;
> img {
display: inline-flex;
@ -147,6 +178,7 @@ export default {
height: 203px;
margin-top: 10px;
margin-left: 20px;
cursor: pointer;
}
> div:nth-child(5n + 1) {

Loading…
Cancel
Save