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