31 changed files with 1382 additions and 406 deletions
@ -1,156 +1,161 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<div class="queryList" > |
|||
<Card v-for="(item, index) in data" :cardData="item" :keyMap="keyMap" :hasBtn="false" :gap="'10px'" :key="index"> |
|||
<template #form-start="{ data }"> |
|||
<div class="endSpecial"> |
|||
{{ data.start }} <img src="./assets/weater.png" /> |
|||
</div> |
|||
</template> |
|||
</Card> |
|||
</div> |
|||
<div class="queryCharts" > |
|||
<WeateData class="charts-l" /> |
|||
<TemperatureTrend ref="temper" class="charts-ms" /> |
|||
<VisibilityTrends ref="visibility" class="charts-ms" /> |
|||
</div> |
|||
|
|||
<div class="congestion"> |
|||
<div class="queryList"> |
|||
<Card |
|||
v-for="(item, index) in dataList" |
|||
:cardData="item" |
|||
:keyMap="keyMap" |
|||
:hasBtn="false" |
|||
:gap="'10px'" |
|||
:key="index" |
|||
> |
|||
<!-- <template #form-start="{ data }"> |
|||
<div class="endSpecial"> |
|||
{{ data.start }} <img src="./assets/weater.png" /> |
|||
</div> |
|||
</template> --> |
|||
</Card> |
|||
</div> |
|||
<div class="queryCharts"> |
|||
<WeateData class="charts-l" /> |
|||
<TemperatureTrend ref="temper" class="charts-ms" /> |
|||
<VisibilityTrends ref="visibility" class="charts-ms" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card1/index.vue" |
|||
import WeateData from './components/weaterData' |
|||
import TemperatureTrend from './components/TemperatureTrend'; |
|||
import VisibilityTrends from './components/visibilityTrends'; |
|||
</div> |
|||
</template> |
|||
|
|||
export default { |
|||
name: 'WeatherInfoQuery', |
|||
components: { |
|||
Card, |
|||
WeateData, |
|||
TemperatureTrend, |
|||
VisibilityTrends, |
|||
}, |
|||
data() { |
|||
return { |
|||
keyMap:[ |
|||
{ |
|||
label:"设备名称", |
|||
key:"name" |
|||
}, |
|||
{ |
|||
label:"设备位置", |
|||
key:"name" |
|||
}, |
|||
{ |
|||
label:"所属方向", |
|||
key:"rote" |
|||
}, |
|||
{ |
|||
label:"采集时间", |
|||
key:"time" |
|||
}, |
|||
{ |
|||
label:"气象状态", |
|||
key:"start" |
|||
} |
|||
], |
|||
selectIndex:0, |
|||
data: Array.from({ length: 10 }).map(() => ({ |
|||
name: "气象监测器1", |
|||
rote:"济南方向", |
|||
arrdeass: "K59+256", |
|||
time: "2024.01.04 13:00:00", |
|||
start: "晴转多云", |
|||
})), |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card1/index.vue"; |
|||
import WeateData from "./components/weaterData"; |
|||
import TemperatureTrend from "./components/TemperatureTrend"; |
|||
import VisibilityTrends from "./components/visibilityTrends"; |
|||
import { |
|||
getListLatest, |
|||
getDeviceNameListLatest, |
|||
getIdDevices, |
|||
} from "@/api/perception/meteorologyCheck"; |
|||
|
|||
export default { |
|||
name: "WeatherInfoQuery", |
|||
components: { |
|||
Card, |
|||
WeateData, |
|||
TemperatureTrend, |
|||
VisibilityTrends, |
|||
}, |
|||
data() { |
|||
return { |
|||
keyMap: [ |
|||
{ |
|||
label: "设备名称", |
|||
key: "name", |
|||
}, |
|||
{ |
|||
label: "设备位置", |
|||
key: "name", |
|||
}, |
|||
{ |
|||
label: "所属方向", |
|||
key: "rote", |
|||
}, |
|||
{ |
|||
label: "采集时间", |
|||
key: "time", |
|||
}, |
|||
{ |
|||
label: "气象状态", |
|||
key: "start", |
|||
}, |
|||
], |
|||
selectIndex: 0, |
|||
dataList: [], |
|||
// data: Array.from({ length: 10 }).map(() => ({ |
|||
// name: "气象监测器1", |
|||
// rote: "济南方向", |
|||
// arrdeass: "K59+256", |
|||
// time: "2024.01.04 13:00:00", |
|||
// start: "晴转多云", |
|||
// })), |
|||
}; |
|||
}, |
|||
|
|||
created() {}, |
|||
methods: { |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
resizeChart(){ |
|||
resizeChart() { |
|||
// console.log(this.$refs.temper); |
|||
this.$refs.temper.reiszeChart(); |
|||
this.$refs.visibility.reiszeChart(); |
|||
} |
|||
this.$refs.temper.reiszeChart(); |
|||
this.$refs.visibility.reiszeChart(); |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
getList() { |
|||
getListLatest().then((res) => { |
|||
console.log("_____________", res); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.endSpecial { |
|||
position: relative; |
|||
top:-10px; |
|||
|
|||
>img { |
|||
display: inline-flex; |
|||
margin-left:20px; |
|||
} |
|||
} |
|||
|
|||
.congestion { |
|||
width: 100%; |
|||
height:100%; |
|||
display: flex; flex-direction: column; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.endSpecial { |
|||
position: relative; |
|||
top: -10px; |
|||
|
|||
> img { |
|||
display: inline-flex; |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
|
|||
.queryCharts { |
|||
display: inline-flex; |
|||
width:100%; |
|||
flex:1; |
|||
.congestion { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.charts-l { |
|||
width:30%; |
|||
} |
|||
.queryCharts { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
flex: 1; |
|||
|
|||
.charts-ms { |
|||
width:40%; |
|||
margin-left:14px; |
|||
} |
|||
} |
|||
.charts-l { |
|||
width: 30%; |
|||
} |
|||
|
|||
.queryList { |
|||
position: relative; |
|||
top:-10px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:440px; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
.charts-ms { |
|||
width: 40%; |
|||
margin-left: 14px; |
|||
} |
|||
} |
|||
|
|||
> div { |
|||
width:calc(100%/5 - 18px); |
|||
height:203px; |
|||
margin-top:10px; |
|||
margin-left:20px; |
|||
} |
|||
.queryList { |
|||
position: relative; |
|||
top: -10px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 440px; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
|
|||
> div:nth-child(5n + 1) { |
|||
margin-left:0px; |
|||
} |
|||
> div { |
|||
width: calc(100% / 5 - 18px); |
|||
height: 203px; |
|||
margin-top: 10px; |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
> div:nth-child(5n) { |
|||
margin-right:0px; |
|||
} |
|||
} |
|||
> div:nth-child(5n + 1) { |
|||
margin-left: 0px; |
|||
} |
|||
|
|||
> div:nth-child(5n) { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue